/* FleetCollect UI v2 — self-contained design layer for the ui_v2 module.
   Brand: logo magenta #E50B95, navy #1A2332 / ink #1C2A38, Switzer.
   Nothing here touches the classic Tailwind build. */

*{box-sizing:border-box}
html,body{margin:0}
body.v2{background:var(--bg);color:var(--ink);font:14px/1.45 Switzer,Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.v2 a{color:var(--brand-strong)} .v2 a:hover{color:var(--brand-deep)}
.v2 h1,.v2 h2,.v2 h3{margin:0;color:var(--ink)}
.v2 button{font:inherit;cursor:pointer}
.v2 :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.v2 [hidden]{display:none!important}   /* .banner/.card display rules must not unhide hidden blocks */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Page header ---------- */
.v2-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.v2-eyebrow{font-size:13px;color:var(--muted);font-weight:500}
.v2-head h1{margin-top:4px;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.v2-head p{margin:6px 0 0;color:var(--muted)}
.v2-crumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}
.v2-crumbs a{text-decoration:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--field);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.v2 a.btn{color:var(--ink)}
.btn:hover{background:#F8F9FB}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.v2 a.btn-primary{color:#fff}
.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.btn-sm{min-height:36px;padding:0 12px;border-radius:8px;font-size:13px}
.btn-icon{width:40px;padding:0}
.btn-ghost-dark{background:transparent;border-color:#3A4C66;color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Cards / KPIs ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card-pad{padding:18px}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px}
.card-head h2{font-size:16px;font-weight:600}
.card-sub{font-size:13px;color:var(--muted)}
.card-dark{background:var(--nav-bg);color:#E6EBF2;border:0}
.card-dark h2{color:#fff}
.card-dark p{color:#B5C0CF}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px}
.split{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.split > .main{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.split > .rail{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.kpi{display:flex;flex-direction:column;gap:8px}
.kpi-label{font-size:13px;color:var(--muted);font-weight:500}
.kpi-value{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
/* tiles that hold a KPI value scale the number to the tile so amounts never wrap mid-number */
.kpi:has(.kpi-value),.tile:has(.kpi-value){container-type:inline-size}
.kpi:has(.kpi-value) .kpi-value,.tile:has(.kpi-value) .kpi-value{font-size:clamp(16px,12.5cqi,28px)}
.kpi-note{font-size:12px;color:var(--subtle)}
.bar{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brand)}
.bar-lg{height:10px}

/* ---------- Pills / status ---------- */
.tag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--chip);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block;flex:none}
.ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-crit{background:var(--crit-bg);color:var(--crit-fg)}
.ico-warn{background:var(--warn-bg);color:var(--warn-fg)}
.ico-info{background:var(--brand-50);color:var(--brand-deep)}
.ico-ok{background:var(--ok-bg);color:var(--ok-fg)}
.ico-na{background:var(--na-bg);color:var(--na-fg)}
.ico-sm{width:24px;height:24px;border-radius:999px}
.ico-sm svg{width:14px;height:14px;stroke-width:3}

/* ---------- Status: tinted pill (dot + word). Macro: _status.html; JS: V2.status().
   .pill / .pill-* are the older names for the same look. ---------- */
.v2st,.pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:12px;font-weight:600;line-height:1.35;padding:3px 10px;border-radius:999px;white-space:nowrap;vertical-align:middle;background:var(--na-bg);color:var(--na-fg)}
.v2st-dot,.pill::before{flex:none;width:6px;height:6px;border-radius:999px;background:currentColor}
.pill::before{content:""}
.pill.no-dot::before{display:none}
.v2st-i{flex:none;width:13px;height:13px;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v2st-sm{font-size:11px;padding:2px 8px;gap:5px}.v2st-sm .v2st-i{width:11px;height:11px}
.v2st-red,.pill-crit{background:var(--crit-bg);color:var(--v2st-red)}
.v2st-amber,.pill-warn{background:var(--warn-bg);color:var(--v2st-amber)}
.v2st-green,.pill-ok{background:var(--ok-bg);color:var(--v2st-green)}
.v2st-indigo,.pill-brand{background:var(--brand-50);color:var(--v2st-indigo)}
.v2st-gray,.pill-na{background:var(--na-bg);color:var(--v2st-gray)}
.v2st-red .v2st-dot,.pill-crit::before{background:var(--crit-dot)}
.v2st-amber .v2st-dot,.pill-warn::before{background:var(--warn-dot)}
.v2st-green .v2st-dot,.pill-ok::before{background:var(--ok-dot)}
.v2st-indigo .v2st-dot,.pill-brand::before{background:var(--brand)}
.v2st-gray .v2st-dot,.pill-na::before{background:#98A2B3}
.v2st-sub{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--muted)}
/* A cell's second line: one muted line under the main one. */
.sub-line{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--muted)}
.nowrap{white-space:nowrap}

/* ---------- Segmented / tabs ---------- */
.seg{display:inline-flex;gap:4px;background:var(--chip);padding:3px;border-radius:10px;flex-wrap:wrap}
.seg button,.seg a{min-height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center}
.seg .on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a,.tabs button{min-height:44px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.tabs .on{border-bottom-color:var(--brand);color:var(--ink);font-weight:600}

/* ---------- Lists / tables ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows > li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line-soft)}
.rows .grow{flex:1 1 220px;min-width:0}
.rows .t{font-weight:600}
.rows .s{font-size:13px;color:var(--muted)}
.rows .when{font-size:12px;color:var(--muted);font-weight:500}
.table-box{overflow-x:auto;position:relative}   /* relative: abs-positioned bits in cells (sr-only labels) stay inside the scroll box instead of widening the page */
table.t2{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.t2 th{text-align:left;padding:10px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--th-fg);border-top:1px solid var(--line-soft);white-space:nowrap}
table.t2 td{padding:12px;border-top:1px solid var(--line-soft);color:var(--text);vertical-align:middle}
table.t2 th:first-child,table.t2 td:first-child{padding-left:18px}
table.t2 th:last-child,table.t2 td:last-child{padding-right:18px}
table.t2 .num{text-align:right;font-family:var(--mono);font-size:13px}
table.t2 tfoot td{background:#F8F9FB;font-weight:700;border-top:1px solid var(--line)}
table.t2 tr.click{cursor:pointer}
table.t2 tr.click:hover td{background:#FAFBFC}
.who{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.v2 a.who{color:var(--ink)}
.avatar{width:32px;height:32px;border-radius:999px;background:var(--brand-50);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.avatar-lg{width:64px;height:64px;font-size:22px}
/* profile photo inside any round avatar (ui_v2/_avatar.html, V2.avatar); initials stay underneath as the fallback */
.avatar,.ib-av,.v2dock-av{position:relative}
.avatar > img,.ib-av > img,.v2dock-av > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:999px;background:var(--chip,#EEF0F4)}
.has-photo > .av-i{visibility:hidden}
.avatar-sm{width:22px;height:22px;font-size:9px}
.di-rt .who{gap:6px}
.c-crit{color:var(--crit-fg);font-weight:600}
.c-warn{color:var(--warn-fg);font-weight:600}
.c-ok{color:var(--ok-fg)}
.c-muted{color:var(--muted)}

/* ---------- Banners / empty ---------- */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:12px}
.banner-crit{background:var(--crit-bg);border:1px solid var(--crit-line);color:#7A1A12}
.banner-warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:#7A4700}
.banner-brand{background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-ink)}
.banner-indigo{background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-ink)}
.v2 .banner-indigo a{color:var(--brand-strong);font-weight:600}
.banner .grow{flex:1 1 300px}
.empty{padding:32px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- Kanban ---------- */
.board-scroll{overflow-x:auto;padding-bottom:6px}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;min-width:min-content}
.col{background:#EDEFF3;border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:10px;min-height:240px}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px}
.col-head h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.v2 a.lcard{color:var(--ink)}
.lcard:hover{border-color:var(--brand-200)}
.lcard .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.lcard .lane{font-weight:600;line-height:1.3}
.lcard .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line-soft);padding-top:8px;font-size:12px;color:var(--muted)}

/* ---------- Map ---------- */
.map-box{position:relative;min-height:300px;margin:0 18px;border-radius:10px;overflow:hidden;background:#EEF1F5}
.map-box .leaflet-container{position:absolute;inset:0;font:inherit}

/* ---------- Ring ---------- */
.ring{flex:none}
.ring circle{fill:none;stroke-width:3.5}

/* ---------- Toast ---------- */
.v2-toast{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:.2s}
.v2-toast.show{opacity:1;transform:none}
@media (max-width:860px){.v2-toast{bottom:88px}}

.v2 a.btn-ghost-dark,.v2 a.btn-ghost-dark:hover{color:#fff}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
table.t2 th.num{font-family:inherit;font-size:12px}

/* ---------- Dialogs (V2.confirm / V2.prompt / V2.copy) ---------- */
.v2-dlg{border:0;border-radius:16px;padding:0;width:min(440px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(15,23,42,.25);color:var(--ink);background:var(--surface)}
.v2-dlg::backdrop{background:rgba(15,23,42,.45)}
.v2-dlg form{display:flex;flex-direction:column;gap:14px;padding:20px}
.v2-dlg h2{font-size:17px;font-weight:600;margin:0;line-height:1.3}
.v2-dlg-msg{margin:0;font-size:14px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.v2-dlg-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.v2-dlg-field input,.v2-dlg-field textarea{min-height:40px;border:1px solid var(--field);border-radius:10px;padding:8px 10px;font:inherit;font-weight:400;color:var(--ink);background:#fff;width:100%}
.v2-dlg-field textarea{resize:vertical}
.v2-dlg-field input[readonly]{background:var(--chip);font-family:var(--mono);font-size:13px}
.v2-dlg-err{margin:-6px 0 0;font-size:13px;color:var(--crit-fg)}
.v2-dlg-err[hidden]{display:none}
.v2-dlg-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.v2-dlg .btn{cursor:pointer;font:inherit;font-weight:600}
.v2-dlg .btn-danger{background:var(--crit-fg);border-color:var(--crit-fg);color:#fff}
.v2-dlg .btn-danger:hover{filter:brightness(.92)}
.v2-dlg-msg{max-height:min(50vh,420px);overflow:auto}

/* ---------- Summary card (Home, Drivers): big mono value, progress bar, KPI tiles that filter. _summary.html ---------- */
.v2sum{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px 24px;padding:18px}
.v2sum-main{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.v2sum-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.v2sum-v{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.v2sum-l{font-size:14px;font-weight:500;color:var(--muted)}
.v2sum-bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.v2sum-bar > i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.v2sum-d{font-size:13px;color:var(--muted)}
.v2sum-x{display:flex;flex-wrap:wrap;gap:4px 14px}
.v2 .v2sum-x a{font-weight:600;text-decoration:none}
.v2sum-tiles{flex:2 1 420px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.v2sum-t{min-height:88px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-decoration:none}
.v2 a.v2sum-t{color:var(--ink)}
.v2sum-t:hover{background:#FAFBFC;border-color:var(--field)}
.v2sum-t .n{order:2;font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.v2sum-t .l{order:1;font-size:13px;font-weight:500;color:var(--muted)}
.v2sum-red .n{color:var(--crit-fg)}.v2sum-amber .n{color:var(--warn-fg)}.v2sum-green .n{color:var(--ok-fg)}
.v2sum-t.on{background:var(--brand-50);border-color:var(--brand)}
.v2sum-t.on .l{color:var(--brand-ink)}
@media (max-width:560px){.v2sum{padding:16px}.v2sum-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.v2sum-t{min-height:76px;padding:12px 14px}.v2sum-t .n{font-size:22px}}

/* "N uploads need your OK" row (brand tint, whole row is the link) */
.v2ok{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border-radius:12px;background:var(--brand-50);border:1px solid var(--brand-200);text-decoration:none}
.v2 a.v2ok{color:var(--brand-ink)}
.v2ok:hover{background:#FCE3F2}
.v2ok-i{flex:none;width:20px;height:20px;fill:none;stroke:var(--brand-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v2ok-t{flex:1;min-width:0}
.v2ok-t strong{font-weight:700}
.v2ok-a{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--brand-strong);white-space:nowrap}
.v2ok-a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* clickable table rows (ui_v2.js) */
tr[data-row-href],li[data-row-href]{cursor:pointer}
tr[data-row-href]:hover > td,li[data-row-href]:hover{background:var(--surface-2, #F8F9FB)}

/* Clickable rows: the whole row is the link, so links inside it don't need underlines
   (owner rule). Hover/focus still shows the row is interactive. */
tr[data-row-href] a, li[data-row-href] a, tr.tr-row a, tr.click a,
tr[data-row-href] a:hover, li[data-row-href] a:hover, tr.tr-row a:hover, tr.click a:hover{text-decoration:none}
tr[data-row-href] a:focus-visible, li[data-row-href] a:focus-visible, tr.tr-row a:focus-visible, tr.click a:focus-visible{text-decoration:underline}

/* ---------- Phone (≤860px): touch targets, KPI tiles, headers ---------- */
@media (max-width:860px){
  .btn-sm{min-height:40px}
  .v2st-sm,.tag{font-size:12px}
  .v2-main small:not([class]){font-size:max(12px,.8333em)}
  /* standalone text links (banner / card-head / card-foot "… →") get a 40px tap row */
  .banner > a,.card-head > a,.cc-foot a,.v2sum-x a{display:inline-flex;align-items:center;min-height:40px}
  .v2-main :is(select,input,textarea){max-width:100%}
  .seg button,.seg a{min-height:40px}
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid-kpi > .card-pad{padding:14px}
  .v2-head{align-items:flex-start;gap:12px}
  .v2-head h1{font-size:24px}
  .v2-crumbs{flex-wrap:wrap;row-gap:0;column-gap:6px}
  .v2-crumbs a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
  .card-head{padding:14px 16px 10px}
  table.t2 th:first-child,table.t2 td:first-child{padding-left:16px}
  table.t2 th:last-child,table.t2 td:last-child{padding-right:16px}
}

/* ===================== Load errors: "Couldn't load · Try again" =====================
   V2.loadError() / ui_v2/_load_error.html. Amber tint (a fetch failed; nothing is wrong
   with the user's data), never a side stripe. Bridged pages: ui_v2/_load_error_bridge.html
   carries the same rules (keep the two in step). */
.v2-lerr{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:12px;padding:14px 16px;border-radius:12px;background:var(--warn-bg,#FFF7E6);border:1px solid var(--warn-line,#F5D9A8);color:var(--ink,#1C2A38);text-align:left}
.v2-lerr-i{flex:none;width:20px;height:20px;fill:none;stroke:var(--warn-fg,#9A5B00);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v2-lerr-t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4}
.v2-lerr-t b{font-weight:600}
.v2-lerr-t span{font-size:13px;color:var(--muted,#4B5563)}
.v2-lerr-a{display:flex;flex-wrap:wrap;gap:8px}
.v2-lerr-a .btn{background:var(--surface,#fff)}
.v2-lerr-compact{margin:0;padding:10px 12px}
.v2-lerr-compact .v2-lerr-t span{display:none}
@media (max-width:560px){.v2-lerr-a{width:100%}.v2-lerr-a .btn{flex:1 1 auto}}
/* ===================== end Load errors ===================== */

/* ===================== Phone list cards (≤860px) =====================
   ui_v2/_phone_card.html pcard(): the ONE card shape for every list on a phone (owner's phone
   rules 2026-10-27). Line 1 the name (wraps) + the key number right-aligned; line 2 the status
   as dot + word first, then grey details; at most one action, vertically centred on the right,
   the same width on every card of the list (--v2pc-aw, set by ui_v2.js). No arrow: the title
   link/button is stretched over the card (::after) so the whole card opens what the desktop row
   opens; the action sits above it. Status is never a pill here (dot + coloured word). Desktop
   tables are untouched: the list is hidden above 860px and .v2pc-table is hidden at 860px and
   below. Never a coloured edge or side stripe. */
.v2pc{display:none;list-style:none;margin:0;padding:4px 12px 12px;flex-direction:column;gap:8px}
.v2pc-i{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:1px solid var(--line,#E3E6EB);border-radius:12px;background:var(--surface,#fff)}
.v2pc-i[hidden]{display:none}
.v2pc-tap:hover{background:var(--surface-2,#F8F9FB)}
.v2pc-tap:active{background:var(--brand-50,#FFF0F8)}
.v2pc-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.v2pc-l1{display:flex;align-items:baseline;gap:10px;min-width:0}
.v2 .v2pc-a,.v2pc-a{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink,#1C2A38);text-align:left;text-decoration:none;overflow-wrap:anywhere;cursor:pointer}
.v2pc-tap .v2pc-a::after{content:'';position:absolute;inset:0;border-radius:12px}
.v2pc-a:focus-visible{outline:none}
.v2pc-a:focus-visible::after{box-shadow:0 0 0 2px var(--brand,#E0218A)}
.v2pc-num,.v2pc-amt{flex:none;margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink,#1C2A38);white-space:nowrap}
.v2pc-l2{display:block;font-size:13px;line-height:1.4;color:var(--muted,#4B5563);overflow-wrap:anywhere}
.v2pc-st{display:inline-flex;white-space:nowrap;margin-right:10px;vertical-align:baseline}
.v2pc-d{display:inline}
.v2pc .v2st,.v2pc .pill{background:none !important;padding:0 !important;border-radius:0;gap:6px;font-size:13px}
.v2pc .v2st-dot{width:7px;height:7px}
.v2pc .v2st-sub{display:none}
.v2pc-act{position:relative;z-index:1;flex:none;align-self:center;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.v2pc-act .btn{min-height:44px;min-width:var(--v2pc-aw,92px);justify-content:center;white-space:nowrap}
.v2pc-act .v2rm-btn{width:44px;height:44px}
.v2pc-dim .v2pc-a{color:var(--muted,#4B5563)}
@media (max-width:860px){
  .v2pc{display:flex}
  .v2pc-table{display:none !important}
}
/* ===================== end Phone list cards ===================== */

/* ===================== Phone list rules (owner 2026-10-27) =====================
   Filters = one row on a phone: the list's own search box + a "Filters" button; the selects
   live in a bottom sheet (ui_v2.js "Phone list rules": <form data-pf>, [data-pf-open],
   [data-pf-sel]). Above 860px the button is hidden and the selects stay inline. */
.v2pf-btn{display:none}
.v2pf-sel{display:contents}
.v2pf-sel.v2pf-in{display:flex;flex-direction:column;gap:12px}
.v2pf-sel.v2pf-in > *{width:100%;max-width:none;flex:none}
.v2pf-sel.v2pf-in select,.v2pf-sel.v2pf-in input{width:100% !important;max-width:none !important;min-height:44px;font-size:16px}
.v2pf-sel.v2pf-in label{display:flex;flex-direction:column;gap:6px}
dialog.v2pf{inset:auto 0 0 0;width:100vw;height:auto;max-height:85dvh;border-radius:16px 16px 0 0}
@media (max-width:860px){
  [data-pf]{flex-wrap:nowrap !important}
  [data-pf] .v2pf-sel:not(.v2pf-in){display:none !important}
  .v2pf-btn{display:inline-flex;flex:none;align-items:center;min-height:44px;white-space:nowrap}
  dialog.v2pf{inset:auto 0 0 0;height:auto;max-height:85dvh}
}
/* Page header (ui_v2.js "Phone page header"): extra header buttons move into the ⋯ on a phone */
.v2-ph-gen{display:none !important}
@media (max-width:860px){
  .v2-ph-moved{display:none !important}
  .v2rm.v2-ph-gen{display:inline-flex !important}
  .v2rm-menu > .v2-ph-gen{display:flex !important}
  .v2-ph-head .v2rm-btn{width:44px;height:44px;border:1px solid var(--field);border-radius:10px;background:var(--surface)}
}
/* ===================== end Phone list rules ===================== */

/* ---- No-pill status (owner 2026-10-26: "I don't like pills") -------------------------
   Any page or block with class .v2-flat shows the shared status() macro / V2.status() as
   a coloured dot (or icon) + coloured text, no tinted capsule. Same markup, same words. */
.v2-flat .v2st,.v2-flat .pill{background:none!important;padding:0;border-radius:0;gap:6px}
.v2-flat .v2st-sm{padding:0}
.v2-flat .v2st-dot{width:7px;height:7px}

/* Dropdowns (owner 2026-10-26: no native arrow): one small thin chevron on every single-line
   select, same spot and size everywhere. !important beats per-page `background:` shorthands. */
body.v2 select:not([multiple]):not([size]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A93A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:10px 6px!important;padding-right:28px!important}
body.v2 select:not([multiple]):not([size])::-ms-expand{display:none}

/* ===================== Chart system (owner 2026-10-26, mock_charts ChartSystem) =====================
   One renderer: ui_v2/charts.py + _chart.html macros (server) and charts.js window.V2Chart
   (client) emit this markup. Colour = time: magenta now, grey earlier, dashed comparison,
   slate categories. Sizes: tile 52px full width, header 140px with gridlines, row 64x18. */
.v2c{display:flex;width:100%;min-width:0;position:relative}
.v2c-plot{flex:1 1 auto;min-width:0;display:block;overflow:visible}
.v2c-gut{flex:none;width:40px;position:relative}
.v2c-cols.v2c-header .v2c-gut,.v2c-line.v2c-header .v2c-gut{width:34px}
.v2c-gut span{position:absolute;right:2px;font:500 10px/12px var(--mono);color:#5B6675;white-space:nowrap}
.v2c text.v2c-t{font-family:var(--mono);font-size:10px;font-weight:500;fill:#5B6675;stroke:#fff;stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
.v2c text.v2c-tc{font-weight:600;fill:#1C2A38}
.v2c text.v2c-tv{font-size:10.5px;font-weight:600;fill:#C20A7E}
.v2c-base{stroke:#B9C0CB;stroke-width:1}
.v2c-grid{stroke:#EEF0F3;stroke-width:1}
.v2c-ref{stroke:#8A93A0;stroke-width:1;stroke-dasharray:4 3}
.v2c-bar{fill:#CBD1DA}
.v2c-cur{fill:#C20A7E}
.v2c-stk{fill:#E3E6EB}
.v2c-stkcur{fill:#F3B5DC}
.v2c-fut{fill:#E6E9EE}
.v2c-pace{fill:#FDF2F9;stroke:#C20A7E;stroke-width:1;stroke-dasharray:3 2}
.v2c-ghost{fill:none;stroke:#B9C0CB;stroke-width:1;stroke-dasharray:2 2}
.v2c-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.v2c-lghost{fill:none;stroke:#A9B1BD;stroke-width:1.5;stroke-dasharray:4 3}
.v2c-area{opacity:.08}
.v2c-dot{fill:#fff;stroke-width:2}
.v2c-row{display:inline-flex;width:64px;height:18px;vertical-align:middle}
.v2c-stack,.v2c-bars,.v2c-meter{flex-direction:column}
.v2c-sbar{display:flex;gap:1px;height:10px;border-radius:3px;overflow:hidden;background:#EEF0F3}
.v2c-sbar i{display:block;min-width:2px}
.v2c-leg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:11px;color:#5B6675;white-space:nowrap}
.v2c-leg b{color:var(--ink);font-weight:600}
.v2c-sw{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;vertical-align:middle}
.v2c-br{display:flex;align-items:center;gap:8px;height:18px;font-size:12px}
.v2c-bl{flex:none;min-width:26px;color:var(--ink);font-weight:600;white-space:nowrap}
.v2c-bt{flex:1 1 auto;min-width:24px;height:8px;background:#EEF0F3;border-radius:2px;position:relative}
.v2c-bt i{position:absolute;left:0;top:0;bottom:0;background:#7A8699;border-radius:2px}
.v2c-bt i.v2c-bcur{background:#C20A7E}
.v2c-bv{flex:none;min-width:56px;text-align:right;color:#334155;white-space:nowrap}
.v2c-mt{height:8px;border-radius:3px;background:#EEF0F3;position:relative;overflow:visible}
.v2c-mt i{border-radius:3px}
.v2c-mt i{position:absolute;left:0;top:0;bottom:0}
.v2c-mt .v2c-mref{position:absolute;top:-1px;bottom:-1px;width:0;border-left:2px dashed #1C2A38;margin-left:-1px}
.v2c-ml{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--muted)}
/* the tile anatomy: label, value, comparison, then the chart full width at the bottom */
.v2c-slot{margin-top:auto;padding-top:10px;min-width:0}
.v2c-nums{display:flex;font-size:12.5px;border-top:1px solid var(--line-soft);padding-top:8px;margin-top:auto}
.v2c-nums > span{flex:1;min-width:0}
.v2c-nums b{font-family:var(--mono);font-weight:600}
.v2c-nums .mu{color:var(--muted)}
/* ===================== end Chart system ===================== */

/* ===================== Phone fold (phone pass 2, 2026-10-26) =====================
   [data-phfold] sections (ui_v2.js): on a phone, only the header row (.phf-h) shows until the
   stretched toggle opens it; open, the toggle shrinks to the chevron corner. Desktop untouched. */
.phf-tg{display:none}
@media (max-width:860px){
  [data-phfold]{position:relative}
  [data-phfold]:not(.phf-open) > :not(.phf-h):not(.phf-tg){display:none !important}
  [data-phfold]:not(.phf-open){min-height:56px;justify-content:center}
  [data-phfold] > .phf-h{padding-right:40px}
  [data-phfold]:not(.phf-open) > .phf-h{margin-bottom:0;padding-bottom:0}
  .phf-tg{display:block;position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;width:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .phf-tg::after{content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--subtle);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
  [data-phfold].phf-open > .phf-tg{left:auto;bottom:auto;width:52px;height:52px}
  [data-phfold].phf-open > .phf-tg::after{margin-top:-2px;transform:rotate(-135deg)}
  .phf-tg:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
}
/* ===================== end Phone fold ===================== */

/* ===================== Phone tap targets (phone pass 2, 2026-10-26) =====================
   Every control a thumb uses is at least 44px tall on a phone: buttons, segmented switches
   (any *-seg group), tab rows, fields, and the small text-link buttons pages use for Edit /
   Change / Hide / Expand. Inline text links inside sentences are left alone (min-height has no
   effect on inline boxes). Desktop sizes are untouched. */
@media (max-width:860px){
  .v2-main .btn,.v2-main .btn-sm{min-height:44px}
  .v2-main [class*="seg"] > :is(a,button):not(.sr-only),
  .v2-main [role="tablist"] > :is(a,button),.v2-main .tabs > :is(a,button){min-height:44px}
  .v2-main select,
  .v2-main input:is([type=search],[type=text],[type=email],[type=tel],[type=number],[type=date],[type=time],:not([type])):not(.sr-only){min-height:44px}
  .v2-main :is(.td-link,.td-who-btn,.hos-link,.mc-link,.da-link,.ld-back,.eq-add,.mxa-chev,.ua-tog,.va-lb,.hos-sel){min-height:44px}
  .v2-main .iv-gh .x{min-width:44px;min-height:44px}
  /* tab rows wrap onto a second line rather than hide tabs off the right edge */
  .v2-main :is(.tabs,.iv-tabs){flex-wrap:wrap;overflow-x:visible}
}