/* midiom manual — shared styles. Dark neon theme matching the app.
   Loaded via relative <link> so it works online and offline (file://). */
:root{
  --bg:#0b0f0d; --panel:#101612; --panel2:#0d1410; --ink:#dfe8e2; --dim:#9fb0a6;
  --neon:#5aff8c; --neon-d:#3bd96f; --line:#22302a; --accent:#90ffaa;
  --amber:#ffd24f; --blue:#7ec8ff; --code:#bdf3cf; --warn:#ffb070;
  --topbar-h:52px; --side-w:286px; --rad:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.75 "Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--neon); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:"Cascadia Code",Consolas,"SFMono-Regular",monospace}
code{color:var(--code); background:#0a120d; border:1px solid var(--line); border-radius:4px; padding:.05em .4em; font-size:.88em}
kbd{display:inline-block; background:#161f1a; border:1px solid #2c3c33; border-bottom-width:2px;
    border-radius:5px; padding:.05em .45em; font-size:.82em; color:#e8fff0; white-space:nowrap}

/* ---- inline icons: the SVG glyphs the app draws, auto-generated into
   assets/icons.js and following the surrounding text size/colour ----------- */
.ic{display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.22em; line-height:0; color:var(--accent)}
.ic svg{width:100%; height:100%; display:block; fill:currentColor}

/* ---- language toggle: show only the active language ---------------------- */
html.lang-en .ja{display:none}
html:not(.lang-en) .en{display:none}

/* ---- top bar ------------------------------------------------------------- */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:30;
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:linear-gradient(180deg,#0e1512,#0a0f0c); border-bottom:1px solid var(--line);
}
#topbar .logo{height:24px; width:auto; display:block}
#topbar .home{display:flex; align-items:center; gap:10px}
#topbar .home .doctype{color:var(--dim); font-size:12px; letter-spacing:.06em; border-left:1px solid var(--line); padding-left:12px}
#topbar .spacer{flex:1}
#topbar .hamburger{display:none; background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:6px; width:34px; height:32px; font-size:16px; cursor:pointer}
.langtoggle{display:inline-flex; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.langtoggle button{background:#0e1612; color:var(--dim); border:0; padding:5px 13px; font-size:12px; cursor:pointer; letter-spacing:.04em}
.langtoggle button[aria-pressed="true"]{background:var(--neon-d); color:#04130a; font-weight:700}

/* ---- search ------------------------------------------------------------- */
.search{position:relative; flex:1; max-width:420px; margin:0 6px}
.search-input{width:100%; height:30px; box-sizing:border-box; padding:4px 13px;
  background:#0d1410; color:var(--ink); border:1px solid var(--line); border-radius:16px; font-size:13px; outline:none}
.search-input:focus{border-color:var(--neon-d)}
.search-input::placeholder{color:#5d6e64}
.search-results{position:absolute; top:37px; left:0; right:0; z-index:40;
  background:#0e1612; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.55); max-height:64vh; overflow-y:auto}
.search-results a.sr{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:8px 12px; color:var(--ink); border-bottom:1px solid var(--line)}
.search-results a.sr:last-child{border-bottom:0}
.search-results a.sr:hover, .search-results a.sr.active{background:#16241c; text-decoration:none}
.search-results .sr-ttl{font-size:13.5px}
.search-results .sr-part{font-size:11px; color:var(--dim); white-space:nowrap}

/* ---- layout: sidebar + main --------------------------------------------- */
.layout{display:grid; grid-template-columns:var(--side-w) 1fr; padding-top:var(--topbar-h)}
#sidebar{
  position:sticky; top:var(--topbar-h); align-self:start; height:calc(100vh - var(--topbar-h));
  overflow-y:auto; padding:18px 12px 60px; border-right:1px solid var(--line);
  background:linear-gradient(180deg,#0d1310,#0a0f0c);
}
#sidebar .part{color:var(--accent); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:16px 10px 5px}
#sidebar a, #sidebar .draft{display:block; padding:6px 10px; border-radius:6px; font-size:13.5px; line-height:1.4}
#sidebar a{color:var(--ink)}
#sidebar a:hover{background:#15201b; text-decoration:none}
#sidebar a.active{background:#16241c; color:var(--accent); box-shadow:inset 2px 0 0 var(--neon)}
#sidebar .draft{color:#5d6e64; cursor:default}
#sidebar .draft::after{content:"…"; color:#3f4d45}

main{min-width:0; padding:34px 54px 120px; max-width:940px}

/* ---- typography ---------------------------------------------------------- */
.page-head{border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:8px}
.page-head .eyebrow{color:var(--neon-d); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
h1{font-size:33px; margin:.15em 0 0; color:#fff; letter-spacing:.02em}
h2{font-size:24px; margin:46px 0 4px; color:#fff; padding-top:8px; scroll-margin-top:calc(var(--topbar-h) + 8px)}
h3{font-size:18px; margin:28px 0 6px; color:var(--accent); scroll-margin-top:calc(var(--topbar-h) + 8px)}
h4{font-size:14px; margin:18px 0 6px; color:#cfe; text-transform:uppercase; letter-spacing:.07em}
p{margin:.6em 0}
ul,ol{margin:.5em 0; padding-left:1.4em}
li{margin:.25em 0}
hr{border:0; border-top:1px solid var(--line); margin:38px 0}
.lead{color:var(--dim); font-size:15px; margin:.4em 0 0}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px}
th,td{text-align:left; padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--accent); font-weight:600; background:#0e1612; border-bottom:1px solid #2a3a32}
tr:hover td{background:#0e1411}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--rad); padding:16px 20px; margin:16px 0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

.note,.warn,.tip{border-radius:var(--rad); padding:12px 16px; margin:16px 0; border:1px solid; font-size:13.5px}
.note{background:#0d1714; border-color:#244; color:#cfe}
.note b{color:var(--blue)}
.warn{background:#1a130c; border-color:#6b4a1f; color:#ffd9ad}
.warn b{color:var(--warn)}
.tip{background:#0c1710; border-color:#2c5a38; color:#cdf6d8}
.tip b{color:var(--neon)}

/* ---- screenshot placeholders (named) ------------------------------------ */
/* Authoring: <figure class="shot" data-shot="NAME"> … </figure>.
   To finalise, drop assets/img/NAME.png in and replace .shot-ph with
   <img class="shot-img" src="assets/img/NAME.png" alt="…">. */
figure.shot{margin:18px 0}
.shot-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:180px; border:1.5px dashed #38503f; border-radius:var(--rad);
  background:repeating-linear-gradient(45deg,#0d130f,#0d130f 12px,#0f1712 12px,#0f1712 24px);
  color:#6f8478; text-align:center; padding:20px;
}
.shot-ph .cam{font-size:26px; opacity:.7}
.shot-ph .shot-name{font-family:Consolas,monospace; font-size:12.5px; color:var(--neon-d);
  background:#08120c; border:1px solid var(--line); border-radius:5px; padding:2px 9px}
.shot-ph .shot-hint{font-size:11.5px; color:#5d6e64}
.shot-img{display:block; width:100%; border:1px solid var(--line); border-radius:var(--rad)}
figure.shot figcaption{color:var(--dim); font-size:12.5px; margin-top:7px; text-align:center}

/* ---- landing TOC grid ---------------------------------------------------- */
.toc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:18px 0}
.toc-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:14px 16px; color:var(--ink)}
.toc-card:hover{border-color:var(--neon-d); text-decoration:none; background:#0f1713}
.toc-card .num{color:var(--neon-d); font-weight:700; font-size:12px}
.toc-card .ttl{display:block; margin-top:3px; font-weight:600}
.toc-card .desc{display:block; margin-top:5px; color:var(--dim); font-size:12.5px; line-height:1.5}
.toc-card.draft{opacity:.45; cursor:default}
.toc-card.draft .num::after{content:" ·"; }

.steps{counter-reset:step; list-style:none; padding-left:0}
.steps>li{counter-increment:step; position:relative; padding:4px 0 14px 44px; margin:0}
.steps>li::before{content:counter(step); position:absolute; left:0; top:2px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#13251a; border:1px solid var(--neon-d); color:var(--neon); font-weight:700; font-size:13px}

footer{color:var(--dim); font-size:12px; padding:26px 0 0; margin-top:40px; border-top:1px solid var(--line)}
.pagenav{display:flex; justify-content:space-between; gap:12px; margin-top:36px}
.pagenav a{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--rad); padding:12px 16px}
.pagenav a:hover{border-color:var(--neon-d); text-decoration:none}
.pagenav .dir{display:block; font-size:11px; color:var(--dim)}
.pagenav .nxt{text-align:right}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  #topbar .hamburger{display:block}
  #sidebar{position:fixed; top:var(--topbar-h); left:0; width:var(--side-w); z-index:25;
    transform:translateX(-100%); transition:transform .18s ease}
  body.nav-open #sidebar{transform:translateX(0)}
  body.nav-open::after{content:""; position:fixed; inset:var(--topbar-h) 0 0 0; background:rgba(0,0,0,.5); z-index:20}
  main{padding:24px 20px 100px}
  #topbar .home .doctype{display:none}
}