/* ============================================================
   BAI TIME MANAGER — tokens
   Light palette on bare :root. Dark redefined twice:
   once for system-dark (guarded), once for the explicit stamp.
   Components only ever read tokens.
   ============================================================ */
:root{
  --ground:#F2F4F2; --grid:#DFE4E1;
  --surface:#FFFFFF; --surface-2:#E9ECEA; --surface-3:#DFE3E1;
  --line:#D3D8D5; --line-strong:#B4BCB8;
  --ink:#16191A; --ink-2:#545C5E; --ink-3:#7E8789;
  --accent:#17608F; --accent-hover:#124D73; --accent-ink:#FFFFFF; --accent-soft:#E1EDF5;
  --good:#2C7A4F; --good-soft:#E2F0E7;
  --warn:#B26A00; --warn-soft:#F8EEDC;
  --crit:#A93B31; --crit-soft:#F7E5E3;
  --shadow:0 1px 2px rgba(22,25,26,.06), 0 4px 16px rgba(22,25,26,.06);
  --shadow-lg:0 8px 40px rgba(22,25,26,.16);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --r:10px; --r-sm:7px; --r-lg:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101314; --grid:#1A1F21;
    --surface:#191D1F; --surface-2:#222729; --surface-3:#2A3032;
    --line:#2E3437; --line-strong:#434C4F;
    --ink:#E7EBEA; --ink-2:#A0AAAC; --ink-3:#788184;
    --accent:#4FA3D8; --accent-hover:#68B5E4; --accent-ink:#07151E; --accent-soft:#16303F;
    --good:#4CAF7D; --good-soft:#133025;
    --warn:#D9A03C; --warn-soft:#32280F;
    --crit:#E0736A; --crit-soft:#3A1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.34);
    --shadow-lg:0 8px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ground:#101314; --grid:#1A1F21;
  --surface:#191D1F; --surface-2:#222729; --surface-3:#2A3032;
  --line:#2E3437; --line-strong:#434C4F;
  --ink:#E7EBEA; --ink-2:#A0AAAC; --ink-3:#788184;
  --accent:#4FA3D8; --accent-hover:#68B5E4; --accent-ink:#07151E; --accent-soft:#16303F;
  --good:#4CAF7D; --good-soft:#133025;
  --warn:#D9A03C; --warn-soft:#32280F;
  --crit:#E0736A; --crit-soft:#3A1E1B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.34);
  --shadow-lg:0 8px 40px rgba(0,0,0,.55);
}

/* ---------- outdoor mode ----------
   Sunlight destroys low contrast. This is not a replacement for the palette —
   it is a deliberate override the worker switches on, and it has to come after
   every other token block so it wins in both themes. Semantic colours keep
   their meaning but get enough contrast to survive direct light. */
:root[data-contrast="high"]{
  --ground:#FFFFFF; --grid:#E2E2E2;
  --surface:#FFFFFF; --surface-2:#F0F0F0; --surface-3:#E2E2E2;
  --line:#8A8A8A; --line-strong:#3A3A3A;
  --ink:#000000; --ink-2:#2A2A2A; --ink-3:#4A4A4A;
  --accent:#0B4A78; --accent-hover:#08395C; --accent-ink:#FFFFFF; --accent-soft:#D6E6F2;
  --good:#12592F; --good-soft:#D2EBDA;
  --warn:#7A4400; --warn-soft:#FBEBD2;
  --crit:#8C1D14; --crit-soft:#FADAD6;
  --shadow:0 1px 2px rgba(0,0,0,.28); --shadow-lg:0 8px 32px rgba(0,0,0,.4);
}
@media (prefers-color-scheme:dark){
  :root[data-contrast="high"]:not([data-theme="light"]){
    --ground:#000000; --grid:#161616;
    --surface:#0B0B0B; --surface-2:#1C1C1C; --surface-3:#2A2A2A;
    --line:#6A6A6A; --line-strong:#9A9A9A;
    --ink:#FFFFFF; --ink-2:#E0E0E0; --ink-3:#B8B8B8;
    --accent:#7FC4F5; --accent-hover:#A2D6FA; --accent-ink:#00131F; --accent-soft:#0C2E44;
    --good:#6FE3A2; --good-soft:#0A2B18;
    --warn:#FFC15C; --warn-soft:#332203;
    --crit:#FF9188; --crit-soft:#3D120D;
  }
}
:root[data-theme="dark"][data-contrast="high"]{
  --ground:#000000; --grid:#161616;
  --surface:#0B0B0B; --surface-2:#1C1C1C; --surface-3:#2A2A2A;
  --line:#6A6A6A; --line-strong:#9A9A9A;
  --ink:#FFFFFF; --ink-2:#E0E0E0; --ink-3:#B8B8B8;
  --accent:#7FC4F5; --accent-hover:#A2D6FA; --accent-ink:#00131F; --accent-soft:#0C2E44;
  --good:#6FE3A2; --good-soft:#0A2B18;
  --warn:#FFC15C; --warn-soft:#332203;
  --crit:#FF9188; --crit-soft:#3D120D;
}
/* Hairlines disappear outdoors; give structure some weight. */
:root[data-contrast="high"] .card,
:root[data-contrast="high"] .clockcard,
:root[data-contrast="high"] .pickrow{border-width:2px}
:root[data-contrast="high"] .bigbtn{border-width:2px;font-weight:760}
:root[data-contrast="high"] .pill{border-width:1.5px;font-weight:720}
:root[data-contrast="high"] .lbl{color:var(--ink-2)}
:root[data-contrast="high"] .dim{color:var(--ink-3)}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;          /* iOS inflates text in landscape without this */
  -webkit-tap-highlight-color:transparent; /* the grey flash reads as a rendering glitch */
}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.016em; font-weight:660; line-height:1.22}
h1{font-size:26px} h2{font-size:19px} h3{font-size:16px} h4{font-size:14px}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ---------- primitives ---------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.hide{display:none !important}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:560;
  cursor:pointer;transition:background .13s,border-color .13s,transform .06s;white-space:nowrap;
}
@media (hover:hover){.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}}
.btn:active{transform:translateY(1px);background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (hover:hover){.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
.btn.danger{color:var(--crit);border-color:var(--crit)}
@media (hover:hover){.btn.danger:hover{background:var(--crit-soft)}}
.btn.ghost{background:transparent;border-color:transparent}
@media (hover:hover){.btn.ghost:hover{background:var(--surface-2)}}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.42;cursor:not-allowed}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:16px}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2.5px 8px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:660;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.pill.good{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.pill.info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.pill.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-strong)}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot.live{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.field{display:flex;flex-direction:column;gap:5px}
.field > .lbl{margin-bottom:1px}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=password],select,textarea{
  width:100%;padding:8px 10px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:14px;
}
input:disabled,select:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
textarea{resize:vertical;min-height:64px}
/* 16px is the threshold below which iOS Safari zooms the whole page on focus.
   This MUST come after the base rule above — same specificity, so source order
   decides, and at 14px every tap on a field yanked the layout out of place. */
@media (max-width:700px),(pointer:coarse){
  input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],
  input[type=time],input[type=password],select,textarea{font-size:16px}
}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
  text-align:left;padding:8px 11px;border-bottom:1px solid var(--line-strong);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;white-space:nowrap;
}
td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
@media (hover:hover){tbody tr.clickable:hover{background:var(--surface-2)}}
.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.banner{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);border:1px solid;align-items:flex-start;font-size:13.5px;line-height:1.45}
.banner.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.banner.crit{background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.banner.info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.banner.good{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.banner strong{color:inherit}

.bar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;position:relative}
.bar > i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s ease}
.bar > i.over{background:var(--crit)}
.bar > i.near{background:var(--warn)}

/* Narrow viewport counts as touch too: some Android browsers report
   pointer:fine, and nobody is using a mouse at 390px wide anyway. */
@media (pointer:coarse),(max-width:700px){
  .btn{min-height:42px}
  .btn.sm{min-height:40px;padding:9px 12px;font-size:13px}
  input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],
  input[type=time],input[type=password],select{min-height:44px}
  input[type=color]{min-height:44px}
  label.row{min-height:44px}
  input[type=checkbox]{width:20px;height:20px}
}

.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
.sep{height:1px;background:var(--line);border:0;margin:0}


/* ---------- app shell ---------- */
#app{min-height:100vh;min-height:100dvh}

/* sign in */
.signin{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}
.signin-card{width:100%;max-width:420px}
.brand{display:flex;align-items:baseline;gap:9px}
.brand .mark{
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.02em;
  background:var(--accent);color:var(--accent-ink);padding:3px 7px;border-radius:5px;
}
.brand .name{font-size:20px;font-weight:680;letter-spacing:-.02em}
.who{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:border-color .13s,background .13s}
@media (hover:hover){.who:hover{border-color:var(--accent);background:var(--accent-soft)}}
.who:active{background:var(--accent-soft)}
.av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--accent)}
.av.lg{width:44px;height:44px;font-size:14px}

/* admin */
.admin{display:grid;grid-template-columns:236px 1fr;min-height:100vh;min-height:100dvh}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  gap:2px;padding:16px 12px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--ink-2);font-size:14px;font-weight:540;border:0;background:transparent;width:100%;text-align:left}
@media (hover:hover){.nav:hover{background:var(--surface-2);color:var(--ink)}}
.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:640}
.nav .ct{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:1px 6px;
  border-radius:999px;background:var(--crit);color:#fff}
.main{padding:22px 26px 60px;max-width:1280px;min-width:0}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
@media (max-width:860px){
  .admin{grid-template-columns:1fr}
  .rail{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);gap:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail .brand{display:none}
  .rail > .grow{display:none}
  .rail > .sep{display:none}
  .nav{width:auto;white-space:nowrap}
  .nav .ct{margin-left:6px}
  .main{padding:16px 14px 60px}
}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden}
.tile .v{font-family:var(--mono);font-size:25px;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile .sub{font-size:11.5px;color:var(--ink-3)}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-strong)}
.tile.acc::after{background:var(--accent)} .tile.good::after{background:var(--good)}
.tile.warn::after{background:var(--warn)} .tile.crit::after{background:var(--crit)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,14,15,.5);z-index:50;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);
  border-left:1px solid var(--line);z-index:51;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:slide .2s cubic-bezier(.2,.7,.3,1)}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex:none;background:var(--surface)}
.drawer-body{padding:18px;overflow-y:auto;overscroll-behavior:contain;flex:1;display:flex;flex-direction:column;gap:17px}
.drawer-foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex:none;background:var(--surface)}
.sect{display:flex;flex-direction:column;gap:11px}
.sect > .lbl{padding-bottom:6px;border-bottom:1px solid var(--line)}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(10,14,15,.55)}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);width:min(500px,100%);max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:15px}

/* worker (mobile-first, capped to phone width) */
.worker{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--ground);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative}
@media (max-width:520px){.worker{border:0}}
.wtop{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line);
  padding:11px 15px;padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.wbody{flex:1;padding:15px;display:flex;flex-direction:column;gap:14px;padding-bottom:84px}
.wtabs{position:sticky;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding:5px 5px calc(5px + env(safe-area-inset-bottom))}
.wtab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 3px;min-height:52px;border:0;background:transparent;
  cursor:pointer;border-radius:var(--r-sm);color:var(--ink-3);font-size:10.5px;font-weight:600;font-family:var(--mono);
  letter-spacing:.04em;text-transform:uppercase}
.wtab.on{color:var(--accent);background:var(--accent-soft)}
.wtab svg{width:19px;height:19px}

.clockcard{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  padding:20px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);text-align:center}
.clockcard.on{border-color:var(--good);background:linear-gradient(180deg,var(--good-soft),var(--surface) 62%)}
.clockcard.lunch{border-color:var(--warn);background:linear-gradient(180deg,var(--warn-soft),var(--surface) 62%)}

/* The three actions that get tapped on a roof, in a driveway, through a glove.
   Everything else can stay the size it is. */
.bigbtn.clockaction{min-height:68px;font-size:19px;font-weight:720;letter-spacing:-.015em}
@media (pointer:coarse),(max-width:700px){
  .bigbtn.clockaction{min-height:74px;font-size:20px}
}

/* A standing note that what is on screen may no longer be true. */
.offline-bar{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:9px;
  padding:9px 14px;background:var(--warn-soft);color:var(--warn);
  border-bottom:1px solid var(--warn);font-size:13px;font-weight:600}
.offline-bar .dot{background:currentColor}
.timer{font-family:var(--mono);font-size:47px;font-weight:660;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1}
.bigbtn{width:100%;padding:17px;min-height:56px;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent);
  color:var(--accent-ink);font-size:16.5px;font-weight:680;cursor:pointer;letter-spacing:-.01em;
  transition:filter .13s,transform .06s;display:flex;align-items:center;justify-content:center;gap:9px}
@media (hover:hover){.bigbtn:hover{filter:brightness(1.08)}}
.bigbtn:active{transform:translateY(1px);filter:brightness(.94)}
.bigbtn.stop{background:var(--crit);border-color:var(--crit);color:#fff}
.bigbtn.lunch{background:var(--warn);border-color:var(--warn);color:#fff}
.bigbtn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.bigbtn:disabled{opacity:.45;cursor:not-allowed}

.pickrow{display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;width:100%;text-align:left;transition:border-color .13s}
@media (hover:hover){.pickrow:hover{border-color:var(--accent)}}
.pickrow:active{border-color:var(--accent);background:var(--accent-soft)}
.pickrow.on{border-color:var(--accent);background:var(--accent-soft)}
.swatch{width:9px;align-self:stretch;border-radius:3px;flex:none;min-height:34px}

.seg{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.seg:last-child{border-bottom:0}

/* photos */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.gal figure{margin:0;position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(8,11,12,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px}
.lightbox img{max-width:100%;max-height:74vh;max-height:74dvh;object-fit:contain;border-radius:var(--r)}
.shoot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;aspect-ratio:1;
  border-radius:var(--r-sm);border:1.5px dashed var(--line-strong);background:var(--surface);cursor:pointer;color:var(--ink-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
@media (hover:hover){.shoot:hover{border-color:var(--accent);color:var(--accent)}}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;background:var(--ink);
  color:var(--ground);padding:10px 17px;border-radius:999px;font-size:13.5px;font-weight:560;
  box-shadow:var(--shadow-lg);animation:up .22s cubic-bezier(.2,.7,.3,1)}
@keyframes up{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}