/* ==========================================================================
   Pocket Advocate: the design system.

   OWNERSHIP. This file is the whole system. site.css is the base and is not
   touched here. Surface owners consume the tokens and classes below by name
   and do not invent colour, type or spacing of their own. That single rule is
   the reason four people can work at once and get one app out the other end.

   WHAT WAS WRONG. The previous version of this sheet signalled importance
   with light. Every card carried an inset highlight, a drop shadow and a
   coloured wash. Every section heading had a glowing diamond. Both landing
   buttons glowed, one cyan and one violet, at identical weight. The case tabs
   glowed when active, the slots glowed when selected, the accordions glowed
   when open, and the inputs glowed when focused. When everything on a screen
   is lit, nothing on it is important, and the page reads flat. Flat is what
   "bland as a bowl of wheaties" describes. It is a hierarchy problem, so the
   fix is hierarchy, not more gradients.

   THE THREE DECISIONS THIS SHEET MAKES.

   1. SURFACE WEIGHT IS ELEVATION AND CONTRAST, NEVER HUE. There are exactly
      three weights. `.card-quiet` sits below the ground and carries no
      shadow: it groups things without claiming them. `.card` sits on the
      ground with a one pixel lift. `.card-lit` is a real step up: brighter
      surface, harder edge, a deep shadow. A reader can rank the three at a
      glance without reading a word, and the ranking survives a scheme swap
      because none of it is carried by colour.

   2. ONE ACCENT PER SCREEN, AND IT IS THE ACTION. `.cta` is the only
      treatment in the system that fills with the accent, and the only thing
      left that still casts coloured light. Everything that used to glow now
      separates by weight instead. The accent is therefore an answer to the
      question "what do I press", not decoration.

   3. RHYTHM COMES FROM GAP. `.stack` and `.stack-tight` are grid containers
      with a gap, and they zero the block margins of their own children. Two
      margins cannot collapse into one another, and cannot add up to double,
      because inside a stack there are no margins left to collapse.

   FOUR SCHEMES: neon, calm, paper, contrast. Paper is light and this design
   is dark, so the ladder is written in terms of two direction tokens rather
   than in terms of "darker" and "lighter". `--sur-lit` is whatever moves a
   surface away from the ground on this scheme, and `--sh-cast` is whatever
   colour a shadow is made of on this scheme. Paper redefines both, so the
   same ladder reads correctly with the polarity flipped.

   AUDIT. Zero literal colours: every value is a token or a color-mix of
   tokens. `transparent` and `currentColor` are keywords, not palette values.
   Zero em dashes and zero en dashes, checked by codepoint. No copy, no
   prices, no legal wording and no behaviour is set in this file.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- spacing scale. Nothing in this sheet uses an arbitrary gap. ---- */
  --s-1: .4rem;
  --s-2: .7rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.25rem;

  /* ---- type scale. Root is 17.5px, not 16, so every rem here is about 9%
     bigger than it reads on a default page. Sized against that. ---- */
  --t-display: clamp(2.15rem, 8vw, 2.9rem);
  --t-h1: clamp(1.85rem, 6vw, 2.3rem);
  --t-h2: 1.45rem;
  --t-h3: 1.16rem;
  --t-body: 1rem;
  --t-small: .92rem;
  --t-micro: .8rem;
  /* Line height is part of the scale, not a per-rule decision. A heading set
     at 1.08 and body at 1.62 is most of the difference between "cramped" and
     "spacious" before a single margin changes. */
  --lh-heading: 1.08;
  --lh-body: 1.62;
  --lh-small: 1.5;
  --measure: 38rem;

  /* ---- radius ---- */
  --r-1: 12px;
  --r-2: 16px;
  --r-3: 20px;
  --r-4: 26px;
  --r-hero: 30px;
  --r-pill: 999px;

  /* ---- page rhythm. The single biggest lever on "cramped": the gap between
     one section and the next, and how much air the page keeps at its edge. ---- */
  --pad-page: 18px;
  --gap-section: 4.5rem;
  --max-content: 1180px;
  --max-text: 660px;

  /* ---- motion ---- */
  --mo-fast: 140ms;
  --mo-base: 220ms;
  --mo-slow: 360ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- THE SURFACE LADDER.
     Five steps now, not three. `floating` is what a card sitting ON a panel
     uses, which is the case the three-step ladder could not express, and
     `inset` is what a field sunk INTO one uses. Paper redefines the ground and
     nothing downstream has to know. ---- */
  --sur-quiet: color-mix(in srgb, var(--panel) 78%, var(--bg));
  --sur-base: var(--panel);
  --sur-lit: var(--panel-2);
  --sur-floating: color-mix(in srgb, var(--panel-2) 91%, white);
  --sur-inset: color-mix(in srgb, var(--bg) 62%, var(--panel));

  /* ---- THE EDGE LADDER. Contrast against the surface, same steps. ---- */
  --edge-quiet: rgba(255, 255, 255, .055);
  --edge-base: rgba(255, 255, 255, .105);
  --edge-lit: rgba(255, 255, 255, .17);
  --edge-focus: color-mix(in srgb, var(--cyan) 70%, white);

  /* ---- THE ELEVATION LADDER.
     Real shadows, cast down and soft, with a hairline of light along the top
     edge of anything raised. That inset highlight is what stops a dark card on
     a dark ground reading as a flat rectangle. ---- */
  --el-0: none;
  --el-1: 0 8px 28px rgba(0, 0, 0, .18);
  --el-2: 0 16px 44px rgba(0, 0, 0, .26), 0 1px 0 rgba(255, 255, 255, .055) inset;
  --el-3: 0 24px 70px rgba(0, 0, 0, .36), 0 1px 0 rgba(255, 255, 255, .075) inset;
  /* The only light left in the system, and it belongs to the one action. */
  --el-cta:
    0 12px 34px color-mix(in srgb, var(--cyan) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent);
}

/* A pale ground cannot use white hairlines or black shadows at dark-scheme
   strength: the edges vanish and the shadows turn to soot. Same ladders,
   re-cast in ink. */
:root[data-scheme="paper"] {
  --edge-quiet: rgba(32, 37, 43, .07);
  --edge-base: rgba(32, 37, 43, .13);
  --edge-lit: rgba(32, 37, 43, .22);
  --sur-floating: #FFFFFF;
  --sur-inset: color-mix(in srgb, var(--bg-deep) 70%, var(--panel));
  --el-1: 0 6px 20px rgba(60, 45, 15, .08);
  --el-2: 0 12px 32px rgba(60, 45, 15, .11), 0 1px 0 rgba(255, 255, 255, .6) inset;
  --el-3: 0 20px 52px rgba(60, 45, 15, .15), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
/* High contrast wants edges you can see, not edges you can sense. */
:root[data-scheme="contrast"] {
  --edge-quiet: rgba(255, 255, 255, .34);
  --edge-base: rgba(255, 255, 255, .55);
  --edge-lit: rgba(255, 255, 255, .85);
  --sur-floating: #232323;
  --el-1: 0 0 0 1px rgba(255, 255, 255, .34);
  --el-2: 0 0 0 1px rgba(255, 255, 255, .55);
  --el-3: 0 0 0 2px rgba(255, 255, 255, .8);
}

/* Paper is the light scheme, so the polarity flips: a raised surface goes
   toward white rather than toward ink, and a shadow is made of ink rather
   than of the ground. Everything above then reads correctly with no per
   component paper rules anywhere else in this file. */
:root[data-scheme="paper"] {
  --sur-quiet: color-mix(in srgb, var(--panel-2) 55%, var(--bg));
  --sur-base: var(--panel);
  --sur-lit: var(--sig-paper);
  --edge-lit: color-mix(in srgb, var(--ink) 30%, var(--line));
  --sh-cast: var(--ink);
}

/* Contrast wants hard edges. A shadow made of pure black on a pure black
   ground carries no information, so the ladder there is expressed in border
   weight instead. Section 15 does that. */
:root[data-scheme="contrast"] {
  --sur-quiet: var(--bg);
  --sur-lit: color-mix(in srgb, var(--ink) 12%, var(--panel-2));
  --el-1: none;
  --el-2: none;
  --el-3: none;
  --el-cta: none;
}

/* Compatibility aliases. The previous sheet exposed these names; nothing
   should break if a rule somewhere still reads one. They resolve to the
   ladder above, which is why the wash names are far weaker than they were. */
:root {
  --pa-glass: var(--sur-base);
  --pa-glass-2: var(--sur-base);
  --pa-glass-soft: var(--sur-quiet);
  --pa-line-soft: var(--edge-quiet);
  --pa-line-ink: var(--edge-base);
  --pa-line-cyan: color-mix(in srgb, var(--cyan) 34%, var(--line));
  --pa-line-magenta: color-mix(in srgb, var(--magenta) 34%, var(--line));
  --pa-cyan-wash: color-mix(in srgb, var(--cyan) 7%, transparent);
  --pa-cyan-wash-strong: color-mix(in srgb, var(--cyan) 12%, transparent);
  --pa-magenta-wash: color-mix(in srgb, var(--magenta) 7%, transparent);
  --pa-magenta-wash-strong: color-mix(in srgb, var(--magenta) 12%, transparent);
  --pa-blue-wash: color-mix(in srgb, var(--blue) 6%, transparent);
  --pa-green-wash: color-mix(in srgb, var(--green) 6%, transparent);
  --pa-line-ink-2: var(--edge-lit);
  --pa-shadow: var(--el-3);
  --pa-shadow-soft: var(--el-1);
  --pa-radius-xl: var(--r-4);
  --pa-radius-lg: var(--r-3);
  --pa-radius-md: var(--r-2);
  --pa-space-section: var(--s-5);
}


/* ==========================================================================
   2. GROUND AND GLOBAL TYPE

   The ambient wash goes. Three fixed radial gradients under every page put
   coloured light on every surface at once, which is the flattening effect in
   its purest form: a card cannot look raised off a ground that is already
   glowing. What is left is one very faint cool wash at the top of the dark
   schemes, so the ground has depth without competing with anything on it.
   ========================================================================== */

html { background: var(--bg); }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 40rem at 50% -14rem,
      color-mix(in srgb, var(--blue) 7%, transparent), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-size: var(--t-body);
  line-height: 1.6;
}

/* Paper and contrast get a flat ground. On a pale scheme a cool wash reads as
   a smudge, and on contrast it costs contrast for nothing. The previous sheet
   reinstated the wash on all four schemes and put a violet bloom across the
   top of the paper hero, which is the kind of thing a light scheme catches
   and a dark one hides. */
:root[data-scheme="paper"] body,
:root[data-scheme="contrast"] body { background-image: none; }

h1, h2, h3 {
  color: var(--ink);
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.14; }
h2 { font-size: var(--t-h2); line-height: 1.22; }
h3 { font-size: var(--t-h3); line-height: 1.3; }

p, li { text-wrap: pretty; }

.dim, .muted { color: var(--dim); }
.small { font-size: var(--t-small); line-height: 1.55; }
.tiny { font-size: var(--t-micro); line-height: 1.5; }
.fine,
.footer-disclaimer {
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.6;
}

a, button, input, textarea, select, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Focus is the one other place light is allowed, because it is the only
   signal a keyboard user gets. It is a ring, not a bloom. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   3. THE GUARANTEED CLASSES

   These ten names are the contract the surface owners are writing markup
   against. Names and behaviour are fixed.
   ========================================================================== */

/* ---- .stack and .stack-tight -------------------------------------------
   Vertical rhythm, from gap. The second rule is the load bearing one: a
   stack zeroes the block margins of its own children, so a heading's
   margin-bottom and a paragraph's margin-top can neither collapse into one
   another nor stack on top of the gap. One number controls the rhythm. */
/* `hidden` outranking: settled once, at the top of site.css, which every
   page loads including the admin half that never loads this sheet. The
   classes below set displays, so without that guard they would un-hide
   anything the markup marked `hidden`. */

.stack,
.stack-tight {
  display: grid;
  align-content: start;
  justify-items: stretch;
}
.stack { gap: var(--s-4); }
.stack-tight { gap: var(--s-2); }
.stack > *,
.stack-tight > * {
  margin-block: 0;
  min-width: 0;
}
/* A stack of stacks still reads as one rhythm: the outer gap is the topic
   break, the inner gap is the line break. */
.stack > .stack-tight { gap: var(--s-2); }

/* ---- .measure -----------------------------------------------------------
   Caps the line at 68 characters. Below about 30rem of usable width this
   never bites, which is correct: on a phone the viewport is the measure. */
.measure { max-width: 68ch; }

/* ---- the three surface weights -----------------------------------------
   Read these three blocks together. The only things that change between them
   are surface brightness, edge contrast and shadow depth. No hue moves. */

/* Weight 2 of 3, the default. On the ground, one pixel of lift. */
.card,
.panel {
  background: var(--sur-base);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  padding: var(--s-4);
  /* Kept for the flow contexts this app still renders into, for example the
     panels book.js and case.js append one after another. Bottom only, so it
     cannot double against a sibling's top margin. Inside a .stack the rule
     above zeroes it and the gap takes over. */
  margin: 0 0 var(--s-3);
  box-shadow: var(--el-1);
}

/* Weight 1 of 3. Below the ground, no shadow. For material that should be
   grouped and available but should not ask for attention: a list of facts, a
   rail of steps, a tray of small print. */
.card-quiet {
  background: var(--sur-quiet);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin: 0;
  box-shadow: var(--el-0);
}

/* Weight 3 of 3. The one thing on the screen that matters. Brighter surface,
   harder edge, a shadow with real depth. There should be at most one of
   these visible at a time, which is the entire point of it. */
.card-lit {
  background: var(--sur-lit);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin: 0;
  box-shadow: var(--el-3);
}

/* ---- .eyebrow -----------------------------------------------------------
   A micro caps label. Deliberately not a coloured chip: an eyebrow labels
   the thing under it and must not outrank it. */
.eyebrow {
  display: block;
  margin: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- .pill --------------------------------------------------------------
   44px tall, rounded, tappable, quiet. Its selected state is a step up the
   surface ladder, not a light. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--soft);
  font: 600 var(--t-small)/1.2 inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pill:hover { border-color: var(--edge-lit); }
.pill:active { transform: translateY(1px); }
.pill.on,
.pill.selected,
.pill[aria-pressed="true"],
.pill[aria-current="page"],
.pill[aria-current="true"] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  color: var(--ink);
  box-shadow: var(--el-1);
}

/* ---- .cta ---------------------------------------------------------------
   THE primary action. One treatment, and this is it. It fills with the
   accent, so it is the highest contrast object on the screen, and it is the
   only element in the system that still casts coloured light. Full width on
   a phone, because an unmistakable action is a bar, not a shrink wrapped
   label a thumb has to aim at. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--cyan);
  border-radius: var(--r-2);
  background: var(--cyan);
  color: var(--on-accent);
  font: 700 var(--t-body)/1.25 inherit;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--el-cta);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:active {
  transform: translateY(1px) scale(.995);
  box-shadow: var(--el-1);
}
.cta:disabled,
.cta[aria-disabled="true"] {
  opacity: .38;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
/* Past a phone the bar stops being the whole width and becomes a target that
   still cannot be mistaken for anything else on the page. */
@media (min-width: 34rem) {
  .cta { width: auto; min-width: 15rem; justify-self: start; align-self: start; }
}

/* ---- .divide ------------------------------------------------------------
   A hairline that means "new topic". Inside a stack it carries the gap on
   both sides plus a little of its own, so a topic break reads as a bigger
   break than a paragraph break without a second spacing system. */
.divide,
/* .title-rule is the same object under the name about.html already uses. It
   was a 2px cyan gradient bar with a bloom around it, which made the quietest
   piece of punctuation on the page one of the brightest things on it. */
.title-rule {
  height: 1px;
  margin-block: var(--s-1);
  padding: 0;
  border: 0;
  background: var(--edge-base);
  box-shadow: none;
}


/* ==========================================================================
   4. PAGE FLOW

   main becomes the outermost stack. Every page gets its section rhythm from
   one gap rather than from a margin-top on .land-sec that collapsed against
   whatever the previous section happened to end with.
   ========================================================================== */

main {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-4) 1.1rem var(--s-6);
}
main > * { margin-top: 0; margin-bottom: 0; min-width: 0; }
/* Enumerated because a class beats `main > *` on specificity, and a margin
   inside a grid adds to the gap rather than collapsing into it. */
main > .card,
main > .panel,
main > .step-rail,
main > .title-rule,
main > .trust,
main > .footer-disclaimer,
main > footer.legal { margin: 0; }

/* Sections are stacks too, so the inside of a section has one rhythm and the
   space between sections has another, and the two never add up. The hero is
   the one exception and section 7 says why. */
.land-sec {
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.land-sec > * { margin-block: 0; min-width: 0; }
/* margin: 0 is not redundant. site.css sets a .9rem margin-bottom on this
   exact selector, and a margin inside a grid does not collapse, it adds, so
   without this line every section heading sat on gap plus margin. */
.land-sec > h2 { margin: 0; color: var(--ink); font-size: var(--t-h2); }
/* The glowing diamond that sat before every h2 is gone. A mark that says
   "important" in front of every heading on a page says nothing at all. A
   heading at 1.3rem with 2rem of air above it is already a heading. */
.land-sec > h2::before { content: none; }

.page-head {
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--edge-quiet);
}
.page-head h1 { font-size: var(--t-h1); line-height: 1.12; }
.page-head .hero-sub {
  max-width: 46ch;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.55;
}


/* ==========================================================================
   5. APP CHROME
   ========================================================================== */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bar);
  border-bottom: 1px solid var(--edge-base);
  box-shadow: var(--el-1);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.bar-inner { padding: var(--s-2) 1rem; min-height: 60px; }
.brand { font-size: 1.06rem; letter-spacing: -.025em; }
/* The wordmark does not need to glow to be the wordmark. */
.brand .spark { text-shadow: none; }

.nav-toggle,
.cog-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--r-2);
  border: 1px solid var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
  box-shadow: none;
}
.nav-toggle:hover,
.cog-btn:hover,
.nav-toggle:focus-visible,
.cog-btn:focus-visible {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: none;
}

.tabs a.active {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: none;
}
.bar-inner.collapsed .tabs {
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-3);
}

.demo-bar { border-bottom-color: var(--edge-base); }


/* ==========================================================================
   6. BUTTONS

   site.css already had the right idea: calm by default, one primary. It was
   the previous version of this sheet that put a cyan ring and a lifted edge
   on every button on every page. A secondary button is a bordered rectangle.
   A primary button is the .cta above, and .btn.glow is the same object under
   the name the existing markup already uses.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
  font: 700 var(--t-small)/1.25 inherit;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:hover { background: var(--sur-lit); border-color: var(--edge-lit); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn.ghost {
  background: transparent;
  border-color: var(--edge-lit);
  color: var(--ink);
}
.btn.ghost:hover { background: var(--sur-quiet); }

.btn.quiet {
  background: transparent;
  border-color: var(--edge-quiet);
  color: var(--dim);
}
.btn.quiet:hover { background: var(--sur-quiet); color: var(--soft); }

.btn.mag {
  background: transparent;
  border-color: var(--edge-lit);
  color: var(--ink);
}

/* One primary treatment, shared by name with .cta so the two cannot drift
   apart. Not full width here, because .btn.glow appears inside existing
   .actions rows beside a secondary button. */
.btn.glow,
.btn.mag.glow {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--on-accent);
  box-shadow: var(--el-cta);
}
.btn.glow:hover,
.btn.mag.glow:hover { background: var(--cyan); filter: brightness(1.06); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .38;
  box-shadow: none;
  transform: none;
}

.actions { gap: var(--s-2); }
.actions .btn { flex: 0 1 auto; }

/* The help dot renders inline beside a line of text, so it is 1.25rem across
   and cannot simply be grown to 44px without pushing the sentence apart. It
   gets the 44px instead as an invisible hit area centred on the dot, which is
   the size a thumb needs and costs the layout nothing. */
.help-dot {
  position: relative;
  background: var(--sur-quiet);
  border-color: var(--edge-lit);
  color: var(--dim);
  box-shadow: none;
}
.help-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.help-dot:hover { box-shadow: none; border-color: var(--edge-lit); }


/* ==========================================================================
   6b. THE GLOW LEDGER

   site.css carries 44 selectors that paint a coloured shadow or a coloured
   text shadow. That is the flattening, itemised: a dot in a carousel, a
   toggle, a heading marker, a step number and a category tag all threw the
   same light as the one button on the page that mattered.

   Every one of them is listed here, at the same specificity as the rule that
   set it, and every one of them is turned off. Depth, where a thing needs to
   read as raised, comes from the elevation ladder instead. The exceptions are
   deliberate and there are three: `.cta`, `.btn.glow` and `.act-c`, which are
   the same primary action under three names.

   Listing them out longhand rather than reaching for a blanket rule is the
   point. A blanket `box-shadow: none` would take the ladder with it, and the
   next person to add a glow would have no record of what was decided here.
   ========================================================================== */

.brand .spark,
.hero-eyebrow { text-shadow: none; }

.switch.on,
.seg button.on,
.intro-dots span.on,
.scheme-swatch.on,
.whats-new .wn-dots span.on,
.p-dot.on,
.timeline li.done .t-dot,
.timeline li.now .t-dot,
.hiw li::before,
.day h3::before,
.icon-chip,
.step-rail li.now .n,
.crumbs li.now,
.choice.selected,
.chip-label.selected,
.tag.c,
.tag.m,
.tag.o,
.review-card,
.close-ico,
.chat-expand:hover,
.chat-expand:focus-visible,
.help-dot:hover,
.tabs a.active { box-shadow: none; }

/* Two floating surfaces that do need to read as lifted off the page. They get
   the deepest step of the ladder rather than a coloured halo. */
.pa-toast,
.pa-toast.bad { box-shadow: var(--el-3); }

/* The pack cards keep the one pixel lift the rest of the cards have. */
.pack.rec-c,
.pack.rec-m { box-shadow: var(--el-1); }


/* ==========================================================================
   7. HOME

   THE HIERARCHY DECISION ON THIS PAGE. There were two doors, cyan and
   violet, at identical weight, both glowing. That is the definition of no
   primary action: the reader has to stop and choose before they know what
   the page wants of them. Booking a case is what this business does. So
   "Book a case" takes the .cta treatment and "Priority Chat" drops to card
   weight. One accent, one action, and the second door is still right there.
   ========================================================================== */

/* The hero is the one lit surface on the page. */
.land-sec.hero {
  display: block;                 /* see the note on .hero-art below */
  position: relative;
  overflow: hidden;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-4);
  background: var(--sur-lit);
  background-image: none;
  box-shadow: var(--el-3);
}

/* THE ART. site.css floats it so the headline wraps around it, which is why
   this section stays in normal flow rather than becoming a grid: a float has
   no effect on a grid item. But at display size the headline needs the whole
   measure, and an 8.4rem object beside it was a second focal point competing
   with the first, which is how a hero ends up with no focal point at all. So
   it becomes a watermark: large, off the corner, well under the text. The
   hero keeps its depth and its character and stops arguing with itself. */
.hero-art {
  position: absolute;
  z-index: 0;
  top: calc(var(--s-4) * -1);
  right: calc(var(--s-5) * -1);
  float: none;
  shape-outside: none;
  width: 13rem;
  height: auto;
  margin: 0;
  opacity: .14;
  pointer-events: none;
}
:root[data-scheme="paper"] .hero-art { opacity: .22; }
:root[data-scheme="contrast"] .hero-art { opacity: .3; }
.land-sec.hero > *:not(.hero-art) { position: relative; z-index: 1; }

/* The eyebrow was a cyan pill with a cyan border and a cyan wash, which made
   the smallest text on the screen one of the loudest things on it. */
.hero-eyebrow {
  display: block;
  width: auto;
  margin: 0 0 var(--s-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-align: left;
  text-indent: 0;
}

.land-sec.hero h1 {
  max-width: none;
  margin: 0 0 var(--s-3);
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.land-sec.hero .hero-sub {
  max-width: 46ch;
  margin: 0;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.55;
}

/* Supporting credentials, not a second headline. Hairline rule, small type,
   dim ink. It used to carry a solid cyan bar and near body size text over
   seven lines, in direct competition with the h1 above it. */
.hero-cred {
  margin: var(--s-3) 0 0;
  padding: 0 0 0 var(--s-3);
  border-left: 2px solid var(--edge-lit);
  border-radius: 0;
  background: none;
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}

.acts { gap: var(--s-2); margin-top: var(--s-4); }

.act {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
  box-shadow: var(--el-1);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.act:hover { background: var(--sur-lit); border-color: var(--edge-lit); }
.act:active { transform: translateY(1px) scale(.995); }
.act-ico {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-1);
  border: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
  color: var(--soft);
  box-shadow: none;
}
.act-chev { width: 1.1rem; height: 1.1rem; color: var(--dim); }

/* The primary door. Same object as .cta, reached through the class the
   existing markup already carries. */
.act-c {
  min-height: 64px;
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--on-accent);
  box-shadow: var(--el-cta);
}
.act-c:hover { background: var(--cyan); filter: brightness(1.06); }
.act-c .act-ico {
  border-color: transparent;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
  color: var(--on-accent);
}
.act-c .act-chev { color: var(--on-accent); }

/* The secondary door. Card weight, neutral ink, no fill and no light. */
.act-m {
  border-color: var(--edge-base);
  background: var(--sur-base);
  color: var(--ink);
}
.act-m .act-ico { color: var(--soft); }

/* The pulse animated a box-shadow this element no longer has, so it was
   animating nothing and repainting for the privilege. */
.act.pulse,
.btn.pulse { animation: none; }

.webapp-note {
  justify-content: center;
  margin: var(--s-1) 0 0;
  color: var(--dim);
  font-size: var(--t-micro);
}

/* The trust bar is four facts, not four claims. Quiet tray, one ink for all
   four icons: cyan, green, violet and gold in the space of a paragraph was
   four accents fighting each other and the hero above them. */
.trust {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-3);
  background: var(--sur-quiet);
  box-shadow: none;
}
.trust li {
  min-height: 52px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.3;
  text-align: left;
}
.trust .ico,
.trust li:nth-child(2) .ico,
.trust li:nth-child(3) .ico,
.trust li:nth-child(4) .ico {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  color: var(--soft);
}

/* How it works: three steps, all equal, so all three are card weight and
   none of them is lit. The rail is what makes them read as a sequence. */
.hiw { margin: 0; }
.hiw li { padding-bottom: var(--s-3); border-left-color: var(--edge-base); }
.hiw li:last-child { padding-bottom: 0; }
.hiw li::before {
  width: 1.85rem;
  height: 1.85rem;
  left: -.95rem;
  background: var(--sur-base);
  border-color: var(--edge-lit);
  color: var(--ink);
  box-shadow: none;
}
.hiw .step-card {
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.hiw p,
.hiw .step-card .step-text {
  margin: 0;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.55;
}
.icon-chip {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-1);
  border: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
  color: var(--soft);
}

/* The three service cards are the same weight on purpose: this is a menu,
   and a menu that pre-selects for the reader is not a menu. */
/* .svc-grid and everything under it exist only in this file, so these rules
   carry the layout as well as the look. There is no site.css fallback under
   them: drop the display and the cards collapse into running text. */
.svc-grid { display: grid; gap: var(--s-2); margin: 0; }
.svc-card,
.svc-card:nth-child(2) {
  display: grid;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
  color: var(--ink);
  text-decoration: none;
}
.svc-card:hover { border-color: var(--edge-lit); background: var(--sur-lit); }
.svc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: var(--s-1);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-1);
  background: var(--sur-quiet);
  color: var(--soft);
}
.svc-card h3 { margin: 0; font-size: var(--t-h3); line-height: 1.25; }
.svc-price {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.svc-per { font-size: .58em; font-weight: 400; color: var(--dim); }
.svc-line { color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
.svc-go {
  margin-top: var(--s-1);
  color: var(--cyan);
  font-weight: 700;
  font-size: var(--t-small);
}
/* A single right guillemet. Also defined only here. */
.svc-go::after { content: " \203A"; }

.mission {
  border-left: 2px solid var(--edge-lit);
  border-radius: 0;
  padding: 0 0 0 var(--s-3);
  background: none;
}
.mission p { color: var(--soft); }

.reviews-label {
  margin: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
}

.land-sec.closing {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-4);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
  justify-items: center;
}
.close-line {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  text-align: left;
}
.close-line strong { color: var(--ink); }
.close-ico {
  width: 2.2rem;
  height: 2.2rem;
  border-color: var(--edge-quiet);
  background: var(--sur-base);
  color: var(--soft);
  box-shadow: none;
}
.close-arrow { color: var(--dim); }


/* ==========================================================================
   8. SERVICES AND PRICING
   ========================================================================== */

.pack {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
  text-align: left;
}
/* The recommendation borders were carrying hue: cyan on two packages and
   violet on a third, which made one price list look like three offers from
   three different companies. It is one list. */
.pack.rec-c,
.pack.rec-m { border-color: var(--edge-base); }
.pack:hover { border-color: var(--edge-lit); }
.pack h3 { margin: 0; font-size: var(--t-h2); }
/* Every price is the same colour. Cyan on two packages and blue on a third
   made one price list look like offers from three different companies, and
   put a lit number in the middle of every card on the page. */
.pack .price,
.pack.rec-c .price,
.pack.rec-m .price { color: var(--ink); font-size: 1.45rem; line-height: 1.15; }
.pack .desc {
  margin: 0;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.6;
}
.pack-about { margin: 0; }

/* The in card action is a pill, so it reads as "there is more here" rather
   than as a second primary button on a page that already has one. */
.pack-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-small);
}

/* The three category tags were green, violet and orange, each with its own
   glow, sitting on the rim of three cards in a row. A tag is a label. It gets
   the quiet surface and keeps its shape, including the forward lean on the
   "on the go" one, which is character rather than emphasis. */
.tag,
.tag.c,
.tag.m,
.tag.o {
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
  background: var(--bg);
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  box-shadow: none;
}

.after-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.after-list li {
  position: relative;
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.55;
}
.after-list li::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: 1.15rem;
  width: .4rem;
  height: .4rem;
  border-radius: var(--r-pill);
  background: var(--soft);
  box-shadow: none;
}

.faq {
  overflow: hidden;
  margin: 0 0 var(--s-2);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-base);
  box-shadow: none;
}
.faq > summary { padding: var(--s-3); min-height: 52px; }
/* Open is a step up the surface ladder, not a light. */
.faq[open] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: var(--el-1);
}
.faq-a {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

.review {
  flex-basis: 17rem;
  padding: var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.review .rv-text { color: var(--soft); font-size: var(--t-small); line-height: 1.5; }
.review .rv-name { color: var(--dim); font-size: var(--t-micro); }


/* ==========================================================================
   9. BOOKING

   THE HIERARCHY DECISION ON THIS PAGE. The step rail, every open day, every
   time slot and the continue button were all lit at once. Now the rail is
   quiet furniture, the days are card weight, and the slot the reader has
   actually chosen is the only raised object on the screen.
   ========================================================================== */

/* Margin zero, not a bottom margin: the rail is a direct child of main, and
   main is a grid, so a margin here would add to the gap rather than sit
   inside it. Every element that main lays out directly follows this rule. */
.step-rail { gap: var(--s-1); margin: 0; }
.step-rail li {
  min-height: 56px;
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--dim);
  box-shadow: none;
}
.step-rail .n {
  width: 1.7rem;
  height: 1.7rem;
  background: var(--sur-base);
  border-color: var(--edge-quiet);
}
.step-rail li.now {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-1);
}
.step-rail li.now .n { border-color: var(--cyan); color: var(--cyan); }
.step-rail li.done { color: var(--soft); border-color: var(--edge-quiet); }

.day {
  margin: 0 0 var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.day h3 {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--edge-quiet);
  color: var(--ink);
}
.day h3::before { width: .3rem; height: 1.2rem; }

/* A slot is a row in a list of twelve. The air that matters is between the
   rows, not inside each one: padding here is multiplied by twelve and turns
   a two screen list into a three screen list for no gain in legibility. */
.slot {
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  line-height: 1.35;
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.slot .local { color: var(--dim); font-size: var(--t-micro); line-height: 1.4; }
.slot:hover,
.slot:focus-visible { background: var(--sur-base); border-color: var(--edge-lit); }
/* Selection is the one remaining place a hue carries information, because it
   answers "which one did I pick" and there is never more than one of them.
   It is an edge, not a bloom. */
.slot.selected {
  border-color: var(--cyan);
  border-width: 2px;
  background: var(--sur-lit);
  color: var(--ink);
  box-shadow: var(--el-2);
}
.slot.selected .local { color: var(--soft); }

.chip-label {
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  box-shadow: none;
}
.chip-label.selected {
  color: var(--ink);
  border-color: var(--cyan);
  background: var(--sur-lit);
}

input[type=email],
input[type=password],
input[type=text],
input[type=tel],
input[type=date],
input[type=time],
input[type=number],
input[type=url],
input[type=datetime-local],
select,
textarea {
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--ink);
  box-shadow: none;
}
textarea { min-height: 7rem; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--cyan);
  background: var(--sur-base);
  box-shadow: none;
}
label { color: var(--dim); font-size: var(--t-small); }

.agreement {
  margin: 0 0 var(--s-2);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  box-shadow: none;
}
.agreement > summary { min-height: 60px; padding: var(--s-3); }
.agreement-title { color: var(--ink); }
.agreement-plain {
  margin-top: var(--s-1);
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}
.agreement[open] {
  background: var(--sur-lit);
  border-color: var(--edge-lit);
  box-shadow: var(--el-1);
}
.agreement-body {
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-2);
  background: var(--bg);
  padding: var(--s-4) var(--s-3);
  font-size: var(--t-small);
  line-height: 1.65;
}
.agreement-body h3 { color: var(--ink); font-size: var(--t-micro); letter-spacing: .04em; }
.agreement-check { min-height: 52px; padding: var(--s-3); }
.price-line,
.included { border-color: var(--edge-quiet); }


/* ==========================================================================
   10. THE CASE SPACE

   THE HIERARCHY DECISION ON THIS PAGE. This is the busiest screen in the app
   and it was the most uniformly lit: a glowing tab row, a glowing confirm
   banner, a glowing folder, a glowing hint card and a glowing action, all in
   the first screenful. Now the folder chrome and the tabs are furniture, the
   banner that says what happens next is the one raised surface, and the
   action on it is the one accent.
   ========================================================================== */

.case-picker { gap: var(--s-2); margin: 0 0 var(--s-3); }
.case-picker .btn { border-radius: var(--r-pill); padding-inline: var(--s-3); }

.case-sec-h { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-h3); }

/* The one raised surface on arrival. */
.confirm-banner {
  border: 1px solid var(--edge-lit);
  border-radius: var(--r-3);
  background: var(--sur-lit);
  box-shadow: var(--el-3);
}

.nav-hint,
.setup-guide,
.push-prompt {
  border-color: var(--edge-base);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}

.folder {
  color: var(--ink);
  background: var(--sur-base);
  border: 1px solid var(--edge-base);
  box-shadow: var(--el-1);
}
.folder:hover,
.folder:focus-visible {
  transform: translateY(-2px);
  border-color: var(--edge-lit);
  box-shadow: var(--el-2);
}

.case-folder {
  padding: var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--edge-base);
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--sur-base);
  box-shadow: var(--el-1);
}
.case-folder::after { background: var(--sur-quiet); box-shadow: none; opacity: .8; }

.folder-tabs {
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: var(--s-1) 0 var(--s-2);
  background: transparent;
  border-bottom: 1px solid var(--edge-quiet);
  backdrop-filter: none;
}
.folder-tabs > a {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-pill);
  background: var(--sur-quiet);
  color: var(--dim);
  box-shadow: none;
}
/* The selected tab keeps site.css's 2px accent bar along its top edge, which
   is a hairline that says "this one", and loses the cyan drop-shadow bloom
   that site.css wrapped the whole trapezoid in. A marker, not a light. */
.folder-tabs > a.active,
.folder-tabs > a.on,
.folder-tabs > a[aria-current="page"],
/* The scoped form as well: site.css sets the glow at .case-folder .folder-tabs
   > a.on, one class more specific than the plain form, so a rule without the
   prefix loses to it and the bloom stays. */
.case-folder .folder-tabs > a.on {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
  box-shadow: var(--el-1);
  filter: none;
}

.timeline { display: grid; gap: var(--s-1); }
.timeline li {
  align-items: flex-start;
  padding: var(--s-2);
  border: 1px solid var(--edge-quiet);
  border-radius: var(--r-1);
  background: var(--sur-quiet);
  color: var(--dim);
  font-size: var(--t-small);
  line-height: 1.5;
}
.timeline li.now {
  color: var(--ink);
  border-color: var(--edge-lit);
  background: var(--sur-lit);
}

.dropzone {
  min-height: 100px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--edge-lit);
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  color: var(--dim);
}
.filelist li { padding: var(--s-2) 0; border-bottom-color: var(--edge-quiet); }

.followup-offer,
.review-card {
  padding: var(--s-4);
  border: 1px solid var(--edge-base);
  border-radius: var(--r-3);
  background: var(--sur-base);
  background-image: none;
  box-shadow: var(--el-1);
}

.notice-box {
  border-radius: var(--r-2);
  border: 1px solid var(--edge-lit);
  background: var(--sur-quiet);
  color: var(--soft);
}
.notice-box.pending { background: var(--sur-quiet); border-color: var(--edge-lit); }


/* ==========================================================================
   11. CHAT
   ========================================================================== */

.chat-root { border-radius: var(--r-3); }
.chat-log { gap: var(--s-2); padding: var(--s-3) 0; }
.msg {
  max-width: 86%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  line-height: 1.5;
  box-shadow: none;
}
/* Mine is the raised one, theirs is on the ground. The same two step ladder
   as everywhere else, doing the job a colour pair used to do. */
.msg.me {
  background: var(--sur-lit);
  border: 1px solid var(--edge-lit);
  color: var(--ink);
  border-bottom-right-radius: var(--r-1);
  box-shadow: var(--el-1);
}
.msg.them {
  background: var(--sur-quiet);
  border: 1px solid var(--edge-quiet);
  border-bottom-left-radius: var(--r-1);
}
.msg .msg-meta { color: var(--dim); font-size: var(--t-micro); }

.chat-form { gap: var(--s-2); }
.attach-btn,
.chat-expand {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-2);
  background: var(--sur-quiet);
  border: 1px solid var(--edge-base);
  box-shadow: none;
}


/* ==========================================================================
   12. MODALS

   A sheet over a dimmed page is already the most important thing on screen.
   It needs depth, not light.
   ========================================================================== */

.intro-overlay,
.settings-overlay,
.msg-menu-overlay {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.intro-card,
.settings-card,
.msg-menu-sheet {
  border-radius: var(--r-4);
  border: 1px solid var(--edge-lit);
  background: var(--sur-lit);
  background-image: none;
  box-shadow: var(--el-3);
}


/* ==========================================================================
   13. THE FOOTER
   ========================================================================== */

.site-foot {
  margin: var(--s-5) 0 0;
  padding: var(--s-5) 1.1rem var(--s-6);
  border-top: 1px solid var(--edge-quiet);
  background: var(--sur-quiet);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
}
.foot-col { display: grid; gap: 0; align-content: start; }
.foot-col h2 {
  margin: 0 0 var(--s-1);
  border: 0;
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.foot-col h2::before { content: none; }
.foot-col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--soft);
  font-size: var(--t-small);
  text-decoration: none;
}
.foot-col a:hover,
.foot-col a:focus-visible { color: var(--cyan); }
.foot-serving { margin: var(--s-4) 0 var(--s-2); color: var(--dim); font-size: var(--t-small); }
.site-foot .fine {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--edge-quiet);
  color: var(--dim);
  font-size: var(--t-micro);
  line-height: 1.55;
}

@media (min-width: 34rem) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   14. NOTHING ESCAPES ITS OWN BORDER

   Kept from the previous sheet because it fixed a real, measured bug: in
   tight mode the five case tabs shared one fixed row, so "Progress" needed
   73px of label inside a 71px pill and hung over both edges. A shared row
   that shrinks can only ever be tuned for the labels that exist today, so
   the row scrolls and every pill takes its natural width instead.
   ========================================================================== */

.case-folder .folder-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  scroll-padding-inline: var(--s-2);
  /* A mask reads alpha only, so the colour here does no work beyond being
     opaque. It is a token so this sheet holds at zero literal colours. */
  -webkit-mask-image: linear-gradient(to right, var(--ink) 0,
    var(--ink) calc(100% - 1.4rem), transparent 100%);
  mask-image: linear-gradient(to right, var(--ink) 0,
    var(--ink) calc(100% - 1.4rem), transparent 100%);
}
.case-folder .folder-tabs::-webkit-scrollbar { display: none; }
.case-folder .folder-tabs > a {
  flex: 0 0 auto;
  min-width: max-content;
  flex-direction: row;
  align-items: center;
  gap: var(--s-1);
  padding-inline: var(--s-3);
  white-space: nowrap;
}
.case-folder .folder-tabs > a .ftab-t { white-space: nowrap; overflow-wrap: normal; }

/* The general form: anything with a border and a label keeps the label
   inside, and grows rather than letting the text hang over the rim. */
.btn,
.act,
.cta,
.pill,
.pack-cta,
.chip-label,
.case-folder .folder-tabs > a {
  overflow: visible;
  min-width: 0;
  text-overflow: clip;
}
.act,
.btn,
.cta {
  white-space: normal;
  overflow-wrap: anywhere;
}
.act > span,
.btn > span,
.cta > span { min-width: 0; }

/* THE PRESS. A phone has no hover, so the affordance has to live in the tap.
   Every one of these is something a finger is meant to land on, and every one
   of them moves under it. This is the one piece of feedback the previous
   sheet got right and it survives the rewrite intact. */
.slot,
.chip-label,
.pack-cta,
.attach-btn,
.chat-expand,
.nav-toggle,
.cog-btn,
.case-folder .folder-tabs > a,
.svc-card,
.pack,
.folder {
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.slot:active,
.chip-label:active,
.pack-cta:active,
.attach-btn:active,
.chat-expand:active,
.nav-toggle:active,
.cog-btn:active,
.case-folder .folder-tabs > a:active,
.svc-card:active,
.pack:active {
  transform: translateY(1px) scale(.99);
}

/* Disabled must not look tappable. */
.btn:disabled,
.btn[aria-disabled="true"],
.slot[disabled],
.slot[aria-disabled="true"] {
  box-shadow: none;
  transform: none;
  opacity: .38;
}


/* ==========================================================================
   15. THE CONTRAST SCHEME

   Everything above is expressed in surface, edge and shadow. Contrast turns
   the shadows off in the token block, so the ladder has to be carried by
   border weight there instead. Same three step ranking, drawn with the one
   tool that scheme allows.
   ========================================================================== */

:root[data-scheme="contrast"] .card,
:root[data-scheme="contrast"] .panel,
:root[data-scheme="contrast"] .day,
:root[data-scheme="contrast"] .pack,
:root[data-scheme="contrast"] .svc-card,
:root[data-scheme="contrast"] .faq,
:root[data-scheme="contrast"] .agreement,
:root[data-scheme="contrast"] .act,
:root[data-scheme="contrast"] .btn { border-width: 2px; }

:root[data-scheme="contrast"] .card-lit,
:root[data-scheme="contrast"] .land-sec.hero,
:root[data-scheme="contrast"] .confirm-banner,
:root[data-scheme="contrast"] .intro-card,
:root[data-scheme="contrast"] .settings-card,
:root[data-scheme="contrast"] .act-c,
:root[data-scheme="contrast"] .cta,
:root[data-scheme="contrast"] .btn.glow { border-width: 3px; }

:root[data-scheme="contrast"] .card-quiet,
:root[data-scheme="contrast"] .trust,
:root[data-scheme="contrast"] .slot,
:root[data-scheme="contrast"] .step-rail li,
:root[data-scheme="contrast"] .after-list li,
:root[data-scheme="contrast"] .timeline li,
:root[data-scheme="contrast"] .pill,
:root[data-scheme="contrast"] .folder-tabs > a { border-width: 1px; }

:root[data-scheme="contrast"] .pill.on,
:root[data-scheme="contrast"] .folder-tabs > a.on,
:root[data-scheme="contrast"] .folder-tabs > a.active,
:root[data-scheme="contrast"] .slot.selected {
  border-width: 3px;
  border-color: var(--cyan);
}


/* ==========================================================================
   16. THE ENHANCE TAB

   Eric: "enhancements need to be their own shiny special diamond category."
   Four of the five case tabs are places to read something the client already
   has. One is the place where something is offered. It is the exception the
   rest of this sheet exists to make possible: with every other tab quiet,
   one marked tab reads as an invitation rather than as more filing.
   ========================================================================== */

.case-folder .folder-tabs > a[data-page="addons"] {
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line));
  background: color-mix(in srgb, var(--magenta) 10%, var(--sur-quiet));
  color: var(--ink);
  font-weight: 700;
}
.case-folder .folder-tabs > a[data-page="addons"] .ftab-ic { color: var(--magenta); }
.case-folder .folder-tabs > a[data-page="addons"].on {
  border-color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 16%, var(--sur-lit));
  box-shadow: var(--el-1);
}

#addons .case-sec-h,
[data-page-pane="addons"] .case-sec-h { color: var(--magenta); }

:root[data-scheme="contrast"] .case-folder .folder-tabs > a[data-page="addons"] {
  background: none;
  border-width: 3px;
  border-color: var(--magenta);
}
:root[data-scheme="contrast"] #addons .case-sec-h,
:root[data-scheme="contrast"] [data-page-pane="addons"] .case-sec-h { color: var(--ink); }


/* ==========================================================================
   17. NARROW PHONE TUNING
   ========================================================================== */

@media (max-width: 430px) {
  main { gap: var(--s-4); padding-inline: var(--s-3); }
  .bar-inner { padding-inline: var(--s-3); }
  .land-sec.hero,
  .land-sec.closing { padding: var(--s-4) var(--s-3); }
  .hero-art { width: 11rem; right: calc(var(--s-4) * -1); }
  .act { min-height: 58px; }
  .act-c { min-height: 62px; }
  .step-rail .t { font-size: var(--t-micro); }
  .hiw li.step-row { padding-left: var(--s-5); }
  .hiw .step-card { padding: var(--s-3) var(--s-2); }
  .pack { padding: var(--s-3); }
  .site-foot { padding-inline: var(--s-3); }
}

@media (max-width: 350px) {
  .trust { grid-template-columns: 1fr; }
  .hero-art { width: 9rem; }
  .step-rail { display: grid; grid-template-columns: 1fr; }
  .step-rail li { min-height: 48px; }
}