/* ============================================================
   CalPERS IC Action Items site
   Palette: charcoal ink, cool record-room gray, marker yellow
   Type: Public Sans (UI/body) · IBM Plex Mono (dates, counts)
   ============================================================ */

:root{
  --ink:        #16181d;
  --ink-soft:   #3c4046;
  --paper:      #eef0ee;   /* cool archival gray-white */
  --card:       #ffffff;
  --rule:       #c9cdc9;
  --marker:     #ffc100;   /* the highlighter */
  --flag:       #d92d0c;   /* flash / attention */
  --banner:     #1d2126;
  --sans: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  /* exact agenda highlight strokes — single source of truth is items.json,
     these are fallbacks for the banner swipe only */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
}
.mono{font-family:var(--mono);}

/* ===================== banner ===================== */
.banner{
  background:var(--banner);
  color:#fff;
  padding:56px clamp(20px,6vw,88px) 48px;
  border-bottom:6px solid var(--marker);
}
.banner-kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b9bec6;
  margin:0 0 14px;
}
.banner-title{
  font-size:clamp(28px,4.4vw,52px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  max-width:18em;
}
/* signature: a literal highlighter swipe */
.swipe{
  position:relative;
  white-space:nowrap;
}
.swipe::before{
  content:"";
  position:absolute;
  left:-.18em; right:-.18em; top:.08em; bottom:-.02em;
  background:rgba(255,193,0,.5);
  transform:skew(-9deg) rotate(-.6deg);
  border-radius:.12em .3em .14em .4em;
  z-index:0;
}
.swipe{z-index:1;}
.swipe > *{position:relative;z-index:1;}
.banner-sub{
  margin:18px 0 0;
  max-width:46em;
  color:#cdd2d8;
  font-size:clamp(15px,1.6vw,18px);
}

/* ===== RPEA attribution — inspection-stamp treatment ===== */
.banner{position:relative;}
.rpea-stamp{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18em;
  width:fit-content;
  margin:0 auto 40px;
  transform:rotate(-2deg);
  padding:.9em 1.4em .85em;
  border:.22em solid currentColor;
  border-radius:.9em / 1.3em;
  color:#b795e8;                       /* denatured-violet ink */
  font-family:var(--mono);
  font-size:clamp(11px,1.9vw,24px);
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  /* uneven ink take-up */
  -webkit-mask-image:radial-gradient(120% 90% at 38% 30%, #000 55%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(120% 90% at 38% 30%, #000 55%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.55) 100%);
}
.rpea-stamp .stamp-line{white-space:nowrap;}
.rpea-stamp .stamp-strong{
  font-weight:700;
  letter-spacing:.16em;
}
.rpea-stamp .stamp-rule{
  width:58%;
  height:0;
  border-top:.14em solid currentColor;
  margin:.4em 0;
}

/* ===================== commentary ===================== */
.commentary{
  max-width:78rem;
  padding:36px clamp(20px,5vw,72px) 26px;
}
.commentary h2{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.commentary p{margin:0 0 14px; color:var(--ink-soft);}
.commentary .howto{
  color:var(--ink);
  border-left:4px solid var(--marker);
  padding:10px 0 2px 14px;
  background:rgba(255,193,0,.08);
}
.commentary .howto h3{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 10px;
}
.commentary .howto p{color:var(--ink); margin:0 0 12px;}

/* ===================== workspace ===================== */
.workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px 280px;
  gap:0;
  height:100dvh;
  border-top:1px solid var(--rule);
}
.viewer-pane{
  min-width:0;
  background:#fff;
  border-right:1px solid var(--rule);
}
#agendaFrame{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ------ the key (non-scrolling right frame) ------ */
.key-pane{
  background:var(--paper);
  padding:22px 18px;
  overflow:hidden;
}
.key-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule);
  border-top:7px solid var(--marker);
  border-radius:3px;
  padding:26px 18px 16px;
  box-shadow:0 6px 22px rgba(22,24,29,.16), 0 1px 3px rgba(22,24,29,.10);
  animation:keyGlow 4.5s ease-in-out infinite;
}
@keyframes keyGlow{
  0%,100%{box-shadow:0 6px 22px rgba(22,24,29,.16), 0 1px 3px rgba(22,24,29,.10),
                     0 0 8px 1px rgba(255,193,0,.35);}
  50%    {box-shadow:0 6px 26px rgba(22,24,29,.18), 0 1px 3px rgba(22,24,29,.10),
                     0 0 30px 7px rgba(255,193,0,.70);}
}
@media (prefers-reduced-motion:reduce){
  .key-card{animation:none;
    box-shadow:0 6px 22px rgba(22,24,29,.16), 0 1px 3px rgba(22,24,29,.10),
               0 0 22px 5px rgba(255,193,0,.55);}
}
.key-badge{
  position:absolute;
  top:-12px; left:16px;
  display:inline-block;
  background:linear-gradient(180deg,#ffce3a 0%,#f5b400 100%);
  color:#3a2e00;
  font-family:var(--sans);
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:20px;
  box-shadow:0 2px 6px rgba(180,130,0,.35);
}
.key-title{
  position:relative;
  display:inline-block;
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 8px;
  z-index:1;
}
.key-title::before{      /* marker-swipe behind the title (item 4) */
  content:"";
  position:absolute;
  left:-.2em; right:-.2em; top:.1em; bottom:0;
  background:rgba(255,193,0,.55);
  transform:skew(-9deg) rotate(-.6deg);
  border-radius:.12em .3em .14em .4em;
  z-index:-1;
}
.key-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.key-list{
  list-style:none;
  margin:0;
  padding:0;
}
.key-list li{margin:0 0 6px;}
.key-btn{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  padding:9px 10px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
.key-btn:hover{
  background:rgba(22,24,29,.05);
  border-color:var(--rule);
  transform:translateX(2px);
}
.key-btn:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}
.key-btn.is-selected{
  background:rgba(255,193,0,.14);
  border-color:var(--marker);
  box-shadow:inset 3px 0 0 var(--marker);
}
.key-swatch{
  height:26px;
  border:1.5px solid rgba(22,24,29,.32);
  border-radius:2px 6px 2px 7px;     /* marker-stroke corners */
  transform:rotate(-1.2deg);
  box-shadow:0 1px 2px rgba(22,24,29,.12);
}
.key-name{line-height:1.25;}
.key-count{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:11px;
  padding:2px 9px;
  min-width:1.4em;
  text-align:center;
}
.key-btn.is-selected .key-count{
  background:var(--marker);
  border-color:var(--marker);
}
.key-foot{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-soft);
}

/* ===================== overlay ===================== */
.overlay{position:fixed;inset:0;z-index:50;}
.overlay[hidden]{display:none;}
.overlay-backdrop{
  position:absolute;inset:0;
  background:rgba(22,24,29,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:ovFade .18s ease both;
}
@keyframes ovFade{from{opacity:0;}to{opacity:1;}}
@keyframes ovRise{from{opacity:0;transform:translateY(14px) scale(.985);}
                  to{opacity:1;transform:none;}}
.overlay-card{
  position:absolute;
  inset:6vh 6vw;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-top:6px solid var(--marker);
  border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
  animation:ovRise .22s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion:reduce){
  .overlay-backdrop,.overlay-card{animation:none;}
}
.overlay-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px 15px;
  border-bottom:1px solid var(--rule);
}
.overlay-chip{
  width:40px;height:22px;
  border:1px solid rgba(22,24,29,.28);
  border-radius:2px 6px 2px 7px;
  transform:rotate(-1.2deg);
  flex:0 0 auto;
}
.overlay-headings{min-width:0;flex:1;}
.overlay-head h2{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
}
.overlay-count{
  margin:2px 0 0;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
}
.overlay-close{
  flex:0 0 auto;
  background:#f1f0ec;border:1px solid var(--rule);
  width:34px;height:34px;border-radius:50%;
  font-size:22px;line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease,transform .12s ease;
}
.overlay-close:hover{background:var(--flag);color:#fff;transform:rotate(90deg);}
.overlay-close:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}
.overlay-scroll{overflow:auto;flex:1;}

/* ------ items table ------ */
.item-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.item-table th{
  position:sticky;top:0;
  background:var(--card);
  text-align:left;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:10px 14px;
  border-bottom:2px solid var(--ink);
}
.item-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.item-table tbody tr:hover{background:rgba(255,193,0,.10);}
.item-link{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(22,24,29,.35);
}
.item-link:hover{border-bottom-color:var(--flag);color:var(--flag);}
.td-date{white-space:nowrap;font-family:var(--mono);font-size:12.5px;}
.td-speakers{white-space:nowrap;font-family:var(--mono);font-size:12.5px;text-align:center;}
.col-date{white-space:nowrap;}
.col-speakers{white-space:nowrap;text-align:center;}
.spk-count{font-weight:700;}
.col-link{white-space:nowrap;}
.doc-link{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  text-decoration:underline;
}
.doc-pending{
  font-family:var(--mono);
  font-size:12px;
  color:#9aa0a6;
}

/* ===================== footer ===================== */
.site-foot{
  padding:3px clamp(20px,6vw,88px);
  border-top:1px solid var(--rule);
  font-size:9.5px;
  line-height:1.25;
  color:var(--ink-soft);
}
.site-foot p{margin:0;}

/* ===================== responsive ===================== */
@media (max-width: 880px){
  .workspace{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    height:100dvh;
  }
  .key-pane{
    order:-1;
    padding:10px 12px;
    border-bottom:1px solid var(--rule);
  }
  .key-card{padding:12px;}
  .key-sub,.key-foot{display:none;}
  .key-list{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .key-list li{margin:0;flex:0 0 auto;}
  .key-btn{
    grid-template-columns:22px auto auto;
    gap:7px;
    font-size:12.5px;
    border:1px solid var(--rule);
    background:var(--card);
    padding:6px 10px;
  }
  .key-swatch{height:13px;}
  .overlay-card{inset:3vh 3vw;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;}
}

/* --- narrow screens: overlay table becomes stacked cards --- */
@media (max-width: 640px){
  .item-table thead{display:none;}
  .item-table, .item-table tbody, .item-table tr, .item-table td{display:block;width:100%;}
  .item-table tr{border-bottom:1px solid var(--rule);padding:12px 16px;}
  .item-table td{border:0;padding:0;}
  .item-table td + td{display:inline-block;width:auto;margin:6px 14px 0 0;}
  .td-date::before{content:"";}
  .overlay-card{inset:0;}
}

/* --- subcategory section rows inside the overlay table --- */
.item-table tr.subhead td{
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  padding:16px 14px 7px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink);
}
.subhead-count{
  font-family:var(--mono);
  font-weight:400;
  color:var(--ink-soft);
  margin-left:6px;
}
.item-table tr.subhead:hover td{background:var(--paper);}
@media (max-width: 640px){
  .item-table tr.subhead{border-bottom:0;padding:14px 16px 4px;}
}

/* final-pass additions: closed-session notes + full-transcript link */
.doc-closed {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.78em;
  color: #8a8a8a;
  font-style: italic;
  white-space: nowrap;
}
.doc-noaction {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 0.78em;
  color: #6a4ce0;
  font-style: italic;
  font-weight: 600;
}
.doc-full {
  font-size: 0.82em;
  opacity: 0.75;
  margin-left: 2px;
}

/* ===== column header labels (June 2026) ===== */
.col-labels{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px 280px;   /* agenda + category + visuals */
  align-items:stretch;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:#ffffff;
}
.col-label{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--sans);
  font-size:25px;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
  padding:16px 14px;
  z-index:1;
}
.col-label > span{
  position:relative;
  display:inline-block;
  z-index:1;
  line-height:1.1;
}
.col-label > span::before{        /* marker-yellow swipe behind each label */
  content:"";
  position:absolute;
  left:-.22em; right:-.22em; top:.06em; bottom:-.02em;
  background:rgba(255,193,0,.85);
  transform:skew(-9deg) rotate(-.6deg);
  border-radius:.12em .3em .14em .4em;
  z-index:-1;
}
.col-label-agenda{border-right:1px solid var(--rule);}
.col-label-key{border-right:1px solid var(--rule);}
.col-label-transcript{border-right:1px solid var(--rule);}
@media (max-width:1200px){ .col-label{font-size:20px;} }
@media (max-width:880px){
  .col-labels{display:none;}
}

/* ===== transcript modal (June 2026) ===== */
.tr-modal-scroll{
  overflow-y:auto;
  flex:1;
  padding:20px 26px 30px;
  font-family:var(--mono,'IBM Plex Mono',monospace);
  font-size:13px;
  line-height:1.65;
  color:#1c1f24;
  background:#fff;
}
.tr-modal-seg{margin:0 0 11px;white-space:pre-wrap;overflow-wrap:break-word;}
.tr-modal-speaker{font-weight:700;}
.tr-modal-seg.tr-cm{
  background:#fff3b0;
  border-left:3px solid #e0a800;
  padding:7px 10px;
  margin:11px -4px;
  border-radius:2px;
}
.tr-modal-pagemark{
  display:block;text-align:center;color:#9a9a9a;
  font-size:11px;letter-spacing:.08em;margin:16px 0;
}
.tr-modal-pagemark.tr-modal-start{
  color:#c1121f;font-weight:700;
}
.tr-modal-closed{
  font-style:italic;color:#777;padding:18px 4px;
}
/* Action-item locator: bright green bar across the page, white label inside,
   in the same monospace font as the transcript body. */
.tr-modal-itemline{
  display:flex;align-items:center;justify-content:center;
  background:#19d219;
  color:#fff;
  font-family:var(--mono,'IBM Plex Mono',monospace);
  font-size:13px;font-weight:700;
  letter-spacing:.02em;
  padding:6px 12px;
  box-sizing:border-box;
  scroll-margin-top:10px;
}
/* The bracket wraps an item's discussion. A green vertical rail runs down its
   left edge, connecting the Begin bar at the top to the End bar at the bottom.
   The body is indented to the right of the rail to make room for it. */
.tr-modal-bracket{
  position:relative;
  border-left:3px solid #19d219;   /* the connecting vertical line */
  padding-left:14px;
  margin:18px -26px 18px -10px;     /* pull left toward the page edge for the rail */
}
.tr-modal-bracket .tr-modal-itemline-begin{
  margin:0 0 11px -14px;            /* span back over the rail + indent */
}
.tr-modal-bracket .tr-modal-itemline-end{
  margin:11px 0 0 -14px;
}
/* segments inside a bracket: keep the highlighted-member band from colliding
   with the rail */
.tr-modal-bracket .tr-modal-seg.tr-cm{ margin-left:0; }
.tr-card{display:flex;flex-direction:column;}

/* ===================== controls bar (June 2026) ===================== */
.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  padding:14px clamp(16px,4vw,40px);
  background:var(--card);
  border-top:1px solid var(--rule);
  position:sticky;
  top:0;
  z-index:30;
  box-shadow:0 2px 10px rgba(22,24,29,.06);
}
.ctrl-search{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:260px;}
.search-input{
  width:100%;
  font-family:var(--sans);
  font-size:15px;
  padding:10px 132px 10px 14px;
  border:1.5px solid var(--rule);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-input:focus{
  outline:none;
  border-color:var(--marker);
  box-shadow:0 0 0 3px rgba(255,193,0,.25);
}
.search-clear{
  position:absolute;right:10px;
  background:none;border:0;font-size:20px;color:var(--ink-soft);
  cursor:pointer;line-height:1;padding:2px 6px;
}
.search-clear:hover{color:var(--flag);}
.search-count{
  position:absolute;right:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  pointer-events:none;
}
.ctrl-years{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.years-label{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  margin-right:2px;
}
.year-jump{
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--ink);
  background:#f1f0ec;border:1px solid var(--rule);
  border-radius:6px;padding:5px 9px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .08s ease,color .12s ease;
}
.year-jump:hover{
  background:var(--marker);border-color:var(--marker);
  transform:translateY(-1px);
}
.year-jump:active{transform:translateY(0);}
.year-jump:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}

/* ===================== key collapse/expand ===================== */
.key-body{overflow:visible;}

/* ===================== stronger hovers (item 4) ===================== */
.doc-link{transition:background .12s ease,color .12s ease;}
.doc-link:hover{background:rgba(22,24,29,.07);text-decoration-thickness:2px;}
.tr-open:hover{background:rgba(193,18,31,.10);color:#c1121f;}
.item-link{transition:color .12s ease;}
.item-link:hover{color:var(--flag);text-decoration-thickness:2px;}
/* key rows already have hover; deepen it slightly */
.key-btn:hover{background:rgba(255,193,0,.10);}

/* ===================== search + year-jump effects in agenda iframe ===================== */
/* (these classes are applied to elements INSIDE agendas.html by app.js;
   the matching rules are injected there via add_links.py X_HEAD) */

/* search match navigation (Control-F style) */
.search-nav{
  position:absolute;background:#f1f0ec;border:1px solid var(--rule);
  border-radius:5px;width:24px;height:26px;cursor:pointer;
  font-size:10px;color:var(--ink-soft);line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease;
}
.search-nav:hover{background:var(--marker);color:var(--ink);}
.search-nav:focus-visible{outline:2px solid var(--flag);outline-offset:1px;}
#searchPrev{right:70px;}
#searchNext{right:42px;}
.search-count{
  position:absolute;right:108px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  pointer-events:none;white-space:nowrap;background:#fff;padding-left:4px;
}


/* ===================== Visuals pane (third column) ===================== */
.viz-pane{
  background:var(--paper);
  padding:22px 18px;
  overflow:hidden;
  border-left:1px solid var(--rule);
}
.viz-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule);
  border-top:6px solid var(--marker);
  border-radius:6px;
  padding:18px 18px 20px;
  box-shadow:0 1px 0 rgba(22,24,29,.04);
}
.viz-badge{
  display:inline-block;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--marker);padding:3px 8px;border-radius:3px;
  transform:rotate(-1deg);margin-bottom:10px;
}
.viz-title{
  font-family:var(--sans);font-size:21px;font-weight:800;
  letter-spacing:-.01em;margin:0 0 10px;color:var(--ink);
}
.viz-sub{
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px;
}
.viz-link{
  display:inline-block;
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--flag);text-decoration:none;
  border:1px solid var(--rule);border-radius:6px;
  padding:8px 12px;background:#f1f0ec;
  transition:background .12s ease,color .12s ease,border-color .12s ease,transform .08s ease;
}
.viz-link:hover{background:var(--marker);border-color:var(--marker);color:var(--ink);transform:translateY(-1px);}
.viz-link:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}

@media (max-width:1200px){
  .col-labels{grid-template-columns:minmax(0,1fr) 240px 240px;}
  .workspace{grid-template-columns:minmax(0,1fr) 240px 240px;}
}
@media (max-width:880px){
  .workspace{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);}
  .viz-pane{order:-1;padding:10px 12px;border-bottom:1px solid var(--rule);border-left:0;}
}


/* ===== companion cross-link badge (v54) ===== */
.banner{position:relative;}
.companion-link{
  position:absolute;
  top:16px;right:clamp(20px,6vw,88px);
  font-family:var(--mono);
  font-size:12px;font-weight:500;
  color:#1d2126;text-decoration:none;
  background:var(--marker);
  padding:6px 12px;border-radius:4px;
  transform:rotate(-.6deg);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .12s ease,box-shadow .12s ease;
}
.companion-link:hover{transform:rotate(0deg) translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.4);}
@media (max-width:720px){.companion-link{position:static;display:inline-block;margin-bottom:14px;}}

/* ===== mobile polish (v59, July 2026) — desktop (>880px) untouched ===== */
@media (max-width:880px){
  /* Visuals card: collapse to a slim one-line row so the agenda viewer
     gets the screen. Full card returns on desktop automatically. */
  .viz-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top-width:4px;}
  .viz-badge{display:none;}
  .viz-title{font-size:15px;margin:0;flex:1 1 auto;}
  .viz-sub{display:none;}
  .viz-link{flex:0 0 auto;padding:6px 10px;font-size:12px;}
}
@media (max-width:640px){
  /* Tighter banner and commentary so the page isn't a wall of padding */
  .banner{padding:30px 20px 26px;}
  .banner-sub{font-size:14.5px;margin-top:12px;}
  .commentary{padding:24px 20px 16px;}
  .commentary h2{font-size:19px;}
  .commentary p{font-size:14.5px;}
  .controls{padding:10px 12px;gap:10px 14px;}
  /* 16px input font prevents iOS Safari from auto-zooming the page
     when the search field is focused */
  .search-input{font-size:16px;}
}
@media (max-width:640px){
  /* Year buttons: compress so 2013–2026 fits in ~2 rows instead of 4 */
  .ctrl-years{gap:4px;}
  .year-jump{font-size:11px;padding:3px 6px;border-radius:5px;}
}

/* ===== v60 mobile refinements — desktop (>880px) untouched ===== */
@media (max-width:880px){
  /* Key categories wrap into visible rows instead of one long sideways strip */
  .key-list{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;}
  /* Collapsible intro: the toggle row is injected by app.js on phones only */
  .commentary-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;text-align:left;
    background:var(--card);border:1px solid var(--rule);border-radius:8px;
    padding:11px 14px;margin:0;
    font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);
    cursor:pointer;
  }
  .commentary-toggle::after{content:"\25BE";color:var(--ink-soft);}
  .commentary.collapsed .commentary-toggle::after{content:"\25B8";}
  .commentary.collapsed > *:not(.commentary-toggle){display:none;}
  .commentary{padding-top:16px;padding-bottom:14px;}
}

/* ===== v61: agenda-first phone layout — desktop (>880px) untouched =====
   On phones the agenda viewer is the site; everything else shrinks to
   two slim bars. The key becomes a drop-down panel that OVERLAYS the
   agenda instead of consuming layout height. */
@media (max-width:880px){
  .workspace{grid-template-rows:auto minmax(0,1fr);}
  .viz-pane{display:none;}                /* its link moves into the key bar */
  .key-pane{position:relative;padding:6px 10px;overflow:visible;z-index:30;}
  .key-mobilebar{display:flex;align-items:center;gap:8px;}
  .key-mobilebtn{
    flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;
    font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);
    background:var(--card);border:1px solid var(--rule);border-radius:7px;
    padding:9px 12px;cursor:pointer;text-align:left;
  }
  .key-mobilebtn::after{content:"\25BE";color:var(--ink-soft);margin-left:8px;}
  .key-pane.key-collapsed .key-mobilebtn::after{content:"\25B8";}
  .key-mobileviz{
    flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:600;
    color:#1d2126;background:var(--marker);padding:9px 11px;border-radius:6px;
    text-decoration:none;white-space:nowrap;
  }
  /* the key card becomes a floating panel below the bar */
  .key-pane .key-card{
    position:absolute;left:10px;right:10px;top:calc(100% - 2px);
    box-shadow:0 14px 34px rgba(0,0,0,.28);z-index:31;
  }
  .key-pane.key-collapsed .key-card{display:none;}
  /* year buttons: one compact row, swipe sideways (they're ordered, so
     sideways scanning is predictable — unlike the category key) */
  .ctrl-years{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  .year-jump{flex:0 0 auto;}
}

/* ===== v62 phone refinements — desktop (>880px) untouched ===== */
@media (max-width:880px){
  /* Controls scroll away with the page so the agenda gets the full screen;
     scroll up to reach search / year jumps */
  .controls{position:static;}
  /* Key bar: unmistakably expandable — badge + big bouncing chevron */
  .key-mobilebtn{padding:8px 10px 8px 8px;gap:8px;}
  .key-mobilebtn::after{content:none;}
  .key-mobilebadge{
    flex:0 0 auto;font-family:var(--mono);font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;color:#1d2126;
    background:var(--marker);padding:4px 6px;border-radius:3px;
    transform:rotate(-1deg);
  }
  .key-mobilelabel{flex:1 1 auto;text-align:left;}
  .key-mobilechev{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;
    background:var(--marker);color:#1d2126;font-size:15px;line-height:1;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    animation:keyNudge 1.6s ease-in-out 3;
    transition:transform .15s ease;
  }
  .key-pane:not(.key-collapsed) .key-mobilechev{transform:rotate(180deg);animation:none;}
  @keyframes keyNudge{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(3px);}
  }
}
@media (prefers-reduced-motion:reduce){
  .key-mobilechev{animation:none;}
}

/* ===== v63 phone refinements — desktop (>880px) untouched ===== */
@media (max-width:880px){
  /* Kill the leftover small chevron on the key bar — the yellow circled
     one is the only arrow. (Specificity must beat the v61 rules.) */
  .key-pane .key-mobilebtn::after,
  .key-pane.key-collapsed .key-mobilebtn::after{content:none;}
  /* Agenda viewer slightly shorter than the screen: a strip of the
     surrounding page stays visible, so it's easy to grab the outer page
     and scroll back up to the description / search */
  .workspace{height:86dvh;}
}

/* ===== Panel 02 trend chart embedded in commentary (v73) ===== */
.trend-figure{max-width:900px;margin:40px auto 28px;}
.trend-figure svg{display:block;width:100%;height:auto;margin:0 auto;}
.trend-figure text{font-family:var(--mono);fill:var(--ink-soft);}
.trend-figure .axlabel{font-size:11px;fill:#9aa0a6;letter-spacing:.04em;}
.trend-figure .vlabel{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:#9aa0a6;}
.trend-figure .barlabel{font-size:11px;font-weight:600;fill:var(--ink);}
.trend-figure .gridline{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 3;}
.trend-figure .baseline{stroke:var(--ink);stroke-width:1.4;}
.trend-figure .toggle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px;}
.trend-figure .seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:#fff;}
.trend-figure .seg button{font-family:var(--mono);font-size:12px;padding:7px 12px;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;}
.trend-figure .seg button+button{border-left:1px solid var(--rule);}
.trend-figure .seg button[aria-pressed="true"]{background:var(--marker);color:var(--ink);font-weight:600;}
.trend-figure .view-cap{font-family:var(--mono);font-size:11.5px;color:#9aa0a6;}
.trend-figure .trend-note{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0;line-height:1.6;}
.tt{position:fixed;pointer-events:none;background:var(--banner);color:#fff;font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:9px 11px;border-radius:7px;max-width:240px;opacity:0;transition:opacity .1s;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.22);}
.tt b{color:var(--marker);}
.hot{cursor:pointer;}