/* Theming */
:root{
  --bg:#f2f3f5; --fg:#0f172a; --muted:#475569; --card:#ffffff;
  --border:#d1d5db; --accent:#0ea5e9; --link:#1d4ed8; --header-grad1:#1f2937; --header-grad2:#111827;
  --shadow:0 1px 0 rgba(0,0,0,.08);
  --base-font:16px; --lh:1.9; --maxw:980px;
  --header-fg:#e5e7eb;
}
html[data-theme="navy"]{
  --bg:#eef2ff; --fg:#0b1220; --muted:#475569; --card:#ffffff; --border:#c7d2fe;
  --accent:#2563eb; --link:#1d4ed8; --header-grad1:#1e3a8a; --header-grad2:#0f172a;
  --header-fg:#e5e7eb;
}
html[data-theme="graphite"]{
  --bg:#0b0d11; --fg:#e6e6e6; --muted:#9aa3af; --card:#121621; --border:#1f2430;
  --accent:#38bdf8; --link:#7dd3fc; --header-grad1:#0b0d11; --header-grad2:#0b0d11;
  --header-fg:#e5e7eb;
}
html[data-theme="light"]{
  --bg:#f7f7f8; --fg:#121212; --muted:#5b616b; --card:#ffffff; --border:#e5e7eb;
  --accent:#0ea5e9; --link:#0a58ca; --header-grad1:#f8fafc; --header-grad2:#eef2f7;
  --header-fg:#0b1220; /* HIGH CONTRAST for brand on light header */
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font: var(--base-font)/var(--lh) Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
@media (max-width:640px){
  :root{ --base-font:17px; --lh:1.95; --maxw:720px; }
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

header{
  background:linear-gradient(180deg,var(--header-grad1),var(--header-grad2));
  color:var(--header-fg); border-bottom:3px solid var(--accent); padding:10px 12px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
header .brand, header .home{font-weight:700; letter-spacing:.02em}
header .sub{opacity:.8}
header .tools{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
select, input[type="search"]{
  background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:4px;
  padding:6px 8px; min-height:36px;
}
.read-pill{font-size:12px; padding:2px 6px; border:1px solid var(--border); border-radius:3px; background:var(--card); color:var(--muted)}

main{max-width:var(--maxw); margin:24px auto; padding:0 12px}
.box{background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow)}
.card{padding:14px 16px}

.toc .item{padding:10px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.toc .item:first-child{border-top:none}
.toc .title{font-weight:700}
.toc .sum{color:var(--muted); margin:.25rem 0 0}
.toc .actions{display:flex; align-items:center; gap:8px; white-space:nowrap}
.toc .readmark{appearance:none; width:18px; height:18px; border:1px solid var(--border); border-radius:2px; display:inline-block; position:relative; background:var(--card)}
.toc .readmark:checked{background:var(--accent); border-color:var(--accent)}
.toc .readmark:checked::after{content:""; position:absolute; left:4px; top:1px; width:8px; height:12px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg)}

.list-header{padding:10px 12px; border-bottom:1px solid var(--border); background:#f8fafc; font-weight:700}
html[data-theme="graphite"] .list-header{background:#11151d}
html[data-theme="navy"] .list-header{background:#e9edff}

h1{margin:0 0 .35rem; font-size:28px; line-height:1.25; font-weight:800; color:var(--fg)}
.meta{color:var(--muted); margin-bottom:10px; border-top:1px solid var(--border); padding-top:8px}
.body{white-space:normal; word-break:break-word; font-feature-settings:"palt";}
.body p{margin:0 0 1rem}
.pager{display:flex; gap:8px; margin-top:16px}
.btn{display:inline-block; background:#111827; color:#e5e7eb; border:1px solid #0b1220; padding:9px 14px; min-width:120px; text-align:center; border-radius:3px}
.btn.secondary{background:var(--card); color:var(--fg); border-color:var(--border)}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

footer{margin:24px auto 40px; max-width:var(--maxw); color:var(--muted); padding:0 12px}
footer .foot{border-top:3px solid var(--accent); padding-top:12px}
.notice{color:var(--muted); font-size:14px}

/* Small 'Aa' control for content pages */
.toolbar{display:flex; gap:8px; align-items:center; margin:8px 0 0}
.toolbar button{border:1px solid var(--border); background:var(--card); color:var(--fg); padding:4px 8px; border-radius:3px; cursor:pointer}
.toolbar button.active{border-color:var(--accent)}