/* 見た目はモックアップ第3版（承認済み）と同じ。mockup/template.html から写した */
:root{
  --ground:#F1F2EE; --surface:#FFFFFF; --sunk:#E8EAE4; --ink:#1B2220; --muted:#5C6763; --line:#D9DDD6;
  --accent:#2B5C8A; --accent-soft:#E3ECF5;
  --urgent:#B42318; --urgent-soft:#FBE9E7; --soon:#935700; --soon-soft:#FBF0DC;
  --ok:#2F7A4F; --ok-soft:#E3F2E8; --calm:#5E5A9E; --calm-soft:#ECEBF7;
  --tile-a:#7A4E2D; --tile-b:#3E5C76; --tile-c:#4B5563;
  --shadow:0 1px 2px rgba(27,34,32,.06),0 4px 14px rgba(27,34,32,.05);
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Consolas",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101413; --surface:#181D1B; --sunk:#1F2522; --ink:#E3E8E5; --muted:#97A29E; --line:#2A312E;
    --accent:#88B2DE; --accent-soft:#1D2A36;
    --urgent:#F0907F; --urgent-soft:#3A1F1B; --soon:#E2AE52; --soon-soft:#35291A;
    --ok:#72C497; --ok-soft:#1A2F23; --calm:#AEA9EC; --calm-soft:#26243A;
    --tile-a:#9A6A45; --tile-b:#55799A; --tile-c:#5F6B7A;
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  --ground:#101413; --surface:#181D1B; --sunk:#1F2522; --ink:#E3E8E5; --muted:#97A29E; --line:#2A312E;
  --accent:#88B2DE; --accent-soft:#1D2A36;
  --urgent:#F0907F; --urgent-soft:#3A1F1B; --soon:#E2AE52; --soon-soft:#35291A;
  --ok:#72C497; --ok-soft:#1A2F23; --calm:#AEA9EC; --calm-soft:#26243A;
  --tile-a:#9A6A45; --tile-b:#55799A; --tile-c:#5F6B7A;
  --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:12px 64px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.3}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.top h1{font-size:26px;font-weight:700;letter-spacing:.02em}
.top .stamp{font-size:13px;color:var(--muted)}

.now{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.now-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:10px}
.now-head h2{font-size:17px}
.counts{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.counts b{font-family:var(--mono);font-size:18px;color:var(--ink);font-weight:500;margin-right:3px}
.now ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.now li{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;padding:10px 40px 10px 12px;border-radius:10px;background:var(--sunk)}
.now li .why{grid-column:2/4;font-size:13px;color:var(--muted)}
.now li .t{font-weight:500}

.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1;padding:5px 8px;border-radius:999px;white-space:nowrap;font-weight:500}
.chip.urgent{background:var(--urgent-soft);color:var(--urgent)}
.chip.soon{background:var(--soon-soft);color:var(--soon)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.calm{background:var(--calm-soft);color:var(--calm)}
.chip.plain{background:var(--sunk);color:var(--muted)}
.chip.ex{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.from{font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted);margin-left:6px;white-space:nowrap}
.from.trash{border-style:dashed}

/* 非表示ボタン */
.hide-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:17px;line-height:1;opacity:.55}
.hide-btn:hover,.hide-btn:focus-visible{opacity:1;border-color:var(--line);background:var(--surface)}
.no-db .hide-btn{display:none}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.tabs .n{font-family:var(--mono);font-size:12px;margin-left:6px;color:var(--muted)}

.cols{display:grid;gap:16px}
.panel{min-width:0}
.panel-title{display:none;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.panel-title h2{font-size:17px}

.sec{margin-bottom:22px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.sec-h h3{font-size:14px;letter-spacing:.06em;color:var(--muted);font-weight:500}
.sec-h .src{font-size:12px;color:var(--muted)}
.grid2{display:grid;gap:16px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

.list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{position:relative;display:grid;grid-template-columns:66px 1fr auto;gap:2px 12px;padding:11px 44px 11px 14px;border-top:1px solid var(--line);align-items:start}
.list > .row:first-child,.list > [hidden] + .row{border-top:0}
.row .d{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:2px}
.row .t{font-weight:500}
.row .s{grid-column:2/4;font-size:13px;color:var(--muted)}
.row.past .t{color:var(--muted)}
.excluded{font-size:12px;color:var(--muted);margin:8px 2px 0}

.memo{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 44px 12px 14px;display:grid;gap:6px}
.memos{display:grid;gap:10px}
.memo .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.memo .t{font-weight:700}
.memo dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px}
.memo dt{color:var(--muted)}
.memo dd{margin:0}
.themes{display:flex;flex-wrap:wrap;gap:6px}
.note-ex{font-size:12px;color:var(--muted);margin:6px 0 0}

/* アプリ開発 */
.projs{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.proj{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 44px 12px 14px;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:start}
.proj .icon{grid-row:1/5;width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.proj .icon img{width:100%;height:100%;display:block}
.tile{color:#fff;font-weight:700;font-size:20px;letter-spacing:.02em}
.tile.a{background:var(--tile-a)} .tile.b{background:var(--tile-b)} .tile.c{background:var(--tile-c)}
.proj .h{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.proj .name{font-weight:700;font-size:16px}
.proj .last{font-size:12px;color:var(--muted)}
.proj .next{font-size:14px}
.proj .next::before{content:"次 ";color:var(--muted);font-size:12px}
.proj .bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:2px}
.proj .bar i{display:block;height:100%;background:var(--accent)}
.feed{list-style:none;margin:0;padding:4px 14px;display:grid}
.feed li{position:relative;display:grid;grid-template-columns:66px 1fr;gap:0 12px;padding:8px 36px 8px 0;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0}
.feed .hide-btn{right:0}
.feed .d{font-family:var(--mono);font-size:13px;color:var(--muted)}
.feed .who{font-size:12px;color:var(--muted)}
.dev{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);margin-left:4px}

/* note */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat .v{font-family:var(--mono);font-size:22px;line-height:1.2}
.stat .l{font-size:12px;color:var(--muted)}
.eps{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ep{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid}
.ep .thumb{aspect-ratio:1280/670;max-width:100%;background:var(--sunk);display:grid;place-items:center;overflow:hidden}
.ep .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ep .thumb.none{background:repeating-linear-gradient(135deg,var(--sunk) 0 10px,var(--surface) 10px 20px);color:var(--muted);font-size:13px}
.ep .thumb.title-card{background:var(--tile-a);color:#fff;padding:14px;text-align:center;font-weight:700;font-size:19px;line-height:1.4}
.ep .body{padding:10px 44px 12px 14px;display:grid;gap:4px}
.ep .no{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ep .t{font-weight:700}
.ep .s{font-size:13px;color:var(--muted)}
.ep .hide-btn{top:auto;bottom:10px}
.ep.todo .t{color:var(--muted);font-weight:500}

/* サマリー */
.sumgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.sum{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:12px;align-content:start}
.sum-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sum-h h2{font-size:17px}
.go{border:1px solid var(--line);background:var(--ground);border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer;color:var(--accent);white-space:nowrap}
.go:hover{border-color:var(--accent)}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mini{background:var(--sunk);border-radius:10px;padding:8px 10px;display:grid}
.mini b{font-size:20px;font-weight:500;line-height:1.2}
.mini b small{font-size:12px}
.mini span{font-size:12px;color:var(--muted)}
.sum .row{grid-template-columns:48px 1fr auto;padding-block:8px}
.sum-foot{margin:0;font-size:13px;color:var(--muted)}
.iconrow{display:flex;gap:10px;flex-wrap:wrap}
.ic{position:relative;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:17px}
.ic img{width:100%;height:100%;border-radius:11px;display:block}
.ic .dot{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface)}
.dot.ok{background:var(--ok)} .dot.soon{background:var(--soon)} .dot.calm{background:var(--calm)}
.note-sum{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}
.note-sum img{width:100%;max-width:100%;aspect-ratio:1280/670;object-fit:cover;border-radius:8px;display:block}
.note-sum .no{font-size:12px;color:var(--muted)}
.note-sum .t{font-weight:700}

/* 非表示にした項目 */
.tray{margin-top:8px;font-size:13px;color:var(--muted)}
.tray summary{cursor:pointer;display:inline-block;padding:4px 0}
.tray ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.tray li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 10px;border:1px dashed var(--line);border-radius:8px}
.tray li button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:2px 10px;cursor:pointer;font-size:12px;white-space:nowrap}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom, 0px));background:var(--ink);color:var(--ground);
  border-radius:10px;padding:10px 14px;font-size:14px;display:flex;gap:14px;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.toast button{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font-weight:700}
.foot{font-size:12px;color:var(--muted);margin-top:28px;border-top:1px solid var(--line);padding-top:10px}
@media (max-width:480px){
  .row{grid-template-columns:52px 1fr auto}
  .feed li{grid-template-columns:52px 1fr}
  .top h1{font-size:22px}
  .now li{grid-template-columns:1fr auto}
  .now li .why{grid-column:1/3}
  .now li > .chip.plain{display:none}
  .hide-btn{opacity:.8}
}
@media (prefers-reduced-motion:no-preference){.tabs button{transition:color .15s,border-color .15s}}

/* 本番だけの部品 */
.msg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-block:12px}
.msg b{display:block;margin-bottom:4px}
.stale{color:var(--soon)}
.reload{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 10px;font-size:13px;cursor:pointer;color:var(--accent)}