/* ============================================================
   Strangeland Hub — styles
   Grammar decoded from usalproject.com, spoken in Common Era's
   accent. See mini-builds/usal-teardown/notes/ for the source
   patterns. Tokens up top; everything hangs off them.
   ============================================================ */

:root{
  --ink:#211F1D;            /* warm near-black (Common Era) */
  --ink-rgb:33,31,29;
  --ink-2:#2A2723;          /* raised surfaces */
  --ink2-rgb:42,39,35;
  --paper:#F5F3EE;          /* warm off-white (signalform proposal) */
  --paper-rgb:245,243,238;
  --grey:150,148,144;
  --ease:cubic-bezier(.44,.24,.16,1);
  --dur:250ms;              /* micro-transitions */
  --dur-slow:420ms;         /* overlay, drawer, wordmark, view swaps: one clock */
  --radius:10px;
  --dot:8px;
  --line-strong:rgba(245,243,238,1);
  --line-faint:rgba(245,243,238,.25);

  /* display voice: the grotesque, bold and tight (the rounded face read
     as toy-like; the reference's menus run Neue Haas, and this is its
     system stand-in) */
  --font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* every display-voice element runs bold; the family alone is too plain */
#wordmark, .view h1, .home .greeting, .card h3, .phases h3,
#overlay .menu button, #connect h2{ font-weight:700; }
html{ height:100%; }
body{
  min-height:100%;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
}
body.menu-open, body.chat-open{ overflow:hidden; }
.mono{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
button{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; }
a{ color:inherit; }
::selection{ background:var(--paper); color:var(--ink); }
.inert{ pointer-events:none; }

/* ------------------------------------------------------------
   Depth scene: three layers + atmosphere tint that follows the
   real clock (dawn / day / dusk / night). Layers translate a few
   px against the pointer so the landing has physical depth.
   ------------------------------------------------------------ */
#scene{ position:fixed; inset:0; z-index:0; overflow:hidden; }
/* stock photography under everything; when it loads, the painted
   landscape yields and the sky gradient becomes a time-of-day tint */
#scene .photo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 60%; }
body.photo-ok #scene .ridge{ display:none; }
body.photo-ok #scene .sky{ opacity:.42; mix-blend-mode:soft-light; }
body.photo-ok #scene .stars{ display:none; }
#scene .shade{ position:absolute; inset:0;
  background:linear-gradient(rgba(var(--ink-rgb),.55), rgba(var(--ink-rgb),.35) 40%, rgba(var(--ink-rgb),.6) 100%); }
/* the landing keeps the dramatic gradient; working views scroll long
   small text over the fixed photo, so they get a flat guaranteed wash */
body:not([data-view="home"]) #scene .shade{ background:rgba(var(--ink-rgb),.6); }
#scene .layer{ position:absolute; inset:-4%; transition:transform 1.2s var(--ease); will-change:transform; }
#scene .sky{
  background:
    radial-gradient(120% 90% at 70% 10%, var(--sky-hi,#3E4C5E) 0%, transparent 60%),
    linear-gradient(var(--sky-a,#2B3442) 0%, var(--sky-b,#4A4238) 62%, var(--sky-c,#312C24) 100%);
}
#scene .glow{
  position:absolute; left:58%; top:16%; width:26vw; height:26vw; border-radius:50%;
  background:radial-gradient(circle, var(--glow,#E8D5A8) 0%, transparent 62%);
  opacity:.5; filter:blur(6px);
}
#scene .ridge{ position:absolute; left:-6%; right:-6%; border-radius:48% 52% 0 0 / 100% 100% 0 0; }
#scene .r1{ bottom:-14%; height:44%; background:#3A382F; opacity:.9; }
#scene .r2{ bottom:-20%; height:38%; left:30%; right:-10%; background:#2E2C26; }
#scene .r3{ bottom:-24%; height:30%; left:-10%; right:35%; background:#262420; }
#scene .grain{
  position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay; pointer-events:none;
  background-image:repeating-radial-gradient(circle at 50% 120%, #0000 0 2px, #0003 2px 3px);
}
/* night mode gets a few stars; hidden by day via opacity */
#scene .stars{ position:absolute; inset:0; opacity:var(--stars,0); transition:opacity 2s; }
#scene .stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--paper); opacity:.7; }

/* ------------------------------------------------------------
   Header: wordmark + pill nav. Wordmark ducks when the sections
   overlay opens (USAL logo-lift, one margin).
   ------------------------------------------------------------ */
header{
  position:fixed; left:0; right:0; top:0; z-index:30;
  display:flex; align-items:center; gap:2px;
  padding:14px clamp(14px,3vw,24px);
  background:linear-gradient(rgba(var(--ink-rgb),.8), rgba(var(--ink-rgb),.35) 70%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#wordmark{
  font-family:var(--font-display);
  font-size:22px; letter-spacing:-.01em; text-transform:none;
  margin-right:auto; cursor:pointer; background:none; border:0;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
#wordmark span{ opacity:.45; }
/* the USAL logo-duck, done with fade + lift so it survives any header
   layout (a margin shift left it half-clipped at the viewport edge) */
body.menu-open #wordmark{ opacity:0; transform:translateY(-18px); pointer-events:none; }

/* bottom-left instrument stack: time, countdown, last capture, the
   copyright line. USAL keeps its live data here; so do we. */
#instrument{
  position:fixed; left:clamp(14px,3vw,24px); bottom:52px; z-index:14;
  display:flex; flex-direction:column; gap:3px; opacity:.75; line-height:1.6;
  pointer-events:none;
}
/* the instrument stack belongs to the landing; on content views it
   would overprint list rows */
body:not([data-view="home"]) #instrument{ display:none; }

/* pill mechanics carried over from the fidelity studies: .15s LINEAR
   clock, hover inverts to solid paper (the white-flash), active state
   snaps SQUARE with a solid-ink dot */
.pill{
  appearance:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:8px; height:30px; padding:0 14px;
  border-radius:6px;                       /* the reference's rectangle, not a lozenge */
  background:rgba(var(--grey),.22);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  transition:all .15s linear;
}
@media (hover:hover){
  .pill:not(.active):hover{ background:var(--paper); color:var(--ink); }
}
.pill .dot,
.cell .dot{
  width:var(--dot); height:var(--dot); border-radius:50%; flex-shrink:0;
  border:1px solid currentColor; background:transparent;
  transition:all .15s linear;
}
.arrow{ width:8px; height:8.5px; transition:transform .15s var(--ease); }
.arrow path{ stroke:currentColor; fill:none; stroke-width:1; }   /* hairline glyph */
.pill.active{ background:var(--paper); color:var(--ink); border-radius:0; }
.pill.active .dot{ background:var(--ink); border-color:var(--ink); }
.pill.active .arrow{ transform:rotate(180deg); }

/* the split button from the teardown: one control, two frosted cells
   (label + arrow), inverting together when active */
.pill-split{
  appearance:none; border:0; cursor:pointer; background:none; padding:0;
  display:flex; gap:2px; color:inherit;                 /* hairline seam */
  font:inherit; text-transform:inherit; letter-spacing:inherit;
}
.pill-split .cell{
  display:flex; align-items:center; gap:8px; height:30px; padding:0 14px;
  border-radius:6px;
  background:rgba(var(--grey),.22);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  transition:all .15s linear;
}
.pill-split .arrowcell{ padding:0 10px; }
@media (hover:hover){
  .pill-split:not(.active):hover .cell{ background:var(--paper); color:var(--ink); }
}
.pill-split.active .cell{ background:var(--paper); color:var(--ink); border-radius:0; }
.pill-split.active .dot{ background:var(--ink); border-color:var(--ink); }
.pill-split.active .arrow{ transform:rotate(180deg); }

/* the top bar: direct section pills; the current view's pill inverts.
   Active state is pure CSS off body[data-view], so it can't desync.
   2px seams and flex-1 distribution: the bar fills the header the way
   the reference's does, one segmented instrument. */
#topnav{ display:flex; gap:2px; flex:1; margin:0 0 0 16px; }
#topnav .pill{ flex:1; }
/* grouped cell: micro-links drop beneath the label on hover, the
   stacked-sublink move from the instrument-catalog reference */
.navcell{ position:relative; flex:1; display:flex; }
.navcell .pill{ flex:1; }
.navcell .micro{
  position:absolute; top:32px; left:0; right:0; z-index:31;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s linear, transform .15s linear, visibility 0s linear .15s;
}
.navcell .micro button{
  display:block; text-align:left; padding:6px 14px; border:0; cursor:pointer;
  border-radius:6px; font-size:10px; letter-spacing:.06em;
  background:rgba(var(--grey),.22); color:var(--paper);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  transition:all .15s linear;
}
/* keyboard focus reveals the micro-links on every device */
.navcell:focus-within .micro{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
@media (hover:hover){
  .navcell:hover .micro{
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .navcell .micro button:hover{ background:var(--paper); color:var(--ink); }
}
body[data-view="today"]     #topnav [data-go="today"],
body[data-view="records"]   #topnav [data-go="records"],
body[data-view="learnings"] #topnav [data-go="learnings"],
body[data-view="article"]   #topnav [data-go="learnings"],
body[data-view="budget"]    #topnav [data-go="budget"],
body[data-view="plan"]      #topnav [data-go="plan"]{
  background:var(--paper); color:var(--ink); border-radius:0;
}
body[data-view="today"]     #topnav [data-go="today"] .dot,
body[data-view="records"]   #topnav [data-go="records"] .dot,
body[data-view="learnings"] #topnav [data-go="learnings"] .dot,
body[data-view="budget"]    #topnav [data-go="budget"] .dot,
body[data-view="plan"]      #topnav [data-go="plan"] .dot{
  background:var(--ink); border-color:var(--ink);
}
@media (max-width:1100px){
  #topnav{ display:none; }   /* the Sections overlay carries navigation */
}
/* taxonomy pills: same grammar, in the type's color (set via --tc).
   Outline when idle, filled when the filter is active. */
.pill .tdot{
  width:var(--dot); height:var(--dot); border-radius:50%; flex-shrink:0;
  border:1px solid var(--tc); background:transparent;
  transition:background var(--dur) var(--ease);
}
.pill.active .tdot{ background:var(--tc); }

/* ------------------------------------------------------------
   Views: one <section> per view, swapped by [data-view] on body.
   Home is the landing; the rest are "pages."
   ------------------------------------------------------------ */
main{ position:relative; z-index:1; padding:76px clamp(14px,3vw,24px) 150px; }
.view{ display:none; }
body[data-view="home"]      .view.home,
body[data-view="today"]     .view.today-view,
body[data-view="records"]   .view.records,
body[data-view="learnings"] .view.learnings,
body[data-view="article"]   .view.article,
body[data-view="leaders"]   .view.leaders,
body[data-view="budget"]    .view.budget,
body[data-view="plan"]      .view.plan,
body[data-view="guide"]     .view.guide{ display:block; animation:viewIn 220ms var(--ease); }
/* restraint rule from the review of reference three: nothing over
   200ms except the wash and the drawer */
@keyframes viewIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* home fades without transform: a transformed ancestor would hijack the
   fixed positioning of the notice cards inside it */
body[data-view="home"] .view.home{ animation-name:viewInFade; }
@keyframes viewInFade{ from{ opacity:0; } to{ opacity:1; } }

/* page titles: the Leto-scale moment, in the rounded voice */
.view h1{
  font-family:var(--font-display);
  font-size:clamp(56px,11vw,120px); line-height:.92; letter-spacing:-.01em;
  padding:14px 0 .16em;  /* em-based so descenders clear the subline at every size */
  outline:none;
}
.view h1 sup{
  font-family:var(--font-mono); font-size:.14em; letter-spacing:.06em;
  vertical-align:super; opacity:.6;
}
.subline{ opacity:.55; padding-bottom:26px; }

/* ------------------------------------------------------------
   Home: greeting + notices · Today: instrument panel + section index
   ------------------------------------------------------------ */
.home .greeting{
  font-family:var(--font-display);
  font-size:clamp(44px,8.5vw,96px); line-height:.98; letter-spacing:-.02em;
  padding:16vh 0 .14em; max-width:16ch;   /* em bottom pad clears the parens' descent */
}
.home .greeting em{ font-style:normal; opacity:.45; }
.home .today{ opacity:.7; font-size:13px; margin-top:6px; padding-bottom:34px; }

.panel{
  display:flex; flex-wrap:wrap; gap:20px 44px;
  padding:14px 0; margin-bottom:30px;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-faint);
}
.panel b{ font-weight:400; opacity:.55; display:block; margin-bottom:4px; }

/* the section index doubles as home navigation: spotlight list */
.sections-index .row{ cursor:pointer; }

/* notices: small desktop-style cards. Fixed top-right where there's
   room; in flow under the greeting on narrower screens so they never
   cover the headline. They live inside the home view, so they only
   appear on the landing. */
#notices{
  position:fixed; right:clamp(14px,3vw,24px); top:64px; z-index:15;
  display:flex; flex-direction:column; gap:10px; width:min(320px,86vw);
}
@media (max-width:1000px){
  #notices{ position:static; width:min(420px,100%); margin-top:4px; }
}
.notice{
  background:rgba(var(--grey),.2);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  border:1px solid rgba(var(--paper-rgb),.18);
  border-radius:var(--radius); padding:12px 14px;
  display:flex; gap:10px; align-items:flex-start;
  animation:noticeIn 500ms var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 180ms);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* the card lights up only when the navigating region is hovered, so the
   affordance matches the actual hit area */
.notice:has(.link:hover){ border-color:rgba(var(--paper-rgb),.5); background:rgba(var(--grey),.32); }
@keyframes noticeIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
.notice .tag{ flex-shrink:0; opacity:.55; padding-top:1px; }
.notice .link{
  display:flex; gap:10px; align-items:flex-start; flex:1; text-align:left;
  background:none; border:0; cursor:pointer; padding:0; color:inherit;
}
/* body copy speaks sentence case like every other paragraph; only the
   tag and arrow keep the gauge voice */
.notice p{
  font-size:13px; line-height:1.45;
  text-transform:none; letter-spacing:0; font-family:var(--font-body);
}
.notice .go{ opacity:.5; padding-top:1px; }
.notice .close{
  margin:-6px -6px -6px 0; padding:6px 8px; min-width:28px; min-height:28px;
  background:none; border:0; cursor:pointer; opacity:.4; flex-shrink:0;
}
.notice .close:hover{ opacity:1; }

/* ------------------------------------------------------------
   Spotlight index (records + anywhere rows appear).
   States painted by JS: lit / frame / dim. Rows own border-top,
   so the row after the lit one keeps its border bright.
   Dim text stays at .45 so unhovered rows remain readable
   (USAL dims to .25; that fails contrast on a working tool).
   ------------------------------------------------------------ */
.index .row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  text-decoration:none; color:var(--paper);
  border-top:1px solid var(--line-strong);
  /* rows drop into place on render, like the reference index */
  animation:rowIn 300ms cubic-bezier(.22,.9,.27,1) both;
  animation-delay:calc(var(--i,0)*35ms);
}
/* record rows expand into a filing-trail spec sheet: hairline
   label/value pairs, the instrument-catalog table voice */
.rec .spec{ display:none; }
.rec.open .spec{
  display:grid; grid-template-columns:140px 1fr;
  border-top:1px solid rgba(var(--paper-rgb),.25);
  margin-bottom:2px;
}
.rec .spec span{
  padding:7px 0; border-bottom:1px solid rgba(var(--paper-rgb),.12);
}
.rec .spec .k{ opacity:.5; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-10px); } }
/* the list ends open: no closing rule after the last row */
.row .date{ flex:0 0 52px; opacity:.85; }
.row .title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:15px; font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.row .count{ flex-shrink:0; opacity:.6; }
.row .chip{
  flex-shrink:0; display:flex; align-items:center; gap:7px;
  padding:3px 10px; border:1px solid rgba(var(--paper-rgb),.5); border-radius:999px;
}
.row .chip .tdot{ width:var(--dot); height:var(--dot); border-radius:50%; flex-shrink:0; }
.row .vis{ flex:0 0 84px; display:flex; align-items:center; gap:7px; opacity:.85; }
.vdot{ width:var(--dot); height:var(--dot); border-radius:50%; border:1px solid currentColor; flex-shrink:0; }
.vis.private .vdot{ background:currentColor; }
.vis.team .vdot{ background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
/* the dim SNAPS (no tween — decoded from the reference's compiled CSS)
   and it is surgical: text and rules drop, but the taxonomy chip and
   the visibility/status dots stay lit inside dimmed rows. Text holds
   .45 rather than the reference's .25: this is a working tool and the
   dimmed rows must stay readable. */
.row[data-state="dim"] > :not(.chip):not(.vis):not(.status){ opacity:.45; }
.row[data-state="dim"]{ border-color:var(--line-faint); }
.row[data-state="frame"] > :not(.chip):not(.vis):not(.status){ opacity:.45; }
.row[data-state="frame"]{ border-color:var(--line-strong); }
.row[data-state="lit"] > *{ opacity:1; }
.row[data-state="lit"]{ border-color:var(--line-strong); }

/* ------------------------------------------------------------
   Records filters: the fr-track squeeze from the reference site.
   The chip panel opens as a grid column animating 0fr → .32fr
   over 500ms on their exact curve; the list slides right.
   ------------------------------------------------------------ */
#filterBtn{ margin-bottom:15px; }
#filterBtn .sliders{ width:12px; height:10px; flex-shrink:0; }
#filterBtn .sliders rect, #filterBtn .plus rect{ fill:currentColor; }
#filterBtn .plus{ width:10px; height:10px; margin-left:14px; flex-shrink:0;
  transition:transform .15s var(--ease); }
#filterBtn[aria-expanded="true"] .plus{ transform:rotate(45deg); }
#filter-track{
  display:grid; grid-template-columns:0fr minmax(0,1fr); width:100%;
  transition:grid-template-columns 500ms cubic-bezier(.25,.8,.25,1);
}
#filter-track.open{ grid-template-columns:.32fr minmax(0,1fr); }
#filter-cell{ min-width:0; overflow:hidden; }
#filter-panel{
  position:sticky; top:120px;
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding-right:16px;
}
#filter-panel .pill{ white-space:nowrap; }

/* legend under an index: plain block, breathing room, no fixed overlap */
.legend{ margin:26px 0 0; opacity:.65; line-height:1.9; max-width:640px; }

/* ------------------------------------------------------------
   Learnings: editorial cards. The "beautiful information" gets
   body type and room, unlike the data-dense indexes.
   ------------------------------------------------------------ */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
/* cards are buttons now: click to expand. Collapsed shows the title row
   (with a bracketed index, the reference's [$95] grammar) and a two-line
   preview; open shows everything. */
.card{
  background:var(--ink-2); text-align:left; cursor:pointer;
  border:1px solid rgba(var(--paper-rgb),.14);
  border-radius:var(--radius); padding:20px 20px 16px;
  font:inherit; color:inherit;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover:hover){
  .card:hover{ border-color:rgba(var(--paper-rgb),.45); transform:translateY(-2px); }
}
.card .titlerow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:8px; }
.card h3{ font-family:var(--font-display); font-size:22px; letter-spacing:-.01em;
  text-transform:none; }
.card .idx{ opacity:.5; flex-shrink:0; }
.card p{ font-size:14px; line-height:1.55; opacity:.85; text-transform:none;
  letter-spacing:0; font-family:var(--font-body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card.open p{ display:block; -webkit-line-clamp:none; overflow:visible; }
.card .more{ display:none; font-size:13px; line-height:1.6; opacity:.65;
  text-transform:none; letter-spacing:0; font-family:var(--font-body); padding-top:10px; }
.card.open .more{ display:block; }
.card .meta{ display:flex; justify-content:space-between; padding-top:14px; opacity:.5; }
.card .plus{ width:10px; height:10px; flex-shrink:0; align-self:center;
  transition:transform .15s var(--ease); }
.card .plus rect{ fill:currentColor; }
.card.open .plus{ transform:rotate(45deg); }

/* ------------------------------------------------------------
   THE MAGAZINE. The contents page: articles as index rows in the
   system's own language (hairline rules, the spotlight dim, mono
   data columns), not floating boxes. The lead gets one wide plate.
   ------------------------------------------------------------ */
#learnings-list{ display:block; }
/* the lead article: a wide plate, the only card-like surface here */
.cover.lead{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-top:2px solid #DA714F;
  color:inherit; font:inherit; padding:22px 0 26px; margin-bottom:6px;
  position:relative;
}
.cover.lead .kicker{ display:flex; align-items:center; gap:7px; opacity:.6; padding-bottom:14px; }
.cover.lead .kicker .tdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cover.lead h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,5vw,68px); letter-spacing:-.02em; line-height:1;
  text-transform:none; padding-bottom:14px; max-width:20ch;
}
.cover.lead .dekline{
  display:block; font-family:var(--font-body); font-size:clamp(15px,1.5vw,18px);
  line-height:1.55; opacity:.8; text-transform:none; letter-spacing:0; max-width:52ch;
}
.cover.lead .cover-folio{ position:absolute; top:22px; right:0; opacity:.4; }
.cover.lead .readline{ display:inline-block; padding-top:20px; opacity:.6;
  transition:opacity .15s linear, transform .15s linear; }
@media (hover:hover){
  .cover.lead:hover .readline{ opacity:1; transform:translateX(6px); }
}
/* the rest: contents rows, spotlit like every other list in the hub */
.cover:not(.lead){
  display:flex; align-items:baseline; gap:16px; width:100%;
  text-align:left; cursor:pointer; background:none; color:inherit; font:inherit;
  border:0; border-top:1px solid var(--line-strong); padding:15px 0;
  transition:opacity .15s var(--ease), border-color .15s var(--ease);
}
.cover:not(.lead) .kicker{ flex:0 0 190px; display:flex; align-items:center; gap:7px;
  opacity:.6; padding:0; }
.cover:not(.lead) .kicker .tdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cover:not(.lead) h3{
  flex:1 1 auto; font-family:var(--font-display); font-weight:700;
  font-size:clamp(17px,1.7vw,21px); letter-spacing:-.01em; line-height:1.2;
  text-transform:none; padding:0; min-width:0;
}
.cover:not(.lead) .dekline{
  flex:1 1 40%; font-family:var(--font-body); font-size:13px; line-height:1.45;
  opacity:.6; text-transform:none; letter-spacing:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cover:not(.lead) .cover-folio{ flex:0 0 auto; opacity:.45; }
.cover:not(.lead) .readline{ display:none; }
/* the dim-siblings spotlight, on the contents rows */
@media (hover:hover){
  #learnings-list:has(.cover:not(.lead):hover) .cover:not(.lead){ opacity:.45; }
  #learnings-list .cover:not(.lead):hover{ opacity:1; }
}

/* ------------------------------------------------------------
   The article: full-bleed opener, measured column with a drop cap,
   staged evidence, pull quotes, footnoted sources, page turns.
   ------------------------------------------------------------ */
.art-head{ padding:5vh 0 30px; max-width:min(900px,72vw); }
.art-head .kicker{ display:flex; align-items:center; gap:7px; opacity:.65; padding-bottom:18px; }
.art-head .kicker .tdot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.art-head h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,7vw,92px); letter-spacing:-.02em; line-height:.98;
  padding-bottom:18px; outline:none;
}
.art-head .dek{ font-size:clamp(17px,1.8vw,21px); line-height:1.5; opacity:.8; max-width:46ch; }
/* the reading column sits on its own darkened plate so the photo
   behind it never fights the text */
.art-col{
  max-width:66ch; padding:26px clamp(18px,2.4vw,34px) 6px;
  background:rgba(var(--ink-rgb),.62); border-radius:var(--radius);
  border-top:1px solid rgba(var(--paper-rgb),.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.art-col p{ font-size:17px; line-height:1.72; padding-bottom:22px; opacity:.94; }
.art-col p.lead::first-letter{
  font-family:var(--font-display); font-weight:700;
  font-size:3.4em; line-height:.8; float:left; padding:6px 10px 0 0;
}
.art-col .pull{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,2.1vw,26px); letter-spacing:-.01em; line-height:1.25;
  border-left:2px solid #DA714F; padding:4px 0 4px 18px; margin:6px 0 28px;
  max-width:30ch;
}
/* evidence: real records staged into the argument as the reader arrives */
.art-col .ev{
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-faint);
  padding:14px 0; margin:6px 0 30px;
  opacity:0; transform:translateY(-10px);
  transition:opacity 300ms cubic-bezier(0,0,.58,1), transform 450ms cubic-bezier(.22,.9,.27,1);
}
.art-col .ev.seen{ opacity:1; transform:none; }
.ev-label{ display:block; opacity:.5; padding-bottom:10px; }
.ev-rec{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.ev-rec + .ev-rec{ border-top:1px solid rgba(var(--paper-rgb),.12); }
.ev-rec .ev-date{ flex:0 0 58px; opacity:.6; }
.ev-rec .ev-title{ flex:1; font-size:14px; min-width:0; }
.ev-rec .chip{ flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:2px 9px; border:1px solid rgba(var(--paper-rgb),.4); border-radius:999px; font-size:10px; }
.ev-rec .chip .tdot{ width:7px; height:7px; border-radius:50%; }
/* On a wide screen the page runs on two tracks: the argument down a
   measured left column, the evidence and pull quotes out in the right
   margin at the point in the flow where they belong. The plate widens
   to hold both, so the photograph stops owning the right third. */
@media (min-width:1180px){
  .art-col{ max-width:min(1240px,100%); }
  .art-col > p{ max-width:62ch; }
  .art-col > .ev,
  .art-col > .pull{
    float:right; clear:right; width:32%;
    margin:2px 0 26px clamp(32px,3.6vw,60px);
  }
  .art-col > .pull{ max-width:none; border-left-width:2px; }
  .art-col::after{ content:""; display:block; clear:both; }
  /* in the narrow track the record stacks instead of squeezing */
  .art-col > .ev .ev-rec{ display:block; }
  .art-col > .ev .ev-date{ display:block; padding-bottom:4px; }
  .art-col > .ev .ev-title{ display:block; padding-bottom:8px; }
  .art-col > .ev .chip{ display:inline-flex; }
}
/* On a very wide screen the spread centers instead of hugging the left
   edge with the photograph owning the other half. */
@media (min-width:1500px){
  .art-head, .art-col, .art-sources, .art-turn, #article-body > *{
    margin-inline:auto; max-width:1240px;
  }
  .art-head{ padding-left:0; padding-right:0; }
  .art-col > .ev, .art-col > .pull{ width:clamp(280px,30%,400px); }
}
.art-sources{ max-width:66ch; margin-top:20px;
  border-top:1px solid var(--line-strong); padding-top:16px; }
.art-sources .src-head{ opacity:.55; padding-bottom:12px; }
.art-sources .pill{ margin-bottom:8px; }
.art-turn{ display:flex; justify-content:space-between; gap:10px;
  max-width:900px; margin-top:44px; }
.art-turn .pill{ max-width:46%; height:auto; padding:9px 14px;
  white-space:normal; text-align:left; line-height:1.3; }

/* the reading instruments */
#article-rail{ position:fixed; left:clamp(8px,1vw,16px); top:50%;
  transform:translateY(-50%); z-index:14;
  display:none; flex-direction:column; gap:5px; }
body[data-view="article"] #article-rail{ display:flex; }
#article-rail i{ width:10px; height:1px; background:rgba(var(--paper-rgb),.2);
  transition:background .15s linear, width .15s linear; }
#article-rail i.on{ background:var(--paper); width:16px; }
#article-topbar{ position:fixed; left:0; right:0; top:0; height:2px; z-index:31; display:none; }
body[data-view="article"] #article-topbar{ display:block; }
#article-topbar i{ display:block; height:100%; width:0; background:var(--paper); }
#pin-btn{ position:fixed; z-index:45; height:32px; }
#pin-btn[hidden]{ display:none; }   /* .pill sets display, so [hidden] needs saying */

/* leaders: status uses the dot grammar (filled=active, half=onboarding, open=invited) */
.status{ display:flex; align-items:center; gap:7px; flex:0 0 110px; }
.status .vdot{ border-color:currentColor; }
.status.active .vdot{ background:currentColor; }
.status.onboarding .vdot{ background:linear-gradient(90deg,currentColor 50%,transparent 50%); }

/* budget chart: cumulative spend as a thin stroke over a soft
   gradient fill, the quiet-data voice from reference three */
#budget-chart{ margin-bottom:26px; }
#budget-chart .chart-title{ opacity:.6; padding-bottom:8px; }
/* the two mono kickers share one weight */
#budget-chart svg{ display:block; width:100%; height:auto; }   /* uniform scale keeps dots round */
#budget-chart .axis{ stroke:rgba(var(--paper-rgb),.25); stroke-width:1; vector-effect:non-scaling-stroke; }
#budget-chart .area{ fill:url(#spendfill); }
#budget-chart .line{ fill:none; stroke:var(--paper); stroke-width:1.5; vector-effect:non-scaling-stroke; }
#budget-chart .pt{ fill:var(--paper); }
#budget-chart .xlab{ display:flex; justify-content:space-between; padding-top:6px; opacity:.55; }

/* budget: money column right-aligned, totals bar */
.row .amount{ flex:0 0 80px; text-align:right; }
.totals{
  display:flex; justify-content:space-between; gap:16px;
  padding:16px 0; margin-top:4px; opacity:.85;
}
.meter{ flex:1; align-self:center; height:1px; background:rgba(var(--paper-rgb),.2); position:relative; }
.meter i{ position:absolute; left:0; top:-1px; height:3px; background:var(--paper); display:block; }

/* the week strip: the next seven days as a slim hairline row */
#week-strip{
  display:grid; grid-template-columns:repeat(7,1fr);
  margin-bottom:30px;
  border-top:1px solid rgba(var(--paper-rgb),.35);
  border-left:1px solid rgba(var(--paper-rgb),.2);
}
#week-strip .wd{
  padding:8px 10px; min-height:58px;
  border-right:1px solid rgba(var(--paper-rgb),.2);
  border-bottom:1px solid rgba(var(--paper-rgb),.35);
}
#week-strip .wd .d{ opacity:.5; display:block; margin-bottom:6px; }
#week-strip .wd.today-day .d{ opacity:1; border-bottom:1px solid var(--paper); display:inline-block; }
#week-strip .ev{ display:flex; align-items:center; gap:5px; margin-top:4px; }
#week-strip .ev .tdot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--tc); }
#week-strip .ev .t{ font-size:9px; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the wiki: sticky entry list beside an article pane, the reference's
   internal shop-menu structure */
#wiki{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:26px; align-items:start; }
#wiki{ grid-template-columns:264px minmax(0,1fr); }
#wiki-nav{ position:sticky; top:120px; display:flex; flex-direction:column; gap:2px;
  max-height:calc(100vh - 160px); overflow-y:auto; padding-right:6px; }
.wk-group{ display:contents; }
.wk-entries{ display:flex; flex-direction:column; gap:2px; }
.wk-sec{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; background:none; border:0; color:inherit; text-align:left;
  opacity:.45; padding:16px 0 6px; cursor:default;
}
.wk-group:first-child .wk-sec{ padding-top:0; }
.wk-sec .wk-n{ display:none; }
/* the open entry sits on its own plate, same as a learning article,
   so the photograph behind never competes with reference text */
#wiki-article{
  max-width:72ch; padding:22px clamp(18px,2.2vw,30px) 18px;
  background:rgba(var(--ink-rgb),.62); border-radius:var(--radius);
  border-top:1px solid rgba(var(--paper-rgb),.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#wiki-article .kicker{ opacity:.5; padding-bottom:10px; }
#wiki-article .wk-lead{ font-size:17px; line-height:1.6; opacity:.95; }
#wiki-nav button{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 14px; border:0; cursor:pointer; text-align:left;
  border-radius:6px; background:rgba(var(--grey),.18); color:var(--paper);
  transition:all .15s linear;
}
#wiki-nav button .n{ opacity:.5; flex-shrink:0; }
@media (hover:hover){
  #wiki-nav button:not(.active):hover{ background:var(--paper); color:var(--ink); }
}
#wiki-nav button.active{ background:var(--paper); color:var(--ink); border-radius:0; }
#wiki-article h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em;
  text-transform:none; padding-bottom:14px;
}
#wiki-article p{
  font-size:15px; line-height:1.6; text-transform:none; letter-spacing:0;
  font-family:var(--font-body); max-width:58ch; opacity:.9; padding-bottom:14px;
}
#wiki-article .deeper{ opacity:.7; font-size:14px; }
#wiki-article .art-meta{ padding-top:8px; opacity:.5; }

/* plan calendar: hairline month grid, full width, navigable, and any
   day can take an event (held in localStorage for the demo) */
#plan-cal{ margin-bottom:34px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-bottom:12px; flex-wrap:wrap; }
.cal-head .cal-nav{ display:flex; gap:2px; }
#plan-cal .cal-title{ padding-bottom:10px; opacity:.6; }
.cal{ display:grid; grid-template-columns:repeat(7,1fr);
  border-top:1px solid rgba(var(--paper-rgb),.35);
  border-left:1px solid rgba(var(--paper-rgb),.2); }
.cal .dow{ padding:6px 8px; opacity:.5;
  border-bottom:1px solid rgba(var(--paper-rgb),.35);
  border-right:1px solid rgba(var(--paper-rgb),.2); }
.cal .day{ min-height:clamp(56px,9vh,104px); padding:8px 10px; position:relative;
  border-bottom:1px solid rgba(var(--paper-rgb),.2);
  border-right:1px solid rgba(var(--paper-rgb),.2);
  cursor:pointer; text-align:left; }
.cal .day .n{ opacity:.55; }
/* the + appears on the hovered day: any day can take an event */
.cal .day .add{ position:absolute; right:6px; bottom:4px; opacity:0;
  font-size:14px; line-height:1; padding:4px 6px;
  transition:opacity .15s linear; }
@media (hover:hover){
  .cal .day:hover{ background:rgba(var(--paper-rgb),.05); }
  .cal .day:hover .add{ opacity:.75; }
}
.cal .day:focus-visible{ outline:1px solid var(--paper); outline-offset:-1px; }
.cal .day:focus-visible .add{ opacity:.75; }
.cal .day.out .n{ opacity:.2; }
.cal .day.today-day .n{ opacity:1; border-bottom:1px solid var(--paper); }
/* the open day holds a bright top edge, the way an active pill goes square */
.cal .day.picked{ background:rgba(var(--paper-rgb),.09);
  box-shadow:inset 0 2px 0 var(--paper); }
.cal .ev{ display:flex; align-items:center; gap:5px; margin-top:5px; }
.cal .ev .tdot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--tc); }
.cal .ev .t{ font-size:9px; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* plan: simple phase list, big labels. Two columns beside the
   full-width calendar on wide screens. */
.phases{ list-style:none; }
@media (min-width:1000px){
  .phases{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px; }
  .phases li:nth-child(-n+2){ border-top:1px solid rgba(var(--paper-rgb),.35); }
}
.phases li{ display:flex; gap:22px; padding:20px 0; border-top:1px solid rgba(var(--paper-rgb),.35); }
.phases .when{ flex:0 0 90px; opacity:.6; padding-top:6px; }
.phases h3{ font-family:var(--font-display); font-size:26px; text-transform:none;
  letter-spacing:-.01em; padding-bottom:6px; }
.phases p{ font-size:14px; line-height:1.5; opacity:.85; text-transform:none;
  letter-spacing:0; font-family:var(--font-body); max-width:52ch; }

/* ------------------------------------------------------------
   Sections overlay: the USAL blur wash. Backdrop blur animates
   0 to 10px while a 40px frost sits inside; items stagger from
   the left; siblings dim on hover and on keyboard focus.
   ------------------------------------------------------------ */
#overlay{
  position:fixed; inset:0; z-index:20; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:opacity var(--dur-slow) var(--ease), backdrop-filter var(--dur-slow) var(--ease),
             -webkit-backdrop-filter var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
body.menu-open #overlay{
  opacity:1; visibility:visible; pointer-events:auto;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity var(--dur-slow) var(--ease), backdrop-filter var(--dur-slow) var(--ease),
             -webkit-backdrop-filter var(--dur-slow) var(--ease), visibility 0s;
}
#overlay .frost{ position:fixed; inset:0; background:rgba(var(--ink-rgb),.55);
  -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); }
#overlay .menu{ position:relative; z-index:1; padding:104px clamp(20px,5vw,44px) 40px; list-style:none; }
#overlay .menu li{
  opacity:0; transform:translateX(-20px);
  transition:opacity 350ms var(--ease), transform 350ms var(--ease);
}
body.menu-open #overlay .menu li{
  opacity:1; transform:none;
  transition-delay:calc(100ms + var(--i)*45ms);
}
#overlay .menu button{
  display:inline-block; position:relative; background:none; border:0; cursor:pointer;
  color:var(--paper); text-align:left;
  font-family:var(--font-display);
  font-size:clamp(36px,6vw,58px); line-height:1.16;
  text-transform:none; letter-spacing:-.01em;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#overlay .menu button:hover{ transform:translateX(20px); }
#overlay .menu button sup{
  position:absolute; top:7px; right:-46px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
}
/* dim-siblings on hover, and on VISIBLE keyboard focus only — plain
   :focus-within would fire on the programmatic focus that opens the
   menu and wash out the whole list */
#overlay .menu:hover button{ opacity:.5; }
#overlay .menu:hover li:hover button{ opacity:1; }
#overlay .menu:has(button:focus-visible) button{ opacity:.5; }
#overlay .menu button:focus-visible{ opacity:1; }

/* ------------------------------------------------------------
   Ask-the-hub: chat drawer from the right. First run shows the
   connect step (mock); after that, the thread. Hidden with
   visibility (not just transform) so it leaves the tab order.
   ------------------------------------------------------------ */
#chat{
  position:fixed; top:0; right:0; bottom:0; z-index:40;
  width:min(420px,100vw);
  background:rgba(var(--ink2-rgb),.88);
  -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);
  border-left:1px solid rgba(var(--paper-rgb),.15);
  transform:translateX(102%); visibility:hidden;
  transition:transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  display:flex; flex-direction:column;
}
body.chat-open #chat{
  transform:none; visibility:visible;
  transition:transform var(--dur-slow) var(--ease), visibility 0s;
}
#chat header{ position:static; padding:16px 18px; border-bottom:1px solid rgba(var(--paper-rgb),.12); }
#chat header .close{
  background:none; border:0; cursor:pointer; opacity:.5;
  padding:10px 14px; margin:-10px -14px;
}
#chat header .close:hover{ opacity:1; }

/* connect step: buttons are mockups; the note says so */
#connect{ padding:30px 22px; display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; min-height:0; }
#connect h2{ font-family:var(--font-display); font-size:26px; text-transform:none; letter-spacing:-.01em; }
#connect p{ font-size:13px; line-height:1.55; opacity:.75; text-transform:none; letter-spacing:0; }
.connect-btn{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--radius); cursor:pointer;
  border:1px solid rgba(var(--paper-rgb),.35); background:none;
}
.connect-btn:hover{ background:rgba(var(--paper-rgb),.08); }
.connect-btn b{ font-weight:400; }
#connect .fine{ opacity:.6; font-size:11px; }

#thread{ flex:1; overflow-y:auto; padding:18px; display:none; flex-direction:column; gap:10px; }
#thread .demo-note{ align-self:center; opacity:.5; padding-bottom:4px; }
#chat.connected #thread{ display:flex; }
#chat.connected #connect{ display:none; }
.msg{ max-width:85%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;
  text-transform:none; letter-spacing:0; font-family:var(--font-body); }
.msg.jaime{ align-self:flex-end; background:var(--paper); color:var(--ink); border-bottom-right-radius:4px; }
.msg.hub{ align-self:flex-start; background:rgba(var(--grey),.25); border-bottom-left-radius:4px; }
.msg .attach{ display:block; margin-top:6px; opacity:.6; font-family:var(--font-mono); font-size:11px; }
#chatform{ display:none; gap:8px; padding:14px; border-top:1px solid rgba(var(--paper-rgb),.12); }
#chat.connected #chatform{ display:flex; }
#chatform input{
  flex:1; background:rgba(var(--grey),.18); border:1px solid rgba(var(--paper-rgb),.2);
  border-radius:19px; padding:8px 14px; color:var(--paper); font-family:var(--font-body);
  font-size:16px; /* under 16px, iOS zooms the page on focus */
}
#chatform input::placeholder{ color:rgba(var(--paper-rgb),.55); }
#chatform button{ border:0; border-radius:19px; padding:0 16px; background:var(--paper); color:var(--ink); cursor:pointer; }
.channels{ padding:0 14px 14px; opacity:.6; font-size:10.5px; display:none; }
#chat.connected .channels{ display:block; }

/* ------------------------------------------------------------
   The preview pane: the selected record itself, on the right third
   of the Records view. Idle, it carries the latest frames.
   ------------------------------------------------------------ */
#record-pane{
  display:none;
  position:fixed; right:0; top:76px; bottom:44px; width:32%;
  padding:18px clamp(14px,2vw,22px) 0 20px; overflow-y:auto; z-index:12;
  background:rgba(var(--ink-rgb),.82);
  -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  border-left:1px solid var(--line-strong);
}
body[data-view="records"] #record-pane{ display:block; }
/* the list yields the right third rather than running underneath it */
body[data-view="records"] .view.records{ padding-right:calc(32% + 24px); }
@media (max-width:1100px){
  body[data-view="records"] .view.records{ padding-right:0; }
  /* a sheet from the bottom edge, carrying the same panel */
  body[data-view="records"] #record-pane{ display:none; }
  body[data-view="records"] #record-pane.open{
    display:block; top:auto; left:0; right:0; width:auto;
    max-height:76vh; bottom:0; z-index:46;
    border-left:0; border-top:1px solid var(--line-strong);
    border-radius:var(--radius) var(--radius) 0 0;
    padding:16px 18px calc(18px + env(safe-area-inset-bottom));
    animation:sheetUp 300ms var(--ease) both;
  }
  @keyframes sheetUp{ from{ transform:translateY(14px); opacity:0; } }
  #record-pane.open .rp-shots img{ height:120px; }
}
.rp-inner{ display:flex; flex-direction:column; gap:14px; padding-bottom:20px; }
.rp-kicker, .rp-hint{ opacity:.55; }
.rp-shots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rp-shots img{ width:100%; height:104px; object-fit:cover; border-radius:6px;
  animation:shotIn 320ms var(--ease) both; animation-delay:calc(var(--n,0)*45ms); }
.rp-shots.idle img{ height:88px; }
@keyframes shotIn{ from{ opacity:0; transform:scale(.98); } }
.rp-head{ display:flex; align-items:center; justify-content:space-between; }
.rp-head .chip{ display:flex; align-items:center; gap:7px; padding:3px 10px;
  border:1px solid rgba(var(--paper-rgb),.4); border-radius:999px; }
.rp-head .chip .tdot{ width:var(--dot); height:var(--dot); border-radius:50%; }
.rp-close{ background:none; border:0; cursor:pointer; color:inherit; opacity:.5;
  padding:8px 10px; margin:-8px -10px -8px 0; font-size:16px; line-height:1; }
.rp-close:hover{ opacity:1; }
.rp-date{ opacity:.6; }
.rp-title{ font-family:var(--font-display); font-weight:700; font-size:20px;
  line-height:1.25; letter-spacing:-.01em; }
.rp-excerpt{ font-size:14px; line-height:1.6; opacity:.85; }
.rp-spec{ display:grid; grid-template-columns:104px 1fr; gap:0;
  border-top:1px solid rgba(var(--paper-rgb),.25); }
.rp-spec span{ padding:7px 0; border-bottom:1px solid rgba(var(--paper-rgb),.12); }
.rp-spec .k{ opacity:.5; }
.rp-acts{ display:flex; flex-wrap:wrap; gap:6px; padding-top:4px; }
.rp-acts .pill{ height:30px; }

/* the selected row keeps a bright left edge */
.rec .row[aria-pressed="true"]{ box-shadow:inset 2px 0 0 var(--paper); padding-left:10px; }

/* the day view under the calendar */
#day-view{ border-top:1px solid var(--line-strong); margin:-14px 0 30px; padding:14px 0 0; }
#day-view[hidden]{ display:none; }
.dv-head{ display:flex; align-items:center; justify-content:space-between; opacity:.8; }
.dv-close{ background:none; border:0; cursor:pointer; color:inherit; opacity:.5;
  padding:6px 8px; margin:-6px -8px -6px 0; font-size:16px; line-height:1; }
.dv-close:hover{ opacity:1; }
.dv-list{ list-style:none; padding-top:10px; }
.dv-list li{ display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid rgba(var(--paper-rgb),.14); }
.dv-list .tdot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dv-list .dv-label{ flex:1; font-family:var(--font-body); font-size:14px;
  text-transform:none; letter-spacing:0; }
.dv-list .dv-kind{ opacity:.5; }
.dv-empty, .dv-recs{ opacity:.6; padding-top:10px; }
.dv-link{ background:none; border:0; cursor:pointer; color:inherit;
  text-decoration:underline; text-underline-offset:3px; font:inherit; }
.dv-acts{ padding-top:12px; }

/* ------------------------------------------------------------
   Ticker: USAL's marquee, carrying program status.
   ------------------------------------------------------------ */
#ticker{
  position:fixed; left:0; right:0; bottom:0; z-index:14;
  overflow:hidden; padding:10px 0;
  border-top:1px solid rgba(var(--paper-rgb),.2);
  background:linear-gradient(transparent, rgba(var(--ink-rgb),.85) 40%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#ticker .track{ display:flex; gap:0; width:max-content; animation:marq 40s linear infinite; }
#ticker:hover .track, #ticker:focus-within .track{ animation-play-state:paused; }
#ticker span{ white-space:nowrap; opacity:.65; }
#ticker span::after{ content:"( )"; margin:0 18px; opacity:.4; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------
   THE WALKTHROUGH. Not a modal: a ring lands on the real element
   and a fixed-size card explains it, so the button never moves.
   ------------------------------------------------------------ */
/* the offer: a small card in the corner, not a takeover. She lands on
   the hub first and this arrives afterward. */
#tour-ask{
  position:fixed; right:20px; bottom:56px; z-index:57; width:min(324px,calc(100vw - 32px));
  background:rgba(var(--ink2-rgb),.96);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  border:1px solid rgba(var(--paper-rgb),.2); border-radius:var(--radius);
  padding:16px 18px 14px;
  opacity:0; transform:translateY(10px);
  transition:opacity .28s linear, transform .28s var(--ease);
}
#tour-ask.in{ opacity:1; transform:none; }
#tour-ask[hidden]{ display:none; }
.ta-kicker{ opacity:.5; padding-bottom:8px; }
#ta-title{ font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-.01em; padding-bottom:7px; }
.ta-body{ font-family:var(--font-body); font-size:14px; line-height:1.55; opacity:.8; }
.ta-acts{ display:flex; align-items:center; gap:12px; padding-top:14px; }
.ta-yes{ background:var(--paper); color:var(--ink); border-radius:0; }
.ta-yes .dot{ background:var(--ink); border-color:var(--ink); }
.ta-no{ background:none; border:0; cursor:pointer; color:inherit; opacity:.5;
  text-decoration:underline; text-underline-offset:3px; padding:6px 0; }
.ta-no:hover{ opacity:1; }
@media (max-width:600px){ #tour-ask{ right:12px; left:12px; bottom:52px; width:auto; } }

#tour[hidden]{ display:none; }
#tour-block{ position:fixed; inset:0; z-index:58; }
#tour-ring{
  position:fixed; z-index:59; border-radius:8px; pointer-events:none;
  border:1px solid rgba(var(--paper-rgb),.85);
  box-shadow:0 0 0 9999px rgba(var(--ink-rgb),.76);
  transition:left 320ms var(--ease), top 320ms var(--ease),
             width 320ms var(--ease), height 320ms var(--ease), opacity 200ms linear;
}
#tour-card{
  position:fixed; z-index:60; width:min(360px,calc(100vw - 28px)); min-height:250px;
  display:flex; flex-direction:column;
  background:rgba(var(--ink2-rgb),.96);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  border:1px solid rgba(var(--paper-rgb),.2); border-radius:var(--radius);
  padding:18px 20px 16px;
  transition:top 320ms var(--ease), left 320ms var(--ease);
}
.tr-ticks{ display:flex; gap:4px; padding-bottom:16px; }
.tr-ticks i{ flex:1; height:2px; background:rgba(var(--paper-rgb),.2); transition:background .2s linear; }
.tr-ticks i.done{ background:rgba(var(--paper-rgb),.5); }
.tr-ticks i.now{ background:var(--paper); }
.tr-kicker{ opacity:.55; padding-bottom:10px; }
#tr-title{ font-family:var(--font-display); font-weight:700;
  font-size:23px; line-height:1.15; letter-spacing:-.01em; padding-bottom:10px; outline:none; }
.tr-body{ font-family:var(--font-body); font-size:15px; line-height:1.6; opacity:.85; }
.tr-demo{ display:flex; align-items:center; gap:14px; margin-top:14px;
  padding:10px 12px; border:1px solid rgba(var(--paper-rgb),.18); border-radius:6px; }
.tr-demo[hidden]{ display:none; }
/* the legend tracks the live pill: whichever rule is showing lights up */
.tr-demo .dm{ display:flex; align-items:center; gap:6px; font-size:11px;
  opacity:.35; transition:opacity .25s linear; }
.tr-demo .dm.on{ opacity:1; }
.tr-demo .dm .vis{ display:inline-flex; align-items:center;
  padding:0; border:0; background:none; }
.tr-foot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:20px; }
.tr-skip{ background:none; border:0; cursor:pointer; color:inherit; opacity:.5;
  text-decoration:underline; text-underline-offset:3px; padding:6px 0; }
.tr-skip:hover{ opacity:1; }
.tr-count{ margin-left:auto; opacity:.5; }
.tr-go{ background:var(--paper); color:var(--ink); border-radius:0; }
.tr-go .dot{ background:var(--ink); border-color:var(--ink); }
/* the ringed element pulses when the demo changes its state */
.demo-pulse{ animation:demoPulse 400ms var(--ease); }
@keyframes demoPulse{ 50%{ transform:scale(1.06); } }

/* ------------------------------------------------------------
   THE COMPOSER. The hub's own input surface: what she adds to the
   wall, and what she puts on the calendar.
   ------------------------------------------------------------ */
#composer{ position:fixed; inset:0; z-index:55; display:flex;
  align-items:center; justify-content:center; padding:20px; }
#composer[hidden]{ display:none; }
.cp-frost{ position:absolute; inset:0; background:rgba(var(--ink-rgb),.6);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.cp-panel{ position:relative; width:min(560px,100%);
  background:rgba(var(--ink2-rgb),.94);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  border:1px solid rgba(var(--paper-rgb),.18); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:14px;
  animation:wzIn 220ms var(--ease); }
.cp-panel .kicker{ opacity:.6; }
#cp-text{ width:100%; resize:vertical;
  background:rgba(var(--grey),.16); color:var(--paper);
  border:1px solid rgba(var(--paper-rgb),.2); border-radius:var(--radius);
  padding:12px 14px; font-family:var(--font-body); font-size:16px; line-height:1.5; }
#cp-text::placeholder{ color:rgba(var(--paper-rgb),.45); }
.cp-row{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-row .pill{ height:30px; }
/* the visibility dots wherever they appear outside a row: the
   composer's chips and the walkthrough's explainer */
.cp-row .vdot{ width:var(--dot); height:var(--dot); border-radius:50%;
  border:1px solid currentColor; flex-shrink:0; }
.cp-row .vdot.private{ background:currentColor; }
.cp-row .vdot.team{
  background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.cp-actions{ display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
#cp-save{ background:var(--paper); color:var(--ink); border-radius:0; }
#cp-save .dot{ background:var(--ink); border-color:var(--ink); }

/* ------------------------------------------------------------
   Responsive + reduced motion
   ------------------------------------------------------------ */
@media (max-width:720px){
  /* the mobile header: wordmark on its own line, then Sections and
     Ask-the-hub as one full-width segmented pair in the same
     rectangle language as desktop (no lozenges, no orphaned arrow) */
  header{ flex-wrap:wrap; row-gap:8px; }
  #wordmark{ font-size:19px; flex-basis:100%; text-align:left; }
  .pill{ height:36px; border-radius:6px; }
  .pill-split{ flex:1; }
  .pill-split .cell{ height:36px; border-radius:6px; flex:1; justify-content:center; }
  .pill-split .arrowcell{ display:none; }     /* the arrow is a desktop key */
  #chatBtn{ flex:1; justify-content:center; }
  #inst-capture{ display:none; }
  main{ padding-top:116px; }
  .home .greeting{ padding-top:4vh; }
  .row .date{ flex-basis:44px; }
  .row .vis{ flex-basis:16px; }
  .status{ flex-basis:16px; }
  /* labels leave the layout but stay in the accessibility tree */
  .row .vis span:last-child, .row .chip .chip-label, .status span:last-child{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .hide-sm{ display:none; }
  .panel{ gap:14px 26px; }
  /* the contents rows stack: kicker over title over dek */
  .cover.lead h3{ font-size:32px; }
  .cover:not(.lead){ flex-direction:column; align-items:flex-start; gap:7px;
    position:relative; padding-right:44px; }
  .cover:not(.lead) .kicker{ flex:0 0 auto; }
  .cover:not(.lead) .dekline{ flex:0 0 auto; }
  .cover:not(.lead) .cover-folio{ position:absolute; right:0; top:15px; }
  /* the calendar keeps its grid but tightens */
  .cal-head{ gap:8px; }
  .cal .day .add{ opacity:.6; }     /* no hover on touch: always show the + */
  /* the walkthrough and composer fill the screen on a phone */
  .wz-panel, .cp-panel{ width:100%; max-height:92vh; padding:22px 18px 18px; }
  #wz-body h2{ font-size:24px; }
  .art-head h1{ font-size:40px; }
  .art-col p.lead::first-letter{ font-size:2.8em; }
  #article-rail{ display:none !important; }   /* the topbar hairline reads instead */
  .art-turn{ flex-direction:column; }
  .art-turn .pill{ max-width:100%; }
  /* the wiki stacks, and the shelf collapses: seven section rows, and
     only the one you open shows its entries */
  #wiki{ grid-template-columns:1fr; gap:16px; }
  #wiki-nav{ position:static; max-height:none; overflow:visible; padding-right:0; gap:0; }
  .wk-group{ display:block; border-bottom:1px solid rgba(var(--paper-rgb),.14); }
  .wk-sec{
    opacity:.8; cursor:pointer; padding:15px 2px;
    transition:opacity .15s linear;
  }
  .wk-group:first-child .wk-sec{ padding-top:15px; }
  .wk-group.open .wk-sec{ opacity:1; }
  .wk-sec .wk-n{ display:block; opacity:.4; }
  /* the count rotates into a minus when the shelf is open */
  .wk-sec::after{
    content:"+"; font-size:15px; line-height:1; opacity:.5;
    transition:transform .2s var(--ease);
  }
  .wk-group.open .wk-sec::after{ content:"–"; }
  .wk-entries{ display:none; padding:2px 0 12px; }
  .wk-group.open .wk-entries{ display:flex; }
  #wiki-nav .wk-entries button{ width:100%; }
  /* filters become a wrapped row above the list (the fr squeeze is a
     desktop move; phones get the chips directly) */
  #filter-track, #filter-track.open{ display:block; }
  #filter-cell{ display:none; }
  #filter-track.open #filter-cell{ display:block; }
  #filter-panel{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px; padding:0 0 14px; }
  /* the week strip keeps its hairlines and scrolls sideways */
  #week-strip{ grid-template-columns:repeat(7,minmax(88px,1fr)); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* calendar days go dot-only; tapping the day opens that date's records */
  .cal .ev .t{ display:none; }
  .cal .day{ min-height:44px; padding:5px 6px; }
  /* spec sheet labels need less room at 11px mono */
  .rec.open .spec{ grid-template-columns:96px 1fr; }
}
@media (prefers-reduced-motion:reduce){
  #scene .layer{ transition:none; }
  #ticker .track{ animation:none; }
  #capture-rail .track{ animation:none; }
  .notice{ animation:none; }
  .wz-panel, .cp-panel{ animation:none; }
  .art-col .ev{ opacity:1; transform:none; }
  .view{ animation:none !important; }
  .index .row{ animation:none; }
  #filter-track{ transition:none; }
  #overlay .menu li{ transition-delay:0ms !important; }
  *{ transition-duration:1ms !important; transition-delay:0ms !important; }
}