/* Marginalia components and story layout (docs/design-direction.md sections 5 and 6).
   Tokens only. Loaded after the legacy stylesheets. */

/* ---- Phase colour, shared by the clock, round line and Now bar ---- */
.is-writing{--u-phase-colour:var(--u-phase-write)}
.is-review{--u-phase-colour:var(--u-phase-review)}
.is-voting,.is-runoff,.is-sets,.is-final{--u-phase-colour:var(--u-phase-vote)}
.is-held,.is-rejected,.is-scheduled{--u-phase-colour:var(--u-phase-held)}
.is-published{--u-phase-colour:var(--u-violet)}
.u-dot{display:inline-block;flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--u-phase-colour,var(--u-violet))}

/* ---- Round clock (6.1) ---- */
.u-clock{display:grid;justify-items:center;gap:var(--u-space-3);margin:0}
.u-clock-dial{position:relative;width:min(100%,220px);aspect-ratio:1}
.u-clock-dial svg{display:block;width:100%;height:100%;overflow:visible}
.u-clock-ticks{fill:none;stroke:var(--u-rule);stroke-width:5}
.u-clock-arc{fill:none;stroke-width:12}
.u-clock-arc.write{stroke:var(--u-phase-write)}
.u-clock-arc.review{stroke:var(--u-phase-review)}
/* A crowded round's reading sets and final (decision 59) are two voting arcs, told apart by the gap and the legend. */
.u-clock-arc.vote,.u-clock-arc.sets,.u-clock-arc.final{stroke:var(--u-phase-vote)}
.u-clock-empty{fill:none;stroke:var(--u-rule);stroke-width:12}
.u-clock-held{fill:none;stroke:var(--u-phase-held);stroke-width:3;stroke-dasharray:7 8}
.u-clock-elapsed{fill:none;stroke:var(--u-ink);stroke-width:2;stroke-linecap:round}
.u-clock-mark{fill:var(--u-violet);font:700 15px var(--u-font-ui)}
.u-clock-hand circle{fill:var(--u-page);stroke:var(--u-ink);stroke-width:3}
.u-clock-centre{position:absolute;inset:20%;display:grid;place-content:center;justify-items:center;text-align:center;gap:2px}
.u-clock-phase{font:600 12px/1.3 var(--u-font-ui);letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--u-phase-colour)}
.u-clock-left{font:400 26px/1.1 var(--u-font-display);font-variant-numeric:tabular-nums;color:var(--u-ink)}
.u-clock-centre small{font-size:12px;line-height:1.35;color:var(--u-pencil)}
.u-clock-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:12px;line-height:1.5;color:var(--u-pencil)}
.u-clock-legend span{display:inline-flex;align-items:center;white-space:nowrap}
.u-clock-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.u-clock-legend i.write{background:var(--u-phase-write)}
.u-clock-legend i.review{background:var(--u-phase-review)}
.u-clock-legend i.vote,.u-clock-legend i.sets,.u-clock-legend i.final{background:var(--u-phase-vote)}
.u-clock-note{margin:0;font-size:12px;color:var(--u-pencil);text-align:center}

/* ---- Story page: white page on the canvas, with the margin beside it (5.2) ---- */
.u-story{display:grid;gap:var(--u-space-8);align-items:start;margin-top:var(--u-space-10)}
@media(min-width:760px){.u-story{grid-template-columns:minmax(0,1fr) 220px;gap:var(--u-space-8)}}
@media(min-width:1100px){.u-story{grid-template-columns:minmax(0,1fr) var(--u-margin);gap:var(--u-space-10)}}
.u-story-page{min-width:0;background:var(--u-page);border-radius:var(--u-radius-md);box-shadow:var(--u-shadow-1);padding:clamp(20px,4vw,48px)}
.u-story-page .section-heading h2{margin-top:6px}
.u-story-page .story-prose{max-width:var(--u-measure);font-size:var(--u-text-prose);line-height:var(--u-leading-prose)}
.u-story-page .story-prose p{line-height:var(--u-leading-prose)}
.u-story-page .reader-next{background:var(--u-violet-soft);border:0;border-radius:var(--u-radius-md)}
.u-story-page .story-boundary{border-top-color:var(--u-rule)}
.u-margin{display:grid;gap:var(--u-space-5);min-width:0}
@media(min-width:760px){.u-margin{position:sticky;top:var(--u-space-6)}}
.u-margin-card{background:var(--u-page);border-radius:var(--u-radius-md);padding:var(--u-space-5) var(--u-space-4)}
.u-notes{display:grid;gap:var(--u-space-4);padding:0 var(--u-space-1)}
.u-note{margin:0;font:italic 15px/1.55 var(--u-font-prose);color:var(--u-pencil)}
.u-note b{display:block;margin-bottom:2px;font:600 12px/1.4 var(--u-font-ui);font-style:normal;letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--u-ink)}
.u-notes .text-link{justify-self:start}

/* ---- Round line in the story header, and context lines on sub-pages ---- */
.u-hero-round{display:grid;gap:var(--u-space-4);margin-top:var(--u-space-6)}
.u-roundline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:15px;line-height:1.5;color:var(--u-pencil)}
.u-roundline b{color:var(--u-ink);font-weight:600}
.u-hero-actions{display:flex;flex-wrap:wrap;gap:var(--u-space-3)}
.u-context{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 var(--u-space-6);font-size:14px;line-height:1.5;color:var(--u-pencil)}
.u-context .back-link{margin:0;font-size:14px;color:var(--u-violet);font-weight:600}
.u-context b{color:var(--u-ink);font-weight:600}
.page-intro+.content-grid,.page-intro+.empty-state,.page-intro+.shelf-grid{margin-top:var(--u-space-8)}
.sidebar>.u-margin-card{grid-column:1/-1}

/* ---- Word-range ruler (6.5) ---- */
.u-ruler{display:grid;gap:4px;padding:12px 23px 2px}
.u-ruler-track{position:relative;height:12px;border-radius:var(--u-radius-sm);background:var(--u-canvas);overflow:hidden}
.u-ruler-band{position:absolute;top:0;bottom:0;left:25%;right:25%;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--u-violet) 22%,transparent) 0 5px,transparent 5px 9px)}
.u-ruler-fill{position:absolute;left:0;top:3px;bottom:3px;border-radius:2px;background:var(--u-pencil);transition:width var(--u-dur-base) var(--u-ease-out),background-color var(--u-dur-base)}
.u-ruler.is-in .u-ruler-fill{background:var(--u-violet)}
.u-ruler.is-over .u-ruler-fill{background:var(--u-danger)}
.u-ruler-scale{position:relative;height:18px;font-size:12px;line-height:18px;color:var(--u-pencil);font-variant-numeric:tabular-nums}
.u-ruler-scale span{position:absolute;top:0;transform:translateX(-50%)}
.u-ruler-scale span:nth-child(1){left:0;transform:none}
.u-ruler-scale span:nth-child(2){left:25%}
.u-ruler-scale span:nth-child(3){left:75%}
.u-ruler-scale span:nth-child(4){left:auto;right:0;transform:none}
.u-count{font-size:13px;font-variant-numeric:tabular-nums;color:var(--u-pencil)}
.u-count.over-limit{color:var(--u-danger)}
.branch-form .u-ruler{padding-inline:0}
@media(max-width:760px){.editor-panel .u-ruler{padding-inline:18px}#reader-editor .u-ruler{padding-inline:14px}}

/* ---- Ballot (6.6): full text, no accordions; one at a time below 1100px ---- */
.u-ballot-tabs,.u-ballot-nav{display:none}
.u-ballot .candidate-prose{padding:6px 24px 10px;font-size:var(--u-text-prose-compact);line-height:1.65}
.u-ballot .candidate-prose p{line-height:1.65}
.u-ballot-card.is-read .u-words::after{content:' · read ✓';color:var(--u-success);font-weight:600}
/* Each card's picks (decision 59): the favourite, then the optional runner-up, in one fieldset. */
.u-ballot-picks{min-width:0;margin:0;padding:0;border:0;border-top:1px solid var(--u-rule);background:var(--u-canvas)}
.u-ballot-picks .choice-label+.choice-label{border-top:1px solid var(--u-rule)}
.u-ballot-picks .u-runner-up{min-height:44px;padding-block:10px;color:var(--u-pencil)}
.u-ballot-picks .u-runner-up:has(input:checked){color:var(--u-ink);font-weight:600}
.u-ballot .other-choices{display:grid;gap:8px;border:0;padding:0;margin:var(--u-space-6) 0 0;background:transparent}
.u-ballot .other-choices legend{padding:0 0 8px;margin:0;font:600 12px/1.4 var(--u-font-ui);letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--u-pencil)}
.u-ballot .other-choices .choice-label{background:var(--u-page);border:1px solid var(--u-rule);border-radius:var(--u-radius-md);padding:14px 18px}
.u-ballot .other-choices .choice-label:has(input:checked){border-color:var(--u-violet);box-shadow:inset 0 0 0 1px var(--u-violet)}
.u-ballot-bar{position:sticky;bottom:max(8px,env(safe-area-inset-bottom,0px));z-index:var(--u-z-sticky);margin-top:var(--u-space-5);padding:14px 18px;background:var(--u-page);border:1px solid var(--u-rule);border-radius:var(--u-radius-md);box-shadow:var(--u-shadow-2)}
.u-ballot-progress{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--u-pencil)}
.u-ballot-progress:empty{display:none}
@media(max-width:1099px){
  /* A title ballot (decision 61) can hold any number of cards, so the letter tabs fill a grid of equal
     cells, onto more rows when needed. auto-fit drops the empty cells, so a short ballot's tabs share
     the whole row, while a lone last tab on a further row keeps the cells' width. */
  .u-ballot[data-tabbed] .u-ballot-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;margin-bottom:12px}
  .u-ballot-tab{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--u-rule);border-radius:var(--u-radius-sm);background:var(--u-page);font:700 14px var(--u-font-ui);color:var(--u-pencil)}
  .u-ballot-tab[aria-selected="true"]{border-color:var(--u-ink);color:var(--u-ink)}
  .u-ballot-tab .u-tick{visibility:hidden;color:var(--u-success)}
  .u-ballot-tab.is-read .u-tick{visibility:visible}
  .u-ballot-tab.is-chosen{background:var(--u-violet);border-color:var(--u-violet);color:var(--u-on-violet)}
  .u-ballot-tab.is-chosen .u-tick{color:var(--u-on-violet)}
  .u-ballot[data-tabbed] .u-ballot-card:not(.is-current){display:none}
  .u-ballot[data-tabbed] .u-ballot-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
  .u-ballot-nav [data-ballot-position]{font-size:13px;color:var(--u-pencil);font-variant-numeric:tabular-nums}
}
@media(max-width:760px){
  .u-ballot .candidate-prose{padding-inline:18px}
  .u-ballot-bar{flex-direction:row;align-items:center;gap:12px;padding:10px 12px 10px 14px}
  .u-ballot-bar>div{min-width:0}
  .u-ballot-bar p{display:none}
  .u-ballot-bar strong{font-size:14px}
  .u-ballot-bar .button{flex-shrink:0;padding-inline:14px}
}

/* ---- The possibility preview under the story (6.4) ---- */
.u-story-page #reader-possibilities .possibility-passage{margin-top:12px;padding:4px 18px 16px;background:var(--u-page);border-radius:var(--u-radius-md)}

/* ---- Reveal (6.7) ---- */
.u-reveal-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.author-credit .u-ink-avatar{background:var(--u-page);border:2px solid var(--ink);color:var(--ink);font-size:13px;font-weight:700}
.u-also{display:grid;gap:12px;margin-top:var(--u-space-8)}
.u-also>h3{margin:0;font:600 12px/1.4 var(--u-font-ui);letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--u-pencil)}
.u-also-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;background:var(--u-page);border:1px solid var(--u-rule);border-radius:var(--u-radius-md)}
.u-ink-dot{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--u-page);color:var(--ink);font:700 12px var(--u-font-ui)}
.u-also-card h4{margin:0;font:400 20px/1.25 var(--u-font-display)}
.u-also-by{margin:2px 0 0;font-size:14px;color:var(--u-pencil)}
.u-also-count{margin:8px 0 4px;font-size:15px}
.u-also-count strong{color:var(--ink)}
.u-also-read summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:600;color:var(--u-violet)}
.u-also-read .candidate-prose{padding:0 0 8px;font-size:var(--u-text-prose-compact);line-height:1.65}
.u-also-actions{display:flex;flex-wrap:wrap;gap:8px}
.u-also .fine-print{margin:0}
.result-track{height:8px}
.result-track span{background:var(--ink,var(--u-violet))}
.winner-tag{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--u-violet)}
@keyframes u-ink-in{from{opacity:0;filter:blur(5px);transform:translateY(5px)}}
@keyframes u-develop{from{filter:blur(16px) grayscale(1) brightness(.45) contrast(.85);transform:scale(1.05)}}
@keyframes u-mark{from{opacity:0;transform:scale(.3)}}
.u-reveal.is-playing .revealed-passage .author-credit{animation:u-ink-in .6s var(--u-ease-out) both}
.u-reveal.is-playing .revealed-passage .story-prose p{animation:u-ink-in .9s var(--u-ease-out) both;animation-delay:calc(.3s + var(--i,0) * 170ms)}
.u-reveal .revealed-passage .story-prose p:nth-child(2){--i:1}.u-reveal .revealed-passage .story-prose p:nth-child(3){--i:2}.u-reveal .revealed-passage .story-prose p:nth-child(4){--i:3}.u-reveal .revealed-passage .story-prose p:nth-child(5){--i:4}.u-reveal .revealed-passage .story-prose p:nth-child(6){--i:5}.u-reveal .revealed-passage .story-prose p:nth-child(7){--i:6}.u-reveal .revealed-passage .story-prose p:nth-child(8){--i:7}.u-reveal .revealed-passage .story-prose p:nth-child(9){--i:8}.u-reveal .revealed-passage .story-prose p:nth-child(n+10){--i:9}
.u-reveal.is-playing .story-art img{animation:u-develop 2.8s var(--u-ease-out) both}
/* Approved illustrations in the core (decision 47): a 3:2 plate, and the develop effect once per viewer outside the reveal. */
.core-plate{aspect-ratio:3/2;min-height:0;max-height:none}
/* An uploaded image's credit ("Illustration by …"), under its caption or on its own. */
.art-credit{display:block;margin-top:7px;font:400 12px/1.6 var(--u-font-ui);font-style:normal;color:var(--u-on-art-soft)}
.art-credit:first-child{margin-top:0}
.story-art.is-developing img{animation:u-develop 2.8s var(--u-ease-out) both}
.u-reveal.is-playing .u-also-card{animation:u-ink-in .7s var(--u-ease-out) both;animation-delay:calc(1.4s + var(--i,0) * 220ms)}
.u-reveal.is-playing .u-clock-mark{transform-box:fill-box;transform-origin:center;animation:u-mark .6s var(--u-ease-press) both}

/* ---- Night page toggle (4.2) and story tint (4.5) ---- */
.u-page-toggle{display:inline-grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--u-rule);border-radius:50%;background:var(--u-page);color:var(--u-ink);transition:background var(--u-dur-fast)}
.u-page-toggle:hover{background:var(--u-violet-soft)}
.u-page-toggle .u-sun,:root[data-page="night"] .u-page-toggle .u-moon{display:none}
:root[data-page="night"] .u-page-toggle .u-sun{display:block}
:root[data-page="night"] .story-art{box-shadow:0 0 0 1px var(--u-rule)}
.u-tinted .hero-copy h1 em{color:var(--u-story-accent)}
@media(max-width:480px){
  /* Drawn at 36px to keep the phone header on two rows; the ::after keeps a 44px tap target. */
  .u-page-toggle{position:relative;width:36px;height:36px}
  .u-page-toggle::after{content:"";position:absolute;inset:-4px}
  .site-header .profile{gap:8px}
  .site-header{column-gap:10px}
}
@media(max-width:370px){
  .site-header .wordmark{font-size:24px}
  .site-header{column-gap:8px}
  .site-header .profile{gap:6px}
  .site-header .sample-pill{width:min-content;max-width:none;padding:4px 6px;letter-spacing:.02em}
}

/* ---- Shared ---- */
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Contributor thread (6.3) ---- */
.u-thread{position:relative;margin-top:var(--u-space-6)}
.u-passage{position:relative;display:grid;grid-template-columns:var(--u-thread) minmax(0,1fr)}
.u-passage:not(.u-end)::before,.u-dinkus::before{content:"";position:absolute;left:calc(var(--u-thread) / 2 - 1px);top:0;bottom:0;width:2px;background:var(--u-rule)}
.u-thread>.u-passage:first-child::before{top:18px}
.u-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.u-node-dot{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--u-page);color:var(--ink);font:700 12px var(--u-font-ui)}
.u-node-dot.is-open{border-style:dashed;border-color:var(--u-violet);color:var(--u-violet);font:400 20px/1 var(--u-font-display)}
.u-passage.is-fork .u-node-dot{box-shadow:0 0 0 3px var(--u-page),0 0 0 5px var(--ink)}
a.u-node-dot{text-decoration:none;transition:background-color var(--u-dur-fast) var(--u-ease-out)}
a.u-node-dot:hover{background:var(--u-canvas)}
.u-possibilities-toggle{min-width:40px;min-height:44px;padding:2px 6px;border:1px dashed var(--ink);border-radius:var(--u-radius-pill);background:var(--u-page);color:var(--ink);font:700 12px var(--u-font-ui)}
.u-possibilities-toggle[aria-expanded="true"]{border-style:solid;background:var(--ink);color:var(--u-page)}
.u-passage-body{min-width:0}
.u-passage .passage-label{margin:6px 0 16px}
.u-dinkus{position:relative;display:grid;grid-template-columns:var(--u-thread) minmax(0,var(--u-measure));padding:14px 0}
.u-dinkus span{grid-column:2;text-align:center;color:var(--ink);font-size:18px;line-height:1}
.u-credit{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:2px 0 0;font:14px/1.5 var(--u-font-ui);color:var(--u-pencil)}
.u-credit b{font-weight:600;color:var(--u-ink)}
.u-credit .passage-branch{min-height:44px;padding:0;font-size:13px}
.u-possibilities{display:grid;gap:6px;margin:8px 0 4px;padding:12px 14px;border-radius:var(--u-radius-md);background:var(--u-canvas);font:14px/1.5 var(--u-font-ui)}
.u-possibilities[hidden]{display:none}
.u-possibilities span{color:var(--u-pencil)}
.u-possibilities a{font-weight:600;color:var(--u-ink);text-decoration:underline;text-underline-offset:3px}
.u-fork{display:inline-block;margin:6px 0 0;font:600 12px/1.4 var(--u-font-ui);letter-spacing:var(--u-tracking-kicker);text-transform:uppercase;color:var(--ink)}
.u-end{margin-top:var(--u-space-2)}
.u-end .story-boundary{align-items:flex-start;margin:6px 0 18px;padding-top:0;border-top:0;text-align:left}
.u-end .story-boundary>span:first-child{display:none}
.u-thread>.u-passage:first-child .u-passage-body>p:first-of-type::first-letter{float:left;padding:8px 8px 0 0;font-family:var(--u-font-display);font-size:64px;line-height:.85;color:var(--u-story-accent)}
.branch-reader .u-thread{margin-top:var(--u-space-4)}
@media(max-width:759px){
  .u-node-dot{width:28px;height:28px}
  .u-possibilities-toggle{min-width:34px;padding:2px 3px}
  .u-thread>.u-passage:first-child .u-passage-body>p:first-of-type::first-letter{font-size:54px}
}

/* ---- Ink stamps (6.8) ---- */
.u-stamp-defs{position:absolute;width:0;height:0;overflow:hidden}
.u-stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px 14px;margin-top:var(--u-space-5)}
.u-stamp{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;color:var(--ink)}
.u-stamp-art{position:relative;width:92px;height:92px}
.u-stamp svg{width:100%;height:100%;overflow:visible;transform:rotate(-8deg)}
.u-stamp-ring{fill:none;stroke:currentColor;stroke-width:3.2}
.u-stamp-inner{fill:none;stroke:currentColor;stroke-width:1.2}
.u-stamp-seal{fill:currentColor;font-family:var(--u-font-ui);font-weight:700}
.u-stamp-glyph{fill:currentColor;font-family:var(--u-font-display);font-size:34px}
.u-stamp-todo{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:4 5}
.u-stamp.is-todo{color:var(--u-pencil)}
.u-stamp.is-todo svg{transform:none;opacity:.55}
.u-stamp b{font-size:14px;line-height:1.3;color:var(--u-ink)}
.u-stamp small{font-size:12px;line-height:1.4;color:var(--u-pencil)}
.u-stamp.is-pressing svg{animation:u-press .5s var(--u-ease-press) both;animation-delay:var(--press-delay,0ms)}
.u-stamp.is-pressing .u-stamp-art::after{content:"";position:absolute;inset:4px;border:3px solid var(--ink);border-radius:50%;opacity:0;animation:u-ring .9s ease-out both;animation-delay:calc(var(--press-delay,0ms) + 320ms)}
@keyframes u-press{0%{transform:scale(1.06) rotate(-11deg);opacity:.5}55%{transform:scale(.99) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-8deg)}}
@keyframes u-ring{from{transform:scale(.85);opacity:.55}to{transform:scale(1.45);opacity:0}}

/* Small earned stamp: rings and glyph beside its name */
.u-stamp-mark{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:var(--u-ink)}
.u-stamp-mark svg{width:32px;height:32px;flex-shrink:0;overflow:visible;transform:rotate(-8deg);color:var(--ink)}
.u-stamp-mark .u-stamp-glyph{font-size:48px}

/* ---- Writer card (6.19): opacity only, removed under reduced motion by the duration token ---- */
.u-writer-card{position:absolute;z-index:calc(var(--u-z-nowbar) + 10);width:min(288px,calc(100vw - 32px));display:grid;gap:12px;padding:16px;background:var(--u-page);color:var(--u-ink);border:1px solid var(--u-rule);border-radius:var(--u-radius-md);box-shadow:var(--u-shadow-2);font:14px/1.5 var(--u-font-ui);opacity:0;transition:opacity var(--u-dur-fast) var(--u-ease-out)}
.u-writer-card[hidden]{display:none}
.u-writer-card.is-open{opacity:1}
.u-writer-card-head{display:flex;align-items:center;gap:12px}
.u-writer-card-head .u-ink-dot{flex-shrink:0}
.u-writer-card-head div{display:grid;min-width:0}
.u-writer-card-head b{font:400 var(--u-display-s)/1.3 var(--u-font-display);overflow-wrap:anywhere}
.u-writer-card-head small{font-size:13px;color:var(--u-pencil)}
.u-writer-card-counts{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;color:var(--u-pencil)}
.u-writer-card-counts strong{font-variant-numeric:tabular-nums;color:var(--u-ink)}
.u-writer-card-stamps{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.u-writer-card .text-link{justify-self:start}

/* ---- Library card (6.9) ---- */
.u-card{margin:var(--u-space-8) 0 var(--u-space-6);padding:20px 22px 16px;background:var(--u-page);border-top:6px solid var(--u-violet-soft);border-radius:var(--u-radius-md);box-shadow:var(--u-shadow-1)}
.u-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:6px 0 14px}
.u-card-head h2{margin:0;font:400 24px/1.2 var(--u-font-display)}
.u-card-head span{font-size:14px;color:var(--u-pencil)}
.u-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:460px;margin:0;padding:0;list-style:none}
.u-cells li{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--u-rule);border-radius:var(--u-radius-sm)}
.u-cells li small{position:absolute;top:3px;left:5px;font:600 12px/1.2 var(--u-font-ui);color:var(--u-pencil)}
.u-cells li.is-gap{border-style:dashed}
.u-cells li.is-current{border:2px solid var(--u-violet);animation:none}
@keyframes u-breathe{50%{box-shadow:0 0 0 4px var(--u-violet-soft)}}
.u-marks{display:flex;align-items:center;gap:3px;margin-top:10px}
.u-mark{display:inline-block;flex-shrink:0}
.u-mark.wrote{width:10px;height:10px;border-radius:2px;background:var(--u-contrib-cobalt)}
.u-mark.voted{width:10px;height:10px;border-radius:50%;background:var(--u-contrib-teal)}
.u-mark.selected{font-size:16px;font-weight:700;line-height:1;color:var(--u-contrib-coral)}
.u-card-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 6px;font-size:13px;color:var(--u-pencil)}
.u-card-legend span{display:inline-flex;align-items:center;gap:6px}
.u-card .help-text{margin:0}
@media(max-width:400px){.u-cells{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---- Leaderboards, writer rows and profiles (6.10, 6.11) ---- */
.leaderboard-list .rank{display:grid;justify-items:center;line-height:1}
.leaderboard-list .rank small{margin-top:2px;font:600 12px var(--u-font-ui);color:var(--u-pencil)}
.leaderboard-list li.is-you{padding-inline:12px;background:var(--u-violet-soft);border-radius:var(--u-radius-md)}
.leaderboard-list .u-ink-dot,.writer-row .u-ink-dot{flex-shrink:0}
.u-ink-dot.is-large{width:58px;height:58px;border-width:3px;font-size:20px}

/* ---- Status chips (6.17): the word always shows, so colour never carries the meaning alone ---- */
.u-status{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border:1px solid transparent;border-radius:var(--u-radius-pill);font:600 13px/1.3 var(--u-font-ui);white-space:nowrap;vertical-align:middle}
.u-status.is-warning{background:var(--u-warning-soft);color:var(--u-warning)}
.u-status.is-success{background:var(--u-success-soft);color:var(--u-success)}
.u-status.is-danger{background:var(--u-danger-soft);color:var(--u-danger)}
.u-status.is-hold{background:var(--u-hold-soft);color:var(--u-hold);border:1px dashed var(--u-hold)}
.u-status.is-neutral{background:var(--u-page);color:var(--u-pencil);border-color:var(--u-rule)}

/* ---- "Read when ready" (6.14): an ink pill that waits for the reader; nothing moves ---- */
.u-live{display:flex;align-items:center;gap:4px 12px;padding:6px 6px 6px 20px;background:var(--u-ink);color:var(--u-page);border-radius:var(--u-radius-pill);box-shadow:var(--u-shadow-2);font:14px/1.4 var(--u-font-ui)}
.u-live p{display:flex;flex-wrap:wrap;gap:0 6px;margin:0}
.u-live b{font-weight:600}
.u-live p span::before{content:"· "}
.u-live-show{flex-shrink:0;min-height:44px;padding:0 18px;border:0;border-radius:var(--u-radius-pill);background:var(--u-page);color:var(--u-ink);font:700 14px var(--u-font-ui);cursor:pointer}
.u-live-show:hover{background:var(--u-violet-soft)}
.u-live-close{flex-shrink:0;width:44px;height:44px;margin-left:-8px;border:0;border-radius:50%;background:transparent;color:var(--u-page);font:400 22px/1 var(--u-font-ui);cursor:pointer}
.u-live :focus-visible{outline:3px solid var(--u-page);outline-offset:2px}
@media(max-width:479px){.u-live{border-radius:var(--u-radius-lg);padding-left:16px}.u-live p{display:grid}.u-live p span::before{content:none}}

/* ---- Now bar (6.2): phones only ---- */
.u-now{display:none}
@media(max-width:759px){
  .u-now{position:fixed;left:0;right:0;bottom:0;z-index:var(--u-z-nowbar);display:flex;align-items:center;gap:var(--u-space-3);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--u-page);border-top:1px solid var(--u-rule);box-shadow:var(--u-shadow-2)}
  .u-now-text{flex:1;min-width:0;display:grid;line-height:1.35}
  .u-now-text b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
  .u-now-text span{font-size:12px;color:var(--u-pencil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-now .button{flex-shrink:0;padding:10px 14px;font-size:14px}
  body:has(.u-now){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  body:has(.u-now) #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(textarea:focus-within) .u-now{display:none}
  .u-hero-primary{display:none}
  .u-story{margin-top:var(--u-space-6)}
  .u-margin .u-clock-dial{width:min(100%,180px)}
}

/* A quiet stamp press: recognition stays visible without a decorative ripple. */
.u-stamp.is-pressing .u-stamp-art::after{display:none}
.u-ballot-choice-summary{font-size:13px;margin:5px 0 0}
.u-ballot[data-unsaved="true"] .u-ballot-bar strong{color:var(--u-warning)}
.u-ballot-card{scroll-margin-top:24px}