/* ==========================================================================
   Bareface — customer surfaces
   Shared by /upload (the link lookup) and /review. The order page and the
   teammate's page carry the design system's own tokens and /shared/photos.css.

   Lives in /shared/ for the reason _worker.js already documents: hostname-
   mapped surfaces rewrite /x into /<surface>/x, so a root-level /customer.css
   would 404 as /review/customer.css on the proofs hostname. /shared/ is
   exempt from that prefixing, so one path works on every hostname. Reference
   it as /shared/customer.css.

   NOT loaded by /account-preview: that page is a staging harness for the
   Webflow Orders page, and in production its design lives in Webflow. Binding
   a Webflow mock to the Worker's stylesheet would couple two things that ship
   on different platforms. Its button treatment (2px radius, 700, uppercase,
   tracked) is the live site's, and is the reference this file should move
   toward in the design pass -- see --radius-btn and the button block below.

   Everything here is shell or component. Page layout (.wrap) and page-specific
   components stay in each page's own <style> block, because they are not
   shared and hoisting them would only make this file a dumping ground.
   ========================================================================== */

:root{
  color-scheme: light only;

  /* -- Palette ---------------------------------------------------------- */
  --ink:#1C1C1C;
  --paper:#FFFFFF;
  --surface:#F7F7F7;
  --muted:#5D5F69;
  --line:#E1E2E5;
  --wash:#F2F4F1;
  --dim:#A5A7AF;          /* placeholders, inactive dots */
  --line-hover:#C9CBD1;
  --surface-hover:#EDEDEA;

  /* Status. Named by meaning, not by hue, so the design pass can restate
     what "needs attention" looks like in one place. */
  --warn-bg:#FBF4E8;  --warn-line:#EBDCC0;  --warn-ink:#7A5B1E;
  --ok-bg:#F2F4F1;    --ok-line:#D5DED6;    --ok-ink:#2E5638;
  --err-ink:#7A2E2E;

  /* -- Shape ------------------------------------------------------------
     The main design-pass lever. Proofing currently sits at 6px; the brand
     (and the Webflow account page) is effectively square. Moving these four
     numbers restyles every surface at once. */
  --radius-btn:6px;
  --radius-field:6px;
  --radius-box:6px;
  --radius-modal:10px;

  /* -- Type -------------------------------------------------------------- */
  --font:'Inter',-apple-system,sans-serif;
  --fs-body:15px;
  --fs-small:12.5px;

  /* Button voice, set 2026-09-07: 12px/500, 48px tall, square. */
  --btn-fs:12px;
  --btn-weight:500;
  --btn-track:normal;
  --btn-transform:none;
  --btn-pad:15px 20px;

  /* -- Space --------------------------------------------------------------
     Three tiers, each at least double the one below, so hierarchy comes from
     distance rather than from rules and boxes (decided 2026-09-04 on the
     order-page boards):
       inside a group        12-32px   (--space-3 .. --space-8)
       between groups        72px      (--gap-group)
       between sections      96px      (--gap-section)
     A phone keeps the same logic on a smaller scale: both upper tiers are 64.
     Rules separate siblings; whitespace bounds groups. A list never opens or
     closes with a rule unless the rule sits under a heading. */
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --gap-group:72px;
  --gap-section:96px;
  /* Label-value rows: this much each side of the rule between them. */
  --row-pad:22px;

  /* -- Shell ------------------------------------------------------------- */
  --gutter:40px;
  --gutter-sm:18px;

  /* Stepper. Overridden per page: the portal runs more steps in less width. */
  --step-fs:12px;
  --step-gap:9px;
  --step-connector:44px;
  --step-connector-margin:0 12px;
}

/* -- Reset ---------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  background:var(--paper) !important;color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.55;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
}
button,input,textarea{font-family:var(--font)}

/* -- Header --------------------------------------------------------------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);
  border-bottom:1px solid var(--line);background:var(--paper);
}
.wordmark{display:flex;align-items:center}
.wordmark .logo{height:17px;width:auto;display:block}
/* One logo size on every customer page: 17 on desktop and tablet, 14 on the
   phone, as the account pages and the canvas draw it (2026-09-14). */
@media (max-width:640px){ .wordmark .logo{height:14px} }
.order-tag{font-size:13px;color:var(--muted);text-align:right}
.order-tag strong{color:var(--ink);font-weight:600}

/* -- Progress stepper ----------------------------------------------------- */
.progress{display:flex;justify-content:center;flex-wrap:wrap;padding:24px 20px 2px;background:var(--paper)}
.step{
  display:flex;align-items:center;gap:var(--step-gap);
  font-size:var(--step-fs);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.step .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--dim);background:var(--paper);flex:none}
.step.done .dot,.step.current .dot{background:var(--ink);border-color:var(--ink)}
.step.done,.step.current{color:var(--ink)}
.step.current{font-weight:700}
.step.current .dot{box-shadow:0 0 0 4px rgba(28,28,28,.08)}
.connector{width:var(--step-connector);height:1.5px;background:var(--line);margin:var(--step-connector-margin);align-self:center}
.connector.filled{background:var(--ink)}
.progress-note{text-align:center;font-size:var(--fs-small);color:var(--muted);padding:8px 20px 0;background:var(--paper)}

/* -- Status chip ---------------------------------------------------------- */
.chip{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:14px;
}
.chip.review{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.chip.edits{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.chip.approved{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink)}

/* -- Buttons --------------------------------------------------------------
   .btn carries shape and voice only; colour comes from a variant, so a page
   can never end up with a differently-coloured button by accident. */
.btn{
  display:block;width:100%;padding:var(--btn-pad);
  /* 18 + 15 + 15 = 48. Height is stated as line-height plus padding rather
     than as a `height`, so the box still grows if a label ever wraps. */
  font-size:var(--btn-fs);font-weight:var(--btn-weight);line-height:18px;
  letter-spacing:var(--btn-track);text-transform:var(--btn-transform);
  border-radius:var(--radius-btn);cursor:pointer;text-align:center;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
/* 1px to match the fields. Offset 2px keeps the ring clear of the button's own
   edge, so it still reads as a ring rather than thickening the border. */
.btn:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.btn[disabled],.btn:disabled{opacity:.55;cursor:default}
/* The solid button alone is 600 and tracked .2px (2026-09-21), to match every
   other black button on the customer pages; secondary and tertiary keep the
   plain voice above. */
.btn-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-weight:600;letter-spacing:.2px}
.btn-primary:hover{background:#000}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);margin-top:12px}
.btn-secondary:hover{background:var(--surface-hover)}
.btn-tertiary{background:none;border:1px solid var(--line);color:var(--ink)}
.btn-tertiary:hover{background:var(--surface)}

/* Paired with the button above it, not a third step: 12px, and a 44px box so
   the way out is as reachable as the thing it backs out of. */
.cancel{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;
  margin-top:12px;width:100%;min-height:44px;font-family:inherit}
.cancel:hover{color:var(--ink)}

/* -- Modal ---------------------------------------------------------------- */
/* `inset:0` alone sizes this to the LARGE viewport on iOS Safari -- the one
   measured with the toolbars retracted -- so the bottom of the box sits behind
   the toolbar that is actually on screen. Centring a tall card in it then
   pushes the card's foot out of sight. `dvh` is the height you can see, and it
   follows the toolbars as they come and go. The `vh` line stays underneath it
   for anything that does not know `dvh`. */
.overlay{position:fixed;inset:0;height:100vh;height:100dvh;
  background:rgba(28,28,28,.45);display:none;align-items:center;justify-content:center;
  padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
  z-index:50;overscroll-behavior:contain}
.overlay.open{display:flex}
/* The confirm dialog, built on the share card's system so the two read as one
   family: same 8px radius, same shadow, same 16/600 title, same 32px of air.
   Narrower on purpose -- 430 against the share card's 520 -- because this one
   holds a question and its consequence, not a working surface.

   Two steps, not four. 12 holds the message together: the question, the
   consequence, and the warning callout when there is one are a single thing to
   read. 32 breaks message from actions. The old card ran 8 / 16 / 12, three
   near-identical gaps that grouped nothing and left everything flat.

   No rule between them. A 48px black button separates itself by its own mass,
   and a line on top of that counts the separation twice -- the same reasoning
   the share card carries. */
.modal{background:var(--paper);border-radius:var(--radius-modal);max-width:430px;width:100%;padding:32px;box-shadow:0 20px 60px rgba(28,28,28,.25)}
.modal h3{font-size:16px;font-weight:600;letter-spacing:-.1px;margin:0}
.modal p{font-size:13px;line-height:1.55;color:var(--muted);margin:12px 0 0}
.modal .btn{margin-top:32px}
@media (max-width:700px){
  /* 20, matching the share card's own phone padding. */
  .modal{padding:20px}
}

.copy-box{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.copy-box button{
  flex:none;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius-field);padding:0 16px;font-size:13px;font-weight:600;
  cursor:pointer;color:var(--ink);
}

/* -- Loading --------------------------------------------------------------
   Sticky footer: the page fills the viewport so the footer sits on the bottom
   edge instead of floating mid-screen on short orders. main is hidden until
   the fetch resolves, so the loading state has to grow too -- otherwise the
   footer jumps up while the page loads. */
main{flex:1 0 auto}
.load-state{flex:1 0 auto;text-align:center;color:var(--muted);font-size:14px;letter-spacing:-.14px;padding:70px 20px}

/* -- Footer ---------------------------------------------------------------
   The platform footer is /shared/footer.css (2026-09-14). The old "Questions?"
   footer and its address are gone. */

/* -- Small screens --------------------------------------------------------- */
@media (max-width:700px){
  :root{--gap-group:64px;--gap-section:64px}
  header{padding:16px var(--gutter-sm)}
  .progress{padding:18px 14px 2px}
  .connector{width:28px;margin:0 8px}
  .step span.lbl{display:none}
  .step.current span.lbl{display:inline}
}