/* County Control dashboard, re-skinned into the pcdev network world (2026-10-07).
   Loaded last, after app.css, pcd-fonts.css and pcd-v2.css. Skin only: no layout logic or
   markup changes, every class here is one app.js already renders.

   Ground: #0b0b0c, ink #ededef, hairline rules. Schibsted Grotesk for words, IBM Plex Mono for
   numbers and ids. Buttons are 2px plates, panels are ruled boxes with no shadow, the solid
   white button is the primary action. Colour stays only where it means something: ok, warning,
   danger, and a department's own colour.

   The CAD mounts into the same page (body.cad-open) and brings its own workstation sheet, so
   every rule that could reach a CAD element is scoped to body:not(.cad-open). The toasts and
   the confirm dialog are shared by both and are styled for both. */

:root{
  --bg:#0b0b0c; --bg-2:#0f0f11; --bg-3:#141417; --surface:#0f0f11; --surface-2:#141417; --surface-3:#1a1a1e;
  --ink:#ededef; --ink-2:#a1a1a8; --ink-3:#8b8b94; --muted:#a1a1a8; --muted-2:#8b8b94;
  --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.055); --rule-3:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.22);
  --radius:2px; --radius-sm:2px; --radius-input:2px; --radius-btn:2px; --r-sm:2px; --r-md:2px; --r-lg:2px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* a critically damped spring (no overshoot, ~0.35s response) for anything that appears or moves */
  --spring:cubic-bezier(.2,.9,.25,1); --t-move:.34s; --t-press:100ms;
  --shadow:none;
}
/* Type is in rem so the reader's own text size scales the dashboard. The CAD is a dense
   workstation laid out in px for live dispatch, so while it is open the root stays at 16px
   and it renders exactly as it always has. */
html:has(body.cad-open){font-size:16px}
body{font-optical-sizing:auto}
@media (prefers-color-scheme: light){
  /* the estate is dark everywhere; the old light theme made the dashboard the odd one out */
  :root{color-scheme:dark}
}
html{background:var(--bg);caret-color:var(--ink);accent-color:var(--ink);scrollbar-color:#2c2c31 var(--bg)}
body{background:var(--bg);color:var(--ink)}
body::before{display:none!important}
::selection{background:var(--ink);color:var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2c31;border:3px solid var(--bg);border-radius:10px}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;border-radius:0}

/* ---------------------------------------------------------------- type */
body:not(.cad-open) :is(.h1,.page-head h1,.home-hello h1,.center .hero h1){font-weight:700;letter-spacing:-.035em;line-height:1.02}
body:not(.cad-open) .page-head h1{font-size:clamp(1.875rem,3.4vw,2.5rem)}
body:not(.cad-open) .home-hello h1{font-size:clamp(2rem,4vw,3rem)}
body:not(.cad-open) .page-head{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
body:not(.cad-open) .page-head p{color:var(--ink-2);font-size:0.9375rem;line-height:1.55;margin-top:8px}
body:not(.cad-open) :is(.hint,.help,.sub,.muted,.det,.fine){color:var(--ink-2)}
body:not(.cad-open) :is(.hstat b,.count,.rank,.tbl .num,.progress-line span,.srow-setup span){font-family:var(--pcd-mono)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
body:not(.cad-open) :is(.tile .k,.hstat span,.tbl th,.sgroup-head h2,.combo-group){font-family:var(--pcd-sans)!important;text-transform:none;letter-spacing:0;font-size:0.78125rem;font-weight:500;color:var(--ink-3)}

/* ---------------------------------------------------------------- sign-in and boot */
body:not(.cad-open) .center .hero{text-align:left;max-width:460px;padding:32px;border:1px solid var(--rule);background:var(--bg);animation:none}
body:not(.cad-open) .center .hero .logo{width:44px;height:44px;margin:0 0 22px}
body:not(.cad-open) .center .hero h1{font-size:clamp(2rem,5vw,2.75rem);margin-bottom:12px}
body:not(.cad-open) .center .hero p{color:var(--ink-2)}
body:not(.cad-open) .center .hero .btn{width:100%;height:48px;font-size:0.9375rem}
body:not(.cad-open) .center .hero .fine{font-size:0.84375rem;color:var(--ink-3);margin-top:16px}
.spinner{border-color:var(--rule);border-top-color:var(--ink)}
.pcd-skel .sk,.pcd-skel .sk-row .sk,.pcd-skel .sk.card{border-radius:2px}

/* ---------------------------------------------------------------- buttons */
body:not(.cad-open) .btn{border-radius:2px;min-height:38px;padding:0 16px;font:500 0.875rem/1 var(--pcd-sans);background:transparent;border:1px solid var(--rule);color:var(--ink);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)}
body:not(.cad-open) .btn:hover{background:transparent;border-color:rgba(255,255,255,.32)}
body:not(.cad-open) .btn.primary{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important}
body:not(.cad-open) .btn.primary:hover{background:#fff!important;border-color:#fff!important}
body:not(.cad-open) .btn.ghost,body:not(.cad-open) .btn.sm{background:transparent;border-color:var(--rule)}
body:not(.cad-open) .btn.ghost:hover,body:not(.cad-open) .btn.sm:hover{border-color:rgba(255,255,255,.32);background:transparent}
body:not(.cad-open) .btn.sm{min-height:32px;padding:0 12px;font-size:0.8125rem}
body:not(.cad-open) .btn.danger{color:var(--bad);border-color:var(--bad-line,rgba(255,107,107,.35));background:transparent}
body:not(.cad-open) .btn.danger:hover{background:var(--bad-bg)}
body:not(.cad-open) .btn:active{transform:scale(.97)}
body:not(.cad-open) .btn[disabled]{opacity:.4}
body:not(.cad-open) :is(.link,.linkbtn){color:var(--ink-2);text-decoration-color:var(--line-strong)}
body:not(.cad-open) :is(.link,.linkbtn):hover{color:var(--ink)}

/* ---------------------------------------------------------------- shell: sidebar, server switch, nav */
body:not(.cad-open) .side{background:var(--bg);border-right:1px solid var(--rule);padding:16px 12px;gap:0}
body:not(.cad-open) .switch{border-radius:2px;border:1px solid var(--rule);background:transparent;margin-bottom:16px;padding:8px}
body:not(.cad-open) .switch:hover{background:transparent;border-color:rgba(255,255,255,.32)}
body:not(.cad-open) .switch .s{color:var(--ink-3)}
body:not(.cad-open) .side .nav{border-radius:0;border-left:1px solid transparent;padding:9px 12px;color:var(--ink-2);font-weight:500;background:none;box-shadow:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
body:not(.cad-open) .side .nav:hover{color:var(--ink);background:rgba(255,255,255,.025)}
body:not(.cad-open) .side .nav[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.04);border-left-color:var(--ink);box-shadow:none;font-weight:600}
body:not(.cad-open) .nav .dot{background:var(--warn);border-radius:50%}
body:not(.cad-open) .nav-beta{background:transparent;color:var(--ink-3);border:1px solid var(--rule);font:500 0.625rem/1 var(--pcd-mono);letter-spacing:.06em;border-radius:2px}
body:not(.cad-open) .side .sep{background:var(--rule)}
body:not(.cad-open) .main{padding-top:34px}
body:not(.cad-open) .topline{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:8px}
body:not(.cad-open) .brand .logo{width:28px;height:28px}

/* ---------------------------------------------------------------- panels: ruled boxes, no shadow */
body:not(.cad-open) :is(.card:not(.sk),.tile,.hstat,.gcard,.scard,.ttype,.add-row,.dept-row){border-radius:2px;box-shadow:none;background:transparent;border:1px solid var(--rule)}
body:not(.cad-open) .card{padding:22px}
body:not(.cad-open) .card + .card{margin-top:16px}
body:not(.cad-open) .card > h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.015em}
body:not(.cad-open) .card > h2 > svg,body:not(.cad-open) .ctitle-ico{color:var(--ink-3);stroke:var(--ink-3)}
body:not(.cad-open) :is(.card,.tile,.gcard){animation:none}
/* figures share hairlines: a 1px gap over the rule colour, so a wrapped row stays a clean grid */
body:not(.cad-open) .tiles{gap:1px;background:var(--rule);border:1px solid var(--rule)}
body:not(.cad-open) .tiles .tile{border:0;background:var(--bg)}
/* tile values are words as often as numbers (Online, Live), so they stay in the sans with tabular figures */
body:not(.cad-open) .tile .v{font-size:1.625rem;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
body:not(.cad-open) .banner{border-radius:2px;border:1px solid var(--rule);background:transparent}
body:not(.cad-open) .banner.warn{border-color:var(--warn-line,rgba(245,183,64,.35));background:var(--warn-bg)}
body:not(.cad-open) .banner.bad{border-color:var(--bad-line,rgba(255,107,107,.35));background:var(--bad-bg)}
body:not(.cad-open) .empty{border-radius:2px;border:1px dashed var(--line-strong);color:var(--ink-2)}

/* home: the server list as rows on one rule */
body:not(.cad-open) .home-hero{padding-bottom:26px;border-bottom:1px solid var(--rule)}
body:not(.cad-open) .home-stats{gap:1px;background:var(--rule);border:1px solid var(--rule)}
body:not(.cad-open) .home-stats .hstat{border:0;background:var(--bg);min-width:120px}
body:not(.cad-open) .hstat b{font-size:1.375rem;font-weight:500}
body:not(.cad-open) .hstat.warn b{color:var(--warn)}
body:not(.cad-open) .sgroup-head h2{font-size:0.8125rem}
body:not(.cad-open) .srows{gap:0;border-top:1px solid var(--rule)}
body:not(.cad-open) .sgroup .srow{border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;padding:14px 4px}
body:not(.cad-open) .sgroup .srow:hover{background:rgba(255,255,255,.022)}
body:not(.cad-open) .srow img,body:not(.cad-open) .srow .fallback{border-radius:2px}
body:not(.cad-open) .srow-main b{font-size:0.9375rem}
body:not(.cad-open) .srow-main small{color:var(--ink-3);font-size:0.78125rem}
body:not(.cad-open) .srow-live{color:var(--ok)}
body:not(.cad-open) .srow-live i{background:var(--ok)}
body:not(.cad-open) .srow-bar{border-radius:0;height:3px;background:var(--rule)}
body:not(.cad-open) .srow-bar i{border-radius:0;background:var(--ink)}
body:not(.cad-open) .srow-go{color:var(--ink-2);border:1px solid var(--rule);padding:7px 11px;border-radius:2px}
body:not(.cad-open) .srow:hover .srow-go{color:var(--ink);border-color:rgba(255,255,255,.32)}
body:not(.cad-open) .add-row{background:transparent}
body:not(.cad-open) .av{border-radius:2px}
body:not(.cad-open) .av.round,body:not(.cad-open) .av.sm.round{border-radius:50%}

/* ---------------------------------------------------------------- forms */
body:not(.cad-open) .field{border-top-color:var(--rule)}
body:not(.cad-open) .field .lab{font-weight:600;color:var(--ink)}
body:not(.cad-open) .field.changed .lab::after{border-radius:2px;background:transparent;border:1px solid var(--warn-line,rgba(245,183,64,.35))}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in,.combo.multi){border-radius:2px;background:var(--bg-2);border:1px solid var(--rule);color:var(--ink)}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in):hover,body:not(.cad-open) .combo.multi:hover{border-color:var(--line-strong)}
body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in):focus,body:not(.cad-open) .combo.multi:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
body:not(.cad-open) .combo.multi .combo-in{border:0;box-shadow:none;background:none}
body:not(.cad-open) .combo-x{border-radius:2px;background:transparent}
body:not(.cad-open) .combo-list{border-radius:2px;border:1px solid var(--line-strong);background:var(--bg-2);box-shadow:0 18px 40px -20px rgba(0,0,0,.9);padding:4px}
body:not(.cad-open) .combo-opt{border-radius:0}
body:not(.cad-open) .combo-opt.active{background:rgba(255,255,255,.06)}
body:not(.cad-open) .tag-pill{border-radius:2px;background:transparent;border:1px solid var(--rule)}
body:not(.cad-open) .tag-x{border-radius:2px}
body:not(.cad-open) .toggle{border-radius:999px;background:var(--line-strong);border:0}
body:not(.cad-open) .toggle::after{background:var(--ink-2)}
body:not(.cad-open) .toggle[aria-checked="true"]{background:var(--ink)}
body:not(.cad-open) .toggle[aria-checked="true"]::after{background:var(--bg)}
body:not(.cad-open) .seg{border-radius:2px;background:transparent;border:1px solid var(--rule);padding:2px;gap:2px}
body:not(.cad-open) .seg button{border-radius:1px;color:var(--ink-2)}
body:not(.cad-open) .seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
body:not(.cad-open) .chip{border-radius:2px;font-family:var(--pcd-mono)!important}
body:not(.cad-open) .preview{border-radius:2px;border:1px solid var(--rule);border-left-width:1px;background:var(--bg-2)}
body:not(.cad-open) .check .box{border-radius:2px}
body:not(.cad-open) .check.done .box{background:var(--ink);border-color:var(--ink);color:var(--bg)}
body:not(.cad-open) .bar{border-radius:0;height:4px;background:var(--rule)}
body:not(.cad-open) .bar > i{border-radius:0;background:var(--ink)}
body:not(.cad-open) .bar.ok > i{background:var(--ok)}
body:not(.cad-open) .dept-row.on{border-color:var(--ink)}
body:not(.cad-open) .dpill{border-radius:2px}

/* ---------------------------------------------------------------- tables and lists */
body:not(.cad-open) .tbl th{border-bottom:1px solid var(--rule)}
body:not(.cad-open) .tbl td{border-bottom:1px solid var(--rule-2)}
body:not(.cad-open) .tbl tbody tr:hover td{background:rgba(255,255,255,.02)}
body:not(.cad-open) .rowline{border-top-color:var(--rule)}
body:not(.cad-open) :is(.pill,.tag){border-radius:2px}
body:not(.cad-open) .pill::before{border-radius:0;width:5px;height:5px}

/* ---------------------------------------------------------------- save bar, toasts, dialog */
body:not(.cad-open) .savebar{border-radius:2px;background:var(--bg-2);border:1px solid var(--line-strong);box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
body:not(.cad-open) .savebar .btn.ghost{border-color:var(--rule)}
.toast{border-radius:2px;background:var(--bg-2);border:1px solid var(--line-strong);box-shadow:0 18px 40px -20px rgba(0,0,0,.9);font-family:var(--pcd-sans)}
.toast.ok,.toast.bad{border-left-width:1px}
.toast.ok{border-color:var(--ok-line,rgba(62,207,142,.35))}
.toast.bad{border-color:var(--bad-line,rgba(255,107,107,.35))}
.ccdlg{border-radius:2px;background:var(--bg);border:1px solid var(--line-strong);box-shadow:0 24px 60px -24px rgba(0,0,0,.95);font-family:var(--pcd-sans)}
.ccdlg::backdrop{background:rgba(0,0,0,.66);backdrop-filter:none}
.ccdlg h2{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}
.ccdlg p{color:var(--ink-2)}
.ccdlg .ft{border-top:1px solid var(--rule);margin-top:20px;padding:14px 20px}
.ccdlg .btn{border-radius:2px}
.btn.ccbad{background:var(--bad);border-color:var(--bad);color:#160404}
.btn.ccbad:hover{background:#ff8a8a;border-color:#ff8a8a}

/* the "coming soon" CAD card on the dashboard */
body:not(.cad-open) .soon-badge{border-radius:2px;background:transparent;border:1px solid var(--rule);color:var(--ink-2);font-family:var(--pcd-mono)}

@media (max-width:860px){
  /* the sidebar becomes a scrolling row of tabs: the current one is underlined, not edged */
  body:not(.cad-open) .side .nav{border-left:0;border-bottom:1px solid transparent}
  body:not(.cad-open) .side .nav[aria-current="page"]{border-bottom-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  body:not(.cad-open) .btn:active{transform:none}
}

/* ================================================================ feel (2026-10-08)
   Presses answer on the press; things that open come from what opened them and leave the way
   they came; every motion is a transition, so it reverses from wherever it is. */

/* ---------------------------------------------------------------- response */
a,button,summary,input,select,textarea,[role="option"],[role="switch"],.combo-opt{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* pcd-v2 gives every <button> its scale on press; links that act as buttons and rows get a fill */
body:not(.cad-open) .side .nav{-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(.cad-open) .side .nav:active{background:rgba(255,255,255,.07);transition-duration:var(--t-press)}
body:not(.cad-open) .switch{transition:border-color .2s var(--ease),transform .2s var(--spring)}
body:not(.cad-open) .switch:active{transform:scale(.98);transition-duration:var(--t-press)}
body:not(.cad-open) .sgroup .srow{transition:background-color .2s var(--ease)}
body:not(.cad-open) .sgroup .srow:active{background:rgba(255,255,255,.05);transition-duration:var(--t-press)}
body:not(.cad-open) :is(.gcard,.scard,.add-row):active{transform:scale(.99);transition:transform var(--t-press) ease-out}
body:not(.cad-open) .combo-opt:active{background:rgba(255,255,255,.1)}
body:not(.cad-open) :is(.link,.linkbtn):active{opacity:.6}
body:not(.cad-open) .tbl tbody tr:active td{background:rgba(255,255,255,.04)}
/* a switch's thumb stretches toward where it is going while held, the way a physical one gives */
body:not(.cad-open) .toggle::after{transition:transform var(--t-move) var(--spring),width .16s var(--ease),background-color .2s var(--ease)}
body:not(.cad-open) .toggle:active{transform:none}
body:not(.cad-open) .toggle:active::after{width:24px}
body:not(.cad-open) .toggle[aria-checked="true"]:active::after{transform:translateX(16px)}

/* ---------------------------------------------------------------- a change waiting on the bot */
body:not(.cad-open) .btn[aria-busy="true"]{cursor:progress;opacity:.7}
body:not(.cad-open) .inline .done-note{font-size:.8125rem;color:var(--ink-2)}
body:not(.cad-open) .inline .done-note.ok{color:var(--ok)}
body:not(.cad-open) .inline .done-note.bad{color:var(--bad)}
body:not(.cad-open) .field .err{margin-top:6px;letter-spacing:.01em}
body:not(.cad-open) .inp[aria-invalid="true"]{border-color:var(--bad-line,rgba(255,107,107,.55))}

/* ---------------------------------------------------------------- save bar
   Rises from the bottom edge and sinks back into it; after a save it says what happened, beside
   the button you pressed, before it goes. */
body:not(.cad-open) .savebar{transition:transform var(--t-move) var(--spring),opacity .2s var(--ease),border-color .2s var(--ease)}
body:not(.cad-open) .savebar.done.ok{border-color:var(--ok-line,rgba(62,207,142,.45))}
body:not(.cad-open) .savebar.done.bad{border-color:var(--bad-line,rgba(255,107,107,.45))}
body:not(.cad-open) .savebar.done span{color:var(--ink)}

/* ---------------------------------------------------------------- pickers open out of their field */
body:not(.cad-open) .combo-list{transform-origin:top center;
  transition:opacity .16s var(--ease),transform .22s var(--spring),display .22s allow-discrete,overlay .22s allow-discrete}
body:not(.cad-open) .combo-list[hidden]{display:none!important;opacity:0;transform:translateY(-4px) scaleY(.97);pointer-events:none}
@starting-style{body:not(.cad-open) .combo-list:not([hidden]){opacity:0;transform:translateY(-4px) scaleY(.97)}}

/* ---------------------------------------------------------------- toasts
   Slide in from the corner they live in and fade back out of it (app.js adds .in / drops it). */
.toast{animation:none;opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform var(--t-move) var(--spring)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(-8px);transition-duration:.18s,.22s;pointer-events:none}

/* ---------------------------------------------------------------- dialog
   Dims the page and grows out of the middle; closing runs the same path backwards. Uses the
   dialog's own top-layer transitions, so the page is usable again the moment it closes. */
body:not(.cad-open) .ccdlg{opacity:0;transform:scale(.96);
  transition:opacity .2s var(--ease),transform .26s var(--spring),display .26s allow-discrete,overlay .26s allow-discrete}
body:not(.cad-open) .ccdlg[open]{opacity:1;transform:none}
@starting-style{body:not(.cad-open) .ccdlg[open]{opacity:0;transform:scale(.96)}}
body:not(.cad-open) .ccdlg::backdrop{background:rgba(0,0,0,0);transition:background-color .26s var(--ease),display .26s allow-discrete,overlay .26s allow-discrete}
body:not(.cad-open) .ccdlg[open]::backdrop{background:rgba(0,0,0,.66)}
@starting-style{body:not(.cad-open) .ccdlg[open]::backdrop{background:rgba(0,0,0,0)}}

/* ---------------------------------------------------------------- reduced motion
   app.css switches every animation and transition off. Feedback should not go with it, so the
   few things that come and go get a short cross-fade back, and presses dim instead of scale. */
@media (prefers-reduced-motion:reduce){
  .toast,.toast.in,.toast.out{transform:none!important;transition:opacity .18s ease!important}
  body:not(.cad-open) .savebar{transform:translate(-50%,0)!important;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s!important}
  body:not(.cad-open) .savebar.show{opacity:1;visibility:visible;transition-delay:0s!important}
  body:not(.cad-open) .ccdlg,body:not(.cad-open) .ccdlg[open]{transform:none;transition:opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete!important}
  body:not(.cad-open) .ccdlg::backdrop{transition:background-color .18s ease,display .18s allow-discrete,overlay .18s allow-discrete!important}
  body:not(.cad-open) .combo-list{transform:none!important;transition:opacity .15s ease,display .15s allow-discrete!important}
  button:not([disabled]):active,body:not(.cad-open) :is(.switch,.gcard,.scard,.add-row):active{transform:none!important;opacity:.75}
}

/* ---------------------------------------------------------------- reduced transparency, more contrast */
@media (prefers-reduced-transparency:reduce){
  .nav,.topline,.ccdlg::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  body:not(.cad-open){--ink-2:var(--ink);--ink-3:var(--ink);--muted:var(--ink);--muted-2:var(--ink);
    --rule:rgba(255,255,255,.3);--rule-2:rgba(255,255,255,.2);--line:rgba(255,255,255,.3);--line-strong:rgba(255,255,255,.5)}
  body:not(.cad-open) :is(.inp,.sel,.txt-a,.combo-in,.combo.multi){border-color:rgba(255,255,255,.5)}
  .toast,.ccdlg{border-color:rgba(255,255,255,.6)}
}