:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f9f9f7;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --good:#0ca30c; --crit:#d03b3b; --good-text:#006300; --amber:#8a6100;
}
*{box-sizing:border-box; margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--page); color:var(--ink); font-size:14px; line-height:1.6}
.hidden{display:none!important}
.mini{font-size:11px; color:var(--muted)}
.right{text-align:right; margin-left:auto}
.grow{flex:1}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}
.linkbtn{border:none; background:none; color:var(--s1); cursor:pointer; font-size:12px; padding:2px 4px; text-decoration:underline}
.linkbtn.muted{color:var(--muted)}

/* login */
#login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:12px}
.login-card{background:var(--surface-1); border:1px solid var(--ring); border-radius:12px; padding:36px 40px; width:min(360px,calc(100vw - 24px)); box-shadow:0 4px 24px rgba(0,0,0,.06)}
.login-card h1{font-size:18px; margin-bottom:4px}
.login-card p{color:var(--muted); font-size:12px; margin-bottom:20px}
.login-card label{display:block; font-size:12px; color:var(--ink-2); margin:12px 0 4px}
.login-card input{width:100%; padding:9px 10px; border:1px solid var(--axis); border-radius:6px; font-size:14px; background:#fff}
.pwwrap{position:relative}
.pwtoggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--s1); font-size:12px; cursor:pointer; padding:4px 6px}
.caps{font-size:11px; color:var(--amber); margin-top:6px}
.btn{display:block; width:100%; margin-top:20px; padding:10px; background:var(--s1); color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer}
.btn:hover{filter:brightness(.93)}
.btn:disabled{opacity:.6; cursor:default}
.btn.inline{display:inline-block; width:auto; padding:8px 20px; margin-top:0}
.err{color:var(--crit); font-size:12px; margin-top:10px; min-height:18px}

/* frame */
header.app{background:var(--surface-1); border-bottom:1px solid var(--grid); padding:10px 24px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:5; flex-wrap:wrap}
header.app .logo{font-weight:700; font-size:15px}
header.app .who{margin-left:auto; font-size:12px; color:var(--ink-2)}
header.app .who b{color:var(--ink)}
nav.tabs{display:flex; gap:2px}
nav.tabs button{border:none; background:none; padding:8px 14px; font-size:13px; color:var(--ink-2); cursor:pointer; border-radius:6px}
nav.tabs button.on{background:#eef3fb; color:var(--s1); font-weight:600}
main{max-width:1180px; margin:0 auto; padding:20px 24px 60px}
.weekbar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap}
.weekbar select,.weekbar input,.weekbar button{padding:6px 10px; border:1px solid var(--axis); border-radius:6px; background:#fff; font-size:13px; cursor:pointer}
.weekbar button:disabled{opacity:.45; cursor:default}
.weekbar button.accent{border-color:var(--s1); color:var(--s1); font-weight:600}
.tag{font-size:12px; color:var(--muted)}
.timer{font-size:13px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.timer.warn{color:var(--amber)}
.timer.over{color:var(--crit)}

/* tiles / cards */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:20px}
.tile{background:var(--surface-1); border:1px solid var(--ring); border-radius:10px; padding:14px 16px}
.tile .k{font-size:12px; color:var(--ink-2)}
.tile .v{font-size:26px; font-weight:700; margin-top:2px}
.tile .v small{font-size:15px; color:var(--muted); font-weight:400}
.tile .sub{font-size:11px; color:var(--muted); margin-top:2px}
.tile.alert{border-color:rgba(208,59,59,.45)}
.tile.alert .v{color:var(--crit)}
.tile.ok .v{color:var(--good-text)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:var(--surface-1); border:1px solid var(--ring); border-radius:10px; padding:16px 18px; margin-bottom:16px}
.card h2{font-size:14px; margin-bottom:2px}
.card .desc{font-size:12px; color:var(--muted); margin-bottom:12px}
.cardhead{display:flex; align-items:flex-start; gap:12px; justify-content:space-between; flex-wrap:wrap}
.legend{display:flex; gap:14px; font-size:11px; color:var(--ink-2); margin-top:8px; flex-wrap:wrap; align-items:center}
.legend span{display:inline-flex; align-items:center; gap:5px}
.sw{width:10px; height:10px; border-radius:3px; display:inline-block}
.sw1{background:var(--s1)} .sw2{background:var(--s2)} .sw3{background:var(--s3)} .swc{background:var(--crit)}
svg text{font-family:inherit}
.axis-t{font-size:10px; fill:var(--muted)}
.lbl{font-size:11px; fill:var(--ink-2)}
.val{font-size:11px; fill:var(--ink); font-weight:600}

/* board */
table.board{width:100%; border-collapse:collapse; font-size:12.5px}
table.board th{background:#f2f1ee; color:var(--ink-2); font-weight:600; text-align:left; padding:7px 9px; border-bottom:1px solid var(--grid); white-space:nowrap}
table.board td{padding:7px 9px; border-bottom:1px solid var(--grid); vertical-align:top}
tr.skip td{color:var(--muted); background:#f5f4f1}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:#f4f7fc}
#board td:nth-child(2),#board th:nth-child(2){position:sticky; left:0; background:var(--surface-1); z-index:1}
#board tr.skip td:nth-child(2){background:#f5f4f1}
#board th:nth-child(2){background:#f2f1ee}
.namebtn{border:none; background:none; padding:0; font:inherit; color:var(--ink); cursor:pointer; text-align:left}
.namebtn:hover{color:var(--s1); text-decoration:underline}
.b{display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; white-space:nowrap}
.b-ok{background:#e2f3e2; color:var(--good-text)}
.b-ng{background:#fbe3e3; color:var(--crit)}
.b-mid{background:#fdf1d6; color:var(--amber)}
.b-gray{background:#ecebe7; color:var(--ink-2)}
.b-flag{background:var(--crit); color:#fff}
.b-up{background:#eef3fb; color:var(--s1)}
.crit{color:var(--crit); font-weight:700}
.amberv{color:var(--amber); font-weight:700}
.delta{font-size:10px; margin-left:3px}
.delta.up{color:var(--good-text)} .delta.down{color:var(--crit)}

/* form */
.block{border-left:4px solid var(--axis); background:var(--surface-1); border-radius:0 10px 10px 0; border-top:1px solid var(--ring); border-right:1px solid var(--ring); border-bottom:1px solid var(--ring); padding:14px 18px; margin-bottom:14px}
.block.b1{border-left-color:var(--s1)} .block.b2{border-left-color:var(--s3)} .block.b4{border-left-color:var(--crit)}
.block.b5{border-left-color:#7030a0} .block.b6{border-left-color:#bf8f00} .block.b3{border-left-color:#1f4e79}
.block.err-focus{outline:2px solid var(--crit); outline-offset:2px}
.block.dim{opacity:.45}
.block h3{font-size:13.5px; margin-bottom:2px}
.who-hint{font-size:11px; color:#fff; border-radius:9px; padding:1px 8px; margin-left:8px; vertical-align:1px; background:var(--muted)}
.who-hint.h1{background:var(--muted)} .who-hint.h2{background:var(--s3)} .who-hint.h4{background:var(--crit)}
.who-hint.h5{background:#7030a0} .who-hint.h6{background:var(--amber)} .who-hint.h3{background:#1f4e79}
.q{font-size:12px; color:var(--ink-2); background:#f5f4f1; border-radius:6px; padding:6px 10px; margin:8px 0}
.block textarea,.block input[type=text],.block input[type=date],.block input[type=number]{width:100%; border:1px solid var(--axis); border-radius:6px; padding:7px 9px; font-size:13px; font-family:inherit; background:#fff}
.block textarea{min-height:52px; resize:vertical}
.block input:disabled,.block textarea:disabled{background:#f2f1ee; color:var(--muted)}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>div{flex:1; min-width:130px}
.row label,.flabel{font-size:11px; color:var(--muted); display:block; margin-bottom:2px; margin-top:8px}
.seg{display:inline-flex; border:1px solid var(--axis); border-radius:6px; overflow:hidden}
.seg button{border:none; background:#fff; padding:6px 16px; font-size:13px; cursor:pointer; color:var(--ink-2)}
.seg.small button{padding:4px 12px; font-size:12px}
.seg button.sel-ok{background:#e2f3e2; color:var(--good-text); font-weight:700}
.seg button.sel-ng{background:#fbe3e3; color:var(--crit); font-weight:700}
.seg button.sel-mid{background:#fdf1d6; color:var(--amber); font-weight:700}
.seg button:disabled{opacity:.5; cursor:default}
.prevbox{background:#eef3fb; border-radius:6px; padding:8px 10px; font-size:12.5px; margin:6px 0}
.prevbox b{font-size:11px; color:var(--s1); display:block}
.warn-inline{font-size:11px; color:var(--crit); margin-top:4px; display:block}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.histstrip{display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--ink-2); background:#f5f4f1; border-radius:6px; padding:6px 10px; margin-bottom:8px}
.notebox{border-radius:6px; padding:8px 12px; font-size:12px; margin-bottom:14px}
.notebox.warn{background:#fdf1d6; color:var(--amber)}
.notebox.info{background:#eef3fb; color:var(--s1)}
.save{position:sticky; bottom:0; background:linear-gradient(transparent,var(--page) 30%); padding:14px 0 4px; text-align:right; display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.save button{padding:10px 26px; background:var(--s1); color:#fff; border:none; border-radius:6px; font-weight:600; font-size:14px; cursor:pointer}
.save button.ghost{background:#fff; color:var(--s1); border:1px solid var(--s1)}
.save .msg{font-size:12px}
.save .msg.ok{color:var(--good-text)} .save .msg.ng{color:var(--crit)}

/* dialog / toast */
dialog{border:1px solid var(--ring); border-radius:10px; padding:20px 24px; max-width:420px; width:min(420px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(0,0,0,.25)}
dialog h3{margin-bottom:10px; font-size:15px}
dialog input{width:100%; padding:8px 10px; border:1px solid var(--axis); border-radius:6px; margin:4px 0 10px; font-size:13px}
.forcebox{background:#fdf1d6; color:var(--amber); border-radius:6px; padding:8px 10px; font-size:12px; margin-bottom:10px}
.toast{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:50; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.18)}
.toast.ok{background:#e2f3e2; color:var(--good-text)}
.toast.ng{background:var(--crit); color:#fff}
.toast.info{background:#eef3fb; color:var(--s1)}

/* touch: iOSの入力ズーム防止とタップ領域確保 */
@media (pointer:coarse){
  .block input,.block textarea,.weekbar select,.login-card input,dialog input{font-size:16px}
  .seg button{padding:11px 18px}
  nav.tabs button{padding:11px 14px}
}
@media print{
  header.app,.weekbar,.cardhead .seg,.save,nav.tabs{display:none!important}
  body{background:#fff}
  .card{break-inside:avoid; border-color:#ccc}
  .grid2{grid-template-columns:1fr}
}