/* OWN Charts — Category dashboard shell
   Visual language: matches the OWN Financial dashboard screenshot.
   Cream field, white cards, ocean accent, editorial serif headings. */

/* ============================================================
   SHELL  (sidebar + main + atlas rail)
   ============================================================ */
.dash {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 264px;
  grid-template-areas: "sb mn ar";
  background: var(--ivory);
}
body[data-atlas-collapsed="true"] .dash {
  grid-template-columns: 196px minmax(0, 1fr);
  grid-template-areas: "sb mn";
}
body[data-atlas-collapsed="true"] .ar { display: none; }

/* Resting state: icon disc + gold-dot satellite, bottom-right.
   The wordmark and numeric pill are gone; a single gold dot rides
   just outside the Atlas ring at top-right to signal waiting insights. */
.ar-resting {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0;
  background: var(--atlas-disc); color: var(--atlas-light);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ar-resting:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,0.26), 0 3px 8px rgba(0,0,0,0.12); }
.ar-resting-mark { display: grid; place-items: center; }
.ar-resting .ar-resting-mark .atlas-disc,
.ar-resting .ar-resting-mark .atlas-disc svg { width: 40px; height: 40px; background: transparent; }
/* gold notification dot — sits OUTSIDE the disc, top-right satellite */
.ar-resting-dot {
  position: absolute; top: -5px; right: -5px;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--atlas-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 0 0 2px var(--bg, #F4F4F1);
}
.ar-resting-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--atlas-accent); animation: atlasOrbPulse 2.6s ease-out infinite;
}
@keyframes atlasOrbPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ar-resting-dot::after { animation: none; } }
/* hide the dot when nothing is waiting */
.ar-resting[data-waiting="0"] .ar-resting-dot { display: none; }
.sb { grid-area: sb; }
.mn { grid-area: mn; }
.ar { grid-area: ar; }

/* ---- SIDEBAR ------------------------------------------------- */
.sb {
  background: var(--obsidian);
  padding: 22px 14px 28px;
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
}
.sb-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 18px;
}
.sb-mark {
  display: flex; align-items: center;
  text-decoration: none;
  flex: 1; min-width: 0;
}
.sb-wordmark {
  display: block;
  height: 18px; width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: invert(1);
}
.sb-moon {
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--line-dark-strong); background: transparent;
  display: grid; place-items: center; color: var(--paper-mute);
  cursor: pointer; transition: all 160ms var(--ease-standard);
}
.sb-moon:hover { border-color: var(--paper-soft); color: var(--paper-light); }

/* ---- Sidebar household block (under brand, above Workspace) -- */
.sb-household {
  margin: -4px 14px 6px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 6px;
}
.sb-hh-date {
  font-family: var(--font-sans); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-mute);
}
.sb-hh-persona {
  font-family: var(--font-serif); font-weight: 400; font-size: 16px;
  letter-spacing: -0.01em; color: var(--paper-light); line-height: 1.15;
}
.sb-hh-asof {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-faint);
}
/* Creator-only caption: shows the active persona's archetype + how much of
   the product its nav exposes. Hidden from members (only renders in creator mode). */
.sb-hh-arch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--sea);
  background: rgba(122,167,160,0.12); border: 1px solid rgba(122,167,160,0.24);
  border-radius: 999px; padding: 3px 10px; align-self: flex-start;
}
.sb-hh-arch-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--sea);
  flex-shrink: 0;
}

/* ---- DepthGate (creator-only reveal of persona-hidden content) ---- */
.depth-gated { position: relative; opacity: 0.5; }
.depth-gated::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent, transparent 11px, rgba(14,58,62,0.06) 11px, rgba(14,58,62,0.06) 22px);
  border-radius: var(--card-radius, 18px);
}
.depth-gated-ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B4F26;
  background: rgba(14,58,62,0.16); border: 1px solid rgba(14,58,62,0.4);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 10px;
}

.sb-nav { display: flex; flex-direction: column; gap: 14px; padding: 0 0 18px; }
.sb-grp { display: flex; flex-direction: column; gap: 1px; }
.sb-grp-h {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-mute);
  padding: 2px 14px 8px;
}
.sb-grp-tag {
  margin-left: 8px; font-size: 8px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #C9A24B;
  border: 1px solid rgba(14,58,62,0.4); border-radius: 999px;
  padding: 1px 6px; vertical-align: middle;
}
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--paper-soft);
  text-decoration: none; transition: all 160ms var(--ease-standard);
  cursor: pointer;
}
.sb-item.solo {
  margin-top: 2px;
  font-weight: 500; font-size: 14px; color: var(--ivory);
}
.sb-item:hover { background: rgba(244,244,241,0.06); color: var(--ivory); }
.sb-item.on {
  background: rgba(244,244,241,0.10); color: var(--ivory); font-weight: 500;
  box-shadow: none;
}
.sb-item.on .sb-icn { color: var(--sea); }
.sb-item .sb-icn {
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--paper-mute); flex-shrink: 0;
}
.sb-item.coming { color: var(--paper-faint); cursor: not-allowed; }
.sb-item.coming:hover { background: transparent; color: var(--paper-faint); }
.sb-item.coming .sb-icn { color: var(--paper-faint); }
.sb-item .pip {
  margin-left: auto; font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.18em; color: var(--paper-faint);
  text-transform: uppercase;
}
/* Gated row — only ever rendered in creator mode (members don't see it at all).
   Reads as "present in the system, withheld for this persona": dimmed, struck
   of its affordance, with a small lock. */
.sb-item.gated {
  color: var(--paper-faint); cursor: default; opacity: 0.5;
}
.sb-item.gated:hover { background: transparent; color: var(--paper-faint); }
.sb-item.gated .sb-icn { color: var(--paper-faint); }
.sb-item .pip.gated {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper-faint); letter-spacing: 0;
}

/* ---- MAIN PANEL --------------------------------------------- */
.mn {
  display: flex; flex-direction: column;
  padding: 0;
  max-width: none;
  min-width: 0;
  container: mn / inline-size;
}

/* ---- Header card -------------------------------------------- */
.hd {
  margin: 20px 8px 0;
  background: #fff;
  border-radius: 28px;
  padding: 28px 36px 32px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px;
}
.hd-l { min-width: 0; }
.hd-date {
  font-family: var(--font-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute);
}
.hd-eye {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ocean);
}
.hd-eye .rl { display: inline-block; width: 22px; height: 1px; background: var(--ocean); vertical-align: middle; margin: 0 8px 4px 0; }
.hd.hd-cat {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title controls"
    "sub   sub";
  column-gap: 24px;
  row-gap: 0;
}
.hd.hd-cat > .hd-l   { grid-area: title; }
.hd.hd-cat > .hd-r   { grid-area: controls; }
.hd.hd-cat > .hd-cog { grid-area: controls; justify-self: end; }
.hd.hd-cat > .hd-sub { grid-area: sub; }
.hd.hd-cat .hd-greet {
  font-size: clamp(34px, 4.4vw, 52px);
  margin-top: 12px;
  line-height: 1.0;
  padding-bottom: 2px;
}
.hd.hd-cat .hd-sub { max-width: none; }

/* The header reacts to the MAIN column width (so it reflows when the Atlas
   rail opens / closes, not just on viewport resize). When the column gets
   narrow, the controls move to their own row and the title + body take the
   full width instead of being starved by the scope switcher. */
@container mn (max-width: 840px) {
  .hd.hd-cat {
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "title"
      "sub";
    row-gap: 14px;
  }
  .hd.hd-cat > .hd-r,
  .hd.hd-cat > .hd-cog { justify-self: end; }
  .hd.hd-cat .hd-greet { margin-top: 0; }
}
.hd-greet {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 60px); line-height: 0.96;
  letter-spacing: -0.035em; color: var(--ink); margin: 10px 0 0;
}
.hd-sub {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink-soft);
  margin-top: 20px; max-width: none;
}
.hd-sub a { color: var(--ocean); text-decoration: underline;
            text-decoration-color: rgba(14,58,62,0.42); text-underline-offset: 3px; }
.hd-cog {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; color: var(--ink-mute);
  cursor: pointer;
}

/* ---- Page title strip --------------------------------------- */
.pt {
  margin: 26px 8px 8px;
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.pt-l .eye {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ocean);
}
.pt-l .eye .rl { display: inline-block; width: 22px; height: 1px; background: var(--ocean); vertical-align: middle; margin: 0 8px 4px 0; }
.pt-l h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.02;
  letter-spacing: -0.028em; color: var(--ink); margin: 6px 0 0;
}
.pt-l .body { font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); margin-top: 13px; max-width: 64ch; }
.pt-r {
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); text-align: right;
}
.pt-r .as { display: block; margin-top: 4px; color: var(--ink-faint); }

/* ---- Atlas banner (TFSA-style hint card) -------------------- */
.banner {
  margin: 18px 8px 0;
  background: linear-gradient(95deg, rgba(134,199,192,0.20), rgba(134,199,192,0.06) 80%);
  border-radius: 22px; padding: 16px 22px;
  display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: start;
  border: 1px solid rgba(14,58,62,0.10);
}
.banner-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ocean); margin-top: 9px; }
.banner-title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.banner-title .amt { color: var(--ocean); }
.banner-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; max-width: 80ch; }
.banner-cta { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--ocean); margin-top: 6px; cursor: pointer; }
.banner-cta:hover { text-decoration: underline; }
.banner-x { background: transparent; border: 0; color: var(--ink-mute); font-size: 16px; cursor: pointer; padding: 4px; }

/* ---- KPI strip ---------------------------------------------- */
.kpi {
  margin: 32px 8px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.kpi-c {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px 22px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.025);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 130px;
  /* Query container: the hero number scales to the card's own width, so it
     stays readable (never clipped or spilling onto its neighbour) when the
     Atlas rail opens and the KPI cards narrow to their minmax floor. */
  container-type: inline-size;
}
.kpi-c .lbl {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
}
.kpi-c .val {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(23px, 14cqi, 40px); line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  margin-top: 6px;
  white-space: nowrap;
}
.kpi-c.positive .val { color: var(--ocean); }
.kpi-c.negative .val { color: var(--loss); }
.kpi-c.accent   .val { color: var(--ocean); }
.kpi-c .sub { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-mute); margin-top: auto; }
.kpi-c .delta { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); }
.kpi-c .delta.up   { color: var(--ocean); }   /* up = good, ocean blue */
.kpi-c .delta.down { color: var(--loss); }    /* down (or bad up) = burgundy */

/* ============================================================
   SECTION DIVIDERS  (top half = current, bottom half = future)
   ============================================================ */
.sec {
  margin: 32px 8px 0;
}
.sec-h {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px;
  align-items: end; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.sec-h .num {
  font-family: var(--font-serif); font-size: 56px; line-height: 0.9;
  letter-spacing: -0.04em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; align-self: end;
}
.sec-h .ttl {
  font-family: var(--font-sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ocean);
}
.sec-h h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 30px;
  letter-spacing: -0.025em; color: var(--ink); margin: 8px 0 0; line-height: 1.1;
}
.sec-h .sub { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); margin-top: 9px; }
.sec-h .mtr { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); text-align: right; align-self: end; }

.sec-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  gap: 32px 18px;
}
.sec-grid > * { align-self: stretch; min-width: 0; }
/* Charts render FULL-WIDTH: every card spans all 12 columns and stacks
   vertically, so each chart gets the entire content width for clear review
   and voting. (Overrides the per-card col-4/5/6/7/8 spans below.) */
.sec-grid > * { grid-column: 1 / -1 !important; }
.sec-grid .col-12 { grid-column: span 12; }
.sec-grid .col-8  { grid-column: span 8; }
.sec-grid .col-6  { grid-column: span 6; }
.sec-grid .col-7  { grid-column: span 7; }
.sec-grid .col-5  { grid-column: span 5; }
.sec-grid .col-4  { grid-column: span 4; }

@media (max-width: 1024px) {
  /* Below tablet width the rail becomes a fixed overlay drawer — there isn't
     room for three inline columns. On wider screens it stays an inline column
     that reflows the page and pushes the charts aside. */
  .ar {
    position: fixed !important;
    right: 0; top: 0; bottom: 0;
    width: 264px !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 24px 0 0 24px !important;
    z-index: 120;
    box-shadow: -8px 0 40px rgba(20,18,15,.18) !important;
  }
  .ar::before {
    content: '';
    position: fixed; inset: 0; right: 320px;
    background: rgba(20,18,15,.25);
    z-index: -1;
  }
  .dash {
    grid-template-columns: 196px minmax(0, 1fr);
    grid-template-areas: "sb mn";
  }
  .ar-cta { font-size: 11px !important; }
}
@media (max-width: 1200px) {
  .sec-grid .col-8, .sec-grid .col-7 { grid-column: span 12; }
  .sec-grid .col-4, .sec-grid .col-5 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .sec-grid .col-6, .sec-grid .col-5, .sec-grid .col-4 { grid-column: span 12; }
  .dash {
    grid-template-columns: 1fr;
    grid-template-areas: "sb" "mn";
  }
  .sb { padding: 18px 10px 24px; }
  .sb { position: relative; max-height: none; }
}

/* ============================================================
   ATLAS RAIL  (per design-system: atlas-rail.html, atlas-mark.html)
   White floating card · 320px default · always present.
   ============================================================ */

/* atlas mark — disc + figure (per atlas-mark.html v4) */
:root {
  --atlas-disc:   #181716;
  --atlas-light:  #F4F0E8;
  --atlas-accent: #B88A45;
}
.atlas-disc {
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--atlas-disc); color: var(--atlas-light) !important;
  flex-shrink: 0;
}
.atlas-disc svg { color: var(--atlas-light); fill: currentColor; stroke: currentColor; shape-rendering: geometricPrecision; }
.atlas-disc.s-24 { width: 24px; height: 24px; }
.atlas-disc.s-24 svg { width: 16px; height: 16px; }
.atlas-disc.s-28 { width: 28px; height: 28px; }
.atlas-disc.s-28 svg { width: 20px; height: 20px; }
.atlas-disc.s-32 { width: 32px; height: 32px; }
.atlas-disc.s-32 svg { width: 22px; height: 22px; }
.atlas-disc.s-36 { width: 36px; height: 36px; }
.atlas-disc.s-36 svg { width: 26px; height: 26px; }
.atlas-disc.s-44 { width: 44px; height: 44px; }
.atlas-disc.s-44 svg { width: 32px; height: 32px; }
.atlas-disc.s-52 { width: 52px; height: 52px; }
.atlas-disc.s-52 svg { width: 38px; height: 38px; }
.atlas-disc.s-64 { width: 64px; height: 64px; }
.atlas-disc.s-64 svg { width: 48px; height: 48px; }
.atlas-disc.s-88 {
  width: 88px; height: 88px;
  box-shadow: 0 18px 40px rgba(20, 18, 15, .18);
}
.atlas-disc.s-88 svg { width: 68px; height: 68px; }
/* Sizes also called from AtlasMark (category-shell.jsx) — without these the
   disc collapses to 0×0 and, with overflow visible, the 512-unit ring used to
   paint at full intrinsic size (a faint arc bleeding across the page). */
.atlas-disc.s-20 { width: 20px; height: 20px; }
.atlas-disc.s-20 svg { width: 14px; height: 14px; }
.atlas-disc.s-22 { width: 22px; height: 22px; }
.atlas-disc.s-22 svg { width: 16px; height: 16px; }
.atlas-disc.s-40 { width: 40px; height: 40px; }
.atlas-disc.s-40 svg { width: 29px; height: 29px; }
.atlas-disc.s-56 { width: 56px; height: 56px; }
.atlas-disc.s-56 svg { width: 41px; height: 41px; }
.atlas-disc.s-72 { width: 72px; height: 72px; }
.atlas-disc.s-72 svg { width: 53px; height: 53px; }
/* Safety net: clip to the disc so an un-sized mark can never bleed its full
   512-unit ring across the page again. */
.atlas-disc svg { overflow: hidden; }

@keyframes atlasWedgeSpin { to { transform: rotate(360deg); } }
.atlas-wedge {
  transform-origin: 256px 256px; transform-box: view-box;
  animation: atlasWedgeSpin 3.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .atlas-wedge { animation: none; opacity: 0; } }

/* the rail card itself — fills the full viewport height (narrow + long) */
.ar {
  margin: 12px 10px 12px 0;
  background: #FFFFFF; color: #181716;
  border: 1px solid rgba(24, 23, 22, .08);
  border-radius: 28px;
  box-shadow:
    0 30px 70px rgba(20, 18, 15, .14),
    0 6px 18px rgba(20, 18, 15, .06),
    inset 0 0 0 1px rgba(255, 255, 255, .6);
  position: sticky; top: 12px;
  height: calc(100vh - 24px);
  align-self: start;
  display: flex; flex-direction: column; overflow: hidden;
}

.ar-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(24,23,22,.08);
  flex-shrink: 0;
}
.ar-bar-eye {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(24, 23, 22, .75);
}
.ar-min {
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(24, 23, 22, .04); border: 1px solid rgba(24, 23, 22, .10);
  color: rgba(24, 23, 22, .6); display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 14px; line-height: 1; cursor: pointer;
}
.ar-min:hover { background: rgba(24, 23, 22, .08); }

/* ---- ATLAS RAIL INTERIOR LAYOUT --------------------------------
   The panel has a FIXED height (100vh-40px). Three zones:
   1. .ar-hero   — compact top identity (mark + title + subtitle)
   2. .ar-advice — fills remaining space; cards distribute with
                   space-evenly so no dead zone ever appears
   3. .ar-foot   — anchored bottom (Ask Atlas input)
   ---------------------------------------------------------------- */

.ar-rest {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0;
}

/* Hero — centered disc + serif heading + dim label, matching reference */
.ar-hero {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; text-align: center;
  padding: 18px 20px 16px;
  border-bottom: 0;
}
.ar-hero h2 {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 23px; line-height: 1.12; letter-spacing: -.02em;
  color: #0d0d0c;
}
.ar-noticed {
  margin: 0; font-family: var(--font-sans); font-size: 11.5px;
  font-weight: 400; color: rgba(24, 23, 22, .45);
}

/* Cards zone — each card sizes to its OWN content. The viewport (.ar-advice-vp)
   owns the available space; the list inside is measured and its density
   (--ar-d, set by AtlasRail) dialed down only when the stack would overflow,
   so every recommendation stays visible without the member having to scroll.
   Paddings, gaps and type all scale off --ar-d. */
.ar-advice-vp {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.ar-advice {
  --ar-d: 1;
  list-style: none;
  padding: 0 20px calc(12px * var(--ar-d)); margin: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.ar-advice li {
  flex: 0 0 auto; display: flex; flex-direction: column; margin: 0; min-height: 0;
}

/* Flat, editorial insight row: tan gutter numeral + hairline divider, no box. */
.ar-card {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 26px 1fr; gap: calc(13px * var(--ar-d));
  align-items: start;
  padding: calc(15px * var(--ar-d)) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(24, 23, 22, .12);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.ar-card:hover { background: transparent; }
.ar-card:hover .ar-t { color: #000; }

/* checkbox control */
.ar-check {
  width: 20px; height: 20px; margin-top: 2px; padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(24, 23, 22, .25);
  background: #fff; color: #fff;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease;
}
.ar-check svg { opacity: 0; transition: opacity 130ms ease; }
.ar-check:hover { border-color: var(--atlas-accent); }
.ar-check.on { background: var(--atlas-disc); border-color: var(--atlas-disc); }
.ar-check.on svg { opacity: 1; }
.ar-card.is-done { opacity: .6; }
.ar-card.is-done .ar-t { text-decoration: line-through; color: rgba(24, 23, 22, .4); }

/* card typography */
/* card number label */
.ar-card-num {
  font-family: var(--font-serif); font-weight: 400;
  font-size: calc(18px * var(--ar-d)); line-height: 1.1;
  letter-spacing: 0; text-transform: none;
  color: var(--atlas-accent); font-variant-numeric: tabular-nums lining-nums;
  margin: 0; padding-top: 1px;
}

.ar-t {
  font-family: var(--font-sans); font-weight: 700; font-size: calc(14.5px * var(--ar-d));
  color: #0d0d0c; line-height: 1.25; margin-bottom: calc(6px * var(--ar-d));
  letter-spacing: -.012em;
}
.ar-b {
  font-family: var(--font-sans); font-size: calc(13px * var(--ar-d)); line-height: 1.5;
  color: rgba(24, 23, 22, .80); text-wrap: pretty;
  overflow-wrap: break-word;
}
.ar-cta {
  margin-top: calc(8px * var(--ar-d)); display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .02em; color: var(--atlas-disc);
  padding: 4px 10px 4px 11px; border-radius: 999px;
  background: rgba(24, 23, 22, .05); border: 1px solid rgba(24, 23, 22, .12);
  text-decoration: none; transition: all 150ms ease;
}
.ar-cta:hover { background: var(--atlas-disc); color: var(--atlas-light); border-color: var(--atlas-disc); }

/* snapshot accent card (kind: "snapshot") */
.ar-snap {
  padding: calc(13px * var(--ar-d)) 16px;
  background: linear-gradient(110deg, rgba(184,138,69,.10), rgba(184,138,69,.03));
  border: 1px solid rgba(184, 138, 69, .22);
  border-radius: 16px;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease;
}
.ar-snap:hover { box-shadow: 0 4px 12px rgba(20,18,15,.07), 0 10px 22px rgba(20,18,15,.10); }
.ar-snap-eye {
  font-family: var(--font-sans); font-weight: 700; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--atlas-accent);
  margin-bottom: 5px;
}
.ar-snap-b {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.5;
  color: rgba(24, 23, 22, .70); text-wrap: pretty;
}

/* footer */
/* footer — pure white, black text */
.ar-foot {
  flex-shrink: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(24, 23, 22, .08);
  background: #fff;
  display: flex; flex-direction: column; gap: 7px;
}
.ar-composer {
  display: flex; align-items: center; gap: 8px;
  background: #f5f5f4; border-radius: 999px;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(24,23,22,.10);
}
.ar-input {
  flex: 1; font-family: var(--font-sans); font-size: 13px;
  color: rgba(24,23,22,.40);
}
.ar-send {
  background: #0d0d0c; color: #fff;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; border: none; cursor: pointer;
  letter-spacing: .01em;
}
.ar-status {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(24,23,22,.35);
}
.ar-status-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--atlas-accent); flex-shrink: 0;
}
.ar-composer {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 8px 8px 8px 14px;
  background: #F7F3EA;
  border: 1px solid rgba(24, 23, 22, .10);
  border-radius: 999px;
}
.ar-composer:focus-within { border-color: var(--atlas-accent); }
.ar-composer .ar-input {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: none; width: 100%; min-width: 0;
  color: rgba(24, 23, 22, .92);
  font-family: var(--font-sans); font-size: 12px;
}
.ar-composer .ar-input::placeholder { color: rgba(24, 23, 22, .42); }
.ar-composer .ar-send {
  background: var(--atlas-disc); color: var(--atlas-light); border: 0;
  border-radius: 999px; padding: 6px 14px;
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .04em; cursor: pointer;
}
.ar-composer .ar-send:hover { background: #2A2624; }
.ar-composer .ar-send:disabled { opacity: .4; cursor: default; background: var(--atlas-disc); }
.ar-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(24, 23, 22, .55);
}
.ar-status-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--atlas-accent);
  box-shadow: 0 0 0 4px rgba(184, 138, 69, .18);
  animation: railPulse 2.4s ease-in-out infinite;
}
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(184, 138, 69, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 138, 69, 0); }
}

/* ============================================================
   IN-PAGE ATLAS CUE  (per atlas-choreography.html v4)
   ONE per page. Static mark inside. 1.4s enter · 2.8s hold · 1.4s exit.
   ============================================================ */
.ip {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  overflow: hidden; border-radius: inherit;
}
.ip > * { pointer-events: auto; }

.ip-ribbon {
  position: absolute; left: 0; top: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer;
  padding: 9px 14px 9px 9px;
  border-radius: 0 999px 999px 0;
  background: var(--atlas-disc); color: var(--atlas-light);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .02em; white-space: nowrap;
  transform: translateX(-105%); opacity: 0;
  transition:
    transform 1.4s cubic-bezier(.22, 1, .36, 1),
    opacity   1.4s cubic-bezier(.22, 1, .36, 1),
    filter    1.4s ease;
}
.ip.ph-entering .ip-ribbon,
.ip.ph-holding  .ip-ribbon { transform: translateX(-2px); opacity: 1; }
.ip.ph-leaving  .ip-ribbon { transform: translateX(10px) scale(.97); opacity: 0; filter: blur(1.3px); }
.ip.ph-gone     .ip-ribbon { opacity: 0; }

.ip-thought {
  position: absolute; left: 14px; top: 58px; max-width: 256px;
  background: #fff; border: 1px solid rgba(24, 23, 22, .18);
  border-radius: 18px; padding: 13px 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .10);
  display: flex; gap: 10px; align-items: flex-start;
  transform: translateY(12px) scale(.96); opacity: 0;
  transition:
    transform 1.4s cubic-bezier(.22, 1, .36, 1) .6s,
    opacity   1.4s cubic-bezier(.22, 1, .36, 1) .6s,
    filter    1.4s ease .6s;
}
.ip.ph-entering .ip-thought,
.ip.ph-holding  .ip-thought { transform: none; opacity: 1; }
.ip.ph-leaving  .ip-thought { transform: translateY(10px) scale(.97); opacity: 0; filter: blur(1.3px); transition-delay: 0s; }
.ip.ph-gone     .ip-thought { opacity: 0; }
.ip-thought strong {
  display: block; font-family: var(--font-sans); font-weight: 500;
  font-size: 12.5px; color: var(--atlas-disc); margin-bottom: 2px;
}
.ip-thought span {
  display: block; font-family: var(--font-sans); font-size: 12px;
  line-height: 1.45; color: rgba(24, 23, 22, .62);
}
.ip-actions {
  display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap;
}
.ip-pill {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(24, 23, 22, .16); background: #fff; color: var(--atlas-disc);
}
.ip-pill.primary {
  background: var(--atlas-disc); color: var(--atlas-light); border-color: var(--atlas-disc);
}
.ip-pill:hover { }

/* ============================================================
   OBSERVATION  (per-card note — editorial, NOT Atlas-branded)
   Replaces the per-card atlas footer. Atlas branding is reserved
   for the rail and the single in-page cue.
   ============================================================ */
.obs {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: rgba(24,23,22,0.035);
  border-radius: 10px;
}
.obs--atlas { border: none; }
.obs-atlas-head {
  display: flex; align-items: center; gap: 7px;
}
.obs-atlas-lbl {
  font-family: var(--font-sans); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--atlas-disc);
}
/* legacy bar (kept for any existing non-Atlas obs) */
.obs-bar { display: none; }
.obs--legacy {
  display: grid; grid-template-columns: 3px 1fr; gap: 12px;
  padding: 10px 0 10px 0;
  align-items: stretch;
}
.obs-bar { background: var(--ocean); border-radius: 999px; }
.obs-body { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; text-wrap: pretty; }
.obs-body .obs-eye {
  display: inline-block; font-family: var(--font-sans); font-weight: 500;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ocean); margin-bottom: 4px;
}

/* ============================================================
   STORY CARD  (extends .cc with narrative tag + voting)
   ============================================================ */
.story-wrap {
  display: flex; flex-direction: column;
  height: 100%;
  gap: 10px;
}
.story-vote {
  padding: 4px 10px 2px;
  display: flex; justify-content: flex-end;
  opacity: 0.85;
}
.story-vote:hover { opacity: 1; }

.story-wrap > .story { flex: 1; min-height: 0; }
.story {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 24px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.025);
  display: flex; flex-direction: column;
  min-height: 320px;
  position: relative;
}
.story.hero { min-height: 420px; padding: 28px 30px 24px; border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.story.tall { min-height: 460px; }
.story.compact { min-height: 240px; padding: 20px 22px; }

/* Float-on-hover — a small lift + deeper shadow so cards feel buoyant, not
   stuck to the page. Motion-safe only; the vote panel below stays put. */
@media (prefers-reduced-motion: no-preference) {
  .story { transition: box-shadow .35s cubic-bezier(.22,1,.36,1); }
  .story:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.10); }
  .story.hero:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.09), 0 28px 60px rgba(0,0,0,0.12); }
}
.story.scenario { background: #fff; border-color: rgba(14,58,62,0.18); }
.story.scenario::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--ocean), var(--sea));
  border-radius: 999px;
}

.story-h {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  margin-bottom: 16px;
}
.story-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.story-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.story-tag.clarity      { background: rgba(14,58,62,0.10);  color: var(--ocean); }
.story-tag.control      { background: rgba(166,127,77,0.18); color: #6B4F26; }
.story-tag.optimize     { background: rgba(127,145,118,0.20); color: #3F5C44; }
.story-tag.scenario     { background: var(--ink); color: var(--ivory); }
.story-tag .pat-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }

/* Creator-only "Clarity/Control/…" narrative pill — discreet: no fill, faint,
   smaller, sits quietly after the member-facing data-status pill. */
.story-tag.story-tag-creator {
  background: transparent !important; color: var(--ink-faint, rgba(10,10,10,0.4)) !important;
  border: 1px dashed rgba(10,10,10,0.16); padding: 3px 8px; font-size: 9px; letter-spacing: 0.13em;
}
.story-tag.story-tag-creator .pat-dot { opacity: 0.55; }
.cc-tags { margin-bottom: 9px; }

.story-t {
  font-family: var(--font-serif); font-weight: 400; font-size: 22px;
  letter-spacing: -0.018em; line-height: 1.18; color: var(--ink);
  margin: 10px 0 0; text-wrap: pretty;
}
.story.hero .story-t { font-size: 28px; }
.story-sub { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-soft); margin-top: 11px; line-height: 1.5; text-wrap: pretty; }

.story-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.story-fade {
  position: absolute; inset: auto 0 0 0; height: 64px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}
.story-more {
  align-self: flex-start;
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 14px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.02em; color: var(--ink);
  transition: background 120ms ease;
}
.story-more:hover { background: var(--bone); }
.story-f {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}

/* ---- atlas-note inside story cards ------------------------- */
/* The collapsible AtlasNote (app.css) owns its own layout now; just
   keep the tighter open-state inset for the narrower story column. */
.story .atlas-note.open { border-radius: 14px; padding: 10px 12px; }

/* ============================================================
   CARD VOTING WIDGET (compact)
   ============================================================ */
.cv {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-size: 11px;
  white-space: nowrap;
}
.cv-block { display: flex; align-items: center; gap: 6px; }
.cv-lbl {
  font-weight: 500; font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cv-dots { display: inline-flex; gap: 2px; align-items: center; }
.cv-dot {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  cursor: pointer; padding: 0; transition: all 140ms ease;
  display: grid; place-items: center;
  font-size: 9px; color: var(--ink-faint);
}
.cv-dot:hover { }
.cv-dot.on.you    { background: var(--ocean); border-color: var(--ocean); color: var(--ivory); }
.cv-dot.on.oscar  { background: var(--ocean,#0E3A3E); border-color: var(--ocean,#0E3A3E); color: var(--ivory); }
.cv-dot.on.norman { background: var(--ocean); border-color: var(--ocean); color: var(--ivory); }
.cv-dot.on.claude { background: var(--ink-faint); border-color: transparent; color: var(--ivory); }
.cv-dot.claude.cur { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

/* ---- Review sync bar (creator-only, bottom-left, above the creator pill) ---- */
.vs-bar {
  position: fixed; left: 18px; bottom: 64px; z-index: 9399;
  display: none; align-items: center; gap: 10px;
  background: #1C1A17; color: #F4F1EA;
  border-radius: 999px; padding: 7px 12px 7px 14px;
  font-family: var(--font-sans, system-ui); font-size: 11px; letter-spacing: 0.02em;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
}
body[data-creator-notes='on'] .vs-bar { display: inline-flex; }
.vs-id-lbl { color: rgba(244,241,234,0.6); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; font-weight: 600; }
.vs-seg { display: inline-flex; gap: 2px; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 2px; }
.vs-seg button {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(244,241,234,0.75); font: inherit; font-size: 11px;
  padding: 3px 10px; border-radius: 999px; transition: background 140ms ease, color 140ms ease;
}
.vs-seg button:hover { color: #fff; }
.vs-seg button.on { background: var(--ocean,#0E3A3E); color: #1C1A17; font-weight: 600; }
.vs-status { display: inline-flex; align-items: center; gap: 6px; color: rgba(244,241,234,0.78); padding-left: 2px; }
.vs-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
@media print { .vs-bar { display: none !important; } }

.cv-star {
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
  color: rgba(10,10,10,0.30); display: grid; place-items: center;
  transition: transform 140ms ease, color 140ms ease;
}
.cv-star:hover { transform: scale(1.08); }
.cv-star.on { color: var(--ocean); }

.cv-divider { width: 1px; height: 22px; background: var(--line); }

.cv-archive {
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
  color: rgba(10,10,10,0.30); display: grid; place-items: center;
  transition: transform 140ms ease, color 140ms ease;
}
.cv-archive:hover { transform: scale(1.08); color: var(--ink-soft); }

/* ----- immediate hover tooltip for the vote-widget buttons ----- */
.cv [data-tip] { position: relative; }
.cv [data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); right: 0;
  background: var(--obsidian, #1C1A17); color: var(--ivory, #F4F1EA);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  line-height: 1.3; white-space: nowrap; padding: 6px 9px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,18,14,0.26);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease; transition-delay: 0ms; z-index: 9320;
}
.cv [data-tip]:hover::after { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
/* suppress the comment tip while its popover is open */
.cv-cmt.open[data-tip]:hover::after { opacity: 0; }

/* ----- per-card review comment (creator) ----- */
.cv-cmt-wrap { position: relative; display: inline-flex; }
.cv-cmt {
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
  color: rgba(10,10,10,0.30); display: inline-flex; align-items: center; gap: 3px;
  transition: transform 140ms ease, color 140ms ease;
}
.cv-cmt:hover { transform: scale(1.08); color: var(--ink-soft); }
.cv-cmt.has { color: var(--ocean); }
.cv-cmt-n { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-pop {
  position: absolute; z-index: 9300; right: 0; bottom: calc(100% + 8px);
  width: 282px; background: #fff; border: 1px solid var(--line-strong, rgba(10,10,10,0.18));
  border-radius: 15px; box-shadow: 0 22px 60px rgba(20,18,14,0.22); padding: 13px 14px;
  text-align: left; white-space: normal; cursor: default;
}
.cv-pop-h {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ocean); margin-bottom: 10px;
}
.cv-pop-h .cv-pop-card { color: var(--ink-mute); letter-spacing: 0.02em; text-transform: none; font-weight: 500; font-size: 11px; }
.cv-pop-who { display: flex; gap: 6px; margin-bottom: 10px; }
.cv-pop-who button {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--line, rgba(10,10,10,0.14)); background: #fff;
  color: var(--ink-soft); border-radius: 999px; padding: 5px 13px; cursor: pointer;
  transition: all 140ms ease;
}
.cv-pop-who button.on { border-color: var(--ocean); background: rgba(14,58,62,0.06); color: var(--ocean); }
.cv-pop-ta {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink);
  border: 1px solid var(--line, rgba(10,10,10,0.14)); border-radius: 10px; padding: 8px 10px; outline: none;
}
.cv-pop-ta:focus { border-color: var(--ocean); }
.cv-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.cv-pop-hint { font-size: 10.5px; color: var(--ink-faint); }
.cv-pop-send {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; border: 0; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; background: var(--ocean); color: var(--ivory); transition: filter 140ms ease;
}
.cv-pop-send:hover { filter: brightness(1.15); }
.cv-pop-send:disabled { opacity: 0.4; cursor: default; filter: none; }
.cv-pop-list { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; max-height: 168px; overflow: auto; }
.cv-pop-c { background: var(--ivory, #F4F4F1); border-radius: 10px; padding: 8px 9px; position: relative; }
.cv-pop-c-t { display: block; font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--ink); padding-right: 14px; }
.cv-pop-c-meta { display: block; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }
.cv-pop-c-x { position: absolute; top: 5px; right: 6px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.cv-pop-c-x:hover { color: var(--burgundy, #5C1D22); }

/* ----- archived collapsed bar ----- */
.story-wrap.archived { height: auto; }
.arch {
  display: flex; align-items: center; gap: 16px;
  background: repeating-linear-gradient(135deg, rgba(10,10,10,0.018) 0 10px, transparent 10px 20px), #fff;
  border: 1px dashed var(--line); border-radius: 16px;
  padding: 16px 20px;
}
.arch .story-tag { opacity: 0.6; flex-shrink: 0; }
.arch-t {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-serif); font-weight: 400; font-size: 15px;
  color: var(--ink-mute); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arch-restore {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  color: var(--ink); background: var(--ivory); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: border-color 140ms ease;
}
.arch-restore:hover { border-color: rgba(10,10,10,0.28); }

/* ============================================================
   SCENARIO INPUTS (slider, toggle, segmented)
   ============================================================ */
.sci-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.sci-row + .sci-row { border-top: 1px dashed var(--line); }
.sci-lbl {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink);
}
.sci-lbl .v { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ocean); }
.sci-help { font-family: var(--font-sans); font-size: 11px; color: var(--ink-mute); }

input[type="range"].own-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: rgba(10,10,10,0.10);
  border-radius: 999px; outline: none; margin: 6px 0 4px;
}
input[type="range"].own-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 999px; background: var(--ocean);
  cursor: pointer; box-shadow: 0 0 0 4px rgba(14,58,62,0.12);
}
input[type="range"].own-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px; background: var(--ocean);
  cursor: pointer; border: 0;
}

.tog {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px;
  align-items: center; padding: 9px 4px; border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease;
}
.tog:hover { background: #fff; box-shadow: 0 4px 14px rgba(20,18,15,0.10); }
.tog:active { transform: translateY(0); box-shadow: none; }
.tog-box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center;
  transition: all 140ms ease;
}
.tog.on .tog-box { background: var(--ocean); border-color: var(--ocean); }
.tog-box svg { opacity: 0; }
.tog.on .tog-box svg { opacity: 1; }
.tog-l { font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.tog-meta { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); }
.tog.off .tog-l, .tog.off .tog-meta { color: var(--ink-faint); text-decoration: line-through; }
.tog-v {
  font-family: var(--font-sans); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ============================================================
   TABLES
   ============================================================ */
.tbl {
  display: grid; gap: 0;
  font-family: var(--font-sans); font-size: 13px;
}
.tbl-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 14px; padding: 9px 0; align-items: center;
  border-bottom: 1px solid rgba(10,10,10,0.06);
}
.tbl-row:last-child { border-bottom: 0; }
.tbl-row.head {
  font-weight: 500; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 6px;
}
.tbl-l { font-family: var(--font-sans); color: var(--ink); }
.tbl-meta { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.tbl-v   { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.tbl-v.dim { color: var(--ink-mute); }
.tbl-v.acc { color: var(--ocean); }
.tbl-v.warn { color: var(--clay); }
.tbl-v.loss { color: var(--loss); }
.tbl-v.gain { color: var(--ocean); }

/* ============================================================
   BIG NUMBER (story-friendly numeric callout)
   ============================================================ */
.big {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; line-height: 0.96; letter-spacing: -0.035em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.big.ocean { color: var(--ocean); }
.big.loss  { color: var(--loss); }
.big.gain  { color: var(--gain); }
.big.lg { font-size: 72px; }
.big.sm { font-size: 38px; }

.big-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.big-row .lbl { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }

/* ============================================================
   FOOTER  (page bottom — voting roll-up)
   ============================================================ */
.pg-foot {
  margin: 64px 8px 64px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.pg-foot > div + div { margin-top: 30px; }
.pg-foot h4 {
  font-family: var(--font-serif); font-weight: 400; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px;
}
.pg-foot p { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }

/* Member compliance footnote — lives in the content column, centred below all
   page content. Base order sits past the reset bars (cfb:1 / sx-bar:2 / cl-bar:3)
   for pages without sections; on section pages, section-arrange.jsx ranks it
   last in the trailing-chrome group. */
/* The member footnote is delivered as the page's grounding ANCHOR — a
   full-bleed obsidian band carrying the OWN lockup, quiet nav, and the
   standing compliance line running the full width beneath. It fills the
   .mn content column (which has zero padding) edge to edge and sits flush
   at the foot of every member surface. */
.member-disclaimer {
  /* The OWN footer is the page's BOTTOM ANCHOR — it must sit below every piece
     of trailing chrome, including the chart foot bar (.cfb, order 9980). 50 put
     it ABOVE the bar on PageStack pages (where section-arrange sets no inline
     order); 9990 keeps the bar above the footer and the footer truly last. */
  order: 9990;
  width: 100%;
  margin: 48px 0 0;
  padding: 0;
  max-width: none;
  border: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-sans);
  text-align: left;
  box-sizing: border-box;
}
.member-disclaimer * { box-sizing: border-box; }
/* In dark mode --obsidian collapses to the page background, so raise the
   band onto its own surface with a hairline — the way the sidebar stays
   distinct in both themes. */
:root[data-theme="dark"] .member-disclaimer {
  background: #15181D;
  border-top: 1px solid rgba(236, 236, 234, 0.10);
}
/* Canonical site footer — mirrors the marketing footer-min (styles.css) exactly,
   so the library closes with the same bottom nav bar as every other page. The
   outer .member-disclaimer keeps the page's bottom-anchor ordering + obsidian
   full-bleed; the inner reproduces .footer-min, ported to library tokens. */
.member-disclaimer { border-top: 1px solid var(--line-dark); }
.member-disclaimer .footer-min-inner {
  width: 100%; max-width: var(--maxw, 1240px); margin: 0 auto;
  padding: 30px clamp(22px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 5vw, 72px); flex-wrap: wrap;
}
.member-disclaimer .footer-min-logo { display: block; }
.member-disclaimer .footer-min-logo img { height: 48px; width: auto; display: block; }
/* Brand wordline — matches the marketing footer (footer.css) so the library
   closes with the same "Optimize Wealth Now" footer as every other page. */
.member-disclaimer .footer-min-wordline { text-decoration: none; }
.member-disclaimer .footer-min-meaning { font-family: var(--font-serif); font-size: 52px; line-height: 1; color: var(--ivory); display: block; }
/* right side: two tight, right-aligned lines */
.member-disclaimer .footer-min-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.member-disclaimer .footer-min-topline { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
.member-disclaimer .footer-min-links { display: flex; gap: clamp(18px, 1.7vw, 26px); flex-wrap: wrap; justify-content: flex-end; }
.member-disclaimer .footer-min-links a {
  font-family: var(--font-sans); font-size: 14px; color: var(--paper-soft);
  transition: color .16s; white-space: nowrap; text-decoration: none;
}
.member-disclaimer .footer-min-links a:hover { color: var(--sea); }
.member-disclaimer .footer-min-botline { display: flex; align-items: center; gap: 18px; }
.member-disclaimer .footer-min-meta {
  font-family: var(--font-sans); font-size: 12px; color: var(--paper-mute);
  letter-spacing: 0.02em; text-align: right; white-space: nowrap;
}
.member-disclaimer .footer-min-social { display: flex; gap: 13px; }
.member-disclaimer .footer-min-social a { display: inline-flex; color: var(--paper-mute); transition: color .16s var(--ease-standard); text-decoration: none; }
.member-disclaimer .footer-min-social a:hover { color: var(--sea); }
.member-disclaimer .footer-min-social svg { width: 17px; height: 17px; display: block; }
/* newsletter pill — top line, far right */
.member-disclaimer .footer-news { display: flex; align-items: center; }
.member-disclaimer .footer-news [hidden] { display: none !important; }
.member-disclaimer .footer-news-toggle {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--obsidian);
  background: var(--sea); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 11px 18px; transition: background .16s var(--ease-standard);
}
.member-disclaimer .footer-news-toggle:hover { background: var(--bone); }
.member-disclaimer .footer-news-toggle svg { width: 15px; height: 15px; transition: transform .25s var(--ease-standard); }
.member-disclaimer .footer-news-toggle:hover svg { transform: translateX(3px); }
.member-disclaimer .footer-news-form { display: flex; align-items: center; gap: 8px; }
.member-disclaimer .footer-news-form input {
  width: 200px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ivory);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-pill); padding: 11px 16px; outline: none;
  transition: border-color .16s var(--ease-standard);
}
.member-disclaimer .footer-news-form input::placeholder { color: var(--paper-faint); }
.member-disclaimer .footer-news-form input:focus { border-color: var(--sea); }
.member-disclaimer .footer-news-submit {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 42px; height: 42px; flex: none; border: none; border-radius: 50%;
  background: var(--sea); color: var(--obsidian); transition: background .16s var(--ease-standard);
}
.member-disclaimer .footer-news-submit:hover { background: var(--bone); }
.member-disclaimer .footer-news-submit svg { width: 17px; height: 17px; }
.member-disclaimer .footer-news-done { font-family: var(--font-sans); font-size: 13px; color: var(--sea); white-space: nowrap; margin: 0; }
/* stack to a left-aligned column when the content column can't hold the row */
@container mn (max-width: 1120px) {
  .member-disclaimer .footer-min-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .member-disclaimer .footer-min-right { align-items: flex-start; width: 100%; gap: 18px; }
  .member-disclaimer .footer-min-topline { flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
  .member-disclaimer .footer-min-links { justify-content: flex-start; }
  .member-disclaimer .footer-min-botline { flex-wrap: wrap; }
  .member-disclaimer .footer-min-meta { text-align: left; white-space: normal; }
}
@container mn (max-width: 640px) {
  .member-disclaimer .footer-news-form input { width: min(64vw, 240px); }
}
.pg-foot .roll { display: block; overflow-x: auto; }
.pg-foot .roll-head,
.pg-foot .roll-i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 76px 76px 92px 64px;
  gap: 14px; align-items: center;
}
.pg-foot .roll-head {
  padding: 0 0 9px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.pg-foot .roll-head span { text-align: right; }
.pg-foot .roll-head .rh-view { text-align: left; }
.pg-foot .roll-head .rh-combined { color: var(--ink); }
.pg-foot .roll-i {
  font-family: var(--font-sans); font-size: 13px; padding: 9px 0;
  border-bottom: 1px solid rgba(10,10,10,0.05);
}
.pg-foot .roll-i .pat { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }
.pg-foot .roll-i .nm { color: var(--ink); display: flex; align-items: center; gap: 6px; }
.pg-foot .roll-i .roll-star { color: var(--brass); font-size: 12px; line-height: 1; }
.pg-foot .roll-i .sc { display: flex; justify-content: flex-end; align-items: center; min-height: 16px; }
.pg-foot .roll-i .sc-empty { color: var(--ink-faint); }
.pg-foot .roll-dots { display: inline-flex; gap: 3px; }
.pg-foot .roll-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.pg-foot .roll-combined .rc-num { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ink); }
.pg-foot .roll-combined.suggested-only .rc-num { color: var(--ink-faint); font-weight: 500; }

/* ----- review-complete control ----- */
.rv-complete {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: all 140ms ease;
}
.rv-complete:hover { border-color: var(--ocean); color: var(--ocean); }
.rv-complete svg { color: var(--ocean); }

.pg-foot--done { grid-template-columns: 1fr; }
.rv-done {
  display: flex; align-items: center; gap: 18px;
}
.rv-done-check {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--ocean) 14%, transparent); color: var(--ocean);
}
.rv-done h4 { margin: 0 0 4px; }
.rv-done p { margin: 0; max-width: 60ch; }
.rv-reopen {
  margin-left: auto; flex: none;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: all 140ms ease;
}
.rv-reopen:hover { border-color: var(--ocean); color: var(--ocean); }
@media (max-width: 880px) {
  .rv-done { flex-wrap: wrap; }
  .rv-reopen { margin-left: 0; }
}

/* ============================================================
   PREVIEW-AS  — global "become this member" chrome.
   A fixed bar pinned to the top of the viewport on every page while
   preview is active; the shell is offset down so the sticky sidebar
   and Atlas rail clear it.
   ============================================================ */
body[data-preview="true"] { --pvb-h: 48px; }
body[data-preview="true"] .dash { margin-top: var(--pvb-h); }
body[data-preview="true"] .sb { top: var(--pvb-h); max-height: calc(100vh - var(--pvb-h)); }
body[data-preview="true"] .ar { top: calc(12px + var(--pvb-h)); height: calc(100vh - 24px - var(--pvb-h)); }

.own-pvb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 48px; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px 0 20px;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-sans);
  border-bottom: 1px solid rgba(244,244,241,0.10);
  box-shadow: 0 6px 24px rgba(10,10,10,0.22);
  animation: pvbDrop 260ms var(--ease-standard, ease);
}
@keyframes pvbDrop { from { transform: translateY(-100%); } to { transform: none; } }
.own-pvb-eye {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-mute);
  flex-shrink: 0;
}
.own-pvb-pulse {
  width: 7px; height: 7px; border-radius: 999px; background: var(--sea);
  box-shadow: 0 0 0 0 rgba(126,178,168,0.6);
  animation: pvbPulse 1800ms ease-out infinite;
}
@keyframes pvbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(126,178,168,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(126,178,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,178,168,0); }
}
.own-pvb-div { width: 1px; height: 20px; background: rgba(244,244,241,0.14); flex-shrink: 0; }
.own-pvb-id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.own-pvb-av {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px;
  box-shadow: 0 0 0 2px rgba(244,244,241,0.18);
}
.own-pvb-text { font-size: 13px; line-height: 1.25; color: var(--paper-light); min-width: 0; }
.own-pvb-text b { color: var(--ivory); font-weight: 600; }
.own-pvb-lvl {
  margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(244,244,241,0.12); color: var(--paper-light); white-space: nowrap;
}
.own-pvb-ro {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--paper-mute);
}
.own-pvb-exit {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ivory); color: var(--obsidian);
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em;
  transition: transform 140ms var(--ease-standard, ease), filter 140ms ease;
}
.own-pvb-exit:hover { filter: brightness(0.93); transform: translateY(-1px); }
.own-pvb-note {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 199; max-width: 90vw;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--obsidian); color: var(--ivory);
  font-family: var(--font-sans); font-size: 12.5px;
  box-shadow: 0 10px 30px rgba(10,10,10,0.26);
  animation: pvbNote 240ms var(--ease-standard, ease);
}
.own-pvb-note b { font-weight: 600; }
@keyframes pvbNote { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 720px) {
  .own-pvb-text { display: none; }
  .own-pvb-eye span:last-child { display: none; }
}