/* engine/styles/sync.css — r2-2 (v0.2.1): the year-columns home, views/sync.js.
 *
 * Ported from docs/design/home_r1/home.css (Vision r1-2, accepted 2026-09-10, L-44) —
 * "its CSS can be adopted as-is" per the r2-2 dispatch. Every rule below is scoped under
 * `.sync-home` (the id the axial index.html gives sync.js's container), including the
 * custom-property declarations that were on the mock's bare `:root` — this file loads
 * alongside engine.css, which already owns `--ink`, `--rule` and other short token names
 * for chunqiu's own palette (see that file's :root block); redeclaring the same names
 * globally would shadow them site-wide the moment this stylesheet loaded, even on routes
 * this view never touches. Scoping the declarations to `.sync-home` means the cascade only
 * resolves them inside this view's own subtree, and nothing here can bleed into — or be
 * bled into by — engine.css. Class names (`.col`, `.people`, `.track`, `.void.world`, …)
 * are the mock's own; they are likewise only ever applied to elements sync.js builds, all
 * of which live under `.sync-home`, so no `.sync-home` prefix is needed rule-by-rule as
 * long as every top-level selector still starts from it or one of its scoped tokens — most
 * do here for extra safety even where the class name alone would already be unambiguous.
 *
 * No web fonts, no CDN, no script-driven styling: red line 7 holds. */

.sync-home {
  --tc-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
    "Noto Serif","Liberation Serif",Georgia,"Times New Roman",serif,
    "Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun",
    "Noto Serif Hebrew","David Libre","Frank Ruhl Libre",
    "Noto Serif Devanagari","Nirmala UI","Kohinoor Devanagari","Mangal";
  --tc-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Noto Sans","Liberation Sans",sans-serif,
    "Microsoft YaHei","PingFang SC","Noto Sans CJK SC",
    "Noto Sans Hebrew","Arial Hebrew","Nirmala UI","Noto Sans Devanagari";
  --tc-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --sy-page:#fbfaf7;--sy-surface:#ffffff;--sy-sunk:#f4f1ea;--sy-ink:#26231e;
  --sy-soft:#544e44;--sy-faint:#6d6659;--sy-rule:#ded8cc;--sy-hair:#ece7dc;--sy-edge:#8a8375;
  display:block;background:var(--sy-page);color:var(--sy-ink);
  font:15px/1.55 var(--tc-sans);padding:18px 0 8px;
}
/* r3-2 (v0.3.1, "axial owns its own tokens"): the dark palette below is reinstated,
 * token-driven this time, per L-50's promise ("the Round-3 tokens task reinstates" — see
 * the r2-6/L-50 note this replaces, kept in CHANGELOG.md's v0.2.2 and v0.3.1 entries for
 * the history). It no longer floats alone: `--tc-surface`, `--tc-surface-alt`, `--tc-ink`,
 * `--tc-ink-soft` and `--tc-line` are the same `:root` tokens `engine/styles/engine.css`
 * v0.3.1 reads for the header, the body and every other route — set once, by a corpus
 * stylesheet loaded after both of these files (`site/styles/axial.css`; see
 * `patterns/axial.css` in this repo for the ready-to-land content). Reset those tokens and
 * this view's dark palette moves with the rest of the page; the "dark home on a light
 * page" seam r2-4 §2.3 measured cannot recur, because there is only one place that decides
 * what "dark" means, not two. Five of the nine `--sy-*` names alias a `--tc-*` token for
 * exactly this reason (page/surface/ink/soft/edge — the same five r1-2 §8 measured contrast
 * for); the other four (`--sy-sunk`, `--sy-faint`, `--sy-rule`, `--sy-hair`) are this view's
 * own internal texture — a hatch recess, a divider, a card hairline — with no site-wide
 * counterpart in `engine.css`'s two-tier surface set, so they keep the exact literal values
 * this block carried before r2-6 removed it (byte-identical to that removed block). */
@media (prefers-color-scheme: dark) {
  .sync-home {
    --sy-page: var(--tc-surface); --sy-surface: var(--tc-surface-alt); --sy-sunk: #1b1f24;
    --sy-ink: var(--tc-ink); --sy-soft: var(--tc-ink-soft); --sy-faint: #968f83;
    --sy-rule: #39404a; --sy-hair: #2b3038; --sy-edge: var(--tc-line);
  }
}
.sync-home *{box-sizing:border-box}

/* --- masthead: the one sentence, the year, the rail ---------------------- */
.sync-home .one-sentence{font:19px/1.5 var(--tc-serif);margin:0 0 20px;max-width:62ch}
.sync-home .yearline{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sync-home .bigyear{font:600 34px/1 var(--tc-mono);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.sync-home .bigyear small{font-size:14px;font-weight:400;color:var(--sy-faint);margin-left:4px}
.sync-home .summary{margin:14px 0 0;font:12.5px/1.5 var(--tc-mono);color:var(--sy-faint)}

/* --- the legend (r2-6, Vision r2-4 §3(iii), certified L-50): three items, above .grid,
   under .summary — Vision's own rules, carried verbatim; --soft renamed to this file's
   --sy-soft. */
.sync-home .legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0 0;
  font:11.5px/1.5 var(--tc-sans);color:var(--sy-soft)}
.sync-home .legend span{display:flex;align-items:flex-start;gap:7px;max-width:36ch}
.sync-home .k{flex:none;margin-top:4px}
.sync-home .k.dot{width:8px;height:8px;border-radius:50%;background:var(--sy-soft);display:block}
.sync-home .k.dot.hollow{background:transparent;border:1.6px solid var(--sy-soft)}
.sync-home .k.bar{width:26px;height:7px;border-radius:2px;display:block;
  background:linear-gradient(90deg,transparent,var(--sy-soft) 30%,var(--sy-soft) 70%,transparent)}
@media (max-width:720px){ .sync-home .legend span{max-width:none} }

/* --- the year rail: draggable + keyboard, continuous ---------------------- */
.sync-home .railwrap{flex:1 1 420px;min-width:280px}
.sync-home .rail{position:relative;height:40px;cursor:pointer;touch-action:none}
.sync-home .rail:focus-visible{outline:2px solid var(--sy-ink);outline-offset:4px;border-radius:2px}
.sync-home .railcap{display:none;margin:6px 0 0;font:10.5px/1.4 var(--tc-mono);color:var(--sy-faint)}
.sync-home .rail-line{position:absolute;left:0;right:0;top:13px;height:2px;background:var(--sy-rule)}
.sync-home .tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;pointer-events:none}
.sync-home .tick i{display:block;width:2px;height:12px;margin:8px auto 0;background:var(--sy-rule)}
.sync-home .tick b{display:block;font:400 10px/1 var(--tc-mono);color:var(--sy-faint);margin-top:5px}
.sync-home .tick.on i{background:var(--sy-ink);height:16px;margin-top:4px}
.sync-home .tick.on b{color:var(--sy-ink);font-weight:600}
.sync-home .thumb{position:absolute;top:8px;left:0;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;background:var(--sy-ink);box-shadow:0 0 0 3px var(--sy-page);pointer-events:none}
.sync-home .rail-end{position:absolute;top:33px;font:10px/1 var(--tc-mono);color:var(--sy-faint)}
.sync-home .rail-end.l{left:0}.sync-home .rail-end.r{right:0}

/* --- the five columns ---------------------------------------------------- */
.sync-home .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:22px;
  align-items:start}
.sync-home .col{--rc:var(--c);background:var(--sy-surface);border:1px solid var(--sy-hair);
  border-radius:3px;padding:0 13px 14px;min-height:280px;display:flex;
  flex-direction:column}
.sync-home .col-h{margin:0 -13px 10px;padding:0 13px}
.sync-home .col-h .rule{display:block;height:4px;background:var(--rc);margin:0 -13px 9px;
  border-radius:3px 3px 0 0}
.sync-home .col-h .rn{display:block;font:600 15px/1.25 var(--tc-sans)}
.sync-home .col-h .count{display:block;font:11px/1.4 var(--tc-mono);color:var(--sy-faint);
  margin-top:2px;font-variant-numeric:tabular-nums}

/* the synchronic line. Reliability is opacity + outline, never a hue. */
.sync-home .slice{font:15px/1.45 var(--tc-serif);margin:0 0 12px;padding-bottom:11px;
  border-bottom:1px solid var(--sy-hair);opacity:var(--a,1)}
.sync-home .slice .nearest-label{display:block;font:11px/1.4 var(--tc-mono);
  color:var(--sy-faint);margin-bottom:4px}
.sync-home .slice .chip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font:9.5px/1 var(--tc-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sy-faint);vertical-align:1px}
.sync-home .slice .chip i{width:7px;height:7px;border-radius:50%;border:1.4px solid var(--sy-faint)}
.sync-home .slice.r-high .chip i{background:var(--sy-faint)}
.sync-home .slice.r-medium .chip i{background:linear-gradient(90deg,var(--sy-faint) 50%,transparent 50%)}
.sync-home .slice.r-low .chip i{border-style:dotted}
.sync-home .slice .src{display:block;font:10px/1.4 var(--tc-mono);color:var(--sy-faint);margin-top:5px}
.sync-home .slice.missing{font-family:var(--tc-mono);font-size:12px;color:var(--sy-faint)}

/* --- a person ------------------------------------------------------------ */
.sync-home .people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.sync-home .people li{--rc:var(--c)}
.sync-home .nm{display:block;font:14.5px/1.3 var(--tc-sans)}
.sync-home .nm b{font-weight:600}
.sync-home .nm .orig{font:14.5px/1.3 var(--tc-serif);color:var(--sy-soft);margin-left:6px}
.sync-home .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--rc);margin-right:7px;vertical-align:1px}
.sync-home .dot.hollow{background:transparent;border:1.6px solid var(--rc);width:9px;height:9px}
.sync-home .qual{display:inline-block;margin-left:6px;font:9.5px/1.4 var(--tc-mono);
  letter-spacing:.05em;text-transform:uppercase;color:var(--sy-faint);
  border:1px solid var(--sy-edge);border-radius:2px;padding:0 3px}
.sync-home .role{display:block;font:12px/1.4 var(--tc-sans);color:var(--sy-soft);margin:1px 0 5px}
.sync-home .when{display:block;font:11px/1.4 var(--tc-mono);color:var(--sy-faint);
  font-variant-numeric:tabular-nums}

/* the life bar: opaque where certainly alive, fading across each date range */
.sync-home .track{position:relative;display:block;height:7px;margin:0 0 4px;
  background:var(--sy-sunk);border-radius:2px}
.sync-home .track .bar{position:absolute;inset:0;border-radius:2px}
.sync-home .track .now{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:var(--sy-ink);opacity:.55}
.sync-home .track.empty{background:repeating-linear-gradient(90deg,var(--sy-hair) 0 3px,
  transparent 3px 6px);height:5px}
.sync-home .track.clipl{border-left:2px solid var(--rc)}
.sync-home .track.clipr{border-right:2px solid var(--rc)}

/* --- emptiness, told two different ways ---------------------------------- */
.sync-home .void{margin-top:2px;flex:1}
.sync-home .void p{margin:0}
/* (a) about the WORLD: nobody was here. Region colour, serif, full weight. */
.sync-home .void.world{border-left:3px solid var(--rc);padding:2px 0 2px 11px}
.sync-home .void.world .v1{font:italic 15px/1.45 var(--tc-serif);color:var(--sy-ink)}
.sync-home .void.world .v2{font:12px/1.5 var(--tc-sans);color:var(--sy-soft);margin-top:7px}
/* (b) about the CORPUS: we have not written this down yet. Deliberately
   colourless, monospaced and hatched, so it cannot be read as (a). */
.sync-home .void.corpus{border:1px dashed var(--sy-edge);border-radius:2px;padding:10px 11px;
  background:repeating-linear-gradient(135deg,var(--sy-sunk) 0 6px,transparent 6px 12px)}
.sync-home .void.corpus .v1{font:600 12px/1.45 var(--tc-mono);color:var(--sy-soft)}
.sync-home .void.corpus .v2{font:11.5px/1.55 var(--tc-mono);color:var(--sy-faint);margin-top:7px}

/* --- Mesopotamia footnote -------------------------------------------------- */
.sync-home .bg-note{margin:20px 0 0;font:12.5px/1.6 var(--tc-sans);color:var(--sy-soft);
  max-width:82ch;border-top:1px solid var(--sy-hair);padding-top:14px}

/* --- mobile chorus bar: hidden on desktop --------------------------------- */
.sync-home .chorus{display:none}

/* ========================================================================= */
/* MOBILE: a stacked list, not a swipeable row (mock §3 / delivery_vision_r1-2 */
/* §3 — a carousel hides four pillars out of five; simultaneity is the point). */
@media (max-width:720px){
  .sync-home{padding:12px 0 4px}
  .sync-home .one-sentence{font-size:17px;margin:0 0 14px}
  .sync-home .yearline{gap:12px;position:sticky;top:0;z-index:3;background:var(--sy-page);
    padding:8px 0 4px}
  .sync-home .bigyear{font-size:27px}
  .sync-home .railwrap{flex-basis:100%}
  .sync-home .rail{height:26px}
  /* at this width the 500 and 479 labels collide: keep every tick mark, label
     only the year the reader is standing on, and spell the rest out below */
  .sync-home .tick:not(.on) b{display:none}
  .sync-home .rail-end{top:20px}
  .sync-home .railcap{display:block}
  .sync-home .summary{margin-top:10px}

  /* five colour segments with counts, anchored to the sections below */
  .sync-home .chorus{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:14px 0 4px;
    position:sticky;top:78px;z-index:2}
  .sync-home .chorus a{--rc:var(--c);display:flex;flex-direction:column;justify-content:center;
    align-items:center;min-height:46px;text-decoration:none;color:var(--sy-ink);
    background:var(--sy-surface);border:1px solid var(--sy-hair);
    border-top:4px solid var(--rc);border-radius:2px;padding:3px 2px}
  .sync-home .chorus a b{font:600 10px/1.15 var(--tc-sans);text-align:center;
    overflow-wrap:anywhere}
  .sync-home .chorus a i{font:600 14px/1.1 var(--tc-mono);font-style:normal}
  .sync-home .chorus a.nil i{color:var(--sy-faint);font-weight:400}
  .sync-home .chorus a.nil{border-top-style:dotted}
  .sync-home .chorus a:focus-visible{outline:2px solid var(--sy-ink);outline-offset:1px}

  .sync-home .grid{grid-template-columns:1fr;gap:12px;margin-top:12px}
  .sync-home .col{min-height:0;scroll-margin-top:130px}
}
@media (max-width:420px){
  .sync-home .chorus a b{font-size:9px}
  .sync-home .rail-end{display:none}
}
/* r3-2 (v0.3.1): the second `prefers-color-scheme` rule r2-6 removed here is reinstated,
 * unchanged — it was never token-dependent (`--cd` is `liftColour()`'s own per-region
 * computed value, set inline by views/sync.js regardless of theme; this rule only decides
 * when that lifted value is used instead of the raw region colour `--c`). See the
 * file-header note above for why the *page* palette waited for this task and this one
 * did not need to. */
@media (prefers-color-scheme: dark) {
  .sync-home .col, .sync-home .people li, .sync-home .chorus a { --rc: var(--cd); }
}