/* Dialed · Bluebird. Read pages: How we grade, Reports, Stores, Privacy, Terms.
   Loaded after site.css. Page layout only, scoped under main.read and data-page.
   The frame is the board's: a heavy rule under the masthead, hairline-ruled rows under heavy rules,
   narrow heavy numerals. The reading column stays calm at 68ch. */

/* ---------------------------------------------------------------- masthead and column */
.read .page-head { border-bottom: 2px solid var(--fg); padding-bottom: var(--s5); }
.read .page-head .lede { max-width: 64ch; }
.read-grid { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s7) var(--s8); align-items: start; padding-top: var(--s6); }
.read-col { max-width: 68ch; min-width: 0; }
.read-col > section:first-child > h2 { margin-top: 0; }
.read-col .scroll { margin-top: var(--s4); }
.read-col .sec-p { color: var(--fg-2); }
.read-col h2 + p { margin-top: 0; }
.read-single { padding-top: var(--s6); }

/* ---------------------------------------------------------------- contents rail */
.toc { position: sticky; top: var(--s5); }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.toc li { margin: 0; border-bottom: 1px solid var(--rule); }
.toc ol a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; color: var(--fg-2); text-decoration: none; font-weight: 600; font-size: var(--t-1); line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .toc ol a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; } }
.toc ol a[aria-current="true"] { color: var(--fg); font-weight: 800; }
.toc-foot { margin-top: var(--s4); font-size: var(--t-2); color: var(--fg-3); line-height: 1.5; }

/* ---------------------------------------------------------------- the legend: four grades, drawn large with their rules beside them */
.legend { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 2px solid var(--fg); }
.legend li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s2) var(--s4); padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--rule); margin: 0; }
.legend .glyph { font-size: var(--t7); grid-row: 1 / span 3; align-self: start; }
.legend h3 { font-size: var(--t2); font-weight: 800; font-family: var(--font-semi); text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 0; }
.legend .rule { margin: 0; color: var(--fg); }
.legend .rule b { font-weight: 700; }
.legend .who { margin: 0; font-size: var(--t-1); color: var(--fg-3); }

/* ---------------------------------------------------------------- the six rules */
.rules { list-style: none; counter-reset: rule; margin: var(--s4) 0 0; padding: 0; border-top: 2px solid var(--fg); }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s1) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.rules li::before { content: counter(rule); grid-row: 1 / span 2; font-weight: 800; font-family: var(--font-narrow); font-variant-numeric: tabular-nums lining-nums; font-size: var(--t4); line-height: 1; color: var(--figure); }
.rules h3 { font-size: var(--t1); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.rules p { margin: 0; color: var(--fg-2); }

/* the timetable: how prices come in (system .works, tightened for the column) */
.read-col .works { margin-top: var(--s4); }
.read-col .works > div { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); }
.read-col .works dt { font-size: var(--t1); }
.read-col .roster-line { margin-top: var(--s4); }

/* tables: the caption is as wide as its table, so keep its text inside the part a phone can see before scrolling */
.read .table caption { padding-bottom: var(--s3); }
.read .table caption .cap { display: block; max-width: calc(100vw - 2 * var(--gutter) - 4px); }
.read-col .table .k { white-space: nowrap; }
.read-col .note { margin-top: var(--s3); }
/* the commission table is three short columns: let the Store cell wrap so a phone sees all three without scrolling */
#commission-table { min-width: 0; }
#commission-table .num { white-space: nowrap; }

/* ---------------------------------------------------------------- placeholders that must be filled before launch (privacy, terms): the sweep amber, so they cannot ship unnoticed */
.read mark.fill { background: var(--amber); color: var(--on-amber); padding: 0 .3em; border-radius: var(--radius); font-weight: 600; }

/* ---------------------------------------------------------------- reports */
.rlist { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 2px solid var(--fg); }
.rlist li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s3) var(--s6); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); margin: 0; align-items: start; }
.rlist .when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.rlist time { font-weight: 800; font-family: var(--font-narrow); font-variant-numeric: tabular-nums lining-nums; font-size: var(--t3); line-height: 1; text-transform: uppercase; color: var(--figure); }
.rlist h3 { font-size: var(--t2); margin: 0; }
.rlist p { margin: var(--s2) 0 0; color: var(--fg-2); max-width: 64ch; }
.rlist .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s1); font-weight: 600; }
.sample { margin-top: var(--s8); }
.sample .callout { margin-top: var(--s4); }
.sample h3 { margin-top: var(--s5); font-size: var(--t3); }
.sample .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s4); font-weight: 600; }

/* ---------------------------------------------------------------- stores */
.stores-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.stores-ctl .lbl { display: block; }
.stores-ctl .seg button { min-height: 44px; min-width: 44px; padding: 10px 16px; }
.stores-intro { padding-top: var(--s5); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s6); }
.stores-intro .roster { color: var(--fg-2); max-width: 64ch; flex: 1 1 30rem; margin: 0; }
.count { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font-size: var(--t0); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; min-height: 1.5em; white-space: nowrap; }
.count .fig { font-size: var(--t3); }
.count .count-t { min-width: 0; }
/* the board's clock line under the masthead: the two sweep hours, read from the engine, in the store's own time */
.clock-line { margin: var(--s3) 0 0; min-height: 1.5em; font-size: var(--t-1); font-weight: 600; color: var(--fg-2); }
.clock-line time, .clock-line b { font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums lining-nums; }
.stores-table, #store-empty { margin-top: var(--s5); }
#store-table { min-width: 58rem; }
#store-table tbody th { text-align: left; font-size: var(--t-1); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--fg); padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
#store-table tbody th small { display: block; font-weight: 400; color: var(--fg-3); margin-top: 2px; max-width: 34ch; }
/* the store column stays put while the rest scrolls sideways: an opaque ground token, so the cells slide under it in both themes */
#store-table th[scope="row"], #store-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
#store-table .nw { white-space: nowrap; }
#store-table .pays { font-weight: 700; color: var(--fg); }
#store-table .pays small { display: block; font-weight: 400; color: var(--fg-3); }
#store-table .varies { color: var(--fg-2); font-weight: 500; }

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 1100px) {
  .read-grid { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s6) var(--s7); }
}
@media (max-width: 820px) {
  .read-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s5); }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--s5); border-bottom: 1px solid var(--rule); }
  .toc li { border-bottom: 0; }
  .toc-foot { display: none; }
  .read-col .works > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .rlist li { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; }
  .rlist .when { flex-direction: row; align-items: center; gap: var(--s4); }
  .stores-intro { padding-top: var(--s4); }
  .stores-table, #store-empty { margin-top: var(--s4); }
}
@media (max-width: 560px) {
  .read .page-head { padding-bottom: var(--s4); }
  .legend li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .legend .glyph { font-size: var(--t5); }
  .legend h3 { font-size: var(--t1); }
  .rules li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .rules li::before { font-size: var(--t3); }
  .rlist time { font-size: var(--t2); }
  .rlist h3 { font-size: var(--t1); }
  .sample h3 { font-size: var(--t2); }
  /* the regions do not fit one strip at 390: the segment becomes a wrapping row of bordered chips, the pressed one filled */
  .stores-ctl .seg { display: flex; flex-wrap: wrap; width: 100%; gap: var(--s2); border: 0; border-radius: 0; }
  .stores-ctl .seg button { padding: 0 14px; flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: var(--radius); }
  .stores-ctl .seg button[aria-pressed="true"] { border-color: var(--fg); }
  .count { white-space: normal; }
  /* the sticky store column leaves room for the rest of the row at 390: the name wraps inside 9rem */
  #store-table th[scope="row"], #store-table thead th:first-child { width: 9rem; min-width: 9rem; }
  #store-table tbody th small { max-width: none; }
}

/* ===== motion and the large glyphs (2 Nov 2026). Tokens from site.css :root; every rule has its reduced-motion path below. =====
   How we grade: the four glyphs at the board's 1.5 px stroke whatever the scale (the system's non-scaling stroke holds it at every
   size). They draw in once on load, never on scroll: the stroke runs its length, then the fill arrives; page-grade.js sets --len and
   the start state. */
.legend .glyph svg circle, .legend .glyph svg rect, .legend .glyph svg path { stroke-dasharray: var(--len, none); stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset var(--dur-3) var(--ease-out) var(--d, 0ms), fill-opacity var(--dur-2) ease-out calc(var(--d, 0ms) + 260ms); }
.legend .glyph.in svg circle, .legend .glyph.in svg rect, .legend .glyph.in svg path { stroke-dashoffset: var(--len, 0); fill-opacity: 0; transition: none; }
/* feedback on controls only, on the read pages: links give on press; the stores count slides through the system's .fig .v */
.toc ol a, .rlist .more, .sample .back, .toc-foot a, .read-col .note a, .roster-line a, .stores-intro a { transition: color var(--dur-1) ease-out, opacity var(--dur-1) ease-out; }
.toc ol a:active, .rlist .more:active, .sample .back:active, .toc-foot a:active, .read-col .note a:active, .roster-line a:active, .stores-intro a:active { opacity: .72; }
@media (prefers-reduced-motion: reduce) {
  .legend .glyph svg circle, .legend .glyph svg rect, .legend .glyph svg path,
  .legend .glyph.in svg circle, .legend .glyph.in svg rect, .legend .glyph.in svg path { stroke-dashoffset: 0; fill-opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------- finish (2 Nov 2026): a contents-rail jump lands with room above it (the nav is not sticky) */
.read-col [id], .read-col[id], .read h2[id] { scroll-margin-top: var(--s5); }