/* "Cards (light and dark)" (Clients → Edit → LOOK), for companies whose brand
   has theme: "cards". Each car is a card: its time large on the left, the plate
   and name beside it, and big Sent / Called / Clear buttons underneath. The
   day's numbers sit as tiles in the navy header, and the sections are in a bar
   at the bottom, where a thumb reaches. Light by day; dark (html.dark) when the
   phone is in dark mode or the person picks it in the menu (app.js setMode).
   Same data, same buttons, same meanings as the standard look. Everything here
   sits under html.cards, so a company on another look never loads a font or a rule. */

@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/barlow-700.woff2) format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/barlow-semi-condensed-600.woff2) format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/barlow-semi-condensed-700.woff2) format("woff2");}

/* ── tokens: light (A) ── */
html.cards{
  --chrome:#0E3F7E;
  --head:var(--chrome);--head-ink:#fff;--head-2:rgb(255 255 255 / .62);--head-tile:rgb(255 255 255 / .09);--head-line:rgb(255 255 255 / .16);
  --bg:#F2F4F7;--card:#fff;--card-line:rgb(16 24 40 / .06);--card-shadow:0 1px 2px rgb(16 24 40 / .06);
  --ink:#111827;--ink-2:#4B5563;--ink-3:#8A93A1;--line:#E4E8EE;--line-soft:#EEF1F5;--field:#fff;--field-line:#D3D9E1;
  --seg:#E4E8EE;--seg-on:#fff;
  --btn:#fff;--btn-line:#D9DEE5;--btn-ink:#374151;
  --plate:#FFD43B;--plate-ink:#111;
  /* pressed: solid */
  --s-bg:#16794A;--s-tx:#fff;--c-bg:#1560BD;--c-tx:#fff;--x-bg:#5B6573;--x-tx:#fff;--r-bg:#B4322A;--r-tx:#fff;--o-bg:#B86100;--o-tx:#fff;--p-bg:#3D5A80;--p-tx:#fff;
  /* tints for chips and rows */
  --ok-bg:#E5F4EB;--ok-tx:#17603A;--call-bg:#E8F0FB;--call-tx:#114A96;--bad-bg:#FCEBE9;--bad-tx:#9A2A20;--amb-bg:#FFF2DC;--amb-tx:#87490A;--note-bg:#FFF6D6;--note-tx:#5C4A00;
  --warn-tile:#F5B83D;--warn-tile-ink:#3B2600;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Semi Condensed","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:10px;
}
/* ── tokens: dark (C) ── */
html.cards.dark{
  --head:#0A111D;--head-ink:#E6EBF2;--head-2:#7D8AA0;--head-tile:#121B2B;--head-line:#1D2A40;
  --bg:#0A111D;--card:#121B2B;--card-line:#1D2A40;--card-shadow:none;
  --ink:#E6EBF2;--ink-2:#A3AFC2;--ink-3:#728098;--line:#1D2A40;--line-soft:#172235;--field:#121B2B;--field-line:#24334D;
  --seg:#121B2B;--seg-on:#22314A;
  --btn:#18243A;--btn-line:#18243A;--btn-ink:#C9D3E1;
  --s-bg:#123D2A;--s-tx:#5BD69A;--c-bg:#132F59;--c-tx:#7DB3FF;--x-bg:#253247;--x-tx:#C9D3E1;--r-bg:#4A1A17;--r-tx:#FF9A8F;--o-bg:#43290C;--o-tx:#FFB867;--p-bg:#1E2C47;--p-tx:#A9C1EA;
  --ok-bg:#123D2A;--ok-tx:#5BD69A;--call-bg:#132F59;--call-tx:#7DB3FF;--bad-bg:#4A1A17;--bad-tx:#FF9A8F;--amb-bg:#3A2A10;--amb-tx:#F5B83D;--note-bg:#33300F;--note-tx:#F2DE7A;
  --warn-tile:#2A2111;--warn-tile-ink:#F5B83D;
}

html.cards,html.cards body{font-family:var(--sans);color:var(--ink);background:var(--bg);}
html.cards body{min-height:100vh;}
html.cards :focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
html.cards .boot{color:var(--ink-2);}

/* ── the mark ── */
html.cards .tobrand,html.cards span.brand{display:inline-flex;align-items:center;gap:9px;background:none;border-radius:0;padding:0;font:600 16px/1 var(--sans);letter-spacing:0;}
html.cards .tobrand::before,html.cards span.brand::before{content:attr(data-mark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--brand-ink);font:700 18px/1 var(--sans);}
html.cards .tobrand{color:var(--head-ink);padding:0;}

/* ── sign-in ── */
html.cards .gate{background:var(--head);}
html.cards .gate-box{max-width:400px;padding:30px 26px 24px;background:var(--card);border:1px solid var(--card-line);border-radius:16px;gap:12px;box-shadow:0 20px 50px rgb(0 0 0 / .2);}
html.cards .gate span.brand{color:var(--ink);font-size:17px;gap:11px;}
html.cards .gate span.brand::before{width:36px;height:36px;font-size:21px;border-radius:9px;}
html.cards .gate h1{margin-top:22px;font:600 25px/1.2 var(--sans);letter-spacing:-.01em;}
html.cards .gate p{font-size:15px;color:var(--ink-2);}
html.cards .gate input,html.cards .field input,html.cards .field select{background:var(--field);color:var(--ink);border:1px solid var(--field-line);border-radius:var(--r);}
html.cards .gate input:focus,html.cards .sheet input:focus,html.cards .sheet textarea:focus,html.cards .sheet select:focus,html.cards .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgb(21 96 189 / .25);}
html.cards #pin{font:500 28px/1 var(--sans);letter-spacing:.5em;padding-left:.5em;}

/* ── buttons ── */
html.cards .btn{border-radius:var(--r);background:var(--chrome);border-color:var(--chrome);color:#fff;font:600 15px/1 var(--sans);letter-spacing:0;}
html.cards.dark .btn{background:#22314A;border-color:#22314A;}
html.cards .btn.brand{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-size:16px;}
html.cards .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--field-line);}
html.cards .btn:active:not(:disabled){filter:brightness(.94);}
html.cards .link{color:var(--ink-2);}

/* ── header: navy, with the day's numbers as tiles ── */
html.cards .top{background:var(--bg);border-bottom:0;}
html.cards .bar{gap:8px;padding:12px 14px 10px;background:var(--head);}
html.cards #sheetPick{flex:1;height:38px;padding:0 10px;color:var(--head-ink);background-color:var(--head-tile);border:1px solid var(--head-line);border-radius:10px;font:600 15.5px/1 var(--sans);}
html.cards #sheetPick option{color:#111827;background:#fff;}
html.cards .who{display:none;}
html.cards .when{color:var(--head-2);font:500 12.5px/1 var(--sans);}
html.cards .rf{width:38px;height:38px;background:var(--head-tile);border:0;border-radius:10px;color:var(--head-ink);}
html.cards .rf svg{width:18px;height:18px;stroke-width:1.9;}
html.cards .rf:active{filter:brightness(1.3);}
html.cards #logBtn,html.cards #rtBtn,html.cards #psBtn,html.cards #flBtn{display:none!important;}
html.cards .pend{font:600 11px/1 var(--sans);padding:6px 9px;border-radius:7px;background:#FFD666;color:#4D3800;}
html.cards .pend.stuck{background:#FFB4AB;color:#5C0F0A;}
html.cards .homebtn{background:var(--head-tile);border:0;border-radius:10px;color:var(--head-ink);font:600 12px/1 var(--sans);padding:12px 10px;}
@media(max-width:430px){html.cards .tobrand{font-size:0;gap:0;}}

html.cards #boardHead{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center;}
html.cards #boardHead > *{grid-column:1/-1;}
html.cards #boardHead > .tabs{grid-column:1;}
html.cards #boardHead > .qwrap{grid-column:2;}
/* The day's numbers as one joined panel of cells on the navy band (Cards look). */
html.cards .tally,html.cards .tally.cats{display:flex;gap:0;margin:0;padding:0 12px;background:var(--head);border:0;border-radius:0;}
html.cards .tally{padding-top:6px;}
html.cards body:not(.picks) .tally{padding-bottom:14px;}
html.cards .tally.cats{padding-bottom:14px;}
html.cards .tally button,html.cards .shortpick{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:10px 11px 11px;background:var(--head-tile);border:0;border-right:1px solid var(--head-line);border-radius:0;text-align:left;}
html.cards .tally button:last-child,html.cards .shortpick:last-child{border-right:0;}
html.cards .tally button:first-child{border-top-left-radius:12px;}
html.cards .tally button:last-child{border-top-right-radius:12px;}
html.cards body:not(.picks) .tally button:first-child{border-bottom-left-radius:12px;}
html.cards body:not(.picks) .tally button:last-child{border-bottom-right-radius:12px;}
html.cards body.picks .tally.cats button,html.cards body.picks .tally.cats .shortpick{border-top:1px solid var(--head-line);}
html.cards .tally.cats button:first-child{border-bottom-left-radius:12px;}
html.cards .tally.cats .shortpick:last-child{border-bottom-right-radius:12px;}
html.cards .tally span,html.cards .shortpick span{order:0;font:600 10px/1.1 var(--cond);letter-spacing:.08em;color:var(--head-2);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
html.cards .tally b{order:1;margin:0;font:700 24px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;}
html.cards .tally button.on{background:#fff;}
html.cards .tally button.on span{color:#4B5563;}
html.cards .tally button.on b{color:#0E3F7E;}
html.cards .tally button.warn:not(.on){background:rgb(245 184 61 / .16);box-shadow:none;}
html.cards .tally button.warn:not(.on) b,html.cards .tally button.warn:not(.on) span{color:#FFCF5A;}
html.cards .tally.cats button.short b{color:#7EE2A8;}
html.cards .tally.cats button.long b{color:#FFC27A;}
html.cards .tally.cats button.on.short b{color:#17603A;}
html.cards .tally.cats button.on.long b{color:#87490A;}
html.cards .shortpick select{margin:0;border:0;background:none;color:#FFCF5A;font:700 16px/1 var(--sans);padding:0;}
html.cards .shortpick.unset{background:rgb(245 184 61 / .16);}
html.cards .shortpick.unset span,html.cards .shortpick b{color:#FFCF5A;}

/* To do / All as a segmented control, the search beside it */
html.cards .tabs{grid-column:1;display:flex;margin:12px 0 4px 12px;padding:3px;background:var(--seg);border:0;border-radius:11px;}
html.cards .tabs button{flex:none;padding:8px 13px;background:none;border:0;border-radius:9px;color:var(--ink-3);font:600 14px/1 var(--sans);letter-spacing:0;white-space:nowrap;}
html.cards .tabs button.on{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .1);}
html.cards .qwrap{grid-column:2;margin:12px 12px 4px 0;}
html.cards #q{height:40px;padding:0 40px 0 36px;border:1px solid var(--line);border-radius:11px;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") no-repeat 11px 50%/16px;font:500 15px var(--sans);color:var(--ink);}
html.cards #q::placeholder{color:var(--ink-3);}
html.cards #q:focus{border-color:var(--brand);background-color:var(--field);}
html.cards .qclear{width:30px;height:30px;right:5px;background:var(--seg);color:var(--ink-2);font-size:17px;}
html.cards .head{display:none;}
html.cards .viewhead{gap:10px;padding:10px 14px;background:var(--bg);border-top:0;}
html.cards .viewhead button{padding:7px 12px;border:1px solid var(--field-line);border-radius:9px;background:var(--card);font:600 13.5px/1 var(--sans);color:var(--ink);}
html.cards .viewhead strong{font:600 15px/1 var(--sans);letter-spacing:0;color:var(--ink);}

/* ── board ── */
html.cards body.on-board main{padding:4px 0 96px;}
html.cards .sec{display:flex;align-items:center;margin:14px 6px 8px;padding:0 12px;background:none;border:0;font:600 12px/1 var(--sans);letter-spacing:.06em;color:var(--ink-3);}
html.cards .sec b{margin-left:auto;font:600 12px/1 var(--sans);color:var(--ink-3);}
html.cards .sec span{margin-left:10px;font:500 12px/1.2 var(--sans);letter-spacing:0;color:var(--ink-3);}
html.cards .sec.hot,html.cards .sec.hot b{color:var(--c-bg);background:none;}
html.cards.dark .sec.hot,html.cards.dark .sec.hot b{color:#6EA8FF;}
html.cards .sec.hot span{color:var(--ink-3);}
html.cards .sec.old,html.cards .sec.old b,html.cards .sec.old span{color:var(--amb-tx);background:none;}

/* a car is a card */
html.cards .row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "acts";gap:0;margin:0 12px 10px;padding:13px 14px 14px;background:var(--card);border:0;border-radius:15px;box-shadow:var(--card-shadow),0 0 0 1px var(--card-line);font-size:15px;color:var(--ink);contain-intrinsic-size:auto 150px;}
html.cards .row.called{box-shadow:0 0 0 1.5px var(--brand);}
html.cards.dark .row.called{box-shadow:0 0 0 1.5px #2F6FD6;}
html.cards .row.warn{box-shadow:0 0 0 1.5px #E0A43A;}
html.cards .row.late,html.cards .row.cmpl{box-shadow:0 0 0 1.5px #C9473B;}
html.cards .row.ovst{box-shadow:0 0 0 1.5px #E0A43A;}
html.cards .row.done,html.cards .row.nosh{opacity:.62;}
html.cards .row.coll,html.cards .row.rtc{opacity:.8;}
html.cards .row.flash{box-shadow:0 0 0 2px #E0A43A;}
html.cards .row.done .reg,html.cards .row.done .l2{text-decoration:none;}

html.cards .rt{display:none;}
html.cards .rt b{display:block;font:600 25px/1 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);}
html.cards .rt b.dly{color:var(--bad-tx);}
html.cards .rt b.exp{color:var(--amb-tx);}
html.cards .rt small{display:block;margin-top:5px;font:500 12.5px/1.2 var(--sans);color:var(--ink-3);white-space:nowrap;}
html.cards .rt i{display:block;margin-top:3px;font:500 11.5px/1.2 var(--sans);font-style:normal;color:var(--ink-3);white-space:nowrap;}
html.cards .rt i.ld{color:var(--ok-tx);font-weight:600;}
html.cards .left{grid-area:left;overflow:visible;}
html.cards .l1{flex-wrap:wrap;align-items:center;gap:7px 8px;}
html.cards .reg{font:700 20px/1 var(--cond);letter-spacing:.06em;padding:6px 8px 5px;}
html.cards .pin{flex:1 1 auto;order:0;margin:0;padding-left:6px;text-align:right;font:500 13.5px/1.3 var(--sans);color:var(--ink-3);}
html.cards .reg{padding:5px 7px 4px;border-radius:6px;background:var(--plate);color:var(--plate-ink);font:700 15.5px/1 var(--cond);letter-spacing:.06em;}
html.cards .row.done .reg{background:var(--seg);color:var(--ink-3);}
html.cards .dn{font:500 12.5px/1 var(--sans);color:var(--ink-3);}
html.cards .pin{flex-basis:100%;order:9;margin:2px 0 0;padding:0;font:500 14px/1.3 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.cards .l2{margin-top:7px;font:500 14px/1.35 var(--sans);color:var(--ink-2);}
html.cards .l2 .mk{color:var(--ink);font-weight:600;}
html.cards .l2 .bk b{color:var(--ink);font-weight:700;}
html.cards .fst{margin-top:6px;font:700 13.5px/1.2 var(--sans);letter-spacing:.01em;}
html.cards .fst.land{color:var(--ok-tx);}
html.cards .fst.due{color:var(--amb-tx);}
html.cards .fst.stop{color:var(--bad-tx);}
html.cards .l2 .mk{color:var(--ink-2);font-weight:500;}
html.cards .l2t{margin-top:7px;gap:5px;}
html.cards .l2 .tag{padding:2px 7px;border-radius:6px;background:var(--call-bg);color:var(--call-tx);font:600 11px/1.5 var(--cond);letter-spacing:.05em;}
html.cards .l2 .tag.ov,html.cards .l2 .tag.ck,html.cards .l2 .tag.nb{background:var(--amb-bg);color:var(--amb-tx);}
html.cards .l2 .tag.cm,html.cards .l2 .tag.cx,html.cards .l2 .tag.due{background:var(--bad-bg);color:var(--bad-tx);}
html.cards .l2 .tag.ld,html.cards .l2 .tag.pd{background:var(--ok-bg);color:var(--ok-tx);}
html.cards .l3{margin-top:8px;padding:4px 8px;border-radius:7px;background:var(--note-bg);color:var(--note-tx);font:500 12.5px/1.4 var(--sans);}
html.cards .l3.bang{background:var(--bad-bg);color:var(--bad-tx);}
html.cards .l3.early{background:var(--call-bg);color:var(--call-tx);}
html.cards .code{padding:3px 7px;border:0;border-radius:6px;font:600 11px/1.2 var(--cond);letter-spacing:.06em;}
html.cards.dark .code{filter:saturate(.8) brightness(.9);}
html.cards select.code.pick{height:23px;padding:0 7px;border-radius:6px;font:600 11px/1 var(--cond);letter-spacing:.06em;}
html.cards select.code.pick.unset{background:var(--amb-bg);border:0;color:var(--amb-tx);}
html.cards .cat{padding:3px 7px;border-radius:6px;font:600 10.5px/1.2 var(--cond);letter-spacing:.06em;}
html.cards .cat.same,html.cards .cat.next{color:var(--call-tx);background:var(--call-bg);}
html.cards .cat.short{color:var(--ok-tx);background:var(--ok-bg);}
html.cards .cat.long,html.cards .cat.was{color:var(--amb-tx);background:var(--amb-bg);}
html.cards .addflight{padding:2px 8px;border:1px dashed var(--amb-tx);border-radius:6px;background:var(--amb-bg);color:var(--amb-tx);font:600 11px/18px var(--cond);letter-spacing:.06em;}
html.cards .row > .addflight{grid-area:acts;}

/* the buttons: full width, real words */
html.cards .acts{grid-area:acts;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px;width:auto;flex:none;margin-top:13px;}
html.cards .acts button{min-height:46px;padding:4px 2px;border:1px solid var(--btn-line);border-radius:11px;background:var(--btn);color:var(--btn-ink);font:600 14px/1.1 var(--sans);letter-spacing:0;}
html.cards .acts button.lng{font-size:13px;letter-spacing:0;}
html.cards .acts button small{display:inline;margin:2px 0 0;font:500 11.5px/1.1 var(--sans);letter-spacing:0;opacity:.9;}
html.cards .acts button em.by{font:500 11.5px/1.1 var(--sans);opacity:.9;}
html.cards .acts button small + em.by::before{content:"·";margin-right:3px;}
html.cards .acts button:active:not(:disabled){filter:brightness(.95);}
html.cards .acts button.on.s,html.cards .acts button.on.k{background:var(--s-bg);border-color:var(--s-bg);color:var(--s-tx);}
html.cards .acts button.on.c{background:var(--c-bg);border-color:var(--c-bg);color:var(--c-tx);}
html.cards .acts button.on.p{background:var(--p-bg);border-color:var(--p-bg);color:var(--p-tx);}
html.cards .acts button.on.x,html.cards .acts button.on.n{background:var(--x-bg);border-color:var(--x-bg);color:var(--x-tx);}
html.cards .acts button.on.r,html.cards .acts button.on.x.cm{background:var(--r-bg);border-color:var(--r-bg);color:var(--r-tx);}
html.cards .acts button.on.c.ov{background:var(--o-bg);border-color:var(--o-bg);color:var(--o-tx);}
/* the word, then "20:38 · Rakesh" on one line under it */
html.cards .acts button{flex-flow:row wrap;align-content:center;justify-content:center;column-gap:3px;}
html.cards .acts button .w{flex-basis:100%;}

/* other-day search hits, messages, the backup reminder */
html.cards .otherhit{margin:0 12px 8px;width:calc(100% - 24px);padding:12px 14px;border:0;border-radius:13px;background:var(--card);box-shadow:0 0 0 1px var(--card-line);color:var(--ink);}
html.cards .otherhit b{font:700 16px/1.1 var(--cond);letter-spacing:.06em;}
html.cards .otherhit span{color:var(--ink-2);}
html.cards .otherhit i{font:500 12px/1.2 var(--sans);letter-spacing:0;color:var(--ink-3);}
html.cards .msg,html.cards .empty{color:var(--ink-2);}
html.cards .nudge{margin:10px 12px;border-left:0;border-radius:12px;background:var(--amb-bg);color:var(--amb-tx);}

/* office computers: cards side by side */
@media(min-width:900px){
  html.cards body.on-board main{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));align-content:start;padding:4px 12px 96px;}
  html.cards body.on-board main > *{grid-column:1/-1;}
  html.cards body.on-board main > .row{grid-column:auto;margin:0 6px 12px;}
}

/* ── the bottom bar ── */
html.cards .bnav:not(.hidden){display:flex;position:fixed;z-index:25;left:0;right:0;bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);}
html.cards .bnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;border:0;background:none;color:var(--ink-3);font:500 11px/1.1 var(--sans);}
html.cards .bnav button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html.cards .bnav button.on{color:var(--brand);font-weight:600;}
html.cards.dark .bnav button.on{color:#6EA8FF;}
html.cards body:not(.on-board) main{padding-bottom:96px;}
html.cards .toast{bottom:calc(84px + env(safe-area-inset-bottom));}

/* ── car panel and menu ── */
html.cards dialog.sheet{border-top:0;border-radius:20px 20px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom));background:var(--card);color:var(--ink);box-shadow:0 -10px 40px rgb(0 0 0 / .2);}
@media(min-width:700px){html.cards dialog.sheet{border-radius:18px;}}
html.cards dialog::backdrop{background:rgb(5 12 24 / .55);}
html.cards .sheet h2{font:600 25px/1.15 var(--sans);letter-spacing:0;}
html.cards .sheet h2 small{font:500 15px/1 var(--sans);color:var(--ink-3);}
html.cards .sheet .sub{margin:5px 0 16px;font:500 13.5px/1.3 var(--sans);color:var(--ink-3);}
html.cards .sheet label{margin:16px 0 6px;font:600 12px/1.2 var(--sans);letter-spacing:.03em;color:var(--ink-3);}
html.cards .sheet input,html.cards .sheet textarea,html.cards .sheet select{background:var(--field);color:var(--ink);border:1px solid var(--field-line);border-radius:var(--r);font-family:var(--sans);}
html.cards .sheet .hint{color:var(--ink-3);}
html.cards .tel{background:var(--brand);border:0;border-radius:13px;color:var(--brand-ink);padding:15px;font:600 16.5px/1.2 var(--sans);}
html.cards .det{border:0;border-radius:14px;background:var(--bg);}
html.cards .det div{padding:11px 14px;border-top:1px solid var(--line);}
html.cards .det b{flex:0 0 84px;padding-top:2px;font:500 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink-3);text-transform:capitalize;}
html.cards .det span{font:500 15px/1.35 var(--sans);color:var(--ink);}
html.cards .det span b{color:var(--ink);}
html.cards .pseg{gap:7px;}
html.cards .pseg button{height:46px;border:1px solid var(--btn-line);border-radius:11px;background:var(--btn);color:var(--btn-ink);font:600 14px/1 var(--sans);letter-spacing:0;}
html.cards .pseg:not(.yard) button.on:not(.nb):not(.cm){background:var(--c-bg);border-color:var(--c-bg);color:var(--c-tx);}
html.cards .pseg button.on.nb{background:var(--o-bg);border-color:var(--o-bg);color:var(--o-tx);}
html.cards .pseg button.on.cm{background:var(--r-bg);border-color:var(--r-bg);color:var(--r-tx);}
html.cards .pbtns button{height:50px;border:1px solid var(--field-line);border-radius:12px;background:var(--btn);color:var(--ink);font:600 15px/1 var(--sans);letter-spacing:0;}
html.cards .pbtns button.save{background:var(--chrome);border-color:var(--chrome);color:#fff;}
html.cards.dark .pbtns button.save{background:#2F6FD6;border-color:#2F6FD6;}
html.cards .pbtns button.undo{background:var(--bad-bg);border-color:var(--bad-bg);color:var(--bad-tx);}
html.cards .pclose{width:36px;height:36px;border:0;background:var(--bg);color:var(--ink-2);font-size:18px;font-weight:500;}
html.cards .hist,html.cards .acc,html.cards .ptset,html.cards .suggest button,html.cards .rmlist button,html.cards .chgpay button,html.cards .ptwhy button,html.cards .noflight{background:var(--card);border-color:var(--line);border-radius:12px;color:var(--ink);}
html.cards .hist div,html.cards .chk{border-color:var(--line);}
html.cards .hist .hw,html.cards .hist .hk,html.cards .chk small,html.cards .rmlist small{color:var(--ink-3);}
html.cards .chk{color:var(--ink)!important;}
html.cards .chgbox{border-radius:12px;background:var(--bad-bg);color:var(--bad-tx);}
html.cards .chgbox.pd{background:var(--ok-bg);color:var(--ok-tx);}
html.cards .suggest button b{font:700 15px/1.1 var(--cond);letter-spacing:.06em;}
html.cards .suggest button span{color:var(--call-tx);}
html.cards .ptsteps span{background:var(--bg);}
html.cards .ptsteps span.ok{background:var(--ok-bg);color:var(--ok-tx);}
html.cards .menu-list{border:0;border-radius:14px;background:var(--bg);}
html.cards .menu-list button{position:relative;padding:15px 34px 15px 16px;background:none;border-top:1px solid var(--line);font:500 16px/1.25 var(--sans);color:var(--ink);}
html.cards .menu-list button::after{content:"";position:absolute;right:17px;top:50%;width:6px;height:6px;margin-top:-3px;border-right:1.5px solid var(--ink-3);border-top:1.5px solid var(--ink-3);transform:rotate(45deg);}
html.cards .menu-list button.danger{color:var(--bad-tx);}
html.cards .menu-list button[aria-current=page]{box-shadow:inset 3px 0 0 var(--brand);font-weight:600;}
html.cards .pseg.mode{margin-bottom:2px;}

/* ── the other screens ── */
html.cards .title{font:600 23px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);}
html.cards .note{color:var(--ink-2);}
html.cards .section-label{margin:22px 0 8px;font:600 12px/1.2 var(--sans);letter-spacing:.03em;color:var(--ink-3);text-transform:none;}
html.cards .box,html.cards .stat,html.cards .client,html.cards .result div,html.cards .table-wrap,html.cards .drop{background:var(--card);border:0;border-radius:14px;box-shadow:0 0 0 1px var(--card-line),var(--card-shadow);color:var(--ink);}
html.cards .rowline{border-color:var(--line);}
html.cards .stat span,html.cards .result span,html.cards .cmeta,html.cards .cnums span{color:var(--ink-3);}
html.cards .stat strong,html.cards .result strong{font-weight:600;font-variant-numeric:tabular-nums;}
html.cards .cnums div{background:var(--bg);}
html.cards .seg{border:0;border-radius:11px;background:var(--seg);padding:3px;}
html.cards .seg button{min-height:40px;border-radius:9px;color:var(--ink-3);font:600 14px/1 var(--sans);}
html.cards .seg button[aria-pressed=true]{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .1);}
html.cards .drop label{background:var(--bg);border-color:var(--field-line);color:var(--ink);}
html.cards .drop.filled{background:var(--ok-bg);}
html.cards table{background:var(--card);color:var(--ink);}
html.cards th{background:var(--bg);font:600 11.5px/1.2 var(--sans);color:var(--ink-3);text-transform:none;}
html.cards th,html.cards td{border-color:var(--line);}
html.cards .sumrow,html.cards .pst,html.cards .pst4{border-color:var(--line);}
html.cards .sumrow span,html.cards .pst i,html.cards .pst4 i{color:var(--ink-3);}
html.cards .pst.head,html.cards .pst.tot,html.cards .pst4.head,html.cards .pst4.tot{background:var(--bg);}
html.cards .toolbar input[type=search],html.cards .inline-selects select,html.cards .pinbox input{background:var(--field);color:var(--ink);border-color:var(--field-line);}
html.cards .alert{background:var(--bad-bg);color:var(--bad-tx);}
html.cards .toast{border-radius:12px;background:#16202E;font:500 15px/1.35 var(--sans);box-shadow:0 10px 30px rgb(0 0 0 / .3);}
html.cards.dark .toast{background:#22314A;}
html.cards .toast.bad{background:#9A2A20;}

/* ── the shift header and the Choose shift sheet (Cards look) ── */
html.cards .shiftbtn:not(.hidden){display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 10px;border:0;border-radius:10px;background:var(--head-tile);color:var(--head-ink);text-align:left;}
html.cards .shiftbtn .st-tag{font:700 10px/1.2 var(--cond);letter-spacing:.1em;color:var(--head-2);text-transform:uppercase;}
html.cards .shiftbtn .st-when{font:700 15px/1.15 var(--sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
html.cards .shiftbtn .st-when::after{content:" \25be";color:var(--head-2);font-size:11px;}
html.cards .shiftbtn .st-sub{font:500 10.5px/1.2 var(--sans);color:var(--head-2);}
html.cards #shiftBody h2{font:700 24px/1.1 var(--cond);letter-spacing:.04em;margin:0 0 14px;}
html.cards #shiftBody label{display:block;margin:14px 0 7px;font:700 11px/1.2 var(--cond);letter-spacing:.1em;color:var(--ink-3);}
html.cards .shiftlist{display:flex;flex-direction:column;gap:8px;}
html.cards .shiftrow{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:13px 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--card);color:var(--ink);text-align:left;}
html.cards .shiftrow.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);background:var(--brand-soft);}
html.cards.dark .shiftrow.on{background:#15233b;}
html.cards .shiftrow .sr-when{font:700 16px/1.2 var(--sans);}
html.cards .shiftrow .sr-tag{font:700 10.5px/1.2 var(--cond);letter-spacing:.09em;color:var(--ink-3);text-transform:uppercase;}

/* ── DROPS / PICKS toggle (Cards look) ── */
html.cards .kindseg:not(.hidden){display:flex;gap:0;margin:0 0 2px;padding:10px 12px 4px;background:var(--head);}
html.cards .kindseg button{flex:1;padding:12px 0;border:0;background:var(--head-tile);color:var(--head-2);font:700 15px/1 var(--cond);letter-spacing:.08em;}
html.cards .kindseg button:first-child{border-radius:10px 0 0 10px;}
html.cards .kindseg button:last-child{border-radius:0 10px 10px 0;}
html.cards .kindseg button[aria-pressed="true"]{background:#fff;color:var(--chrome);}
html.cards.dark .kindseg button[aria-pressed="true"]{background:#22314a;color:#fff;}