/* ============================================================================
   Sonic Arc — the header and footer that appear on every page
   v10.50 [Aayush, 2026-09-05]

   Aayush: "The header bar should be there throughout, even when a user signs in.
   Similarly the footer should be there throughout the website, even when the user
   signs in."

   ---------------------------------------------------------------------------
   THE HEADER STAYS DARK ON EVERY PAGE, INCLUDING THE LIGHT ONES.

   This is a deliberate choice, not an oversight. Chrome is brand, not surface. A
   dark bar above a light working area is the strongest anchor a product has — it
   is the one element that is identical whether somebody is reading the pricing
   page or halfway through a bill of materials, and it is what makes the app feel
   like the same company as the website rather than a tool bolted onto it.

   So the header does NOT use --surface or --bg, which flip with the theme. It uses
   its own fixed values. When the light/dark switch arrives it will change the page
   beneath and leave this alone, which is correct.

   ---------------------------------------------------------------------------
   ONE COMPONENT, NOT TWENTY COPIES.

   Rendered by chrome.js into every page. The alternative — pasting the same markup
   into twenty-odd files — is how a nav ends up with five items on one page and six
   on another, which is exactly the drift the token work just undid.
   ============================================================================ */

/* --- the fixed chrome palette. Not theme-dependent, on purpose. --- */
:root {
  --chrome-bg:     rgba(2,6,12,.82);
  --chrome-solid:  #02060C;
  --chrome-line:   rgba(110,194,255,.14);
  --chrome-ink:    #FFFFFF;
  --chrome-muted:  #8AA6C6;
}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
/* v10.54 [Aayush feedback 1] — OPAQUE, NOT TRANSLUCENT.
   It was rgba(2,6,12,.82) with a backdrop blur, so 18% of the page behind it came
   through. On a dark page that stayed near-black; on a light one it lifted into a
   grey slab. Same component, different ground — which is exactly why the header
   looked right on how-it-works and wrong on the dashboard and sign-in.

   The blur was a nicety. A header that is the same colour on every page is not,
   and a brand anchor that changes shade depending on what is underneath is not an
   anchor. Solid. */
.sa-head {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h,66px);
  background: var(--chrome-solid);
  border-bottom: 1px solid var(--chrome-line);
  color: var(--chrome-ink);
  font-family: var(--sans);
}
.sa-head-in {
  max-width: var(--wrap,1240px);
  margin: 0 auto;
  height: 100%;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
  display: flex; align-items: center; gap: 2rem;
}

/* The wordmark. Letter-spaced caps with the A replaced by the arc glyph — the
   spacing is what makes it read as a mark rather than a word. */
.sa-brand {
  display: inline-flex; align-items: center; gap: .06em;
  font-size: .95rem; font-weight: 600; letter-spacing: .16em;
  color: var(--chrome-ink); text-decoration: none; white-space: nowrap;
}
.sa-brand svg { width: 15px; height: 19px; margin: 0 .1em; display: block; }

.sa-links {
  display: flex; align-items: center; gap: 1.7rem;
  margin-left: auto;
  font-size: .9rem; color: var(--chrome-muted);
}
.sa-links a {
  color: inherit; text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.sa-links a:hover { color: var(--chrome-ink); }
/* The current page is stated, not merely implied by colour: aria-current is what a
   screen reader announces, and the styling hangs off the same attribute so the two
   can never disagree. */
.sa-links a[aria-current="page"] { color: var(--chrome-ink); }

.sa-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .58rem 1.15rem;
  border-radius: var(--r-ctl);
  /* --accent-fill, not --accent: white on #1E90FF is 3.24:1, short of the 4.5:1 a
     button label needs. #166FD9 reads 4.87:1 and is all but indistinguishable. */
  background: var(--accent-fill); color: var(--on-accent);
  font-size: .88rem; font-weight: 600; letter-spacing: -.006em;
  text-decoration: none; white-space: nowrap;
  transition: filter var(--t-fast) var(--ease);
}
.sa-cta:hover { filter: brightness(1.12); }

/* Signed in: the account sits where the CTA does, so the eye does not have to
   relearn the bar after logging in. */
.sa-account { display: flex; align-items: center; gap: .9rem; margin-left: .3rem; }
.sa-who {
  font-size: .88rem; color: var(--chrome-ink);
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-out {
  font-size: .85rem; color: var(--chrome-muted);
  background: none; border: 1px solid var(--chrome-line);
  border-radius: var(--r-ctl); padding: .42rem .85rem;
  font-family: inherit; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sa-out:hover { color: var(--chrome-ink); border-color: var(--chrome-muted); }

/* Below 860px the links collapse. A cramped six-item nav is worse than none: the
   brand and the one action that matters stay, and the rest lives in the page. */
@media (max-width: 860px) {
  .sa-links a { display: none; }
  .sa-links a.sa-keep { display: inline; }
}

/* ---------------------------------------------------------------------------
   FOOTER
   v10.57 [Aayush feedback 8] — three labelled columns, the layout he referenced.

   The type stays the product's own — mono tracked caps for the headings, the same
   quiet blue-grey for the links — so it belongs to this site rather than imitating
   another. Only the LAYOUT is borrowed, which is what was asked.
   --------------------------------------------------------------------------- */
.sa-foot {
  background: var(--chrome-solid);
  border-top: 1px solid var(--chrome-line);
  color: var(--chrome-muted);
  font-family: var(--sans); font-size: .86rem;
  padding: 3.4rem 0 2.2rem;
  margin-top: auto;
}
.sa-foot-in {
  max-width: var(--wrap,1240px); margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
}
.sa-foot-top { margin-bottom: 2.6rem; }
.sa-foot-brand {
  display: inline-flex; align-items: center; gap: .06em;
  font-size: .92rem; font-weight: 600; letter-spacing: .16em;
  color: var(--chrome-ink); text-decoration: none;
}
.sa-foot-brand svg { width: 14px; height: 18px; margin: 0 .1em; display: block; }

.sa-foot-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
}
.sa-foot-col { display: flex; flex-direction: column; gap: .62rem; align-items: flex-start; }
/* The column heading, set exactly as every other label in the product is. */
.sa-foot-h {
  margin: 0 0 .45rem;
  font-family: var(--sans); font-size: var(--fs-sm); letter-spacing: var(--k-sm);
  text-transform: none; color: var(--chrome-ink); font-weight: 500;
}
.sa-foot a {
  color: var(--chrome-muted); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.sa-foot a:hover { color: var(--chrome-ink); }

/* The caveat and the copyright share the base rule: the sentence on the left where
   it will be read, the mark on the right where a copyright belongs. */
.sa-foot-base {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--chrome-line);
}
.sa-foot-note { margin: 0; color: #3B587A; font-size: .76rem; line-height: 1.6; max-width: 78ch; }
.sa-foot-copy { color: var(--chrome-muted); font-size: .8rem; white-space: nowrap; }

@media (max-width: 720px) {
  .sa-foot-cols { grid-template-columns: 1fr 1fr; }
  .sa-foot-base { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   THE SIDEBAR
   v10.51 — rendered by chrome.js, so there is one of it rather than thirteen.

   The wordmark and Sign out that used to sit here are in the header now. What is
   left is navigation, and it is grouped: work, the account, and reference. Three
   quiet labels do the sorting once so the reader does not have to do it every time.
   --------------------------------------------------------------------------- */
/* v10.95 - the sidebar's group label. Capitals here shouted three words a
   person reads once and then never again. */
.side-group {
  font-family: var(--sans);
  font-size: var(--fs-xs); letter-spacing: var(--k-xs); text-transform: none;
  color: var(--slate-3);
  margin: var(--s-5) .7rem var(--s-2);
}
.side-group:first-child { margin-top: .2rem; }

/* ---------------------------------------------------------------------------
   THE STEP RAIL

   Where the reader is in THIS project, which is a different question from where
   they are in the app. Done, here, and not yet — stated plainly, because a dealer
   halfway through a venue wants to know what is left, not to count backwards from
   the page they happen to be on.
   --------------------------------------------------------------------------- */
.side-steps {
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--hairline-2);
}
.step {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem .55rem;
  font-size: 13.5px;
  border-radius: var(--r-ctl);
  text-decoration: none;
  color: var(--slate-2);
}
.step-n {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  border: 1px solid var(--hairline);
  color: var(--slate-3);
}
/* Done is stated by filling the marker, not by striking the label through. A
   completed step is still somewhere you may want to go back to. */
.step.done { color: var(--slate); }
.step.done .step-n { background: var(--good-wash); border-color: transparent; color: var(--good); }
a.step.done:hover { background: var(--wash); color: var(--ink); }

.step.now { color: var(--ink); font-weight: 560; }
.step.now .step-n { background: var(--blue); border-color: transparent; color: #fff; }

/* Not yet reached is dimmed rather than hidden: the reader can see how much is
   left, which is the main thing a rail is for. */
.step.todo { color: var(--slate-3); }

/* ---------------------------------------------------------------------------
   THE STEP STRIP, ACROSS THE TOP
   v11.20 [Aayush, 2026-09-20]

   The approved design moves this out of the sidebar on the canvas screens:
   "In the sidebar it competes with navigation; here it is the one thing that
   answers how much is left, so it sits above the work where it is read once and
   then ignored."

   PREFIXED sa-, AND NOT OPTIONAL. Both `.steps` and `.step` are already taken —
   `.steps`/`.step`/`.step .n` in app.css for the marketing how-it-works blocks,
   and `.step`/`.step-n` a few lines above this for the sidebar rail. A third
   meaning under either name would have collided with both. The rules above are
   left where they are: chrome.js no longer builds the sidebar rail, but
   marking.html's own `.stepbar .step` sits in the same cascade and moving these
   is a change to that screen, not to this one.

   THE GRID. .app is a two-column grid with .side and .main as its only children,
   so a third child would land in the next cell. Scoped to the opted-in page, the
   sidebar spans both rows and the strip takes the content column's first row.
   --------------------------------------------------------------------------- */
body[data-steps="top"] .app   { grid-template-rows: auto 1fr; }
body[data-steps="top"] .side  { grid-row: 1 / span 2; }
body[data-steps="top"] .sa-steps { grid-column: 2; grid-row: 1; }
body[data-steps="top"] .main  { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  body[data-steps="top"] .sa-steps { grid-column: 1; }
  body[data-steps="top"] .main     { grid-column: 1; }
}

.sa-steps {
  display: flex; align-items: center;
  height: 52px; overflow-x: auto;
  /* the same clamp .main uses, so the first step lines up with the page title
     below it rather than sitting a few pixels off it */
  padding: 0 clamp(1.4rem, 3.2vw, 2.6rem);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.sa-step {
  display: flex; align-items: center; gap: .55rem;
  padding-right: 1rem;
  font-size: 13.5px; white-space: nowrap;
  color: var(--slate-3); text-decoration: none;
}
.sa-step-n {
  flex: none; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  border: 1px solid var(--hairline); color: var(--slate-3);
}
/* Done fills the marker rather than striking the label through. A finished step
   is still somewhere you may want to go back to — which is the whole point of
   this version. */
.sa-step.done { color: var(--slate); }
.sa-step.done .sa-step-n {
  background: var(--good); border-color: var(--good); color: var(--on-accent, #fff);
}
.sa-step.now { color: var(--ink); font-weight: 560; }
.sa-step.now .sa-step-n {
  background: var(--blue); border-color: transparent; color: var(--on-accent, #fff);
}
.sa-step.todo { color: var(--slate-3); }
/* A step still ahead of you but PROVEN to exist — the quote, once the page has
   named it — is a real link, and it must not be painted like the dead ones
   beside it. Dim says "not yet"; this one is not yet, but it is there. */
a.sa-step.todo { color: var(--slate); }
a.sa-step.todo .sa-step-n { color: var(--slate); }
a.sa-step:hover { color: var(--ink); }
a.sa-step:hover .sa-step-n { border-color: var(--blue); }
/* The connector reads as a sequence rather than a row of buttons. */
.sa-step-ln {
  flex: none; width: 26px; height: 1px;
  background: var(--hairline); margin-right: 1rem;
}
/* v11.31 — the right end of the rail, for a page that opts in (chrome.js,
   data-steps-right): the project name and the way out, as on the approved
   tool pages. It may shrink; the steps may not. */
.sa-steps-right {
  margin-left: auto; padding-left: 1rem;
  display: flex; align-items: center; gap: var(--s-3, 12px);
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   AN EXPIRED PLAN
   v10.67 — the account may look, not touch.

   DISABLED, NOT HIDDEN. Somebody who cannot find the button they used yesterday
   assumes the product is broken. Somebody who sees it greyed, with a sentence
   saying why, knows what happened and what to do about it — and the one control
   that still works is the one that fixes it.
   --------------------------------------------------------------------------- */
.sa-expired {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding: .85rem 1.1rem;
  background: var(--warn-wash);
  border: 1px solid rgba(154,107,16,.28);
  border-radius: var(--r-ctl);
  color: var(--warn);
  font-size: 13.5px;
}
.sa-renew {
  margin-left: auto;
  background: var(--accent-fill); color: var(--on-accent);
  border-radius: var(--r-ctl); padding: .45rem .95rem;
  font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.sa-renew:hover { filter: brightness(1.1); }

.is-locked {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* A feature the plan does not include. The page marks itself from /api/entitlements
   and anything belonging to that feature goes with it — one rule per feature rather
   than a check in every page. */
[data-no-compare]    [data-feature="compare"],
[data-no-manual-bom] [data-feature="manual_bom"],
[data-no-export-pdf] [data-feature="export_pdf"] { display: none !important; }