/* ============================================================
   New / edit metric form (plus shared pieces reused by
   csv_imports and the tweaks panel). Base was ported from
   scorecard-sample/project/NewMetric.html; the mw-* revamp
   section at the bottom reshapes the metric form itself.
   ============================================================ */

.wiz-shell{ padding:28px; display:grid; grid-template-columns: 1fr 380px; gap:24px; max-width:1280px; margin:0 auto; }
@media (max-width:980px){ .wiz-shell{ grid-template-columns:1fr; } }

.wiz-shell .card{ margin-bottom:18px; }
.card-head .sub{ margin-left:auto; }

.unit-input{ position:relative; }
.unit-input .input{ padding-right:34px; }
.unit-input .unit{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--ink-4); }
/* prefixes ($) adorn the left, the way the value will actually render */
.unit-input .unit.pre{ right:auto; left:10px; }
.unit-input:has(.unit.pre) .input{ padding-left:26px; padding-right:12px; }

.preview-cells{ display:flex; gap:6px; align-items:center; margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--ink-4); flex-wrap:wrap; }
/* min-width, not width: "$142,500" must widen its cell, never collide with
   the neighbor (six-figure currency values overlapped in usability testing) */
.pvc{ position:relative; min-width:54px; height:30px; padding:0 10px 0 12px; display:flex; align-items:center; justify-content:flex-end; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--surface); border:1px solid var(--rule-2); border-radius:4px; }
.pvc::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:2px; border-radius:1px; }
.pvc.ok::before{ background:var(--ok); }
.pvc.warn::before{ background:var(--warn); }
.pvc.bad::before{ background:var(--bad); }

.checks{ display:flex; flex-direction:column; gap:8px; }
.ck{ display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border:1px solid var(--rule); border-radius:5px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.ck:hover{ background:var(--surface-2); }
.ck input{ margin-top:3px; appearance:none; -webkit-appearance:none; width:14px; height:14px; border:1.5px solid var(--rule-3); border-radius:3px; cursor:pointer; flex-shrink:0; display:grid; place-items:center; }
.ck input:checked{ background:var(--ink); border-color:var(--ink); }
.ck input:checked::after{ content:''; width:7px; height:4px; border-left:1.5px solid white; border-bottom:1.5px solid white; transform:rotate(-45deg) translate(1px,-1px); }
.ck .ck-body{ flex:1; }
.ck .ck-body .t{ font-weight:450; color:var(--ink); }
.ck .ck-body .d{ font-size:11.5px; color:var(--ink-4); margin-top:2px; }

.aside{ position:sticky; top:64px; display:flex; flex-direction:column; gap:14px; }
.aside .card-body p{ margin:0 0 8px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.aside .card-body p b{ color:var(--ink-2); font-weight:500; }
.placement{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.placement .pl{ padding:7px 10px; border:1px solid var(--rule); border-radius:4px; font-size:12.5px; color:var(--ink-3); background:var(--surface); }
.placement .pl.ins{ border:1px dashed var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:500; display:flex; align-items:center; gap:8px; }
.placement .pl.ins .new{ margin-left:auto; font-family:var(--mono); font-size:9.5px; background:var(--accent); color:white; padding:1px 5px; border-radius:3px; }

/* source binding chooser (data wiring step) */
.source-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:640px){ .source-options{ grid-template-columns:1fr; } }
.source-opt{ border:1px solid var(--rule-2); border-radius:7px; padding:12px 14px; cursor:pointer; }
/* Hover/selected fill crossfades via opacity (compositor) instead of background
   (paint). ::after is the ✓ badge, so the overlay uses ::before. Border snaps. */
.source-opt::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--sopt-bg, var(--surface-2)); opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:-1; }
.source-opt:hover::before{ opacity:1; }
.source-opt.on{ border-color:var(--accent); --sopt-bg:var(--accent-soft); }
.source-opt.on::before{ opacity:1; }
.source-opt .t{ font-weight:500; font-size:13px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.source-opt .d{ font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.4; }

/* ============================================================
   W2c polish — confident, legible form experience.
   Reuses existing tokens + selectors the threshold/source
   Stimulus controllers depend on. No new markup hooks renamed.
   ============================================================ */

/* Quiet group label above the "More options" disclosure stack. */
.wiz-section{ display:flex; align-items:baseline; gap:8px; margin:6px 2px 10px; }
.wiz-section .wiz-section-n{
  font-family:var(--mono); font-size:10px; font-weight:500; color:var(--ink-4);
  text-transform:uppercase; letter-spacing:0.07em;
}
.wiz-section .wiz-section-t{ font-size:12.5px; color:var(--ink-3); font-weight:450; }
.wiz-shell .card:first-of-type{ scroll-margin-top:72px; }
.wiz-shell .card{ scroll-margin-top:72px; }

/* --- card heads: a touch more breathing room + consistent meta --- */
.wiz-shell .card-head .sub{ font-feature-settings:"tnum"; }

/* --- fields: hint legibility, no layout shift --- */
.wiz-shell .field .hint b{ color:var(--ink-2); font-weight:500; }

/* --- segmented controls: hover + focus-visible (design.css only
   styles native input :focus, not these div-based segments) --- */
.seg-input .si{ position:relative; }
/* Hover fill crossfades via opacity (compositor) instead of background (paint). */
.seg-input .si::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--surface); opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:-1; }
.seg-input .si:not(.on):hover::after{ opacity:1; }
.seg-input .si:not(.on):hover{ color:var(--ink); }
.seg-input .si:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--accent); position:relative; z-index:1;
}

/* --- source option cards: clearer selected affordance + focus ring --- */
.source-opt{ position:relative; }
.source-opt:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.source-opt.on .t{ color:var(--accent-ink); }
.source-opt.on::after{
  content:'✓'; position:absolute; top:10px; right:12px;
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent);
}

/* --- auto-flag checks: hover + focus-visible on the hidden box --- */
.ck{ position:relative; }
/* Checked fill crossfades via opacity (compositor) instead of background (paint). */
.ck::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--accent-soft); opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:-1; }
.ck:has(input:checked)::after{ opacity:1; }
.ck:hover{ border-color:var(--rule-2); }
.ck:has(input:checked){ border-color:var(--accent-edge); }
.ck:has(input:checked) .ck-body .t{ color:var(--accent-ink); }
.ck input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-soft); }

/* --- aside cards: quiet, sticky, legible --- */
.aside .card-head h3{ font-size:13px; }

/* ============================================================
   Scorecard create / edit (centered .form-page from teams.css).
   Scope tightly so we don't bleed into other form-page screens.
   ============================================================ */
.scorecard-form .card-head .sub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-4); }
.scorecard-form .field .hint{ margin-top:6px; }
.scorecard-form .form-actions .btn.primary{ min-width:140px; justify-content:center; }
.scorecard-form .cadence-note{
  display:flex; gap:8px; align-items:flex-start; margin-top:14px;
  padding:10px 12px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--surface-2); font-size:12px; color:var(--ink-3); line-height:1.45;
}
.scorecard-form .cadence-note .ic-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  flex-shrink:0; margin-top:6px;
}

/* ============================================================
   Reduced motion: drop every transition we introduced.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .seg-input .si, .source-opt, .ck, .mw-adv summary .chev{ transition:none; }
}

/* ============================================================
   Metric form revamp (mw-*): two decisions up front, everything
   defaulted collapses into <details>. Shared classes (.wiz-shell,
   .ck, .seg-input, .preview-cells, .source-opt…) stay untouched —
   csv_imports and the tweaks panel also render them.
   ============================================================ */

/* bespoke unit fields, revealed by the Custom chip */
.mw-custom{ margin:2px 0 16px; padding:12px; border:1px dashed var(--rule-2); border-radius:10px; background:var(--surface-2); }
.mw-custom-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:640px){ .mw-custom-grid{ grid-template-columns:repeat(2, 1fr); } }
.mw-custom .field{ margin-bottom:0; }
.mw-custom .hint{ margin-top:8px; }

/* "More options" disclosures */
.mw-adv{ border:1px solid var(--rule); border-radius:8px; background:var(--surface); margin-bottom:10px; }
.mw-adv summary{
  list-style:none; display:flex; align-items:baseline; gap:10px;
  padding:12px 14px; cursor:pointer; border-radius:7px;
}
.mw-adv summary::-webkit-details-marker{ display:none; }
.mw-adv summary .t{ font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; }
.mw-adv summary .d{ flex:1; min-width:0; font-size:12px; color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mw-adv summary .chev{
  align-self:center; font-size:15px; line-height:1; color:var(--ink-4);
  transition:transform .15s ease;
}
.mw-adv[open] summary .chev{ transform:rotate(90deg); }
.mw-adv[open] summary{ border-bottom:1px solid var(--rule); border-radius:7px 7px 0 0; }
.mw-adv summary:hover{ background:var(--surface-2); }
.mw-adv summary:focus-visible{ outline:none; box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.mw-adv-body{ padding:14px; }
@media (max-width:640px){ .mw-adv summary .d{ display:none; } }

/* ============================================================
   Sentence-builder metric form (st-*). The form IS three lines
   of serif prose with fill-in slots; thresholds come from a
   plain-language popover; a live row renders below; defaults
   fold behind the fine print. Field names match the old form.
   ============================================================ */

.st-shell{ max-width:920px; margin:0 auto; padding:26px 28px 80px; display:flex; flex-direction:column; gap:26px; }

.st-head{ display:flex; flex-direction:column; gap:10px; }
.st-head .det-back{ margin-bottom:6px; }
.st-eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.12em;
}
.st-masthead{
  font-family:var(--serif); font-weight:500; font-size:38px; line-height:46px;
  letter-spacing:-0.01em; color:var(--ink); margin:0; text-wrap:balance;
}
.st-subhead{ font-size:14.5px; color:var(--ink-3); margin:0; text-wrap:pretty; }

/* --- the sentence card --- */
.st-card{
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:26px 34px 24px; display:flex; flex-direction:column; gap:8px;
}
.st-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
  transition-property:opacity; transition-duration:.18s;
}
.st-line.asleep{ opacity:.4; }
/* Segments keep their own wake state while their words flow as ONE wrapping
   paragraph ("…is serious. I will own it…") — display:contents lifts the
   tokens into the shared flex line, so opacity dims each child instead. */
.st-seg{ display:contents; }
.st-seg > *{ transition-property:opacity; transition-duration:.18s; }
.st-seg.asleep > *{ opacity:.4; }
.st-word{ font-family:var(--serif); font-size:24px; line-height:40px; color:var(--ink); }

/* fill-in slots: quiet mad-libs underlines, never boxes */
.st-fill{
  appearance:none; -webkit-appearance:none; border:none; outline:none; border-radius:4px 4px 0 0;
  background:transparent; padding:0 4px 1px;
  font-family:var(--serif); font-weight:500; font-size:24px; line-height:38px; color:var(--accent);
  border-bottom:2px solid var(--accent-edge); min-width:44px;
  /* Slots grow with their content (JS mirror or field-sizing) — cap them at the
     card so a marathon name scrolls inside its slot instead of escaping it. */
  max-width:100%;
}
.st-fill::placeholder{ font-style:italic; font-weight:400; color:var(--ink-5); }
/* Slots size to their content at FIRST paint — without this the JS mirror pass
   resizes every slot ~120ms in and the whole card re-wraps (CLS 0.29). The
   sentence controller skips its autosize entirely when this is supported; the
   select's right padding stands in for the JS pass's chevron allowance. */
@supports (field-sizing: content){
  input.st-fill, select.st-fill{ field-sizing:content; }
  select.st-fill{ padding-right:26px; }
}
.st-fill:hover{ border-bottom-color:var(--accent); }
.st-fill:focus{ border-bottom-color:var(--accent); background:var(--accent-soft); }
.st-select{ cursor:pointer; text-align:left; }
.st-slotwrap{ position:relative; display:inline-flex; align-items:baseline; }
.st-slotwrap .st-chev{
  position:absolute; right:6px; bottom:9px; font-family:var(--sans);
  font-size:10px; color:var(--ink-4); pointer-events:none;
}
.st-newgroup{ display:inline-flex; align-items:baseline; gap:8px; }

/* --- slot menus: the native select hides, a serif button + unfolding menu
   take over. The menu opens with the selected row exactly over the slot and
   accordions out from the center via clip-path (compositor, interruptible). */
.st-slotwrap.on select.st-native-off{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.st-slotwrap.on > .st-chev{ display:none; }
.st-select-btn{ display:inline-flex; align-items:baseline; gap:7px; cursor:pointer; }
/* line-height:1 keeps the baseline-aligned ▾ from stretching the button 2px
   taller than the select it replaces (the swap would nudge every line below). */
.st-select-btn .chev{ font-family:var(--sans); font-size:10px; line-height:1; color:var(--ink-4); }
.st-menu{
  position:absolute; z-index:40; min-width:calc(100% + 24px); padding:6px;
  display:flex; flex-direction:column; white-space:nowrap;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 1px 2px rgba(21,36,47,.06), 0 12px 32px rgba(21,36,47,.14);
  transition-property:clip-path, opacity; transition-duration:.18s;
  transition-timing-function:cubic-bezier(0.2, 0, 0, 1);
}
.st-menu.scroll{ max-height:60vh; overflow-y:auto; }
.st-menu-opt{
  appearance:none; border:none; background:transparent; cursor:pointer; text-align:left;
  position:relative; height:38px; flex-shrink:0; padding:0 44px 2px 12px;
  display:flex; align-items:center; border-radius:6px;
  font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink-2);
}
.st-menu-opt:hover{ background:var(--surface-2); color:var(--ink); }
.st-menu-opt.sel{ background:var(--accent-soft); color:var(--accent); }
.st-menu-opt.sel::after{
  content:'✓'; position:absolute; right:12px;
  font-family:var(--mono); font-size:12px; color:var(--accent);
}
.st-menu-opt:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }

/* threshold slots: the color IS the meaning */
.st-thresh{
  appearance:none; border:none; background:transparent; cursor:pointer; position:relative;
  font-family:var(--serif); font-weight:500; font-size:24px; line-height:38px;
  padding:0 5px 1px; border-bottom:2.5px solid; border-radius:4px 4px 0 0;
}
.st-thresh::after{ content:""; position:absolute; inset:-3px 0; }
.st-thresh.warn{ color:var(--warn-ink); border-bottom-color:var(--warn); }
.st-thresh.crit{ color:var(--bad-ink); border-bottom-color:var(--bad); }
.st-thresh.warn:hover, .st-thresh.warn.open{ background:var(--warn-soft); }
.st-thresh.crit:hover, .st-thresh.crit.open{ background:var(--bad-soft); }
.st-fill:focus-visible, .st-thresh:focus-visible{
  outline:none; box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}

/* --- band gradients: stop positions are REGISTERED custom properties so
   they interpolate — the colors glide when numbers change instead of
   snapping. .hb mirrors the ramp for higher-is-better. --- */
@property --st-wp { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --st-cp { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
.st-band, .st-strip{
  transition-property: --st-wp, --st-cp, opacity;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.st-band.lb, .st-strip.lb{
  background:linear-gradient(to right,
    #DCE9E1 0% var(--st-wp), #F3E7C9 var(--st-wp) var(--st-cp), #F0D4CF var(--st-cp) 100%);
}
.st-band.hb, .st-strip.hb{
  background:linear-gradient(to right,
    #F0D4CF 0% var(--st-cp), #F3E7C9 var(--st-cp) var(--st-wp), #DCE9E1 var(--st-wp) 100%);
}

/* --- ambient band: the sentence's color picture, quiet at the card's foot --- */
.st-band{
  position:relative; height:8px; border-radius:4px; margin-top:12px;
  pointer-events:none;
}
.st-band.asleep{ opacity:.35; }
.st-band-tick{
  position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:1px;
  transform:translateX(-1px);
  transition-property:left; transition-duration:.35s;
  transition-timing-function:cubic-bezier(0.2, 0, 0, 1);
}
.st-band-goal{ background:var(--accent); }
.st-band-warn{ background:var(--warn); }
.st-band-crit{ background:var(--bad); }

/* --- threshold popover: floats over the card, anchored to its slot --- */
.st-pop{ position:absolute; z-index:30; width:470px; }
.st-pop-caret{
  position:absolute; top:-5px; width:12px; height:12px; background:var(--surface);
  border-left:1px solid var(--rule); border-top:1px solid var(--rule);
  transform:rotate(45deg); border-radius:2px; z-index:1;
}
.st-pop-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 1px 2px rgba(21,36,47,.06), 0 12px 32px rgba(21,36,47,.14);
  padding:14px 16px; display:flex; flex-direction:column; gap:11px;
}
.st-pop-title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:17px; color:var(--ink); }
.st-pop-band{ display:flex; flex-direction:column; gap:4px; }
.st-strip{ position:relative; height:24px; border-radius:5px; cursor:pointer; touch-action:none; }
.st-strip-mark{
  position:absolute; top:0; bottom:0; width:3px; border-radius:1px; transform:translateX(-1.5px);
  transition-property:left; transition-duration:.2s; transition-timing-function:cubic-bezier(0.2, 0, 0, 1);
}
.st-strip-goal{
  position:absolute; top:3px; bottom:3px; width:2px; border-radius:1px;
  background:var(--accent); opacity:.55; transform:translateX(-1px);
}
.st-strip-labels{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10.5px; color:var(--ink-4);
}
.st-strip-labels .mid{ color:var(--accent); }
.st-pop-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.st-suggest{ display:flex; align-items:center; gap:6px; }
.st-sug{
  appearance:none; cursor:pointer; position:relative; padding:5px 11px;
  border:1px solid var(--rule-2); border-radius:99px; background:var(--surface);
  font-family:var(--sans); font-size:12.5px; color:var(--ink-2);
}
.st-sug::before{ content:""; position:absolute; inset:-6px 0; }
.st-sug:hover{ border-color:var(--rule-3); color:var(--ink); }
.st-sug:focus-visible{ outline:none; box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.st-pop-custom{
  width:130px; padding:5px 11px; border:1px solid var(--rule-2); border-radius:99px;
  background:var(--surface); font-family:var(--sans); font-size:12.5px; color:var(--ink); outline:none;
}
.st-pop-custom:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* --- quick start templates --- */
.st-label-row{ display:flex; align-items:baseline; gap:10px; }
.st-label{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.12em;
}
.st-whisper{ font-size:12.5px; color:var(--ink-4); }
.st-tpls-block, .st-preview-block{ display:flex; flex-direction:column; gap:12px; }
.st-tpls{ display:flex; gap:10px; flex-wrap:wrap; }
.st-tpl{
  appearance:none; cursor:pointer; flex:1; min-width:132px; text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  padding:12px 14px; background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  transition-property:transform; transition-duration:.1s;
}
.st-tpl:hover{ border-color:var(--rule-3); }
.st-tpl:active{ transform:scale(0.96); }
.st-tpl.on{ border-color:var(--accent); background:var(--accent-soft); }
.st-tpl .t{ font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink); }
.st-tpl .d{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.st-tpl:focus-visible{ outline:none; box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }

/* --- live scorecard row --- */
.st-row{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:13px 16px;
}
.st-row-id{ display:flex; flex-direction:column; gap:3px; width:230px; flex-shrink:0; }
/* overflow-wrap keeps an unbroken name inside the 230px id column — without it
   the text paints straight across the value cells and off the card. */
.st-row-name{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.st-row-sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  color:var(--ink-4); text-transform:uppercase;
}
/* min-width:0 lets the cells strip shrink below its content so it scrolls in
   place instead of stretching the page sideways at tablet/phone widths. */
.st-row-cells{ display:flex; gap:8px; flex-grow:1; min-width:0; overflow-x:auto; }
.st-row-cells .pvc{ flex:1 0 auto; width:auto; height:32px; }

/* --- fine print + folded details --- */
.st-fine{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.st-fine-txt{ font-size:13.5px; color:var(--ink-3); }
.st-fine-link{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:8px 6px; margin:-8px -6px; border-radius:5px;
  font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--accent);
}
.st-fine-link:hover{ background:var(--accent-soft); }
.st-fine-link:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.st-more{ display:flex; flex-direction:column; }
.st-more .mw-custom-grid{ grid-template-columns:repeat(3, 1fr); }
.st-actions{ display:flex; align-items:center; gap:10px; }

@media (max-width:700px){
  .st-masthead{ font-size:30px; line-height:38px; }
  .st-word, .st-fill, .st-thresh{ font-size:20px; line-height:34px; }
  .st-card{ padding:20px 22px 18px; }
  .st-pop{ width:min(470px, calc(100vw - 72px)); }
  .st-row-id{ width:150px; }
}

@media (prefers-reduced-motion: reduce){
  .st-line, .st-tpl, .st-menu, .st-band, .st-strip,
  .st-band-tick, .st-strip-mark{ transition:none; }
}