/* ── /cs/order/v5 — THE MOCKUP, VERBATIM ───────────────────────────────────
 *
 * CS-ORDER-V5 lane P3, 2026-09-04. Dom rejected two interpretations of the
 * approved artifact ("completely drifted away from what I approved"). This
 * sheet is therefore NOT a translation: it is the <style> block of
 * public/_mockups/order-v5.html, whole, with every value untouched, moved
 * under `.co5` (the page root) so it cannot leak into the rest of the cockpit
 * and the cockpit cannot leak into it.
 *
 * WHAT CHANGED FROM THE MOCKUP, AND ONLY THIS:
 *   1. every selector is prefixed `.co5 ` (the mockup's `:root` and `body`
 *      token blocks become `.co5` / `:root[data-theme="light"] .co5`, because
 *      the cockpit keeps its theme on <html data-theme>, not on <body data-ui>)
 *   2. `.collapsed` reads `.is-collapsed`, which is the class the shared
 *      components/collapse.js primitive toggles. Its exported contract is not
 *      touched; only the name in these rules.
 *   3. one SHELL COLLISIONS block at the very bottom: the fixed bottom bar is
 *      inset by the 260px sidebar, and the body-level layer host is neutered.
 *
 * Nothing else. No shell token is substituted for a mockup token, no radius is
 * rounded, no spacing is "harmonised". The dark ladder, the warm dirty-white
 * light ladder, the 15 --tag-* colours, the --sg-* stage mapping, the Manrope
 * font vars and the themed scrollbars are the mockup's own.
 */



.co5{
  --bg:#0e0e0e; --elev:#161616; --elev-2:#1c1c1c; --elev-3:#232323; --field:#101010;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#ffffff; --ink-2:#b8b8b8; --ink-3:#7a7a7a;
  --acc:#3EE092; --acc-ink:#3EE092; --acc-soft:rgba(62,224,146,.10); --acc-line:rgba(62,224,146,.35); --on-acc:#062015;
  --line-strong:rgba(255,255,255,.22);
  --mint:#b8f3d2; --butter:#FFF083; --on-fill:#0A0A0A;
  /* Dom's status palette - macOS-tag style, used at full strength with #0A0A0A on top */
  --tag-blue:#3D7BF7; --tag-green:#4CBF5C; --tag-orange:#F0A030; --tag-red:#F04A4A;
  --tag-crimson:#E63A5A; --tag-purple:#8B2BE0; --tag-maroon:#B03050; --tag-pink:#F08CB0;
  --tag-lavender:#B08CF0; --tag-sky:#5BB8F5; --tag-lime:#A8E040; --tag-yellow:#F5E85A;
  --tag-tan:#D8B070; --tag-brown:#8C6E62; --tag-cream:#F5EFC0;
  --sg-booked:var(--tag-sky); --sg-shot:var(--tag-orange); --sg-edited:var(--tag-lavender);
  --sg-delivered:var(--tag-green); --sg-invoiced:var(--tag-yellow); --sg-paid:#3EE092;
  --warn:#FFF083; --warn-ink:#FFF083; --warn-dim:#cbbf4f;
  --warn-soft:rgba(255,240,131,.12); --warn-line:rgba(255,240,131,.30);
  --danger:#ff5c5c; --danger-soft:rgba(255,92,92,.10);
  --neutral-fill:#262626; --on-neutral:#ffffff;
  --font:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Manrope", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r:12px; --r-sm:10px; --r-chip:10px;
  --base:14px;
  --tbase:29%;
}
/* warm "dirty white" ladder - no pure white anywhere in light mode */
:root[data-theme="light"] .co5{
  --bg:#EFEBE3; --elev:#F7F4EE; --elev-2:#E8E4DC; --elev-3:#e0dbd1; --field:#f1eee4;
  --line:rgba(29,26,20,.14); --line-2:rgba(29,26,20,.24);
  --ink:#14120e; --ink-2:#3a362f; --ink-3:#5f5a51;
  --acc:#3EE092; --acc-ink:#1f8a4c; --acc-soft:rgba(31,138,76,.12); --acc-line:rgba(31,138,76,.34); --on-acc:#0d1410;
  --line-strong:rgba(29,26,20,.34);
  --warn:#FFF083; --warn-ink:#8a6d12; --warn-dim:#d8c65a;
  --warn-soft:rgba(255,240,131,.34); --warn-line:rgba(138,109,18,.32);
  --danger:#FF0016; --danger-soft:rgba(255,0,22,.08);
  --neutral-fill:#262626; --on-neutral:#F7F4EE;
  --tbase:84%;
}
.co5 *{box-sizing:border-box;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
.co5 ::-webkit-scrollbar{width:6px;height:6px}
.co5 ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.co5 ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.co5 ::-webkit-scrollbar-track,.co5 ::-webkit-scrollbar-corner{background:transparent}
.co5{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--base);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.co5 button,.co5 input,.co5 select,.co5 textarea{font:inherit;color:inherit;font-variant-numeric:tabular-nums}
.co5 a{color:inherit}
.co5 :focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:4px}
.co5 .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.co5 .spacer{flex:1}
.co5 .hid{display:none}
.co5 .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co5 .note{color:var(--ink-3)}

/* ---------- shell ---------- */
.co5 .shell{max-width:1320px;margin:0 auto;padding:0 28px 120px}
.co5 .topbar{display:flex;align-items:center;gap:12px;height:52px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:40}
.co5 .crumb{color:var(--ink-3);font-size:.9em;display:flex;align-items:center;gap:7px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.co5 .crumb b{color:var(--ink-2);font-weight:500}
.co5 .crumb .sep{opacity:.5}
.co5 .tbtn{background:none;border:1px solid transparent;color:var(--ink-3);padding:5px 9px;border-radius:8px;
  cursor:pointer;font-size:.9em;display:inline-flex;align-items:center;gap:7px}
.co5 .tbtn:hover{color:var(--ink);background:var(--elev-2)}
.co5 .kbd{font-family:var(--mono);font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;background:var(--elev)}
.co5 .fontpick{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:.86em}
.co5 .fontpick select{background:var(--elev);border:1px solid var(--line);border-radius:8px;padding:4px 8px;
  font-size:.9em;color:var(--ink-2);cursor:pointer}
.co5 .sizer{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.co5 .sizer .aA{letter-spacing:-.02em}
.co5 .sizer .aA i{font-style:normal;font-size:11px}
.co5 .sizer .aA b{font-weight:600;font-size:15px}
.co5 .sizer input[type=range]{-webkit-appearance:none;appearance:none;width:72px;background:none;cursor:pointer;
  height:12px;margin:0;scrollbar-width:auto}
.co5 .sizer input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--line-strong)}
.co5 .sizer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;
  background:var(--ink-3);border:0;margin-top:-4px}
.co5 .sizer input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:var(--line-strong)}
.co5 .sizer input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--ink-3);border:0}
.co5 .sizer input[type=range]:hover::-webkit-slider-thumb{background:var(--ink-2)}
.co5 .sizer input[type=range]:hover::-moz-range-thumb{background:var(--ink-2)}
.co5 .sizer .val{font-family:var(--mono);font-size:11px;min-width:18px;text-align:right;color:var(--ink-3)}
.co5 .sizer .aA{color:var(--ink-3)}
.co5 .tags{display:flex;gap:3px;align-items:center}
.co5 .tags .d{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.28)}
@media(max-width:1180px){.co5 .tags{display:none}}
@media(max-width:900px){.co5 .sizer{display:none}}
@media(max-width:700px){.co5 .fontpick{display:none}}

/* ---------- header ---------- */
.co5 .head{padding:28px 0 0}
.co5 .head-top{display:flex;align-items:flex-start;gap:16px}
.co5 h1{font-size:1.95em;line-height:1.12;letter-spacing:-.025em;font-weight:600;margin:0}
.co5 .sub{color:var(--ink-3);font-size:.94em;margin-top:5px}
.co5 .meta{display:flex;flex-wrap:wrap;gap:0 20px;color:var(--ink-3);font-size:.9em;margin-top:13px}
.co5 .meta span b{color:var(--ink-2);font-weight:500}

/* flat chips - no pills anywhere */
.co5 .chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:var(--r-chip);
  font-size:.85em;font-weight:600;white-space:nowrap;letter-spacing:.005em}
.co5 .chip.fill{background:var(--acc);color:var(--on-fill)}
.co5 .chip.butter{background:var(--butter);color:var(--on-fill)}
.co5 .chip.outline{background:none;border:1px solid var(--line-2);color:var(--ink-2)}
.co5 .chip.tag{color:var(--on-fill);background:var(--tc)}
.co5 .chip.tag-orange{--tc:var(--tag-orange)}
.co5 .chip.tag-sky{--tc:var(--tag-sky)}
.co5 .chip.stage{background:var(--sf);border:1px solid var(--sb);color:var(--so)}

.co5 .chip.quiet{background:var(--elev-2);color:var(--ink-2);border:1px solid var(--line)}
.co5 .chip.line{background:none;border:1px solid var(--acc-line);color:var(--acc-ink)}

/* ---------- history bar ---------- */
.co5 .hist{margin:22px 0 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--elev);overflow:hidden}
.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 .hbar:hover{background:var(--elev-2)}
.co5 .hbar .chev{color:var(--ink-3);font-size:11px;transition:transform .16s ease;display:inline-block;width:10px;
  margin-top:2px;flex:0 0 auto}
.co5 .hbar[aria-expanded="true"] .chev{transform:rotate(90deg)}
.co5 .hsteps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1 1 auto;min-width:0}
@media(max-width:960px){.co5 .hsteps{grid-template-columns:repeat(3,1fr);row-gap:14px}}
/* stage marks live in the chip, the segment and the timeline dot - never on a card.
   --sc mark colour, --sf chip fill, --sb chip border, --so chip text */
.co5 [data-stage="booked"]{--sc:var(--sg-booked);--sf:var(--sg-booked);--sb:var(--sg-booked);--so:var(--on-fill)}
.co5 [data-stage="shot"]{--sc:var(--sg-shot);--sf:var(--sg-shot);--sb:var(--sg-shot);--so:var(--on-fill)}
.co5 [data-stage="edited"]{--sc:var(--sg-edited);--sf:var(--sg-edited);--sb:var(--sg-edited);--so:var(--on-fill)}
.co5 [data-stage="delivered"]{--sc:var(--sg-delivered);--sf:var(--sg-delivered);--sb:var(--sg-delivered);--so:var(--on-fill)}
.co5 [data-stage="invoiced"]{--sc:var(--sg-invoiced);--sf:var(--sg-invoiced);--sb:var(--sg-invoiced);--so:var(--on-fill)}
.co5 [data-stage="paid"]{--sc:var(--sg-paid);--sf:var(--sg-paid);--sb:var(--sg-paid);--so:var(--on-fill)}
/* the collapsed history IS the stepper: a 2px rule per stage, name and date under it */
.co5 .hs{min-width:0;display:block}
.co5 .hs .rule{display:block;height:2px;border-radius:2px;background:var(--sc);opacity:.25}
.co5 .hs.reached .rule{opacity:1}
.co5 .hs .lbl{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.86em;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co5 .hs.reached .lbl{color:var(--ink)}
.co5 .hs .lbl i{display:none;width:5px;height:5px;border-radius:50%;background:var(--sc);flex:0 0 auto}
.co5 .hs.now .lbl i{display:inline-block}
.co5 .hs .when{display:block;font-size:.78em;color:var(--ink-3);font-family:var(--mono);margin-top:2px}
.co5 .hs:not(.reached) .when{opacity:.6}
.co5 .hbar .cnt{color:var(--ink-3);font-size:.84em;white-space:nowrap;flex:0 0 auto;margin-top:1px}
.co5 .hbar > .chip{flex:0 0 auto;margin-top:-1px}
.co5 .histfull{border-top:1px solid var(--line);padding:6px 16px 12px}


/* ---------- timeline ---------- */
.co5 .tl{position:relative;padding-left:22px}
.co5 .tl:before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;background:var(--line)}
.co5 .ev{position:relative;padding:7px 0}
.co5 .ev:before{content:"";position:absolute;left:-22px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2)}
.co5 .ev[data-stage]:before{border-color:var(--sc);background:var(--sc)}
.co5 .ev.auto:before{background:var(--tag-purple);border-color:var(--tag-purple)}
.co5 .ev-row{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 .ev-row:hover{background:var(--elev-2)}
.co5 .ev-t{font-size:.95em;color:var(--ink);font-weight:500}
.co5 .ev-who{color:var(--ink-3);font-size:.88em}
.co5 .ev-when{margin-left:auto;color:var(--ink-3);font-size:.84em;font-family:var(--mono);white-space:nowrap}
.co5 .ev-car{color:var(--ink-3);font-size:10px;transition:transform .14s ease;margin-left:2px}
.co5 .ev-row[aria-expanded="true"] .ev-car{transform:rotate(90deg)}
.co5 .ev-d{display:none;color:var(--ink-2);font-size:.88em;padding:2px 0 6px;max-width:64ch}
.co5 .ev-d.open{display:block}
.co5 .ev-d ul{margin:6px 0 0;padding-left:16px}
.co5 .ev-d li{margin:2px 0}

/* ---------- filmstrip ---------- */
.co5 .strip-card{margin-bottom:20px}
.co5 .strip-wrap{position:relative}
.co5 .strip{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 16px 10px;cursor:grab;user-select:none;-webkit-user-select:none;scroll-behavior:auto}
.co5 .strip.dragging{cursor:grabbing}
.co5 .th{position:relative;flex:0 0 auto;border-radius:8px;border:1px solid var(--line);overflow:hidden;padding:0;
  cursor:pointer;background:linear-gradient(155deg,hsl(0 0% calc(var(--tbase) + var(--o) * 1%)),
  hsl(0 0% calc(var(--tbase) - 7% + var(--o) * 1%)));}
.co5 .th:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,0) 46%)}
:root[data-theme="light"] .co5 .th:after{background:linear-gradient(0deg,rgba(0,0,0,.26),rgba(0,0,0,0) 46%)}
.co5 .th .no{position:absolute;left:5px;bottom:4px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--acc-ink);letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.co5 .th .mls{position:absolute;right:5px;bottom:4px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:#FFF083;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.co5 .th .tick{display:none}
.co5 .th[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.co5 .th[aria-pressed="true"] .tick{display:block;position:absolute;top:4px;left:5px;z-index:2;color:var(--acc-ink);font-size:11px}
.co5 .stripbar{display:flex;align-items:center;gap:14px;padding:0 16px 8px;color:var(--ink-3);font-size:.84em}
.co5 .grab{height:4px;background:var(--line);cursor:ns-resize;border-radius:2px;margin:0 16px 8px;transition:background .12s}
.co5 .grab:hover,.co5 .grab.on{background:var(--acc)}
.co5 .stripmenu{position:fixed;z-index:66;background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:6px;min-width:300px;display:none;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.co5 .stripmenu.on{display:block}
.co5 .stripmenu .mh{padding:6px 9px 7px;color:var(--ink-3);font-size:.8em;border-bottom:1px solid var(--line);margin-bottom:4px}
.co5 .stripmenu .mrow{display:flex;align-items:center;gap:10px;padding:5px 9px}
.co5 .stripmenu .ml{color:var(--ink-3);font-size:.82em}
.co5 .stripmenu .segs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-left:auto}
.co5 .stripmenu .segs button{background:none;border:0;padding:4px 9px;font-size:.8em;color:var(--ink-3);cursor:pointer}
.co5 .stripmenu .segs button[aria-pressed="true"]{background:var(--elev-2);color:var(--ink)}
.co5 .stripmenu .sep{height:1px;background:var(--line);margin:5px 0}
.co5 .stripmenu .wide{display:flex;width:100%;background:none;border:0;color:var(--ink-2);padding:7px 9px;
  border-radius:7px;cursor:pointer;text-align:left;font-size:.88em}
.co5 .stripmenu .wide:hover{background:var(--elev-2);color:var(--ink)}
.co5 .strip[data-nums="ours"] .mls,.co5 .strip[data-nums="none"] .mls,.co5 .strip[data-nums="none"] .no,.co5 .strip[data-nums="client"] .no{display:none}
.co5 .sets{display:flex;flex-direction:column;gap:10px}
.co5 .set{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--elev-2)}
.co5 .set.pinned{border-color:var(--acc-line)}
.co5 .set .sn{font-size:.9em;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co5 .set .sx{color:var(--ink-3);font-size:.84em;margin-top:3px}
.co5 .set .sa{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.co5 .dv.stacked{grid-template-columns:132px minmax(0,1fr)}
.co5 .th .prog{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(10,10,10,.82);
  padding:4px 5px 5px;font-size:9.5px;color:#F7F4EE;line-height:1.2;text-align:left}
.co5 .th .prog .bar{display:block;height:2px;border-radius:2px;background:var(--acc);width:0;margin-bottom:3px;
  transition:width .35s ease}
.co5 .th.replacing{outline:2px solid var(--acc);outline-offset:-2px}
.co5 .thmenu{position:fixed;z-index:66;background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:5px;min-width:206px;display:none;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.co5 .thmenu.on{display:block}
.co5 .thmenu .mh{padding:6px 9px 7px;color:var(--ink-3);font-size:.8em;border-bottom:1px solid var(--line);margin-bottom:4px}
.co5 .thmenu button{display:flex;width:100%;align-items:center;gap:9px;background:none;border:0;color:var(--ink-2);
  padding:7px 9px;border-radius:7px;cursor:pointer;text-align:left;font-size:.88em}
.co5 .thmenu button:hover{background:var(--elev-2);color:var(--ink)}

/* ---------- grid + cards ---------- */
.co5 .grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(320px,1fr);gap:24px;align-items:start}
@media(max-width:1000px){.co5 .grid{grid-template-columns:1fr}}
.co5 .card{background:var(--elev);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px}
.co5 .card-h{display:flex;align-items:center;gap:10px;padding:13px 16px 0}
.co5 .card.is-collapsed .card-h{padding-bottom:13px}
.co5 .card-h h2{font-size:.92em;font-weight:600;letter-spacing:.01em;margin:0}
.co5 .card-h .hint{color:var(--ink-3);font-size:.84em;font-weight:400}
.co5 .card-b{padding:13px 16px 16px}
.co5 .card-b.tight{padding:6px 16px 10px}
.co5 .card.is-collapsed > .card-b,.co5 .card.is-collapsed > .strip-wrap{display:none !important}
.co5 .ctog{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:2px 3px;border-radius:6px;
  font-size:10px;line-height:1;display:inline-block;width:14px;transition:transform .16s ease}
.co5 .ctog:hover{color:var(--ink)}
.co5 .card.is-collapsed .ctog{transform:rotate(-90deg)}

/* ---------- deliverables ---------- */
.co5 .dv{display:grid;grid-template-columns:132px 1fr auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.co5 .dv:first-child{border-top:0}
.co5 .dv .k{font-size:.9em;color:var(--ink);font-weight:500}
.co5 .dv .k .st{display:block;color:var(--ink-3);font-size:.85em;font-weight:400;margin-top:2px}
.co5 .dv .v{font-size:.9em;color:var(--ink-2)}
.co5 .dv .v .x{display:block;color:var(--ink-3);font-size:.86em;margin-top:3px}
.co5 .dv .a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:620px){.co5 .dv{grid-template-columns:1fr}.co5 .dv .a{justify-content:flex-start}}
.co5 .mini{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:8px;padding:4px 9px;
  font-size:.84em;cursor:pointer;white-space:nowrap}
.co5 .mini:hover{border-color:var(--line-2);color:var(--ink)}
.co5 .mini.acc{color:var(--acc-ink);border-color:var(--acc-line)}
.co5 .mini[disabled]{opacity:.4;cursor:not-allowed}
.co5 .dv .a .ls{flex-basis:100%;text-align:right;color:var(--ink-3);font-size:.8em;margin-top:1px}
@media(max-width:620px){.co5 .dv .a .ls{text-align:left}}
/* the link this row owns - printed under the description, one click to copy */
.co5 .own{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0}
.co5 .own .u{font-family:var(--mono);font-size:.86em;color:var(--ink-3);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co5 .cpy{background:none;border:1px solid transparent;border-radius:6px;color:var(--ink-3);cursor:pointer;
  padding:2px;line-height:0;flex:0 0 auto}
.co5 .cpy:hover{color:var(--acc-ink);border-color:var(--line-2);background:var(--elev-2)}
.co5 .cpy svg{width:12px;height:12px;display:block}
/* inline upload progress - same language as the thumbnail replace bar */
.co5 .upl{display:none;margin-top:9px;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--elev-2)}
.co5 .upl.on{display:block}
.co5 .upl .t{font-size:.86em;color:var(--ink-2)}
.co5 .upl .track{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:7px}
.co5 .upl .fill{display:block;height:100%;width:0;background:var(--acc);border-radius:2px;transition:width .3s ease}
.co5 .upl .n{display:block;color:var(--ink-3);font-size:.82em;margin-top:6px}
.co5 .dv .editrow{margin-top:8px}
.co5 .dv .editrow input{flex:1 1 220px}
.co5 .set .sa .ls{flex-basis:100%;color:var(--ink-3);font-size:.8em;margin-top:1px}
.co5 .sharemenu{position:fixed;z-index:66;background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:5px;min-width:236px;display:none;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.co5 .sharemenu.on{display:block}
.co5 .sharemenu .mh{padding:6px 9px 7px;color:var(--ink-3);font-size:.8em;border-bottom:1px solid var(--line);margin-bottom:4px}
.co5 .sharemenu .sep{height:1px;background:var(--line);margin:4px 0}
.co5 .sharemenu button{display:flex;width:100%;align-items:center;gap:9px;background:none;border:0;color:var(--ink-2);
  padding:7px 9px;border-radius:7px;cursor:pointer;text-align:left;font-size:.88em}
.co5 .sharemenu button:hover{background:var(--elev-2);color:var(--ink)}
.co5 .qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.co5 .qrbox{width:136px;height:136px;background:#f7f4ee;border:1px solid var(--line-2);border-radius:8px;padding:8px;flex:0 0 auto}
.co5 .stat{display:flex;gap:18px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.84em;flex-wrap:wrap}
.co5 .stat b{color:var(--ink);font-weight:500;font-family:var(--mono)}

/* sheets (inline confirm / composer) */
.co5 .sheet{display:none;margin:12px 0 4px;padding:13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--elev-2)}
.co5 .sheet.on{display:block}
.co5 .sheet.warn{border-color:var(--warn-line);background:var(--warn-soft)}
.co5 .sheet.dgr{border-color:var(--danger);background:var(--danger-soft)}
.co5 .sheet h3{margin:0 0 7px;font-size:.9em;font-weight:600}
.co5 .sheet p{margin:0 0 8px;font-size:.86em;color:var(--ink-2);max-width:70ch}
.co5 .sheet ul{margin:6px 0 9px;padding-left:16px;font-size:.86em;color:var(--ink-2)}
.co5 .sheet li{margin:3px 0}
.co5 .sheet .acts{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.co5 .ttc{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.co5 .ttc label{font-size:.84em;color:var(--ink-3)}
.co5 .ttc input{width:190px}
.co5 .mailf{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.86em}
.co5 .mailf .k{color:var(--ink-3);min-width:30px}
.co5 .mailf input{flex:1}

/* ---------- money ---------- */
.co5 .undoline{display:flex;align-items:center;gap:9px;padding:8px 16px;border-bottom:1px solid var(--line);
  color:var(--ink-3);font-size:.84em;min-height:36px}
.co5 .undoline b{color:var(--ink-2);font-weight:500}
.co5 .ml{display:grid;grid-template-columns:minmax(0,1fr) 52px 90px 92px 26px;gap:10px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line)}
.co5 .ml:first-child{border-top:0}
.co5 .ml .amt{text-align:right;font-family:var(--mono);font-size:.92em;padding-top:3px}
.co5 .iv{background:none;border:1px solid transparent;border-radius:7px;padding:3px 6px;margin-left:-6px;cursor:text;
  text-align:left;color:var(--ink);font-size:.92em;max-width:100%}
.co5 .iv:hover{border-color:var(--line-2);background:var(--field)}
.co5 .iv.q,.co5 .iv.u{text-align:right;color:var(--ink-2);font-family:var(--mono);width:100%;margin-left:0}
.co5 .iv.q:hover,.co5 .iv.u:hover{background:var(--field)}
.co5 .ivin{background:var(--field);border:1px solid var(--acc-line);border-radius:7px;padding:3px 6px;width:100%;font-size:.92em}
.co5 .ml .more{background:none;border:0;color:var(--ink-3);cursor:pointer;border-radius:6px;padding:3px 4px;line-height:1}
.co5 .ml .more:hover{color:var(--ink);background:var(--elev-2)}
.co5 .ldisc{margin:4px 0 0 -6px;padding:6px;border-radius:8px;background:var(--elev-2);display:none}
.co5 .ldisc.on{display:block}
.co5 .ldisc .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co5 .ldisc select,.co5 .ldisc input[type=number]{background:var(--field);border:1px solid var(--line);border-radius:7px;
  padding:3px 7px;font-size:.84em;color:var(--ink-2)}
.co5 .ldisc input[type=number]{width:76px}
.co5 .ldisc .w{margin-top:6px}
.co5 .ldisc textarea{width:100%;min-height:38px;resize:vertical;font-size:.84em;line-height:1.4}
.co5 .ldisc .lbl{color:var(--ink-3);font-size:.82em}
.co5 .ldisc .amtd{margin-left:auto;font-family:var(--mono);font-size:.84em;color:var(--warn-ink)}
.co5 .discline{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.84em;color:var(--ink-3)}
.co5 .discline .txt{color:var(--warn-ink);max-width:52ch}
.co5 .rowmenu{position:fixed;z-index:66;background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:5px;min-width:190px;display:none;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.co5 .rowmenu.on{display:block}
.co5 .rowmenu button{display:flex;width:100%;background:none;border:0;color:var(--ink-2);padding:7px 9px;border-radius:7px;
  cursor:pointer;text-align:left;font-size:.88em}
.co5 .rowmenu button:hover{background:var(--elev-2);color:var(--ink)}
.co5 .rowmenu button.dgr{color:var(--danger)}
.co5 .rowmenu button.dgr:hover{background:var(--danger-soft)}
.co5 .pkginc{color:var(--ink-3);font-size:.82em;margin-top:2px;padding-left:6px;max-width:56ch}
.co5 .pkgsug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;padding:9px 11px;
  border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:var(--r-sm);font-size:.86em;color:var(--ink-2)}
.co5 .pkgsug b{color:var(--ink);font-weight:600}
.co5 .pkgsug .sp{flex:1}
.co5 .trash{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--elev-2)}
.co5 .trash-h{display:flex;width:100%;align-items:center;gap:8px;background:none;border:0;padding:9px 11px;cursor:pointer;
  color:var(--ink-2);font-size:.86em;text-align:left;border-radius:var(--r-sm)}
.co5 .trash-h .chevx{color:var(--ink-3);font-size:9px;transition:transform .16s ease}
.co5 .trash-h[aria-expanded="true"] .chevx{transform:rotate(90deg)}
.co5 .trash-b{padding:0 11px 11px}
.co5 .trashline{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.86em}
.co5 .trashline .w{color:var(--ink-3);font-size:.92em}
.co5 .rc{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);z-index:63;background:var(--elev);
  border-left:1px solid var(--line-2);display:none;flex-direction:column}
.co5 .rc.on{display:flex}
.co5 .rc-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.co5 .rc-h h2{margin:0;font-size:.98em;font-weight:600}
.co5 .rc-b{flex:1;overflow:auto;padding:8px 12px}
.co5 .rcline{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:8px;font-size:.86em}
.co5 .rcline:hover{background:var(--elev-2)}
.co5 .rcline .o{font-family:var(--mono);color:var(--ink-3);font-size:.92em}
.co5 .rcline .t{color:var(--ink)}
.co5 .rcline .w{color:var(--ink-3);font-size:.92em;margin-top:2px}
.co5 .rc-f{padding:11px 18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.8em}
.co5 .mrule{height:1px;background:var(--line);margin:10px 0}
.co5 .mtot{display:flex;align-items:center;padding:5px 0;font-size:.92em}
.co5 .mtot .lab{color:var(--ink-2)}
.co5 .mtot .amt{margin-left:auto;font-family:var(--mono)}
.co5 .mtot.big{font-size:1.05em}
.co5 .mtot.big .lab,.co5 .mtot.big .amt{color:var(--ink);font-weight:600}
.co5 .mtot.paidrow .amt{color:var(--acc-ink)}
.co5 .balance{display:flex;align-items:center;gap:12px;margin-top:11px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--elev-2);flex-wrap:wrap}
.co5 .balance .lab{font-size:.92em}
.co5 .balance .amt{margin-left:auto;font-family:var(--mono);font-size:1.05em;font-weight:600}
.co5 .balance .lab:before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block;
  margin-right:9px;background:var(--line-2);vertical-align:middle;position:relative;top:-1px}
/* quiet success: a tint and a dot, never a slab of emerald */
.co5 .balance.paid{background:var(--acc-soft);background:color-mix(in srgb,var(--acc) 11%,var(--elev));
  border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.co5 .balance.paid .lab{color:var(--acc-ink)}
.co5 .balance.paid .lab:before{background:var(--acc)}
.co5 .balance.paid .amt{color:var(--ink)}
.co5 .balance.over{background:var(--elev-2);border-color:var(--line-2)}
.co5 .balance.over .lab{color:var(--ink-2)}
.co5 .balance.over .lab:before{background:var(--butter)}
.co5 .balance.over .amt{color:var(--ink)}
.co5 .overwhat{margin-top:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--elev-2)}
.co5 .overwhat .r1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.co5 .overwhat select{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:.88em;color:var(--ink)}
.co5 .overwhat .exp{margin-top:8px;font-size:.86em;color:var(--ink-2);max-width:64ch}
.co5 .foot{color:var(--ink-3);font-size:.82em;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);max-width:74ch}
.co5 .segmented{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.co5 .segmented button{background:none;border:0;padding:4px 9px;font-size:.8em;color:var(--ink-3);cursor:pointer}
.co5 .segmented button[aria-pressed="true"]{background:var(--elev-2);color:var(--ink)}
.co5 .empty{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:22px;text-align:center;
  color:var(--ink-3);font-size:.92em;background:none}
.co5 .empty .big{color:var(--ink);font-size:1.02em;margin-bottom:4px}
.co5 .addrow{display:flex;gap:8px;margin-top:11px}

/* ---------- rail ---------- */
.co5 .row{display:flex;align-items:center;gap:10px;padding:6px 0}
.co5 .row .k{color:var(--ink-3);min-width:78px;font-size:.86em}
.co5 .row .v{color:var(--ink);font-size:.92em}
.co5 .row .act{margin-left:auto;opacity:0;transition:opacity .12s}
.co5 .card:hover .row .act,.co5 .row:focus-within .act{opacity:1}
.co5 .linkbtn{background:none;border:0;color:var(--ink-3);font-size:.84em;cursor:pointer;padding:2px 4px;border-radius:6px}
.co5 .linkbtn:hover{color:var(--acc-ink)}
.co5 .linkbtn.danger{color:var(--danger)}
.co5 .linkbtn.danger:hover{background:var(--danger-soft)}
.co5 .who{display:flex;align-items:center;gap:11px}
.co5 .av{width:34px;height:34px;border-radius:9px;background:var(--elev-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:.86em;color:var(--ink-2);font-weight:600}
.co5 .who .n{font-size:.95em}
.co5 .who .b{color:var(--ink-3);font-size:.84em}
.co5 .masked{font-family:var(--mono);color:var(--ink-3);letter-spacing:.02em}
.co5 .editrow{display:none;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0}
.co5 .editrow.on{display:flex}
.co5 input[type="text"],.co5 input[type="date"],.co5 input[type="time"],.co5 input[type="number"],.co5 input[type="email"],.co5 textarea,.co5 select{
  background:var(--field);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:.86em;color:var(--ink);width:100%}
.co5 input:hover,.co5 textarea:hover{border-color:var(--line-2)}
.co5 .editrow input{width:auto;flex:1 1 96px;min-width:80px}
.co5 .editrow textarea{flex:1 1 100%}
.co5 input[type="date"],.co5 input[type="time"],.co5 input[type="number"]{color-scheme:dark}
:root[data-theme="light"] .co5 input[type="date"],:root[data-theme="light"] .co5 input[type="time"],:root[data-theme="light"] .co5 input[type="number"]{color-scheme:light}
.co5 .btn{background:var(--acc);color:var(--on-acc);border:0;border-radius:8px;padding:6px 12px;font-size:.88em;
  font-weight:600;cursor:pointer}
.co5 .btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.co5 .btn.ghost:hover{border-color:var(--line-2);color:var(--ink)}
.co5 .btn[disabled]{opacity:.4;cursor:not-allowed}
.co5 .btn.danger{background:var(--danger);color:#1a0505}
.co5 .saved{color:var(--acc-ink);font-size:.8em;opacity:0;transition:opacity .2s}
.co5 .saved.on{opacity:1}
.co5 .notes{color:var(--ink-2);font-size:.88em;line-height:1.55;white-space:pre-wrap}

/* switches - rounded rect, no pills */
.co5 .tg{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.co5 .tg:first-child{border-top:0}
.co5 .tg .nn{flex:1;min-width:0}
.co5 .tg .n{font-size:.92em}
.co5 .tg .src{color:var(--ink-3);font-size:.8em;margin-top:2px}
.co5 .tg .state{color:var(--ink-3);font-size:.82em;min-width:24px;text-align:right;padding-top:2px}
.co5 .tg .state.on{color:var(--acc-ink)}
.co5 .sw{width:34px;height:19px;border-radius:6px;border:1px solid var(--line-2);background:var(--elev-2);
  position:relative;cursor:pointer;padding:0;flex:0 0 auto;margin-top:1px}
.co5 .sw:after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:4px;
  background:var(--ink-3);transition:transform .14s ease,background .14s ease}
.co5 .sw[aria-checked="true"]{background:var(--acc-soft);border-color:var(--acc-line)}
.co5 .sw[aria-checked="true"]:after{transform:translateX(15px);background:var(--acc)}
.co5 .sw[disabled]{cursor:not-allowed;opacity:.55}
.co5 .crow{border-top:1px solid var(--line)}
.co5 .crow:first-of-type{border-top:0}
.co5 .crow-h{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.co5 .crow-t{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;color:inherit}
.co5 .crow-t .chevx{color:var(--ink-3);font-size:9px;transition:transform .16s ease;margin-top:5px;flex:0 0 auto}
.co5 .crow-t[aria-expanded="true"] .chevx{transform:rotate(90deg)}
.co5 .crow-t[aria-disabled="true"]{cursor:default}
.co5 .crow .n{font-size:.92em}
.co5 .crow .src{color:var(--ink-3);font-size:.8em;margin-left:8px;display:inline-block}
@media(max-width:1180px){.co5 .crow .src{display:block;margin-left:0;margin-top:2px}}
.co5 .crow .rulelink{margin-left:8px;font-size:.8em}
.co5 .rulebox{margin-top:6px;padding:9px 11px;border-radius:var(--r-sm);background:var(--elev-2);border:1px solid var(--line);
  font-size:.84em;color:var(--ink-2);line-height:1.6}
.co5 .rulebox b{color:var(--ink);font-weight:600}
.co5 .rulebox .cond{display:inline-block;padding:1px 7px;border-radius:7px;background:var(--warn-soft);border:1px solid var(--warn-line);
  color:var(--warn-ink);font-weight:600}
.co5 .rulebox .act{display:inline-block;padding:1px 7px;border-radius:7px;background:var(--acc-soft);border:1px solid var(--acc-line);
  color:var(--acc-ink);font-weight:600}
.co5 .push{margin-top:11px;border:1px solid var(--line-2);border-radius:14px;background:var(--elev);padding:11px 12px;max-width:340px;
  box-shadow:0 8px 22px rgba(0,0,0,.18)}
.co5 .push .ph{display:flex;gap:7px;align-items:center;font-size:.74em;color:var(--ink-3);letter-spacing:.02em}
.co5 .push .ph .ic{width:14px;height:14px;border-radius:4px;background:var(--acc);display:inline-block}
.co5 .push .pb{font-size:.86em;color:var(--ink);margin-top:6px;line-height:1.45}
.co5 .push .pa{display:flex;gap:7px;margin-top:10px}
.co5 .crow .state{color:var(--ink-3);font-size:.82em;min-width:24px;text-align:right;padding-top:2px}
.co5 .crow .state.on{color:var(--acc-ink)}
.co5 .crow-b{padding:0 0 12px 26px}
.co5 .crow-b .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co5 .crow-b select{width:auto;flex:0 0 auto;font-size:.84em;padding:4px 8px}
.co5 .crow-b .lb{color:var(--ink-3);font-size:.82em}
.co5 .prev{margin-top:8px;padding:9px 11px;border-radius:var(--r-sm);background:var(--elev-2);border:1px solid var(--line);
  font-size:.86em;color:var(--ink-2);line-height:1.75;white-space:pre-wrap}
.co5 .mf{display:inline-block;padding:0 6px;border-radius:6px;background:var(--acc-soft);color:var(--acc-ink);
  border:1px solid var(--acc-line);font-size:.92em;font-weight:600;white-space:nowrap}
.co5 .crow-b textarea{margin-top:8px;min-height:92px;line-height:1.6}
.co5 .locked{display:flex;gap:9px;align-items:flex-start;color:var(--ink-3);font-size:.86em;margin-top:10px;
  border-top:1px solid var(--line);padding-top:11px}
.co5 .log{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.co5 .log .li{color:var(--ink-3);font-size:.82em;padding:3px 0}
.co5 .log .li b{color:var(--ink-2);font-weight:500}
.co5 .sb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:9px}
.co5 .sb select{width:auto;flex:0 0 auto;font-size:.84em;padding:5px 8px}
.co5 .sb input{flex:1 1 130px;min-width:120px}
.co5 .sb .w{color:var(--ink-3);font-size:.82em}
.co5 .rulechip{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-chip);background:var(--elev-2);
  border:1px solid var(--line);font-size:.86em;margin-top:7px}
.co5 .rulechip:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tag-tan);flex:0 0 auto}
.co5 .log .li{position:relative;padding-left:15px}
.co5 .log .li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--tag-brown)}
.co5 .crow .src.changed:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--tag-brown);margin-right:6px;vertical-align:middle;position:relative;top:-1px}
.co5 .rulechip .x{margin-left:auto}

/* delegation */
.co5 .task{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;margin-top:9px;background:var(--elev-2)}
.co5 .task .t1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.co5 .task .t1 .n{font-size:.92em;font-weight:500}
.co5 .task .meta2{color:var(--ink-3);font-size:.84em;margin-top:5px}
.co5 .chans{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:.82em;color:var(--ink-3)}
.co5 .chans .c{display:inline-flex;align-items:center;gap:5px;cursor:pointer;position:relative;
  padding:2px 4px;margin:-2px -4px;border-radius:7px}
.co5 .chans .c:hover{color:var(--ink-2);background:var(--elev-3)}
.co5 .chans .c input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.co5 .chans .c:focus-within{outline:2px solid var(--acc-ink);outline-offset:1px}
.co5 .chans .c.on{color:var(--acc-ink)}
.co5 .chans .c .b{width:13px;height:13px;border-radius:4px;border:1px solid var(--line-2);display:inline-grid;
  place-items:center;font-size:9px;line-height:1}
.co5 .chans .c .b:before{content:""}
.co5 .chans .c.on .b{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-ink)}
.co5 .chans .c.on .b:before{content:"\2713"}
.co5 .tabs{display:flex;gap:4px;margin-bottom:9px}
.co5 .tabs button{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.84em;
  color:var(--ink-3);cursor:pointer}
.co5 .tabs button[aria-selected="true"]{background:var(--elev-2);color:var(--ink);border-color:var(--line-2)}

/* reminders */
.co5 .rem{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:.88em}
.co5 .rem input[type="checkbox"]{margin-top:3px;accent-color:var(--acc);width:13px;height:13px}
.co5 .rem.done .t{color:var(--ink-3);text-decoration:line-through}
.co5 .rem .w{margin-left:auto;color:var(--ink-3);font-size:.8em;font-family:var(--mono);white-space:nowrap}
.co5 .privnote{color:var(--ink-3);font-size:.8em;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.co5 .shares{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.co5 .share{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:none;color:var(--ink-3);font-size:.82em}
.co5 .share:hover{border-color:var(--line-2);color:var(--ink-2)}
.co5 .share:focus-within{outline:2px solid var(--acc-ink);outline-offset:1px}
.co5 .share .lb{display:inline-flex;align-items:center;gap:6px;cursor:pointer;position:relative}
.co5 .share input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.co5 .share .sb{width:12px;height:12px;border-radius:4px;border:1px solid var(--line-2);display:inline-grid;
  place-items:center;font-size:9px;line-height:1}
.co5 .share .sb:before{content:""}
.co5 .share.on{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-ink)}
.co5 .share.on .sb{border-color:var(--acc-line);color:var(--acc-ink)}
.co5 .share.on .sb:before{content:"\2713"}
.co5 .share select{width:auto;padding:1px 4px;font-size:.94em;background:none;border:0;color:inherit;cursor:pointer}

/* danger */
.co5 .danger-card .card-h h2{color:var(--danger)}
.co5 .dbtn{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;color:var(--danger);
  padding:9px 6px;border-radius:8px;cursor:pointer;font-size:.92em;text-align:left}
.co5 .dbtn:hover{background:var(--danger-soft)}
.co5 .dbtn .d{color:var(--ink-3);font-size:.84em;margin-left:auto;text-align:right}

/* palette + scrim */
.co5 .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:60}
.co5 .scrim.on{display:block}
.co5 .pal{position:fixed;z-index:61;top:14vh;left:50%;transform:translateX(-50%);width:min(560px,92vw);
  background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r);display:none;overflow:hidden}
.co5 .pal.on{display:block}
.co5 .pal-in{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.co5 .pal-in input{border:0;background:none;padding:0;font-size:1em}
.co5 .pal-in input:focus{outline:none}
.co5 .pal-list{max-height:52vh;overflow:auto;padding:6px}
.co5 .pal-i{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;padding:9px 10px;
  border-radius:8px;cursor:pointer;text-align:left;font-size:.94em;color:var(--ink-2)}
.co5 .pal-i .g{margin-left:auto;font-size:.82em;color:var(--ink-3)}
.co5 .pal-i[data-sel="1"]{background:var(--elev-2);color:var(--ink)}
.co5 .pal-i .ic{width:16px;color:var(--ink-3);text-align:center}
.co5 .pal-i[data-sel="1"] .ic{color:var(--acc-ink)}
.co5 .pal-none{padding:16px 12px;color:var(--ink-3);font-size:.92em;display:none}
.co5 .pal-f{border-top:1px solid var(--line);padding:9px 14px;color:var(--ink-3);font-size:.8em;display:flex;gap:14px}

/* pin editor overlay */
.co5 .ov{position:fixed;inset:0;z-index:62;background:var(--bg);display:none;flex-direction:column}
.co5 .ov.on{display:flex}
.co5 .ov-h{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.co5 .ov-h h2{margin:0;font-size:1em;font-weight:600}
.co5 .ov-h .s{color:var(--ink-3);font-size:.84em}
.co5 .ov-b{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;min-height:0}
@media(max-width:900px){.co5 .ov-b{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) auto;overflow:auto}}
.co5 .ov-canvas{padding:20px;display:grid;place-items:center;min-height:0;overflow:hidden}
.co5 .aerial{position:relative;width:100%;max-width:820px;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,#2e2e2e 0%,#3a3a3a 42%,#343434 100%);touch-action:none}
:root[data-theme="light"] .co5 .aerial{background:linear-gradient(180deg,#cbc8c1 0%,#c2bfb8 42%,#cac7c0 100%)}
.co5 .aerial .plot{position:absolute;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.co5 .aerial .road{position:absolute;left:0;right:0;top:63%;height:9%;background:rgba(0,0,0,.22)}
.co5 .aerial .house{position:absolute;left:34%;top:36%;width:26%;height:24%;background:rgba(20,20,20,.55);
  border-radius:3px;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.co5 .aerial .drive{position:absolute;left:44%;top:59%;width:7%;height:12%;background:rgba(0,0,0,.28)}
.co5 .pin{position:absolute;transform:translate(-50%,-50%);cursor:grab;touch-action:none;display:flex;align-items:center;gap:7px;
  padding:0;background:none;border:0;z-index:3}
.co5 .pin:active{cursor:grabbing}
.co5 .pin .dot{width:13px;height:13px;border-radius:50%;background:var(--pc);border:2px solid rgba(0,0,0,.4);flex:0 0 auto}
.co5 .pin .lab{background:rgba(0,0,0,.7);color:var(--pc);border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:600;
  white-space:nowrap;border:1px solid rgba(255,255,255,.12)}
.co5 .pin[data-style="dot"] .lab{display:none}
.co5 .pin[data-style="arrow"] .dot{width:0;height:0;border-radius:0;border:7px solid transparent;border-bottom-color:var(--pc);
  transform:translateY(-3px)}
.co5 .pin.sel{outline:2px solid var(--acc);outline-offset:5px;border-radius:6px}
.co5 .ov-side{border-left:1px solid var(--line);padding:16px 18px;overflow:auto}
@media(max-width:900px){.co5 .ov-side{border-left:0;border-top:1px solid var(--line)}}
.co5 .pinrow{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;margin-bottom:9px;background:var(--elev)}
.co5 .pinrow.sel{border-color:var(--acc-line)}
.co5 .pinrow .r{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap}
.co5 .pinrow select{width:auto;flex:1 1 84px;font-size:.82em;padding:4px 7px}
.co5 .ov-f{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}

/* bottom bar */
.co5 .bbar{position:fixed;left:0;right:0;bottom:0;z-index:50;height:44px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;
  padding:0 max(28px,calc((100vw - 1320px)/2 + 28px))}
.co5 .bbar .ctx{color:var(--ink-3);font-size:.82em;min-width:96px}
.co5 .bbar .acts{display:flex;gap:7px;align-items:center}
.co5 .bbar .pal-b{margin-left:auto}

/* toast */
.co5 .toast{position:fixed;left:24px;bottom:58px;z-index:70;background:var(--elev);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 14px;font-size:.88em;color:var(--ink);opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s;pointer-events:none;max-width:min(440px,88vw)}
.co5 .toast.on{opacity:1;transform:none}
.co5 .toast .tick{color:var(--acc-ink);margin-right:7px}

/* ── REAL DATA, NOT 49 GRADIENTS ───────────────────────────────────────────
 * The mockup drew its thumbnails as CSS gradients, so it needed no rule for an
 * <img>. Three additions, and nothing else, so a real photo sits exactly where
 * the gradient sat: under the .th:after scrim and under the two numbers.
 */
.co5 .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:1}
.co5 .th:after{z-index:1}
.co5 .th .no,.co5 .th .mls,.co5 .th .tick{z-index:2}

/* The history bar is not a .card, so it needs its own fold rule. Same values as
 * the card's: the collapsed body is simply not drawn. */
.co5 .hist.is-collapsed .histfull{display:none}

/* ── LINKS WEARING BUTTON CLOTHES ──────────────────────────────────────────
 * The mockup had no anchors at all: every control was a <button> that toasted.
 * Several of them are real navigations here (Open in a new tab, Edit site,
 * Reschedule, the breadcrumb), and an <a> has to land exactly where its
 * <button> twin landed, with no underline the mockup never drew.
 */
.co5 a{text-decoration:none}
.co5 a.mini{display:inline-flex;align-items:center;text-decoration:none}
.co5 a.dbtn,.co5 a.linkbtn{text-decoration:none}
.co5 .crumb a:hover{color:var(--ink-2)}

/* ── SHELL COLLISIONS ──────────────────────────────────────────────────────
 * The only place the cockpit and the mockup have to be reconciled. Three
 * rules, each because the mockup was a standalone page and this is not.
 */

/* 1. The page root. In the mockup this was <body>: it owned the ground, the
 *    face and the base size. Here it is a div inside the shell's outlet, so it
 *    has to paint its own ground down the whole viewport or the cockpit's
 *    lighter ground shows under a short order. */
.co5{min-height:100dvh;display:block}

/* 2. The body-level layer host. Menus, sheets, the palette, the pin editor and
 *    the toast are position:fixed and are appended to <body> so a card with
 *    overflow:hidden cannot clip them. They still have to be INSIDE a .co5 to
 *    get these rules, so they live in one host div that must itself be
 *    invisible and take no space. */
.co5[data-co5-layer]{min-height:0;background:none;display:contents}

/* 3. The fixed bottom bar. The cockpit sidebar is 260px and fixed, so a bar at
 *    left:0 would run underneath it. Inset it, and re-centre its own padding on
 *    the content area rather than on the viewport. Below 900px the sidebar goes
 *    off-canvas and the mockup's own rule is right again. */
@media(min-width:901px){
  .co5 .bbar{left:260px;padding:0 max(28px,calc((100vw - 260px - 1320px)/2 + 28px))}
}

/* ════════════════════════════════════════════════════════════════════════════
 * CS-ORDER-V5 P4 — TWO PAYER GROUPS IN ONE MONEY CARD (Dom 2026-09-04)
 *
 * "Should we have two orders in one? GV with a dark purple background? It
 * should also show to which group invoice it belongs."
 *
 * ONE card, two banded groups. Person wears the GV brand purple #642eba at
 * 11% over the card with a 35% border — the same quiet-tint recipe the Paid
 * balance uses, never a slab of colour. NO RED EVER in a Person context, so
 * nothing here touches --danger. The seller's band is the card's own neutral.
 * ══════════════════════════════════════════════════════════════════════════ */
.co5{ --gv:#642eba; --gv-line:rgba(100,46,186,.35); --gv-ink:#b08cf0 }
:root[data-theme="light"] .co5{ --gv-ink:#5a27a8 }

.co5 .mgrp{border:1px solid var(--line);border-radius:var(--r-sm);margin-top:11px;overflow:hidden}
.co5 .mgrp:first-child{margin-top:0}
.co5 .mgrp.gv{border-color:var(--gv-line)}

.co5 .mgrp-h{display:flex;align-items:center;gap:10px;padding:9px 13px;font-size:.88em;
  background:var(--elev-2);border-bottom:1px solid var(--line)}
.co5 .mgrp-h .who{font-weight:600;color:var(--ink-2)}
.co5 .mgrp-h .sp{flex:1 1 auto}
.co5 .mgrp-h .amt{font-family:var(--mono);color:var(--ink-2)}
.co5 .mgrp.gv .mgrp-h{background:color-mix(in srgb,var(--gv) 11%,var(--elev));
  border-bottom-color:var(--gv-line)}
.co5 .mgrp.gv .mgrp-h .who,.co5 .mgrp.gv .mgrp-h .amt{color:var(--gv-ink)}

/* The rows keep the mockup's own `.ml` grid; the group only insets them. */
.co5 .mgrp [data-lines-gv],.co5 .mgrp [data-lines-seller]{padding:0 13px}
.co5 .mgrp .ml:first-child{border-top:0}
.co5 .mgrp-empty{padding:11px 0;margin:0;font-size:.86em}

.co5 .mgrp-sub{display:flex;align-items:center;padding:5px 13px;font-size:.88em;
  border-top:1px solid var(--line)}
.co5 .mgrp-sub + .mgrp-sub{border-top:0;padding-top:0}
.co5 .mgrp-sub .lab{color:var(--ink-3)}
.co5 .mgrp-sub .amt{margin-left:auto;font-family:var(--mono);color:var(--ink-2)}
.co5 .mgrp-sub.big .lab,.co5 .mgrp-sub.big .amt{color:var(--ink);font-weight:600}
.co5 .mgrp.gv .mgrp-sub{border-top-color:var(--gv-line)}

.co5 .mgrp-meta{padding:8px 13px 10px;font-size:.82em;color:var(--ink-3);
  border-top:1px solid var(--line)}
.co5 .mgrp-meta .note{font-size:.95em}
.co5 .mgrp-meta a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.co5 .mgrp-meta a:hover{color:var(--ink)}
.co5 .mgrp.gv .mgrp-meta{border-top-color:var(--gv-line);
  background:color-mix(in srgb,var(--gv) 6%,transparent)}
.co5 .mgrp.gv .mgrp-meta a{color:var(--gv-ink);border-bottom-color:var(--gv-line)}
.co5 .mgrp.gv .mgrp-meta a:hover{color:var(--gv-ink);border-bottom-color:var(--gv)}

/* ────────────────────────────────────────────────────────────────────────────
 * CS-ORDER-V5 P5 — spec §6.14 wording made visible.
 *
 * The group header now carries the whole sentence Dom wrote:
 *   "Person pays · $150.00 · accrues to the monthly Person invoice (ledger)"
 *   "Seller pays · $x · Paid by e-transfer"
 * so the tail takes the remaining width and wraps rather than the amount being
 * pushed to the right edge. Same 11% GV tint, same neutral seller band.
 * ──────────────────────────────────────────────────────────────────────────── */
.co5 .mgrp-h{flex-wrap:wrap;row-gap:2px}
.co5 .mgrp-h .amt{margin:0}
.co5 .mgrp-h .dot{color:var(--ink-3)}
.co5 .mgrp-h .tail{flex:1 1 12ch;min-width:0;color:var(--ink-3);font-weight:400}
.co5 .mgrp.gv .mgrp-h .tail{color:var(--gv-ink);opacity:.85}
.co5 .mgrp-h .tail a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.co5 .mgrp-h .tail a:hover{border-bottom-color:currentColor}
.co5 .mgrp.gv .mgrp-h .tail a{border-bottom-color:var(--gv-line)}

/* "Paid by · Person" under a line's name. Same dim register as the package
 * "Includes …" sub-line it sits in place of. */
.co5 .ml .paidby{margin-top:2px;font-size:.78em;color:var(--ink-3);letter-spacing:.01em}

/* The suggestion row sits INSIDE a group now, so it is inset with the rows. */
.co5 .mgrp .pkgsug{margin:9px 13px 11px}

/* The seller group's one action. `linkbtn` already exists; armed it borrows the
 * butter the header chip uses, never red — this is a record, not a deletion. */
.co5 .mgrp-meta .linkbtn{margin-left:6px}
.co5 .mgrp-meta .linkbtn.arm{color:#111;background:#FFF083;border-radius:var(--r-sm);
  padding:1px 7px;border-bottom-color:transparent}
.co5 .mgrp-meta .linkbtn[disabled]{opacity:.5;cursor:not-allowed}

/* "Two invoices, one job." sits above the standing footnote, a shade louder. */
.co5 .foot.splitfoot{color:var(--ink-2);margin-bottom:2px}

/* ────────────────────────────────────────────────────────────────────────────
 * CS-ORDER-V5 P7 — the two payer groups fold independently (Dom, 2026-09-05).
 *
 *   "Place the GV purple section below hers. Both collapsible independently,
 *    showing on the collapsed bar the essentials, total etc."
 *
 * The OPEN header keeps its P5 wording and its P5 layout exactly: `.mgrp-hx` is
 * `display:contents`, so the who / dot / amount / tail are still the flex row's
 * own children and every rule above still lands on them. Folded, that group is
 * swapped for the one-line bar and the group's lines, subtotals and meta go
 * away. The page subtotal/HST/total and the buttons row are outside a group and
 * never fold.
 * ──────────────────────────────────────────────────────────────────────────── */
.co5 .mgrp-hx{display:contents}
.co5 .mgrp-h .ctog{flex:0 0 auto}
.co5 .mgrp.gv .mgrp-h .ctog{color:var(--gv-ink);opacity:.7}
.co5 .mgrp.gv .mgrp-h .ctog:hover{opacity:1}
.co5 .mgrp.is-collapsed .ctog{transform:rotate(-90deg)}
.co5 .mgrp.is-collapsed > .mgrp-b{display:none}
.co5 .mgrp.is-collapsed .mgrp-hx{display:none}

/* The collapsed bar: everything the folded group still has to say, on one line,
 * with the line count parked at the right edge. */
.co5 .mgrp-cbar{display:none}
.co5 .mgrp.is-collapsed .mgrp-cbar{display:flex;flex:1 1 0;flex-wrap:wrap;
  align-items:center;gap:0 6px;min-width:0;font-weight:400;color:var(--ink-3)}
.co5 .mgrp-cbar .who{font-weight:600;color:var(--ink-2)}
.co5 .mgrp-cbar .amt{font-family:var(--mono);color:var(--ink-2)}
.co5 .mgrp-cbar .sfx,.co5 .mgrp-cbar .st{min-width:0}
.co5 .mgrp-cbar .cnt{margin-left:auto;padding-left:10px;white-space:nowrap}
.co5 .mgrp.gv .mgrp-cbar{color:var(--gv-ink);opacity:.85}
.co5 .mgrp.gv .mgrp-cbar .who,.co5 .mgrp.gv .mgrp-cbar .amt{color:var(--gv-ink)}

/* ════════════════════════════════════════════════════════════════════════
   CS-ORDER-V5 · lane P8 · gap-audit quick wins (2026-09-05)
   Append-only. Every rule below either corrects a value the spec names or
   dresses markup this lane added; nothing above is edited.
   ════════════════════════════════════════════════════════════════════════ */

/* §2.6 — an automation event's dot is PURPLE AT 60%, so a thing the system did
 * reads quieter than a thing a person did. The rule above painted it solid. */
.co5 .ev.auto:before{background:rgba(139,43,224,.6);border-color:rgba(139,43,224,.6)}

/* §2.6 — "changed by Dom" carries the brown marker, the same 7px dot the
 * client-comms "changed" source line already uses, so one language covers
 * both places a change is attributed. */
.co5 .ev-who.by-dom:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--tag-brown);margin-right:6px;vertical-align:middle;position:relative;top:-1px}

/* §6.4 — the discount select now carries five presets, so it needs the room. */
.co5 .ldisc .dsel{min-width:132px}

/* §4 — the property website row's template name, beside its Published chip. */
.co5 .dv .v .tpl{color:var(--ink-3);font-size:.86em;margin-left:8px}

/* §8.6 — Running late. The row's action sits at the right of the row head, and
 * the answer prints under the rows: the /go link this page was handed, or the
 * server's own reason for refusing. Nothing here is client-facing. */
.co5 .crow-h [data-late-start]{flex:0 0 auto;align-self:center}
.co5 .lateout{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--elev-2);
  font-size:.86em;color:var(--ink-2)}
.co5 .lateout .t{min-width:0}
.co5 .lateout.ok{border-color:var(--acc-line);background:var(--acc-soft)}
.co5 .lateout.ok .t{color:var(--acc-ink)}
.co5 .lateout.ok a{color:var(--acc-ink);text-decoration:underline}
.co5 .lateout.no{color:var(--ink-3)}
