/*
 * Shared stylesheet for the new users-manual site (skeleton v0).
 * Tokens follow the project design system (moegi CI + mode colors);
 * canonical token values live in .claude/skills/manual-deliverables.
 */
:root{
  --paper:#f5f7fa; --card:#ffffff; --ink:#1c2532; --muted:#5c6879;
  --line:#dbe1ea; --line-soft:#e8edf4;
  --accent:#3e8452; --accent-soft:#e5f2e8; --accent-deep:#2e6b40;
  --m-router:#0a6ebd; --m-ap:#0e8a6d; --m-rep:#d6219c; --m-mesh:#7059c0;
  --m-router-soft:#e8f2fb; --m-ap-soft:#e6f5f0; --m-rep-soft:#fbe9f6; --m-mesh-soft:#f0ecfa;
  --good:#0e7a5f; --warn-bg:#fdf3e0; --warn-ink:#8a5a10;
  --danger:#b0433c; --danger-bg:#fbeae9;
  --shadow:0 1px 2px rgba(23,32,46,.05), 0 4px 16px rgba(23,32,46,.06);
  --sidebar-w:268px;
  /* エレコム製品サポート (vivr.elecom.co.jp) のヘッダーと同じ値。サイトの
     --accent とは別物で、ブランドの帯にだけ使う */
  --brand-bg:#63b479;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#12161d; --card:#1a202a; --ink:#e6eaf1; --muted:#94a0b2;
    --line:#2b3442; --line-soft:#232c38;
    --accent:#79b788; --accent-soft:#1d3527; --accent-deep:#9ccfa8;
    --m-router:#4d9fdd; --m-ap:#33a487; --m-rep:#ee7fc4; --m-mesh:#9480d6;
    --m-router-soft:#16293a; --m-ap-soft:#143029; --m-rep-soft:#381c30; --m-mesh-soft:#272040;
    --good:#3fb08e; --warn-bg:#33280f; --warn-ink:#e3b96a;
    --danger:#e07a72; --danger-bg:#3a1f1d;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Noto Sans JP",sans-serif;
  line-height:1.85; margin:0; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep);}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
.wrap{max-width:960px; margin:0 auto; padding:0 18px 72px;}
.wrap--narrow{max-width:760px;}
.skeleton-note{
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:12px; text-align:center; padding:6px 12px; line-height:1.6;
}

/* ============ site header ============ */
/* left padding clears the fixed hamburger button */
/* Matches the header of エレコム製品サポート: a brand-green bar with the white
   wordmark and white text, centred. The negative margins let the bar reach the
   window edges while the page content keeps the .wrap column. */
.site-head{
  display:flex; align-items:center; gap:10px 22px;
  flex-wrap:wrap; background:var(--brand-bg); color:#fff;
  margin:0 -18px 18px; padding:14px 18px 14px 52px;
}
/* The wordmark is the official asset (ELECOM新ロゴ 使用方法 2026-05-28).
   Its own green is #76c28d and stays as drawn — the site's --accent is a
   different value and must not be applied to it. The guide sets a 40px
   minimum width for web and an isolation area of 3a, where a is the stroke
   width (a ≒ 0.2 × the mark's height), which is the margin below. */
.site-head .logo{display:flex; flex:none; text-decoration:none;}
.site-head .logo img{width:120px; height:auto; display:block; margin:10px;}
.site-head .model{font-size:13px; color:#fff; font-weight:700; white-space:nowrap;}
.site-head .to-top{font-size:12px; white-space:nowrap; color:#fff;}

/* ============ top: hero search ============ */
header.top{padding:0;}
.brand{
  display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap;
  background:var(--brand-bg); color:#fff;
  margin:0 -18px 20px; padding:14px 18px 14px 52px;
}
.brand .logo{display:flex;}
.brand .logo img{width:132px; height:auto; display:block; margin:11px;}
.brand .model{font-size:13px; color:#fff; font-weight:700;}
h1.top-title{font-size:clamp(19px,3.6vw,24px); font-weight:700; margin:6px 0 0; line-height:1.5;}

.search-block{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:18px; margin:18px 0 8px; position:relative;
}
.search-form{display:flex; gap:10px;}
.search-input{
  flex:1; display:flex; align-items:center; gap:10px;
  border:2px solid var(--accent); border-radius:26px; background:var(--card);
  padding:0 18px; height:48px; min-width:0;
}
.search-input svg{flex:none; color:var(--muted);}
.search-input input{
  flex:1; border:none; outline:none; background:none; color:var(--ink);
  font-size:15px; font-family:inherit; min-width:0;
}
.search-input input::placeholder{color:var(--muted); opacity:.8;}
.search-btn{
  flex:none; border:none; background:var(--accent); color:#fff; font-weight:700;
  font-size:14px; border-radius:24px; padding:0 22px; cursor:pointer; font-family:inherit;
}
.search-results{
  display:none; position:absolute; left:18px; right:18px; z-index:20;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); margin-top:8px; overflow:hidden; max-height:420px; overflow-y:auto;
}
.search-results.show{display:block;}
.search-results a{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 10px; padding:10px 16px;
  text-decoration:none; color:var(--ink); font-size:13.5px; border-bottom:1px solid var(--line-soft);
}
.search-results a:last-child{border-bottom:none;}
.search-results a:hover,.search-results a.sel{background:var(--line-soft);}
.search-results .cat{font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap;}
/* The excerpt takes its own line: results can now match on body text alone,
   and the title by itself would not explain why the article came up. */
.search-results .snip{
  flex:0 0 100%; font-size:11.5px; line-height:1.5; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-results .empty{padding:12px 16px; font-size:13px; color:var(--muted);}

/* ============ top: intents / sections ============ */
.intents{display:grid; grid-template-columns:1fr; gap:12px; margin:20px 0 8px;}
@media (min-width:720px){.intents{grid-template-columns:repeat(3,1fr);}}
.intent{
  display:flex; gap:14px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px 18px; text-decoration:none; color:var(--ink);
}
.intent:hover{border-color:var(--accent);}
/* Direction N (絵で選ぶ): a pictogram carries the entry and the words caption it.
   One stroke width across the whole set, drawn in currentColor so the accent and
   the mode colours apply without a second copy of the artwork. The label stays —
   the picture is help for the reader, never a replacement for the text. */
.intent .pict{flex:none; color:var(--accent); display:flex;}
/* One colour per entry, as direction N had them: the three destinations are
   told apart by shape and colour together, and each section heading repeats
   its entry's colour so the pair reads as one thing. */
.intent.i1 .pict,#setup .sec-pict{color:var(--accent);}
.intent.i2 .pict,#tasks .sec-pict{color:var(--m-router);}
.intent.i3 .pict,#trouble .sec-pict{color:var(--danger);}
/* The heading's rule takes its section's colour, so the L and the picture
   beside it read as one mark rather than two. */
#tasks .sec-head{border-color:var(--m-router);}
#trouble .sec-head{border-color:var(--danger);}
.intent .pict svg{width:52px; height:52px; display:block;}
.intent .t{font-size:17px; font-weight:700; line-height:1.45; display:block;}
.intent .d{font-size:13px; color:var(--muted); line-height:1.6; display:block;}
/* Wide enough for three columns: stack the pictogram over its label, at the size
   direction N used (88px). Below that the entries are full-width rows, where a
   large centred picture would push the three of them past the fold. */
@media (min-width:720px){
  .intent{flex-direction:column; text-align:center; gap:10px; padding:22px 18px 20px;}
  .intent .pict svg{width:88px; height:88px;}
  .intent .t{font-size:19px;}
}
.mode-card .pict{color:inherit; display:block; margin-bottom:2px;}
.mode-card .pict svg{width:72px; height:60px; display:block;}
.mode-card.router .pict{color:var(--m-router);}
.mode-card.ap .pict{color:var(--m-ap);}
.mode-card.rep .pict{color:var(--m-rep);}
.mode-card.mesh .pict{color:var(--m-mesh);}

section.band{margin-top:52px;}
/* The section heading is a band. The numbered badge used to carry the weight
   here; with the numbers gone the heading needs to hold the page apart on its
   own, and a filled strip reads at a glance while scrolling. */
/* An L: the rule runs down the left of the heading and turns along its foot,
   so the section reads as opened without a filled band shouting from the page. */
.sec-head{
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
  /* Same proportions as .title-small-line on エレコム製品サポート:
     a thick 8px upright, a thin 2px foot, 12px of air before the text. */
  border-left:8px solid var(--accent); border-bottom:2px solid var(--accent);
  padding:2px 0 10px 12px;
}
.sec-head h2{font-size:21px; margin:0; font-weight:700; line-height:1.45;}
/* Each section repeats the pictogram of the entry that leads to it, so the two
   halves of the page point at each other. */
.sec-head .sec-pict{flex:none; width:46px; height:46px; color:var(--accent);}
.sec-head .sec-pict svg{width:100%; height:100%; display:block;}
.sec-lede{color:var(--muted); font-size:13.5px; margin:6px 0 16px;}

/* ============ top: diagnosis ============ */
.diag{background:var(--accent-soft); border-radius:16px; padding:20px; margin-bottom:16px;}
.diag .head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.diag .head .t{font-weight:700; font-size:16px;}
.diag .head .b{
  font-size:11px; font-weight:700; color:#fff; background:var(--accent);
  border-radius:10px; padding:2px 10px; letter-spacing:.05em;
}
.diag p{margin:4px 0; font-size:13.5px;}
.diag-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:12px;}
.diag-progress{display:flex; gap:6px; margin-bottom:10px;}
.diag-progress span{width:26px; height:5px; border-radius:3px; background:var(--line);}
.diag-progress span.on{background:var(--accent);}
.diag-q{font-size:15.5px; font-weight:700; line-height:1.7; margin:0 0 6px; min-height:2.6em;}
.diag-hint{font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.7;}
.diag-anss{display:flex; gap:10px; flex-wrap:wrap;}
.diag-nav{display:flex; gap:22px;}
.ans{
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  border:2px solid var(--accent); border-radius:24px; padding:9px 26px;
  background:var(--card); color:var(--accent-deep);
}
.ans.primary{background:var(--accent); color:#fff;}
.diag-result{display:none;}
.diag-result.show{display:block;}
.diag-result .mode-name{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; margin:2px 0 4px;}
.diag-result .mode-name .dot{width:14px; height:14px; border-radius:4px; flex:none;}
.diag-result .plain{font-size:13.5px; color:var(--muted); margin:0 0 12px;}
.diag-retry{
  font-family:inherit; background:none; border:none; color:var(--muted); font-size:12.5px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0; margin-top:12px;
}
.go-guide{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  text-decoration:none; border-radius:24px; padding:9px 24px; font-size:14px;
}

/* ============ top: mode cards ============ */
.modes{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (min-width:720px){.modes{grid-template-columns:repeat(3,1fr);}}
.mode-card{
  background:var(--card); border:1px solid var(--line); border-top:4px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink);
}
a.mode-card:hover{border-color:var(--accent);}
.mode-card.router{border-top-color:var(--m-router);}
.mode-card.ap{border-top-color:var(--m-ap);}
.mode-card.rep{border-top-color:var(--m-rep);}
.mode-card.mesh{border-top-color:var(--m-mesh);}
.mode-card .t{font-size:14.5px; font-weight:700; line-height:1.5;}
.mode-card .d{font-size:12px; color:var(--muted); line-height:1.65; flex:1;}
.mode-card .also{
  font-size:11px; color:var(--muted); line-height:1.6;
  border-top:1px dashed var(--line); padding-top:6px; margin-top:2px;
}
.mode-card .go{font-size:12.5px; color:var(--accent-deep); font-weight:700;}
.mode-card.group{cursor:default;}
.subs{display:flex; flex-direction:column; gap:8px; margin-top:2px;}
.sub{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  text-decoration:none; color:var(--ink); font-size:12.5px; line-height:1.55; min-width:0;
}
.sub:hover{border-color:var(--accent); background:var(--line-soft);}
.sub .chip{align-self:center;}
.sub .s-t{flex:1; min-width:0;}
.sub .s-go{flex:none; color:var(--accent-deep); font-weight:700;}
@media (max-width:719px){ .mode-card.group{grid-column:1 / -1;} }

/* ============ chips ============ */
.chip{
  align-self:flex-start; display:inline-block; font-size:10.5px; font-weight:700; color:#fff;
  border-radius:9px; padding:2px 9px; letter-spacing:.03em; flex:none; white-space:nowrap;
}
.chip.router{background:var(--m-router);} .chip.ap{background:var(--m-ap);}
.chip.rep{background:var(--m-rep);} .chip.mesh{background:var(--m-mesh);}
.chip.all{background:var(--muted);}
/* A table cell listing the modes a row applies to (lamps.html; not .modes,
   which is the top page grid): badges stack so the column stays narrow. */
table.plain td.row-modes{padding:7px 8px; vertical-align:middle;}
td.row-modes .chip{display:block; width:max-content; margin:3px 0; white-space:nowrap;}

/* ============ jump-modes: quick anchors to a same-screen-per-mode section ============ */
.jump-modes{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 18px;}
.jump-modes a{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:5px 12px 5px 8px; font-size:12.5px; font-weight:700; color:var(--ink);
  text-decoration:none;
}
.jump-modes a:hover{border-color:var(--accent);}
.jump-modes .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.jump-modes .dot.router{background:var(--m-router);}
.jump-modes .dot.ap{background:var(--m-ap);}
.jump-modes .dot.rep{background:var(--m-rep);}
.jump-modes .dot.mesh{background:var(--m-mesh);}

/* ============ top: filter + article lists ============ */
.filter-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; margin-bottom:16px;
}
.filter-bar .lbl{font-size:12.5px; color:var(--muted); font-weight:700;}
.f-chip{
  font-family:inherit; font-size:13px; cursor:pointer;
  border:1.5px solid var(--line); color:var(--muted); background:var(--card);
  border-radius:16px; padding:4px 15px;
}
.f-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;}
.filter-note{font-size:11.5px; color:var(--muted); width:100%;}

.cats{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:720px){.cats{grid-template-columns:1fr 1fr;}}
.cat{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px 18px;
}
.cat h3{margin:0 0 10px; font-size:18px; font-weight:700; line-height:1.5;}
/* categories fold (2026-08-13 review): closed by default on phones, JS opens
   them on wide screens — except 詳細設定, which stays closed everywhere */
.cat summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap;
}
.cat summary::-webkit-details-marker{display:none;}
/* Each category is marked by its own picture, in the same hand as the entry
   pictograms: 24 viewBox, one stroke width, currentColor. align-self keeps it
   centred on the heading even though the row is baseline-aligned. */
.cat summary .cat-pict{
  flex:none; width:40px; height:40px; color:var(--accent); align-self:center;
}
.cat summary .cat-pict svg{width:100%; height:100%; display:block;}
.cat summary h3{margin:0; flex:1 1 auto; min-width:12em;}
/* The count carries the auto margin, so it always sits immediately left of
   the ＋/− toggle. With the toggle taking one too, the leftover space was
   split between them and the count drifted away from it on the one row that
   also has a note (詳細設定). */
.cat summary::after{
  content:"＋"; order:99; flex:none;
  color:var(--muted); font-weight:700; font-size:15px; line-height:1;
}
.cat[open] summary::after{content:"−";}
.cat[open] summary{margin-bottom:10px;}
.cat-note{font-size:11.5px; color:var(--muted); flex:none;}
/* the count sits at the right edge, like the mode chips on each row */
.cat-count{font-size:11.5px; color:var(--muted); flex:none; margin-left:auto;}
/* quick links under the search box */
.quick-row{display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:10px; align-items:center;}
.quick-row .lbl{font-size:12px; color:var(--muted);}
.quick-row a{
  font-size:12.5px; color:var(--accent-deep);
  text-underline-offset:3px;
}
.arts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.art a{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  font-size:13.5px; line-height:1.6; padding:7px 8px; border-radius:8px; min-width:0;
}
.art a:hover{background:var(--line-soft);}
.art a::before{
  content:""; flex:none; width:6px; height:6px;
  border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
.art .lbl{flex:1; min-width:0;}
.art.dim{opacity:.25;}
.art .chip{align-self:center;}

/* ============ top: troubles / support / appendix ============ */
.troubles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:720px){.troubles{grid-template-columns:1fr 1fr;}}
.troubles a{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:14px 16px;
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:700; line-height:1.6;
}
.troubles a:hover{border-color:var(--accent);}
/* The mark was a typed ？ in a circle; it is now the drawn one, so the symptom
   list belongs to the same set as everything above it. */
.troubles .q{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.troubles .q svg{width:19px; height:19px; display:block;}
.troubles .chip{margin-left:auto;}
.support{background:var(--accent-soft); border-radius:16px; padding:20px; margin-top:22px;}
.support .t{font-weight:700; font-size:15.5px; margin:0 0 4px;}
.support p{margin:2px 0 12px; font-size:13px; color:var(--muted);}
.support ul{margin:-6px 0 12px; padding-left:1.4em; font-size:13px; color:var(--muted);}
.support-btns{display:flex; gap:10px; flex-wrap:wrap;}
.support-btns a{
  flex:1; min-width:180px; text-align:center; text-decoration:none;
  background:var(--card); border:1.5px solid var(--accent); border-radius:12px;
  color:var(--accent-deep); font-weight:700; font-size:14px; padding:13px 16px;
}
.appx{display:flex; gap:8px 20px; flex-wrap:wrap; margin-top:8px;}
.appx a{font-size:13px; color:var(--accent-deep); text-underline-offset:3px;}

/* ============ article pages ============ */
.crumbs{font-size:12px; color:var(--muted); margin:14px 0 4px; line-height:1.8;}
.crumbs a{color:var(--muted);}
.crumbs .sep{margin:0 6px; opacity:.6;}
/* The way back to the article the reader came from (site.js). One line,
   cut short with an ellipsis so a long title never wraps on a phone. */
.crumb-back{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; color:var(--accent-deep); margin:0 0 6px; text-underline-offset:3px;
}
h1.art-title{font-size:clamp(21px,4vw,26px); line-height:1.5; margin:6px 0 10px; font-weight:700;}
.art-meta{display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.art-meta .chip{font-size:11px; padding:2.5px 11px; border-radius:10px;}
.meta-item{font-size:12.5px; color:var(--muted);}
.other-modes{
  font-size:12px; color:var(--muted); background:var(--line-soft);
  border-radius:9px; padding:8px 14px; margin:0 0 18px; line-height:1.8;
}
.mini-search{
  flex:0 1 auto; min-width:150px; margin-left:auto; display:flex; align-items:center; gap:8px;
  border:1.5px solid rgba(255,255,255,.7); border-radius:18px; background:rgba(255,255,255,.16);
  padding:0 14px; height:32px; color:#fff; font-size:12.5px;
  text-decoration:none;
}
.mini-search::before{
  content:""; width:10px; height:10px; border:2px solid #fff; border-radius:50%; flex:none;
  box-shadow:3px 4px 0 -2.5px #fff; opacity:.85;
}

/* variant tabs — shown value must match each element's layout needs */
.vtabs{display:flex; gap:8px; margin:20px 0 0;}
.vtab{
  flex:1; font-family:inherit; cursor:pointer; text-align:left;
  background:var(--card); border:2px solid var(--line); border-radius:12px 12px 0 0;
  border-bottom:none; padding:12px 16px 10px; line-height:1.5;
}
.vtab .vt-t{font-size:14.5px; font-weight:700; display:block;}
/* A tab may name its modes with the badges instead of words; give the row
   the same height as a text title so the two tabs stay level. */
.vtab .vt-t .chip{font-size:11.5px; padding:3px 10px; vertical-align:middle;}
.vtab .vt-d{font-size:11.5px; color:var(--muted); display:block;}
.vtab[aria-selected="true"]{border-color:var(--m-rep); background:var(--m-rep-soft);}
.vtab[aria-selected="true"] .vt-t{color:var(--m-rep);}
.vbody{
  border:2px solid var(--m-rep); border-radius:0 0 14px 14px; background:var(--card);
  padding:20px; box-shadow:var(--shadow);
}
body.mode-mesh .vtab[aria-selected="true"]{border-color:var(--m-mesh); background:var(--accent-soft);}
body.mode-mesh .vtab[aria-selected="true"] .vt-t{color:var(--m-mesh);}
body.mode-mesh .vbody{border-color:var(--m-mesh);}
/* Articles that span every mode (a screen whose content differs by mode)
   take the neutral accent rather than one mode's colour. */
body.mode-all .vtab[aria-selected="true"]{border-color:var(--accent); background:var(--accent-soft);}
body.mode-all .vtab[aria-selected="true"] .vt-t{color:var(--accent-deep);}
body.mode-all .vbody{border-color:var(--accent);}
/* Tabs that name a mode carry that mode's badge, so the frame follows the
   badge the reader just clicked rather than one colour for the whole strip.
   `data-variant` is set on <body> by the tab script (site.js), including on
   load, so this also styles the initially selected tab. Same specificity as
   the mode-* rules above, so these must stay after them to win.
   Repeater articles put normal/hanareya in `data-variant`; those names are
   not listed here, so those pages keep their mode colour. */
body[data-variant="router"] .vtab[aria-selected="true"]{border-color:var(--m-router); background:var(--m-router-soft);}
body[data-variant="router"] .vtab[aria-selected="true"] .vt-t{color:var(--m-router);}
body[data-variant="router"] .vbody{border-color:var(--m-router);}
body[data-variant="ap"] .vtab[aria-selected="true"]{border-color:var(--m-ap); background:var(--m-ap-soft);}
body[data-variant="ap"] .vtab[aria-selected="true"] .vt-t{color:var(--m-ap);}
body[data-variant="ap"] .vbody{border-color:var(--m-ap);}
body[data-variant="rep"] .vtab[aria-selected="true"]{border-color:var(--m-rep); background:var(--m-rep-soft);}
body[data-variant="rep"] .vtab[aria-selected="true"] .vt-t{color:var(--m-rep);}
body[data-variant="rep"] .vbody{border-color:var(--m-rep);}
body[data-variant="mesh"] .vtab[aria-selected="true"]{border-color:var(--m-mesh); background:var(--m-mesh-soft);}
body[data-variant="mesh"] .vtab[aria-selected="true"] .vt-t{color:var(--m-mesh);}
body[data-variant="mesh"] .vbody{border-color:var(--m-mesh);}
/* Variant visibility. Add a pair of rules per variant name; the shown
   value must match what each element type needs — restoring the wrong
   display value silently reflows the component (a .pair-link forced to
   block loses its row layout).
   !important on both directions: component base rules written later in
   this file (.pair-link is display:flex) otherwise outrank the hide rule
   and hanareya-only items leak into the normal tab. That is exactly what
   the 2026-08-13 review caught. */
[data-v]{display:none !important;}
body[data-variant="normal"] [data-v~="normal"],
body[data-variant="hanareya"] [data-v~="hanareya"],
body[data-variant="parent"] [data-v~="parent"],
body[data-variant="agent"] [data-v~="agent"],
body[data-variant="server"] [data-v~="server"],
body[data-variant="client"] [data-v~="client"],
body[data-variant="router"] [data-v~="router"],
body[data-variant="ap"] [data-v~="ap"],
body[data-variant="rep"] [data-v~="rep"],
body[data-variant="a"] [data-v~="a"],
body[data-variant="b"] [data-v~="b"],
body[data-variant="c"] [data-v~="c"]{display:block !important;}
body[data-variant="normal"] li[data-v~="normal"],
body[data-variant="hanareya"] li[data-v~="hanareya"],
body[data-variant="parent"] li[data-v~="parent"],
body[data-variant="agent"] li[data-v~="agent"],
body[data-variant="server"] li[data-v~="server"],
body[data-variant="client"] li[data-v~="client"],
body[data-variant="router"] li[data-v~="router"],
body[data-variant="ap"] li[data-v~="ap"],
body[data-variant="rep"] li[data-v~="rep"]{display:list-item !important;}
body[data-variant="normal"] span[data-v~="normal"],
body[data-variant="hanareya"] span[data-v~="hanareya"],
body[data-variant="parent"] span[data-v~="parent"],
body[data-variant="agent"] span[data-v~="agent"],
body[data-variant="server"] span[data-v~="server"],
body[data-variant="client"] span[data-v~="client"],
body[data-variant="router"] span[data-v~="router"],
body[data-variant="ap"] span[data-v~="ap"],
body[data-variant="rep"] span[data-v~="rep"]{display:inline !important;}
/* .prep li is a plain block (see its rule below) and is already covered by
   the li -> list-item rule above; only .pair-link needs flex restored. */
/* figure needs its own rule: the generic block restore would drop the
   figcaption's border layout, and a tab-switched figure is a whole element,
   not an inline fragment. */
body[data-variant="normal"] figure[data-v~="normal"],
body[data-variant="hanareya"] figure[data-v~="hanareya"],
body[data-variant="parent"] figure[data-v~="parent"],
body[data-variant="agent"] figure[data-v~="agent"],
body[data-variant="router"] figure[data-v~="router"],
body[data-variant="ap"] figure[data-v~="ap"],
body[data-variant="rep"] figure[data-v~="rep"]{display:block !important;}
body[data-variant="normal"] .pair-link[data-v~="normal"],
body[data-variant="hanareya"] .pair-link[data-v~="hanareya"],
body[data-variant="parent"] .pair-link[data-v~="parent"],
body[data-variant="agent"] .pair-link[data-v~="agent"]{display:flex !important;}

.art-h2{font-size:18px; margin:36px 0 10px; font-weight:700; display:flex; align-items:center; gap:10px;}
/* A numbered heading is a tinted band with an arrow-shaped tab on its left,
   so each step's start catches the eye while scrolling. The tab carries only
   the mark (1, 2, A, ✓, ＋): .stepnum also numbers non-procedure sections,
   so a "手順" label would be wrong there. */
.art-h2:has(> .stepnum){
  background:var(--m-rep-soft); border-radius:10px; overflow:hidden;
  padding:9px 16px 9px 0; gap:12px; line-height:1.45;
}
.stepnum{
  flex:none; align-self:stretch; margin:-9px 0; min-width:52px;
  padding:0 20px 0 14px; background:var(--m-rep); color:#fff; font-weight:700; font-size:21px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
/* per-article mode accents: set a body class on each article page */
body.mode-router .art-h2:has(> .stepnum){background:var(--m-router-soft);}
body.mode-ap .art-h2:has(> .stepnum){background:var(--m-ap-soft);}
body.mode-mesh .art-h2:has(> .stepnum){background:var(--m-mesh-soft);}
body.mode-all .art-h2:has(> .stepnum){background:var(--accent-soft);}
body.mode-router .stepnum{background:var(--m-router);}
body.mode-router .prep li::before{color:var(--m-router);}
body.mode-router .sw-pos.on{background:var(--m-router); border-color:var(--m-router);}
body.mode-router .sw-pos.on::after{color:var(--m-router);}
body.mode-ap .stepnum{background:var(--m-ap);}
body.mode-ap .prep li::before{color:var(--m-ap);}
body.mode-mesh .stepnum{background:var(--m-mesh);}
body.mode-mesh .prep li::before{color:var(--m-mesh);}
body.mode-all .stepnum{background:var(--accent);}
body.mode-all .prep li::before{color:var(--accent);}
.art-h3{font-size:15px; margin:20px 0 8px; font-weight:700;}
/* Alternative methods (方法A/B/C) are choices, not consecutive steps, so they
   stay quiet: a thin rule above and a tinted pill naming the method. */
.method{display:block; border-top:1px solid var(--line); padding-top:16px; line-height:1.45;}
.art-h3.method{margin-top:28px;}
.method-tag{
  display:flex; align-items:baseline; gap:3px; width:fit-content; margin:0 0 6px;
  padding:2px 12px 2px 11px; border-radius:999px;
  background:var(--m-rep-soft); color:var(--m-rep);
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
}
.method-tag span{font-size:16px; font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;}
body.mode-router .method-tag{background:var(--m-router-soft); color:var(--m-router);}
body.mode-ap .method-tag{background:var(--m-ap-soft); color:var(--m-ap);}
body.mode-mesh .method-tag{background:var(--m-mesh-soft); color:var(--m-mesh);}
body.mode-all .method-tag{background:var(--accent-soft); color:var(--accent-deep);}
/* used for the numbered sub-steps inside an alternative method (方法A/方法B) */
.art-h4{font-size:14px; margin:16px 0 6px; font-weight:700; color:var(--muted);}
.note{color:var(--muted); font-size:13px;}
/* mini-glossary line at the top of mode-variant articles */
.terms{
  font-size:12.5px; color:var(--muted); line-height:1.9;
  background:var(--line-soft); border-radius:9px; padding:9px 14px; margin:0 0 16px;
}
.terms strong{color:var(--ink);}

.goal{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 20px; margin:20px 0;
}
.goal .g-t{font-weight:700; font-size:14px; margin:0 0 8px;}
.diagram{
  display:flex; align-items:center; gap:6px;
  background:var(--line-soft); border-radius:10px; padding:20px 14px 16px; margin:18px 0 12px;
  justify-content:center; position:relative;
  border:2px solid transparent; cursor:pointer;
}
.diagram[aria-pressed="true"]{border-color:var(--m-rep);}
.diagram[aria-pressed="false"]{opacity:.45;}
.diagram[aria-pressed="false"]:hover{opacity:.75;}
.d-cap{
  position:absolute; top:-11px; left:12px;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--m-rep);
  border-radius:9px; padding:1.5px 10px; letter-spacing:.03em;
}
.diagram[aria-pressed="false"] .d-cap{background:var(--muted);}
.d-node{
  background:var(--card); border:1.5px solid var(--line); border-radius:9px;
  font-size:11px; text-align:center; padding:8px 10px; line-height:1.5; min-width:86px;
}
.d-node b{display:block; font-size:11.5px;}
.d-node.hero{border-color:var(--m-rep); border-width:2px;}
.d-node.hero b{color:var(--m-rep);}
.d-wave{color:var(--muted); font-size:14px; letter-spacing:2px; white-space:nowrap; flex:none;}
.d-wave::before{content:") ) )";}
.d-gap{
  align-self:stretch; display:flex; align-items:center; color:var(--muted);
  font-size:10px; writing-mode:vertical-rl; text-orientation:upright;
  border-left:2px dashed var(--muted); padding-left:4px; margin:0 4px;
}
@media (max-width:560px){
  .diagram{flex-direction:column; gap:8px;}
  .d-node{width:min(100%, 240px); min-width:0;}
  .d-wave{letter-spacing:0; line-height:1.05; text-align:center;}
  .d-wave::before{content:"\2227\A\2227\A\2227"; white-space:pre; display:block; font-size:11px;}
  .d-gap{
    writing-mode:horizontal-tb; text-orientation:mixed; align-self:center;
    border-left:none; border-top:2px dashed var(--muted);
    width:min(100%, 240px); justify-content:center;
    padding:4px 0 0; margin:2px 0;
  }
}

.prep{list-style:none; padding:0; margin:10px 0;}
/* The checkbox is positioned rather than laid out as a flex sibling: with
   display:flex every child of the li — including bare text runs, <strong>
   and <span class="note"> — becomes its own flex item, so a sentence with
   emphasis in the middle rendered as side-by-side columns and <br> did
   nothing. Keeping the li a block lets the text flow normally. */
.prep li{
  position:relative; padding-left:24px; margin:7px 0;
  font-size:13.5px; line-height:1.7;
}
/* No empty box: on a web page it reads as something to tick. A plain list
   gets a dot; a list of things to confirm (.check) gets a mark that is
   already ticked. */
.prep li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; color:var(--m-rep); background:currentColor;
}
.prep.check li::before{
  left:4px; top:.32em; width:6px; height:11px;
  border:solid currentColor; border-width:0 2.5px 2.5px 0; border-radius:0;
  background:none; transform:rotate(45deg);
}
.switches{
  display:flex; gap:18px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 20px; margin:12px 0;
}
.sw{flex:1; min-width:200px; padding-bottom:20px;}
.sw .sw-t{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.sw-track{display:flex; gap:4px;}
.sw-pos{
  flex:1; text-align:center; font-size:12px; padding:7px 4px; border-radius:8px;
  border:1.5px solid var(--line); color:var(--muted); background:var(--paper); line-height:1.4;
}
.sw-pos.on{background:var(--m-rep); border-color:var(--m-rep); color:#fff; font-weight:700; position:relative;}
.sw-pos.on::after{
  content:"▲ ここ"; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-20px; font-size:10px; color:var(--m-rep); white-space:nowrap; font-weight:700;
}
/* real screenshot */
figure.screen{
  margin:14px 0; padding:0;
  background:var(--line-soft); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
figure.screen img{
  /* width:auto, not 100%: a screenshot narrower than the column used to be
     stretched to fill it and came out blurry. Wide captures still shrink to
     fit via max-width; small ones now sit at their own size, centred. */
  display:block; width:auto; max-width:100%; height:auto;
  /* Always white, never var(--card): the line drawings exported from
     be64/*.svg are transparent outside the artwork, and the raster pieces
     lifted from the paper guide carry a baked-in #ffffff ground. On a dark
     card the transparent parts turned near-black and swallowed the black
     labels, while the pasted pieces stayed white. Diagram paper is white in
     both themes, and #ffffff exactly matches the baked-in ground so no seam
     shows. Opaque screenshots are unaffected. */
  margin:0 auto; background:#fff;
}
/* A whole-page capture of a long screen (the device list, the status page)
   runs for several screens at the column's width. Frame it and let the reader
   scroll inside, or click to open the whole thing at its own size. */
figure.screen.tall{max-height:74vh; overflow:auto; position:relative;}
/* On a phone the capture is the tall one, and a scrollable box there would
   swallow the page scroll — show the top of it and let the tap open the rest. */
@media (max-width:560px){
  figure.screen.tall{overflow:hidden;}
  figure.screen.tall::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
    background:linear-gradient(transparent, var(--card)); pointer-events:none;
  }
}
/* A capture is shrunk to fit the column, so the labels inside it are often
   too small to read. Clicking one opens it over the page at the file's own
   size; the overlay scrolls when the image is bigger than the window. */
figure.screen img{cursor:zoom-in;}
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(12,16,22,.88);
  overflow:auto; padding:56px 16px 32px; text-align:center;
}
.lightbox img{
  width:auto; max-width:none; height:auto; display:inline-block;
  background:#fff; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.lightbox-close{
  position:fixed; top:12px; right:14px; font-family:inherit; font-size:13px;
  font-weight:700; color:#fff; background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.7); border-radius:18px;
  padding:7px 16px; cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.3);}
figure.screen figcaption{
  font-size:12px; color:var(--muted); padding:8px 12px; line-height:1.6;
  border-top:1px solid var(--line);
}
/* Portrait screenshots (a phone's full screen, or a tall dialog) look wrong
   stretched to the article's full width — the figure ends up taller than
   the viewport. Cap it to roughly 55% on screens wide enough to spare the
   room; below that the article column is already narrow, so leave it at
   full width rather than shrinking a phone screenshot to a postage stamp. */
@media (min-width:600px){
  figure.screen.compact{max-width:55%; margin-left:auto; margin-right:auto;}
}

.shot{
  background:var(--line-soft); border:1.5px dashed var(--line); border-radius:10px;
  min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--muted); font-size:12px; margin:10px 0; text-align:center; padding:12px; line-height:1.7;
}
.shot code{
  font-family:"SF Mono",SFMono-Regular,Consolas,monospace; font-size:10.5px;
  color:var(--accent-deep); background:var(--card); padding:1px 8px; border-radius:5px;
}
.co{border-radius:11px; padding:13px 16px; margin:14px 0; font-size:13.5px; line-height:1.75;}
/* The VCCI class B statement is a fixed regulatory text printed in a plain
   ruled box on the paper guide; keep that look rather than a callout. */
.vcci{border:1.5px solid var(--ink); padding:12px 16px; margin:18px 0; font-size:13.5px; line-height:1.8;}
.vcci p{margin:0;}
.vcci .mark{float:right; margin-left:1em;}
.co .co-t{font-weight:700; display:block; margin-bottom:3px; font-size:12.5px; letter-spacing:.04em;}
/* A callout may carry a second heading when two related notes belong in one
   box. Every heading after the first needs air above it, or it sits flush
   against the previous paragraph and reads as part of that text. */
.co .co-t ~ .co-t{margin-top:12px;}
/* Each kind of callout carries its own pictogram on the heading, so the kind
   reads before the text does: a bulb for a tip, a triangle for a caution, an
   exclamation for a serious warning and a no-entry sign for "do not". Drawn
   as a mask so the icon takes the heading's colour in both themes. */
.co .co-t::before{
  content:""; display:inline-block; width:1.3em; height:1.3em;
  margin-right:.35em; vertical-align:-.28em; background:currentColor;
  -webkit-mask:var(--co-icon) center/contain no-repeat; mask:var(--co-icon) center/contain no-repeat;
}
.co.info{--co-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");}
.co.warn{--co-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 22 20.5H2Z'/%3E%3Cpath d='M12 10v5'/%3E%3Cpath d='M12 17.7v.1'/%3E%3C/svg%3E");}
.co.danger{--co-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6.5'/%3E%3Cpath d='M12 16.6v.1'/%3E%3C/svg%3E");}
.co.ban{--co-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7 12h10' stroke-width='2.8'/%3E%3C/svg%3E");}
.co.warn{background:var(--warn-bg); color:var(--warn-ink);}
.co.danger{background:var(--danger-bg);}
.co.danger .co-t{color:var(--danger);}
.co.info{background:var(--accent-soft);}
.co.info .co-t{color:var(--accent-deep);}
details.fold{border:1.5px solid var(--line); border-radius:11px; margin:14px 0; background:var(--card);}
details.fold summary{
  cursor:pointer; font-weight:700; font-size:13.5px; padding:12px 16px;
  color:var(--accent-deep); list-style:none; display:flex; align-items:center; gap:8px;
}
details.fold summary::before{
  content:""; width:7px; height:7px; flex:none;
  border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep);
  transform:rotate(-45deg); transition:transform .15s;
}
details.fold[open] summary::before{transform:rotate(45deg);}
details.fold .d-inner{padding:2px 18px 14px; font-size:13.5px; border-top:1px solid var(--line-soft);}
@media (prefers-reduced-motion: reduce){ details.fold summary::before{transition:none;} }
table.plain{border-collapse:collapse; width:100%; font-size:13px; margin:10px 0;}
table.plain th,table.plain td{border:1px solid var(--line); padding:7px 12px; text-align:left; line-height:1.6;}
table.plain th{background:var(--line-soft); font-weight:700;}
/* a divider row that groups the rows beneath it (e.g. "fields inside the
   DHCP server box", "fields shown only in manual mode") */
table.plain td.tsub{
  background:var(--line-soft); color:var(--muted);
  font-size:12px; font-weight:700; padding:5px 12px;
}
.pair-link{
  display:flex; gap:12px; align-items:center;
  border:2px solid var(--m-router); border-radius:12px; background:var(--card);
  padding:14px 16px; margin:16px 0; text-decoration:none; color:var(--ink);
}
.pair-link .t{font-weight:700; font-size:13.5px; display:block;}
.pair-link .d{font-size:12px; color:var(--muted); display:block;}
.done-banner{background:var(--accent-soft); border-radius:12px; padding:16px 20px; margin:24px 0 10px; font-size:14px;}
.done-banner .t{font-weight:700; color:var(--accent-deep); display:block; margin-bottom:2px;}
/* A yes/no question that sends the reader to one of two methods. The answer
   sits on the left and an arrow leads to the method, so the choice is made by
   matching one's own situation rather than by reading both descriptions. */
.branch{border:1.5px solid var(--line); border-radius:12px; background:var(--card); padding:14px 16px; margin:12px 0;}
.branch-q{margin:0 0 10px; font-weight:700; font-size:15px;}
.branch-opt{
  display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:10px; color:inherit; text-decoration:none;
  font-size:13px; line-height:1.7;
}
.branch-opt:hover{border-color:var(--accent);}
.branch-opt .b-ans{
  flex:none; width:7.5em; text-align:center; font-weight:700; font-size:13.5px;
  background:var(--accent-soft); color:var(--accent-deep); border-radius:8px; padding:6px 4px;
}
.branch-opt .b-to{flex:1; min-width:0; position:relative; padding-left:26px;}
.branch-opt .b-to::before{content:"→"; position:absolute; left:0; top:0; font-weight:700; color:var(--muted);}
.branch-opt .b-to b{display:block; font-size:14px; color:var(--accent-deep);}
@media (max-width:560px){
  .branch-opt{flex-direction:column; align-items:stretch; gap:6px;}
  .branch-opt .b-ans{width:auto;}
  .branch-opt .b-to{padding-left:22px;}
  .branch-opt .b-to::before{content:"↓";}
}
.next-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0;}
@media (max-width:560px){.next-grid{grid-template-columns:1fr;}}
/* three side-by-side figures, e.g. comparing wiring options */
.tri-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:12px 0;}
.tri-grid figure{margin:0;}
@media (max-width:700px){.tri-grid{grid-template-columns:1fr;}}
/* two illustrations side by side — the use-case pictures under each
   combination table in about-modes. */
.duo-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; align-items:start;}
/* "which switch position do I want" rows: the switch drawing next to the
   situation it belongs to. On a phone the drawing goes above the text —
   shrunk into a side column its printed labels stop being readable. */
/* A group heading above the combo rows, marked with the same pictogram the
   top page uses for that group (router = この1台で, waves = 広げる). */
.art-h3.pict-h{display:flex; align-items:center; gap:10px; font-size:16px; margin-top:26px;
  padding-bottom:6px; border-bottom:2px solid var(--line);}
.art-h3.pict-h .h-pict{flex:none; width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:#fff; background:var(--accent);}
.art-h3.pict-h .h-pict svg{width:24px; height:24px; display:block;}
.art-h3.pict-h.router{border-color:var(--m-router);} .art-h3.pict-h.router .h-pict{background:var(--m-router);}
.art-h3.pict-h.rep{border-color:var(--m-rep);} .art-h3.pict-h.rep .h-pict{background:var(--m-rep);}
.combo{display:grid; gap:10px; margin:12px 0;}
.combo-row{
  display:grid; grid-template-columns:112px minmax(0,240px) 1fr; gap:16px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
/* The switch drawing and the picture of that use sit side by side in one
   row, so each position is read together with where the unit goes. */
.combo-row img{width:100%; height:auto; display:block; background:#fff; border-radius:6px;}
.combo-row .pos{font-weight:700; font-size:14px; display:block;}
.combo-row .when{font-size:13px; display:block; margin-top:2px;}
.combo-row .note{margin:3px 0 0;}
.combo-row .go{font-size:13px; display:inline-block; margin-top:6px;}
@media (max-width:720px){
  .combo-row{grid-template-columns:96px 1fr; gap:8px 12px;}
  .combo-row > div{grid-column:1 / -1;}
}
.duo-grid figure{margin:0;}
@media (max-width:700px){.duo-grid{grid-template-columns:1fr;}}
.next-card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; text-decoration:none; color:var(--ink); font-size:13px; line-height:1.6;
}
.next-card:hover{border-color:var(--accent);}
.next-card b{display:block; font-size:13.5px;}
.trouble-list{list-style:none; padding:0; margin:10px 0;}
.trouble-list a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-size:13.5px; padding:9px 10px; border-radius:8px;
}
.trouble-list a:hover{background:var(--line-soft);}
.trouble-list a::before{
  content:"?"; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}

/* stub pages */
.stub-box{
  background:var(--card); border:2px dashed var(--line); border-radius:14px;
  padding:26px 24px; margin:22px 0; text-align:center; color:var(--muted); font-size:13.5px;
}
.stub-box .t{font-weight:700; font-size:15px; color:var(--ink); display:block; margin-bottom:6px;}
.stub-src{font-size:12px; color:var(--muted); margin-top:10px;}
.stub-src code{
  font-family:"SF Mono",SFMono-Regular,Consolas,monospace; font-size:10.5px;
  background:var(--line-soft); border-radius:4px; padding:0 5px;
}

footer.site{
  margin-top:48px; padding-top:14px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12px; display:flex; gap:8px 18px; flex-wrap:wrap;
}

/* ============ global hamburger menu (injected by site.js) ============ */
/* In-page jumps (a tab bar, a step heading) must not land under the fixed
   menu button on phones; on wide screens a little air is enough. */
.vtabs,[id]{scroll-margin-top:68px;}
@media (min-width:768px){ .vtabs,[id]{scroll-margin-top:16px;} }
.menu-btn{
  position:fixed; top:12px; left:12px; z-index:60;
  width:44px; height:44px; border-radius:12px; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-btn span{
  display:block; width:18px; height:2px; border-radius:1px; background:var(--ink);
  transition:transform .2s, opacity .2s;
}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .menu-btn span:nth-child(2){opacity:0;}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.drawer-overlay{
  position:fixed; inset:0; z-index:70; background:rgba(10,16,24,.4);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
body.menu-open .drawer-overlay{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:80;
  width:min(320px, 88vw); background:var(--card);
  border-right:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateX(-102%); transition:transform .22s;
  overflow-y:auto; padding:16px 20px 32px;
}
body.menu-open .drawer{transform:translateX(0);}
body.menu-open{overflow:hidden;}
@media (prefers-reduced-motion: reduce){
  .menu-btn span,.drawer,.drawer-overlay{transition:none;}
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.drawer-head .t{
  font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  font-weight:700; letter-spacing:.14em; font-size:13px; color:var(--accent);
}
.drawer-close{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:22px; line-height:1; padding:6px; font-family:inherit;
}
.drawer h3{
  font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.04em;
  margin:16px 0 4px;
}
.drawer a{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink); font-size:13.5px; line-height:1.6;
  padding:7px 8px; border-radius:8px; min-width:0;
}
.drawer a:hover{background:var(--line-soft);}
/* The chevron trails the label: leading it made the list read like a tree
   whose branches expand, when every item just navigates (ESSC review, No.1). */
.drawer a::after{
  content:""; flex:none; width:6px; height:6px; margin-left:auto;
  border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
.drawer a .chip{margin-left:auto;}
.drawer a .mdot{
  width:8px; height:8px; border-radius:50%; flex:none;
}
.drawer a .mdot.router{background:var(--m-router);}
.drawer a .mdot.ap{background:var(--m-ap);}
.drawer a .mdot.rep{background:var(--m-rep);}
.drawer a .mdot.mesh{background:var(--m-mesh);}
.drawer .drawer-support{
  margin-top:18px; padding-top:12px; border-top:1px solid var(--line);
}

/* Desktop: the drawer becomes a permanent sidebar and the page shifts over.
   body padding (not .wrap margin) keeps the content area centred in what
   space is left, for both the wide and narrow wrappers. */
@media (min-width:768px){
  body{padding-left:var(--sidebar-w);}
  .menu-btn,.drawer-overlay,.drawer-close{display:none;}
  .drawer{
    width:var(--sidebar-w); transform:none; box-shadow:none;
    background:var(--paper); padding-top:20px;
  }
  body.menu-open{overflow:visible;}
  .site-head,.brand{padding-left:0;}
  .drawer-head{border-bottom:none; margin-bottom:2px; padding-bottom:4px;}
  /* keep one entry on one line at this width */
  .drawer{padding-left:16px; padding-right:14px;}
  .drawer a{gap:7px; padding:6px 8px;}

  /* current page marker */
  .drawer a[aria-current="page"]{
    background:var(--accent-soft); color:var(--accent-deep); font-weight:700;
  }
  .skeleton-note{margin-left:calc(-1 * var(--sidebar-w)); padding-left:var(--sidebar-w);}
}

/* A sequence of lamp states to watch for — an observation, not a checklist,
   so it must not borrow .prep's checkbox. */
.lamp-seq{margin:8px 0 0; padding-left:1.3em; list-style:none;}
.lamp-seq li{position:relative; margin:4px 0; font-size:14px;}
.lamp-seq li::before{
  content:"→"; position:absolute; left:-1.3em; color:var(--muted); font-weight:700;
}

/* Small diagrams — a switch position, a lamp, a single port — carry little
   detail and should not be blown up to the full column width the way a
   screenshot is. Cap them and centre them instead. */
figure.screen.fig-sm{max-width:440px; margin-left:auto; margin-right:auto;}
figure.screen.fig-sm figcaption{text-align:center;}

/* Safety notices. Each item is a pictogram beside its rule, the way the
   printed guide sets them; the pictogram is decorative (alt=""), because the
   rule beside it already says what it means. */
.safety{list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:2px;}
.safety li{
  display:grid; grid-template-columns:44px 1fr; gap:0 14px; align-items:start;
  padding:12px 4px; border-bottom:1px solid var(--line-soft);
}
.safety li:last-child{border-bottom:none;}
/* The JIS safety symbols are transparent PNGs drawn for a white ground: the
   black pictogram inside the red prohibition ring, and the black 警告/注意
   wording, disappear on a dark card. Give every one of them white paper
   instead of inverting, which would recolour a standardised safety mark. */
.safety .pic,.safety-head img,.legend img{background:#fff; border-radius:3px;}
.safety .pic{width:40px; height:40px; display:block;}
.safety b{display:block; font-size:14.5px; margin-bottom:3px;}
.safety p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.75;}
/* The vent drawing under 通気口はふさがないでください (shown small, as in the paper and current manuals). */
.safety .vent{display:block; width:150px; height:auto; margin-top:8px; background:#fff; border-radius:4px;}
.safety-head{
  display:flex; align-items:center; gap:10px; margin:26px 0 0;
  padding-bottom:8px; border-bottom:2px solid var(--ink);
}
.safety-head img{height:26px; width:auto; display:block;}
.safety-head span{font-size:13px; color:var(--muted);}
.legend{list-style:none; margin:12px 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.legend li{display:grid; grid-template-columns:44px 1fr; gap:0 14px; align-items:center; font-size:13.5px;}
.legend img{display:block; max-width:100%;}

/* A portrait figure of the product itself. Capping the width would make a
   tall unit taller than the screen, so cap the height instead and let the
   width follow — the vertical order of the lamps is the information. */
/* width:max-content would size the box to the caption, not the image, and
   leave the figure's ground showing beside a narrow portrait shot. */
figure.screen.fig-tall{max-width:300px; margin-left:auto; margin-right:auto;}
figure.screen.fig-tall img{width:100%; height:auto;}
figure.screen.fig-tall figcaption{text-align:center;}

/* A capture taken on a Retina display carries twice the pixels for the same
   screen area. Rendering it at half its pixel width puts one image pixel on
   one device pixel, which is the only way a small screenshot stays sharp —
   at 1:1 a 1x capture is already soft on a Retina screen. Give the figure
   --w (the file's pixel width) and the image renders at half of it. */
figure.screen img.x2{width:calc(var(--w, 0) * 0.5px);}