/* ============================================================================
   The Constellation — compat.v1.css
   Bridge layer: live renderer + index markup → Instrument app.css.
   Tokens only. Immutable once referenced; next change = compat.v2.css.
   ========================================================================== */

/* legacy chart SVG alias used by existing job fragments */
:root, [data-theme]{ --chartgrid: var(--chart-grid); }

/* reading mast: keep legacy .mast class if present */
.mast.reading, .reading-mast{ max-width:var(--measure); margin:0 auto; padding:78px 24px 20px; }

/* bare body h3 (renderer emits <h3><span class="num">, not h3.sub) */
.body h3, h3{ margin:30px 0 6px; color:var(--ink); scroll-margin-top:20px; }
.body h3 .num, h3 .num{ font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--muted); margin-right:.6em; }
h4{ font-family:var(--serif); font-size:16px; font-weight:600; margin:20px 0 2px; color:var(--ink); }
.attr{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.02em; }
em.tag{ color:var(--muted); font-style:italic; font-size:15px; }

/* about wash (renderer + design-system) */
.about{ background:color-mix(in srgb, var(--sc) 13%, transparent); }

/* renderer source lists: li::before counters + .primary::after (no .n/.tag spans) */
.sources ol{ counter-reset:s; }
.sources li{ position:relative; padding:7px 0 7px 34px; display:block; }
.sources li::before{ content:counter(s); counter-increment:s; position:absolute; left:0; top:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--muted);
  border:1px solid var(--hair2); border-radius:50%; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; }
.sources li.primary::after{ content:"primary"; margin-left:8px; font-family:var(--mono);
  font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sc); border:1px solid var(--sc); border-radius:var(--radius-pill);
  padding:1px 6px; vertical-align:1px; white-space:nowrap; }
.sources a.cite, a.cite{ font-family:var(--mono); font-size:11px; font-weight:600;
  vertical-align:super; line-height:0; color:var(--sc); border-bottom:none; padding:0 1px; }
a.cite:hover{ color:var(--ink); }

/* index: button-based view switcher (mockup uses anchors) */
#viewsw, .viewsw{ display:inline-flex; margin:20px 0 2px; background:var(--card);
  border:1px solid var(--hair); border-radius:var(--radius-pill); overflow:hidden; }
#viewsw button{ border:none; background:none; font-family:var(--mono); font-size:11px;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:9px 24px;
  cursor:pointer; color:var(--muted); }
#viewsw button.on, #viewsw button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }

/* catalog schedule (live index; not in static mockup) */
details.sched{ display:inline-block; margin:4px 0 2px; }
details.sched summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:8px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--hair);
  border-radius:var(--radius-pill); padding:6px 14px; background:var(--card); }
details.sched summary::-webkit-details-marker{ display:none; }
details.sched summary::after{ content:"▾"; font-size:9px; transition:transform .2s; }
details.sched[open] summary::after{ transform:rotate(180deg); }
details.sched summary:hover{ border-color:var(--muted); color:var(--ink2); }
.schedbody{ margin:12px auto 0; max-width:440px; background:var(--card); border:1px solid var(--hair);
  border-radius:var(--radius); padding:6px 18px; box-shadow:var(--shadow); text-align:left; }
.schedrow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--hair);
  font-size:14px; color:var(--ink2); }
.schedrow:first-child{ border-top:none; }
.schedrow .dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--sc,var(--hair2)); }
.schedrow b{ font-weight:600; color:var(--ink); font-family:var(--serif); }
.schedrow .t{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--muted); }

/* empty + skip */
.card .lbl .time{ margin-left:auto; }
.empty{ color:var(--muted); font-style:italic; text-align:center; margin-top:40px; }
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus-visible{ position:fixed; left:16px; top:16px; z-index:100; width:auto; height:auto;
  padding:10px 14px; background:var(--card); color:var(--ink); border:1px solid var(--hair);
  border-radius:var(--radius-pill); font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; box-shadow:var(--shadow); }

/* theme button id (validate + template contract) */
#themebtn{ flex:none; width:36px; height:32px; padding:0; border-radius:var(--radius-pill);
  cursor:pointer; background:var(--card); border:1px solid var(--hair); color:var(--ink);
  font-size:14px; line-height:1; transition:transform .2s, border-color .2s; }
#themebtn.fixed, button.themebtn.fixed#themebtn{ position:fixed; top:16px; right:16px; z-index:50;
  width:38px; height:34px; background:var(--panel); backdrop-filter:blur(9px); box-shadow:var(--shadow); }
#themebtn:hover{ border-color:var(--muted); transform:rotate(18deg); }
#stamp{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* focus + responsive */
.card:focus-visible, #viewsw button:focus-visible, #themebtn:focus-visible, .themebtn:focus-visible,
.back:focus-visible, .btn:focus-visible, a.cite:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:560px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  #stamp{ display:none; }
}
@media print{
  .skip, details.sched, #viewsw{ display:none !important; }
}