/* Cases ledger, case page and claim page. Owned by the page agent; base.css holds the shared primitives.
   Everything here is prefixed ledger- / case- / claim- or scoped under .ledger-page, .case, .claim. */

/* ---------- shared: checkbox chips need a visible focus ring (the input itself is hidden) ---------- */
.ledger-page .chips label:has(:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- ledger ---------- */
.ledger-count { margin: 4px 0 0; font: 700 var(--t-h3)/1 var(--ui); font-stretch: 84%; color: var(--fg); }
.ledger-filters { display: grid; gap: 10px; padding-bottom: clamp(18px, 2vw, 28px); }
.ledger-f { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.ledger-fl { padding-top: 8px; font: 500 var(--t-small)/1.25 var(--ui); font-stretch: 88%; color: var(--fg-2); }
.ledger-f .chips { padding: 2px; }
.ledger-f .chips label { position: relative; }   /* base hides the checkbox with position: absolute; keep it inside its chip */
.ledger-era { padding-top: clamp(26px, 3vw, 48px); }
.ledger-eh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 10px 0 12px; background: var(--bg); }
.ledger-eh p { margin: 0; font: 400 var(--pp-body)/1.35 var(--serif); color: var(--fg-2); }
.ledger-eh .num { margin-left: auto; font-size: var(--t-small); font-stretch: 90%; color: var(--fg-2); }
.ledger-none { display: grid; justify-items: start; gap: 16px; padding: 48px 0 80px; }
.ledger-none p { margin: 0; font: 400 var(--pp-subhead)/1.4 var(--serif); }
.ledger-page #lrows { padding-bottom: clamp(48px, 6vw, 112px); }
.ledger-page .ledger li a { padding: 10px 0; }
.ledger-page .ledger .lm:empty, .case .ledger .lm:empty, .claim .ledger .lm:empty { display: none; }   /* base keeps an empty chip row on mobile */
.ledger-page .ledger li { scroll-margin-top: 140px; }   /* a year jump lands below the sticky top bar and era heading */
@media (max-width: 820px) { .ledger-page .ledger li { scroll-margin-top: 200px; } }   /* two-row top bar; era heading not sticky */
@media (min-width: 821px) { .ledger-eh { position: sticky; top: 60px; z-index: 2; } }
@media (max-width: 760px) {
  .ledger-f { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ledger-fl { padding-top: 0; }
  .ledger-f .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 3px var(--gutter); }
  .ledger-f .chips::-webkit-scrollbar { display: none; }
  .ledger-f .chips > * { flex: none; }
  .ledger-page .ledger li a, .case .ledger li a, .claim .ledger li a { align-items: start; }
  .ledger-page .ledger .ly, .case .ledger .ly, .claim .ledger .ly { padding-top: 1px; }
}

/* ---------- case: the stage ---------- */
.case-stage .frame { margin: 0; border-radius: 0; }
.case-stage.is-recon .frame-img { max-height: none; }
.case-stage.is-real .frame-img { max-height: min(70vh, 640px); }
.case-stage.is-real .frame-img > img { object-fit: contain; }
.case-stage .slate a { color: var(--bone); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .case-stage .frame.push .frame-img > img, .case-stage .frame.push .frame-img > canvas.depth {
      animation: case-push linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes case-push { from { transform: scale(1); } to { transform: scale(1.04); } }

.case-head { display: grid; gap: 18px; padding-top: clamp(26px, 3vw, 52px); }
.case-head.is-plain { padding-top: clamp(40px, 5.5vw, 96px); }
.case-head h1 { max-width: 26ch; }
.case-slate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px 32px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 1280px; }
.case-slate > div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.case-slate dt { font: 500 var(--t-small)/1.25 var(--ui); font-stretch: 88%; color: var(--fg-2); }
.case-slate dd { margin: 0; font: 500 var(--t-ui)/1.4 var(--ui); font-stretch: 94%; font-variant-numeric: tabular-nums; }

/* ---------- case: sections ---------- */
.case-sec { padding-top: clamp(44px, 5.5vw, 96px); }
.case-sec > h2 { margin-bottom: clamp(14px, 1.6vw, 24px); }
.case-cols { display: grid; gap: clamp(28px, 4vw, 72px); align-items: start; }
.case-study { margin: 0 0 18px; max-width: 68ch; }
.case .prose h3 { margin: 1.5em 0 .45em; font-size: var(--t-h3); }
.case .prose p:last-child { margin-bottom: 0; }
.case-aside { display: grid; gap: 24px; align-content: start; }
.case-traits { display: grid; gap: 10px; }
.case-traits .prov { margin: 0; }
.case-sheet .sheet { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-sheet h3 { font-size: var(--t-ui); font-stretch: 92%; color: var(--fg-2); }
.case-sheet .kv { font-size: var(--t-small); grid-template-columns: max-content minmax(0, 1fr); }
.case-sheet .prov { margin: 0; }
.case-aside .disclose ul { margin: 6px 0 0; padding-left: 18px; }
.case-aside .disclose .kv { font-size: var(--t-small); }
.case-aside details.disclose details summary::before { content: "+"; }   /* base's marker rule also hits the nested prompt disclosure */
.case-aside details.disclose details[open] summary::before { content: "–"; }
@media (min-width: 1001px) { .case-cols:has(> .case-aside) { grid-template-columns: minmax(0, 68ch) minmax(260px, 400px); } .case-aside { padding-top: 6px; } }
.case-reading { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px clamp(24px, 3vw, 48px);
  margin-top: clamp(36px, 4vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); }
.case-reading > h3 { grid-column: 1 / -1; }
.case-reading h4 { margin: 0 0 6px; font: 600 var(--t-ui)/1.3 var(--ui); font-stretch: 92%; color: var(--fg-2); }
.case-reading p { margin: 0 0 .5em; max-width: 62ch; font: 400 var(--pp-body)/1.5 var(--serif); }
.case-reading .prov { font-family: var(--ui); font-size: var(--t-small); }

/* ---------- case and claim: the record, on paper ---------- */
.case-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2vw, 30px); overflow-wrap: break-word; }
.case-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(18px, 2vw, 30px) clamp(24px, 3vw, 48px); align-items: start; }
.panel .rec .t .chip.strong { color: var(--paper); }   /* base's .rec .t span colour outranks .chip.strong */
.case-panel h3 { margin-bottom: 10px; font-size: var(--t-ui); font-stretch: 92%; color: var(--ink-2); }
.case-panel .rec { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.case-none { margin: 0; font: 400 var(--pp-subhead)/1.4 var(--serif); }
.case-prog { margin: 0; font-size: var(--t-ui); }
.case .srcs, .claim .srcs, .case-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.case .srcs li, .claim .srcs li, .case-topics li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.case .srcs a, .claim .srcs a, .case-topics a { font: 500 var(--t-ui)/1.35 var(--ui); font-stretch: 94%; }
.case .srcs small, .claim .srcs small { font-size: var(--t-small); }
.case-what { max-width: 68ch; font: 400 var(--pp-body)/1.45 var(--serif); color: var(--fg-2); }
.case-arch .prov { margin: 0; }
.case-topics span { max-width: 68ch; font: 400 var(--pp-body)/1.45 var(--serif); color: var(--fg-2); }

/* ---------- case: coverage, claims, related, footer ---------- */
.case-vids { align-items: start; }
.case-threads li a { grid-template-columns: minmax(0, 1fr); }
.case-relnote { margin: -8px 0 16px; max-width: 68ch; }
.case-rel .lt .tags { margin-top: 3px; }
.case-foot { padding-block: clamp(44px, 5.5vw, 96px) 64px; display: grid; gap: 18px; }
.case-foot > h2 { font-size: var(--t-h3); }
.case-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 40px; align-items: start; }
.case-srcs h3 { margin-bottom: 8px; font-size: var(--t-ui); font-stretch: 92%; color: var(--fg-2); }
.case-foot > .prov { margin: 0; max-width: 100ch; }

/* ---------- claim ---------- */
.claim-stats { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 16px clamp(20px, 2.4vw, 32px); max-width: 1280px; }
.claim-stats li { display: grid; gap: 4px; align-content: start; }
.claim-stats b { font: 800 var(--pp-title)/1 var(--ui); font-stretch: 74%; }
.claim-stats span { font-size: var(--t-small); color: var(--fg-2); max-width: 26ch; }
.claim-venue { grid-column: span 2; }
.claim-panel { display: grid; gap: 12px; }
.claim-lede { margin: 0 0 8px; max-width: 68ch; font: 400 var(--pp-body)/1.5 var(--serif); color: var(--ink-2); }
.claim-table { border-top: 2px solid var(--ink); }
.claim-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.claim-th > span { padding: 10px 18px 10px 0; font: 600 var(--t-ui)/1.2 var(--ui); font-stretch: 90%; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.claim-th > span + span { padding-left: 18px; }
.claim-tr > div { min-width: 0; padding: 16px 18px 18px 0; border-bottom: 1px solid var(--rule); }
.claim-tr > div + div { padding-left: 18px; border-left: 1px solid var(--rule-2); }
.claim-tr p { margin: 0 0 8px; }
.claim-a p { font: 500 var(--pp-body)/1.45 var(--serif); }
.claim-echo + .claim-echo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.claim-who { font: 500 var(--t-small)/1.4 var(--ui); font-stretch: 94%; color: var(--ink-2); }
.claim-who b { color: var(--ink); font-weight: 650; }
.claim-enote { max-width: 68ch; font: 400 var(--pp-body)/1.5 var(--serif); }
.claim-tr .tags { gap: 5px; }
.claim-tr a.chip { text-decoration: none; color: var(--ink); }
.claim-tr a.chip:hover { border-color: var(--ink-2); }
.claim-cl { display: none; }
@media (max-width: 900px) {
  .claim-th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* hidden, but still the table's column headers */
  .claim-tr { grid-template-columns: minmax(0, 1fr); padding: 6px 0 16px; border-bottom: 2px solid var(--ink); }
  .claim-tr > div, .claim-tr > div + div { padding: 10px 0 0; border: 0; }
  .claim-cl { display: block; margin: 4px 0 8px; padding-top: 10px; border-top: 1px solid var(--rule); font: 600 var(--t-small)/1.2 var(--ui); font-stretch: 90%; color: var(--ink-2); }
}
@media (max-width: 600px) { .claim-venue { grid-column: auto; } }