/* ═══════════════════════════════════════════════════════════════════════════
 * ORDER V5 — /cs/order/v5 (CS-ORDER-V5, 2026-09-04)
 *
 * SCOPED TO .co5. Every selector in this file starts inside the v5 page, so
 * loading it changes nothing on any other screen — /cs/order (v2) renders with
 * this sheet in the document and is byte-identical.
 *
 * TOKENS ONLY. Colour, radius, shadow and easing come from cs-shell.css's
 * --csx-* / --cso-* ladders, so light and dark both work without a second
 * palette. The ONE set of literals is Dom's macOS-tag status palette below,
 * which is a named product decision, not a colour choice made here.
 *
 * TYPE. Manrope-leaning through --font-sans; every size multiplies by
 * --text-scale, so the aA slider in the page header (which writes the shell's
 * own cs.theme.text) moves this page like it moves the rest of the cockpit.
 *
 * NO PILLS. Chips are rounded rectangles at --csx-r-chip (10px-ish), per the
 * standing ruling. No solid emerald anywhere except the Paid balance block.
 * ═══════════════════════════════════════════════════════════════════════ */

.co5{
  /* Dom's macOS-tag status palette, exactly as trialled in the mockup. Ink on
     the fills is #0A0A0A in BOTH themes: these are the fill colours, not
     theme surfaces, so the text on them does not follow the theme. */
  --co5-booked:#5BB8F5;
  --co5-shot:#F0A030;
  --co5-edited:#B08CF0;
  --co5-delivered:#4CBF5C;
  --co5-invoiced:#F5E85A;
  --co5-paid:#3EE092;
  --co5-on-fill:#0A0A0A;
  --co5-butter:var(--accent-butter,#FFF083);

  --co5-r:var(--csx-r-md);
  --co5-chip-r:var(--csx-r-chip);
  font-family:var(--font-sans);
  max-width:1320px;
}
.co5 *{box-sizing:border-box}
.co5 .co5-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.co5 .co5-sp{flex:1}
.co5 .co5-sep{opacity:.5;padding:0 2px}
.co5 .co5-note{color:var(--csx-ink-3)}
.co5 .co5-none{color:var(--csx-ink-3);font-size:calc(13.5px * var(--text-scale,1));padding:14px 0}
.co5 .co5-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co5 .co5-link{color:var(--csx-ink-2);font-size:calc(13px * var(--text-scale,1));font-weight:600;text-decoration:none}
.co5 .co5-link:hover{color:var(--csx-accent-text)}

/* ── Header ─────────────────────────────────────────────────────────────── */
.co5 .co5-head{padding:2px 0 20px}
.co5 .co5-head-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.co5 .co5-eyebrow{margin:0 0 6px;font-size:calc(13px * var(--text-scale,1));color:var(--csx-ink-3);font-weight:500}
.co5 .co5-eyebrow a{color:inherit;text-decoration:none}
.co5 .co5-eyebrow a:hover{color:var(--csx-ink-2)}
.co5 .co5-h1{margin:0;font-size:calc(27px * var(--text-scale,1));font-weight:600;
  letter-spacing:-.025em;line-height:1.12;color:var(--csx-ink)}
.co5 .co5-sub{margin:5px 0 0;font-size:calc(13.5px * var(--text-scale,1));color:var(--csx-ink-3)}
.co5 .co5-head-tools{margin-left:auto;display:flex;align-items:center;gap:14px;padding-top:4px}
.co5 .co5-meta{display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:13px;
  font-size:calc(13px * var(--text-scale,1));color:var(--csx-ink-3)}
.co5 .co5-meta b{color:var(--csx-ink-2);font-weight:600}
.co5 .co5-svc{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* the aA snap slider — the shell's own --text-scale, four steps */
.co5 .co5-sizer{display:flex;align-items:center;gap:8px;color:var(--csx-ink-3)}
.co5 .co5-aA i{font-style:normal;font-size:calc(11px * var(--text-scale,1))}
.co5 .co5-aA b{font-weight:600;font-size:calc(15px * var(--text-scale,1))}
.co5 .co5-sizer input[type=range]{-webkit-appearance:none;appearance:none;width:72px;height:12px;
  margin:0;background:none;cursor:pointer}
.co5 .co5-sizer input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--csx-line-2)}
.co5 .co5-sizer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;
  border-radius:50%;background:var(--csx-ink-3);border:0;margin-top:-4px}
.co5 .co5-sizer input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:var(--csx-line-2)}
.co5 .co5-sizer input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;
  background:var(--csx-ink-3);border:0}

/* ── Chips: rounded rectangles, never pills ─────────────────────────────── */
.co5 .co5-chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;
  border-radius:var(--co5-chip-r);font-size:calc(12.5px * var(--text-scale,1));font-weight:600;
  white-space:nowrap;color:var(--csx-ink-2);background:var(--csx-chip-step)}
.co5 .co5-chip b{font-weight:700;color:var(--csx-ink)}
.co5 .co5-chip.quiet{background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink-2)}
.co5 .co5-chip.line{background:none;border:1px solid var(--csx-accent);color:var(--csx-accent-text)}
.co5 .co5-chip.fill{background:var(--co5-paid);color:var(--co5-on-fill)}
.co5 .co5-chip.butter{background:var(--co5-butter);color:var(--co5-on-fill)}
.co5 .co5-chip.stage{color:var(--co5-on-fill)}
.co5 .co5-chip.stage[data-plain]{background:var(--csx-chip-step);color:var(--csx-ink-2)}
.co5 .co5-chip.stage[data-stage=booked]{background:var(--co5-booked)}
.co5 .co5-chip.stage[data-stage=shot]{background:var(--co5-shot)}
.co5 .co5-chip.stage[data-stage=edited]{background:var(--co5-edited)}
.co5 .co5-chip.stage[data-stage=delivered]{background:var(--co5-delivered)}
.co5 .co5-chip.stage[data-stage=invoiced]{background:var(--co5-invoiced)}
.co5 .co5-chip.stage[data-stage=paid]{background:var(--co5-paid)}

/* ── Sections ───────────────────────────────────────────────────────────── */
.co5 .co5-sec{background:var(--csx-surface);border:1px solid var(--csx-line);
  border-radius:var(--co5-r);box-shadow:var(--csx-shadow-card);margin-bottom:18px;overflow:hidden}
.co5 .co5-cardh{display:flex;align-items:center;gap:10px;padding:13px 16px 0}
.co5 .co5-sec.is-collapsed .co5-cardh{padding-bottom:13px}
.co5 .co5-cardh h2{margin:0;font-size:calc(14px * var(--text-scale,1));font-weight:600;letter-spacing:-.01em;color:var(--csx-ink)}
.co5 .co5-hint{color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale,1));font-weight:400}
.co5 .co5-cardb{padding:13px 16px 16px}
.co5 .co5-sec.is-collapsed > .co5-cardb,
.co5 .co5-sec.is-collapsed > .co5-histfull{display:none}
.co5 .co5-ctog{background:none;border:0;color:var(--csx-ink-3);cursor:pointer;padding:2px 3px;
  border-radius:6px;font-size:10px;line-height:1;width:14px;transition:transform .16s var(--csx-ease)}
.co5 .co5-ctog:hover{color:var(--csx-ink)}
.co5 .co5-sec.is-collapsed .co5-ctog{transform:rotate(-90deg)}
.co5 .co5-cardfoot{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--csx-line);
  color:var(--csx-ink-3);font-size:calc(12.5px * var(--text-scale,1));line-height:1.55;max-width:78ch}
.co5 .co5-allwrap{display:flex;justify-content:flex-end;margin:-6px 0 18px}
.co5 .co5-foot{color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale,1))}
.co5 .co5-foot a{color:var(--csx-ink-2);text-decoration:none;font-weight:600}

/* ── History bar ────────────────────────────────────────────────────────── */
.co5 .co5-hbar{display:flex;align-items:flex-start;gap:16px;width:100%;min-width:0;
  background:none;border:0;padding:13px 16px 12px;cursor:pointer;text-align:left;color:inherit}
.co5 .co5-hbar:hover{background:var(--csx-surface-hover)}
.co5 .co5-chev{color:var(--csx-ink-3);font-size:11px;width:10px;margin-top:2px;flex:none;
  display:inline-block;transition:transform .16s var(--csx-ease)}
.co5 .co5-hbar[aria-expanded=true] .co5-chev{transform:rotate(90deg)}
.co5 .co5-hsteps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1 1 auto;min-width:0}
.co5 .co5-hsteps:has(.is-tent){grid-template-columns:repeat(7,1fr)}
.co5 .co5-cnt{color:var(--csx-ink-3);font-size:calc(12.5px * var(--text-scale,1));white-space:nowrap;flex:none;margin-top:2px}

/* the collapsed history IS the stepper: a 2px rule per stage, name + date under */
.co5 .co5-hs{min-width:0;display:block;--sc:var(--csx-line-2)}
.co5 .co5-hs[data-stage=booked]{--sc:var(--co5-booked)}
.co5 .co5-hs[data-stage=shot]{--sc:var(--co5-shot)}
.co5 .co5-hs[data-stage=edited]{--sc:var(--co5-edited)}
.co5 .co5-hs[data-stage=delivered]{--sc:var(--co5-delivered)}
.co5 .co5-hs[data-stage=invoiced]{--sc:var(--co5-invoiced)}
.co5 .co5-hs[data-stage=paid]{--sc:var(--co5-paid)}
.co5 .co5-hs .rule{display:block;height:2px;border-radius:2px;background:var(--sc);opacity:.25}
.co5 .co5-hs.is-reached .rule{opacity:1}
.co5 .co5-hs .lbl{display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:calc(12.5px * var(--text-scale,1));color:var(--csx-ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co5 .co5-hs.is-reached .lbl{color:var(--csx-ink)}
.co5 .co5-hs .lbl i{display:none;width:5px;height:5px;border-radius:50%;background:var(--sc);flex:none}
.co5 .co5-hs.is-now .lbl i{display:inline-block}
.co5 .co5-hs .when{display:block;margin-top:2px;font-size:calc(11.5px * var(--text-scale,1));
  color:var(--csx-ink-3);font-variant-numeric:tabular-nums}
.co5 .co5-hs:not(.is-reached) .when{opacity:.6}
/* TENTATIVE: butter OUTLINE + hollow dot. Drawn only while it is true. */
.co5 .co5-hs.is-tent .rule{background:none;box-shadow:inset 0 0 0 1px var(--co5-butter);opacity:1}
.co5 .co5-hs.is-tent .lbl{color:var(--csx-ink)}
.co5 .co5-hs.is-tent .lbl i{display:inline-block;background:none;box-shadow:inset 0 0 0 2px var(--co5-butter)}

.co5 .co5-histfull{border-top:1px solid var(--csx-line);padding:6px 16px 12px}
.co5 .co5-tl{position:relative;padding-left:22px}
.co5 .co5-tl:before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;background:var(--csx-line)}
.co5 .co5-ev{position:relative;padding:5px 0}
.co5 .co5-ev:before{content:"";position:absolute;left:-18px;top:14px;width:9px;height:9px;border-radius:50%;
  background:var(--csx-surface);border:1px solid var(--csx-line-2)}
.co5 .co5-evrow{display:flex;align-items:baseline;gap:10px;width:100%;background:none;border:0;
  padding:4px 6px;margin-left:-6px;border-radius:8px;cursor:pointer;text-align:left;color:inherit}
.co5 .co5-evrow[disabled]{cursor:default}
.co5 .co5-evrow:hover:not([disabled]){background:var(--csx-surface-hover)}
.co5 .co5-evcar{color:var(--csx-ink-3);font-size:10px;transition:transform .14s var(--csx-ease)}
.co5 .co5-evrow[aria-expanded=true] .co5-evcar{transform:rotate(90deg)}
.co5 .co5-evt{font-size:calc(13.5px * var(--text-scale,1));font-weight:600;color:var(--csx-ink)}
.co5 .co5-evwho{color:var(--csx-ink-3);font-size:calc(12.5px * var(--text-scale,1))}
.co5 .co5-evwhen{margin-left:auto;color:var(--csx-ink-3);font-size:calc(12px * var(--text-scale,1));
  font-variant-numeric:tabular-nums;white-space:nowrap}
.co5 .co5-evd{color:var(--csx-ink-2);font-size:calc(12.5px * var(--text-scale,1));padding:2px 0 6px;max-width:70ch}
.co5 .co5-evd ul{margin:4px 0 0;padding-left:16px}
.co5 .co5-evd li{margin:2px 0;word-break:break-word}

/* ── Money ──────────────────────────────────────────────────────────────── */
.co5 .co5-undoline{display:flex;align-items:center;gap:9px;margin:-13px -16px 12px;
  padding:8px 16px;border-bottom:1px solid var(--csx-line);
  color:var(--csx-ink-3);font-size:calc(12.5px * var(--text-scale,1));min-height:36px;flex-wrap:wrap}
.co5 .co5-undomsg{color:var(--csx-ink-2)}
.co5 .co5-locked{margin:0 0 12px;color:var(--csx-ink-3);font-size:calc(12.5px * var(--text-scale,1));
  border-left:2px solid var(--cso-butter);background:var(--csx-surface-2);padding:9px 12px;
  border-radius:0 var(--csx-r-sm) var(--csx-r-sm) 0;max-width:80ch}

.co5 .co5-mini{background:none;border:1px solid var(--csx-line);color:var(--csx-ink-2);
  border-radius:var(--csx-r-sm);padding:4px 9px;font:inherit;
  font-size:calc(12.5px * var(--text-scale,1));cursor:pointer;white-space:nowrap}
.co5 .co5-mini:hover{border-color:var(--csx-line-2);color:var(--csx-ink)}
.co5 .co5-mini[disabled]{opacity:.4;cursor:not-allowed}
.co5 .co5-mini.is-acc{color:var(--csx-accent-text);border-color:var(--csx-accent)}
.co5 .co5-addrow{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

.co5 .co5-ml{display:grid;grid-template-columns:minmax(0,1fr) 58px 96px 100px 26px;gap:10px;
  align-items:start;padding:9px 0;border-top:1px solid var(--csx-line)}
.co5 .co5-ml:first-child{border-top:0}
.co5 .co5-ml-main{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.co5 .co5-ml-a{text-align:right;padding-top:4px;font-size:calc(13.5px * var(--text-scale,1));color:var(--csx-ink)}
.co5 .co5-ml-a.is-neg{color:var(--csx-ink-2)}
.co5 .co5-ml-q,.co5 .co5-ml-u{min-width:0}
.co5 .co5-iv{background:none;border:1px solid transparent;border-radius:7px;padding:3px 6px;
  margin-left:-6px;cursor:text;text-align:left;color:var(--csx-ink);font:inherit;
  font-size:calc(13.5px * var(--text-scale,1));max-width:100%}
.co5 .co5-iv:hover{border-color:var(--csx-line-2);background:var(--csx-surface-2)}
.co5 .co5-q,.co5 .co5-u{text-align:right;width:100%;margin-left:0;color:var(--csx-ink-2);
  font-variant-numeric:tabular-nums}
.co5 .co5-ivin{background:var(--csx-surface-2);border:1px solid var(--csx-accent);border-radius:7px;
  padding:3px 6px;width:100%;font:inherit;font-size:calc(13.5px * var(--text-scale,1));color:var(--csx-ink)}
.co5 .co5-more{background:none;border:0;color:var(--csx-ink-3);cursor:pointer;border-radius:6px;
  padding:3px 4px;line-height:1;font-size:15px}
.co5 .co5-more:hover{color:var(--csx-ink);background:var(--csx-surface-hover)}
.co5 .co5-payer{height:20px;font-size:calc(11.5px * var(--text-scale,1))}

.co5 .co5-ldisc{display:none;flex-basis:100%;margin:4px 0 0 -6px;padding:6px;
  border-radius:var(--csx-r-sm);background:var(--csx-surface-2)}
.co5 .co5-ldisc.is-on{display:block}
.co5 .co5-ldisc .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co5 .co5-ldisc .lbl{color:var(--csx-ink-3);font-size:calc(12px * var(--text-scale,1))}
.co5 .co5-ldisc select,.co5 .co5-ldisc input[type=number]{background:var(--csx-surface);
  border:1px solid var(--csx-field-border);border-radius:7px;padding:3px 7px;font:inherit;
  font-size:calc(12.5px * var(--text-scale,1));color:var(--csx-ink);width:auto}
.co5 .co5-ldisc input[type=number]{width:86px}
.co5 .co5-ldisc .amtd{margin-left:auto;font-size:calc(12.5px * var(--text-scale,1));color:var(--csx-ink-2)}
/* the wording that lands on the invoice — two lines, wrapping, never truncated */
.co5 .co5-ldisc .w{margin-top:6px}
.co5 .co5-ldisc textarea{width:100%;min-height:40px;resize:vertical;background:var(--csx-surface);
  border:1px solid var(--csx-field-border);border-radius:7px;padding:5px 7px;color:var(--csx-ink);
  font:inherit;font-size:calc(12.5px * var(--text-scale,1));line-height:1.45;white-space:pre-wrap}

.co5 .co5-pkgsug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;
  padding:9px 11px;border-radius:var(--csx-r-sm);border:1px solid var(--csx-accent);
  background:color-mix(in srgb,var(--csx-accent) 11%,transparent);
  font-size:calc(12.5px * var(--text-scale,1));color:var(--csx-ink-2)}
.co5 .co5-pkgsug b{color:var(--csx-ink);font-weight:700}

.co5 .co5-rule{height:1px;background:var(--csx-line);margin:12px 0}
.co5 .co5-tot{display:flex;align-items:center;padding:5px 0;font-size:calc(13.5px * var(--text-scale,1))}
.co5 .co5-tot .lab{color:var(--csx-ink-2)}
.co5 .co5-tot .amt{margin-left:auto}
.co5 .co5-tot.is-big{font-size:calc(15px * var(--text-scale,1))}
.co5 .co5-tot.is-big .lab,.co5 .co5-tot.is-big .amt{color:var(--csx-ink);font-weight:660}
.co5 .co5-tot.is-paid .amt{color:var(--csx-accent-text)}

.co5 .co5-balance{display:flex;align-items:center;gap:12px;margin-top:11px;padding:12px 14px;
  border:1px solid var(--csx-line);border-radius:var(--csx-r-sm);background:var(--csx-surface-2);flex-wrap:wrap}
.co5 .co5-balance .lab{font-size:calc(13.5px * var(--text-scale,1));color:var(--csx-ink)}
.co5 .co5-balance .amt{margin-left:auto;font-size:calc(15px * var(--text-scale,1));font-weight:660}
.co5 .co5-balance .lab:before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block;
  margin-right:9px;background:var(--csx-line-2);vertical-align:middle;position:relative;top:-1px}
/* THE ONE SOLID EMERALD ON THE PAGE. Paid is the state that earns a flat fill;
   everything else that wants to feel positive gets an 11% tint. */
.co5 .co5-balance.is-paid{background:var(--co5-paid);border-color:var(--co5-paid)}
.co5 .co5-balance.is-paid .lab,.co5 .co5-balance.is-paid .amt{color:var(--co5-on-fill)}
.co5 .co5-balance.is-paid .lab:before{background:var(--co5-on-fill)}
.co5 .co5-balance.is-over{border-color:var(--csx-line-2)}
.co5 .co5-balance.is-over .lab:before{background:var(--co5-butter)}

.co5 .co5-overwhat{margin-top:10px;padding:11px 12px;border:1px solid var(--csx-line);
  border-radius:var(--csx-r-sm);background:var(--csx-surface-2)}
.co5 .co5-overwhat .r1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:calc(12.5px * var(--text-scale,1));color:var(--csx-ink-3)}
.co5 .co5-overwhat select{background:var(--csx-surface);border:1px solid var(--csx-field-border);
  border-radius:8px;padding:5px 9px;font:inherit;font-size:calc(13px * var(--text-scale,1));
  color:var(--csx-ink);width:auto}
.co5 .co5-overwhat .exp{margin:8px 0 0;font-size:calc(12.5px * var(--text-scale,1));
  color:var(--csx-ink-2);max-width:70ch;line-height:1.5}

.co5 .co5-trash{margin-top:14px;border:1px solid var(--csx-line);border-radius:var(--csx-r-sm);
  background:var(--csx-surface-2)}
.co5 .co5-trash-h{display:flex;align-items:center;gap:8px;padding:9px 11px;
  color:var(--csx-ink-2);font-size:calc(12.5px * var(--text-scale,1))}
.co5 .co5-trash-h .co5-note{margin-left:auto}
.co5 .co5-trash-b{padding:0 11px 11px}
.co5 .co5-trashline{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-top:1px solid var(--csx-line);font-size:calc(12.5px * var(--text-scale,1))}
.co5 .co5-trashline .w{color:var(--csx-ink-3)}

/* ── Read-only cards ────────────────────────────────────────────────────── */
.co5 .co5-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.co5 .co5-cards > .co5-sec{margin-bottom:0}
.co5 .co5-rows{display:block}
.co5 .co5-row{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.co5 .co5-row .k{color:var(--csx-ink-3);min-width:82px;font-size:calc(12.5px * var(--text-scale,1))}
.co5 .co5-row .v{color:var(--csx-ink);font-size:calc(13.5px * var(--text-scale,1));min-width:0;word-break:break-word}
.co5 .co5-row .v a{color:inherit}

/* ── The row / package menu (body-level, so it is never clipped) ─────────── */
.co5-menu{position:fixed;z-index:66;display:none;min-width:210px;padding:5px;
  background:var(--csx-surface);border:1px solid var(--csx-line-2);
  border-radius:var(--csx-r-sm);box-shadow:var(--csx-shadow-pop);font-family:var(--font-sans)}
.co5-menu.is-on{display:block}
.co5-menu button{display:flex;width:100%;background:none;border:0;color:var(--csx-ink-2);
  padding:7px 9px;border-radius:7px;cursor:pointer;text-align:left;font:inherit;
  font-size:calc(13px * var(--text-scale,1))}
.co5-menu button:hover{background:var(--csx-surface-hover);color:var(--csx-ink)}
.co5-menu button.is-danger{color:var(--csx-st-red-tx)}
.co5-menu button.is-danger:hover{background:var(--csx-st-red-bg)}
.co5-menu .co5-menu-none{margin:0;padding:8px 9px;color:var(--csx-ink-3);
  font-size:calc(12.5px * var(--text-scale,1));max-width:36ch;line-height:1.5}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .co5 .co5-cards{grid-template-columns:1fr}
}
@media (max-width:860px){
  .co5 .co5-hsteps{grid-template-columns:repeat(3,1fr);row-gap:14px}
  .co5 .co5-hsteps:has(.is-tent){grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .co5 .co5-ml{grid-template-columns:minmax(0,1fr) 52px 84px 88px 24px;gap:6px}
  .co5 .co5-head-tools{margin-left:0;width:100%}
}
@media (max-width:560px){
  /* No sideways scroll, ever: the line becomes two rows instead of a scroller. */
  .co5 .co5-ml{grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:auto}
  .co5 .co5-ml-main{grid-column:1 / -1}
  .co5 .co5-ml-a{grid-column:2}
  .co5 .co5-sizer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .co5 .co5-chev,.co5 .co5-ctog,.co5 .co5-evcar{transition:none}
}