/* design/site/type.css
 *
 * The type page's own layer: its eight set pieces, and only those. On top of tokens.css and site/site.css.
 * Ported value for value from the locked A5 page (tools/build_type_page_a5_style.py, 2026-10-01), every
 * literal now a token. The grammar: docs/2026-09-30-steward-page-grammar.md.
 */

/* the method note: a paragraph with the books beside it, no card */
.method { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-20); align-items: start; max-width: var(--measure); }
.method > div { display: grid; gap: var(--space-10); }
.method-d img { width: 88px; height: auto; display: block; }

/* 1 the header: the family's two tints split on the diagonal */
.hero { position: relative; overflow: hidden; padding: var(--space-64) var(--space-64) var(--space-48); background: linear-gradient(118deg, var(--la) 0 52%, var(--lb) 52% 100%); }
.hero-g { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-40); align-items: center; }
.hero-fam { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1.45; max-width: 44ch; margin-bottom: var(--space-8); }
.hero h1 { margin: 0 0 var(--space-20); font-family: var(--font-display); font-weight: 800; font-size: var(--text-hero); line-height: .95; letter-spacing: -0.045em; }
.hero-line { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.4; max-width: 30ch; }
.hl { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.hero-code { color: color-mix(in srgb, var(--ink-dim) 60%, var(--ink)); font-weight: 500; }
.hero-act { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-12); margin-top: var(--space-32); }
.hero-arm img { width: 100%; height: auto; display: block; filter: var(--drop-shield); }
.hero-name { margin-top: var(--space-48); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-24); }
.hero-name .label { color: color-mix(in srgb, var(--ink-dim) 60%, var(--ink)); padding-top: var(--space-4); }
.hero-name p { max-width: 70ch; }

/* 2 What the code stands for: four letter cards, the big letter as an L tile on the drawing's edge */
.letters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.lt { background: var(--t); display: grid; grid-template-rows: auto 1fr auto; }
.lt.link:hover { box-shadow: var(--ring-2) var(--action); }
.lt-top { height: 150px; background: var(--c); display: grid; place-items: center; }
.lt-top img { width: auto; height: 120px; }
.lt-b { padding: 0 var(--space-24) var(--space-12); }
.lt-tile { position: relative; z-index: 1; display: flex; width: max-content; margin: calc(-1 * var(--space-32)) 0 var(--space-14); border-radius: var(--r-lg); box-shadow: var(--halo-3) var(--t); }
.lt-b .title { margin: 0 0 var(--space-6); }
.lt-b p { line-height: 1.55; }
.lt-o { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-10); align-items: center; padding: var(--space-12) var(--space-24) var(--space-24); }
.lt-od img { width: 34px; height: 34px; opacity: .45; filter: grayscale(1); }
.lt-o p { font-size: .875rem; line-height: 1.4; font-style: italic; color: var(--ink-dim); }

/* 3 the family tree: the four families, the tree, the four types of the family, one unit on one stone ground */
.famtree { margin-top: var(--space-36); }
.tree { position: relative; height: 88px; display: grid; place-items: center; margin: var(--space-2) 0 var(--space-4); }
.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree-svg path { fill: none; stroke: var(--ink-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tree-h { position: relative; margin: 0; padding: var(--space-2) var(--space-12); background: var(--stone); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

/* 4 Self-Led or Guided: two halves, the or between them, Read more */
.vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); overflow: hidden; }
.v { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: var(--space-12); padding: var(--space-48) var(--space-48) var(--space-32); align-content: start; }
.v-g { background: var(--stone); }
.v-d { justify-self: start; }
.v-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-12); }
.v-sfx { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink-dim); }
.v-d img { width: 96px; height: 96px; }
.v-h { margin: var(--space-8) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--card-title); line-height: 1.25; letter-spacing: -0.01em; align-self: end; }
.v-more { display: grid; gap: var(--space-12); align-content: start; justify-items: start; }
.v-rest { display: grid; gap: var(--space-14); }
.v-who .label { display: block; margin-bottom: var(--space-4); }
.rm { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
html:not(.js) .rm { display: none; }
.or { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: var(--r-round); background: var(--charcoal); color: var(--stage-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; z-index: 2; box-shadow: var(--halo-4) var(--card); }

/* 5 the real people slider */
.h3-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); }
.sl-nav { display: flex; gap: var(--space-8); margin-bottom: var(--space-20); flex: none; }
.sl-nav button { width: 44px; height: 44px; border-radius: var(--r-round); border: 0; background: var(--stone); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sl-nav button:hover { background: var(--line); }
.sl-nav .ic { width: 20px; height: 20px; }
.sl.ground { padding: 0; overflow: hidden; }
.sl-track { display: flex; gap: var(--space-32); overflow-x: auto; padding: var(--space-32); scrollbar-width: none; overscroll-behavior-x: contain; }
.sl-track::-webkit-scrollbar { display: none; }
.sl-track.drag { cursor: grabbing; user-select: none; }
.k { flex: 0 0 340px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.k-art { position: relative; height: 220px; background: var(--t); display: grid; place-items: center; }
.k-vd { width: 170px; display: block; }
.k-vd img { width: 100%; height: auto; display: block; }
.k-v { position: absolute; right: 16px; bottom: -24px; width: 52px; height: 52px; border-radius: var(--r-round); background: var(--plate-light); box-shadow: var(--sh-badge); display: grid; place-items: center; z-index: 1; }
.k-v img { width: 40px; height: 40px; }
.k-b { padding: var(--space-28) var(--space-24) var(--space-12); }
.k-b .title { margin: 0; }
.k-b .label { display: block; margin: var(--space-4) 0 var(--space-12); }
.k-tl { list-style: none; margin: 0; padding: var(--space-8) var(--space-24) var(--space-24); display: grid; gap: var(--space-6); }
.k-tl li { position: relative; padding-left: var(--space-20); font-family: var(--font-display); font-weight: 500; font-size: .9375rem; color: var(--ink-dim); }
.k-tl li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--line-strong); }
.k-tl li:last-child { color: var(--ink); font-weight: 700; }
.k-tl li:last-child::before { background: var(--ink); }

/* 6 the skills table: rows carried by space and a faint zebra, no rules */
.sk { padding: var(--space-16) var(--space-28) var(--space-24); }
.sk table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sk thead th { padding: var(--space-12) var(--space-8) var(--space-16); vertical-align: bottom; text-align: center; font-weight: 400; width: 88px; }
.sk thead th:first-child { width: auto; }
.sk-d img { width: 56px; height: 56px; margin: 0 auto var(--space-8); }
.sk tbody th { text-align: left; font-weight: 400; padding: var(--space-20) var(--space-20); }
.sk tbody th p { margin-top: var(--space-2); color: var(--ink-dim); }
.sk tbody td { text-align: center; vertical-align: middle; padding: 0 var(--space-8); }
.sk tbody tr:nth-child(odd) > * { background: color-mix(in srgb, var(--stone) 60%, transparent); }
.sk tbody tr > :first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.sk tbody tr > :last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.sk-dot { display: inline-block; width: 22px; height: 22px; border-radius: var(--r-round); background: var(--c); vertical-align: middle; }
.sk-tiles { display: none; }

/* 7 where it comes from and where it goes */
.ln-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); align-items: start; }
.ln-col { display: grid; gap: var(--space-14); }
.ln-g2.ln-nob { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ln-g2.ln-noa { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ln-g2 .ln-col:not(.ln-none) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.ln-g2 .ln-col > .label { grid-column: 1 / -1; }
.ln-none p { font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.lc { padding: var(--space-20); display: grid; gap: var(--space-8); justify-items: start; }
.lc .title { margin: 0; }
.lc p { font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.ln-now { align-self: stretch; border-radius: var(--r-lg); padding: var(--space-28) var(--space-20); display: grid; gap: var(--space-20); justify-items: center; align-content: center; text-align: center;
  background: linear-gradient(118deg, var(--la) 0 50%, var(--lb) 50% 100%); box-shadow: var(--sh-card); }
.ln-arm { width: 150px; }
.ln-now { container-type: inline-size; }
@container (max-width: 200px) { .ln-now .tiles-l { --tile-w: 42px; --tile-h: 50px; --tile-fs: 1.375rem; --tile-gap: var(--space-4); } }
.ln-now p { font-size: .9375rem; line-height: 1.55; max-width: 30ch; }
.ln-foot { margin-top: var(--space-24); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-12); text-align: center; }

/* the blind spot: the one small accent beside the At work list */
.aw { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-48); align-items: start; }
.aw .prose + .list { margin-top: var(--space-28); }
.bs { border-radius: var(--r-lg); padding: var(--space-28); display: grid; gap: var(--space-20); justify-items: start; text-align: left; box-shadow: var(--sh-card); }
.bs-pic { width: 150px; height: 150px; border-radius: var(--r-round); background: var(--plate-light); display: grid; place-items: center; overflow: hidden; }
.bs-pic svg { width: 118px; height: auto; display: block; }
.bs .title { margin: 0 0 var(--space-8); }
.bs p { color: var(--ink-dim); text-align: left; }

/* 8 the close, on the charcoal stage, with the signup */
.sec-close { padding-top: var(--chapter-gap); }
.cl-new { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-48); align-items: center; padding: var(--space-64); }
.cl-new h2 { margin: 0 0 var(--space-12); font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; }
.cl-new h2 + .scan-call { margin-top: var(--space-24); }

.cl-solo { grid-template-columns: minmax(0, 1fr); }
.sec-close .pr { margin-top: var(--space-64); }

/* ==== dark: one plate rule for every drawing, the or light, the charcoal panels raised ==== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.method-d, .v-d, .sk-d, .lt-od) { background: var(--plate-light); border-radius: var(--r-md); }
  :root:not([data-theme="light"]) .or { background: var(--stage-ink); color: var(--charcoal); }
  :root:not([data-theme="light"]) .k-art { filter: brightness(.8) saturate(.85); }
  :root:not([data-theme="light"]) :is(.bs, .cl-new) { background: var(--stage-paper); box-shadow: var(--sh-raised-dark); }
}
:root[data-theme="dark"] :is(.method-d, .v-d, .sk-d, .lt-od) { background: var(--plate-light); border-radius: var(--r-md); }
:root[data-theme="dark"] :is(.method-d, .v-d, .sk-d, .lt-od) { padding: var(--space-6); display: inline-block; width: fit-content; }
:root[data-theme="dark"] .or { background: var(--stage-ink); color: var(--charcoal); }
:root[data-theme="dark"] .k-art { filter: brightness(.8) saturate(.85); }
:root[data-theme="dark"] :is(.bs, .cl-new) { background: var(--stage-paper); box-shadow: var(--sh-raised-dark); }

/* ==== motion: the type page's own pieces ==== */
@media (prefers-reduced-motion: no-preference) {
  html.motion .letters .lt-top { transition: filter 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 160ms); }
  html.motion .letters:not(.in) .lt-top { filter: saturate(0) brightness(1.15); }
  html.motion .sk .sk-dot { transition: transform 360ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  html.motion .sk:not(.in) .sk-dot { transform: scale(0); }
  html.motion .vs > .or { transition: opacity 300ms var(--ease-out) 420ms, scale 300ms var(--ease-out) 420ms; }
  html.motion .vs:not(.in) > .or { opacity: 0; scale: .6; }
  .v-rest.opening { animation: v-open 360ms var(--ease-out); }
}
@keyframes v-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media print {
  .sl-nav { display: none !important; }
  .hero, .letters, .lt-top, .k-art, .ln-now { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== widths ==== */
@media (max-width: 1000px) {
  .hero { padding: var(--space-36) var(--space-32) var(--space-32); }
  .hero-g { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-20); }
  .hero-arm { width: 180px; align-self: center; }
  .hero-name { grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-32); }
  .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fams > .tc.lit { order: 9; }
  .fam-types { grid-template-columns: 1fr; padding-left: var(--space-28); }
  .ln-g, .ln-g2.ln-nob, .ln-g2.ln-noa, .ln-g2 .ln-col:not(.ln-none) { grid-template-columns: 1fr; }
  .ln-now { order: -1; }
  .aw { grid-template-columns: 1fr; gap: var(--space-32); }
  .bs { max-width: 420px; }
  .cl-new { grid-template-columns: 1fr; padding: var(--space-36) var(--space-32); }
  .ln-g .ln-col:first-child { order: 0; }
}
@media (max-width: 820px) {
  .vs { grid-template-columns: 1fr; grid-template-rows: none; }
  .v { grid-row: auto; grid-template-rows: none; padding: var(--space-32) var(--space-28) var(--space-24); }
  .v-g { padding-top: var(--space-48); }
  .or { position: relative; left: auto; top: auto; transform: none; margin: 0 auto calc(-1 * var(--space-32)); grid-row: auto; }
  html.motion .vs:not(.in) > .or { scale: .6; }
}
@media (max-width: 700px) {
  .hero { padding: var(--space-28) var(--space-24) var(--space-28); }
  .hero-act .scan-call { flex: 1 1 auto; justify-items: stretch; }
  .hero-act .scan-call .btn { justify-content: center; }
  .hero-act .scan-note { text-align: center; }
  .sl-track { padding: var(--space-20) var(--space-16); gap: var(--space-16); }
  .k { flex-basis: 84%; }
  .sl-track { scroll-snap-type: x mandatory; }
  .k { scroll-snap-align: start; }
  .k-art { height: 180px; }
  .k-vd { width: 140px; }
  .tree { height: 72px; }
  .method { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-16); } .method-d img { width: 64px; }
  .sk { padding: var(--space-8) var(--space-12) var(--space-12); }
  .sk thead { display: none; }
  .sk tbody td { display: none; }
  .sk tbody th { display: block; padding: var(--space-16) var(--space-14); border-radius: var(--r-lg) !important; }
  .sk-tiles { display: block; margin-top: var(--space-10); }
  .sk tbody tr { display: block; }
  .cl-new { padding: var(--space-28) var(--space-24); }
  .h3-row { align-items: flex-end; }
}
@media (max-width: 560px) {
  .letters { grid-template-columns: 1fr; }
  .lt-top { height: 120px; } .lt-top img { height: 96px; }
  .famtree.ground { padding: var(--space-12); }
  .famtree .tc { padding: var(--space-14); }
}

/* the result (2026-10-13, second version): at the very top of the page, above the header, in its own frame so it never
   reads as a section of the type page (the operator: "it should be really clear that this is a result section").
   The frame is a stone ground inside a heavy ink outline with a "Your result" tab on its edge; the type page's
   sections never take an outline. Inside: the reveal's code on the charcoal stage, the five answers as B3 bars on a
   paper card, the types close to it as candidate cards, the promise with the signup, and the share. Under the frame
   one handover line in the display face, then the type page as it is. On a neighbour's page and a share page only
   the slim bar shows, in the same frame */
.rs[hidden], .rs .cands[hidden], .rs-panel[hidden], .rs-slim[hidden], .rs-mini[hidden], .rs-hand[hidden], .rail-you[hidden] { display: none; }
.rs-panel { position: relative; margin-top: var(--space-14); padding: var(--space-48) var(--space-40) var(--space-40); background: var(--stone); border-radius: var(--r-lg); box-shadow: var(--ring-25) var(--ink); }
.rs-tab { font-family: var(--font-display); font-size: var(--text-label); font-weight: 700; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase; background: var(--ink); color: var(--ground); border-radius: var(--r-pill); }
.rs-tab { position: absolute; top: 0; left: 32px; transform: translateY(-50%); margin: 0; padding: var(--space-10) var(--space-16); }
.rs-top { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-40); align-items: center; padding: var(--space-40) var(--space-48) var(--space-36); }
/* the result's full shield, in the reader's variant series, beside the line and the code */
.rs-arm img { display: block; width: 100%; height: auto; filter: var(--drop-shield); }
.rs-arm img[hidden] { display: none; }
.rs-h { margin: 0; max-width: 28ch; font-family: var(--font-display); font-weight: 800; font-size: var(--text-headline); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; outline: none; }
.rv-code { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-28); }
.rv-l { display: grid; justify-items: center; gap: var(--space-8); min-width: 52px; }
.rv-l[hidden] { display: none; }
.rv-l .tiles i.sfx { margin-left: 0; box-shadow: var(--ring-25) var(--stage-ink); color: var(--stage-ink); }
.rv-dash { align-self: start; height: 60px; display: grid; place-items: center; padding: 0 var(--space-2); font: 600 var(--text-title)/1 var(--font-mono); color: var(--ink-dim); }
.rv-e { font-family: var(--font-display); font-weight: 600; font-size: var(--text-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); }
.rs-bars { margin-top: var(--space-20); padding: var(--space-28) var(--space-32) var(--space-16); background: var(--paper); border-radius: var(--r-lg); }
.rs-bars .abs .ab:last-child { border-bottom: 0; }
.rs-sub { margin: 0 0 var(--space-8); }
.rs-bars .rs-sub { margin-bottom: var(--space-16); }
.rs-cands { margin-top: var(--space-48); }
.rs-lead { max-width: 60ch; margin-bottom: var(--space-24); color: var(--ink-dim); }
.rs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); margin-bottom: var(--space-20); font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); color: var(--ink-dim); }
.lg-mk, .lg-mk2 { display: inline-block; flex: none; border-radius: var(--r-round); box-sizing: border-box; }
.lg-mk { width: 20px; height: 20px; border: 5px solid var(--ink); background: var(--paper); }
.lg-mk2 { width: 20px; height: 20px; margin-left: var(--space-10); border: 4px solid var(--ink); }
.rs .pr { margin-top: var(--space-72); }
.rs-share { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.rs-panel > .rs-share .btn-soft { background: var(--paper); }
.rs-panel > .rs-share .btn-soft:hover { background: var(--line); }
/* the handover: the reader leaves the result and enters the type page */
.rs-hand { display: flex; align-items: center; gap: var(--space-14); margin: var(--space-64) 0 var(--space-24); font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-dim); }
.rs-hand img { width: 34px; height: auto; flex: none; }
.rs-hand b { font-weight: 800; color: var(--ink); }
.rs-slim + .rs-hand { margin-top: var(--space-36); }
.rs-mini + .rs-hand { margin-top: var(--space-28); }
/* the compact result: another type's page opened with the result in the address (the operator, 2026-10-14). The
   panel's frame (the ink outline, the Your result tab) at a smaller size: the reader's type on one line with the way
   back, then this page's code with the letters that differ ringed, and one or two sentences on how it relates */
.rs-mini { position: relative; margin-top: var(--space-14); background: var(--stone); border-radius: var(--r-lg); box-shadow: var(--ring-25) var(--ink); }
/* the compare bar (the operator, 2026-10-14): collapsed by default, one line with the reader's code and a chevron;
   it opens to the compact result */
.rs-cmp { display: flex; align-items: center; gap: var(--space-12) var(--space-16); width: 100%; min-height: 60px; padding: var(--space-12) var(--space-24); border: 0; border-radius: var(--r-lg); background: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: left; cursor: pointer; }
.rs-cmp-t { flex: 1 1 auto; min-width: 0; }
.rs-cmp .tiles { flex: none; }
.rs-cmp .chev { flex: none; width: 9px; height: 9px; margin: 0 var(--space-4) 0 var(--space-6); }
.rs-cmp:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rs-cmp:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.rs-cmp-b { padding: var(--space-4) var(--space-28) var(--space-24); }
.rs-cmp-b[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .rs-cmp-b.opening { animation: rs-open 320ms var(--ease-out) both; } }
@keyframes rs-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rs-mini-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-14) var(--space-24); }
.rs-mini-you { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.rs-mini-k { color: var(--ink-dim); }
.rs-mini-w { font-weight: 800; font-size: var(--text-title); }
.rs-mini-act { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.rs-mini-act .btn-soft { background: var(--paper); }
.rs-mini-act .btn-soft:hover { background: var(--line); }
.rs-mini-rel { margin-top: var(--space-20); padding-top: var(--space-20); border-top: var(--hair) solid var(--line-strong); }
.rs-mini-t { margin: 0; max-width: 62ch; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
/* the differences, one item per letter (the copy deck): the label as a small bold line with the letter's tile, the
   deck's text under it */
.rs-ds { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: grid; gap: var(--space-12); }
.rs-d { padding: var(--space-14) var(--space-20) var(--space-16); background: var(--paper); border-radius: var(--r-md); }
.rs-d-h { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-6); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.rs-d-t { margin: 0; max-width: 66ch; font-size: .9375rem; line-height: 1.55; }
/* a letter that differs, lit and ringed: the ring of the Close to you cards, here on stone (the selector outranks the
   dark theme's Parallel rule) */
.rs .rs-mini .tiles i.chg.chg { margin-inline: var(--space-4); box-shadow: var(--halo-2) var(--paper), var(--halo-4) var(--ink); }
/* the slim bar: a share page */
.rs-slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-24); margin-bottom: var(--space-28); padding: var(--space-16) var(--space-24); background: var(--stone); border-radius: var(--r-lg); box-shadow: var(--ring-25) var(--ink); }
.rs-slim-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.rs-slim-t b, .rs-slim-w { font-weight: 800; font-size: 1.1875rem; }
.rs-slim-call { flex: none; gap: var(--space-6); }
.rs-shared .rs-slim-t .tiles { margin-left: var(--space-2); }
/* the top of the rail while the result is shown */
.rail-you { display: grid; gap: var(--space-4); margin-bottom: var(--space-24); padding: var(--space-12) var(--space-14); border-radius: var(--r-lg); background: var(--stone); box-shadow: var(--ring-2) var(--ink); color: var(--ink); text-decoration: none; }
.rail-you-l { font-family: var(--font-display); font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.rail-you b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .rs:not([hidden]) .rs-panel:not([hidden]) { animation: rs-rise 600ms var(--ease-out) both; }
  .rs:not([hidden]) .rs-panel:not([hidden]) .rs-arm img:not([hidden]) { animation: rs-arm 900ms var(--ease-out) 240ms both; }
}
@keyframes rs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rs-arm { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .rs-top { grid-template-columns: minmax(0, 1fr) 168px; gap: var(--space-28); }
}
@media (max-width: 760px) {
  .rs-panel { padding: var(--space-36) var(--space-14) var(--space-24); }
  .rs-tab { left: 16px; }
  .rs-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); padding: var(--space-28) var(--space-20) var(--space-24); }
  .rs-arm { order: -1; width: 160px; justify-self: center; }
  .rv-l { min-width: 0; flex: 1 1 0; }
  .rv-l .tiles-l, .rv-l .tiles-l i { width: 100%; }
  .rv-l .tiles-l { --tile-w: 46px; --tile-h: 54px; --tile-fs: 1.5rem; }
  .rv-dash { height: 54px; padding: 0; }
  .rv-code { gap: var(--space-4); margin-top: var(--space-24); }
  .rv-e { font-size: .5625rem; letter-spacing: .02em; }
  .rs-bars { padding: var(--space-24) var(--space-14) var(--space-8); }
  .rs-cands { margin-top: var(--space-40); }
  .rs .cands { grid-template-columns: minmax(0, 1fr); }
  .rs-hand { margin-top: var(--space-48); font-size: 1.25rem; }
  .rs-slim { padding: var(--space-14) var(--space-16); font-size: 1rem; }
  .rs-cmp { padding: var(--space-10) var(--space-14); font-size: 1rem; }
  .rs-cmp-b { padding: var(--space-4) var(--space-16) var(--space-20); }
  .rs-d { padding: var(--space-12) var(--space-14) var(--space-14); }
}