/* app.css - INC's one stylesheet.
 *
 * The brief: Security Van's clean shell (a band, big buttons, cards, one blue,
 * nothing a finger has to aim for under 44px), with INC's logo and a DARKER
 * default look. Dark is the default; light is the same layout, one toggle away.
 * Everything is a token on :root so a look is a block of variables and nothing
 * else. */

:root{
  --sans:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --band:56px;
  --r:14px; --r-sm:10px; --r-lg:20px;
}
/* ── the dark look (default) ── */
body[data-mode="dark"]{
  --bg:#0e1118; --panel:#161b26; --panel2:#1c2231; --raise:#232b3c; --ink:#e8edf5; --dim:#a3b0c4; --dimmer:#6b788d;
  --line:#28324a; --line-strong:#3b4a66; --soft:#17284a; --hover:#1d2535;
  --accent:#3b82f6; --accent2:#2563eb; --accent-ink:#ffffff;
  --good:#3fb950; --warn:#e3b341; --bad:#f0666b; --goodbg:#13301c; --warnbg:#3a2e0d; --badbg:#3a1518;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* ── the light look ── */
body[data-mode="light"]{
  --bg:#f4f5f7; --panel:#ffffff; --panel2:#ffffff; --raise:#f0f2f5; --ink:#16181d; --dim:#4f5766; --dimmer:#7d8594;
  --line:#e1e5eb; --line-strong:#aeb6c3; --soft:#eaf1fd; --hover:#f3f5f8;
  --accent:#0d4fb6; --accent2:#0a3f92; --accent-ink:#ffffff;
  --good:#1f7a45; --warn:#9a6a00; --bad:#b42318; --goodbg:#e7f4ec; --warnbg:#fdf0d5; --badbg:#fde8e6;
  --shadow:0 18px 50px rgba(16,24,40,.18);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
body.booting .band,body.booting .view{opacity:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--accent)}
kbd{font:13px var(--mono);background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--dim)}
.hint{color:var(--dim);font-size:15px;line-height:1.5;margin:0 0 12px}
.err{color:var(--bad);font-size:15px;min-height:1.2em;margin:6px 0}
.ok{color:var(--good)}
.spacer{flex:1}

/* ═══════════ buttons and fields ═══════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--line-strong);border-radius:12px;
  background:var(--panel);color:var(--ink);font:600 16px var(--sans);white-space:nowrap;transition:.12s border-color,.12s background}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent2);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{border-color:var(--bad)}
.btn.small{min-height:36px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.quiet{border-color:transparent;background:transparent;color:var(--dim)}
.btn.quiet:hover{background:var(--hover);color:var(--ink)}
.f{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--ink);font:16px var(--sans)}
.f:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.f.small{min-height:40px;padding:6px 10px;font-size:15px;border-radius:10px}
textarea.f{min-height:80px;line-height:1.45;resize:vertical}
select.f{appearance:auto}
.lbl{display:block;margin:14px 0 6px;font:600 15px var(--sans);color:var(--ink)}
.lbl i{font-style:normal;font-weight:400;color:var(--dim)}
.lbl:first-child{margin-top:0}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row > .f{flex:1;min-width:120px;width:auto}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:15px}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--panel2);color:var(--ink);font:500 15px var(--sans);white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent2);color:var(--accent-ink)}
.chip.small{min-height:30px;padding:0 10px;font-size:13px}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;background:var(--soft);color:var(--accent)}
.tag.good{background:var(--goodbg);color:var(--good)}.tag.warn{background:var(--warnbg);color:var(--warn)}.tag.bad{background:var(--badbg);color:var(--bad)}.tag.dim{background:var(--raise);color:var(--dim)}
.seg{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:12px;overflow:hidden}
.seg button{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--dim);font:600 15px var(--sans)}
.seg button+button{border-left:1.5px solid var(--line-strong)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}

/* ═══════════ the front door ═══════════ */
.welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:20px}
.welcome-bg{position:absolute;inset:0;
  background:radial-gradient(1100px 700px at 20% 15%,#1d4ed855,transparent 60%),radial-gradient(900px 700px at 85% 85%,#0ea5e944,transparent 60%),radial-gradient(800px 500px at 60% 40%,#6366f133,transparent 60%),linear-gradient(150deg,#121a30,#0a0f1e 55%,#06091a);filter:saturate(1.1)}
.welcome-card{position:relative;width:min(440px,100%);padding:32px 30px 24px;text-align:center;background:rgba(255,255,255,.08);backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.2);border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3);color:#fff}
.w-brand{display:flex;justify-content:center;margin:0 0 20px}
.w-brand span{display:inline-block;background:#fff;border-radius:16px;padding:12px 20px}
.w-brand img{display:block;height:46px;width:auto}
.w-h{margin:0 0 8px;font:700 28px var(--sans);letter-spacing:-.4px}
.w-p{margin:0 0 18px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.75)}
.who-grid{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.who{position:relative;display:grid;grid-template-columns:46px 1fr auto;column-gap:14px;align-items:center;text-align:left;width:100%;min-height:68px;padding:10px 14px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);border-radius:16px;color:#fff;transition:.15s}
.who:hover{background:rgba(255,255,255,.18);border-color:#fff}
.who .who-av{grid-row:1/span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--sans);letter-spacing:.5px;background:linear-gradient(160deg,#7fb0ea,#3b82f6 50%,#1d4ed8);box-shadow:0 6px 16px rgba(29,78,216,.4)}
.who b{display:block;font-size:17px}
.who small{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:2px}
.who .who-tag{grid-column:3;grid-row:1/span 2;font-size:12px;font-weight:800;letter-spacing:.7px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.2)}
.who .who-tag.locked{background:#c0392b}
.avatar{width:82px;height:82px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:29px;font-weight:600;letter-spacing:1px;
  background:linear-gradient(160deg,#7fb0ea,#3b82f6 45%,#1d4ed8);box-shadow:0 10px 26px rgba(29,78,216,.5),inset 0 2px 0 rgba(255,255,255,.4)}
.w-name{display:block;width:100%;max-width:280px;margin:0 auto 10px;min-height:50px;text-align:center;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.26);border-radius:999px;padding:8px 16px;color:#fff;font-size:17px}
.w-name::placeholder{color:rgba(255,255,255,.5)}
.w-name:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.2)}
.w-lbl{display:block;text-align:left;max-width:280px;margin:12px auto 6px;font:600 14px var(--sans);color:rgba(255,255,255,.85)}
.w-err{min-height:20px;margin:4px 0 10px;font-size:14.5px;color:#ffb4b4}
.w-link{background:none;border:none;color:rgba(255,255,255,.72);font-size:15px;min-height:44px;cursor:pointer}
.w-link:hover{color:#fff}
.w-foot{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.5);line-height:1.5}
.welcome .btn.primary{background:#fff;color:#0f1a33;border-color:#fff;min-height:50px;max-width:280px;margin:0 auto;display:flex}
.welcome .btn.primary:hover{filter:none;background:#eef3ff}

/* ═══════════ the band ═══════════ */
.band{position:relative;z-index:60;display:flex;align-items:center;gap:10px;height:var(--band);padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line);transition:opacity .3s}
.brand{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 2px;border:0;background:none;color:var(--ink);font:700 19px var(--sans);letter-spacing:-.2px;white-space:nowrap;border-radius:12px}
.brand:hover{background:var(--hover)}
.brand img{height:30px;width:auto;background:#fff;border-radius:8px;padding:3px 7px}
.nav{display:flex;gap:8px;margin-right:4px}
.navbtn{width:46px;height:46px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);display:grid;place-items:center}
.navbtn:hover:not(:disabled){background:var(--hover);border-color:var(--accent);color:var(--accent)}
.navbtn:disabled{opacity:.3;cursor:default}
/* The trail clips from its LEFT end: the box is justified to the end, so when the
   steps are wider than it the first word falls off the left and the deepest step,
   where you actually are, survives. A mask fades the cut. */
.trail{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;max-width:min(46vw,640px);height:46px;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 36px)}
.trail>*{flex:none}
.trail .step{display:inline-flex;align-items:center;height:44px;padding:0 10px;border:0;background:none;color:var(--dim);font:500 16px var(--sans);border-radius:10px}
.trail .step:not(:disabled):hover{background:var(--hover);color:var(--ink)}
.trail .step.here{color:var(--ink);font-weight:700}
.trail .sep{color:var(--dimmer);padding:0 2px}
.band-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.clockchip{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 12px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);font:600 15px var(--sans);white-space:nowrap}
.clockchip i{width:12px;height:12px;border-radius:50%;background:var(--dimmer);display:block}
.clockchip.on i{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent)}
.clockchip.on{border-color:var(--good)}
.clockchip:hover{border-color:var(--accent)}
.whoami{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 6px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);font:600 16px var(--sans)}
.whoami:hover{background:var(--hover);border-color:var(--accent)}
.whoami .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 13px var(--sans);display:grid;place-items:center}
.gear{width:46px;height:46px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);display:grid;place-items:center}
.gear:hover{background:var(--hover);border-color:var(--accent);color:var(--accent)}
.menu-pop{position:fixed;z-index:70;min-width:240px;padding:6px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;color:var(--ink);font:500 15px var(--sans);border-radius:10px;text-align:left}
.mi:hover{background:var(--accent);color:var(--accent-ink)}
.mi .sc{margin-left:auto;font:13px var(--mono);color:var(--dimmer)}
.mi:hover .sc{color:var(--accent-ink)}
.mi.sep{height:1px;min-height:0;padding:0;margin:5px 8px;background:var(--line);pointer-events:none}
.mi.head{color:var(--dim);font-size:13px;pointer-events:none;min-height:32px}
.banner{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:8px 18px;background:var(--warnbg);color:var(--warn);font-size:14px;text-align:center}

/* ═══════════ pages ═══════════ */
.view{position:absolute;top:var(--band);left:0;right:0;bottom:0;overflow:auto;transition:opacity .3s}
.page{max-width:1200px;margin:0 auto;padding:30px 36px 100px}
.page.wide{max-width:1500px}
.page.full{max-width:none;padding:18px 22px 60px}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead h1{margin:0;font:700 32px/1.15 var(--sans);letter-spacing:-.5px}
.pagehead .sub{color:var(--dim);font-size:16px;margin-top:4px}
.pagehead .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.card h3{margin:0 0 10px;font:700 18px var(--sans)}
.card.soft{background:var(--soft);border-color:transparent}
.empty{color:var(--dimmer);font-size:15px;padding:16px;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font:600 12.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:var(--hover)}
.bar{height:10px;border-radius:999px;background:var(--raise);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.bar i.good{background:var(--good)}.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}

/* ═══════════ the desk ═══════════ */
.desk{max-width:1400px;margin:0 auto;padding:40px 40px 80px}
.hello{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hello h1{margin:0;font:700 34px/1.15 var(--sans);letter-spacing:-.5px}
.hello span{font-size:18px;color:var(--dim)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:28px 26px;min-height:230px;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-lg);
  color:var(--ink);font:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .12s,box-shadow .12s,border-color .12s}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.2);border-color:var(--line-strong)}
.tile.big{grid-column:span 2}
.tile .ico{width:68px;height:68px;border-radius:18px;background:var(--soft);color:var(--accent);display:grid;place-items:center;margin-bottom:22px}
.tile b{font:700 23px/1.2 var(--sans);letter-spacing:-.2px;margin-bottom:8px}
.tile .num{font:600 15px var(--sans);color:var(--accent);margin-bottom:6px}
.tile i{font-style:normal;font-size:16px;line-height:1.5;color:var(--dim)}
.tile.module{border-style:dashed}
@media (max-width:1180px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.big{grid-column:span 2}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;gap:14px}.tile,.tile.big{grid-column:auto;min-height:0;padding:20px;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}.tile .ico{margin:0;width:56px;height:56px}.tile b{margin:0;font-size:20px}.tile i{flex-basis:100%;font-size:15px}}

/* ═══════════ the production sheet ═══════════ */
.sheet-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:1000px){.sheet-top{grid-template-columns:1fr}}
.entry{position:relative}
.entry .big{min-height:58px;font-size:19px;padding:12px 18px;border-radius:16px}
.sugg{position:absolute;left:0;right:0;z-index:20;margin-top:6px;background:var(--panel);border:1.5px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;max-height:340px;overflow-y:auto}
.sugg button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:8px 16px;border:0;background:none;color:var(--ink);text-align:left;font:16px var(--sans)}
.sugg button:hover,.sugg button.hot{background:var(--soft);color:var(--accent)}
.sugg button small{color:var(--dim);font-size:13px;white-space:nowrap}
.sugg .sg-head{padding:8px 16px 4px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer)}
.entry-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) 110px 150px 120px;gap:10px;margin-top:12px;align-items:end}
@media (max-width:1100px){.entry-grid{grid-template-columns:1fr 1fr}}
.entry-grid .f{min-height:46px}
.mini-lbl{display:block;font:600 12.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 5px}
.sheet-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.stat{background:var(--panel2);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px}
.stat b{display:block;font:700 26px/1.1 var(--sans);letter-spacing:-.4px}
.stat span{display:block;font-size:13.5px;color:var(--dim);margin-top:4px}
.stat .bar{margin-top:10px}
.lines .line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}
.lines .line:last-child{border-bottom:0}
.lines .when{font:13px var(--mono);color:var(--dim)}
.lines .what b{display:block;font-size:17px}
.lines .what i{display:block;font-style:normal;font-size:14px;color:var(--dim);margin-top:2px}
.lines .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.lines .line:hover .edit{opacity:1}
.lines .edit{opacity:.4}
.offer{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.offer:last-child{border-bottom:0}
.offer .o-body{flex:1;min-width:0}
.offer .o-body b{display:block;font-size:17px}
.offer .o-body p{margin:4px 0 6px;color:var(--dim);font-size:15px;white-space:pre-wrap}
.offer .o-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ═══════════ the board ═══════════ */
.board-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.board-bar .f{width:260px;min-height:44px}
.cols{display:grid;grid-template-columns:repeat(var(--ncol,5),minmax(220px,1fr));gap:14px;overflow:auto;padding-bottom:12px}
.col{display:flex;flex-direction:column;min-height:300px;max-height:calc(100dvh - var(--band) - 150px);background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r)}
.col-hd{flex:none;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font:600 12.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.col-hd b{color:var(--ink);font-weight:700}
.col-hd span{background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--dim);font-size:12px}
.col-body{flex:1;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.bcard{text-align:left;display:block;width:100%;background:var(--panel2);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--ink);transition:border-color .12s}
.bcard:hover{border-color:var(--accent)}
.bcard .cust{font-weight:700;font-size:14.5px;margin-bottom:3px}
.bcard .issue{font-size:14px;line-height:1.4;opacity:.9}
.bcard .meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.bcard .bchip{font-size:11.5px;letter-spacing:.03em;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--dim)}
.bcard .bchip.own{color:var(--accent);border-color:var(--accent)}
.bcard .wait{margin-top:7px;font-size:12.5px;color:var(--warn)}
.bcard .wait.late{color:var(--bad)}
.bcard .quiet{margin-top:5px;font-size:12px;color:var(--dimmer)}
.bcard .last{margin-top:6px;font-size:12.5px;color:var(--dim)}
.bcard .last i{color:var(--dimmer)}
.bcard.pri-med{border-left:5px solid var(--warn)}
.bcard.pri-high{border-left:5px solid #e0863c}
.bcard.pri-emergency{border-left:5px solid var(--bad);background:var(--badbg)}
.bcard.pri-low{border-left:5px solid var(--good)}
/* carrying a card (v-board-drag.js) */
.bcard{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bcard.bcard-pressing{transform:scale(.98);transition:transform .2s}
.bcard.bcard-lifted{background:transparent!important;border:2px dashed var(--accent)!important;box-shadow:none!important}
.bcard.bcard-lifted>*{visibility:hidden}
.bcard-ghost{position:fixed;z-index:500;margin:0;pointer-events:none;box-shadow:0 22px 50px rgba(0,0,0,.45);border-color:var(--accent)!important}
.col.col-target{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
body.carrying,body.carrying *{cursor:grabbing!important}
.pripick .chip.p-low.on{background:var(--good);border-color:var(--good)}
.pripick .chip.p-med.on{background:var(--warn);border-color:var(--warn);color:#1c1c1c}
.pripick .chip.p-high.on{background:#e0863c;border-color:#e0863c}
.pripick .chip.p-emergency.on{background:var(--bad);border-color:var(--bad)}
.ulist{list-style:none;margin:12px 0 0;padding:0}
.ulist li{padding:10px 0;border-top:1px solid var(--line)}
.ulist .uhd{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--dim)}
.ulist .uhd b{color:var(--ink)}
.ulist .utext{margin-top:4px;font-size:15px;white-space:pre-wrap}

/* ═══════════ the clock ═══════════ */
.clock-big{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px}
.clock-big .state{font:600 18px var(--sans);color:var(--dim)}
.clock-big .time{font:700 54px/1 var(--sans);letter-spacing:-1px;margin:8px 0 18px;font-variant-numeric:tabular-nums}
.clock-big .btn{min-height:64px;padding:0 40px;font-size:20px;border-radius:18px}
.clock-big .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.punches{list-style:none;margin:0;padding:0}
.punches li{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.punches li span{font:14px var(--mono);color:var(--dim);min-width:80px}
.onlist .person{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.onlist .person:last-child{border-bottom:0}
.onlist .dot{width:12px;height:12px;border-radius:50%;background:var(--dimmer)}
.onlist .dot.on{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent)}
.onlist b{font-size:17px;min-width:90px}
.onlist span{color:var(--dim);font-size:15px}

/* ═══════════ the calendar ═══════════ */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav h3{margin:0 6px;font:700 22px var(--sans)}
.cal-grid{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--raise);border-bottom:1px solid var(--line)}
.cal-dow span{padding:8px 10px;font:600 12.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-week:last-child{border-bottom:0}
.cal-cell{min-height:118px;padding:6px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.cal-cell:last-child{border-right:0}
.cal-cell.out{opacity:.45}
.cal-cell.today .dn span{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 8px}
.cal-dn{display:flex;justify-content:space-between;align-items:center;font:600 14px var(--sans);margin-bottom:2px}
.cal-add{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--dimmer);font-size:16px}
.cal-add:hover{background:var(--soft);color:var(--accent)}
.cal-ev{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--accent);border-radius:6px;padding:3px 7px;background:var(--soft);color:var(--ink);font:13px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev b{font-weight:600}
.cal-ev span{display:block;font-size:12px;color:var(--dim);white-space:normal}
.cal-ev.c-goog{border-left-color:#8b5cf6}.cal-ev.c-card{border-left-color:var(--accent)}.cal-ev.c-back{border-left-color:var(--warn)}.cal-ev.c-offer{border-left-color:var(--good)}
.cal-more{border:0;background:none;color:var(--accent);font-size:12.5px;text-align:left;padding:2px 7px}
.cal-day{margin-bottom:14px}
.cal-day h4{margin:0 0 8px;font:700 16px var(--sans)}
.cal-day.today h4{color:var(--accent)}
.cal-day .cal-ev{white-space:normal;margin-bottom:6px;padding:8px 10px;font-size:15px}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 0;font-size:13.5px;color:var(--dim)}
.cal-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle;background:var(--accent)}
.cal-legend .c-goog::before{background:#8b5cf6}.cal-legend .c-back::before{background:var(--warn)}.cal-legend .c-offer::before{background:var(--good)}
.cal-gline{margin:10px 0 0;font-size:14px;color:var(--dim);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ═══════════ people and groups ═══════════ */
.person-row{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.person-row:last-child{border-bottom:0}
.person-row .nm b{display:block;font-size:18px}
.person-row .nm i{display:block;font-style:normal;color:var(--dim);font-size:14px;margin-top:2px}
.person-row .f{min-height:42px;width:170px}
@media (max-width:800px){.person-row{grid-template-columns:1fr 1fr}}
.matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.matrix th{position:sticky;top:0;background:var(--panel);text-align:center;padding:10px 8px;border-bottom:1px solid var(--line);font:600 14px var(--sans);z-index:2}
.matrix th:first-child{text-align:left}
.matrix td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:center}
.matrix td:first-child{text-align:left;color:var(--ink)}
.matrix tr.shelf td{background:var(--raise);font:600 12.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px}
.matrix input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.matrix .src{font-size:11.5px;color:var(--dimmer);display:block}
.matrix .locked{opacity:.4}
.pinbox{background:var(--goodbg);color:var(--good);border-radius:12px;padding:14px 16px;margin:12px 0;font-size:15px}
.pinbox .pin{font:700 28px var(--mono);letter-spacing:4px;color:var(--ink);display:block;margin:4px 0}
.members{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ═══════════ sheets (dialogs) and toasts ═══════════ */
.sheet-root{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet{position:relative;width:min(600px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.sheet.wide{width:min(900px,100%)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.sheet-head b{font:700 20px var(--sans)}
.sheet-body{padding:18px 22px;overflow:auto;min-height:0}
.sheet-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:400;padding:12px 20px;border-radius:14px;background:var(--ink);color:var(--bg);font:600 15px var(--sans);box-shadow:var(--shadow);max-width:min(90vw,520px)}
.toast.err{background:var(--bad);color:#fff}
.toast.ok{background:var(--good);color:#fff}