/* StockXray — "Linen & Ink" design system (spec docs/superpowers/specs/2026-10-02-ui-redesign.md §4).
   Tokens first; every component below reads tokens only. Dark theme follows the system unless
   the visitor picks one (html[data-theme], set by theme.js). Live samples: /_styleguide. */

/* ---- 1. tokens ------------------------------------------------------------------------- */
:root {
  /* type */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-brand: 'Arsenal', var(--font-body);
  --fs-display: 44px; --fs-h1: 34px; --fs-h2: 24px; --fs-h3: 18px;
  --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; --fs-figure-xl: 40px;
  /* space, shape, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --r-1: 3px; --r-2: 6px;
  --content: 1120px; --gutter: 20px;
  --t-fast: 120ms; --t-base: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-pop: 0 8px 24px rgb(0 0 0 / .10);

  /* colour — light ("linen") */
  --bg: #F5F1E8; --surface: #FBF9F4; --ink: #1B1916; --muted: #5E574D; --faint: #8A8277;
  --rule: #DDD5C6; --rule-strong: #C9BFAD; --rule-soft: #E9E3D7; --hover: rgb(27 25 22 / .035);
  --link: #1F4E86; --stitch: #B4322A;
  /* verdict scale: blue <-> umber, never the only cue (glyphs) */
  --v-sb: #163E66; --v-sb-bg: #E3EBF3; --v-b: #2F5F8F; --v-b-bg: #E3EBF3; --v-h: #5E574D; --v-h-bg: #ECE7DD;
  --v-s: #9A520F; --v-s-bg: #F6E7D6; --v-ss: #7C2F12; --v-ss-bg: #F3DED4; --v-on-solid: #FBF9F4;
  --up: #2F5F8F; --down: #9A520F;
  --warn: #6E4A0E; --warn-bg: #F4EAD5;
  /* charts (validated with the dataviz palette checker against --bg and --surface) */
  --chart-1: #2A62A0; --chart-2: #7E4CA6; --chart-3: #A8741A;
  --rec-sb: #163E66; --rec-b: #6E98C4; --rec-h: #B8AE9C; --rec-s: #A65E1E;

  /* compatibility aliases used by report.js / older pages (wave 2 replaces them) */
  --line: var(--rule); --line-strong: var(--rule-strong); --line-soft: var(--rule-soft);
  --accent: var(--chart-1); --accent-ink: #FBF9F4; --accent-soft: #E3EBF3;
  --buy: var(--v-b); --buy-bg: var(--v-b-bg); --hold: var(--v-h); --hold-bg: var(--v-h-bg);
  --sell: var(--v-s); --sell-bg: var(--v-s-bg); --gold: var(--chart-3); --gold-ink: #7A5410;
  --bar: #26231E; --bar-ink: #F5F1E8; --bar-muted: #C4BBAA;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14120F; --surface: #1C1A16; --ink: #ECE6DA; --muted: #ADA493; --faint: #7D7567;
    --rule: #2E2A24; --rule-strong: #443D33; --rule-soft: #24211C; --hover: rgb(236 230 218 / .04);
    --link: #9CC3EA; --stitch: #E0675A;
    --v-sb: #9CC3EA; --v-sb-bg: #1E2E40; --v-b: #7FA9D6; --v-b-bg: #1E2E40; --v-h: #ADA493; --v-h-bg: #2A2620;
    --v-s: #E3A15E; --v-s-bg: #3A2A1A; --v-ss: #F0B98A; --v-ss-bg: #3F2318; --v-on-solid: #14120F;
    --up: #7FA9D6; --down: #E3A15E;
    --warn: #E8C27A; --warn-bg: #33291A;
    --chart-1: #4F8FD6; --chart-2: #9A72D0; --chart-3: #B98426;
    --rec-sb: #9CC3EA; --rec-b: #4F7CAD; --rec-h: #6E665A; --rec-s: #C9803F;
    --accent-ink: #14120F; --accent-soft: #1E2E40; --gold-ink: #E8C27A;
    --bar: #0D0C0A; --bar-ink: #ECE6DA; --bar-muted: #ADA493;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14120F; --surface: #1C1A16; --ink: #ECE6DA; --muted: #ADA493; --faint: #7D7567;
  --rule: #2E2A24; --rule-strong: #443D33; --rule-soft: #24211C; --hover: rgb(236 230 218 / .04);
  --link: #9CC3EA; --stitch: #E0675A;
  --v-sb: #9CC3EA; --v-sb-bg: #1E2E40; --v-b: #7FA9D6; --v-b-bg: #1E2E40; --v-h: #ADA493; --v-h-bg: #2A2620;
  --v-s: #E3A15E; --v-s-bg: #3A2A1A; --v-ss: #F0B98A; --v-ss-bg: #3F2318; --v-on-solid: #14120F;
  --up: #7FA9D6; --down: #E3A15E;
  --warn: #E8C27A; --warn-bg: #33291A;
  --chart-1: #4F8FD6; --chart-2: #9A72D0; --chart-3: #B98426;
  --rec-sb: #9CC3EA; --rec-b: #4F7CAD; --rec-h: #6E665A; --rec-s: #C9803F;
  --accent-ink: #14120F; --accent-soft: #1E2E40; --gold-ink: #E8C27A;
  --bar: #0D0C0A; --bar-ink: #ECE6DA; --bar-muted: #ADA493;
  color-scheme: dark;
}
@media (max-width: 640px) {
  :root { --fs-display: 36px; --fs-h1: 30px; --fs-h2: 22px; --gutter: 16px }
}

/* ---- 2. base --------------------------------------------------------------------------- */
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 2px solid var(--stitch); outline-offset: 2px; border-radius: 2px }
::selection { background: color-mix(in srgb, var(--stitch) 22%, transparent) }
h1, h2 { font-family: var(--font-display); font-weight: 500; font-optical-sizing: auto; margin: 0; text-wrap: balance }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.01em }
h1.display { font-size: var(--fs-display); line-height: 1.05 }
h2 { font-size: var(--fs-h2); line-height: 1.2 }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; margin: 0 }
.num, .tick { font-family: var(--font-data); font-variant-numeric: tabular-nums }
.tick { font-weight: 500; letter-spacing: 0.01em }
.micro { font-size: 13px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: 0.04em; color: var(--muted) }
.muted { color: var(--muted) }
.lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 68ch }
.prose-w { max-width: 68ch }
.stack { display: flex; flex-direction: column; gap: var(--s-3) }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap }
.spacer { flex-grow: 1 }
.r { text-align: right }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.up { color: var(--up) } .down { color: var(--down) }
.ok { color: var(--v-b) } .bad { color: var(--v-s) }
.name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kbd { font-family: var(--font-data); font-size: 12px; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: 0 5px; line-height: 18px }

main { width: 100%; max-width: var(--content); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); flex: 1 0 auto; min-width: 0 }

/* ---- 3. header / footer (one partial, rendered by the server) ------------------------------- */
.skip { position: absolute; left: var(--s-3); top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-3); border-radius: var(--r-1) }
.skip:focus { top: var(--s-2) }
.site-header { position: relative; z-index: 30; background: var(--bg) }
.hdr-in { max-width: var(--content); margin: 0 auto; padding: var(--s-3) var(--gutter); display: flex; align-items: center; gap: var(--s-5); min-height: 64px }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px }
.brand .brand-mark { color: var(--ink); flex-shrink: 0 }
.mark-eye { fill: var(--stitch) }
.wordmark { font-family: var(--font-brand); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; line-height: 1 }
.nav { display: flex; align-items: center; gap: var(--s-1) }
.nav a, .run-link { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 0 var(--s-2); min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent }
.nav a:hover, .run-link:hover { color: var(--ink) }
.nav a[aria-current=page], .run-link[aria-current=page] { color: var(--ink); border-bottom-color: var(--stitch) }
.run-link { border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: 0 var(--s-3); min-height: 38px; color: var(--ink) }
.run-link[aria-current=page] { border-color: var(--ink) }
.hdr-search { position: relative; margin-left: auto; display: flex; align-items: center }
.search-box { position: relative; display: flex; align-items: center; width: 280px }
.search-box input { padding-right: 34px; min-height: 40px; background: var(--surface) }
.search-box .kbd { position: absolute; right: 10px; pointer-events: none }
.search-box input:focus + .kbd { display: none }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-2); cursor: pointer; flex-shrink: 0 }
.icon-btn:hover { color: var(--ink); background: var(--hover) }
.search-open { display: none }
.stitch-band { height: 6px; max-width: var(--content); margin: 0 auto; background: var(--stitch); opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M2 1l4 4M6 1L2 5' stroke='%23000' stroke-width='1.4' stroke-linecap='square' fill='none'/%3E%3Cpath d='M15 .5 17.5 3 15 5.5 12.5 3z'/%3E%3C/svg%3E") 0 0 / 24px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M2 1l4 4M6 1L2 5' stroke='%23000' stroke-width='1.4' stroke-linecap='square' fill='none'/%3E%3Cpath d='M15 .5 17.5 3 15 5.5 12.5 3z'/%3E%3C/svg%3E") 0 0 / 24px 6px repeat-x }
.site-header .stitch-band { width: calc(100% - 2 * var(--gutter)) }
@media (max-width: 860px) {
  .hdr-in { flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-1) }
  .nav { order: 5; width: 100%; margin-left: calc(-1 * var(--s-2)) }
  .search-open { display: inline-flex }
  .search-box { display: none }
  .hdr-search.open { order: 6; width: 100%; margin: 0 0 var(--s-2) }
  .hdr-search.open .search-box { display: flex; width: 100% }
  .hdr-search.open .search-open { display: none }
  .search-box .kbd { display: none }
}
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--s-6) }
.ftr-in { max-width: var(--content); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-7); font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: var(--s-2) }
.ftr-in p { margin: 0; max-width: 90ch }
.ftr-brand { font-family: var(--font-brand); font-weight: 700; color: var(--ink) }
.footer { font-size: 14px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: var(--s-4) }

/* ---- 4. controls ------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 18px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) }
.btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)) }
.btn:disabled, .btn[aria-disabled=true] { opacity: 0.5; cursor: not-allowed }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong) }
.btn.secondary:hover { border-color: var(--ink); background: var(--hover) }
.btn.text { background: transparent; color: var(--link); border-color: transparent; padding: 0 var(--s-2); text-decoration: underline; text-underline-offset: 3px }
.btn.text:hover { text-decoration-thickness: 2px; background: transparent }
.btn.danger { background: transparent; color: var(--v-s); border-color: var(--rule-strong) }
.btn.small { min-height: 36px; padding: 0 var(--s-3); font-size: 14px }

input[type=text], input[type=password], input[type=search], .select, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: 10px 12px; width: 100%; min-height: 44px }
input::placeholder { color: var(--faint) }
input:focus, select:focus { border-color: var(--ink) }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none }
label { font-size: 14px; font-weight: 600 }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.hint { font-size: 13px; color: var(--muted); font-weight: 400 }

/* segmented control (discover screens, older pages) */
.seg { display: inline-flex; align-self: flex-start; gap: 2px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: 3px; flex-wrap: wrap; background: var(--surface) }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; padding: 0 12px; min-height: 36px; border-radius: var(--r-1); cursor: pointer }
.seg button:hover { color: var(--ink) }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--bg) }

/* filter bar with counts (library) */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2) }
.filters button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; padding: 0 var(--s-3); min-height: 38px; border-radius: var(--r-1); cursor: pointer }
.filters button:hover { border-color: var(--ink) }
.filters button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.filters .glyph { font-size: 10px; letter-spacing: -1px; color: var(--muted) }
.filters button[aria-pressed=true] .glyph, .filters button[aria-pressed=true] .cnt { color: inherit; opacity: .8 }
.filters .cnt { font-family: var(--font-data); font-size: 12px; color: var(--muted) }
.filters .sep { width: 1px; background: var(--rule); margin: 4px 2px }

/* ---- 5. verdict chip: glyph + word, six variants ------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 2px; border-radius: var(--r-1); font-size: 15px; font-weight: 600; line-height: 1.35; font-variant-caps: all-small-caps; letter-spacing: 0.05em; white-space: nowrap; background: var(--v-h-bg); color: var(--v-h); border: 1px solid transparent }
.chip::before { font-size: 9px; letter-spacing: -1px; font-variant-caps: normal }
.chip.STRONG_BUY { background: var(--v-sb); color: var(--v-on-solid) }
.chip.STRONG_BUY::before { content: "▲▲"; content: "▲▲" / "" }
.chip.BUY { background: var(--v-b-bg); color: var(--v-b) }
.chip.BUY::before { content: "▲"; content: "▲" / "" }
.chip.BUY_WAIT { background: var(--v-b-bg); color: var(--v-b) }
.chip.BUY_WAIT::before { content: "△"; content: "△" / "" }
.chip.HOLD { background: var(--v-h-bg); color: var(--v-h) }
.chip.HOLD::before { content: "●"; content: "●" / ""; font-size: 8px }
.chip.TRIM { background: var(--v-s-bg); color: var(--v-s) }
.chip.TRIM::before { content: "▽"; content: "▽" / "" }
.chip.SELL, .chip.AVOID { background: var(--v-s-bg); color: var(--v-s) }
.chip.SELL::before, .chip.AVOID::before { content: "▼"; content: "▼" / "" }
.chip.STRONG_SELL { background: var(--v-ss); color: var(--v-on-solid) }
.chip.STRONG_SELL::before { content: "▼▼"; content: "▼▼" / "" }
.chip.NEED_DATA, .chip.neutral, .chip.STALE { background: transparent; color: var(--muted); border: 1px dashed var(--faint) }
.chip.STALE::before { content: "◌"; content: "◌" / ""; font-size: 11px }
.chip.is-stale { opacity: .6 }
.chip.was { background: transparent; color: var(--muted); border-color: var(--rule-strong) }
.stale-note { font-size: 13px; color: var(--muted); white-space: nowrap }

/* quality letter A–E */
.qual { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); font-family: var(--font-data); font-size: 13px; font-weight: 500 }
.qual.A, .qual.B { border-color: var(--v-b); color: var(--v-b) }
.qual.D, .qual.E { border-color: var(--v-s); color: var(--v-s) }

/* ---- 6. surfaces, notices, figures ------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 20px }
.card h2 { font-size: 21px }
.section { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule) }
.section-q { margin: 0; color: var(--muted); font-size: 15px }
.notice { border: 1px solid var(--rule); border-left: 3px solid var(--faint); background: var(--surface); color: var(--ink); border-radius: var(--r-1); padding: 12px 16px; display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap }
.notice.warn { border-left-color: var(--chart-3); background: var(--warn-bg) }
.notice.good { border-left-color: var(--v-b) }
.notice.err { border-left-color: var(--v-s) }
.notice.info { border-left-color: var(--link) }
.notice p { margin: 0 }
.figure { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.figure .label { font-size: 13px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: 0.04em; color: var(--muted) }
.figure .value { font-family: var(--font-data); font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums }
.figure .value.xl { font-size: var(--fs-figure-xl) }
.figure .delta { font-size: 14px; color: var(--muted) }
details.disclose > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--s-2); font-weight: 600; list-style: none }
details.disclose > summary::-webkit-details-marker { display: none }
details.disclose > summary::before { content: "›"; font-size: 20px; line-height: 1; color: var(--muted); transition: transform var(--t-base) var(--ease) }
details.disclose[open] > summary::before { transform: rotate(90deg) }
.skeleton { background: var(--rule-soft); border-radius: var(--r-1); min-height: 16px }
.meter-line { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden }
.meter-line > span { display: block; height: 100%; background: var(--ink) }

/* ---- 7. table (library, discover, history) ------------------------------------------------- */
.table { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px }
.tbl th { text-align: left; font-size: 14px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: 0.04em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--ink); white-space: nowrap; background: var(--bg); position: sticky; top: 0; z-index: 2 }
.tbl td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle }
.tbl th.n, .tbl td.n { text-align: right }
.tbl td.n { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap }
.tbl tbody tr { position: relative }
.tbl tbody tr:hover td { background: var(--hover) }
.tbl .row-link { color: var(--ink); text-decoration: none }
.tbl .row-link::after { content: ""; position: absolute; inset: 0 }
.tbl .row-link:focus-visible { outline: none }
.tbl tbody tr:focus-within { outline: 2px solid var(--stitch); outline-offset: -2px }
.tbl .sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 0; min-height: 32px; font: inherit; color: inherit; letter-spacing: inherit; font-variant-caps: inherit; cursor: pointer }
.tbl .sort:hover { color: var(--ink) }
.tbl th[aria-sort] .sort { color: var(--ink) }
.tbl .caret { font-size: 9px; width: 9px; display: inline-block; color: var(--stitch) }
.tbl .stock { display: flex; flex-direction: column; min-width: 0 }
.tbl .stock .tick { font-size: 16px }
.tbl .stock .name { max-width: 30ch }
.tbl tr.is-stale .tick { color: var(--muted) }
.tbl .c-sub { display: none }
.tbl .msg td { color: var(--muted); padding: var(--s-5) 12px }

/* ---- 8. popover / autocomplete -------------------------------------------------------------- */
.ac-wrap { position: relative; width: 100% }
.ac-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop); max-height: 360px; overflow-y: auto; min-width: 260px }
.ac-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-1); cursor: pointer; font-size: 14px; min-height: 44px; color: var(--ink) }
.ac-item[aria-selected=true], .ac-item:hover { background: var(--accent-soft) }
.ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ac-ex { font-size: 12px; color: var(--muted) }
.ac-group { font-size: 12px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: 0.05em; color: var(--muted); padding: 6px 10px 2px }
.search-box .ac-list { left: auto; right: 0; width: min(420px, calc(100vw - 2 * var(--gutter))) }
@media (max-width: 860px) { .search-box .ac-list { left: 0; width: auto } }

/* ---- 9. stitch ornament kit (decorative only: aria-hidden, never near data) -------------------- */
.stitch-break { width: 120px; margin: var(--s-5) auto }
.stitches { display: flex; flex-wrap: wrap; gap: 4px }
.stitches > span { width: 12px; height: 12px; background: var(--rule-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat }
.stitches > span.done { background: var(--stitch) }
.stitches > span.now { background: var(--ink) }
.empty-state { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-6) 0; flex-wrap: wrap }
.empty-state .kalyna { width: 132px; height: 132px; flex-shrink: 0; color: var(--faint) }
.empty-state .body { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0 }
.empty-state p { margin: 0; color: var(--muted); max-width: 60ch }
.kalyna .berry-red { fill: var(--stitch); stroke: none }
@media (prefers-reduced-motion: no-preference) {
  .stitches > span { transition: background var(--t-base) var(--ease) }
  .pulse { animation: pulse 1.4s ease-in-out infinite }
}
@keyframes pulse { 50% { opacity: 0.45 } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important }
}

/* ---- 10. page: library ---------------------------------------------------------------------- */
.page-head { display: flex; flex-direction: column; gap: var(--s-3) }
.meta-line { margin: 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center }
.meta-line strong { color: var(--ink); font-weight: 600 }
.refresh-line { display: flex; flex-direction: column; gap: 6px; max-width: 520px }
.toolbar { display: flex; flex-direction: column; gap: var(--s-3) }
.toolbar .search { max-width: 420px }
.toolbar .mobile-sort { display: none }
.list-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: 14px; color: var(--muted) }
.lib .c-verdict { width: 1%; white-space: nowrap }
@media (max-width: 640px) {
  .toolbar .mobile-sort { display: flex; align-items: center; gap: var(--s-2) }
  .toolbar .mobile-sort select { width: auto; min-height: 40px; padding: 6px 10px; font-size: 14px }
  .lib, .lib tbody { display: block }
  .lib thead { display: none }
  .lib tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stock verdict" "sub upside"; gap: 2px var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--rule) }
  .lib td { display: block; padding: 0; border: 0; min-width: 0 }
  .lib .c-stock { grid-area: stock } .lib .c-verdict { grid-area: verdict; width: auto; text-align: right }
  .lib .c-up { grid-area: upside; align-self: center }
  .lib .c-sub { grid-area: sub; display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .lib .c-q, .lib .c-fv, .lib .c-price, .lib .c-upd { display: none }
  .lib .stock { flex-direction: row; align-items: baseline; gap: var(--s-2) }
  .lib .stock .name { max-width: none }
  .lib tr.msg { display: block }
  .lib tr.msg td { padding: var(--s-4) 0 }
}

/* ---- 11. page: ticker hub (/t, /r) ------------------------------------------------------------ */
.hub { display: flex; flex-direction: column; gap: var(--s-3) }
.hub-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: 14px; color: var(--muted) }
.hub-bar .crumbs a { color: var(--muted) }
.hub-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center }
.hub-actions .fresh { font-size: 13px; color: var(--muted) }
.live { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stitch) }

/* ---- 12. history timeline -------------------------------------------------------------------- */
.hist svg { display: block; width: 100%; height: auto; overflow: visible }
.hist text { font-family: var(--font-body); font-size: 11px; fill: var(--muted) }
.hist .axis { stroke: var(--rule-strong); stroke-width: 1 }
.hist .method-rule { stroke: var(--stitch); stroke-width: 1; stroke-dasharray: 3 3 }
.hist .method-label { fill: var(--stitch); font-size: 11px }
.hist .pt-cur { stroke: var(--ink); stroke-width: 2.5 }
.hist .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center }
.hist .key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 2px solid var(--muted) }
.hist .key.filled { background: var(--muted) }

/* ---- 13. report helpers kept from v1 (wave 2 replaces) ---------------------------------------- */
.exp-bar { display: grid; grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) minmax(64px, auto); gap: 10px; align-items: center; font-size: 13px }
.exp-track { position: relative; height: 10px; background: var(--line-soft); border-radius: 4px; overflow: hidden; display: block }
.exp-track > span { position: absolute; top: 0; height: 100% }
.exp-track > .exp-zero { left: 50%; width: 1px; background: var(--line-strong) }
.chip.exp-top { border-color: var(--ink); color: var(--ink) }
table.data.exp-ms td { white-space: normal; vertical-align: top }
.exp-framing { background: var(--accent-soft); color: var(--ink); border-left: 3px solid var(--accent); font-weight: 600 }

/* ---- 14. styleguide ----------------------------------------------------------------------------- */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3) }
.sg-swatch { border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; font-size: 12px }
.sg-swatch > div:first-child { height: 44px }
.sg-swatch > div:last-child { padding: 6px 8px; font-family: var(--font-data) }

@media print {
  .site-header, .site-footer, .skip, .hub-actions { display: none !important }
  body { background: #fff }
}