/* ==========================================================================
   WickmanWatch — interactive FOIA graphics (2026-10-25)
   Reusable, dependency-free, theme-aware. Degrades to readable static markup
   when JavaScript is unavailable.
   ========================================================================== */

.ig{
  margin:26px 0 30px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  padding:18px 18px 20px;
  box-shadow:var(--shadow);
}
.ig + .ig{ margin-top:26px; }

.ig-head{ margin:0 0 14px; }
.ig-kicker{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red-bright); margin:0 0 6px;
}
.ig-title{
  font-family:var(--font-display); font-size:1.18rem; line-height:1.25;
  margin:0 0 6px; color:var(--text); border:0; padding:0; background:none;
}
.ig-sub{ font-size:.82rem; line-height:1.5; color:var(--muted); margin:0; max-width:72ch; }

/* ---- shared controls ---- */
.ig-controls{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 14px;
}
.ig-btn{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer; transition:.16s ease;
}
.ig-btn:hover,.ig-btn:focus-visible{ color:var(--text); border-color:var(--red); }
.ig-btn[aria-pressed="true"]{
  background:var(--red); border-color:var(--red); color:#fff;
}
.ig-hint{
  font-size:.68rem; color:var(--muted-2); margin-left:auto;
  font-family:var(--font-mono); letter-spacing:.03em;
}
@media (max-width:640px){ .ig-hint{ display:none; } }

/* ==========================================================================
   1) MULTI-LANE TIMELINE
   ========================================================================== */
.ig-timeline{ position:relative; padding-top:6px; }
.ig-axis{
  position:relative; height:26px; margin:0 0 6px;
  border-bottom:1px solid var(--line);
}
.ig-axis span{
  position:absolute; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.64rem; color:var(--muted-2);
  bottom:4px; white-space:nowrap;
}
.ig-axis span::after{
  content:""; position:absolute; left:50%; bottom:-7px; width:1px; height:5px;
  background:var(--line);
}
.ig-lane{
  position:relative; height:64px; border-bottom:1px dashed var(--line-soft);
  transition:opacity .2s ease;
}
.ig-lane:last-child{ border-bottom:0; }
.ig-lane-label{
  position:absolute; left:0; top:6px; z-index:2;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
  background:var(--panel); padding-right:8px;
}
.ig-lane.is-dim{ opacity:.28; }
.ig-rail{
  position:absolute; left:0; right:0; top:34px; height:2px;
  background:var(--line); border-radius:2px;
}
.ig-event{
  position:absolute; top:24px; transform:translateX(-50%);
  width:20px; height:20px; padding:0; border-radius:50%;
  border:2px solid var(--panel); background:var(--muted-2);
  cursor:pointer; z-index:3; transition:transform .16s ease, box-shadow .16s ease;
}
.ig-event::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
}
.ig-event:hover,.ig-event:focus-visible{
  transform:translateX(-50%) scale(1.28);
  box-shadow:0 0 0 4px rgba(210,16,52,.22);
  outline:none;
}
.ig-event[aria-pressed="true"]{
  background:var(--red-bright); box-shadow:0 0 0 5px rgba(210,16,52,.28);
}
.ig-event .ig-ev-date{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.58rem; color:var(--muted-2);
  white-space:nowrap; pointer-events:none;
}
.ig-event.is-key{ background:var(--red); }
.ig-lane[data-lane="roberts"] .ig-event{ background:#8a8a99; }
.ig-lane[data-lane="kobasic"] .ig-event{ background:#b0713a; }
.ig-lane[data-lane="foia"] .ig-event{ background:var(--red); }

.ig-detail{
  margin-top:14px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg-soft); padding:12px 14px; min-height:74px;
}
.ig-detail .d-date{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--red-bright); display:block; margin-bottom:3px;
}
.ig-detail .d-title{ font-weight:700; color:var(--text); display:block; margin-bottom:3px; }
.ig-detail .d-body{ font-size:.82rem; line-height:1.5; color:var(--muted); margin:0; }
.ig-detail .d-empty{ font-size:.82rem; color:var(--muted-2); margin:0; font-style:italic; }

/* ==========================================================================
   2) SCORECARD GRID
   ========================================================================== */
.ig-score-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
}
.ig-score{
  position:relative; text-align:left; width:100%;
  border:1px solid var(--line); border-top:4px solid var(--muted-2);
  border-radius:9px; background:var(--bg-soft);
  padding:13px 14px 14px; cursor:pointer; color:var(--text);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  font-family:inherit;
}
.ig-score:hover,.ig-score:focus-visible{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); outline:none;
}
.ig-score:focus-visible{ box-shadow:0 0 0 3px rgba(210,16,52,.35); }
.ig-score .sc-num{
  font-family:var(--font-mono); font-size:.62rem; color:var(--muted-2);
  letter-spacing:.1em; display:block; margin-bottom:6px;
}
.ig-score .sc-cat{
  font-size:.86rem; font-weight:700; line-height:1.3; display:block; margin-bottom:9px;
}
.ig-score .sc-out{
  display:inline-block; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:999px;
  border:1px solid currentColor;
}
.ig-score .sc-answer{
  display:block; font-size:.76rem; line-height:1.45; color:var(--muted);
  margin-top:10px; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.ig-score[aria-expanded="true"] .sc-answer{ max-height:320px; opacity:1; }
.ig-score .sc-more{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--red-bright); margin-top:10px; display:block;
}
.ig-score .sc-legal{
  display:block; font-size:.72rem; line-height:1.45; color:var(--muted-2);
  border-top:1px solid var(--line-soft); margin-top:10px; padding-top:8px;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s ease;
}
.ig-score[aria-expanded="true"] .sc-legal{ max-height:220px; opacity:1; }

.ig-score[data-outcome="granted"]{ border-top-color:#2fbf71; }
.ig-score[data-outcome="granted"] .sc-out{ color:#4ade80; }
.ig-score[data-outcome="nonexistent"]{ border-top-color:var(--amber); }
.ig-score[data-outcome="nonexistent"] .sc-out{ color:#f5b73d; }
.ig-score[data-outcome="denied"]{ border-top-color:var(--red); }
.ig-score[data-outcome="denied"] .sc-out{ color:var(--red-bright); }
html[data-theme="light"] .ig-score[data-outcome="granted"] .sc-out{ color:#1c7a45; }
html[data-theme="light"] .ig-score[data-outcome="nonexistent"] .sc-out{ color:#9a6a00; }
/* Case-watch articles keep a dark surface in both themes, so the outcome
   chips there need the bright variants rather than the light-card colours. */
html[data-theme="light"] .cw-page .ig-score[data-outcome="granted"] .sc-out{ color:#4ade80; }
html[data-theme="light"] .cw-page .ig-score[data-outcome="nonexistent"] .sc-out{ color:#f5b73d; }

.ig-tally{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  border-top:1px solid var(--line-soft); padding-top:12px;
}
.ig-tally .t-item{
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.ig-tally .t-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ==========================================================================
   3) RESPONSE CLOCK
   ========================================================================== */
.ig-clock{ position:relative; }
.ig-clock-track{
  position:relative; height:96px; margin:24px 0 8px;
  border-radius:8px; background:var(--bg-soft); border:1px solid var(--line-soft);
}
.ig-clock-band{
  position:absolute; top:0; bottom:0; border-radius:6px;
  background:linear-gradient(180deg, rgba(210,16,52,.16), rgba(210,16,52,.05));
}
.ig-clock-band.is-used{ background:linear-gradient(180deg, rgba(47,191,113,.18), rgba(47,191,113,.05)); }
.ig-clock-tick{
  position:absolute; bottom:0; width:1px; height:10px; background:var(--line);
}
.ig-clock-tick span{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.56rem; color:var(--muted-2); white-space:nowrap;
}
.ig-clock-mark{
  position:absolute; top:0; bottom:0; width:2px; background:var(--red);
  transform:translateX(-1px);
}
.ig-clock-mark::before{
  content:attr(data-label); position:absolute; top:-20px; left:50%;
  transform:translateX(-50%); font-family:var(--font-mono); font-size:.58rem;
  color:var(--red-bright); white-space:nowrap; letter-spacing:.04em;
}
.ig-clock-dot{
  position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:var(--red); border:2px solid var(--panel); transform:translate(-50%,-50%);
  cursor:pointer; z-index:3; transition:transform .16s ease, box-shadow .16s ease;
}
.ig-clock-dot:hover,.ig-clock-dot:focus-visible{
  transform:translate(-50%,-50%) scale(1.35); box-shadow:0 0 0 4px rgba(210,16,52,.25); outline:none;
}
.ig-clock-dot[aria-pressed="true"]{ background:var(--red-bright); box-shadow:0 0 0 5px rgba(210,16,52,.3); }
.ig-clock-dot.is-ok{ background:#2fbf71; }

.ig-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin-top:16px;
}
.ig-step{
  border:1px solid var(--line-soft); border-radius:8px; padding:10px 12px;
  background:var(--bg-soft); text-align:left; cursor:pointer; color:var(--text);
  font-family:inherit; transition:border-color .16s ease, transform .16s ease;
}
.ig-step:hover,.ig-step:focus-visible{ border-color:var(--red); transform:translateY(-1px); outline:none; }
.ig-step[aria-pressed="true"]{ border-color:var(--red); background:var(--panel-2); }
.ig-step .st-day{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:4px;
}
.ig-step .st-name{ font-size:.8rem; font-weight:700; display:block; line-height:1.3; }
.ig-step .st-date{ font-family:var(--font-mono); font-size:.66rem; color:var(--red-bright); display:block; margin-top:4px; }

.ig-meter{
  display:flex; align-items:center; gap:12px; margin-top:16px;
  border-top:1px solid var(--line-soft); padding-top:14px;
}
.ig-meter-bar{
  flex:1; height:12px; border-radius:6px; background:var(--line-soft); overflow:hidden;
}
.ig-meter-fill{
  height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--red-deep),var(--red-bright));
  transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.ig-meter-fill.is-ok{ background:linear-gradient(90deg,#1c7a45,#2fbf71); }
.ig-meter-label{
  font-family:var(--font-mono); font-size:.7rem; color:var(--muted); white-space:nowrap;
}
.ig-meter-label b{ color:var(--text); }

.ig-note{
  font-size:.72rem; line-height:1.5; color:var(--muted-2); margin:14px 0 0;
  border-top:1px solid var(--line-soft); padding-top:10px;
}
.ig-note strong{ color:var(--muted); }

@media (max-width:720px){
  .ig{ padding:14px 13px 16px; }
  .ig-axis span{ font-size:.56rem; }
  .ig-lane{ height:58px; }
  .ig-event .ig-ev-date{ display:none; }
  .ig-clock-track{ height:84px; }
  .ig-clock-tick span{ font-size:.5rem; }
}
@media print{
  .ig{ box-shadow:none; break-inside:avoid; }
  .ig-controls,.ig-hint{ display:none; }
}

/* Lane-level note (used when a lane uses its own expanded scale) */
.ig-lane-note{
  position:absolute; right:0; top:6px; z-index:2;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--red-bright);
  background:var(--panel); padding-left:8px;
}
@media (max-width:720px){ .ig-lane-note{ font-size:.52rem; } }

/* ==========================================================================
   4) INTERACTIVE BAR CHART (horizontal, optional stacked segments)
   ========================================================================== */
.ig-bars{ margin:6px 0 0; }
.ig-bar-row{
  display:grid; grid-template-columns:minmax(130px,1.1fr) minmax(0,2.6fr) minmax(64px,auto);
  align-items:center; gap:12px; padding:9px 0;
  border-top:1px solid var(--line-soft); cursor:pointer;
  background:none; border-left:0; border-right:0; border-bottom:0;
  width:100%; text-align:left; font-family:inherit; color:var(--text);
}
.ig-bar-row:first-child{ border-top:0; }
.ig-bar-row:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; border-radius:6px; }
.b-label{ font-size:.78rem; color:var(--muted); line-height:1.35; }
.b-label b{ color:var(--text); display:block; font-size:.82rem; }
.b-track{
  display:flex; height:18px; border-radius:5px; overflow:hidden;
  background:var(--line-soft);
}
.b-seg{
  height:100%; width:0; transition:width .8s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(90deg,var(--red-deep),var(--red-bright));
}
.b-seg[data-kind="felony"]{ background:linear-gradient(90deg,#7d0618,#c00d2e); }
.b-seg[data-kind="misdemeanor"]{ background:linear-gradient(90deg,#b0713a,#e0a526); }
.b-seg[data-kind="covered"]{ background:linear-gradient(90deg,#1c7a45,#2fbf71); }
.b-seg[data-kind="gap"]{ background:repeating-linear-gradient(45deg,#8a8a99,#8a8a99 6px,#6a6a78 6px,#6a6a78 12px); }
.b-val{
  font-family:var(--font-mono); font-size:.8rem; color:var(--text);
  text-align:right; font-variant-numeric:tabular-nums;
}
.b-note{
  grid-column:1 / -1; font-size:.74rem; line-height:1.5; color:var(--muted-2);
  max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s ease;
}
.ig-bar-row[aria-expanded="true"] .b-note{ max-height:160px; opacity:1; padding-top:4px; }
.ig-legend{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:12px;
  font-size:.7rem; color:var(--muted);
}
.ig-legend i{ display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.ig-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:14px;
}
.ig-stat{
  border:1px solid var(--line-soft); border-radius:8px; padding:9px 12px; background:var(--bg-soft);
}
.ig-stat .k{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); display:block; margin-bottom:3px; }
.ig-stat .v{ font-family:var(--font-mono); font-size:1rem; color:var(--text); font-variant-numeric:tabular-nums; }
.ig-stat .v.acc{ color:var(--red-bright); }
@media (max-width:640px){
  .ig-bar-row{ grid-template-columns:minmax(96px,1.1fr) minmax(0,2fr) minmax(52px,auto); gap:8px; }
  .b-label{ font-size:.72rem; }
  .b-val{ font-size:.72rem; }
}