/* Panmer — matches the DansLab palette (web-danslab/app/globals.css).
   Dark by default; light via [data-theme="light"] (shared localStorage key "theme"). */
:root, :root[data-theme="dark"] {
  --bg: rgb(10 10 10); --surface: rgb(17 17 17); --elevated: rgb(22 22 22);
  --border: rgb(38 38 38); --ink: rgb(245 245 245); --muted: rgb(163 163 163);
  --subtle: rgb(115 115 115); --accent: rgb(220 38 38); --accent-hover: rgb(239 68 68);
  --accent-dark: rgb(153 27 27); --ok: rgb(74 222 128); --warn: rgb(250 204 21);
  --bad: rgb(248 113 113);
  /* brushed-metal console, as in the DNA->Music app */
  --panel-top: #1d1d1d; --panel-bottom: #0e0e0e; --panel-edge: #2a2a2a;
  --bevel-hi: rgba(255,255,255,.05); --bevel-lo: rgba(0,0,0,.6);
  --hairline: rgba(255,255,255,.03);
  --recess-bg: rgba(0,0,0,.55); --recess-edge: #262626;
  --recess: inset 0 2px 4px rgba(0,0,0,.6);
  --drop: 0 14px 30px -8px rgba(0,0,0,.7), 0 4px 8px rgba(0,0,0,.4);
  --c-seq:  rgb(45 212 191);   /* sequence, coverage */
  --c-mod:  rgb(167 139 250);  /* modified bases */
  --c-pos:  rgb(251 191 36);   /* position, strategy, segments */
  --c-lib:  rgb(96 165 250);   /* library geometry */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: rgb(255 255 255); --surface: rgb(250 250 250); --elevated: rgb(245 245 245);
  --border: rgb(229 229 229); --ink: rgb(10 10 10); --muted: rgb(82 82 82);
  --subtle: rgb(115 115 115); --ok: rgb(22 163 74); --warn: rgb(161 98 7);
  --bad: rgb(185 28 28);
  --panel-top: #ffffff; --panel-bottom: #ececec; --panel-edge: #d2d2d2;
  --bevel-hi: rgba(255,255,255,.95); --bevel-lo: rgba(0,0,0,.09);
  --hairline: rgba(0,0,0,.04);
  --recess-bg: rgba(0,0,0,.035); --recess-edge: #cfcfcf;
  --recess: inset 0 2px 4px rgba(0,0,0,.10);
  --drop: 0 10px 22px -10px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.10);
  --c-seq:  rgb(13 148 136);
  --c-mod:  rgb(109 40 217);
  --c-pos:  rgb(180 83 9);
  --c-lib:  rgb(29 78 216);
  color-scheme: light;
}
:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent); color: #fff; }
code, .mono { font-family: var(--mono); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
header.top { border-bottom: 1px solid var(--border); }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 18px; padding-bottom: 14px; }
.brand { font: 600 26px/1.1 var(--mono); letter-spacing: -0.02em; margin: 0; }
.brand span { color: var(--accent); }
.tagline { color: var(--muted); margin: 0; flex: 1 1 320px; font-size: 14px; }
.toplinks { display: flex; gap: 14px; font-size: 14px; align-items: center; }
.toplinks a { color: var(--muted); text-decoration: none; }
.toplinks a:hover { color: var(--accent); }
.iconbtn { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--panel-edge); color: var(--muted); border-radius: 4px;
  box-shadow: inset 0 1px 0 var(--bevel-hi); padding: 2px 8px; cursor: pointer; font: inherit; }
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }

nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding-bottom: 2px; }
nav.tabs button {
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 var(--bevel-hi);
  color: var(--muted); padding: 9px 18px; font: 600 14px var(--sans); cursor: pointer;
}
nav.tabs button:hover { color: var(--ink); border-color: var(--subtle); }
nav.tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-color: var(--accent-dark); color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
nav.tabs button[aria-selected="true"]:hover { color: #fff; }

#workbench { padding: 14px 0 32px; }
/* the documentation pane and the results both flow with the page, so a long oligo
   table or a long figure simply continues downwards instead of being boxed in */
/* give the results card real height even when the library is short, and let it keep
   growing with the content below the fold */
#results { margin-top: 14px; min-height: 74vh; display: flex; flex-direction: column; }
/* embedded: the frame is sized from our own height, so viewport units would chase
   themselves. Fixed pixels keep the measurement stable. Nothing here may set overflow
   on body: hiding one axis makes the other compute to auto, which gives the body its
   own scrollbar inside the frame -- exactly the second scrollbar we are removing. */
:root.embedded #results { min-height: 460px; }
#results > .panel { flex: 1 1 auto; }
.drawer { max-height: none; }

.panel {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--drop), inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
  padding: 16px;
}
/* inner hairline: the bevel that makes the panel read as a milled plate */
.panel::before {
  content: ""; position: absolute; inset: 4px; border-radius: calc(var(--radius) - 3px);
  border: 1px solid var(--hairline); pointer-events: none;
}
.panel > * { position: relative; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.panel h3 { font-size: 14px; margin: 16px 0 8px; }

.field { margin-bottom: 12px; }
.field > label, .field > .label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
input[type="number"], input[type="text"], input[type="search"], select, textarea {
  width: 100%; background: var(--recess-bg); color: var(--ink);
  border: 1px solid var(--recess-edge); box-shadow: var(--recess);
  border-radius: 4px; padding: 7px 9px; font: 14px var(--sans);
}
input:hover, select:hover, textarea:hover { border-color: var(--subtle); }
textarea { font-family: var(--mono); font-size: 13px; min-height: 180px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--subtle); margin-top: 3px; }

.seg { display: inline-flex; border: 1px solid var(--recess-edge); border-radius: 4px; overflow: hidden; box-shadow: var(--recess); }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 6px 14px; font: 600 13px var(--sans); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.btn {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: #fff; border: 0; border-radius: 4px; padding: 9px 16px;
  font: 600 14px var(--sans); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:active { box-shadow: var(--recess); transform: translateY(1px); }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { background: var(--accent-dark); opacity: .6; cursor: wait; }
.btn.ghost { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  color: var(--ink); border: 1px solid var(--panel-edge);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 var(--bevel-hi); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.stop { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  color: var(--bad); border: 1px solid var(--bad); }
.btn.stop:hover { background: var(--bad); color: #fff; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; }

/* modXNA picker */
details.mods { border: 1px solid var(--recess-edge); border-radius: 4px;
  background: var(--recess-bg); box-shadow: var(--recess); }
details.mods summary { padding: 8px 10px; cursor: pointer; font-size: 14px; }
details.mods .inner { padding: 0 10px 10px; }
.fams { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 8px; font-size: 13px; }
.fams label { display: inline-flex; align-items: center; gap: 4px; }
.modlist { max-height: 260px; overflow: auto; border: 1px solid var(--recess-edge);
  border-radius: 4px; background: var(--recess-bg); box-shadow: var(--recess); margin-top: 6px; }
.modlist label { display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; font-size: 13px; cursor: pointer; }
.modlist label:hover { background: var(--elevated); }
.modlist .code { font-family: var(--mono); min-width: 3.2em; color: var(--ink); }
.modlist .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modlist .tag { font-size: 11px; color: var(--subtle); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.modlist .grp { position: sticky; top: 0;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); font-size: 12px; color: var(--muted); padding: 3px 8px; border-bottom: 1px solid var(--border); }

/* estimate */
.estimate { border-left: 3px solid var(--accent); padding: 8px 10px;
  background: var(--recess-bg); box-shadow: var(--recess);
  border-radius: 0 4px 4px 0; font-size: 13px; }
/* feasibility now shows in the verdict text, so the accent line stays the card's red */
.estimate .verdict { font-weight: 600; }
.estimate.ok   .verdict { color: var(--c-seq); }
.estimate.warn .verdict { color: var(--c-pos); }
.estimate.bad  .verdict { color: var(--bad); }
.estimate b { font-size: 15px; }

/* results */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--recess-bg); border: 1px solid var(--recess-edge);
  box-shadow: var(--recess); border-radius: 4px; padding: 10px 12px; }
.stat .v { font: 600 22px/1.2 var(--mono); }
.stat .l { font-size: 12px; color: var(--muted); }
.stat .s { font-size: 12px; color: var(--subtle); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
/* no overflow on wide screens, so the sticky column headers can anchor to the page;
   narrow screens get horizontal scrolling instead */
.tablewrap { border: 1px solid var(--recess-edge); border-radius: 4px; box-shadow: var(--recess); }
@media (max-width: 900px) { .tablewrap { overflow-x: auto; } }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* the only sticky thing left: column headers while a long table flows past */
th { position: sticky; top: 0; z-index: 1; color: var(--muted); font-weight: 600;
  background: var(--panel-top); box-shadow: inset 0 -1px 0 var(--panel-edge); }
td.seq { font-family: var(--mono); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.flag { color: var(--warn); }
.seqbox { font: 12px/1.6 var(--mono); word-break: break-all; background: var(--recess-bg);
  border: 1px solid var(--recess-edge); box-shadow: var(--recess); border-radius: 4px;
  padding: 10px; max-height: 320px; overflow: auto; }
.empty { color: var(--subtle); text-align: center; padding: 48px 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.error { color: var(--bad); white-space: pre-wrap; }
.status { font-size: 12px; color: var(--subtle); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--subtle); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 12px var(--mono); background: var(--recess-bg); border: 1px solid var(--recess-edge); border-radius: 3px; padding: 1px 6px; }

footer { border-top: 1px solid var(--border); color: var(--subtle); font-size: 12px; }
footer .wrap { padding-top: 14px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: var(--muted); }

/* help page */
.doc { max-width: 78ch; padding: 20px 0 48px; }
.doc > p:first-child { margin-top: 0; }
.doc h2 { margin-top: 32px; font-size: 20px; }
.doc h3 { margin-top: 22px; font-size: 16px; }
.doc table { margin: 10px 0; }
.doc pre { background: var(--recess-bg); border: 1px solid var(--recess-edge);
  box-shadow: var(--recess); border-radius: 4px; padding: 10px; overflow: auto;
  font: 12px/1.5 var(--mono); }
.doc td, .doc th { white-space: normal; }
.hidden { display: none !important; }
.tablewrap, .modlist, .seqbox, textarea, #params, #results, #view-docs {
  scrollbar-color: var(--panel-edge) transparent; scrollbar-width: thin;
}
#params::-webkit-scrollbar, #results::-webkit-scrollbar,
#view-docs::-webkit-scrollbar { width: 8px; }
#params::-webkit-scrollbar-thumb, #results::-webkit-scrollbar-thumb,
#view-docs::-webkit-scrollbar-thumb { background: var(--panel-edge); border-radius: 4px; }
#params::-webkit-scrollbar-track, #results::-webkit-scrollbar-track,
#view-docs::-webkit-scrollbar-track { background: transparent; }


/* ---- results stay readable while scrolling a long table ---- */

/* ---- parameter guide ---- */
.guide .fig { width: 100%; height: auto; display: block; margin: 4px 0 18px; }
.guide .fig .clamp { fill: var(--recess-bg); stroke: var(--panel-edge); }
.guide .fig .core { fill: var(--accent); fill-opacity: .10; stroke: var(--accent); }
.guide .fig .clamp, .guide .fig .core { stroke-width: 1; }
.guide .fig .win { fill: none; stroke: var(--muted); stroke-width: 1; }
.guide .fig .win.first, .guide .fig .win.last { stroke: var(--ink); }
.guide .fig .lbl { font: 600 11px var(--sans); fill: var(--ink); text-anchor: middle; }
.guide .fig .lbl.on-core { font-weight: 500; fill: var(--muted); }
.guide .fig .tick { font: 11px var(--sans); fill: var(--muted); text-anchor: middle; }
.guide .fig .tick.strong { fill: var(--ink); font-weight: 600; }
.guide .fig .tick.on-win { font-size: 10px; }
.guide .fig .dim line { stroke: var(--subtle); stroke-width: 1; }
.guide .fig .dot { stroke: var(--subtle); stroke-width: 1; stroke-dasharray: 2 3; }
.gloss { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: 8px 16px; margin: 0; }
.gloss dt { font-weight: 600; color: var(--ink); }
.gloss dd { margin: 0; color: var(--muted); }
@media (max-width: 620px) {
  .gloss { grid-template-columns: 1fr; gap: 2px; }
  .gloss dd { margin-bottom: 8px; }
}

/* ======================= parameter ribbon ======================= */
.ribbon {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: minmax(150px, .85fr) minmax(165px, .9fr) minmax(190px, 1fr)
                         minmax(215px, 1.2fr) minmax(215px, 1.2fr);
}
@media (max-width: 1180px) { .ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ribbon { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius); border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--drop), inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
  padding: 11px 12px 12px; overflow: hidden;
}
/* a colour strip per card, so the eye finds the group it wants without reading */
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--key, var(--subtle)); }
.card.k-ex    { --key: var(--subtle); }
.card.k-alpha { --key: var(--c-mod); }
.card.k-lib   { --key: var(--c-lib); }
.card.k-strat { --key: var(--c-pos); }
.card.k-input { --key: var(--c-seq); }
.card.k-run   { --key: var(--accent); }
.card h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--key, var(--muted)); margin: 0; font-weight: 700;
}
.card .examples { gap: 5px; }
.card.k-run .btn { width: 100%; }
.card textarea { min-height: 86px; flex: 1 1 auto; font-size: 12px; }
.card .hint { margin-top: auto; }
.card .estimate { font-size: 12px; }
.card .status { font-size: 11px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.field.inline { display: flex; align-items: center; gap: 8px; margin: 0; }
.field.inline > label { margin: 0; white-space: nowrap; }
.ribbon .field { margin: 0; }
.ribbon .field > label { font-size: 11px; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; padding: 6px 8px; }

.drawerbtn {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--recess-edge); background: var(--recess-bg); box-shadow: var(--recess);
  border-radius: 4px; padding: 6px 9px; font: 13px var(--sans); color: var(--muted); cursor: pointer;
}
.drawerbtn b { color: var(--key, var(--ink)); font-size: 12px; }
.drawerbtn:hover { border-color: var(--key, var(--accent)); color: var(--ink); }
.drawerbtn[aria-expanded="true"] { border-color: var(--key); color: var(--ink); }
.drawerrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ======================= drawers ======================= */
.drawer {
  margin-top: 12px; border-radius: var(--radius);
  border: 1px solid var(--panel-edge); border-top: 3px solid var(--key, var(--accent));
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--drop); padding: 12px 14px 14px;
}
#drawer-mods { --key: var(--c-mod); }
#drawer-cons, #drawer-rep { --key: var(--c-pos); }
.drawerhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.drawerhead h3 { margin: 0; font-size: 13px; color: var(--key); text-transform: uppercase; letter-spacing: .06em; }
.drawerhead .hint { margin: 0; flex: 1 1 240px; }
.drawerhead input[type="search"] { width: auto; flex: 1 1 200px; }
.drawerhead .btn { margin-left: auto; }
.drawerhead .closedrawer { margin-left: 0; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
#drawer-rep textarea { min-height: 120px; }
/* A grid, not CSS columns: columns filled top-to-bottom, so the 43 A-based entries
   took all three and C, G, T and U were unreachable. Laying the items out in rows keeps
   the families in order, and each heading spans the full width and sticks while scrolling. */
#drawer-mods .modlist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 0 14px; align-content: start; max-height: 330px; padding: 0 2px 6px;
}
#drawer-mods .modlist .grp {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 1;
  margin-top: 6px; border-radius: 3px;
}
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); margin: 8px 0 4px; }
.jump button {
  border: 1px solid var(--recess-edge); background: var(--recess-bg); color: var(--muted);
  border-radius: 3px; padding: 2px 9px; font: 600 12px var(--mono); cursor: pointer;
}
.jump button:hover { border-color: var(--c-mod); color: var(--c-mod); }

/* ======================= colour in the results ======================= */
.stat { border-top: 2px solid var(--key, var(--subtle)); }
.stat:nth-child(1) { --key: var(--c-seq); }
.stat:nth-child(2) { --key: var(--c-lib); }
.stat:nth-child(3) { --key: var(--c-seq); }
.stat:nth-child(4) { --key: var(--c-pos); }
.stat:nth-child(5) { --key: var(--c-mod); }
.stat:nth-child(6) { --key: var(--c-mod); }
.stat .v { color: var(--key, var(--ink)); }

.chip { border-color: var(--c-pos); color: var(--ink); }
td.seq { color: var(--c-seq); }
.flag { color: var(--c-pos); font-weight: 600; }

/* ======================= duplex figure ======================= */
.guide .fig { width: 100%; height: auto; display: block; margin: 2px 0 20px; }
.fig .band.core  { fill: var(--c-seq); fill-opacity: .07; stroke: var(--c-seq); stroke-opacity: .35; }
.fig .band.clamp { fill: var(--subtle); fill-opacity: .07; stroke: var(--subtle); stroke-opacity: .3; }
.fig .rung { stroke-width: 3.2; stroke-linecap: round; }
.fig .rung.corebp  { stroke: var(--c-seq); stroke-opacity: .85; }
.fig .rung.clampbp { stroke: var(--subtle); }
.fig .strand { fill: none; stroke-width: 3; stroke-linecap: round; }
.fig .strand.w { stroke: var(--c-lib); }
.fig .strand.c { stroke: var(--c-mod); }
.fig .win { fill: none; stroke: var(--c-pos); stroke-width: 1.4; }
.fig .win.mid { fill: var(--c-pos); fill-opacity: .12; }
.fig .dots { stroke: var(--subtle); stroke-width: 1; stroke-dasharray: 2 3; }
.fig .axis { stroke: var(--c-pos); stroke-width: 1.2; }
.fig .end { font: 600 11px var(--mono); fill: var(--muted); }
.fig .tick { font: 11.5px var(--sans); fill: var(--ink); text-anchor: middle; }
.fig .tick.dim { fill: var(--muted); font-size: 11px; }
.fig .tick.strong { font-weight: 600; }
.fig .tick.onwin { font-size: 10.5px; fill: var(--c-pos); font-weight: 600; }
.fig .tick.pos { fill: var(--c-pos); font-weight: 600; }

/* ---- ribbon density: keep the whole band short so results get the height ---- */
.card .examples { display: flex; flex-wrap: wrap; gap: 5px; }
.card .examples .btn { font-size: 11.5px; padding: 4px 8px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 760px) { .card.k-ex { grid-column: 1 / -1; } }
.seg.wide button { white-space: nowrap; font-size: 12px; }
.drawerrow { gap: 6px; }
.drawerbtn { min-width: 0; }
.drawerbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawerbtn b { flex: none; }
.card .estimate { margin-bottom: 8px; }
/* the figure is drawn at 760 units wide; past that it just magnifies the type */
.guide .fig { max-width: 880px; margin-inline: auto; }
.actlabel { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; align-self: center; margin-right: 2px; }
.card.k-run #reset { width: auto; align-self: flex-start; }