/* One stylesheet for every HomeCam screen. field_setup/build_offline.py inlines this same file. */
:root{
  --bg:#101113;--panel:#191b1e;--raised:#24272b;--line:#373b41;--line-hi:#5a5f67;
  --text:#e8e9ea;--dim:#9ca1a8;--ok:#3ecf6b;--warn:#f2b01e;--bad:#ff4a3d;--ink:#101113;
  --sans:"Segoe UI","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,D2Coding,Menlo,monospace;
  --ctl:40px;--gap:8px;color-scheme:dark
}
@media (max-width:719px),(pointer:coarse){:root{--ctl:48px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 var(--sans);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1,h2,p,dl,dd{margin:0;font-size:inherit;font-weight:inherit}

/* Top bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap);
  min-height:44px;padding:4px var(--gap);background:var(--panel);border-bottom:2px solid var(--line-hi)}
.app-title{display:flex;align-items:baseline;gap:8px;font-weight:700;letter-spacing:.08em}
.app-title span{font-family:var(--mono);letter-spacing:0;color:var(--dim)}
.tools{display:flex;gap:4px}
.tools button,.tools .btn{padding:0 10px;font-size:13px}
.back{display:none}

/* Operator console */
.console{grid-template-columns:272px minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr);align-items:start}
.explorer{grid-column:1;grid-row:1/3;position:sticky;top:var(--gap)}
.inspector{grid-column:3;grid-row:1/3}
.jobs{grid-column:2;grid-row:2}
.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.filters button{border:0;font-size:12px}
.filters button[aria-pressed=true]{background:var(--text);color:var(--ink)}
.cams{max-height:calc(100vh - 150px);overflow-y:auto}
.cam{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 8px;
  background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.cam[aria-current=true]{background:var(--raised);box-shadow:inset 3px 0 0 var(--text)}
.cam:active:not(:disabled) .tone,.cam:active:not(:disabled) small,.cam:active:not(:disabled) i{color:var(--ink)}
.cam b{font:700 22px var(--mono)}
.cam small{display:block;font-size:11px;color:var(--dim)}
.cam .tone{font-size:13px;font-weight:600}
.cam i{font:600 13px var(--mono);color:var(--dim);font-style:normal}
.monitor{grid-column:2;grid-row:1;display:grid;gap:var(--gap);min-width:0;align-content:start}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.steps div{padding:4px 8px;background:var(--panel);font-size:13px;font-weight:600;white-space:nowrap}
.steps small{display:block;overflow:hidden;font-size:11px;font-weight:400;color:var(--dim);text-overflow:ellipsis}
.said{display:flex;gap:8px;align-items:baseline;padding:6px 8px;background:var(--panel);border:1px solid var(--line)}
.said span{flex:none;font-size:11px;color:var(--dim)}
.said em{margin-left:auto;flex:none;font:600 12px var(--mono);color:var(--dim);font-style:normal}
.head-num{font:700 28px var(--mono);line-height:1}
.strip.strip-4{grid-template-columns:repeat(4,minmax(0,1fr));border:0}
.status-line{padding:4px 8px}
@media (max-width:1100px){
  .console{grid-template-columns:240px minmax(0,1fr);grid-template-rows:none}
  .explorer{grid-row:1/4}.inspector{grid-column:2;grid-row:2}.jobs{grid-column:2;grid-row:3}
}
@media (max-width:719px){
  .console{grid-template-columns:minmax(0,1fr)}
  .explorer{grid-row:auto;position:static}
  .explorer,.monitor,.inspector,.jobs{grid-column:auto;grid-row:auto}
  .cams{max-height:none}
  body[data-view=list] .monitor,body[data-view=list] .inspector,body[data-view=list] .jobs{display:none}
  body[data-view=detail] .explorer{display:none}
  body[data-view=detail] .back{display:inline-flex}
  .steps div{padding:4px;font-size:12px}
}

/* Layout */
main{display:grid;gap:var(--gap);max-width:1600px;margin:0 auto;padding:var(--gap)}
main.narrow,.narrow{width:100%;max-width:440px;margin:0 auto}
#dashboard{display:grid;gap:var(--gap);min-width:0}
.desk{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);align-items:start}
.rack{display:grid;gap:var(--gap);min-width:0}
@media (max-width:719px){.desk{grid-template-columns:minmax(0,1fr)}}

/* Panels */
.panel{min-width:0;background:var(--panel);border:1px solid var(--line)}
.panel-h{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;
  background:var(--raised);border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.04em}
.panel-h h2{margin-right:auto}
.panel-h button{margin-right:-8px;border-width:0 0 0 1px;border-color:var(--line)}
.panel-note{color:var(--dim);font-weight:400}
.panel-b{display:grid;gap:8px;padding:8px}
details.panel>summary{display:flex;align-items:center;gap:8px;min-height:var(--ctl);padding:0 8px;
  background:var(--raised);font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;list-style:none;user-select:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:"\25B8";color:var(--dim)}
details.panel[open]>summary::before{content:"\25BE"}

/* Controls */
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:var(--ctl);padding:0 12px;
  background:var(--raised);color:var(--text);border:1px solid var(--line-hi);border-radius:0;
  font:600 14px var(--sans);text-decoration:none;cursor:pointer;touch-action:manipulation;user-select:none}
button:hover:not(:disabled),.btn:hover{border-color:var(--text)}
button:active:not(:disabled),.btn:active{background:var(--text);color:var(--ink)}
button:disabled{opacity:.38;cursor:not-allowed}
button.primary{background:var(--text);color:var(--ink);border-color:var(--text)}
button.primary:active:not(:disabled){background:var(--dim);border-color:var(--dim)}
button.danger{background:var(--bad);color:var(--ink);border-color:var(--bad)}
button.danger:active:not(:disabled){background:var(--text);border-color:var(--text)}
button[data-armed]{background:var(--warn);color:var(--ink);border-color:var(--warn)}
:focus-visible{outline:2px solid var(--warn);outline-offset:1px}
input[type=text],input[type=password],input[type=number]{width:100%;min-height:var(--ctl);padding:0 8px;appearance:none;
  background:var(--bg);color:var(--text);border:1px solid var(--line-hi);border-radius:0;font:16px var(--mono)}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}
.field{display:block;margin-bottom:2px;font-size:12px;font-weight:600;color:var(--dim)}
.check{display:flex;align-items:center;gap:8px;min-height:var(--ctl);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--text)}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px}
@media (max-width:359px){.split{grid-template-columns:minmax(0,1fr)}}
.message{font-size:13px;color:var(--dim)}
.message:empty{display:none}
.message.error{color:var(--bad)}
.notice{font-size:13px;color:var(--dim)}

/* Status */
.strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{min-width:0;padding:4px 8px;background:var(--panel)}
.cell.span2{grid-column:span 2}
.cell dt{font-size:11px;color:var(--dim)}
.cell dd{overflow:hidden;font:600 16px var(--mono);white-space:nowrap;text-overflow:ellipsis}
.cell dd.tone{font-family:var(--sans)}
@media (max-width:719px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}.cell{padding:4px 6px}}
.tone::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;background:currentColor}
[data-tone=ok]{color:var(--ok)}
[data-tone=warn]{color:var(--warn)}
[data-tone=bad]{color:var(--bad)}
.tone[data-tone=idle]{color:var(--dim)}
.alarm{display:flex;align-items:center;gap:8px;min-height:var(--ctl);padding-left:8px;background:var(--bad);color:var(--ink);font-weight:700}
.alarm[data-tone=warn]{background:var(--warn)}
.alarm #alarm-time{margin-right:auto;font:600 13px var(--mono)}
.alarm button{background:transparent;color:inherit;border-width:0 0 0 2px;border-color:currentColor}

/* Preview and pan-tilt */
.preview-wrap{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:#000;color:var(--dim);font-size:13px}
.preview-wrap>button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.preview-wrap img{display:block;width:100%;height:100%;object-fit:contain}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;max-width:252px;margin:0 auto}
button.wide{width:100%;margin-bottom:8px}
.pad button{aspect-ratio:1;min-height:0;padding:0;font-size:24px}
.pad .up{grid-area:1/2}.pad .left{grid-area:2/1}.pad .stop{grid-area:2/2}.pad .right{grid-area:2/3}.pad .down{grid-area:3/2}
@media (max-width:719px){.pad{max-width:300px}}

/* Tables and QR */
.kv>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding:4px 8px;border-top:1px solid var(--line)}
.kv dt{color:var(--dim)}
.kv dd{overflow-wrap:anywhere;font-family:var(--mono)}
.log:empty{display:none}
.log>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:4px 8px;border-top:1px solid var(--line);font-size:13px}
.log span{color:var(--dim);font-family:var(--mono)}
.qr-wrap{background:#fff}
.qr-wrap canvas,.qr-wrap svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;image-rendering:pixelated}
#phone-handoff-qr:empty{display:none}
#phone-handoff-qr.qr-wrap{max-width:260px;margin:0 auto}