/* The DTR's screens (kiosk, HR, sample-data lab). Built on the registry's
   app.css (its colours, buttons, chips, labelled controls); only what's new lives here. */
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }
/* IN, OUT and Report each have their own colour, on the kiosk and on the HR screen */
:root{ color-scheme:light dark;
  --l-in:#0B7A57; --l-out:#2C63A8; --l-report:#7446B8;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --l-in:#1FA57A; --l-out:#4C86D0; --l-report:#9270D0;
}}
:root[data-theme="dark"]{
  --l-in:#1FA57A; --l-out:#4C86D0; --l-report:#9270D0;
}

/* ================= kiosk ================= */
.kclock,.kbtn,.kmodet,.kbranch,.confirm .cbig,.confirm .cname,.cardname{font-family:var(--font-head)}
/* the kiosk stands under the sky: the time of day, top to bottom */
body.kiosk{background:var(--head); color:var(--head-ink); min-height:100vh; min-height:100dvh; overflow:hidden;
  background-image:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%); background-attachment:fixed}
/* a phone fills the screen; a PC kiosk gets the same layout as a column in the middle */
.kiosk #app{position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  width:100%; max-width:560px; margin:0 auto;
  padding:max(14px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom))}
.kempty{margin:auto; text-align:center; display:grid; gap:10px; color:var(--head-dim); max-width:300px}
.kempty strong{color:var(--head-ink); font-size:18px}
.kempty p{margin:0}
.ktop{display:flex; align-items:center; gap:10px; font-size:13px}
.kbranch{font-weight:600; display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kbranch::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--bc); flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.kstatus{margin-left:auto; white-space:nowrap; font-size:12px; padding:3px 9px; border-radius:20px; background:rgba(255,255,255,.08); color:var(--head-dim)}
.kstatus.on{color:#7FE0B8}
.kstatus.busy{color:#E8C27A}
.kstatus.off{color:#1B1203; background:#E8B04A; font-weight:600}
.kbody{flex:1; display:flex; flex-direction:column; min-height:0}
.kclockwrap{text-align:center; margin:28px 0 22px}
.kclock{font-size:64px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.kclock .ap{font-size:22px; font-weight:500; margin-left:6px; color:var(--head-dim); letter-spacing:0}
.kdate{margin-top:8px; color:var(--head-dim); font-size:15px}
/* home: the three buttons */
.kbtns{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kbtn{border:0; border-radius:18px; color:#fff; cursor:pointer; display:grid; place-items:center; align-content:center; gap:4px;
  padding:18px 10px; font:inherit; -webkit-tap-highlight-color:transparent}
.kbtn span{font-size:40px; font-weight:700; letter-spacing:.01em; line-height:1}
.kbtn small{font-size:13px; opacity:.85}
.kbtn.l-in,.kbtn.l-out{min-height:150px}
.kbtn:active{transform:scale(.98)}
.kbtn.report{grid-column:1 / -1; background:rgba(255,255,255,.08); color:var(--head-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.kbtn.report span{font-size:22px; font-weight:600}
.kbtn.report small{color:var(--head-dim); opacity:1}
/* after a button: what was pressed, and a way back */
.kmode{display:flex; align-items:center; gap:10px; margin:16px 0 14px; padding:12px 14px; border-radius:14px; color:#fff}
.kmodet{font-size:26px; font-weight:700; display:flex; align-items:baseline; gap:10px; min-width:0}
.kwho{font-size:18px; font-weight:500; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kcancel{margin-left:auto; border:0; border-radius:20px; padding:8px 14px; background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:14px; cursor:pointer}
.kscan{display:grid; gap:12px}
.viewfinder{position:relative; aspect-ratio:1/1; width:min(100%, 50vh); width:min(100%, 50dvh); margin:0 auto; border-radius:18px;
  background:rgba(255,255,255,.04); display:grid; place-items:center; overflow:hidden}
/* the camera fills the viewfinder; the corners and words sit on top */
.kvideo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s}
.kvideo.mirror{transform:scaleX(-1)}
.viewfinder.live .kvideo{opacity:1}
.viewfinder .vf-corner,.viewfinder .vf-text,.viewfinder .kswitch{z-index:1}
.viewfinder.live .vf-text{align-self:end; width:100%; padding:28px 16px 12px; background:linear-gradient(transparent, rgba(0,0,0,.65))}
.viewfinder.live .vf-text strong{display:none}
.viewfinder.live .vf-text span{color:#fff; font-size:14px}
.viewfinder.trouble .vf-text span{color:#FFD58A}
.kswitch{position:absolute; top:10px; right:10px; border:0; border-radius:16px; padding:6px 11px; font:inherit; font-size:12px;
  background:rgba(0,0,0,.45); color:#fff; cursor:pointer}
.kswitch[hidden]{display:none}
.vf-corner{position:absolute; width:34px; height:34px; border:3px solid rgba(255,255,255,.55)}
.vf-corner.tl{top:12px; left:12px; border-right:0; border-bottom:0; border-top-left-radius:10px}
.vf-corner.tr{top:12px; right:12px; border-left:0; border-bottom:0; border-top-right-radius:10px}
.vf-corner.bl{bottom:12px; left:12px; border-right:0; border-top:0; border-bottom-left-radius:10px}
.vf-corner.br{bottom:12px; right:12px; border-left:0; border-top:0; border-bottom-right-radius:10px}
.vf-text{text-align:center; color:var(--head-dim); font-size:13px; display:grid; gap:4px; padding:0 30px}
.vf-text strong{color:var(--head-ink); font-size:19px; font-weight:600}
.kinput{display:flex; gap:8px}
.kinput input{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:var(--head-ink); font-size:14px; padding:11px 12px}
.kinput input::placeholder{color:var(--head-dim)}
.kinput .btn{padding:11px 18px; font-size:15px}
/* the report form */
.kreport{display:grid; gap:14px; overflow:auto; padding-bottom:4px}
.kq{display:grid; gap:7px}
.kql{font-size:14px; font-weight:600}
.kopt{font-weight:400; color:var(--head-dim)}
.kchoices{display:flex; flex-wrap:wrap; gap:7px}
.kchoices.two{display:grid; grid-template-columns:1fr 1fr}
.kchoice{border:0; border-radius:10px; padding:11px 12px; background:rgba(255,255,255,.08); color:var(--head-ink); font:inherit; font-size:14px;
  text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.kchoice.on{background:var(--l-report); color:#fff; box-shadow:none; font-weight:600}
.kreport input,.kreport textarea{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:var(--head-ink); font-size:15px; padding:10px 12px}
.kreport textarea{resize:vertical; min-height:76px; font-family:inherit}
.kreport input::placeholder,.kreport textarea::placeholder{color:var(--head-dim)}
.kerr{color:#FFB4A6; font-size:14px; font-weight:600; min-height:0}
.kerr:empty{display:none}
.kbtn.send{min-height:0; padding:15px}
.kbtn.send span{font-size:20px; font-weight:600}
.krecent{margin-top:auto; padding-top:18px; display:grid; gap:6px}
.krh{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--head-dim)}
.kr{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:14px}
.klabel{font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 7px; border-radius:5px; color:#fff; background:var(--l-out); min-width:62px; text-align:center}
.kt{color:var(--head-dim); font-variant-numeric:tabular-nums}

/* the confirmation covers the whole screen, on a PC as on a phone */
.overlay{position:fixed; inset:0; z-index:5}
.overlay[hidden]{display:none}
.confirm{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; color:#fff; cursor:pointer; animation:pop .16s ease-out; overflow:hidden}
@keyframes pop{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
.confirm .cbig{font-size:44px; font-weight:700; letter-spacing:-.01em; line-height:1.05}
.confirm .cname{font-size:32px; font-weight:600; margin-top:10px}
.confirm .cfull{font-size:15px; opacity:.85}
.confirm .csmall{font-size:28px; font-weight:500; margin-top:14px; font-variant-numeric:tabular-nums; opacity:.95}
.confirm .cremark{font-size:20px; font-weight:600; margin-top:8px; padding:4px 14px; border-radius:20px; background:rgba(0,0,0,.28)}
.confirm .cremark.fine{background:rgba(255,255,255,.18); font-weight:500}
.confirm .cremark.warn{background:#E8B04A; color:#1B1203; font-size:17px; max-width:320px}
.confirm .cbar{position:absolute; left:0; bottom:0; height:6px; width:100%; background:rgba(255,255,255,.6);
  transform-origin:left; animation:drain linear forwards}
@keyframes drain{from{transform:scaleX(1)} to{transform:scaleX(0)}}
.confirm.repeat{background:#8A5A0B}
.confirm.repeat .cbig{font-size:36px}
.confirm.repeat .csmall{font-size:20px}
.confirm.error{background:#9E2415}
.confirm.error .cbig{font-size:34px}
.confirm.error .csmall{font-size:18px}
.l-in{background:var(--l-in)} .l-out{background:var(--l-out)} .l-report{background:var(--l-report)}

/* ================= HR ================= */
.hpanel{overflow:hidden}
.htools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:11px 13px; border-bottom:1px solid var(--rule)}
.htools .dates{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink2)}
.htools .dates input{width:auto; padding:5px 7px; font-size:13.5px}
.hsum{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:8px 13px; font-size:12.5px; color:var(--ink2);
  border-bottom:1px solid var(--rule)}
.chip.flagchip{background:var(--flag-soft); color:var(--flag)}
.chip.reportchip{background:color-mix(in srgb, var(--l-report) 14%, transparent); color:var(--l-report)}
.tablewrap{overflow:auto}
.dtrtable{width:100%; border-collapse:collapse; font-size:13.5px}
.dtrtable thead th{position:sticky; top:0; z-index:2; background:var(--card); text-align:left; font-size:12px; font-weight:600;
  color:var(--ink2); padding:8px 12px; border-bottom:1px solid var(--rule2); white-space:nowrap}
.dtrtable th.t,.dtrtable td.t{text-align:right}
/* layers: the branch (a faint wash of its colour, as in the registry), then the day */
.dtrtable .branchrow th{background:var(--sunken); text-align:left; font-size:14px; font-weight:700; color:var(--ink);
  padding:10px 12px; border-top:1px solid var(--rule2); border-bottom:1px solid var(--rule2)}
.dtrtable .branchrow th[data-tint]{background:var(--tint-head); box-shadow:inset 4px 0 0 var(--tint-edge)}
.dtrtable .branchrow .gcount{margin-left:10px; font-size:12px; font-weight:500; color:var(--ink3)}
.dtrtable .dayrow th{text-align:left; font-size:12.5px; font-weight:600; color:var(--ink2);
  padding:9px 12px 5px; border-bottom:1px solid var(--rule)}
.dtrtable .dayrow .chip{margin-left:8px}
.dtrtable td{padding:8px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
.dtrtable tr[data-tint] > td:first-child{box-shadow:inset 3px 0 0 var(--tint-edge)}
/* the name hugs its text (a long one is cut short; hovering shows it whole) and is
   right-aligned, so every name ends right next to its punches */
.dtrtable .who{width:1%; padding-right:8px; text-align:right}
.whobox{display:grid; justify-items:end; gap:1px; width:max-content; max-width:210px; margin-left:auto}
.whobox .nm{font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.whobox .sub{font-size:12px; color:var(--ink2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dtrtable .punches{width:1%; padding-left:6px; padding-right:18px}

/* every punch is the same width: a fixed tag and a fixed, right-aligned time, so
   "8:02 AM" and "12:01 PM" line up; four to a line, in the same places on every row */
.pchips{display:grid; grid-template-columns:repeat(4, max-content); gap:5px}
.pchip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; padding:2px 7px 2px 2px; border-radius:6px;
  background:var(--sunken); color:var(--ink)}
.pchip b{width:3.1em; text-align:center; font-size:10px; letter-spacing:.04em; color:#fff; padding:2px 0; border-radius:4px}
.pchip .mono{width:8ch; text-align:right}
/* on a narrower screen, two to a line: usually the morning IN and OUT, then the afternoon's */
@media (max-width:1000px){ .pchips{grid-template-columns:repeat(2, max-content)} }
.pchip.l-in b{background:var(--l-in)} .pchip.l-out b{background:var(--l-out)}
.dtrtable tr.hasrep td{border-bottom-color:transparent}
.dtrtable tr.reprow td{padding:0 12px 9px 12px; font-size:13px; color:var(--ink2)}
.reprow td > span{margin-right:8px}
.reptag{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--l-report); padding:2px 6px; border-radius:4px}
.repwhat{font-weight:600; color:var(--ink)}
.repwhy{color:var(--ink)}
.repwhen{font-size:12px; color:var(--ink3)}
.dtrtable td.miss{color:var(--ink3)}
.dtrtable .sched{width:1%; white-space:nowrap}
.dtrtable td.sched{font-size:12.5px; color:var(--ink2)}
.dtrtable .note{font-size:12.5px; color:var(--ink2); min-width:150px}
.dtrtable tr.st-check td{background:var(--flag-soft)}
.dtrtable tr.st-check td.miss{color:var(--flag); font-weight:600}
.dtrtable tr.st-check .note{color:var(--flag); font-weight:600}
.dtrtable tr.st-open .note{color:var(--slate)}

/* ================= lab ================= */
.labclock{display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums}
.labclock .lct{font-size:18px; font-weight:600}
.labclock .lcd{font-size:12.5px; color:var(--head-dim)}
.labbar{display:flex; flex-wrap:wrap; gap:12px 26px; padding:12px 14px; margin-bottom:14px; align-items:flex-end}
.lgroup{display:grid; gap:6px}
.lgroup.end{margin-left:auto}
.lh{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); font-weight:600; display:flex; gap:6px; align-items:center}
.lgroup .ctl{gap:6px}
.btnrow{display:flex; flex-wrap:wrap; gap:5px}
.lgroup > .ctl, .lgroup > label{display:inline-flex}
.switch{align-items:center; gap:7px; font-size:13.5px; cursor:pointer}
.switch input{width:16px; height:16px; accent-color:var(--flag)}
input.num{width:64px; padding:5px 7px}

.labgrid{display:grid; grid-template-columns:290px 400px minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:1250px){ .labgrid{grid-template-columns:290px 400px} .hrcol{grid-column:1 / -1} }
@media (max-width:760px){ .labgrid{grid-template-columns:1fr} }
.colhead{font-size:12.5px; font-weight:600; color:var(--ink2); margin:0 0 8px; display:flex; gap:10px; align-items:baseline}
.colhead span{font-weight:400; color:var(--ink3)}
.colhead a{font-weight:500; margin-left:auto}
.cards{max-height:calc(100vh - 200px); overflow:auto; padding:10px}
.cards .colhead{padding:2px 2px 0}
.cgh{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); font-weight:600; margin:12px 2px 6px}
.cnone{font-size:13px; color:var(--ink3); padding:4px 2px}
.idcard{display:flex; align-items:stretch; border:1px solid var(--rule); border-radius:9px; margin-bottom:6px; background:var(--card);
  box-shadow:inset 4px 0 0 var(--bc); overflow:hidden}
.idcard.here{border-color:var(--rule2)}
.idcard.odd{border-style:dashed; box-shadow:none}
.idscan{flex:1; min-width:0; display:grid; gap:1px; text-align:left; border:0; background:none; padding:8px 10px 8px 14px; cursor:pointer}
.idscan:hover{background:var(--sunken)}
.idscan .nm{font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px}
.idscan .sub{font-size:12px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.idcard .copy{border-radius:0; border-left:1px solid var(--rule); color:var(--ink2)}

.phone{width:390px; height:800px; max-width:100%; border-radius:44px; padding:12px; background:#0A0D0F;
  box-shadow:0 0 0 1px #2A3136, 0 18px 40px rgba(0,0,0,.25)}
.phone iframe{width:100%; height:100%; border:0; border-radius:34px; background:#11201C; display:block}
.hrframe{width:100%; height:800px; border:1px solid var(--rule); border-radius:12px; background:var(--bg); display:block}
/* HR inside the lab: no page header, tighter margins */
.hr.framed header{display:none}
.hr.framed main{padding:0}

/* ================= HR: the two tabs ================= */
.hr main > .subtabs{width:fit-content}
/* a name on the By day tab opens that person's card */
button.whobox{background:none; border:0; padding:0; font:inherit; color:inherit; text-align:right; cursor:pointer}
button.whobox:hover .nm{color:var(--accent); text-decoration:underline}
.stepper{display:inline-flex; align-items:center; gap:2px}
.stepper .btn{padding:4px 9px; font-size:15px; line-height:1}
.stepper .btn[disabled]{opacity:.35; cursor:default}

/* ================= HR: the DTR card ================= */
.cardhead{padding:14px 16px 12px; border-bottom:1px solid var(--rule); display:grid; gap:4px}
.cardhead[data-tint]{box-shadow:inset 4px 0 0 var(--tint-edge)}
.cardwho{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.cardname{font-size:20px; font-weight:700}
.cardsub{font-size:13px; color:var(--ink2)}
.cardspan{font-size:13px; color:var(--ink2)}
.cardtiles{margin-top:8px}
.glrow.cardtile{cursor:default}
.glrow.cardtile:hover{border-color:var(--rule)}
.cardtile .glnum{font-weight:600; color:var(--ink)}
.cardtile.flag{background:var(--flag-soft); border-color:transparent}
.cardtile.flag .glnum,.cardtile.flag .gllab{color:var(--flag)}
.cardtile.rep .glnum{color:var(--l-report)}
.cardtable .date{width:1%; white-space:nowrap; font-weight:600}
.cardtable td.date .chip{margin-left:8px; font-weight:500}
.cardtable .hrs{width:1%; white-space:nowrap; text-align:right}
.cardtable td.hrs{font-size:13px}
.cardtable tr.weekend:not(.st-check) td{background:var(--sunken)}
/* a day with nothing on it, past or still to come, stays quiet */
.cardtable tr.st-off td,.cardtable tr.st-ahead td{color:var(--ink3)}
.cardtable tr.st-ahead td.date{font-weight:500}

/* ================= lab: the QR code on each sample ID card ================= */
.idqr{flex:none; border:0; padding:6px 0 6px 12px; background:none; cursor:zoom-in; display:grid; place-items:center}
.idqr canvas{display:block; width:52px; height:52px; image-rendering:pixelated; border-radius:3px}
.qrbig{display:grid; place-items:center; margin:6px 0 4px}
.qrbig canvas{width:280px; height:280px; image-rendering:pixelated; border-radius:6px}

/* ================= HR: Names for new IDs ================= */
.tabcount{margin-left:7px; font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; background:var(--flag); color:#fff}
.isnew{color:var(--amber); font-weight:600}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline}
.namesintro{padding:14px 16px 12px; border-bottom:1px solid var(--rule); display:grid; gap:4px}
.namesintro p{margin:0; font-size:13px; color:var(--ink2); max-width:720px}
.namestable td.code{width:1%; white-space:nowrap; font-size:13px; font-weight:600}
.namestable .seen{font-size:12.5px; color:var(--ink2)}
.namestable .num{text-align:right; white-space:nowrap; font-size:12.5px; color:var(--ink2)}
.namestable tr.isnewrow td{background:var(--flag-soft)}
.namestable .dayrow .gcount{margin-left:8px; font-weight:500; color:var(--ink3)}
.nameform{display:flex; gap:6px; align-items:center}
.nameform input{width:200px; min-width:120px; padding:5px 8px; font-size:13.5px}

/* ================= kiosk: SCAN first, the barcode scanner ================= */
:root{ --l-scan:#3B4A5C }
.l-scan{background:var(--l-scan)}
/* SCAN: the long light button under IN and OUT */
.kbtn.scan{grid-column:1 / -1; background:#F3F6F8; color:#14202A; padding:14px 10px}
.kbtn.scan span{font-size:24px; font-weight:700; letter-spacing:.06em}
.kbtn.scan small{opacity:.7}
/* IN or OUT? after a scan */
.kask{text-align:center; display:grid; gap:4px; margin:6px 0 18px}
.kaskname{font-size:15px; color:var(--head-ink); opacity:.9}
.kasklast{font-size:13.5px; color:var(--head-dim)}
.kaskq{font-family:var(--font-head); font-size:30px; font-weight:700; margin-top:10px}
/* a key's letter on a button, on a PC kiosk */
.kkey{display:inline-block; margin-left:8px; min-width:18px; padding:0 5px; border-radius:4px; font:600 11px/17px var(--font-mono);
  border:1px solid currentColor; opacity:.75; vertical-align:1px}
/* how this kiosk reads cards */
.kreader{border:0; border-radius:20px; padding:3px 10px; font:inherit; font-size:12px; background:rgba(255,255,255,.08);
  color:var(--head-dim); cursor:pointer}
.kreader:hover{color:var(--head-ink)}
/* the scanner's scan screen: no camera, just the words */
.viewfinder.byscanner{background:rgba(255,255,255,.06)}
.viewfinder.byscanner .vf-text strong{font-size:22px}
/* when another window is in front, a scan would go there: say so */
.kaway{display:none}
body.away .kaway{display:grid; place-content:center; gap:8px; text-align:center; position:fixed; inset:0; z-index:4;
  background:rgba(8,12,20,.82); color:#fff; padding:24px; cursor:pointer}
body.away .kaway strong{font-family:var(--font-head); font-size:32px}
body.away .kaway span{font-size:15px; opacity:.85}

/* ================= HR: signing in, and Settings ================= */
.signin{max-width:380px; margin:60px auto; padding:24px; display:grid; gap:12px}
.signin h2{margin:0}
.signin p{margin:0; color:var(--ink2); font-size:14px}
.signin input{font-size:16px; padding:9px 11px}
.signin .err:empty{display:none}
.signin .err{color:var(--flag); font-size:13.5px; font-weight:600}
.settings{padding:4px 0}
.setsec{padding:14px 16px; border-bottom:1px solid var(--rule); display:grid; gap:8px}
.setsec:last-child{border-bottom:0}
.setsec h3{margin:0; font-size:15px}
.setsec p{margin:0; font-size:13.5px; color:var(--ink2); max-width:720px}
.branchlist{display:grid; gap:6px}
.branchform{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.branchform input[type=text]{width:240px; max-width:100%; padding:5px 8px; font-size:13.5px}
.branchform input[type=color]{width:34px; height:30px; padding:1px; border-radius:6px}

/* ================= 0.10.0: kiosk set-up, devices, admin cards ================= */
.ksetup{margin-top:18px}
.ksetuptitle{font-family:var(--font-head); font-size:22px}
.kreport select{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:var(--head-ink); font-size:15px; padding:10px 12px;
  border-radius:8px}
.kreport select option{color:#111}
.cardsignin{margin-bottom:0}
.cardsignin + .signin{margin-top:14px}
.hrcam{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#000}
.hrcam .kvideo{opacity:1}
.hrcam[hidden]{display:none}
.linkform{display:flex; gap:6px; align-items:center}
.linkform input{flex:1; min-width:0; font-family:var(--font-mono); font-size:12.5px; padding:6px 8px}
.devlist{display:grid; gap:6px}
.devrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 10px; border:1px solid var(--rule); border-radius:8px}
.devrow.off{background:var(--sunken); opacity:.8}
.devwho{display:grid; gap:1px; margin-right:auto; min-width:0}
.devwho .sub{font-size:12px; color:var(--ink2)}
.setsec .dim{color:var(--ink3)}
.namestable .switch{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer}
.devrow .switch{display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}