/* 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;
}
/* r2-6 (v0.2.2, L-50): the two `prefers-color-scheme` rules that used to live here (the
 * dark palette above, and the `--rc:var(--cd)` swap near the bottom of this file) are
 * removed, not just left unused. Half-dark — a dark home floating on an otherwise-light
 * page, header and footer included, measured in docs/delivery_vision_r2-4.md §2.3 — is
 * worse than no dark mode at all, and this view is the *only* place in the engine dark
 * mode ever ran (`engine.css` carries zero `prefers-color-scheme` blocks of its own). The
 * Round-3 "axial owns its own tokens" task reinstates dark mode for the whole page at
 * once, from one corpus-level override point, rather than patching it back in here alone.
 * `liftColour()` and the `--cd` custom properties this view still sets inline per element
 * are untouched — they are dead weight until that task lands, not a defect to unwind now,
 * and removing them here would be a second, unasked-for edit to a file already carrying
 * one deliberate change this round. */
.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}
}
/* the second `prefers-color-scheme` rule removed here (r2-6, L-50) set
 * `--rc:var(--cd)` on `.col`/`.people li`/`.chorus a` — see the file-header note above. */