/* ================================================================================================
   COMPOSITION — the layer that makes the page DESIGNED rather than merely dark.

   Kyle: "It doesn't all just need to be dark. It needs to be creative and designed." And before
   that: "Looks like we put all of our effort into the top portion and just mailed it in on the
   bottom half."

   Both were fair. Recolouring a stack of equal-weight cards is not designing; it is the same
   layout in a different palette. Four moves do the actual work, and none of them are colour:

     1. BLEED — rails run off the right edge instead of sitting inside a padded box, so the page
        reads as a lookbook that continues rather than a container that ended.
     2. LAYERING — the proof's words sit ON the artwork under a gradient, not in a caption bar
        beneath it. A picture in a box with a label under it is a component. Type over image is a
        composition.
     3. VARIED WEIGHT — the first graphic in a rail is twice the size of its neighbours. A row of
        identical squares is a catalogue; unequal sizes tell the eye where to start.
     4. HIERARCHY — a design name at 24px over a 10px tracked kicker. Everything below the hero
        used to sit between 13 and 16px, which is why it read flat no matter what colour it was.

   Loaded last.
   ================================================================================================ */

/* ---------- 1. BLEED ---------------------------------------------------------------------------
   The rail escapes main's padding and runs to the edge of the screen. The first tile still lines
   up with the text above it, so the grid holds — it is the RIGHT edge that is allowed to break. */
main{ overflow-x:clip; }
.rail{
  margin-left:calc(var(--pad, 16px) * -1);
  margin-right:calc(var(--pad, 16px) * -1);
  padding-left:var(--pad, 16px);
  padding-right:var(--pad, 16px);
  scroll-padding-left:var(--pad, 16px);
}
:root{ --pad:16px; }
@media (min-width:900px){ :root{ --pad:0px; } }

/* ---------- 2. LAYERING — the proof as a plate -------------------------------------------------
   Artwork edge to edge; the words over it under a scrim that only exists where the words are. */
.plate{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  border-radius:14px; overflow:hidden; background:var(--surface); text-align:left;
  box-shadow:0 18px 40px -24px rgba(20,24,28,.45);
}
.plate::after{                        /* the ember hairline, drawn rather than bordered */
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(194,112,61,.55);
}
.plate:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.plate-im{ display:block; width:100%; aspect-ratio:4/3; background:#F4F6F8; }
.plate-im img{ width:100%; height:100%; object-fit:cover; display:block; }
.plate-im .none{
  display:grid; place-items:center; height:100%; color:var(--ink-3); font-size:13px; padding:30px;
}
.plate-over{
  position:absolute; left:0; right:0; bottom:0; display:block; padding:60px 20px 20px;
  background:none;
}
.plate-kick{
  display:block; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ember); margin-bottom:6px;
}
.plate-name{
  display:block; font-family:var(--display); font-weight:600; font-size:clamp(22px,6.4vw,30px);
  line-height:1.05; letter-spacing:.01em; color:var(--ink);
}
.plate-meta{
  display:block; font-size:12.5px; color:var(--ink-2); margin-top:7px; letter-spacing:.02em;
}
.plate-cta{
  display:inline-block; margin-top:15px; font-family:var(--display); font-size:12px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#FFFFFF; background:var(--ember); border-radius:999px; padding:10px 18px;
}
@media (prefers-reduced-motion:no-preference){
  .plate-im img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
  .plate:hover .plate-im img{ transform:scale(1.035); }
}
@media (min-width:720px){
  .plate-im{ aspect-ratio:16/9; }
  .plate-over{ padding:80px 28px 26px; }
}


/* ---------- 4. HIERARCHY ----------------------------------------------------------------------
   A tracked micro-kicker over a large name. The old page had nothing above 16px below the hero,
   which is the real reason it read flat. */
.art-cap b{ font-size:14.5px; letter-spacing:-.005em; }
.art-cap span{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; }
.art-tag{ letter-spacing:.1em; }

/* Section heads: a rule that starts at the edge, a tracked label, an action pushed right. */
.sec-h{ position:relative; gap:11px; margin:34px 0 14px; }
.sec-h h2{ font-size:12px; letter-spacing:.2em; color:#8B949C; }
.sec-h::before{ width:26px; height:2px; }
.sec-h em{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* Row cards get a little more air and a left ember tick on hover, so a list has some life. */
@media (prefers-reduced-motion:no-preference){
  .row{ transition:border-color .18s ease, transform .18s ease; }
  .row:not(.static):hover{ border-color:#4A555F; transform:translateX(2px); }
}

/* ---------- correction: DO NOT overlay type on a proof ------------------------------------------
   Typing over the image is a good lookbook move and the wrong move HERE. A proof sheet is a
   document — it already has the design number, garment, colours and mockups printed across it — so
   an overlaid caption lands on top of the customer's own artwork and both become unreadable. Seen
   immediately once it rendered with real proportions.

   The composition survives; the layering does not. The artwork sits COMPLETE on its own dark
   ground (contain, never cropped — a proof must never be cropped, that is the whole point of it),
   and the caption block continues the same surface underneath with no divider between them. One
   object, two zones, nothing fighting. */
.plate-im{ aspect-ratio:4/3; display:grid; place-items:center; padding:14px; }
.plate-im img{ width:100%; height:100%; object-fit:contain; }
@media (min-width:720px){ .plate-im{ aspect-ratio:16/9; padding:18px; } }

.plate-over{
  position:static; padding:0 20px 20px;
  background:none;
}
.plate-name{ font-size:clamp(21px,5.8vw,28px); }
@media (min-width:720px){ .plate-over{ padding:0 28px 26px; } }

/* A hairline between the artwork and its caption, drawn only across the type column, so the two
   zones read as related rather than stacked. */
.plate-over::before{
  content:""; display:block; height:1px; background:linear-gradient(90deg,
    rgba(194,112,61,.55) 0%, rgba(194,112,61,.08) 40%, rgba(194,112,61,0) 100%);
  margin:0 0 16px;
}

/* Varied heights only work if the short ones are allowed to BE short. Without this the flex row
   stretches every tile to match the feature, and the smaller cards get a pocket of dead space
   under their caption — which reads as a bug, not as rhythm. */
.rail{ align-items:flex-start; }

/* ---------- the plate is PORTRAIT, because a proof is ----------------------------------------
   Kyle sent six real proofs. Every one is a SINGLE PAGE at 594×792pt — exactly 3:4 portrait,
   Adobe Illustrator artboards exported to PDF.

   The plate was 4:3 landscape, and 16:9 on desktop. A portrait page dropped into a landscape
   frame letterboxes into a thin strip with dead bands either side — the artwork a buyer is being
   asked to approve would have rendered at roughly a third of the available width. The frame now
   matches the page. */
.plate-im{ aspect-ratio:3/4; }
@media (min-width:720px){
  .plate-im{ aspect-ratio:3/4; max-height:74vh; }
  /* Side by side on a wide screen: the page upright on the left at a readable size, the detail
     and the decision on the right, rather than a tall page pushing the buttons off-screen. */
  .plate{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); align-items:stretch; }
  .plate-over{ display:flex; flex-direction:column; justify-content:center; padding:28px; }
  .plate-over::before{ margin-bottom:18px; }
}

/* The hero now carries four figures rather than three; on a phone they wrap to two rows and need
   to stay legible rather than shrink to fit. */
.hero-figs{ gap:16px 24px; }
.hero-figs > div{ flex:0 1 auto; min-width:104px; }

/* ================================================================================================
   YOUR BUSINESS — the analysis screen.
   Bars, not donuts: length is easier to judge than angle, and every row labels itself so no legend
   is needed. Ember for the current year, grey for last — two series, one accent, no rainbow.
   ================================================================================================ */
.years{ display:flex; gap:10px; align-items:flex-end; }
.yr{ flex:1; min-width:0; text-align:left; }
.yr-bar{
  height:120px; background:var(--surface-2); border-radius:6px 6px 3px 3px;
  display:flex; align-items:flex-end; overflow:hidden; margin-bottom:9px;
}
.yr-bar i{ display:block; width:100%; background:#4C6076; border-radius:5px 5px 0 0; }
/* The part-year bar is the current one, and it is marked so a short bar does not read as decline. */
.yr.part .yr-bar i{ background:var(--ember); }
.yr b{
  display:block; font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.yr span{ display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; margin-top:2px; }
@media (min-width:600px){ .yr b{ font-size:17px; } .yr-bar{ height:150px; } }

.bars{ display:grid; gap:11px; }
.bar-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:5px; }
.bar-h b{ font-size:13.5px; font-weight:600; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-h span{ margin-left:auto; font-size:12px; color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.bar-t{ height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.bar-t i{ display:block; height:100%; background:linear-gradient(90deg,#5A7189,#8FA6C0); border-radius:999px; }
.bar:first-child .bar-t i{ background:linear-gradient(90deg,#A85E2E,var(--ember)); }
.bar-u{ font-size:10.5px; color:var(--ink-3); margin-top:4px; letter-spacing:.04em; }

.note{ margin:9px 0 0; font-size:11.5px; color:var(--ink-3); font-style:italic; }

/* ---------- the verdict must work on ANY brand colour -------------------------------------------
   Green on a red brand band is a Christmas card. The hero band is now the customer's own colour, so
   the growth figure cannot carry a fixed hue — whatever we pick will clash with somebody. It goes
   white, and the WORD does the work: "Up 32.6%" already says which way it went, and a customer
   reading their own dashboard does not need to be told twice in green.

   The only coloured state left is a down year, which stays a muted warm neutral rather than a
   warning red — a soft year is not an error. */
.hero-verdict.up b, .hero-verdict.flat b{ color:#FFFFFF; }
.hero-verdict.down b{ color:rgba(255,255,255,.92); }
.hero-verdict{ color:rgba(255,255,255,.82); }
.hero-sub{ color:rgba(255,255,255,.62); }
.greet{ color:rgba(255,255,255,.68); }
.hero-acct{ color:#FFFFFF; }
.hero-figs b{ color:#FFFFFF; }
.hero-figs span{ color:rgba(255,255,255,.6); }
.hero-figs{ border-top-color:rgba(255,255,255,.18); }

/* ---------- desktop: align the hero to the content, and use the width -------------------------
   `main` is max-width 900 with 16px padding and border-box, so its text column starts 868px wide.
   `.hero-in` was max-width 900 INSIDE the hero's own 16px padding, which put the greeting 16px to
   the left of everything beneath it — a misalignment you cannot unsee once noticed.

   And on a wide screen the hero was a tall left-hand column with half a band of empty colour beside
   it. The verdict and the figures now sit side by side: the statement on the left, the numbers
   right-aligned against it, so the band is used rather than merely wide. */
.hero-in{ max-width:868px; }
@media (min-width:860px){
  .hero{ padding:34px 16px 30px; }
  .hero-in{
    display:grid; grid-template-columns:minmax(0,1.15fr) auto; gap:40px; align-items:end;
  }
  .hero-in > .greet{ grid-column:1; }
  .hero-in > .hero-acct{ grid-column:1; margin-bottom:10px; }
  .hero-in > .hero-verdict{ grid-column:1; margin:0; }
  .hero-figs{
    grid-column:2; grid-row:1 / span 3; margin:0; padding:0; border-top:none;
    display:grid; gap:16px; justify-items:end; text-align:right; align-content:end;
  }
  .hero-figs > div{ min-width:0; }
  .hero-figs b{ font-size:22px; }
}

/* ---------- both marks, bigger ---------------------------------------------------------------
   Kyle: "I wish the Forged Brands and [customer] (or customer logo) were larger."
   The top bar is the only place either brand appears, so timid logos make the whole thing feel
   tentative. Both go up, the bar grows to hold them, and the sticky tab strip moves down with it. */
.lockup{ height:46px; }
.acct-logo{ height:42px; max-width:190px; }
.topbar{ padding:12px 18px; gap:16px; }
.topbar .who span{ font-size:10.5px; }
@media (min-width:640px){
  .lockup{ height:56px; }
  .acct-logo{ height:54px; max-width:260px; }
  .topbar{ padding:14px 22px; }
}
/* The tab strip is sticky under the top bar, so its offset has to follow the taller bar or it
   overlaps on scroll. */

/* ---------- sign out is a way out, not a headline ---------------------------------------------
   Kyle: "Seems weird the sign out button is just as big as the customer logo. They compete too much
   with each other."

   Right — a bordered pill beside a logo reads as equal weight, and a housekeeping control should
   never look as important as either brand in the bar. It becomes quiet text: no border, no fill,
   muted until hovered. It keeps a full-size tap target through padding, so it is no harder to hit
   on a phone — it is only harder to NOTICE, which is correct for the one control nobody comes here
   to use. */
.topbar .iconbtn{
  background:none; border:none; padding:12px 2px 12px 14px; min-width:0;
  font-family:var(--display); font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.topbar .iconbtn:hover{ background:none; color:rgba(255,255,255,.9); }
.topbar .iconbtn:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:3px; border-radius:4px; }
/* The account's mark sits next to it, so the gap has to read as "these are separate things". */
.topbar .who{ margin-left:auto; }


/* ---- CAPPED LISTS ------------------------------------------------------------------------- */
.showing{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:14px 0 4px; font-size:12.5px; color:var(--ink-3);
  font-family:var(--display); letter-spacing:.06em; text-transform:uppercase;
}

/* ---- THE PROOF GRID AT SCALE --------------------------------------------------------------
   Two across is right on a laptop and wasteful on a desktop: twenty-five proofs at two per row is
   thirteen rows and nearly seven thousand pixels of scrolling, which is a filing cabinet, not a
   queue. The card does not change size — Kyle asked for consistency and he gets it — there are
   simply more of them per row as the screen earns it. */
@media (min-width:1080px){ .proofs{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1400px){ .proofs{ grid-template-columns:repeat(4, 1fr); } }

/* THE DATE, ON THE CARD. The list is ordered by when each one is needed, so the date has to be
   visible or the order looks arbitrary. Late is the only thing that gets colour. */
.proof-due{
  display:block; margin-top:6px;
  font-family:var(--display); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
.proof-due.late{ color:var(--ember); font-weight:600; }

/* ---- THE MONTH CHART -----------------------------------------------------------------------
   Axes, gridlines and a hover readout. The grid is a ruler: it must be visible enough to measure
   against and quiet enough that the two lines stay the only things you look at. */
.chart{ position:relative; flex:1 1 260px; min-width:0; }
.chart svg.mc{
  display:block; width:100%; height:auto; overflow:visible;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:8px;
  padding:10px 6px 4px; touch-action:pan-y;
}
.chart svg.mc:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

.mc .grid{ stroke:var(--line); stroke-width:1; }
.mc .ylab{
  fill:var(--ink-3); font-family:var(--display); font-size:11px; letter-spacing:.04em;
  text-anchor:end; font-variant-numeric:tabular-nums;
}
.mc .xlab{
  fill:var(--ink-3); font-family:var(--display); font-size:11px; letter-spacing:.06em;
  text-anchor:middle; text-transform:uppercase;
}
.mc .was{ fill:none; stroke:#767E86; stroke-width:2; stroke-dasharray:5 4; stroke-linejoin:round; }
.mc .now{ fill:none; stroke:var(--ember); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.mc .pt{ fill:var(--ember); }
.mc .cross{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; }
/* A ring in the surface colour separates the marker from the line it sits on. */
.mc .mk{ stroke:var(--surface-2); stroke-width:2.5; }
.mc .mk-now{ fill:var(--ember); }
.mc .mk-was{ fill:#767E86; }
.mc .hit{ fill:transparent; }

.tip{
  position:absolute; top:8px; z-index:5; pointer-events:none;
  min-width:150px; padding:9px 11px 10px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 6px 20px rgba(16,20,24,.16);
}
.tip b{
  display:block; font-family:var(--display); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.tip span{ display:flex; align-items:center; gap:7px; font-size:12.5px; line-height:1.7; }
.tip em{ margin-left:auto; font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }
.tip .gap{
  display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft);
  font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.tip .gap.up{ color:var(--good); }
.tip .gap.down{ color:var(--ink-3); }   /* a down month is a fact, not an alarm */

/* The same figures, for anyone not using a pointer or a screen. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- THE DASHBOARD -------------------------------------------------------------------------
   Kyle's reference: a KPI strip across the top, then panels on a grid. The value of the grid is
   comparison — two views of the same question side by side beat the same two views a scroll
   apart, because the second one no longer has to be remembered. */
.kpis{
  display:grid; gap:12px; margin:0 0 16px;
  grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px 15px; display:flex; flex-direction:column; gap:3px; min-width:0;
}
.kpi-l{
  font-family:var(--display); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}
/* Sized so $10,534,912 still fits the narrowest tile this can appear in. */
.kpi-v{
  font-family:var(--display); font-weight:600; font-size:clamp(21px, 2.3vw, 29px); line-height:1.1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.kpi-d{ display:flex; align-items:baseline; gap:5px; font-size:12px; font-weight:600; margin-top:2px; }
.kpi-d i{ font-style:normal; font-size:10px; }
.kpi-d em{ font-style:normal; font-weight:400; font-size:11px; color:var(--ink-3); letter-spacing:0; }
.kpi-d.up{ color:var(--good); }
.kpi-d.down{ color:var(--warn); }
.kpi-d.flat{ color:var(--ink-3); }

.grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:900px){
  .grid{ grid-template-columns:repeat(12, 1fr); }
  .panel{ grid-column:span var(--span, 12); }
}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px 16px; min-width:0;
}
.panel-h{ display:flex; align-items:baseline; gap:10px; margin:0 0 12px; }
.panel-h h3{
  margin:0; font-family:var(--display); font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.panel-h span{ margin-left:auto; font-size:11.5px; color:var(--ink-3); }
.panel-b{ min-width:0; }
/* Inside a panel the chart is the panel — its own frame would be a box in a box. */
.panel .chart svg.mc{ background:none; border:none; padding:2px 0 0; }
.panel .years{ margin:0; }

/* Five KPIs, five columns. auto-fit was breaking them 4 + 1, which reads as a mistake rather than
   a row. Below that width they stack two-up, which is the phone shape anyway. */
@media (min-width:1080px){ .kpis{ grid-template-columns:repeat(5, 1fr); } }

/* Inside a four-column panel the year figures had no room and ran into each other. Full dollars
   belong on a tile; a bar chart's job is the shape, and $742k carries it in a third of the space.
   The exact figure is one hover away on the month chart and exact on the KPI above. */
.panel .yr b{ font-size:13.5px; letter-spacing:.01em; text-align:center; }
.panel .yr span{ text-align:center; font-size:10px; }
.panel .yr{ text-align:center; }
.panel .yr-bar{ height:118px; }
.panel .years{ gap:7px; }

/* ---- HOME'S STRIP AND TRACKS ---------------------------------------------------------------
   The tiles on home all lead somewhere, so they are buttons and have to look pressable without
   turning the strip into a row of controls competing with the ember bar above it. */
.kpi.link{
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.kpi.link:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.kpi.link:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .kpi.link{ transition:none; } .kpi.link:hover{ transform:none; } }

/* An order as a track. The pips carry how far along it is; the words carry where and by when.
   A step only lights when it genuinely happened — nothing here is guessed at. */
.trks{ display:flex; flex-direction:column; gap:2px; }
.trk{
  display:block; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
  background:none; border:none; border-radius:8px; padding:11px 10px;
}
.trk + .trk{ box-shadow:inset 0 1px 0 var(--line-soft); }
.trk:hover{ background:var(--surface-2); }
.trk:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }
.trk-h{ display:flex; align-items:baseline; gap:10px; }
.trk-h b{ font-size:14px; font-weight:600; }
.trk-meta{ font-size:11.5px; color:var(--ink-3); }
.pips{ display:flex; gap:3px; margin:8px 0 7px; }
.pips i{ flex:1; height:4px; border-radius:2px; background:var(--surface-2); }
.pips i.on{ background:var(--ember); }
.trk-f{ display:flex; align-items:baseline; gap:10px; }
.trk-due{ margin-left:auto; font-size:11.5px; color:var(--ink-3); }

/* Inside a panel the shipment rows already have the panel's frame around them. */
.panel .rows .row.static{ border:none; border-radius:0; padding:10px 0; background:none; }
.panel .rows .row.static + .row.static{ box-shadow:inset 0 1px 0 var(--line-soft); }
.panel .showing{ margin:10px 0 0; }
.panel .showing .more{ margin-left:auto; }

/* ---- MORE AIR, LIGHTER CHROME --------------------------------------------------------------
   What makes Kyle's reference dashboards read as clean is not a different palette — it is space
   and a quieter frame. Bigger padding inside each card, a softer border, a larger radius, and a
   figure given room to be the biggest thing in its tile. */
.panel{ padding:18px 20px 20px; border-radius:12px; border-color:var(--line-soft); }
.panel-h{ margin:0 0 15px; }
.panel-h h3{
  font-family:var(--body); font-size:15px; font-weight:600;
  letter-spacing:-.005em; text-transform:none;
}
.panel-m{ margin-left:0; font-size:12px; color:var(--ink-3); }
.panel-a{
  margin-left:auto; background:none; border:none; cursor:pointer; padding:2px 0;
  font:inherit; font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.panel-a:hover{ color:var(--ember); }
.panel-a:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:4px; }

.kpi{ padding:17px 20px 18px; border-radius:12px; border-color:var(--line-soft); gap:5px; }
.kpi-l{
  font-family:var(--body); font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--ink-2);
}
.kpi-v{ font-size:clamp(23px, 2.4vw, 31px); }
.kpis{ gap:14px; margin-bottom:18px; }
.grid{ gap:16px; }

/* A status pill. Same shape as the "Approved / In revision / Paid" chips Kyle liked, in our own
   neutrals — a stage in a normal pipeline is information, not an alarm, so it stays quiet. */
.tag{
  display:inline-block; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-2);
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
}
/* A date in a figure tile takes the size of a subhead, not of a total. */
.kpi-v .dt{ display:block; font-size:20px; white-space:nowrap; }

/* ---- THE PROOF CALL, INSIDE THE HERO --------------------------------------------------------
   Kyle: "The proofs waiting for approval just feels out of place. Maybe you can move it to the
   Good Evening [buyer] bar on the right side where you moved the metrics off."

   It sat between the band and the tiles belonging to neither — a white card left over from the old
   layout after everything around it became a dashboard. In the greeting it reads as part of the
   welcome: here is how you are doing, and here is the one thing that needs you.

   GLASS, NOT A CARD. A white panel on the customer's own colour would punch a hole in the band.
   A translucent white lets their colour through, so the block belongs to the hero. */
.hero-in{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.hero-left{ flex:1 1 260px; min-width:0; }

.hact{
  flex:0 1 300px; align-self:stretch; text-align:left; cursor:pointer; font:inherit; color:inherit;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:16px 18px 17px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px);
  transition:background .15s ease, border-color .15s ease;
}
.hact:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3); }
.hact:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .hact{ transition:none; } }

.hact-n{
  font-family:var(--display); font-weight:600; font-size:42px; line-height:1;
  color:var(--hero-accent, var(--ember)); font-variant-numeric:tabular-nums;
}
.hact-t{ font-size:14.5px; font-weight:600; color:#FFFFFF; margin-top:4px; }
.hact-s{ font-size:12.5px; color:rgba(255,255,255,.62); line-height:1.4; margin-top:2px; }
/* Overdue is the one case where the subline earns colour of its own. */
.hact.late .hact-s{ color:var(--hero-warn, #E8A87C); font-weight:500; }
.hact-go{
  align-self:flex-start; margin-top:12px;
  font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--hero-accent-ink, #FFFFFF); background:var(--hero-accent, var(--ember));
  border-radius:999px; padding:8px 16px;
}

/* On a phone the greeting reads first and the call sits under it, full width. */
@media (max-width:639px){
  .hact{ flex:1 1 100%; }
  .hact-n{ font-size:36px; }
}

/* ---- THE ORDER RECORD ------------------------------------------------------------------------
   Four tabs mirroring the Foundry's own order screen — Items, Production, UPC, Artwork. The other
   three tabs the Foundry carries (Licensing, Notes, History) are not styled here because they are
   never sent: the projection does not carry them. A tab that cannot be built beats a tab hidden
   with CSS, every time. */
.rec-h{ font-family:var(--display); font-size:26px; font-weight:600; margin:6px 0 3px; letter-spacing:.01em; }
.rec-sub{ margin:0 0 18px; color:var(--ink-3); font-size:13.5px; }

.otabs{
  display:flex; gap:2px; margin:22px 0 0;
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
.otabs::-webkit-scrollbar{ display:none; }
.otab{
  flex:0 0 auto; background:none; border:none; cursor:pointer; font:inherit;
  padding:11px 18px; font-size:14px; font-weight:600; color:var(--ink-3);
  border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.otab:hover{ color:var(--ink-2); }
.otab.on{ color:var(--ink); border-bottom-color:var(--ember); }
.otab:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; border-radius:6px 6px 0 0; }
.otab-b{ padding-top:18px; }

/* A data table. Wide ones scroll inside themselves — the page body never goes sideways. */
.otab-b{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  text-align:left; padding:8px 12px 8px 0; white-space:nowrap;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line);
}
.tbl td{ padding:10px 12px 10px 0; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl .r, .tbl th.r{ text-align:right; padding-right:0; }
.tbl .strong{ font-weight:600; }
.tbl .mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.tbl .mut, .mut{ color:var(--ink-3); }
.tbl .r{ font-variant-numeric:tabular-nums; }
.thumb{ display:block; width:44px; height:44px; object-fit:contain; background:var(--surface-2); border-radius:4px; }

.tab-bar{ display:flex; align-items:center; gap:12px; margin:0 0 14px; flex-wrap:wrap; }
.tab-bar .btn{ margin-left:auto; }

/* Production: one block per line, each listing the sides that run. */
.prod{ border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px 6px; margin-bottom:12px; }
.prod-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.prod-h b{ font-size:14px; font-weight:600; }
.prod-h .sub{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:var(--ink-3); }
.prod-h .tag{ margin-left:auto; }
/* Done is the only state that earns colour; pending is the normal case, not a problem. */
.tag.done{ background:color-mix(in srgb, var(--good) 15%, transparent); color:var(--good); }
.prod .tbl{ margin-bottom:10px; }

.none-yet{ color:var(--ink-3); font-size:13.5px; margin:4px 0 0; }
.row-side .tot{ font-weight:600; color:var(--ink-2); }
/* The base .btn is full-width because it is a phone-first form button. In a toolbar it needs to be
   the size of its own words, and it keeps a 44px tap target through its padding. */
.btn.sm{ width:auto; padding:9px 16px; font-size:13.5px; min-height:38px; }
.tab-bar .btn.sm{ margin-left:auto; }

/* ---- THE ORDER RECORD, SHAPED LIKE THE FOUNDRY'S -------------------------------------------
   Kyle: "the entire order should look similar to the Foundry order page ... we want consistency
   in look." Same order of sections, same card headings, same field labels — read-only, because
   the Foundry's version of each of these is a form and this is a record. */
.rec-top{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 14px; }
.eyebrow{
  display:block; font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1px;
}
.rec-h{ font-family:var(--display); font-size:30px; font-weight:600; margin:0; line-height:1.05; }
.rec-roll{ margin-left:auto; font-size:13px; color:var(--ink-2); font-weight:600; }

.ocard{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  margin-bottom:14px; min-width:0;
}
.ocard-h{ padding:13px 18px 0; }
.ocard-h h3{ margin:0; font-size:14px; font-weight:600; }
.ocard-b{ padding:14px 18px 16px; }
.ocard.strip .ocard-b{ padding:16px 18px; }

/* Ship To / Bill To · Order Information · VAS — the Foundry's own three-panel row and its widths. */
.opanels{ display:grid; gap:14px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .opanels{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); } }
.opanels .ocard{ margin-bottom:0; }

.two, .three, .four{ display:grid; gap:12px 16px; margin-bottom:12px; }
.two{ grid-template-columns:1fr; }
.three, .four{ grid-template-columns:1fr 1fr; }
@media (min-width:520px){ .two{ grid-template-columns:1fr 1fr; } .three{ grid-template-columns:1fr 1fr 1fr; } }
@media (min-width:760px){ .four{ grid-template-columns:repeat(4, 1fr); } }
.ocard-b > .two:last-child, .ocard-b > .three:last-child, .ocard-b > .four:last-child{ margin-bottom:0; }

.fld{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fld-l{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
}
.fld-l em{ font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; }
.fld-v{ font-size:13.5px; min-width:0; overflow-wrap:anywhere; }
.addr{
  display:block; white-space:pre-line; background:var(--surface-2); color:var(--ink-2);
  border-radius:6px; padding:8px 10px; font-size:13px; line-height:1.45; min-height:62px;
}

.vrow{ display:flex; gap:12px; font-size:13px; padding:5px 0; }
.vrow span{ color:var(--ink-2); }
.vrow b{ margin-left:auto; font-weight:600; }
.sum{ display:flex; gap:12px; font-size:13.5px; padding:6px 0; }
.sum + .sum{ border-top:1px solid var(--line-soft); }
.sum b{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- ITEMS: one block per line, each carrying its OWN stage ---- */
.item{ border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.item-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.item-h b{ font-size:14.5px; font-weight:600; }
.item-h .tag{ margin-left:auto; }
.vpn{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:var(--ink-3); }
.item-sub{ font-size:12.5px; color:var(--ink-3); margin:3px 0 10px; }
.item-f{ display:flex; gap:14px; font-size:13px; color:var(--ink-2); margin-top:10px; }
.item-f .tot{ margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* The five stages, per line. A date under a stage is the only proof it happened. */
.stack{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:12px; }
.stk{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  border-top:3px solid var(--line); padding-top:6px;
}
.stk b{
  font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.2;
}
.stk i{ font-style:normal; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.stk.on{ border-top-color:var(--ember); }
.stk.on b{ color:var(--ink-2); }
.stk.on i{ color:var(--ink); }
@media (max-width:560px){ .stack{ grid-template-columns:repeat(3, 1fr); } }

.tag.off{ background:transparent; border:1px dashed var(--line); color:var(--ink-3); }

/* Home's order track: one segment per ITEM, filled to that item's own progress. */
.pips i{ overflow:hidden; }
.pips i b{ display:block; height:100%; background:var(--ember); border-radius:2px; }
.pips i.on{ background:var(--surface-2); }

  text-transform:uppercase; color:var(--ink-3);
}
/* Big enough to hit with a thumb — on a phone this is the whole point of the panel. */

/* The Open / History tabs carry their own counts, so a buyer knows what is behind each. */
.otab em{ font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); margin-left:5px; }
.otab.on em{ color:var(--ember); }

.srch{ display:flex; gap:10px; align-items:center; margin:0 0 14px; }
.srch .inp{ flex:1; min-width:0; }
.srch-x{
  flex:none; background:none; border:none; cursor:pointer; font:inherit; font-size:13px;
  color:var(--ink-3); padding:8px 4px;
}
.srch-x:hover{ color:var(--ember); }
.addr.none{ color:var(--ink-3); }

/* ---- WEB IMAGES -----------------------------------------------------------------------------
   Kyle prefers chosen filters over a typed search, so the dropdowns lead and the box is the
   fallback. Every option in every dropdown is built from this customer's own order lines. */
.filts{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.filt{ display:flex; flex-direction:column; gap:4px; min-width:150px; }
.filt.grow{ flex:1 1 220px; }
.filt > span{
  font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.imgbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.imgbar .btn{ margin-left:auto; }
.imgbar .btn[disabled]{ opacity:.45; cursor:default; }
.lnk{
  background:none; border:none; cursor:pointer; font:inherit; font-size:13px;
  color:var(--ember); font-weight:600; padding:4px 0;
}
.lnk:hover{ text-decoration:underline; }

.imgs{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); }
.imgc{
  position:relative; display:flex; flex-direction:column; cursor:pointer; min-width:0;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
}
.imgc:hover{ border-color:var(--line-strong); }
.imgc.on{ border-color:var(--ember); box-shadow:0 0 0 1px var(--ember) inset; }
.imgc input{ position:absolute; top:9px; left:9px; z-index:2; width:18px; height:18px; cursor:pointer; }
/* Product shots are never cropped — a sleeve cut off is the reason they emailed us in the first place. */
.imgc-im{ display:grid; place-items:center; aspect-ratio:1/1; background:var(--surface-2); }
.imgc-im img{ width:100%; height:100%; object-fit:contain; }
.imgc-b{ display:block; padding:9px 11px 11px; }
.imgc-b b{
  display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px; font-weight:700; overflow-wrap:anywhere;
}
.imgc-b > span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; }

/* ---- GROUPED NAVIGATION ---------------------------------------------------------------------
   Four groups instead of a growing row of tabs. The menus are fixed-positioned and live outside
   the scrolling strip, because .tabs has overflow-x:auto and would clip them shut. */
.tab.grp{ gap:8px; }
.tab.grp .caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.65; margin-left:-1px;
}
.tab.grp[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.tab.grp.here{ background:var(--surface-2); color:var(--ink); }

.menus{ position:relative; z-index:40; }
.menu{
  display:none; position:fixed; z-index:40; min-width:196px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:5px;
  box-shadow:0 14px 34px -14px rgba(16,20,24,.34);
}
.menu.open{ display:block; }
.menu button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; font:inherit; font-size:14px; font-weight:500;
  color:var(--ink-2); padding:10px 12px; border-radius:7px; min-height:var(--tap);
}
.menu button:hover{ background:var(--surface-2); color:var(--ink); }
.menu button.on{ color:var(--ink); font-weight:600; }
.menu button.on::before{ content:""; width:3px; align-self:stretch; border-radius:2px; background:var(--ember); margin:2px 2px 2px -4px; }
.menu button:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }
.menu .pill{ margin-left:auto; }

/* ---- BEING BUILT ---------------------------------------------------------------------------
   Kyle's rule: unfinished modules ship VISIBLE and marked, with the checklist on the screen.
   A menu item that leads nowhere is worse than one that says what it will be. */
.wip{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:22px 24px 24px; max-width:640px;
}
.wip-tag{
  display:inline-block; font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ember);
  border:1px solid var(--ember); border-radius:999px; padding:3px 10px;
}
.wip h2{ margin:12px 0 6px; font-size:20px; }
.wip p{ margin:0 0 14px; color:var(--ink-2); font-size:14px; line-height:1.55; }
.wip ul{ margin:0; padding-left:20px; color:var(--ink-2); font-size:13.5px; line-height:1.9; }
.wip-q{ margin-top:16px !important; padding-top:14px; border-top:1px solid var(--line-soft); font-size:13px; }

/* ---- THE LINE BLOCK, MATCHING THE FOUNDRY ---------------------------------------------------
   Same rows, same field labels, same status stack — read-only, because the Foundry's version is
   a form and this is a record. */
.lcard{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
  padding:14px 16px 16px; margin-bottom:12px;
}
.lcard-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.vpn.big{ font-size:13px; font-weight:700; color:var(--ink); }
.decor{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px;
  background:var(--surface-2); padding:3px 10px; border-radius:12px; color:var(--ink-2);
}
.lrow{ display:flex; gap:14px 20px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px; }
.lrow.wide{ margin-bottom:0; gap:20px; }
.lfld{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lfld-l{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3);
}
.lfld-l.sub{ margin-top:6px; }
.lval{ font-size:13px; }
.lval.num{ font-variant-numeric:tabular-nums; }

/* The size grid: the Foundry's four-across boxes, with the size above the quantity. */
.szgrid{ display:grid; grid-template-columns:repeat(4, 52px); gap:6px; }
.szc{
  text-align:center; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:5px; padding:4px 2px;
}
.szc span{ display:block; font-size:10px; color:var(--ink-3); }
.szc b{ display:block; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }

/* The status stack. Green done, red not — the Foundry's own colours, so a CSR on the phone and a
   buyer on the portal are looking at the same blocks in the same order. Purchased is not here. */
.stat{ width:112px; }
.stat-b{
  background:var(--crit, #B4532A); color:#fff; font-size:11px; font-weight:600;
  padding:3px 8px; margin-bottom:2px; border-radius:3px; text-align:left;
}
.stat-b.on{ background:var(--good); }
.ltot{ text-align:right; min-width:96px; margin-left:auto; }
.ltot .lval{ margin-top:3px; }
.ltot b.num{ display:block; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- ORDER SUMMARY, MATCHING THE FOUNDRY ---------------------------------------------------- */
.sumrow{ display:flex; gap:12px; align-items:baseline; font-size:13.5px; padding:6px 0; }
.sumrow + .sumrow{ border-top:1px solid var(--line-soft); }
.sumrow span em{ font-style:normal; font-size:11.5px; color:var(--ink-3); }
.sumrow b.num{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.sumrow.total{
  margin-top:4px; padding-top:10px; border-top:2px solid var(--line);
  font-size:15px; font-weight:600;
}
.sumrow.total b.num{ font-size:17px; }

/* ---- MY ACCOUNT ------------------------------------------------------------------------------
   Three separate cards with three separate buttons, because the three things have three different
   consequences. One Save for all of them would let a mistyped email ride along with a phone number. */
.acards{ display:grid; gap:14px; max-width:620px; }
.acards .ocard{ margin-bottom:0; }
.afld{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.afld-l{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
}
.afld-n{ font-size:12px; color:var(--ink-3); line-height:1.45; }
.ocard-b > .afld{ margin-bottom:12px; }
.arow{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.arow .msg{ font-size:13px; }
.arow .msg.good{ color:var(--good); }
.arow .msg.bad{ color:var(--warn); }

/* Two account controls side by side now, so they need to read as a pair without shouting. */
.topbar #p_acct{ padding-right:12px; }


/* ---- THE ACCOUNT DETAILS, INSIDE THE HEADER --------------------------------------------------
   Between the two logos, in the space the header already had. Who to call is on every screen
   without costing a second band. */
.abar{
  display:flex; gap:6px 26px; flex-wrap:wrap; align-items:flex-start;
  min-width:0; margin-left:26px;
}
.abar-id{ display:flex; gap:22px; flex-wrap:wrap; }
.abar-ppl{ display:flex; gap:26px; flex-wrap:wrap; }
.abar-f, .abar-p{ display:flex; flex-direction:column; gap:0; min-width:0; }
.abar-l{
  font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5); line-height:1.5;
}
.abar b{ font-size:12.5px; font-weight:600; color:#E9ECEE; line-height:1.35; }
/* Tap-to-call and tap-to-mail. Line-height carries the target without deepening the header. */
.abar a{
  font-size:11.5px; color:rgba(255,255,255,.72); text-decoration:none; line-height:1.55;
  overflow-wrap:anywhere;
}
.abar a:hover{ color:#FFFFFF; text-decoration:underline; }
.abar a:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; border-radius:3px; }

/* The customer's mark keeps its place at the right whatever sits before it. */
.topbar .who{ margin-left:auto; }

/* Below this the header cannot hold everything on one line, so the details wrap to their own row
   rather than shrinking to nothing. Still one header, still every screen. */
@media (max-width:1079px){
  .topbar{ flex-wrap:wrap; }
  .abar{ order:3; flex-basis:100%; margin:8px 0 0; padding-top:10px;
         border-top:1px solid rgba(255,255,255,.12); }
  .topbar .who{ margin-left:auto; }
}

/* My account above Sign out, stacked in the corner. */
.acct-btns{ display:flex; flex-direction:column; align-items:flex-end; gap:0; }
.topbar .acct-btns .iconbtn{ padding:5px 2px 5px 14px; }

/* ---- THE FORGED BRANDS MARK NEEDS ROOM ------------------------------------------------------
   Kyle: "i can't even see the forged logo anymore either." It was rendering — 69px wide — but with
   dense account text starting 42px to its right it stopped reading as a logo and became the left
   edge of a block of small print. Bigger, and fenced off with a rule so the eye knows where our
   mark ends and the account details begin. */
.lockup{ height:64px; }
@media (min-width:640px){ .lockup{ height:68px; } }
.topbar .abar{
  margin-left:34px; padding-left:34px;
  border-left:1px solid rgba(255,255,255,.16);
}
@media (max-width:1079px){
  .topbar .abar{ margin-left:0; padding-left:0; border-left:none; }
}

/* Centred over each other, not right-ragged. They were flex-end with asymmetric padding, so the
   two labels sat on different centre lines and the pair read as a mistake rather than a stack. */
.acct-btns{ align-items:center; gap:2px; }
.topbar .acct-btns .iconbtn{ padding:5px 10px; text-align:center; }

/* ---- THE HEADER AND NAVIGATION LOCK TOGETHER -------------------------------------------------
   Kyle: "The home orders artwork and insights bar should be locked with the top banner and not
   scroll. That needs to be visible no matter where you scroll on the page."

   They were two separately-sticky elements with a hard-coded offset between them, which only
   held while the header was exactly the height that offset assumed — and the header just changed
   height twice. One sticky wrapper instead: whatever the header does, the tabs sit under it. */
.chrome-top{ position:sticky; top:0; z-index:30; }
.topbar{ position:static; }
.tabs{ position:static; top:auto; }
/* Quick reorder: the catalogue is their own order history. */
.rgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.rcard{
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
}
.rcard.on{ border-color:var(--ember); box-shadow:0 0 0 1px var(--ember) inset; }
.rcard-im{ display:grid; place-items:center; aspect-ratio:4/3; background:var(--surface-2); }
.rcard-im img{ width:100%; height:100%; object-fit:contain; }
.rcard-im .none{ font-size:11.5px; color:var(--ink-3); }
.rcard-b{ display:flex; flex-direction:column; gap:2px; padding:11px 13px 13px; }
.rcard-b b{ font-size:14px; font-weight:600; line-height:1.25; }
.rcard-b .sub{ font-size:12px; color:var(--ink-3); }
.rcard-b .vpn{ font-size:11px; }
.rcard-last{ font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.rsz{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px; }
.rszc{ display:flex; flex-direction:column; gap:2px; width:52px; }
.rszc span{ font-size:10px; color:var(--ink-3); text-align:center; }
.rszc input{
  width:100%; text-align:center; padding:6px 2px; font:inherit; font-size:13px;
  border:1px solid var(--line); border-radius:5px; background:var(--surface); color:inherit;
  font-variant-numeric:tabular-nums; min-height:38px;
}
.rszc input:focus{ outline:2px solid var(--ember); outline-offset:-1px; border-color:var(--ember); }
.rcard-f{ display:flex; gap:10px; align-items:baseline; margin-top:8px; font-size:13px; }
.rcard-f span{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* The running basket. Pinned to the bottom so the count is never something you scroll to find. */
.cartbar{
  position:sticky; bottom:0; z-index:12; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:18px -16px -16px; padding:14px 18px;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -10px 26px -20px rgba(16,20,24,.5);
}
.cartbar > span{ font-size:13.5px; }
.cartbar .btn{ margin-left:auto; }
.wip-tag.good{ color:var(--good); border-color:var(--good); }
/* The summary now closes the record, so it needs air above it rather than below. */
.ocard.sumcard{ margin:20px 0 0; max-width:420px; margin-left:auto; }

/* ---- QUICK REORDER: A SHOP, NOT A SPREADSHEET -----------------------------------------------
   Browse → item → cart → checkout. The flow everyone already knows, which is the point: a buyer
   should not have to learn how our ordering works. */
.rcard{ text-align:left; cursor:pointer; font:inherit; color:inherit; padding:0; }
.rcard:hover{ border-color:var(--line-strong); }
.rcard:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.rcard-im{ position:relative; }
.incart{
  position:absolute; left:8px; top:8px; background:var(--ember); color:#fff;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px;
}
.rprice{ display:block; margin-top:6px; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }

/* The item page. Image left, everything you decide on the right. */
.pdp{ display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .pdp{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.pdp-im{
  display:grid; place-items:center; aspect-ratio:1/1; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:12px; overflow:hidden;
}
.pdp-im img{ width:100%; height:100%; object-fit:contain; }
.pdp-b h1{ font-family:var(--display); font-size:26px; font-weight:600; margin:0 0 4px; }
.pdp-sub{ margin:0 0 2px; font-size:14px; color:var(--ink-2); }
.pdp-vpn{ margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size:12px; color:var(--ink-3); }
.pdp-price{ margin:16px 0 0; }
.pdp-price b{ font-family:var(--display); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; }
.pdp-last{ margin:6px 0 0; font-size:12.5px; color:var(--ink-3); }
.pdp-incart{ margin:10px 0 0; font-size:13px; color:var(--ember); font-weight:500; }
.pdp-sz{ display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 0; }
.pdp-add{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft);
}
.pdp-add #ri_tot{ font-size:15px; font-variant-numeric:tabular-nums; }
.pdp-add .btn{ margin-left:auto; width:auto; padding:12px 22px; }
.pdp-add .btn[disabled]{ opacity:.45; cursor:default; }

/* The cart. */
.cartlist{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.citem{
  display:flex; gap:14px; align-items:flex-start; padding:14px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
}
.citem-im{ flex:0 0 92px; aspect-ratio:1/1; background:var(--surface-2); border-radius:8px; overflow:hidden; }
.citem-im img{ width:100%; height:100%; object-fit:contain; }
.citem-b{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.citem-b b{ font-size:14.5px; font-weight:600; }
.citem-b .sub{ font-size:12.5px; color:var(--ink-3); }
.citem-s{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.citem-s b{ font-size:14px; font-variant-numeric:tabular-nums; }
.citem-s span{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lnk.del{ color:var(--ink-3); font-weight:500; font-size:12.5px; }
.lnk.del:hover{ color:var(--warn); }

/* The cart button in the header. */
.cartbtn{
  position:relative; background:none; border:none; cursor:pointer; color:rgba(255,255,255,.8);
  padding:8px 14px 8px 8px; display:inline-flex; align-items:center;
}
.cartbtn:hover{ color:#fff; }
.cartbtn:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; border-radius:6px; }
.cartn{
  position:absolute; top:1px; right:5px; min-width:17px; height:17px; padding:0 4px;
  background:var(--ember); color:#fff; border-radius:999px;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
}
/* Their own history with this style. Facts, laid out to be read at a glance, not a paragraph. */
.hist{
  display:grid; gap:1px; margin:20px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden;
}
.hist > div{ background:var(--surface); padding:11px 13px; display:flex; flex-direction:column; gap:2px; }
.hist span{
  font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.hist b{ font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.hist-d{ margin-top:12px; font-size:13px; }
.hist-d summary{ cursor:pointer; color:var(--ink-2); padding:4px 0; }
.hist-d summary:hover{ color:var(--ember); }
.hist-d ul{ margin:6px 0 0; padding-left:20px; color:var(--ink-3); line-height:1.8; }

/* ---- THE REORDER NUDGE ------------------------------------------------------------------------
   Kyle's tenet: the portal exists to convert more orders. This is how that is done honestly — the
   number belongs to the customer, so it is a reminder rather than a pitch. Quiet by design: no
   red, no exclamation, no count of how overdue they are, and the copy allows "we are fine" as an
   answer. A nudge a buyer resents is a nudge they learn to ignore. */
.nudge{
  display:flex; flex-direction:column; gap:2px; margin:18px 0 0;
  padding:12px 15px; border-radius:10px;
  background:color-mix(in srgb, var(--ember) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--ember) 34%, var(--line));
}
.nudge.wide{ margin:0 0 16px; }
.nudge b{ font-size:14px; font-weight:600; }
.nudge span{ font-size:13px; color:var(--ink-2); line-height:1.5; }
.duetag{
  position:absolute; right:8px; top:8px; background:var(--ember); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:999px;
}

/* ---- SHIP TO / BILL TO SPACING ---------------------------------------------------------------
   Kyle: "the spacing on ship to and bill to are not great." Two address boxes of different
   heights sitting on different baselines, with the rows below them bunched. Fixed by making the
   two addresses one grid row that stretches to the taller of the pair, and giving the rows under
   them the same rhythm as everything else in the card. */
.ocard-b > .two{ align-items:stretch; }
.two > .fld{ min-width:0; }
.addr{
  flex:1 1 auto; display:flex; align-items:flex-start;
  min-height:74px; padding:10px 12px; margin-top:1px;
  border:1px solid var(--line-soft);
}
.opanels .ocard-b > .two,
.opanels .ocard-b > .three{ margin-bottom:14px; }
.opanels .ocard-b > .fld{ margin-top:2px; }
/* The Foundry's own column proportions for the carrier row: carrier, account, zip. */
@media (min-width:520px){
  .opanels .three{ grid-template-columns:1fr 1.2fr .9fr; }
}
/* A service that is off is still an answer, just a quieter one. */
.vrow.off b{ color:var(--ink-3); font-weight:500; }
.vrow{ padding:6px 0; }
.vrow + .vrow{ border-top:1px solid var(--line-soft); }
/* The Bill to label carries a note, so it runs to two lines while Ship to's runs to one — which
   put the two address boxes on different baselines. Reserving the taller label's height for both
   lines them up whatever the note says. */
.addrpair > .fld{ display:grid; grid-template-rows:auto 1fr; }
.addrpair .fld-l{ min-height:2.6em; }
/* min-height alone could not fix this: each field is its own grid, so their internal rows never
   line up. Subgrid makes both fields share ONE row track, so the label row is as tall as the
   taller label and both boxes start together whatever the note says. Falls back to the
   min-height above where subgrid is unsupported. */
@supports (grid-template-rows: subgrid){
  .addrpair{ grid-template-rows:auto 1fr; }
  .addrpair > .fld{ grid-row:span 2; grid-template-rows:subgrid; }
  .addrpair .fld-l{ min-height:0; }
}

/* ---- A PROOF IS A PDF ------------------------------------------------------------------------
   Rendered in the browser's own PDF viewer, which the buyer already knows how to zoom and print,
   rather than one I would have built worse. Portrait, because the proofs are portrait. */
.pdfwrap{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.pdfview{ display:block; width:100%; height:min(78vh, 900px); border:0; background:var(--surface-2); }
.pdfview .none{ display:grid; place-items:center; gap:14px; height:100%; padding:30px; text-align:center; }
.pdfbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:12px 0 18px; }
.pdfbar .btn.sm{ text-decoration:none; }
.pdfbar .lnk{ text-decoration:none; }
@media (max-width:639px){ .pdfview{ height:min(64vh, 620px); } }

/* A card cannot thumbnail a PDF without rendering one, so it gets a placard instead of a broken
   image — which a buyer reads as "our proof is missing" when it is sitting there ready to open. */
.pdfcard{
  display:grid; place-items:center; gap:8px; height:100%; padding:16px; text-align:center;
  background:var(--surface-2);
}
.pdfmark{
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em;
  background:var(--ember); color:#fff; padding:4px 10px; border-radius:4px;
}
.pdfcard span:last-child{ font-size:11.5px; color:var(--ink-3); overflow-wrap:anywhere; }

/* ---- LICENSING APPROVED ----------------------------------------------------------------------
   Kyle asked for it "in a prominent place", and prominence here is earned: it is the fact that
   decides whether asking for a tweak is free or expensive. Good-green rather than ember — this is
   reassurance, not a warning, and ember is already spoken for by things that need doing. */
.proof-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lictag{
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--good) 14%, transparent);
  color:var(--good); border:1px solid color-mix(in srgb, var(--good) 40%, transparent);
  border-radius:999px; padding:4px 11px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
}
.lictag.sm{ padding:2px 8px; font-size:10.5px; margin-top:4px; }
.licnote{
  margin:0 0 14px; font-size:13px; color:var(--ink-2); line-height:1.55; max-width:62ch;
}

/* ---- THE SIGN-IN MARK -------------------------------------------------------------------------
   Caught by building the real bundle and looking at it signed out. The cream lockup is drawn for
   the dark header; on the pale sign-in page it all but vanished — and that page is the FIRST thing
   a customer ever sees of us. The navy one is the same mark drawn for a light ground. */
.signin-head .lockup-lg{ height:66px; }