/* ═══════════════════════════════════════════════════════════════════════════
   arc-shell.css · THE ONE ARCVERSE APP SHELL.
   Built 7 September 2026 by arc-frontend, under D-112 (Architect, 7 Sep 2026).

   WHAT THIS IS. One shared chrome for every ARCverse surface: a floating dock
   navigation, a persistent 46px MATCH/GROW/BUILD journey strip, a band rhythm
   that alternates real dark navy sections with paper, a photographic ground
   system that makes text over imagery safe by arithmetic rather than by luck,
   and the depth/motion vocabulary the two approved premium prototypes use.
   Pair it with site/arc-shell.js, which mounts the dock and the strip.

   ═══ WHAT IT IS NOT, AND THIS IS A DARREN RULING, NOT A PREFERENCE ═══════
   .superdesign/design-system.md SECOND ADDENDUM, 6 Sep 2026:

     "The entire sidebar + header + top bar + card grid + widgets + progress
      component + purple AI button shape is rejected as generically SaaS...
      Do not reproduce this skeleton in any form."

   Rejected by name: a fixed dark left navigation rail as primary nav; a
   light/white canvas dominating the page; content as a grid of same-sized
   rounded cards; a big colourful multi-container progression display.

   🚨 site/arc-ui.css's .arc-shell / .arc-side / .arc-top IS THAT SKELETON.
      Six live pages use it (arcverse-dashboard, dashboard, fac-desk,
      founder-home, member-home, student-home). THIS FILE DOES NOT EXTEND IT,
      DOES NOT IMPORT IT, AND MUST NEVER GROW A SIDEBAR. If a future page needs
      "somewhere to put the links", the answer is the dock, not a rail.

   🔒 THE BAR THE RULING SETS: "identifiable as ARCverse from a single
      screenshot with the logo removed." Every decision below is measured
      against that, not against a checklist of hex values.

   ═══ COLOUR ═════════════════════════════════════════════════════════════
   🔒 EVERY COLOUR HERE COMES FROM site/arc-tokens.css's --s3-* SET, OR IS
      DERIVED FROM ONE WITH color-mix(). Nothing is minted. The two exceptions
      are #fff and #000, which are declared ONCE below as achromatic anchors:
      they are not brand colours, they are the ends of the luminance axis that
      color-mix() derives along, and every prototype in this language uses them
      the same way. A raw brand hex anywhere else in this file is a bug —
      it is the one thing that stops an arena recolouring a whole surface by
      overriding tokens.

   🔒 --s3-gold AND --s3-purple ARE FILLS. NEVER TEXT COLOUR ON PAPER.
      arc-tokens.css measures --s3-gold at 2.10:1 on white. Gold appears here
      only on navy (where it is measured), as a rule, a dot, an outline or a
      fill under dark ink. Purple appears only on the full-bleed AI band
      (.arcs-band--ai). The dock's purple .arcs-ask pill was REMOVED 9 Sep
      2026 on the Architect's ruling — see the note above .arcs-me below.

   ═══ REQUIRES ═══════════════════════════════════════════════════════════
   <link rel="stylesheet" href="arc-tokens.css">   ← FIRST. Owns --s3-*.
   <link rel="stylesheet" href="arc-shell.css">    ← this file.
   <script src="arc-shell.js" defer></script>      ← mounts dock + strip.
   Inter 400/500/600. 600 IS THE CEILING — there is no 700 anywhere in ARC.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the two achromatic anchors. See the note above: these are not brand
        colours, they are the axis color-mix() derives along. ─────────────── */
  --arcs-w : #fff;
  --arcs-k : #000;

  /* ── DERIVED SURFACES. The same five derivations, by the same formulas, as
        design-prototypes/profile-premium-experiment.html and
        owner-view-premium-experiment.html. If this file and those derived
        "text on navy" differently they would not be one product. ─────────── */
  --arcs-navy-deep : color-mix(in srgb, var(--s3-navy) 72%, var(--arcs-k));
  --arcs-navy-lift : color-mix(in srgb, var(--s3-navy) 88%, var(--arcs-w));
  --arcs-on-navy   : color-mix(in srgb, var(--arcs-w) 74%, var(--s3-navy));
  --arcs-on-navy-3 : color-mix(in srgb, var(--arcs-w) 56%, var(--s3-navy));
  /* 🚨 THIS LINE WAS DARKENED AND THEN PUT BACK, AND THE ATTEMPT IS LEFT
     RECORDED BECAUSE THE FAILURE IS THE USEFUL PART. The 6 Sep addendum's
     colour correction says the prior concepts were "too dominated by
     white/light grey", so paper was retuned to (--s3-grey 93% + --s3-navy)
     to stop the light bands reading as a second white. Computed: that lands
     on #E4E7ED, and --s3-ink-mid #5e6b7b on #E4E7ED is 4.39:1 — a FAIL of the
     4.5 floor, on the token this estate uses for nearly every caption, hint
     and note.
     ⚠ AND THE FIRST MEASUREMENT SAID IT PASSED. A browser contrast sweep run
       before the stylesheet reloaded reported 4.95:1 — the OLD paper's number,
       attributed to the new one. A measurement taken against a stale render is
       not a measurement; it is the previous answer wearing the new question's
       label.
     🔒 SO PAPER STAYS AT THE PROTOTYPES' DERIVATION (5.08:1 against
        --s3-ink-mid, controls black/white 21.00 and white/white 1.00). The
        white-dominance correction is answered by BAND COMPOSITION instead —
        a page in this system runs navy stage, navy section, AI band and navy
        footer against two light bands, and the two light ones are never
        adjacent. That is a structural answer, and it costs no contrast.
     ⚠ --s3-ink-mid HAS ALMOST NO HEADROOM ON ANY LIGHT SURFACE. Darkening a
       background under it by three per cent is enough to fail it. Anything
       that moves this value must be measured against that token first. */
  --arcs-paper     : color-mix(in srgb, var(--s3-grey) 60%, var(--arcs-w));

  /* hairlines, so no rule in this file writes a raw rgba() white. */
  --arcs-hair    : color-mix(in srgb, var(--arcs-w) 13%, transparent);
  --arcs-hair-2  : color-mix(in srgb, var(--arcs-w) 20%, transparent);
  --arcs-hair-g  : color-mix(in srgb, var(--s3-gold) 30%, transparent);
  --arcs-glass   : color-mix(in srgb, var(--arcs-navy-deep) 92%, transparent);

  /* ── TYPE. Inter only. 600 is the ceiling, estate-wide. ───────────────── */
  --arcs-display : clamp(2.35rem, 4.3vw, 3.65rem);
  --arcs-h2      : clamp(1.75rem, 3.2vw, 2.75rem);
  --arcs-h3      : clamp(1.125rem, 1.6vw, 1.375rem);
  --arcs-body    : 1rem;
  --arcs-small   : 0.875rem;
  --arcs-micro   : 0.8125rem;

  /* ── DEPTH. One plate shadow, lifted verbatim from the prototypes, because
        two surfaces that shadow differently do not read as one system. ───── */
  --arcs-shadow-plate : 0 34px 64px -22px rgb(3 10 24 / .78), 0 4px 14px rgb(3 10 24 / .4);
  --arcs-shadow-paper : 0 22px 46px -26px rgb(15 23 42 / .38);
  --arcs-shadow-lift  : 0 8px 22px -10px rgb(3 10 24 / .9);

  /* ── CHROME GEOMETRY. Declared, because the dock is fixed and the strip is
        fixed and every anchor target on every adopting page has to clear
        both. A page that scrolls to slightly the wrong place is the worst
        kind of bug: nobody reports it, they just distrust the page. ──────── */
  --arcs-dock-h  : 84px;
  --arcs-strip-h : 46px;

  /* ── BAND RHYTHM. One padding pair for every band on every page, so two
        ARCverse surfaces cannot drift into two different rhythms. ────────── */
  --arcs-band-y  : clamp(64px, 9vw, 116px);
  --arcs-band-x  : clamp(20px, 4vw, 48px);
  --arcs-stage-t : clamp(96px, 11vh, 140px);
  --arcs-stage-b : clamp(64px, 9vh, 110px);
  --arcs-max     : 1240px;
  --arcs-max-wide: 1440px;

  /* ── THE LAYER SCALE, DECLARED. Round 3 of the profile prototype raised
        this: the values were correct but ad-hoc, which is how a stacking
        order becomes a set of magic numbers nobody dares change.
          -2  photographic ground inside an isolated band
           1  a stage's clipped photograph
           3  a stage's words and grid
           4  a plate that must clear the band BELOW its own section
          38  a page-level sub-bar, if a page has one
          40  the fixed dock
          45  the fixed journey strip
          50  the mobile navigation sheet, which must beat the dock
          60  the skip link, which has to beat everything              ────── */
  --arcs-z-bg     : -2;
  --arcs-z-photo  : 1;
  --arcs-z-content: 3;
  --arcs-z-plate  : 4;
  --arcs-z-bar    : 38;
  --arcs-z-dock   : 40;
  --arcs-z-strip  : 45;
  --arcs-z-sheet  : 50;
  --arcs-z-skip   : 60;

  /* ══════════════════════════════════════════════════════════════════════
     THE PHOTOGRAPHIC GROUND SYSTEM. Lifted from
     design-prototypes/owner-view-premium-experiment.html (round 5), where it
     replaced a set of washes each tuned by looking at the one image behind
     it — a system that measured 4.60:1 on the actual photograph and 4.19:1
     against a white plate. It passed by 0.1 of luck.

     🔒 THE TWO NUMBERS ARE TRANSMITTANCES, NOT COLOURS. T is how much of the
        photograph survives to the eye. Every layer is the SAME ink, so the
        composite over any photograph P is  result = INK + (P - INK) * T,
        and the worst case is simply P = white. The guarantee is arithmetic.

          --arcs-wash-open  alpha .42  →  T = .58    the image BREATHES here.
                                                     No text ever sits on it.
          --arcs-wash-read  alpha .78  →  applied ON TOP of the floor, so text
                                          sits at T = .58 x .22 = .1276

        At T = .1276 over a WHITE photograph (the worst image that can exist):
          #fff              13.2:1      --arcs-on-navy    7.6:1
          --s3-gold          6.3:1      --arcs-on-navy-3  4.8:1
        All four clear AA at body size against ANY photograph.

     🔒 THE RULE IS NOT "PICK A DARK PHOTO." It is: text only ever sits on an
        .arcs-ground, and an .arcs-ground only ever sits on a floored image.
     ⚠ THE FLOOR IS FLAT AND MUST STAY FLAT. A directional gradient on a
       photograph is COMPOSITION ONLY and may only ever DARKEN. The moment a
       wash is allowed to get lighter somewhere, the guarantee has a hole in
       it exactly where nobody thought to measure. ═══════════════════════ */
  --arcs-ink       : color-mix(in srgb, var(--s3-navy) 62%, var(--arcs-k));
  --arcs-wash-open : color-mix(in srgb, var(--arcs-ink) 42%, transparent);
  --arcs-wash-read : color-mix(in srgb, var(--arcs-ink) 78%, transparent);

  /* how far a ground reaches past the text it protects. The feathers are
     OUTSIDE these edges, so the full-strength plateau is exactly the text
     block's own border box — which makes "every glyph is on the floor" true
     by construction rather than by inspection. */
  --arcs-ground-f : 54px;   /* top + bottom, feathered by the mask */
  --arcs-ground-l : 56px;   /* left feather                        */
  --arcs-ground-r : 190px;  /* right feather, into the open image   */
}

/* ══ PAGE BASE. Scoped to .arcs-page so this file can be linked by a page
   that is only adopting the dock, without it repainting that page's body. ══ */
.arcs-page {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--arcs-body);
  line-height: 1.6;
  /* 🚨 WAS `color: var(--s3-ink)` ON THIS NAVY BACKGROUND = 1.08:1 — near-black
     ink on near-black navy, i.e. invisible. It never showed because every band
     (--paper, --white, --navy, --ai, .arcs-stage, .arcs-foot) sets its own colour,
     so the only text that ever inherited it was text OUTSIDE a band. A default
     that is only safe while nothing relies on it is not a safe default.
     Found 8 Sep by resolving every color-mix() chain and scanning each rule that
     declares BOTH color and background — not by looking at the page. Instrument
     controlled: black/white returned 21.00 and white/white 1.00.
     --arcs-on-navy on --s3-navy measures 9.50:1, and is the value the rest of the
     shell already uses for text on navy, so this is the existing language, not a
     new colour. Bands are unaffected: each overrides colour explicitly. */
  color: var(--arcs-on-navy);
  background: var(--s3-navy);
  font-feature-settings: "cv05" 1;
  -webkit-font-smoothing: antialiased;
}

.arcs-page *, .arcs-page *::before, .arcs-page *::after { box-sizing: border-box; }

.arcs-page img { display: block; max-width: 100%; }

.arcs-page h1, .arcs-page h2, .arcs-page h3 {
  margin: 0; font-weight: 600; letter-spacing: -0.032em; line-height: 1.06;
}

.arcs-page p, .arcs-page ul, .arcs-page ol { margin: 0; }

.arcs-page ul, .arcs-page ol { padding: 0; list-style: none; }
/* 🚨 figure AND blockquote CARRY A UA `margin: 1em 40px`, AND BOTH BITE.
   Found on the profile prototype by MEASURING element rects at 390px, not by
   looking: a plate computed justify-self:start and still sat 40px in, and on
   desktop the same 40px quietly held it off the right edge of a composition
   whose entire point is that it reaches the edge. Neither reads as a mistake —
   they look like slightly worse spacing decisions, which is exactly why an
   eyeball pass misses them. */
.arcs-page figure, .arcs-page blockquote, .arcs-page figcaption { margin: 0; }

.arcs-page button:not(.arcs-btn) { font: inherit; color: inherit; }
/* 🚨 THE LINE ABOVE SILENTLY BEAT THE BUTTON COMPONENT, AND IT TOOK A SCREENSHOT
   TO SEE IT. Found 8 Sep 2026 by arc-frontend while rendering hub.html's feedback
   panel; independently confirmed here by specificity analysis and a census.
   `.arcs-page button` is (0,1,1). `.arcs-btn` is (0,1,0). On a <button> the reset
   WINS, so the label takes `color: inherit` from its container instead of the
   component's own white. Inside a white panel that resolves to --s3-ink #0F172A
   painted on the .arcs-btn navy fill #0B1F3B = 1.08:1. The label was invisible.
   ⚠ IT HID BECAUSE IT ONLY AFFECTS <button>. The 35 <a class="arcs-btn"> anchors
     in site/ carry no element in the selector and were always correct, so the
     component looked fine everywhere anyone happened to look. 11 real buttons
     were wrong: hub.html 3, my-arc.html 8.
   🔒 BOTH RULES ARE INDIVIDUALLY CORRECT. A source read finds nothing, because
      the defect exists only in the relationship between them.
   🚨 THE FIRST FIX ATTEMPTED HERE WAS WORSE THAN THE DEFECT, AND IS RECORDED
      BECAUSE IT WAS NEARLY SHIPPED. Adding `.arcs-page .arcs-btn { color:
      var(--arcs-w) }` at (0,2,0) does beat the reset — and also beats every
      VARIANT, each of which declares its own colour at (0,1,0):
        .arcs-btn--light   background --arcs-w,     color --s3-navy
        .arcs-btn--gold    background transparent,  color --s3-gold
        .arcs-btn--ghost   background transparent,  color --s3-ink
      Forcing white would have made --light WHITE ON WHITE, 1.00:1, as the cure
      for a 1.08:1. Caught by listing the variants BEFORE committing, not after.
   ✅ THE FIX USED INSTEAD removes the conflict rather than layering over it:
      `button:not(.arcs-btn)` keeps the same (0,1,1) weight and simply stops
      matching the component, so .arcs-btn and every variant win naturally at
      their own specificity and nothing has to out-shout anything. */


/* the strip is FIXED, so the document has to end above it or the last line of
   the footer sits under it for ever. Applied by arc-shell.js only when the
   strip actually mounts — a page with no journey position gets no strip and
   must not get the padding either. */
.arcs-strip-on { padding-bottom: var(--arcs-strip-h); }

/* anchors have to clear BOTH pieces of fixed chrome. */
html.arcs-has-shell {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--arcs-dock-h) + 24px);
  scroll-padding-bottom: calc(var(--arcs-strip-h) + 16px);
}

/* ══ FOCUS. READ THIS BEFORE CHANGING IT. ═══════════════════════════════════
   🚨 THIS FILE DOES NOT OWN THE FOCUS RING AND MUST NOT TRY TO.
   arc-tokens.css already sets an estate-wide :focus-visible ring on every
   focusable element WITH !important, precisely because 20+ pages carry
   `outline:none`. A local :focus-visible rule here would read as correct in
   the source and do nothing on the page — that exact defect was measured on
   the MATCH prototype.
   🔒 The estate exposes --focus-ring and --focus-halo for this. Dark surfaces
      RETINT the estate ring rather than forking it; paper surfaces keep the
      estate default, which is already right on light.
   ⚠ DO NOT "FIX" ANYTHING HERE BY ADDING MORE !important. ═════════════════ */
.arcs-dock, .arcs-sheet, .arcs-journey,
.arcs-band--navy, .arcs-band--ai, .arcs-stage, .arcs-foot {
  --focus-ring: var(--s3-gold);
  --focus-halo: color-mix(in srgb, var(--arcs-ink) 85%, transparent);
}

/* ══ SKIP LINK + SCREEN-READER TEXT ═══════════════════════════════════════ */
.arcs-skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--arcs-z-skip);
  background: var(--arcs-w); color: var(--s3-ink);
  padding: 12px 18px; border-radius: 2px; text-decoration: none;
  font-size: var(--arcs-small); font-weight: 500;
}

.arcs-skip:focus { left: 16px; top: 16px; }


.arcs-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   THE DOCK.  A compact floating dock, split to the corners with the
   destinations centred between them. NOT A RAIL. It floats over whatever the
   page is showing, it never reserves a column, and it never turns a whole
   page into "content area, right of the nav".

   🔒 THREE-COLUMN GRID, NOT space-between. With space-between, the middle
      child is only centred when the two outer children happen to be the same
      width — which they are not, and which changes the moment a page passes a
      longer context word. 1fr auto 1fr centres it by construction.
   ════════════════════════════════════════════════════════════════════════ */
.arcs-dock {
  position: fixed; inset: 0 0 auto 0; z-index: var(--arcs-z-dock);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px;
  padding: 18px clamp(18px, 3vw, 40px);
  pointer-events: none;   /* the gaps between the pills stay clickable */
}

.arcs-dock > * { pointer-events: auto; min-width: 0; }
/* 🚨 THE COLUMNS ARE NAMED EXPLICITLY AND THAT IS A BUG FIX, NOT PEDANTRY.
   Below 1080px the centre child is `display:none`, which REMOVES IT FROM THE
   GRID rather than emptying it — so with auto-placement the right-hand group
   fell into column 2 and sat in the middle of the bar, overlapping the brand
   pill, with the whole right third of the screen empty. Measured by rendering
   at 390px. At desktop widths all three children exist and auto-placement
   happens to be correct, so the fault only exists on a phone and only shows in
   a render. Pinning the columns makes the layout independent of how many
   children are present. */
.arcs-dock__l { grid-column: 1; justify-self: start; }

.arcs-dock__c { grid-column: 2; justify-self: center; }

.arcs-dock__r { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* ── the brand pill ─────────────────────────────────────────────────────── */
.arcs-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--arcs-w);
  padding: 8px 16px 8px 10px; border-radius: 100px;
  /* 🚨 .92, NOT .58, AND THAT IS A MEASUREMENT. The prototypes shipped .58,
     which is correct over a navy stage and wrong everywhere else: the dock is
     FIXED, so over a paper band the pill composites to about #6d7a8a and its
     own text becomes light grey on light grey. The source shows one background
     and the page has five. .92 keeps the pill dark against every band this
     system defines, and the blur still reads against photography. */
  background: var(--arcs-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--arcs-hair);
}

.arcs-brand svg { width: 30px; height: 30px; flex: none; }

.arcs-brand__w {
  font-size: 0.95rem; font-weight: 400; color: var(--arcs-on-navy);
  letter-spacing: -0.02em; white-space: nowrap;
}

.arcs-brand__w b { font-weight: 600; color: var(--arcs-w); }
/* the context word — "Home", "Profile", "Match". Gold on navy is measured;
   gold on paper is 2.10:1 and is never used, which is why this lives inside
   a pill that is guaranteed dark. */
.arcs-brand__c {
  font-style: normal; color: var(--s3-gold);
  font-size: var(--arcs-small); font-weight: 500;
  padding-left: 11px; margin-left: 2px;
  border-left: 1px solid var(--arcs-hair-g);
  white-space: nowrap;
}

/* ── the destinations. One pill, hairline-divided, no icons: a dock of five
      words reads faster than a dock of five glyphs nobody has learned. ───── */
.arcs-rail {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 6px; border-radius: 100px;
  background: var(--arcs-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--arcs-hair);
}

.arcs-rail a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 100px;
  color: var(--arcs-on-navy); text-decoration: none;
  font-size: var(--arcs-small); font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}

.arcs-rail a:hover { color: var(--arcs-w); background: var(--arcs-hair); }
/* ARIA IS THE SOURCE OF TRUTH FOR "WHERE AM I", NOT A CLASS. The style keys
   off aria-current, so it is impossible to paint an active item that a screen
   reader does not also announce as current. */
.arcs-rail a[aria-current="page"] { color: var(--arcs-w); }

.arcs-rail a[aria-current="page"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--s3-gold);
}

/* ── the right-hand affordances ───────────────────────── */
/* THE .arcs-ask PILL WAS REMOVED 9 Sep 2026 on the Architect's ruling that it
   must not appear in any form on the ARCverse public/member interface. The
   reasoning it used to carry is kept here because the decay is the evidence:
   the pill was purple-on-hover-darker (--s3-purple 4.23:1 fails AA under white
   text, --s3-purple-ink 7.10:1 passes) and was defended as "a shortcut to the
   full-bleed .arcs-band--ai band, which is the real surface". The ruling
   supersedes that defence. The band is untouched and remains the AI surface.
   ⚠ The old note also claimed deleting `ask` from window.ARC_SHELL removed the
   pill everywhere; that was FALSE — the guard was `CFG.ask !== false`, so a page
   with no `ask` key still rendered it, defaulting to chat.html. */

.arcs-me {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 100px; overflow: hidden;
  border: 1px solid var(--arcs-hair-2); background: var(--arcs-navy-deep);
  color: var(--arcs-w); font-size: var(--arcs-micro); font-weight: 500;
  letter-spacing: .02em; padding: 0; cursor: pointer; text-decoration: none;
  flex: none;
}

.arcs-me img { width: 100%; height: 100%; object-fit: cover; }

/* the mobile disclosure. Hidden on desktop, where the rail is visible. */
.arcs-burger {
  display: none;
  width: 40px; height: 40px; border-radius: 100px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
  background: var(--arcs-glass); color: var(--arcs-w);
  border: 1px solid var(--arcs-hair);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

.arcs-burger svg { width: 18px; height: 18px; }

/* ── THE SHEET. What the dock becomes on a phone: a full navy surface, not a
      drawer sliding a rail in from the left. A rail that only appears at one
      breakpoint is still a rail. ───────────────────────────────────────── */
.arcs-sheet {
  position: fixed; inset: 0; z-index: var(--arcs-z-sheet);
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--s3-navy) 92%, var(--arcs-w)) 0%,
    var(--arcs-navy-deep) 68%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(22px, 7vw, 56px) calc(var(--arcs-strip-h) + 32px);
  gap: 4px;
}

.arcs-sheet[hidden] { display: none; }
/* the page behind a full-screen sheet must not scroll under it. arc-shell.js
   removes this class if the viewport grows past the sheet's breakpoint while
   the sheet is open — otherwise an invisible open sheet leaves the page
   scroll-locked, which reads as a frozen page with no visible cause. */
html.arcs-sheet-open { overflow: hidden; }

.arcs-sheet a {
  display: block; padding: 15px 0;
  border-bottom: 1px solid var(--arcs-hair);
  color: var(--arcs-on-navy); text-decoration: none;
  font-size: 1.375rem; font-weight: 500; letter-spacing: -0.025em;
}

.arcs-sheet a[aria-current="page"] { color: var(--arcs-w); }

.arcs-sheet a[aria-current="page"]::before {
  content: ""; display: inline-block; vertical-align: .18em;
  width: 7px; height: 7px; margin-right: 12px; border-radius: 100px;
  background: var(--s3-gold);
}

.arcs-sheet__x {
  position: absolute; top: 18px; right: clamp(18px, 3vw, 40px);
  width: 44px; height: 44px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--arcs-w); border: 1px solid var(--arcs-hair-2);
}

.arcs-sheet__x svg { width: 18px; height: 18px; }

/* ═════════════════════════════════════════════════════════════════════════
   THE JOURNEY STRIP. 46px, and that is the whole of it.

   🔒 THE RULING IS EXPLICIT ABOUT WHAT THIS MAY NOT BECOME: "never as large
      coloured containers or nine visible blocks." It is a line with a marker,
      a stage label, and a plain fraction. No bar chart, no percentage, no
      ring, no colour-coded blocks, no celebration.
   🔒 IT SHOWS THE VIEWER'S OWN POSITION. On a page about somebody else, it is
      still yours — a member's progression is theirs and is not on display to
      anyone browsing them.
   🚨 arc-shell.js REFUSES TO MOUNT A FRACTION IT WAS NOT GIVEN. An invented
      "17/45" on a page that does not know the member's position is a fabricated
      claim about a real person, and it would look exactly like a real one.
   ════════════════════════════════════════════════════════════════════════ */
.arcs-journey {
  position: fixed; inset: auto 0 0 0; z-index: var(--arcs-z-strip);
  height: var(--arcs-strip-h);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding: 0 clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--arcs-ink) 93%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid color-mix(in srgb, var(--s3-gold) 28%, transparent);
  font-size: 0.75rem; color: var(--arcs-on-navy-3);
}
/* flex: 0 0 auto — the track never shrinks. It is the ruling's shape and it is
   the one thing on the strip that must survive every width. The LABEL gives
   ground instead, because a label can ellipsize and a line cannot. */
.arcs-jtrack { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.arcs-jstop {
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; font-size: 0.75rem; color: var(--arcs-on-navy-3);
  white-space: nowrap;
}

.arcs-jstop[data-here] { color: var(--arcs-w); }

.arcs-jline {
  width: clamp(26px, 5vw, 64px); height: 1px; flex: none;
  background: var(--arcs-hair-2);
}

.arcs-jline--here {
  position: relative;
  background: linear-gradient(90deg, var(--s3-gold),
              color-mix(in srgb, var(--s3-gold) 18%, transparent));
}

.arcs-jline--here::after {
  content: ""; position: absolute; left: 44%; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 100px;
  background: var(--s3-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--s3-gold) 20%, transparent);
}
/* min-width:0 IS WHAT MAKES THE ELLIPSIS WORK. A flex item's default
   min-width:auto refuses to shrink below its content, so `overflow:hidden`
   never engages and the label simply runs into — and on a phone, straight
   over — the track beside it. Measured at 390px: "MATCH GROW BUILD" and
   "Sign in to see where you are in ARC" were printed on top of each other. */
.arcs-jstage {
  color: var(--arcs-on-navy); white-space: nowrap;
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
}

.arcs-jn {
  font-variant-numeric: tabular-nums; color: var(--arcs-on-navy);
  white-space: nowrap;
}

.arcs-jflag {
  margin-left: auto; color: var(--arcs-on-navy-3);
  border: 1px solid var(--arcs-hair-2); border-radius: 100px;
  padding: 3px 11px; font-size: 0.75rem; white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════
   BANDS. The rhythm is: navy stage → paper → white → navy → paper → AI.
   Navy is a REAL DARK SURFACE FOR WHOLE SECTIONS, which is the ruling's
   colour correction in one sentence. A page that is 90% white with a navy
   sliver has not adopted this system, it has recoloured the old one.
   ════════════════════════════════════════════════════════════════════════ */
.arcs-band { position: relative; }

.arcs-band--paper { background: var(--arcs-paper); color: var(--s3-ink); }

.arcs-band--white { background: var(--arcs-w);     color: var(--s3-ink); }

.arcs-band--navy  {
  background: var(--s3-navy); color: var(--arcs-w);
  isolation: isolate; overflow: hidden;
}

.arcs-band--deep  { background: var(--arcs-navy-deep); color: var(--arcs-w); }
/* the ONE purple surface. AVR-009: purple is the AI moment and nothing else. */
/* 🚨 THE AI BAND NEEDS ITS OWN INKS, AND THE TOKEN NAMES SAY WHY.
   --arcs-on-navy and --arcs-on-navy-3 are calibrated against --s3-navy. This band
   is purple-HEAVY at its 0% stop (--s3-purple-strong 78%), and measured against
   that real stop they fail: --arcs-on-navy 4.26:1, --arcs-on-navy-3 2.67:1,
   --s3-gold 3.52:1 — all below the 4.5 body floor. A token called "on-navy"
   used on a purple ground is a naming trap, not a colour mistake.
   Found 8 Sep by arc-frontend while building the expressive layer, and confirmed
   here by computing every ink against all three gradient stops. Controls 21.00/1.00.
   ⚠ MY OWN AUDIT COULD NOT SEE IT: contrast-audit.py splits on `linear-gradient`
     and measures the token BEFORE it, so a band whose background IS a gradient was
     never measured against its real pixels. Fixed in the tool the same day. */
:root {
  --arcs-on-ai   : color-mix(in srgb, var(--arcs-w) 86%, var(--s3-purple-strong));
  --arcs-on-ai-3 : color-mix(in srgb, var(--arcs-w) 74%, var(--s3-purple-strong));
}

.arcs-band--ai {
  position: relative; overflow: hidden; color: var(--arcs-w);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--s3-purple-strong) 78%, var(--s3-navy)) 0%,
    color-mix(in srgb, var(--s3-purple-strong) 46%, var(--arcs-navy-deep)) 38%,
    var(--arcs-navy-deep) 76%);
}


.arcs-wrap {
  position: relative; z-index: var(--arcs-z-content);
  max-width: var(--arcs-max); margin: 0 auto;
  padding: var(--arcs-band-y) var(--arcs-band-x);
}

.arcs-wrap--wide { max-width: var(--arcs-max-wide); }

.arcs-wrap--tight { padding-top: clamp(44px, 6vw, 76px); }

/* the band that OPENS a page starts underneath the fixed dock, so its first
   line has to buy that height back or the dock lands on the page's own title.
   Consolidated 9 Sep 2026 from 3 identical page-level rules that each carried
   this same calc() in their own <style> block: founder-home, member-home and
   student-home. The value is unchanged from those three. */
.arcs-wrap--opening { padding-top: calc(var(--arcs-dock-h) + 24px); }

/* 🔒 THE BAND THAT SITS UNDER A HANGING PLATE MUST BUY THE HANG BACK.
   .arcs-plate--hang pulls an object out of the stage and into this band. Its
   own top padding is what stops the plate landing on this band's heading —
   and the plate is right-aligned to a WIDER container than the wrap, so the
   collision is with the right-hand column, which is exactly where a heading
   note usually lives. Measured at 1440px: the plate spans x 827-1400 and the
   note column x 720-1292, so they overlap for the full depth of the hang.
   ⚠ THE VALUE IS THE SAME clamp() THE HANG USES. If one changes the other
     must, which is why they are written identically rather than "about the
     same". */
.arcs-wrap--underhang { padding-top: calc(var(--arcs-band-y) + clamp(0px, 6vw, 96px)); }

@media (max-width: 1080px) {
  /* the plate stops hanging below 1080px, so the clearance stops being owed. */
  .arcs-wrap--underhang { padding-top: var(--arcs-band-y); }
}

/* .arcs-stick — an element that holds its place under the FIXED dock while the
   page scrolls past it. position and top ONLY, deliberately.
   Consolidated 9 Sep 2026 from 8 repetitions of this same offset across 5
   pages: 3 page-level .ph-aside rules (founder-home, member-home,
   student-home) and 5 inline style attributes (arcverse-home, profile ×4).
   The value is unchanged from all eight.

   🚨 `.arcs-stick.arcs-stick` — THE DOUBLED CLASS IS A BUG FIX AND MUST NOT
      BE "TIDIED" TO ONE CLASS. Collapsing it silently destroys sticky on five
      asides. The collision:
          .arcx-plate  { position: relative }  (0,1,0)  arc-experience.css
          .arcs-stick  { position: sticky   }  (0,1,0)  THIS FILE
      arc-experience.css loads AFTER this file on every adopting page, so at
      equal specificity source order hands the win to `relative` and the
      element simply stops sticking. Four of the five converted asides ARE
      .arcx-plate. Doubling to (0,2,0) wins on any component that declares a
      single-class position, so the utility is safe wherever it is applied.
      (Same idiom, same reason, as .arcx-plate.arcx-plate--hang in
      arc-experience.css — see the note there.)
   ⚠ Getting this wrong does not look broken. It looks like a rail that
     scrolls away, which is exactly what a source read cannot catch.

   ⚠ IT DOES NOT UN-STICK ITSELF ON MOBILE, and that is not an oversight. A
     sticky element in a single-column flow follows a reader down a page it is
     no longer beside, but whether that is wrong depends on what the rail IS,
     so the page keeps the decision. The three .ph-aside pages take it with
     .arcs-page .ph-aside { position: static } inside a media query.
     🔒 THAT IS NOW A (0,2,0) vs (0,2,0) TIE DECIDED BY SOURCE ORDER, not by
        specificity as it was before the doubling. It holds because every page
        links arc-shell.css BEFORE its own <style> block (verified on all five
        pages, 9 Sep 2026). Moving the shell link after a page's own styles
        would break the mobile un-stick without touching either rule. */
.arcs-stick.arcs-stick { position: sticky; top: calc(var(--arcs-dock-h) + 16px); }

/* type on a band */
.arcs-eyebrow {
  color: var(--s3-gold); font-size: var(--arcs-small); font-weight: 500;
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
/* sentence case with a fading gold rule, NOT a tracked-out all-caps label —
   which is the commonest tell on a generated page. */
.arcs-eyebrow::after {
  content: ""; height: 1px; flex: 1; max-width: 170px;
  background: linear-gradient(90deg, var(--s3-gold), transparent);
}

.arcs-band--paper .arcs-eyebrow, .arcs-band--white .arcs-eyebrow {
  /* gold is 2.10:1 on paper and must never be text there. On light bands the
     eyebrow is ink and the RULE carries the gold instead. */
  color: var(--s3-ink-mid);
}

.arcs-band--paper .arcs-eyebrow::after, .arcs-band--white .arcs-eyebrow::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--s3-gold) 70%, var(--s3-ink-mid)), transparent);
}


.arcs-h2   { font-size: var(--arcs-h2); max-width: 19ch; text-wrap: balance; }

.arcs-h3   { font-size: var(--arcs-h3); letter-spacing: -0.022em; }

.arcs-lede { margin-top: 16px; max-width: 48ch; font-size: 1.0625rem; color: var(--s3-ink-mid); }

.arcs-band--navy .arcs-h2, .arcs-band--deep .arcs-h2, .arcs-band--ai .arcs-h2, .arcs-stage .arcs-h2 { color: var(--arcs-w); }

.arcs-band--navy .arcs-lede, .arcs-band--deep .arcs-lede { color: var(--arcs-on-navy); }

.arcs-band--ai   .arcs-lede { color: var(--arcs-on-ai); }   /* 4.26:1 -> see below */

/* ── THE STAGE. A page's opening band: full height, navy ground, a masked
      photograph dissolving in from one side, words on the other. ────────── */
.arcs-stage {
  position: relative;
  /* NOT overflow:hidden — a plate has to be able to hang out of it. The
     photograph is clipped by its own wrapper, which is the only thing that
     needed clipping (its settle animation scales past the edge). */
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--s3-navy) 92%, var(--arcs-w)) 0%,
    var(--arcs-navy-deep) 62%);
  min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--arcs-stage-t) var(--arcs-band-x) var(--arcs-stage-b);
  color: var(--arcs-w);
}

.arcs-stage__clip {
  position: absolute; inset: 0; overflow: hidden; z-index: var(--arcs-z-photo);
}

.arcs-stage__photo {
  position: absolute; inset: 0 0 0 auto; width: 66%;
  background-size: cover; background-position: 56% 46%;
  /* the dissolve is a MASK on the photograph's own alpha, not navy painted
     over the top — an overlay's flat navy can never match the stage's lit
     navy underneath it, and the mismatch shows as a vertical seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .28) 22%, rgb(0 0 0 / .82) 52%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .28) 22%, rgb(0 0 0 / .82) 52%, #000 78%);
}
/* THE FLOOR. Flat, and it may only darken. Composition gradients go on top. */
.arcs-stage__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--arcs-wash-open), var(--arcs-wash-open)),
    linear-gradient(90deg,
      color-mix(in srgb, var(--arcs-ink) 76%, transparent) 0%,
      color-mix(in srgb, var(--arcs-ink) 44%, transparent) 46%,
      color-mix(in srgb, var(--arcs-ink) 26%, transparent) 100%);
}

.arcs-stage__inner {
  position: relative; z-index: var(--arcs-z-content);
  width: 100%; max-width: var(--arcs-max-wide); margin: 0 auto;
  display: grid; align-items: center; gap: clamp(20px, 3vw, 56px);
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  /* 🚨 THE ROW MUST FILL THE SECTION OR align-self:end MEANS NOTHING. On the
     profile prototype, "end" put a plate at the bottom of a 500px CONTENT row
     floating in a 900px section — measured 115px ABOVE the section's bottom
     edge, i.e. the exact opposite of hanging. Only a render showed it. */
  min-height: calc(100svh - var(--arcs-stage-t) - var(--arcs-stage-b));
  grid-template-rows: minmax(0, 1fr);
}

.arcs-stage__inner > * { min-width: 0; }

/* ── .arcs-ground — THE LOCAL TEXT GROUND. The component that makes text over
      photography safe, and the answer to "the wash happened to be dark enough".

   🔒 IT IS BOUND TO THE TEXT, NOT TO THE PHOTOGRAPH. A wash tuned to an image
      falls out of registration the moment the column rewraps or the viewport
      changes, and nothing in the source shows you it has. This field is a
      pseudo-element of the text block itself, so it is the text block's size
      at every width, for ever, with no JS and no measurement.
   ⚠ z-index:-1 AND isolation:isolate, NOT a z-index on the children. Painting
     order puts an absolutely-positioned z-index:0 pseudo-element ABOVE in-flow
     inline text, so the obvious version paints the scrim over the words. -1
     paints it above the element's own background and below its content, and
     the isolation stops that -1 escaping behind the band's photograph. ───── */
.arcs-ground { position: relative; isolation: isolate; }

.arcs-ground::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top:    calc(var(--arcs-ground-f) * -1);
  bottom: calc(var(--arcs-ground-f) * -1);
  left:   calc(var(--arcs-ground-l) * -1);
  right:  calc(var(--arcs-ground-r) * -1);
  background: linear-gradient(90deg,
    transparent 0,
    var(--arcs-wash-read) var(--arcs-ground-l),
    var(--arcs-wash-read) calc(100% - var(--arcs-ground-r)),
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 var(--arcs-ground-f),
    #000 calc(100% - var(--arcs-ground-f)), transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0, #000 var(--arcs-ground-f),
    #000 calc(100% - var(--arcs-ground-f)), transparent 100%);
}

/* ── THE PLATE. Printed, not carded: 2px radius, one deep shadow, no border.
      A plate can hang below its own section's edge (--arcs-hang) so an object
      physically joins two bands. That is the depth the ruling asks for and a
      flat card cannot give. ───────────────────────────────────────────── */
.arcs-plate {
  position: relative; z-index: var(--arcs-z-plate);
  border-radius: 2px; overflow: hidden;
  background: var(--arcs-navy-deep);
  box-shadow: var(--arcs-shadow-plate);
}

.arcs-plate img { width: 100%; height: 100%; object-fit: cover; }

.arcs-plate--gold::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--s3-gold);
}

.arcs-plate--hang {
  --arcs-hang: clamp(0px, 6vw, 104px);
  align-self: end; justify-self: end;
  /* clear the section's own bottom padding FIRST, then hang. */
  margin-bottom: calc(-1 * (var(--arcs-stage-b) + var(--arcs-hang)));
}

/* ── ACTIONS. Printed rectangles at 2px, never pills — the pills belong to the
      floating chrome, and reusing them in the content is what turns a page
      into a settings screen. ─────────────────────────────────────────── */
.arcs-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 2px; border: 0; cursor: pointer;
  background: var(--s3-navy); color: var(--arcs-w);
  /* THIS font-family LINE IS LOAD-BEARING AND WAS ADDED 8 Sep 2026 AS A CORRECTION.
     The page reset was narrowed to `button:not(.arcs-btn)` earlier that day to stop
     it beating this component's colour (a real 1.08:1 defect). But the reset was ALSO
     the only thing giving <button> its font, and .arcs-btn declared size/weight/
     tracking and no family — so excluding .arcs-btn from the reset silently dropped
     all 13 <button class="arcs-btn"> to the UA font while the 26 <a class="arcs-btn">
     anchors stayed correct, because no element appears in the reset's selector.
     A contrast fix that introduced a typography defect, invisible to every contrast
     instrument, and split across two element types so half the estate looked fine.
     Reported by a rendering lane. 🔒 A component must declare what it depends on. */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* == line 197 */
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s, box-shadow .2s;
}

.arcs-btn:hover { transform: translateY(-2px); background: var(--arcs-navy-lift); }

.arcs-btn--light {
  background: var(--arcs-w); color: var(--s3-navy);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6);
}
/* 🚨 background IS RE-DECLARED HERE AND IT IS NOT REDUNDANT. Without it,
   .arcs-btn:hover's `background: var(--arcs-navy-lift)` still applies — the
   modifier only overrode the resting state — so the page's primary call to
   action turned NAVY UNDER NAVY TEXT on hover. Computed: --s3-navy #0B1F3B on
   --arcs-navy-lift #283A53 is 1.4:1, against a 4.5 floor. It is invisible in
   the source (both rules read as correct on their own) and it only exists
   under a pointer, so no static read of the resting page can see it. Caught by
   a checker, not by looking, which is the honest account of it. */
.arcs-btn--light:hover {
  background: var(--arcs-w); color: var(--s3-navy);
  box-shadow: 0 16px 40px -14px rgb(0 0 0 / .7);
}
/* gold as an OUTLINE and then as a FILL under navy ink. Never gold text on
   paper, and never white text on gold — arc-tokens.css measures that at
   2.22:1, which fails at every size. */
.arcs-btn--gold {
  background: transparent; color: var(--s3-gold);
  border: 1px solid var(--s3-gold);
  transition: background .24s ease, color .24s ease;
}

.arcs-btn--gold:hover { background: var(--s3-gold); color: var(--s3-navy); transform: none; }

/* 🚨 BAND-SCOPED 8 Sep 2026 — MIRRORS .arcs-btn--ghost's OWN PATTERN BELOW,
   INVERTED. Ghost's base is light-safe and gets re-painted for dark bands;
   this component's base above is DARK-safe (gold text on transparent reads
   7.84:1 on --s3-navy, measured) and FAILS on light grounds — gold on white
   measures 2.10:1, gold on --arcs-paper ~1.98–2.01:1, both under the 3.0
   floor a UI outline needs and nowhere near the 4.5 text floor. arc-tokens.css
   is explicit that gold is a FILL, never text — the un-scoped rule above
   breaks that rule the moment it lands on a light band.
   ⚠ LIVE CENSUS, 8 Sep 2026: 10 `.arcs-btn--gold` elements across 9 pages.
     NINE already sit on a dark band (.arcs-stage / .arcs-band--navy / --deep)
     and are unaffected by this — communities.html, arcverse-home.html,
     founder-home.html, member-home.html, student-home.html, matches.html,
     workshops.html (x2). ONE — chat.html's `#sendBtn` — sits on
     .arcs-band--paper and is the live failure this closes.
   🔒 THE FIX MAKES GOLD A FILL ON LIGHT BANDS, NEVER TEXT, following the
      baseline's own rule for this token. Navy-on-gold measures 7.84:1 — the
      SAME pairing the un-scoped hover above already uses, so nothing new is
      being trusted here. The light-band hover step darkens the fill with a
      color-mix toward navy (5.88:1) rather than reusing the rest-state fill
      unchanged, so a light-band hand still gets a visible state change.
   ⚠ NOT EXTENDED TO .arcs-band--ai: no live `.arcs-btn--gold` sits on that
     band today (censused), so nothing here is silently re-tinted for a
     surface no button occupies. Flagged, not fixed: gold TEXT at rest on
     that band's purple-heavy stop measures 3.52:1 — above the 3.0 UI floor
     the border needs but under the 4.5 text floor the label needs — should a
     gold button ever be placed there, it needs its own scoped fill rule the
     way .arcs-band--ai .arcs-btn--ghost already has one below. */
.arcs-band--paper .arcs-btn--gold, .arcs-band--white .arcs-btn--gold {
  background: var(--s3-gold); color: var(--s3-navy); border-color: var(--s3-gold);
}
.arcs-band--paper .arcs-btn--gold:hover, .arcs-band--white .arcs-btn--gold:hover {
  background: color-mix(in srgb, var(--s3-gold) 84%, var(--s3-navy));
  color: var(--s3-navy);
}

.arcs-btn--ghost {
  background: transparent; color: var(--s3-ink); border: 1px solid var(--s3-border);
}

.arcs-btn--ghost:hover { background: var(--s3-grey); }
/* 🚨 GHOST ON NAVY IS THE ANTI-CONTROL, AND NOTHING STOPPED IT. .arcs-btn--ghost
   sets `color: var(--s3-ink)` on a transparent background, so on a navy band it is
   --s3-ink #0F172A on --s3-navy #0B1F3B = 1.08:1 — the exact pairing this stylesheet
   uses as its anti-control. The shell repaints .arcs-repflag for dark grounds but
   never repainted this, so the component was one placement away from invisible.
   ⚠ LATENT, NOT LIVE, AND SAID PLAINLY: censused 8 Sep — 9 ghost buttons exist
     across 5 pages and ALL NINE are on light bands, where --s3-ink is correct.
     Nothing is broken today. arc-frontend hit this while drafting hubs.html and
     designed around it; this closes it so the next placement cannot.
   🔒 THE HOVER HALF MATTERS AS MUCH AS THE COLOUR. Overriding only the text would
      leave `:hover { background: var(--s3-grey) }` in place — light grey behind
      newly-light text, 1.60:1, a fresh failure introduced BY the fix. Measured
      before writing it, not after. The lift below keeps the hover on the dark side
      of the ground at 7.14:1. */
.arcs-band--navy .arcs-btn--ghost, .arcs-band--deep .arcs-btn--ghost,
.arcs-stage .arcs-btn--ghost, .arcs-foot .arcs-btn--ghost {
  color: var(--arcs-on-navy); border-color: var(--arcs-hair-2);
}

.arcs-band--ai .arcs-btn--ghost {
  color: var(--arcs-on-ai); border-color: var(--arcs-hair-2);
}
.arcs-band--navy .arcs-btn--ghost:hover, .arcs-band--deep .arcs-btn--ghost:hover,
.arcs-stage .arcs-btn--ghost:hover, .arcs-band--ai .arcs-btn--ghost:hover,
.arcs-foot .arcs-btn--ghost:hover {
  background: color-mix(in srgb, var(--arcs-w) 10%, var(--s3-navy));
}


.arcs-btn--sm { padding: 11px 20px; font-size: var(--arcs-small); }

/* ── THE EVIDENCE ROW. claim → detail → HOW ARC KNOWS IT. Three parts, always
      in that order, and a statement that cannot fill all three is an opinion
      and does not belong on an ARC surface. This is the component that
      replaces stars, scores and percentages everywhere in ARCverse. ────── */
.arcs-ev {
  padding: 26px 0; border-top: 1px solid var(--s3-border);
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px;
}

.arcs-ev:first-child { border-top: 0; padding-top: 0; }

.arcs-ev__mark { margin-top: 3px; }

.arcs-ev__mark svg { width: 19px; height: 19px; color: var(--s3-arena-4); }

.arcs-ev__claim {
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.36; color: var(--s3-ink); max-width: 34ch;
}

.arcs-ev__detail { margin-top: 9px; color: var(--s3-ink-mid); max-width: 52ch; }

.arcs-ev__src { margin-top: 12px; font-size: var(--arcs-micro); color: var(--s3-ink-mid); }
/* a stated ABSENCE, same component, a rule instead of a tick. A surface that
   can only say good things is advertising, not evidence. */
.arcs-ev--gap .arcs-ev__claim { font-weight: 500; color: var(--s3-ink-mid); }

.arcs-ev--gap .arcs-ev__mark { margin-top: 15px; }

.arcs-ev__dash { display: block; width: 19px; height: 1px; background: var(--s3-ink-mid); }
/* on a dark band */
.arcs-band--navy .arcs-ev, .arcs-band--deep .arcs-ev { border-top-color: var(--arcs-hair); }

.arcs-band--navy .arcs-ev__claim, .arcs-band--deep .arcs-ev__claim { color: var(--arcs-w); }

.arcs-band--navy .arcs-ev__detail, .arcs-band--deep .arcs-ev__detail { color: var(--arcs-on-navy); }

.arcs-band--navy .arcs-ev__src, .arcs-band--deep .arcs-ev__src { color: var(--arcs-on-navy-3); }

/* ── A RUN OF ROWS ON HAIRLINES. The estate's alternative to a card grid, and
      the reason this system has no card component at all. The run is closed by
      its OWN WRAPPER, never by :last-child — twice on the profile prototype a
      :last-child rule broke because the last child was not a sibling of the
      same kind. ─────────────────────────────────────────────────────────── */
.arcs-run { border-bottom: 1px solid var(--s3-border); }

.arcs-band--navy .arcs-run, .arcs-band--deep .arcs-run { border-bottom-color: var(--arcs-hair); }

.arcs-row {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 22px 0 24px;
  border-top: 1px solid var(--s3-border);
}

.arcs-band--navy .arcs-row, .arcs-band--deep .arcs-row { border-top-color: var(--arcs-hair); }

.arcs-row > * { min-width: 0; }

.arcs-row__k { font-size: var(--arcs-micro); color: var(--s3-ink-mid); padding-top: 4px; }

.arcs-row__v { font-size: 1.0625rem; color: var(--s3-ink); line-height: 1.62; }

.arcs-band--navy .arcs-row__k, .arcs-band--deep .arcs-row__k { color: var(--arcs-on-navy-3); }

.arcs-band--navy .arcs-row__v, .arcs-band--deep .arcs-row__v { color: var(--arcs-w); }

.arcs-row__sub {
  display: block; margin-top: 8px; font-size: var(--arcs-small);
  color: var(--s3-ink-mid); max-width: 52ch;
}

.arcs-band--navy .arcs-row__sub, .arcs-band--deep .arcs-row__sub { color: var(--arcs-on-navy); }

/* a dated stream on a gold thread — the shape "something is happening now"
   takes when it is not allowed to be a feed with likes and follows. */
.arcs-stream { position: relative; padding-left: 26px; }

.arcs-stream::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 22px; width: 1px;
  background: linear-gradient(180deg, var(--s3-gold),
              color-mix(in srgb, var(--s3-gold) 12%, transparent));
}

.arcs-item { position: relative; padding-bottom: 28px; }

.arcs-item:last-child { padding-bottom: 0; }

.arcs-item::before {
  content: ""; position: absolute; left: -26px; top: 9px;
  width: 7px; height: 7px; margin-left: -3px; border-radius: 100px;
  background: var(--arcs-on-navy-3);
}

.arcs-item--live::before {
  background: var(--s3-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--s3-gold) 22%, transparent);
}

.arcs-item__when { font-size: var(--arcs-micro); color: var(--arcs-on-navy-3); }

.arcs-item__what { margin-top: 6px; font-size: 1.0625rem; color: var(--arcs-w); line-height: 1.5; max-width: 40ch; }

.arcs-item__note { margin-top: 6px; font-size: var(--arcs-small); color: var(--arcs-on-navy); max-width: 42ch; }

/* ── THREE STATES, NEVER TWO. loading / empty / could-not-read are different
      screens, and an error is never painted as an empty list. Every region on
      an ARCverse page that reads from the database uses these. ──────────── */
.arcs-state {
  padding: 16px 18px; border-radius: 2px; font-size: var(--arcs-small);
  border-left: 2px solid var(--s3-border); color: var(--s3-ink-mid);
  background: color-mix(in srgb, var(--s3-grey) 70%, var(--arcs-w));
}

.arcs-state b { color: var(--s3-ink); font-weight: 600; }

.arcs-state--error { border-left-color: var(--fail); }

.arcs-state--warn  { border-left-color: var(--warn); }

.arcs-band--navy .arcs-state, .arcs-band--deep .arcs-state, .arcs-stage .arcs-state,
.arcs-band--ai .arcs-state {
  background: color-mix(in srgb, var(--arcs-w) 8%, transparent);
  border-left-color: var(--arcs-hair-2);
  color: var(--arcs-on-navy);
}

.arcs-band--navy .arcs-state b, .arcs-band--deep .arcs-state b, .arcs-stage .arcs-state b,
.arcs-band--ai .arcs-state b { color: var(--arcs-w); }

/* the honesty flag. Any region showing a representative state rather than a
   live read wears one of these, and it says so in words. */
.arcs-repflag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--arcs-micro); color: var(--s3-ink-mid);
  border: 1px solid var(--s3-border); border-radius: 100px; padding: 4px 12px;
}

.arcs-repflag::before {
  content: ""; width: 6px; height: 6px; border-radius: 100px; flex: none;
  background: var(--warn);
}

.arcs-band--navy .arcs-repflag, .arcs-band--deep .arcs-repflag, .arcs-stage .arcs-repflag,
.arcs-band--ai .arcs-repflag {
  color: var(--arcs-on-navy); border-color: var(--arcs-hair-2);
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.arcs-foot {
  background: var(--arcs-navy-deep); color: var(--arcs-on-navy-3);
  padding: 34px var(--arcs-band-x) 40px;
  font-size: var(--arcs-micro);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--arcs-w) 7%, transparent);
}

.arcs-foot a { color: var(--arcs-on-navy); }

/* ═════════════════════════════════════════════════════════════════════════
   MOTION. Real, and deliberately confined.
   🔒 ONE ORCHESTRATED MOMENT AT PAGE LOAD, ON THE STAGE, THEN NOTHING MOVES
      ON ITS OWN. A fade-and-rise on every section as you scroll past it is
      the loudest generated-page tell there is. Everything else is a hover
      transition, which is motion the reader asked for.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .arcs-stage__photo { animation: arcs-settle 1.5s cubic-bezier(.16,.8,.28,1) both; }

  .arcs-words > *    { animation: arcs-rise .8s cubic-bezier(.16,.8,.28,1) both; }

  .arcs-words > *:nth-child(1) { animation-delay: .10s }

  .arcs-words > *:nth-child(2) { animation-delay: .16s }

  .arcs-words > *:nth-child(3) { animation-delay: .22s }

  .arcs-words > *:nth-child(4) { animation-delay: .28s }

  .arcs-words > *:nth-child(5) { animation-delay: .34s }

  .arcs-words > *:nth-child(6) { animation-delay: .40s }

  .arcs-words > *:nth-child(7) { animation-delay: .46s }

  .arcs-plate        { animation: arcs-plate 1s cubic-bezier(.16,.8,.28,1) .3s both; }

  .arcs-dock, .arcs-journey { animation: arcs-fade .7s ease .8s both; }
}

@keyframes arcs-settle { from { transform: scale(1.07); opacity: 0 } to { transform: none; opacity: 1 } }

@keyframes arcs-rise   { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }

@keyframes arcs-plate  { from { opacity: 0; transform: translateY(46px) } to { opacity: 1; transform: none } }

@keyframes arcs-fade   { from { opacity: 0 } to { opacity: 1 } }


@media (prefers-reduced-motion: reduce) {
  html.arcs-has-shell { scroll-behavior: auto; }

  .arcs-page *, .arcs-page *::before, .arcs-page *::after,
  .arcs-dock *, .arcs-journey *, .arcs-sheet * {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* the rail folds into the sheet. It does NOT become a slide-in rail — a rail
     that only appears at one breakpoint is still the rejected skeleton. */
  .arcs-dock__c { display: none; }

  .arcs-burger  { display: inline-flex; }

  /* the plate stops hanging. Stacked, it would drop onto the heading below it,
     and a portrait sitting on top of a sentence is not a bold move. */
  .arcs-plate--hang { margin-bottom: 0; justify-self: start; align-self: start; }

  .arcs-stage__inner { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 34px; }

  .arcs-stage__photo { width: 100%; }

  .arcs-stage__photo::after {
    background:
      linear-gradient(0deg, var(--arcs-wash-open), var(--arcs-wash-open)),
      linear-gradient(180deg,
        color-mix(in srgb, var(--arcs-ink) 70%, transparent) 0%,
        color-mix(in srgb, var(--arcs-ink) 84%, transparent) 46%,
        var(--arcs-navy-deep) 100%);
  }
  /* the ground's right feather reached 190px into an image that no longer has
     190px to spare once the composition stacks. */
  :root { --arcs-ground-r: 56px; --arcs-ground-f: 34px; }

  .arcs-row { grid-template-columns: 1fr; gap: 6px; }

  .arcs-row__k { padding-top: 0; }
}


@media (max-width: 620px) {
  .arcs-brand__w { display: none; }
  /* the strip carries five items and cannot hold them in 46px on a phone.
     What survives is the only part that answers "where am I": the stage and
     the count.
     🚨 SCOPED TO --marked, AND THAT IS A BUG FIX, NOT TIDINESS. Unscoped, these
     two rules hid every stop and every line in the 'reading' and 'unknown'
     states — where nothing carries [data-here] — so a signed-out visitor on a
     phone got a strip with no MATCH/GROW/BUILD line in it at all. The ruling's
     entire shape disappeared on the commonest device. Unmarked, the strip
     keeps its line and drops the FLAG instead, which is the part that was
     always optional. */
  .arcs-journey--marked .arcs-jstop:not([data-here]) { display: none; }

  .arcs-journey--marked .arcs-jline:not(.arcs-jline--here) { display: none; }

  .arcs-jflag { display: none; }

  .arcs-journey { gap: 12px; }

  .arcs-jtrack { gap: 6px; }

  .arcs-jline { width: clamp(14px, 4vw, 40px); }

  .arcs-jstop { font-size: 0.6875rem; letter-spacing: 0.1em; }

  .arcs-jn { margin-left: auto; flex: 0 0 auto; }

  .arcs-ev { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }

  .arcs-btn { width: 100%; justify-content: center; }
}

/* ══ WORKSPACE BAR CLEARANCE — O-1 (26 Sep 2026) ═════════════════════════════
   Replaces the Stage 1 pill rule (html.arc-has-ws-bar, no longer set). The bar
   is now placed ABOVE the dock by arc-account-slot.js wsPlaceBar(), which moves
   the dock down and raises --arcs-dock-h by the bar's height. On narrow screens
   the stage centres its content inside --arcs-stage-t, which does not follow
   --arcs-dock-h, so the eyebrow rose under the moved dock — measured at 390px in
   the O-1 visual check. max() means no page ever gets LESS top padding than it
   has today; pages with no workspace bar are untouched. */
@media (max-width: 620px) {
  html:has(#arc-ws-bar) .arcs-stage {
    padding-top: max(var(--arcs-stage-t), calc(var(--arcs-dock-h) + 28px));
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MEMBERS CLUB SHELL — A1, 27 Sep 2026 (Darren: "A1 MEMBERS CLUB NAVIGATION
   SHELL"). Only a page that mounts arc-shell.js with `club: true` gets the
   html.arcs-club class, so EVERY rule below is inert on every other page.

   THE LOOK IS dashboard.html's SIDEBAR, not a new one: same width, the same
   dark ground (--shell, which arc-ui.css resolves to #0b1220), the same gold
   group labels, row padding, type sizes and footer. The literals after each
   var() are those resolved values, so Office and Lounge — which do not load
   arc-ui.css — render the same sidebar as the Dashboard does.

   ⚠ THE TOP OF THE PAGE KEEPS ITS DOCK GEOMETRY ON PURPOSE. The tabs live in
     the existing fixed #arc-shell-dock, so --arcs-dock-h, every page's top
     clearance and the workspace bar's placement (arc-account-slot.js
     wsPlaceBar) all keep working unchanged. The dock simply starts where the
     sidebar ends.
   ════════════════════════════════════════════════════════════════════════ */
html.arcs-club {
  --arcs-side-w: 232px;
  /* 🔒 THE SIDEBAR'S OWN GROUND, PINNED. arc-ui.css derives --shell from the
     arena tint through color-mix(), so on Profile and Dashboard (which load it)
     the sidebar came out a different colour per persona while Office and
     Lounge (which do not) drew #0b1220 — the A1 same-sidebar test measured the
     drift. One sidebar means one ground: these are --shell / --shell-2 at
     their resolved base values. */
  --arcs-side-bg: #0b1220;
  --arcs-side-bg-2: #111c30;
}

.arcs-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 42;
  width: var(--arcs-side-w, 232px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 14px;
  overflow-y: auto;
  background: var(--arcs-side-bg, #0b1220); color: #fff;
  font-family: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --focus-ring: var(--s3-gold);
}
.arcs-side, .arcs-side *, .arcs-side *::before, .arcs-side *::after { box-sizing: border-box; }
.arcs-side:focus { outline: none; }

.arcs-side__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #fff; }
.arcs-side__brand svg { width: 30px; height: 30px; flex: none; }
.arcs-side__brand b {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.22rem; font-weight: 600; letter-spacing: .10em; line-height: 1.2;
}
.arcs-side__brand span {
  display: block; font-size: .54rem; letter-spacing: .18em; line-height: 1.5;
  text-transform: uppercase; color: var(--shell-dim, rgba(255,255,255,.58));
}

.arcs-side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.arcs-side [hidden] { display: none !important; }

.arcs-side__label {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--gold, #e8a020); padding: 14px 10px 6px;
}
.arcs-side__nav { display: flex; flex-direction: column; gap: 2px; }
.arcs-side__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; border-left: 3px solid transparent;
  color: var(--shell-text, rgba(255,255,255,.72)); text-decoration: none;
  font-size: .84rem; line-height: 1.3;
  transition: background-color .15s, color .15s;
}
.arcs-side__nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.arcs-side__nav a[aria-current="page"] { background: rgba(255,255,255,.07); color: #fff; border-left-color: var(--gold, #e8a020); }
.arcs-side__ico { flex: none; opacity: .85; }
.arcs-side__nav a.arcs-side__wa .arcs-side__ico { color: #25D366; opacity: 1; }   /* WhatsApp green on the icon only (30 Sep 2026) */
/* Task 116b (14 Oct 2026): a small arrow on sidebar links that leave ARC in a new tab (Join the Room, ARC Travel). Drawn by CSS
   so the link text is unchanged; the second declaration gives screen readers words instead of the arrow where supported. */
.arcs-side__nav a[target="_blank"]::after { content: "\2197"; content: "\2197" / " (opens in a new tab)"; margin-left: auto; padding-left: 6px; font-size: .78rem; opacity: .6; }

/* Sign out: moved here from dashboard.html's top-bar user button (§N).
   Office and Lounge reset `font` with .arcs-page button:not(.arcs-btn), which
   is (0,2,1) because :not() counts its argument. This selector is (0,2,2),
   so the sidebar's type is the same on every page (measured, see A1 tests). */
html .arcs-side button.arcs-side__signout {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--shell-line, rgba(255,255,255,.08));
  background: var(--arcs-side-bg-2, #111c30); color: rgba(255,255,255,.85);
  font: inherit; font-size: .84rem;
}
html .arcs-side button.arcs-side__signout:hover { background: rgba(255,255,255,.08); color: #fff; }
html .arcs-side button.arcs-side__signout[disabled] { opacity: .7; cursor: default; }
/* Settings (2 Oct 2026): the account-settings link, styled as the Sign out control above it. */
html .arcs-side a.arcs-side__settings { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 10px; border-radius: 8px; text-decoration: none; border: 1px solid var(--shell-line, rgba(255,255,255,.08)); background: var(--arcs-side-bg-2, #111c30); color: rgba(255,255,255,.85); font-size: .84rem; }
html .arcs-side a.arcs-side__settings:hover { background: rgba(255,255,255,.08); color: #fff; }

.arcs-side__foot { font-size: .62rem; line-height: 1.7; text-align: center; color: rgba(255,255,255,.62); }
.arcs-side__foot a { color: inherit; text-decoration: none; }
.arcs-side__foot a:hover { color: rgba(255,255,255,.72); text-decoration: underline; }

.arcs-side__scrim {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(6,11,22,.6); border: 0; padding: 0;
}

/* the top tabs: the dock's own pill, carrying the other three pages. It is
   shown at EVERY width (the base rule folds the rail into a sheet below
   1080px; a Members Club page has no sheet — its phone menu is the sidebar). */
html.arcs-club .arcs-dock--club { grid-template-columns: auto 1fr auto; }
html.arcs-club .arcs-dock--club .arcs-dock__c { display: block; justify-self: center; }
html.arcs-club .arcs-dock--club .arcs-dock__r { display: none; }
.arcs-burger--club { display: none; }

/* Dashboard: its page grid had a sidebar column; the shared sidebar replaces
   it, so the work column takes the full width beside it. */
html.arcs-club .arc-shell { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1000px) {
  html.arcs-club body { padding-left: var(--arcs-side-w); }
  html.arcs-club .arcs-dock--club,
  html.arcs-club #arc-ws-bar,
  html.arcs-club .arcs-journey { left: var(--arcs-side-w); }
}

/* phone and tablet: the SAME sidebar becomes a drawer behind the burger. */
@media (max-width: 999px) {
  .arcs-side {
    width: min(282px, 86vw); z-index: 60;
    transform: translateX(-101%); transition: transform .2s ease;
  }
  /* the shadow only while open: on a closed drawer its 40px blur leaked a
     grey band down the left edge of light pages (measured at 390px). */
  html.arcs-side-open .arcs-side { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
  html.arcs-side-open .arcs-side__scrim { display: block; }
  html.arcs-club .arcs-dock--club { padding: 14px 12px; gap: 8px; }
  html.arcs-club .arcs-burger--club { display: inline-flex; }
  html.arcs-club .arcs-rail--club { padding: 4px; }
  html.arcs-club .arcs-rail--club a { padding: 8px 11px; font-size: .8125rem; }
  /* 30 Sep 2026: five main pages. When the four other tabs do not fit a phone, the pill scrolls sideways
     inside itself instead of pushing the page wider; when they fit, nothing changes. */
  html.arcs-club .arcs-dock--club .arcs-dock__c { min-width: 0; max-width: 100%; }
  html.arcs-club .arcs-rail--club { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.arcs-club .arcs-rail--club::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arcs-side { transition: none; }
}

/* ═══ TAKE THE TOUR (arc-page-tour.js) — 27 Sep 2026. The launch button sits in
   the Members Club tab bar (right-hand column); the spotlight ring and the panel
   are fixed chrome above everything but the skip link. ═══════════════════════ */
html.arcs-club .arcs-dock--club .arcs-dock__r { display: flex; justify-self: end; }
/* A1D (27 Sep 2026, Darren): NOT GOLD — gold is for primary ARC actions. The tour
   is a guide, so it takes ARC's teal (the Dashboard's own accent, --teal
   #2BBFB3) as a light pill with teal-ink text: clearly different from gold,
   readable on the navy pages and the light ones alike. PROPOSED — shown to
   Darren in the preview before it is treated as final. */
.arc-ptour-launch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 100px; cursor: pointer;
  font: 600 .8125rem/1.2 'DM Sans', 'Inter', system-ui, sans-serif;
  background: #e6f7f5; color: #0b5e57; border: 1.5px solid #2bbfb3;
  box-shadow: 0 6px 18px -10px rgb(3 10 24 / .55);
}
.arc-ptour-launch::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2bbfb3; color: #fff; font-size: .72rem; font-weight: 700; }
.arc-ptour-launch:hover { background: #d3f1ee; }
/* A1E: on Lounge and Office a page-level button colour (light text for dark bands) won
   over the class and left pale-grey text on the pale teal. The id pins the approved colour. */
#arc-page-tour-btn.arc-ptour-launch { color: #0b5e57; }
.arc-ptour-launch__short { display: none; }
@media (max-width: 599px) {
  .arc-ptour-launch { padding: 8px 12px; }
  .arc-ptour-launch__long { display: none; }
  .arc-ptour-launch__short { display: inline; }
}

/* A1D: the tour sits ABOVE every fixed page control — Improve ARC is z 9998 and its
   panel 9999, floating chat and widgets sit below that. The ring and the panel
   take the top of the stacking range so nothing can cover them. */
.arc-ptour__ring {
  position: fixed; z-index: 2147483000; pointer-events: none; border-radius: 12px;
  /* A1D: the tour's own accent is teal (gold is kept for primary ARC actions) */
  border: 3px solid #2bbfb3;
  box-shadow: 0 0 0 9999px rgba(6, 11, 22, .55);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.arc-ptour__ring[hidden] { display: none; }
.arc-ptour {
  position: fixed; z-index: 2147483001; right: 24px; bottom: 24px;
  width: min(380px, calc(100vw - 32px));
  background: #fff; color: #0b1220; border-radius: 14px; padding: 16px 18px 18px;
  box-shadow: 0 24px 60px -20px rgb(3 10 24 / .7);
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
}
.arc-ptour__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.arc-ptour__count { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0b5e57; }
.arc-ptour__x { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #475569; padding: 0 4px; }
.arc-ptour__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.arc-ptour__text { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: #334155; }
.arc-ptour__row { display: flex; gap: 8px; justify-content: flex-end; }
.arc-ptour .arc-ptour__btn {
  border: 1px solid #0b1220; background: #0b1220; color: #fff; border-radius: 9px;
  padding: 9px 18px; font: 600 .86rem 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.arc-ptour .arc-ptour__btn--out { background: #fff; color: #0b1220; }
@media (max-width: 599px) {
  .arc-ptour { left: 16px; right: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .arc-ptour__ring { transition: none; } }
/* A1D · the first-entry welcome pop-up (arc-page-tour.js) — above everything, like the tour */
.arc-ptour-welcome { position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center; padding: 16px; background: rgba(6, 11, 22, .6); }
.arc-ptour-welcome__box { width: min(440px, 100%); background: #fff; color: #0b1220; border-radius: 16px; padding: 24px 24px 20px; box-shadow: 0 30px 70px -20px rgb(3 10 24 / .8); font-family: 'DM Sans', 'Inter', system-ui, sans-serif; border-top: 5px solid #2bbfb3; }
.arc-ptour-welcome__box h2 { margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 600; }
.arc-ptour-welcome__box p { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; color: #334155; }
.arc-ptour-welcome__box .arc-ptour-welcome__small { font-size: .84rem; color: #64748b; }
.arc-ptour-welcome .arc-ptour__btn { border: 1px solid #0b1220; background: #0b1220; color: #fff; border-radius: 9px; padding: 10px 18px; font: 600 .9rem 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.arc-ptour-welcome .arc-ptour__btn--out { background: #fff; color: #0b1220; }
/* UI-BETA-01 (11 Oct 2026). `.arcs-page button:not(.arcs-btn) { font: inherit; color: inherit }` (line 238) is (0,2,1)
   and beat the (0,2,0) button rules above on every arcs-page page (Office, Member Offers …): the dark buttons took the
   box's dark ink, so "Got it", "Start the tour", "Next" and "Finish" rendered dark-on-dark. The same declarations again,
   raised to (0,3,1) by repeating the reset's own :not(). The outline variant is restated after it, so it stays white. */
.arc-ptour button.arc-ptour__btn:not(.arcs-btn) { color: #fff; font: 600 .86rem 'DM Sans', system-ui, sans-serif; }
.arc-ptour-welcome button.arc-ptour__btn:not(.arcs-btn) { color: #fff; font: 600 .9rem 'DM Sans', system-ui, sans-serif; }
.arc-ptour button.arc-ptour__btn--out:not(.arcs-btn),
.arc-ptour-welcome button.arc-ptour__btn--out:not(.arcs-btn) { color: #0b1220; }
.arc-ptour button.arc-ptour__btn:not(.arcs-btn):focus-visible,
.arc-ptour-welcome button.arc-ptour__btn:not(.arcs-btn):focus-visible { outline: 3px solid #2bbfb3; outline-offset: 2px; }


/* 1 Oct 2026 · the authoritative ARCverse logo in the dock pill and the Members Club sidebar. */
.arcs-brand__logo { display: block; height: 34px; width: auto; border-radius: 6px; flex: none; }
.arcs-side__logo  { display: block; height: 52px; width: auto; max-width: 100%; border-radius: 8px; }
@media (max-width: 620px) { .arcs-brand__logo { height: 28px; } }

/* 4 Oct 2026 (Darren): PAGE BANNERS SIT BELOW THE NAVIGATION. A page banner that is the first thing on a shell page
   started at y=0 under the fixed #arc-shell-dock, which cut into the artwork (Lounge 88px, Office 62px at 1280).
   The banner wrapper is pushed down by the dock height plus a clear gap; the image itself is never resized or cropped.
   --arcs-dock-h already tracks the dock (raised by the account bar when it shows), so this follows it. */
.arcs-banner-clear { padding-top: calc(var(--arcs-dock-h) + 16px) !important; }