/* ============================================================
   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);
}

/* ===================== 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:8px 0 8px 14px;
  background:rgba(255,193,0,.08);
}

/* ===================== 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:22px clamp(20px,6vw,88px);
  border-top:1px solid var(--rule);
  font-size:13px;
  color:var(--ink-soft);
}

/* ===================== 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;}
}

/* ============================================================
   Closed-Session Information Items — overrides
   ============================================================ */

/* item-# column in overlay table */
.col-num,.td-num{white-space:nowrap;font-family:var(--mono);font-size:12.5px;text-align:center;color:var(--ink-soft);}

/* fixture categories in the key: slightly muted to separate them from the
   eight descriptive themes */
.key-btn-fixture .key-name{color:var(--ink-soft);font-weight:600;}
.key-btn-fixture .key-swatch{opacity:.85;}
/* a thin divider before the first fixture row */
.key-list li:has(.key-btn-fixture):first-of-type{margin-top:4px;}
.key-btn-fixture{border-top:1px dashed var(--rule);border-radius:0 0 8px 8px;}

/* the overlay presenter column can wrap */
.item-table td:nth-child(3){font-size:13px;color:var(--ink-soft);}

/* ============================================================
   The Closed Record — overrides (v1)
   Inverted palette: yellow recedes (the pipeline field), themes vivid.
   ============================================================ */
.col-num,.td-num{white-space:nowrap;font-family:var(--mono);font-size:12.5px;text-align:center;color:var(--ink-soft);}
.item-table td:nth-child(3){font-size:13px;color:var(--ink-soft);}

/* companion cross-link badge */
.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;}}

/* key mode toggle */
.key-mode{display:flex;gap:6px;margin:0 0 12px;}
.mode-btn{
  flex:1;font-family:var(--mono);font-size:11.5px;font-weight:600;
  padding:7px 8px;border:1px solid var(--rule);border-radius:6px;
  background:#f1f0ec;color:var(--ink-soft);cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.mode-btn.is-on{background:var(--marker);border-color:var(--marker);color:var(--ink);}
.mode-btn:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}

/* fixture rows in the key: muted, carbon-copy feel */
.key-btn-fixture .key-name{color:var(--ink-soft);font-weight:600;}
.key-btn-fixture .key-swatch{opacity:.8;}
.key-btn-fixture{border-top:1px dashed var(--rule);}
/* named rows: small tag */
.key-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:#1e3c82;border-radius:8px;padding:1px 6px;margin-left:6px;
}