/* Layout: one shared day axis; production lane above, people lane below; details open in a side drawer (bottom sheet on phones). */
:root{
  --bg:#f3f6f9; --surface:#ffffff; --surface-2:#eaf0f5; --fg:#15212c; --muted:#5d6b78; --line:#d6dee6; --line-strong:#b9c5d0;
  --accent:#2653b8; --accent-soft:#e2ecf9; --accent-ink:#061a54; --navy:#061a54; --sky:#8fceef; --logo:#061a54;
  --ok:#2b8a5a; --ok-soft:#dcf1e5; --warn:#c7820a; --warn-soft:#fbeed2; --crit:#c23b2f; --crit-soft:#f8dcd9;
  --W:#1f8f84; --C:#7652b8; --F:#1f6fc2; --P:#d4602a; --M:#8a6a3c; --MT:#5f87a8; --R:#6f7f8e; --T:#5f6f7e; --S:#2b8a5a; --K:#7652b8;
  --lane-prod:#dbeaf7; --lane-prod-ink:#0a4e82; --lane-staff:#dff3ee; --lane-staff-ink:#0f5f52;
  --lzc:#f4b24a; --lzc-ink:#5a3a00; --kowa:#9ec63b; --kowa-ink:#2d3f00; --maint:#4d8fd6; --maint-soft:#d9e8f8; --stop:#8d99a6;
  --prod0-bg:#fbe7b5; --prod0-ink:#5a3a00; --prod0-ln:#e0a52a;
  --prod1-bg:#e1f0bf; --prod1-ink:#2d3f00; --prod1-ln:#8db33a;
  --prod2-bg:#f8d7df; --prod2-ink:#6b1230; --prod2-ln:#d9647e;
  --prod3-bg:#d3e6f8; --prod3-ink:#0a3a66; --prod3-ln:#4c8ed6;
  --prod4-bg:#e6dcf6; --prod4-ink:#3b2466; --prod4-ln:#9b7fd0;
  --prod5-bg:#d2f0e4; --prod5-ink:#0b4a37; --prod5-ln:#3fb08a;
  --prod6-bg:#fbdfcc; --prod6-ink:#6b2a00; --prod6-ln:#e88a4f;
  --prod7-bg:#dde4eb; --prod7-ink:#1f2f3f; --prod7-ln:#7a8fa5;
  --sans:"IBM Plex Sans","Hiragino Sans","Noto Sans JP",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --shadow:0 8px 24px rgba(21,33,44,.12);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f161d; --surface:#17212b; --surface-2:#1e2a36; --fg:#e8eef3; --muted:#9aa8b5; --line:#2a3744; --line-strong:#3a4857;
  --accent:#6ea6ea; --accent-soft:#1b3650; --accent-ink:#bcdcf6; --navy:#061a54; --sky:#8fceef; --logo:#e8eef3;
  --ok:#5ec88f; --ok-soft:#163626; --warn:#e8a93a; --warn-soft:#3b2d10; --crit:#ef6b5e; --crit-soft:#3f1d1a;
  --W:#3fb3a6; --C:#a186dc; --F:#5ea0e8; --P:#e9875a; --M:#b08c5a; --MT:#7fa6c6; --R:#6f7d8a; --T:#6f7d8a; --S:#5ec88f; --K:#a186dc;
  --prod0-bg:#4a3a10; --prod0-ink:#ffe9b0; --prod0-ln:#e0a52a;
  --prod1-bg:#33430f; --prod1-ink:#e4f3c0; --prod1-ln:#8db33a;
  --prod2-bg:#4a1d2a; --prod2-ink:#ffd6df; --prod2-ln:#d9647e;
  --prod3-bg:#17304c; --prod3-ink:#d3e6f8; --prod3-ln:#4c8ed6;
  --prod4-bg:#312549; --prod4-ink:#e6dcf6; --prod4-ln:#9b7fd0;
  --prod5-bg:#153d31; --prod5-ink:#d2f0e4; --prod5-ln:#3fb08a;
  --prod6-bg:#4a2814; --prod6-ink:#fbdfcc; --prod6-ln:#e88a4f;
  --prod7-bg:#2a3744; --prod7-ink:#dde4eb; --prod7-ln:#7a8fa5;
  --lane-prod:#1b3650; --lane-prod-ink:#bcdcf6; --lane-staff:#15372f; --lane-staff-ink:#9fe3cf;
  --lzc:#c8902e; --lzc-ink:#fff2d6; --kowa:#7da32a; --kowa-ink:#f1ffd0; --maint:#3f78b8; --maint-soft:#1b2e44; --stop:#5a6672;
  --shadow:0 8px 24px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f161d; --surface:#17212b; --surface-2:#1e2a36; --fg:#e8eef3; --muted:#9aa8b5; --line:#2a3744; --line-strong:#3a4857;
  --accent:#6ea6ea; --accent-soft:#1b3650; --accent-ink:#bcdcf6; --navy:#061a54; --sky:#8fceef; --logo:#e8eef3;
  --ok:#5ec88f; --ok-soft:#163626; --warn:#e8a93a; --warn-soft:#3b2d10; --crit:#ef6b5e; --crit-soft:#3f1d1a;
  --W:#3fb3a6; --C:#a186dc; --F:#5ea0e8; --P:#e9875a; --M:#b08c5a; --MT:#7fa6c6; --R:#6f7d8a; --T:#6f7d8a; --S:#5ec88f; --K:#a186dc;
  --prod0-bg:#4a3a10; --prod0-ink:#ffe9b0; --prod0-ln:#e0a52a;
  --prod1-bg:#33430f; --prod1-ink:#e4f3c0; --prod1-ln:#8db33a;
  --prod2-bg:#4a1d2a; --prod2-ink:#ffd6df; --prod2-ln:#d9647e;
  --prod3-bg:#17304c; --prod3-ink:#d3e6f8; --prod3-ln:#4c8ed6;
  --prod4-bg:#312549; --prod4-ink:#e6dcf6; --prod4-ln:#9b7fd0;
  --prod5-bg:#153d31; --prod5-ink:#d2f0e4; --prod5-ln:#3fb08a;
  --prod6-bg:#4a2814; --prod6-ink:#fbdfcc; --prod6-ln:#e88a4f;
  --prod7-bg:#2a3744; --prod7-ink:#dde4eb; --prod7-ln:#7a8fa5;
  --lane-prod:#1b3650; --lane-prod-ink:#bcdcf6; --lane-staff:#15372f; --lane-staff-ink:#9fe3cf;
  --lzc:#c8902e; --lzc-ink:#fff2d6; --kowa:#7da32a; --kowa-ink:#f1ffd0; --maint:#3f78b8; --maint-soft:#1b2e44; --stop:#5a6672;
  --shadow:0 8px 24px rgba(0,0,0,.45); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none !important}
:root[data-size="l"] .app{zoom:1.15}
:root[data-size="xl"] .app{zoom:1.3}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.45}
button{font:inherit;color:inherit}
.app{min-height:100%;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:20px;width:auto;color:var(--logo);display:block}
.brand .app-name{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-left:1px solid var(--line-strong);padding-left:12px}
.top .center{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg-ctl.big button{padding:7px 16px;font-size:14px;font-weight:500}
.btn.icon{width:36px;padding:6px 0;text-align:center;font-size:18px;line-height:1}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px}
.tabs .menu{left:0;right:auto}
.mi{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--fg)}
.mi:hover:not(.static):not([disabled]){background:var(--accent-soft)}
.mi[disabled]{opacity:.45;cursor:not-allowed}
.mi.static{cursor:default;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line);border-radius:0;padding-bottom:10px;margin-bottom:4px}
.mi.static .seg-ctl button{padding:5px 10px}
.month-nav{display:flex;align-items:center;gap:6px;font-weight:500}
.month-nav button{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:28px;height:28px;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--surface-2)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.crit{background:var(--crit-soft);color:var(--crit);border-color:transparent}
.pill.draft{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.spacer{flex:1}
.divider{width:1px;height:22px;background:var(--line-strong);margin:0 4px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.save-hot{background:var(--warn);border-color:var(--warn);color:#fff}
.grid tr.lane td{background:var(--lane-prod);color:var(--lane-prod-ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;height:26px;border-top:3px solid var(--lane-prod-ink)}
.grid tr.lane td.lbl{background:var(--lane-prod)}
.grid tr.lane.staff td{background:var(--lane-staff);color:var(--lane-staff-ink);border-top-color:var(--lane-staff-ink)}
.grid tr.lane.staff td.lbl{background:var(--lane-staff)}
.grid tr.gap td{height:18px;background:var(--bg);border-right:0;border-bottom:0}
.grid tr.gap td.lbl{background:var(--bg)}
.grid tr.group td.lbl{border-left:4px solid var(--line-strong);padding-left:6px}
.grid tr.bld-end td{border-bottom:2px solid var(--line-strong)}
td.cell.pending span.code{outline:2px dashed var(--accent);outline-offset:1px}
.grid tr.sum td.over{color:var(--accent);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chip-p{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2px 4px 2px 8px;color:#fff;font-size:12px}
.chip-p button{border:0;background:rgba(255,255,255,.25);color:#fff;border-radius:4px;width:18px;height:18px;cursor:pointer;font-size:12px;line-height:1}
.chip-add{border:1px dashed var(--line-strong);background:transparent;border-radius:6px;padding:2px 8px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip-add:hover{border-color:var(--accent);color:var(--accent)}
.count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:4px}
.count.short{color:var(--crit)}.count.over{color:var(--accent)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 12px;cursor:pointer;font-weight:500}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:3px 9px;font-size:12px;border-radius:6px}
.btn:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{font:inherit;border:1px solid var(--line-strong);border-radius:8px;padding:5px 8px;background:var(--surface);color:var(--fg)}
.sub{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.tabs{display:flex;gap:2px}
.tab{border:0;background:transparent;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:500}
.tab[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.tab{font-size:14px}
.legend-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.lg{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px}
.lg h5{margin:0 0 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lg div{display:flex;align-items:center;gap:6px;padding:2px 0;color:var(--fg)}
.lg .sw{display:inline-block;width:22px;height:14px;border-radius:3px;flex:none;font-family:var(--mono);font-size:9px;color:#fff;text-align:center;line-height:14px}
.lg .sw.dark{color:var(--lzc-ink)}
.main{flex:1;display:flex;min-width:0}
.content{flex:1;min-width:0;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* grid */
.grid-wrap{overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table.grid{border-collapse:separate;border-spacing:0;font-size:12px;table-layout:fixed}
.grid tr.group{cursor:pointer;user-select:none}
.grid tr.group:hover td.lbl{color:var(--accent)}
.caret{display:inline-block;width:14px;color:var(--muted)}
.wk-lbl{display:block;font-family:var(--sans);font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.week td.cell{height:38px}
.grid th,.grid td{overflow:hidden;text-overflow:ellipsis}
.grid th,.grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;height:26px;white-space:nowrap}
.grid th.lbl,.grid td.lbl{position:sticky;left:0;z-index:3;background:var(--surface);text-align:left;padding:0 10px;min-width:168px;font-weight:500}
.grid thead th{position:sticky;top:0;z-index:4;background:var(--surface)}
.grid thead th.lbl{z-index:5}
.grid thead tr.dots th{top:40px;height:16px}
.grid th.day{min-width:38px;width:38px;text-align:center;font-weight:500;cursor:pointer;height:40px;line-height:1.1;padding-top:4px}
.grid th.day small{display:block;color:var(--muted);font-weight:400;font-size:10px}
.grid th.day:hover{background:var(--accent-soft)}
.grid .we{background:var(--surface-2)}
.grid .hol{background:var(--surface-2)}
.grid th.day.hol small,.grid th.day.we small{color:var(--crit)}
.grid .stop{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--stop) 28%,transparent) 4px 6px)}
.grid tr.group td{background:var(--surface-2);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;height:22px}
.grid tr.group td.lbl{background:var(--surface-2)}
.grid tr.thin td{height:20px}
.grid tr.thin td.lbl{font-size:11px;color:var(--muted);font-weight:400}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.crit{background:var(--crit)}
td.bar{padding:3px 2px}
.bar-in{height:20px;border-radius:5px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-family:var(--mono);font-size:11px;font-weight:500;cursor:pointer;overflow:hidden;white-space:nowrap}
td.bar[colspan="1"] .bar-in,td.bar:not([colspan]) .bar-in{font-size:9px;padding:0 2px;letter-spacing:-.02em}
.bar-in.other{background:var(--surface-2);color:var(--fg);border:1px solid var(--line-strong)}
.bar-in.prod,.sw.prod{background:var(--pbg);color:var(--pink);border-left:4px solid var(--pln);box-shadow:inset 0 0 0 1px var(--pln)}
.prod-0{--pbg:var(--prod0-bg);--pink:var(--prod0-ink);--pln:var(--prod0-ln)}.prod-1{--pbg:var(--prod1-bg);--pink:var(--prod1-ink);--pln:var(--prod1-ln)}.prod-2{--pbg:var(--prod2-bg);--pink:var(--prod2-ink);--pln:var(--prod2-ln)}.prod-3{--pbg:var(--prod3-bg);--pink:var(--prod3-ink);--pln:var(--prod3-ln)}.prod-4{--pbg:var(--prod4-bg);--pink:var(--prod4-ink);--pln:var(--prod4-ln)}.prod-5{--pbg:var(--prod5-bg);--pink:var(--prod5-ink);--pln:var(--prod5-ln)}.prod-6{--pbg:var(--prod6-bg);--pink:var(--prod6-ink);--pln:var(--prod6-ln)}.prod-7{--pbg:var(--prod7-bg);--pink:var(--prod7-ink);--pln:var(--prod7-ln)}
.bar-in.lzc{background:var(--lzc);color:var(--lzc-ink)}
.bar-in.kowa{background:var(--kowa);color:var(--kowa-ink)}
.bar-in.api{background:var(--M);color:#fff}
.bar-in.maint{background:var(--maint-soft);color:var(--accent-ink);border:1px dashed var(--maint);font-family:var(--sans);font-weight:500}
.bar-in .tick{font-size:9px;opacity:.75}
.bar-in.hl{outline:2px solid var(--fg);outline-offset:1px}
td.cell{text-align:center;cursor:pointer;position:relative;font-family:var(--mono);font-weight:500;font-size:11px}
td.cell .code{display:inline-block;min-width:26px;padding:2px 0;border-radius:4px;color:#fff;line-height:1.2}
td.cell .W{background:var(--W)}td.cell .C{background:var(--C)}td.cell .CF{background:var(--C);opacity:.75}td.cell .F{background:var(--F)}td.cell .P{background:var(--P)}
td.cell .M{background:var(--M)}td.cell .MT{background:var(--MT)}td.cell .R{background:transparent;color:var(--R);border:1px dashed var(--R)}td.cell .T{background:transparent;color:var(--T);border:1px solid var(--line-strong)}
td.cell .K{background:var(--K);opacity:.8}
td.cell .S{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
td.cell .ST{background:transparent;color:var(--warn);border:1px dashed var(--warn)}
td.cell .L,td.cell .H,td.cell .X{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
td.cell .X{color:var(--crit);border-color:var(--crit)}
td.cell .owed::after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;background:var(--warn)}
td.cell .bad{outline:2px solid var(--crit)}
td.cell.changed::before{content:"";position:absolute;left:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
td.cell:hover{background:var(--accent-soft)}
td.cell.sat span.code{box-shadow:0 0 0 2px var(--warn) inset}
td.cell.sat.placed span.code{box-shadow:0 0 0 2px var(--ok) inset}
.grid tr.sum td{font-family:var(--mono);font-size:10px;text-align:center;color:var(--muted)}
.grid tr.sum td.lbl{font-family:var(--sans);font-size:12px}
.grid tr.sum td.short{color:var(--crit);font-weight:600}
.grid tr.sum td.ot{color:var(--warn);font-weight:600}
.grid tr.sum td.clickable{cursor:pointer}
.grid tr.sum td.clickable:hover{background:var(--accent-soft)}
.name-btn{background:none;border:0;padding:0;cursor:pointer;text-align:left;font-weight:500}
.name-btn:hover{color:var(--accent)}
.name-btn small{color:var(--muted);font-weight:400;margin-left:4px}
/* drawer */
.drawer{width:380px;max-width:100%;border-left:1px solid var(--line);background:var(--surface);padding:16px;overflow:auto;position:fixed;right:0;top:var(--hdr-h,56px);bottom:0;z-index:30;box-shadow:var(--shadow)}
.app.drawer-open .content{padding-right:396px}
.drawer h2{font-size:16px;margin:0 0 4px;font-weight:600;text-wrap:balance}
.drawer h3{font-size:12px;margin:16px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.drawer .close{float:right;border:0;background:var(--surface-2);border-radius:6px;width:28px;height:28px;cursor:pointer}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--mono)}
.chain{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}
.chain .step{border:1px solid var(--line-strong);border-radius:6px;padding:3px 8px;font-family:var(--mono);cursor:pointer;background:var(--surface-2)}
.chain .step.hl{background:var(--accent-soft);border-color:var(--accent)}
.chain .arr{color:var(--muted)}
.issue{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:8px;font-size:13px;margin-bottom:6px}
.issue.warn{background:var(--warn-soft)}.issue.crit{background:var(--crit-soft)}.issue.ok{background:var(--ok-soft)}
.issue b{font-weight:600}
.timeline{display:grid;grid-template-columns:70px 1fr;gap:6px 8px;font-size:12px}
.timeline .lane{height:22px;border-radius:5px;position:relative;background:var(--surface-2)}
.timeline .seg{position:absolute;top:0;bottom:0;border-radius:5px;color:#fff;font-size:11px;padding:0 6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.timeline .seg.gap{background:transparent;border:1px dashed var(--crit);color:var(--crit)}
.timeline .seg.brk{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-strong) 3px 5px);color:var(--muted)}
.timeline .axis{grid-column:2;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.row .tag{margin-left:auto;font-size:11px;border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.row .tag.ok{background:var(--ok-soft);color:var(--ok)}.row .tag.warn{background:var(--warn-soft);color:var(--warn)}.row .tag.crit{background:var(--crit-soft);color:var(--crit)}
.row.pick{cursor:pointer}.row.pick:hover{border-color:var(--accent)}
.qual{display:inline-block;font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;color:#fff;margin-right:2px}
.q-W{background:var(--W)}.q-C{background:var(--C)}.q-F{background:var(--F)}.q-P{background:var(--P)}.q-M{background:var(--M)}
.seg-ctl{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg-ctl button{border:0;background:var(--surface);padding:5px 10px;cursor:pointer;font-size:12px}
.seg-ctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-family:var(--mono);font-size:10px}
.mini div{height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--surface-2)}
.mini .off{color:var(--muted)}
/* tables */
table.tbl{border-collapse:collapse;width:100%;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2)}
.tbl td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto;border-radius:10px}
.meter{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--surface-2);vertical-align:middle;margin-right:6px;position:relative;overflow:hidden}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);border-radius:4px}
.meter i.low{background:var(--warn)}
.meter::after{content:"";position:absolute;left:70%;top:0;bottom:0;width:1px;background:var(--crit)}
.section-title{font-size:15px;font-weight:600;margin:0 0 10px}
.note{color:var(--muted);font-size:13px;max-width:70ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.card h4{margin:0 0 8px;font-size:13px;font-weight:600}
/* phone */
.phone-stage{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.phone{width:360px;max-width:100%;border:10px solid #1b232b;border-radius:34px;background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.phone .ph-top{background:var(--surface);padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.phone .ph-top .who{font-weight:600}
.phone .ph-top .who small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.ph-tabs{display:flex;gap:4px;padding:8px 12px;background:var(--surface)}
.ph-tabs button{flex:1;border:0;background:var(--surface-2);border-radius:8px;padding:6px 0;font-size:12px;cursor:pointer}
.ph-tabs button[aria-selected="true"]{background:var(--accent);color:#fff}
.ph-body{padding:12px;display:flex;flex-direction:column;gap:8px;min-height:420px;max-height:520px;overflow:auto}
.daycard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:44px 1fr auto;gap:4px 10px;align-items:center}
.daycard .d{font-family:var(--mono);font-size:12px;line-height:1.1;color:var(--muted)}
.daycard .d b{display:block;font-size:17px;color:var(--fg)}
.daycard .what{font-weight:600}
.daycard .meta{font-size:12px;color:var(--muted);grid-column:2}
.daycard .chip{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;color:#fff;grid-row:1/3;align-self:start}
.daycard.off{opacity:.65}
.daycard .chg{font-size:10px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle;font-weight:500}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);z-index:50;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
.hint{font-size:12px;color:var(--muted)}
@media (max-width:900px){
  .main{flex-direction:column}
  .drawer{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:70vh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:var(--shadow);z-index:40;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .app.drawer-open .content{padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---- app additions ---- */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 28px 24px;max-width:420px;width:100%;box-shadow:var(--shadow)}
.login h1{font-size:20px;margin:0 0 4px;font-weight:600}
.login p{color:var(--muted);margin:0 0 18px}
.login .btn{width:100%;justify-content:center;display:flex;gap:10px;align-items:center;padding:10px 14px;font-size:15px}
.login .ms{background:#2f2f2f;color:#fff;border-color:#2f2f2f}
.login input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--fg)}
.login .or{text-align:center;color:var(--muted);font-size:12px;margin:14px 0}
.muted{color:var(--muted)}
.who{font-size:12px;color:var(--muted)}
.who b{color:var(--fg);font-weight:500}
.tbl input,.tbl select{font:inherit;padding:4px 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--fg)}
.tbl .q{display:inline-flex;gap:3px}
.tbl .q label{font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:2px}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:12px}
.grid th.day .note{font-size:9px;color:var(--warn)}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100;color:var(--muted)}
.badge-role{font-size:11px;border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--muted)}
.drop{border:2px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--accent);color:var(--accent)}
.kv dd.wrap{white-space:normal;font-family:var(--sans)}

.phone.real{border:0;border-radius:0;box-shadow:none;width:100%;max-width:520px;background:transparent}
.phone.real .ph-body{max-height:none;overflow:visible}
.phone.real .ph-top{border-radius:12px 12px 0 0}