/* THE NEW LOOK (lane BO-UI, doc 203). Loaded last, and only where NEW_LOOK=on (backoffice.py): off, this file is not on
   the page at all. It adds structure, never a new skin. Every surface keeps the look Max chose (doc 202, 6 October 2026:
   "the fonts, everything, colours is good ... it needs to be like this"): the deep navy with its soft blue glow, glassy
   rounded cards with fine borders, Austin News Deck for titles and big values, Neue Haas Grotesk Text for the rest,
   small uppercase blue labels, pill buttons, and status as a dot and a label, never a capsule. What it adds is the
   structure of an operations console (Plane, Google Admin, Material 3): a menu of named groups that fold and fold to
   icons, a header that says where you are and who you are, a page head with its help folded, sticky table heads, and
   on a phone a menu that slides over the page. Tokens only (app.css); no rule reaches into a screen beyond the shared
   classes. */

/* Austin News Deck with Neue Haas digits. Austin's 1 is a plain stroke with no alternate in the font (its features are
   calt, case, liga, locl, salt, ss01 and swsh; none changes the 1), so "11" read as "ll" and "1. Payout requests" as
   "l. Payout requests" (Max, 6 October 2026). "CMC Figures" takes the digits from Neue Haas and every other character
   from Austin, and stands in for Austin everywhere it is used (--austin), so titles keep Austin's letters and every
   figure reads. Same files the page already loads. The digits' face is declared last on purpose: where two faces of
   one family cover a character, the browser tries the last one declared first (CSS Fonts 4, unicode-range), so
   Austin's own digits are never reached. */
@font-face{font-family:"CMC Figures";src:url(austin.otf);font-weight:400}
@font-face{font-family:"CMC Figures";src:url(haas-regular.otf);font-weight:400;unicode-range:U+0030-0039}
:root{--figures:"CMC Figures","Austin News Deck",Georgia,serif;--austin:var(--figures)}
h1.num,.num,.stat dd,.oncall .tile dd,.lane h2 b,.item b,ol.steps>li::before,.ui2-panel > header h2,
.biz .kpis dd,.biz .funnel .people,.biz .fig b,.ts .tile dd,aside.ts-panel .tile dd,.ts-big{font-variant-numeric:tabular-nums}

.ui2-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui2-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ui2-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.78);cursor:pointer;flex:none;transition:background .2s ease,border-color .2s ease}
.ui2-iconbtn:hover{background:rgba(255,255,255,.06);border-color:rgba(209,221,255,.2);color:#fff}

/* ---- the floating header: menu, brand, which back office, search, live, the person -------------------------------- */
header.top{gap:12px;padding-inline:12px 14px}
header.top .brand{flex:none}
header.top .who{flex:none;margin-left:auto}
header.top .env{order:0;flex:none;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
header.top .env::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
header.top .env[data-env=production]{color:var(--teal)}
header.top #search-open{flex:0 1 440px;justify-content:flex-start;gap:.7rem;min-height:46px;margin:0 auto 0 .5rem;padding:0 .6rem 0 1rem;
  border:1px solid rgba(209,221,255,.22);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(8,14,30,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#99a5ba;font:400 .9rem/1 var(--sans);overflow:hidden}
header.top #search-open:hover{transform:none;border-color:rgba(209,221,255,.34);color:#c3ccdc}
header.top #search-open .ph{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top #keys-open{width:44px;padding:0;justify-content:center}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,rgba(80,115,255,.55),rgba(50,95,255,.25));border:1px solid rgba(182,199,255,.35);color:#fff;
  font:600 .7rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.avatar.lg{width:42px;height:42px;font-size:.82rem}
.avatar.none{background:transparent;border:1px dashed rgba(209,221,255,.35);color:var(--quiet)}
.avatar .ui2-icon{width:15px;height:15px}
.ui2-me{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 1rem 0 .4rem;border:1px solid rgba(209,221,255,.2);border-radius:999px;
  background:rgba(255,255,255,.04);color:#fff;font:600 .78rem/1 var(--sans);cursor:pointer;transition:background .2s ease}
.ui2-me:hover,.ui2-me[aria-expanded=true]{background:rgba(255,255,255,.08)}
.ui2-me .role{color:var(--quiet);font-weight:400}
.ui2-memenu{position:absolute;z-index:40;top:calc(100% + 10px);right:0;width:300px;padding:.6rem;border:1px solid rgba(182,199,255,.3);border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),#121c33;box-shadow:0 34px 84px rgba(2,6,20,.5)}
header.top .who{position:relative}
.ui2-memenu .who-am-i{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .7rem 1rem;border-bottom:1px solid var(--row);margin-bottom:.4rem}
.ui2-memenu .who-am-i b{display:block;font-weight:600;color:#fff;margin-bottom:.2rem}
.ui2-memenu .sub{overflow-wrap:anywhere}
.ui2-memenu .extra:empty{display:none}
.ui2-memenu .extra > *,.ui2-memenu #signout{display:flex;width:100%;justify-content:flex-start;min-height:44px;margin:.15rem 0 0;padding:0 .8rem;border:0;
  border-radius:999px;background:transparent;color:#fff;font:600 .82rem/1 var(--sans);text-decoration:none;align-items:center;transform:none}
.ui2-memenu .extra > *:hover,.ui2-memenu #signout:hover{background:rgba(255,255,255,.06);transform:none}
.ui2-where{display:contents}
#ui2-title{display:none;min-width:0;font:400 1.35rem/1 var(--austin);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the menu: a card of named groups that fold, each screen with its icon and, on a queue, how many wait ------------ */
.layout{grid-template-columns:248px minmax(0,1fr)}
nav.side{padding:.8rem .7rem;max-height:calc(100vh - 128px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,221,255,.2) transparent}
nav.side a{gap:.75rem;min-height:42px;padding:0 .85rem;margin:2px 0;position:relative;white-space:nowrap}
nav.side a .ui2-icon{color:#8e9bb0}
nav.side a:hover .ui2-icon,nav.side a[aria-current=page] .ui2-icon{color:var(--icon)}
nav.side a .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
nav.side a[data-count]::after{content:attr(data-count);margin-left:auto;font:600 .8rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--lead)}
nav.side a[data-nobody]::after{color:var(--warn)}
nav.side .grp{display:none}
.ui2-group + .ui2-group{margin-top:.5rem}
.ui2-ghead{display:flex;align-items:center;gap:.5rem;width:100%;min-height:34px;margin:.4rem 0 .1rem;padding:0 .85rem;border:0;border-radius:999px;background:transparent;
  font:650 .65rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a96ae;text-align:left;cursor:pointer}
.ui2-ghead:hover{color:#c3ccdc;background:rgba(255,255,255,.03)}
.ui2-ghead .ui2-icon{width:15px;height:15px;margin-left:auto;transition:transform .2s var(--ease)}
.ui2-ghead[aria-expanded=false] .ui2-icon{transform:rotate(-90deg)}
.ui2-ghead .ui2-gcount:not(:empty)::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);vertical-align:middle}
.ui2-ghead[aria-expanded=true] .ui2-gcount{display:none}
.ui2-items[hidden]{display:none!important}
.ui2-drawer-head{display:none}

/* the whole menu folded to icons (Material 3's navigation rail); each name comes back as a tip on hover and focus */
html.ui2-rail .layout{grid-template-columns:76px minmax(0,1fr)}
html.ui2-rail nav.side{padding:.8rem .5rem;overflow:visible}
html.ui2-rail nav.side a{justify-content:center;padding:0;width:48px;margin:3px auto}
html.ui2-rail nav.side a .lbl,html.ui2-rail .ui2-ghead span:not(.ui2-gcount){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.ui2-rail .ui2-ghead{justify-content:center;min-height:12px;margin:.5rem auto;padding:0;width:28px;border-top:1px solid var(--line);border-radius:0;pointer-events:none}
html.ui2-rail .ui2-ghead .ui2-icon{display:none}
html.ui2-rail .ui2-items[hidden]{display:block!important}
html.ui2-rail nav.side a[data-count]::after{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;margin:0;border-radius:50%;background:var(--azure)}
html.ui2-rail nav.side a[data-nobody]::after{background:var(--warn)}
html.ui2-rail nav.side a:hover::before,html.ui2-rail nav.side a:focus-visible::before{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%);padding:.55rem .8rem;border:1px solid rgba(182,199,255,.3);border-radius:12px;background:#121c33;color:#fff;
  font:600 .78rem/1 var(--sans);white-space:nowrap;box-shadow:0 18px 40px rgba(2,6,16,.45);z-index:40;pointer-events:none}

/* ---- the top of every page: where it sits, the title, and the help folded under "?" ------------------------------- */
.ui2-crumbs{margin:0 0 .6rem;font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.ui2-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;list-style:none}
.ui2-crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--quiet)}
.ui2-crumbs a{color:var(--eyebrow);text-decoration:none}
.ui2-crumbs a:hover{color:#fff}
#view .ui2-head-eyebrow{display:none}
.ui2-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 .8rem}
.ui2-head h1{margin:0}
h1[tabindex="-1"]:focus{outline:none}
.ui2-head .ui2-iconbtn{color:var(--quiet)}
.ui2-head .ui2-iconbtn[aria-expanded=true]{color:var(--icon);background:rgba(255,255,255,.05);border-color:rgba(209,221,255,.2)}
.ui2-head .ui2-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ui2-intro{max-width:62rem}
.ui2-intro.folded{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---- tables keep their heads in sight; long values wrap rather than run past the card ------------------------------ */
th{position:sticky;top:108px;z-index:2}
table.ui2-stuck th{background:rgba(18,27,49,.92);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.test-band ~ .shell th{top:calc(var(--band,44px) + 108px)}
dl.kv div{min-width:0}
dl.kv dd{min-width:0;overflow-wrap:anywhere}
dl.kv dd .st{white-space:normal;text-align:left}
/* a link to a screen this person may not open reads as plain words (lane BO-PERMISSIONS, static/screens.js) */
#view a.locked,#view a.locked:hover{color:inherit;text-decoration:none;cursor:default}
/* shared pieces for any screen: a switch, a group of switches, an empty state that teaches */
.switch{display:inline-flex;align-items:center;gap:.7rem;font-size:.86rem;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:24px;margin:0;border-radius:999px;background:rgba(209,221,255,.2);position:relative;cursor:pointer;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.switch input:checked{background:var(--azure)}
.switch input:checked::after{transform:translateX(16px)}
fieldset.switches{margin:0 0 1.2rem;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
fieldset.switches > legend{padding:0 0 .6rem;font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
fieldset.switches .switch{min-height:48px;justify-content:space-between;flex-direction:row-reverse;border-bottom:1px solid var(--row)}
/* never a table cell: a cell that says "empty" stays a cell (Verichain's td.empty) */
:is(p,div,li).empty{display:flex;align-items:center;gap:.8rem;margin:0;padding:1.2rem 0;color:var(--muted);font-size:.9rem;line-height:1.45}
:is(p,div,li).empty .ui2-icon{color:var(--icon)}

/* no coloured side stripe or edge bar anywhere (Max, 6 October 2026): a selected row, a chosen search result and an alarm
   card say so by their tint and their words, inside the same fine, even border every card has */
tbody tr.kbd td:first-child,.palette .hit[aria-selected=true]{box-shadow:none}
.alarmcard,.alarmcard.calm{border-left:1px solid var(--line)}

/* ---- narrower windows: up to 1000px the menu slides over the page, as on a phone ----------------------------------- */
@media (max-width:1100px){header.top #search-open .ph{display:none}header.top #search-open{flex:0 0 auto;margin-left:auto}.ui2-me .name,.ui2-me .role{display:none}.ui2-me{padding:0 .4rem}}
@media (max-width:1000px){
  .layout,html.ui2-rail .layout{grid-template-columns:minmax(0,1fr)}
  nav.side,html.ui2-rail nav.side{position:fixed;z-index:50;top:0;left:0;bottom:0;display:block;width:min(320px,86vw);max-height:none;height:100%;overflow-y:auto;
    padding:0 .8rem 1.2rem;border-radius:0 24px 24px 0;transform:translateX(-104%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s;
    background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),#101a30;box-shadow:0 34px 84px rgba(2,6,20,.5)}
  /* opening, the menu is visible at once, so focus can move into it; closing, it stays visible until it has slid away */
  html.ui2-drawer nav.side{transform:none;visibility:visible;transition:transform .25s var(--ease),visibility 0s}
  nav.side a,html.ui2-rail nav.side a{display:flex;justify-content:flex-start;width:auto;padding:0 .85rem;margin:2px 0}
  html.ui2-rail nav.side a .lbl,html.ui2-rail .ui2-ghead span:not(.ui2-gcount){position:static;width:auto;height:auto;overflow:hidden;clip:auto}
  html.ui2-rail .ui2-ghead{justify-content:flex-start;min-height:34px;margin:.4rem 0 .1rem;padding:0 .85rem;width:100%;border-top:0;pointer-events:auto}
  html.ui2-rail .ui2-ghead .ui2-icon{display:block}
  html.ui2-rail nav.side a[data-count]::after{content:attr(data-count);position:static;width:auto;height:auto;margin-left:auto;background:none}
  html.ui2-rail nav.side a:hover::before,html.ui2-rail nav.side a:focus-visible::before{content:none}
  .ui2-drawer-head{display:flex;align-items:center;justify-content:space-between;height:72px;margin:0 -.8rem .6rem;padding:0 .6rem 0 1.4rem;border-bottom:1px solid var(--line)}
  .ui2-drawer-head img{width:96px}
  #ui2-scrim{position:fixed;inset:0;z-index:45;background:rgba(5,9,20,.7)}
  .test-band ~ .shell nav.side{top:0}
}
@media (min-width:1001px){#ui2-scrim{display:none}}
@media (max-width:760px){
  header.top{gap:6px;padding-inline:6px 8px}
  header.top #ui2-menu:not([hidden]) ~ .brand{display:none}   /* the logo gives way to the screen's name once there is a menu; the sign-in card keeps it */
  .ui2-where{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;flex:1;min-width:0}
  #ui2-title{display:block;max-width:100%;font-size:1.15rem}
  header.top .env{font-size:.62rem;letter-spacing:.1em}
  header.top #keys-open{display:none}
  header.top #search-open{min-height:44px;width:44px;padding:0;justify-content:center;border-radius:50%}
  header.top #search-open kbd{display:none}
  .ui2-me{min-height:44px;padding:0 .3rem;border-color:transparent;background:transparent}
  .ui2-memenu{right:-4px;width:min(300px,calc(100vw - 24px))}
  th{position:static}
  /* approvals.css gives every phone table a 6.4rem label column, and refund.css every details list a 7rem term column,
     though each was written for its own screen; elsewhere they left blank gaps (helpers A and C, 6 October 2026) */
  #view:not([data-screen="approvals"]) td::before{flex:initial}
  #view:not([data-screen="refunds"]) dl.kv dt{flex:initial}
  fieldset.switches{grid-template-columns:minmax(0,1fr)}
  .ui2-head .ui2-actions{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){nav.side,.ui2-ghead .ui2-icon{transition:none}}

/* ---- live: the header says how fresh the page is; a list that has changed says so (ui2.js LIVE) -------------------- */
.ui2-live{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .8rem;border:0;border-radius:999px;background:transparent;
  color:var(--quiet);font:400 .76rem/1 var(--sans);cursor:pointer;white-space:nowrap}
.ui2-live:hover{background:rgba(255,255,255,.05);color:#fff}
.ui2-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.ui2-live[data-state=late]::before,.ui2-live[data-state=ended]::before{background:var(--warn)}
.ui2-live[data-state=busy]::before{animation:ui2-pulse 1s ease-in-out infinite}
@keyframes ui2-pulse{50%{opacity:.25}}
.ui2-changed{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:1rem 1.4rem;border-color:rgba(50,95,255,.45);font-size:.9rem;color:var(--lead)}
.ui2-changed .btn{margin-left:auto}
@media (max-width:1100px){header.top .ui2-live .lbl{display:none}.ui2-live{padding:0 .7rem}}
@media (prefers-reduced-motion:reduce){.ui2-live[data-state=busy]::before{animation:none}}

/* ---- home: the numbers that matter now, orders per day, your next tasks, what people did, how fresh the copies are -- */
.ui2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1rem;margin-bottom:1rem}
ul.checklist.ui2-feed a{text-decoration:none}
ul.checklist.ui2-feed a:hover{text-decoration:underline}
.ui2-kpis .card{margin:0;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.ui2-kpis .card:hover{transform:translateY(-2px);border-color:rgba(209,221,255,.3)}
.ui2-kpis .sub{display:flex;align-items:center;gap:.4rem;margin-top:.55rem}
.ui2-kpis .sub .ui2-icon{width:15px;height:15px}
.ui2-kpis .up{color:var(--teal)}
.ui2-kpis .down{color:var(--warn)}
.ui2-home{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1rem;align-items:start}
.ui2-home .card{margin:0}
.ui2-chart{display:block;width:100%;height:auto;margin-top:.4rem}
.ui2-chart .b-paid{fill:var(--azure)}
.ui2-chart .b-other{fill:rgba(160,180,230,.26)}
.ui2-chart .axis{stroke:var(--line);stroke-width:1}
.ui2-chart text{fill:var(--quiet);font:400 9px var(--sans)}
.ui2-chart g:hover rect{opacity:.85}
.ui2-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;margin:.8rem 0 0;font-size:.78rem;color:var(--quiet)}
.ui2-legend .k{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-.7rem}
.ui2-legend .k.paid{background:var(--azure)}
.ui2-legend .k.other{background:rgba(160,180,230,.26)}
.ui2-legend .sum{margin-left:auto;color:var(--lead)}
ul.checklist.ui2-feed li{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
ul.checklist.ui2-feed .avatar,ul.checklist.ui2-feed .qi{grid-row:span 2}
ul.checklist.ui2-feed .qi{display:inline-flex;color:var(--icon)}
ul.checklist.ui2-feed .src{grid-row:span 2}
ul.checklist.ui2-feed .sub{grid-column:2;margin-left:0}
ul.checklist .late{color:var(--warn)}
@media (max-width:760px){
  .ui2-home{grid-template-columns:minmax(0,1fr)}
  .ui2-kpis{grid-template-columns:1fr 1fr;gap:.6rem}
  ul.checklist.ui2-feed .src{grid-column:auto;text-align:right}
}

/* ---- tables: saved views, the columns you choose, a side panel for one row (ui2.js TABLES) --------------------------- */
.ui2-views{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem}
.ui2-views .ui2-icon{width:15px;height:15px}
.ui2-views .ui2-cols{margin-left:auto}
/* on a phone the views are one row that scrolls sideways, as chips do, rather than a stack with Columns alone below */
@media (max-width:760px){.ui2-views{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.ui2-views > *{flex:none}.ui2-views .ui2-cols{margin-left:0}}
.ui2-colpick{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;padding:1rem 1.4rem;margin:-.2rem 0 1rem}
tr.ui2-picked td{background:rgba(50,95,255,.16)!important}
.ui2-panel{position:fixed;z-index:35;top:108px;right:clamp(.75rem,2vw,2rem);bottom:1.2rem;width:min(460px,calc(100vw - 1.5rem));overflow-y:auto;
  border:1px solid rgba(182,199,255,.3);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),#121c33;
  box-shadow:0 34px 84px rgba(2,6,20,.5)}
.test-band ~ .ui2-panel{top:calc(var(--band,44px) + 108px)}
#ui2-dim{position:fixed;inset:0;z-index:34;background:rgba(5,9,20,.6)}
@media (min-width:1680px){html.ui2-peek main#view{margin-right:calc(460px + 1rem)}#ui2-dim{display:none}}
.ui2-panel > header{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:1.2rem 1.4rem 1rem;
  border-bottom:1px solid var(--row);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),#121c33}
.ui2-panel > header h2{margin:0 auto 0 0;font-size:1.9rem}
.ui2-panel .body{padding:1.1rem 1.4rem 2rem}
.ui2-panel .card{padding:1.2rem 0 0;border:0;border-top:1px solid var(--row);border-radius:0;background:transparent;box-shadow:none}
.ui2-panel .card h2{font-size:1.4rem}
@media (max-width:760px){.ui2-panel{top:.5rem;right:.5rem;left:.5rem;bottom:.5rem;width:auto;z-index:55}}
.ui2-views a.btn[aria-current=page]{background:var(--azure);border-color:var(--azure)}

/* ---- the board: a work queue as columns by state, on the refunds board's own lanes and items (ui2.js BOARD) ---------- */
.ui2-seg{display:inline-flex;gap:.4rem}
.ui2-seg .ui2-icon{width:15px;height:15px}
.lanes.ui2-board{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.ui2-board .lane{min-height:12rem;transition:border-color .2s ease,background .2s ease}
.ui2-board .lane.drop{border-color:var(--azure);background:rgba(50,95,255,.12)}
.ui2-board .lane ol{list-style:none;margin:0;padding:0}
.ui2-board .item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .6rem;cursor:default}
.ui2-board .item[draggable=true]{cursor:grab}
.ui2-board .item.dragging{opacity:.45}
.ui2-board .item .who{grid-column:2;grid-row:1 / span 2;align-self:start}
.ui2-board .item .kind{grid-column:1;display:flex;align-items:center;gap:.45rem;font:600 .62rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.ui2-board .item .kind .ui2-icon{width:14px;height:14px}
.ui2-board .item b{grid-column:1}
.ui2-board .item b a{color:#fff;text-decoration:none}
.ui2-board .item b a:hover{text-decoration:underline}
.ui2-board .item .meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.2rem;font-size:.76rem;color:var(--muted)}
.ui2-board .item .meta .late{color:var(--warn)}
.ui2-board .item .acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}
.ui2-board .item .acts select{min-height:36px;padding:0 .8rem;border-radius:999px;border:1px solid rgba(209,221,255,.24);background:rgba(8,14,30,.58);color:#fff;font:600 .74rem var(--sans)}
.ui2-board .empty{padding:1rem .2rem;font-size:.8rem}
.board-note{margin:0 0 1rem;font-size:.84rem;color:var(--muted)}
@media (max-width:1180px){.lanes.ui2-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.lanes.ui2-board{grid-template-columns:minmax(0,1fr)}.ui2-head .ui2-seg{width:100%}.ui2-head .ui2-seg .btn{flex:1}}
.ui2-seg a.btn[aria-current=page]{background:var(--azure);border-color:var(--azure)}

/* ==== MONEY SCREENS (helper A): Payments to do, Payouts and one payout request, Refunds and the guided refund, Products === */
/* The tiles: a list's default margins left each tile half empty, and a tile's own margin put two gaps between rows. */
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) .grid4{margin-bottom:1.4rem}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) .grid4 > .card{margin:0}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) .stat{padding:1.15rem 1.4rem 1.2rem}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) .stat dl{margin:0}

/* A warning (requests stuck at New, a copy that has stopped, a list that could not be read) is a short notice, not a slab. */
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) > .card.warn{padding:1.2rem 1.6rem}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) > .card.warn h2{margin-bottom:.45rem}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) > .card.warn .note{margin:0}

/* An empty list: no column heads over nothing, and its sentence as the shared empty state, with a calm "all clear" mark. */
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) table:has(> tbody > tr:only-child > td[colspan]) > thead{display:none}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) td[colspan].note{padding:1.1rem .2rem;border-bottom:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
#view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) td[colspan].note::before,
#view[data-screen="refunds"] .lane .empty::before{content:"";display:inline-block;flex:none;width:18px;height:18px;margin-right:.7rem;vertical-align:-4px;background:var(--icon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
#view[data-screen="refunds"] .lane .empty{align-items:flex-start;gap:0;margin:.55rem 0 0;padding:.6rem 0 0;font-size:.8rem;line-height:1.45}
#view[data-screen="refunds"] .lane .empty::before{margin-top:1px;vertical-align:0}

/* A row's buttons sit side by side at its end, never stacked out of line. */
#view:is([data-screen="payments"],[data-screen="payouts"]) td .row.mb0{flex-wrap:nowrap;justify-content:flex-end;gap:.5rem}
/* A payout stuck at New says so as a dot and its words; no tinted band across the row (Max: attention is an amber dot). */
#view[data-screen="payouts"] table.payouts tr.stuck td{background:transparent}
#view[data-screen="payouts"] table.payouts tbody tr:hover td{background:rgba(255,255,255,.03)}
#view[data-screen="payouts"] td .tag::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:currentColor;vertical-align:1px}
/* A tick box in the glass: a fine border, azure with a white tick when chosen. */
#view:is([data-screen="payouts"],[data-screen="products"]) :not(.switch) > input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;
  width:20px;height:20px;margin:0;flex:none;border:1.5px solid rgba(209,221,255,.42);border-radius:6px;background:rgba(8,14,30,.55);cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
#view:is([data-screen="payouts"],[data-screen="products"]) :not(.switch) > input[type=checkbox]:hover{border-color:rgba(209,221,255,.75)}
#view:is([data-screen="payouts"],[data-screen="products"]) :not(.switch) > input[type=checkbox]:checked{background:var(--azure);border-color:var(--azure)}
#view:is([data-screen="payouts"],[data-screen="products"]) :not(.switch) > input[type=checkbox]:checked::after{content:"";width:10px;height:5px;margin-top:-3px;
  border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
#view:is([data-screen="payouts"],[data-screen="products"]) :not(.switch) > input[type=checkbox]:disabled{opacity:.5;cursor:default}

/* One item's page: its subtitle is a fact (who asked, when, which product), so it is never folded under "?"; the back link
   the breadcrumb repeats goes; the actions stand clear of the cards; a short card keeps its own height. */
#view[data-detail]:is([data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) .ui2-intro.folded{display:block;-webkit-line-clamp:none;overflow:visible}
#view[data-screen="payouts"][data-detail] > p:has(> a[href="#/payouts"]:only-child){display:none}
#view[data-screen="payouts"][data-detail] > .actions{margin:0 0 1.2rem}
#view[data-screen="payouts"][data-detail] .grid2{align-items:start}
#view[data-screen="payouts"][data-detail] select:empty{display:none}
#view[data-screen="products"][data-detail] h1{font-size:clamp(2.1rem,3.2vw,2.8rem);line-height:1}
/* a challenge id (a UUID, 36 characters) fits its field whole */
#view[data-screen="products"][data-detail] .levrow{grid-template-columns:5rem minmax(0,1fr)}
#view[data-screen="products"][data-detail] .levrow input[type=text]{padding:0 .8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem}
@media (min-width:1001px){#view[data-screen="products"][data-detail] .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Products: a status and a column head keep to one line; a product's name reads as the row's title, the lane as a code. */
#view[data-screen="products"] th,#view[data-screen="products"] td .st{white-space:nowrap}
#view[data-screen="products"] td[data-label="Product"] a{color:#fff;font-weight:600;text-decoration:none}
#view[data-screen="products"] tr[data-c]:hover td[data-label="Product"] a{text-decoration:underline}
#view[data-screen="products"] td[data-label="Lane"]{font-size:.74rem;letter-spacing:.06em;color:var(--lead)}

@media (max-width:760px){
  /* On a phone a row is a card: long words read from the left under their label, and the buttons lead the row's end. */
  #view[data-screen="payments"] td:is([data-label="What"],[data-label="Next step"]){flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left}
  #view[data-screen="payments"] td:is([data-label="What"],[data-label="Next step"])::before{flex:none}   /* approvals.css gives every label a 6.4rem basis */
  #view[data-screen="payments"] td .next{text-align:left}
  #view:is([data-screen="payments"],[data-screen="payouts"]) td:is([data-label="Action"],[data-label="Match-Trader"]){justify-content:flex-start;padding-top:.6rem}
  #view:is([data-screen="payments"],[data-screen="payouts"]) td:is([data-label="Action"],[data-label="Match-Trader"])::before{content:none}
  #view:is([data-screen="payments"],[data-screen="payouts"]) td .row.mb0{justify-content:flex-start}
  #view[data-screen="products"] td:is([data-label="Product"],[data-label="Shop product"]){display:block;text-align:left;padding-bottom:.4rem}
  #view[data-screen="products"] td:is([data-label="Product"],[data-label="Shop product"])::before{content:none}
  #view[data-screen="products"] td .sub{overflow-wrap:anywhere}
  #view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"]) .stat{padding:1rem 1.1rem}
  /* an empty list's sentence hangs beside its mark, with no rule under it */
  #view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) td[colspan].note{display:flex;align-items:flex-start;justify-content:flex-start;gap:0}
  #view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) td[colspan].note::before{flex:none;margin-top:1px}
  #view:is([data-screen="payments"],[data-screen="payouts"],[data-screen="refunds"],[data-screen="products"]) tbody > tr:only-child:has(> td[colspan]){padding:0;border-bottom:0}
}
/* ==== END MONEY SCREENS ==== */

/* ==== CUSTOMERS SCREENS (helper B): Customers and one customer, Orders and one order, Order 360 ======================== */
/* A long list's card keeps an ordinary card's glow. app.css sizes the glow by the card, so a card as tall as the Orders
   list washed blue from top to bottom. Same colours and layers, a fixed reach. Never a warning card's tint, and never
   the frame's own cards (the change banner, the column picker). */
#view[data-screen="orders"] > .card:not(.warn,.ui2-changed,.ui2-colpick),#view[data-screen="customers"] > .card:not(.warn,.ui2-changed,.ui2-colpick){
  background:radial-gradient(circle 36rem at 100% 0,rgba(50,95,255,.14),transparent),linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),rgba(10,17,34,.62)}
/* The search fields say what they are with the header's own magnifier (Lucide "search"), and Find stands as tall as
   the field beside it. */
#view[data-screen="customers"] .search::before,#view[data-screen="orders"] .search::before{content:"";flex:none;width:18px;height:18px;margin-right:.75rem;background:var(--quiet);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat}
/* A status that wraps keeps its dot on its first line, as an alarm card's does, not between its two lines. */
#view[data-screen="orders"] dl.kv dd .st,#view[data-screen="customers"] dl.kv dd .st{align-items:flex-start}
#view[data-screen="orders"] dl.kv dd .st::before,#view[data-screen="customers"] dl.kv dd .st::before{margin-top:.42em}
/* Tiles in a row are spaced by their grid alone: a card's own margin doubled the gap between two rows on a phone. */
#view[data-screen="orders"] .grid4 > .card,#view[data-screen="customers"] .grid4 > .card{margin-bottom:0}
#view[data-screen="customers"]:not([data-detail]) form#f,#view[data-screen="customers"]:not([data-detail]) #res > .card{max-width:46rem}
#view[data-screen="customers"]:not([data-detail]) form#f .btn.primary{min-height:52px;padding:0 1.6rem}
/* Find stays beside its field on a phone, as the header's search does: the field gives way, not the button. */
#view[data-screen="customers"]:not([data-detail]) form#f{flex-wrap:nowrap}
#view[data-screen="customers"]:not([data-detail]) form#f .search,#view[data-screen="customers"]:not([data-detail]) form#f .search input{min-width:0}
#view[data-screen="customers"]:not([data-detail]) form#f .search input{text-overflow:ellipsis}
/* "No customer matches." is one line, so its card is a line's height, not an empty box around it. */
#view[data-screen="customers"]:not([data-detail]) #res > .card:has(> p.note:only-child){padding:1.1rem 1.5rem}
#view[data-screen="customers"]:not([data-detail]) #res > .card > p.note:only-child{margin:0}
/* A search that found nothing reads as the shared empty state does: a quiet icon (Lucide "search-x") and the sentence.
   The sentence is the screen's own; only its look changes. */
#view[data-screen="orders"]:not([data-detail]) td[colspan].note::before,
#view[data-screen="customers"]:not([data-detail]) #res > .card > p.note:only-child::before{content:"";position:static;display:inline-block;width:18px;height:18px;
  margin:0 .8rem 0 0;vertical-align:-4px;overflow:visible;clip:auto;white-space:normal;background:var(--icon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.5 8.5-5 5'/%3E%3Cpath d='m8.5 8.5 5 5'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.5 8.5-5 5'/%3E%3Cpath d='m8.5 8.5 5 5'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
#view[data-screen="orders"]:not([data-detail]) td[colspan].note{padding-block:1.3rem;color:var(--muted)}

/* One customer: the menu group and the screen share a name, so the trail says it once, as a way back to the search. A
   customer is named by a fingerprint, so the title takes the frame's figures: in Austin, f1ba941c read as flba94lc. */
#view[data-screen="customers"][data-detail] .ui2-crumbs li:first-child{display:none}
#view[data-screen="customers"][data-detail] .ui2-crumbs li + li::before{content:none}
#view[data-screen="customers"][data-detail] .ui2-head h1{font-family:var(--figures,var(--austin))}

/* Order 360: the chat tile holds a link, not a figure. At a figure's size it broke over three lines and stretched the
   whole row of tiles, so it reads as a link at body size. The live shop card, the width of the page, sets its facts
   in two columns, so a label and its value are never a screen apart. */
#view[data-screen="orders"][data-detail] .grid4 .stat dd:has(> a){margin-top:.55rem;font-size:.92rem;line-height:1.35}
#view[data-screen="orders"][data-detail] .grid4 .stat dd > a{font-family:var(--sans);font-weight:600;color:#fff;text-decoration-thickness:1px;text-underline-offset:.2em}
@media (min-width:1101px){
  #view[data-screen="orders"][data-detail] > .card > dl.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}
  #view[data-screen="orders"][data-detail] > .card > dl.kv > div:nth-child(2){border-top:0}
}

/* Orders: the lane is a code (RETAIL, VERICHAIN, PARTNER_SPONSORED), so it reads as a small quiet label and leaves the
   room to the product. On a wide screen a row is one line, as a console's list is: a status and a time never break in
   two. Narrower, they may, so the table never runs past its card: a list of logins breaks at its comma (one login
   still never breaks), and beside the menu, below 1200px, the cells sit closer (at 1001px the table ran 94px past
   its card). */
@media (min-width:761px){
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Lane"],#view[data-screen="customers"][data-detail] td[data-label="Lane"]{font-size:.72rem;letter-spacing:.08em;color:var(--lead)}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Login"] .mono.login{white-space:normal}
}
@media (min-width:1001px) and (max-width:1199px){
  #view[data-screen="orders"]:not([data-detail]) th,#view[data-screen="orders"]:not([data-detail]) td{padding-inline:.45rem}
}
@media (min-width:1300px){
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Status"] .st,#view[data-screen="orders"]:not([data-detail]) td[data-label="Created"]{white-space:nowrap}
}

@media (max-width:760px){
  /* refund.css pins every label on a phone to 7rem (dl.kv dt, unscoped), so "Read from Match-Trader" broke at its
     hyphen beside "1 min ago". Here a label keeps its own width, up to half the row, and the value takes the rest. */
  #view[data-screen="orders"] dl.kv dt,#view[data-screen="customers"] dl.kv dt{flex:0 0 auto;max-width:48%}
  #view[data-screen="orders"] dl.kv dd,#view[data-screen="customers"] dl.kv dd{flex:1 1 0}
  /* Find keeps app.css's own width on a phone, so the field beside it still shows its whole placeholder. */
  #view[data-screen="customers"]:not([data-detail]) form#f .btn.primary{padding:0 .9rem}
  /* Order 360 and one customer on a phone: the buttons sit in two even columns, in their own order; an odd one out
     takes the row. */
  #view[data-screen="orders"][data-detail] .toolbar,#view[data-screen="customers"][data-detail] .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #view[data-screen="orders"][data-detail] .toolbar .btn,#view[data-screen="customers"][data-detail] .toolbar .btn{width:100%;padding:0 .7rem;white-space:normal;text-align:center;line-height:1.2}
  #view[data-screen="orders"][data-detail] .toolbar > :last-child:nth-child(odd),#view[data-screen="orders"][data-detail] .toolbar > .note,
  #view[data-screen="customers"][data-detail] .toolbar > :last-child:nth-child(odd){grid-column:1 / -1}
  /* Orders on a phone: each order is one compact item, as a mail list is, not seven labelled lines: the order and its
     total, its status and when, then the product, then the login and the lane. The column names stay for a screen
     reader, out of sight. */
  #view[data-screen="orders"]:not([data-detail]) tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:baseline;padding:.95rem 0}
  #view[data-screen="orders"]:not([data-detail]) tbody tr:last-child{border-bottom:0}
  #view[data-screen="orders"]:not([data-detail]) tbody td{position:relative;display:block;padding:0;text-align:left}
  #view[data-screen="orders"]:not([data-detail]) tbody td::before{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Order"]{grid-area:1 / 1}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Total"]{grid-area:1 / 2;text-align:right}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Status"]{grid-area:2 / 1}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Created"]{grid-area:2 / 2;text-align:right;color:var(--quiet);font-size:.78rem}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Product"]{grid-column:1 / -1;color:var(--muted);font-size:.84rem}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Login"]{grid-column:1}
  #view[data-screen="orders"]:not([data-detail]) td[data-label="Lane"]{grid-column:2;text-align:right;color:var(--quiet);font-size:.72rem;letter-spacing:.08em}
  #view[data-screen="orders"]:not([data-detail]) td[colspan]{grid-column:1 / -1}
}
/* ==== END CUSTOMERS SCREENS ==== */

/* ==== PARTNERS, RISK, TRUST AND DESK SCREENS (helper C): Today, Needs a person, My work, Alarms, On call, Business,
   Verichain, Affiliates, Trader scores, Trade checks, Identity checks, Approvals, Access review, Audit log ==== */
/* An empty list reads as one sentence, not as column heads over nothing: while a table's only row is its empty
   sentence, the heads step aside and the sentence keeps the quiet colour of a note. */
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"],[data-screen="scores"])
  table:has(> tbody > tr:only-child > td[colspan]) thead{display:none}
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
  tbody > tr:only-child > td[colspan]{padding:.9rem 0;border-bottom:0;font-size:.88rem;color:var(--muted)}
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
  tbody > tr:only-child:has(> td[colspan]){border-bottom:0}
/* Where an empty list means nothing waits (a queue, the failed payments, the refunds), its sentence carries the same calm
   "all clear" mark the money screens use; an empty list that may mean a fault (no live order at all) does not. */
#view:is([data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="approvals"]) td[colspan].note::before,
#view[data-screen="today"] > .card:not(:last-child) td[colspan].note::before,
#view:is([data-screen="trades"],[data-screen="identity"]) .card > p.note + p.note:last-child::before,
#view[data-screen="needs"] > .card > p.note:only-child::before{content:"";display:inline-block;flex:none;
  width:18px;height:18px;margin-right:.7rem;vertical-align:-4px;background:var(--icon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
/* The number tiles and the short warnings as the money screens draw them: one gap between rows, a tile no taller than
   its number, a warning a notice rather than a slab. */
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"]) .grid4{margin-bottom:1.4rem}
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"]) .grid4 > .card{margin:0}
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"]) .stat{padding:1.15rem 1.4rem 1.2rem}
#view:is([data-screen="today"],[data-screen="needs"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"]) .stat dl{margin:0}
#view:is([data-screen="today"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="people"]) > .card.warn{padding:1.2rem 1.6rem}
#view:is([data-screen="today"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="people"]) > .card.warn h2{margin-bottom:.45rem}
/* Needs a person with nothing open: its one sentence is a short notice, not a tall empty card. */
#view[data-screen="needs"] > .card:has(> p.note:only-child){padding:1.2rem 1.6rem}
#view[data-screen="needs"] > .card > p.note:only-child{margin:0}
/* Two cards side by side keep their own height, so a short card is never drawn as a tall empty box. */
#view:is([data-screen="affiliates"],[data-screen="today"]) .grid2{align-items:start}

/* Verichain: ui2's shared .empty (an icon and a sentence, drawn as a flex row) also matched the domain table's blank
   cells (td.empty), pulled them out of the table and staggered every rule line in it. A blank cell is a cell again;
   a phone still hides it (verichain.css). */
#view[data-screen="verichain"] .vc-dom td.empty{display:table-cell;margin:0;padding:.62rem .6rem;font-size:inherit}

/* Trader scores: the policy line is a dot and its words, never a bordered capsule. A trader opens over the list without
   drawing the list again, so the frame adds its breadcrumb a second time; only the newest one shows. */
#view[data-screen="scores"] .ts-policy{padding:0;border:0;background:none}

/* On call: phone first, but a desktop has room for the four tiles' names on one line. */
#view[data-screen="oncall"] .oncall{max-width:64rem}

/* ---- a phone ---------------------------------------------------------------------------------------------------- */
@media (max-width:760px){
  /* A cell whose value is in two parts (a status and its date, a dot and the action) keeps them together on the
     right, and a note under a value takes its own line, rather than squeezing the status until it breaks mid-word. */
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    td:not([colspan])::before{margin-right:auto;padding-right:.55rem}
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    td:not([colspan]){column-gap:.45rem}
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    td:not([colspan]):has(> .sub){flex-wrap:wrap;gap:.2rem .45rem}
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    td:not([colspan]) > .sub{flex-basis:100%;text-align:right}
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    tbody > tr:only-child:has(> td[colspan]){padding:0}
  /* a label over no value says nothing on a phone (a closed item's empty Note, an audit row with no change, no
     decision to make): the row leaves it out */
  #view:is([data-screen="today"],[data-screen="needs"],[data-screen="work"],[data-screen="alarms"],[data-screen="affiliates"],[data-screen="trades"],[data-screen="identity"],[data-screen="approvals"],[data-screen="people"],[data-screen="audit"])
    td:not([colspan]):empty{display:none}
  #view[data-screen="audit"] td[data-label="Change"]:has(> .diff:only-child:empty){display:none}
  #view[data-screen="verichain"] .vc-dom td.empty{display:none}
  /* refund.css gives every dl.kv label a 7rem basis on a phone; Verichain stacks its label over its value there, so the
     basis became a 7rem empty band under each label in Where each number comes from */
  #view[data-screen="verichain"] dl.kv dt{flex:none}
  /* a count in a kept table never breaks between its digits (15 read as 1 over 5 in Where candidates come from) */
  #view:is([data-screen="verichain"],[data-screen="business"]) table.keep td.n{overflow-wrap:normal}
  /* six tabs as two even rows, every one in sight, instead of a strip that hides Hedging and Method off the edge */
  #view[data-screen="scores"] .ts-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;border-radius:22px}
  #view[data-screen="scores"] .ts-tabs button{padding:0 .4rem}
  #view[data-screen="affiliates"] .toolbar > .btn{flex:1 1 100%}
  /* On call's one-line intro is read whole on the phone it is made for; no fold, so no lone "?" under the title */
  #view[data-screen="oncall"] .ui2-intro.folded{display:block;-webkit-line-clamp:unset;overflow:visible}
  #view[data-screen="oncall"] .ui2-head > .ui2-iconbtn{display:none}
  #view[data-screen="oncall"] .oncall .tile{padding:1rem 1.1rem}
}
/* ==== END PARTNERS, RISK, TRUST AND DESK SCREENS ==== */