/* Hardware guide layout. Loaded only by hardware.html, after style.css. */
:root { --card:#fafbf7; --chip-bg:#eef0e8; --blue:#3b82f6; --red:#dc2626; --green:#4ca31a; }
@media (prefers-color-scheme: dark) { :root { --card:#181b16; --chip-bg:#242820; --blue:#60a5fa; --red:#f87171; --green:#8bd62a; } }

main { max-width:62rem; }
h2 { margin:3.5rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:1.7rem; }
h2#tools { margin-top:2rem; }
h3 { margin:2rem 0 .75rem; font-size:1.15rem; }
h4 { margin:0; font-size:1.1rem; letter-spacing:-.01em; }
main > p, .tabpanel > p { max-width:46rem; }
.top, .layout { scroll-margin-top:0; }
[id] { scroll-margin-top:1.25rem; }

/* jump-to grid */
.jump { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; margin:0 0 1rem; }
.jump a { display:block; padding:.8rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.35; }
.jump a span { display:block; margin-bottom:.15rem; color:var(--accent-dark); font:700 .7rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; }
.jump a:hover { border-color:var(--accent-dark); }

/* tools and software */
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:1rem 0; }
.panel { padding:1rem 1.25rem; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.panel h3 { margin:0 0 .5rem; font:700 .75rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); }
.panel ul { margin:0; padding-left:1.1rem; }
.panel li { margin:.2rem 0; }

/* tables */
.tbl { margin:.5rem 0 1.5rem; border:1px solid var(--line); border-radius:10px; overflow-x:auto; background:var(--card); }
.tbl.narrow { max-width:34rem; }
.tbl table { margin:0; font-size:.95rem; min-width:34rem; }
.tbl.narrow table { min-width:0; }
.tbl th { background:var(--chip-bg); font:700 .72rem/1.3 ui-monospace, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tbl th, .tbl td { padding:.7rem .9rem; vertical-align:top; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl td p { margin:0 0 .4rem; }
.tbl td ul { margin:.2rem 0 0; padding-left:1.1rem; }
.tbl td li { margin:.1rem 0; }
.subs td:first-child { width:11rem; font-weight:600; }
.dot { display:inline-block; width:.7rem; height:.7rem; margin-right:.5rem; border-radius:50%; vertical-align:baseline; }
.dot-green { background:var(--green); } .dot-red { background:var(--red); } .dot-blue { background:var(--blue); }
.glue td:first-child { white-space:nowrap; font-weight:600; }
.chip { display:inline-block; padding:.05rem .6rem; border-radius:999px; background:var(--chip-bg); font-size:.8rem; font-weight:700; white-space:nowrap; }
.chip.left { color:var(--blue); } .chip.right { color:var(--accent-dark); } .chip.both { color:var(--muted); }

/* group headings */
.grp-title { display:flex; align-items:baseline; gap:.75rem; margin:2.5rem 0 .75rem; font-size:1.3rem; }
.grp-title .range { color:var(--muted); font:600 .75rem/1 ui-monospace, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; }

/* step cards: text on the left, photos on the right */
.step { margin:0 0 1rem; padding:1.1rem 1.25rem 1.25rem; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.step > header { display:flex; align-items:center; gap:.8rem; margin-bottom:.75rem; }
.step .num { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:2rem; height:2rem; padding:0 .4rem; margin:0; border-radius:999px; background:var(--accent); color:#10130d; font:800 .95rem/1 ui-monospace, Menlo, monospace; }
.step .body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,14.5rem); gap:1.5rem; align-items:start; }
.step.nofig .body { grid-template-columns:1fr; }
.step .text > :first-child { margin-top:0; }
.step .text p { margin:.5rem 0; }
.step .text ol { margin:.25rem 0; padding-left:1.4rem; }
.step .text ol li { margin:.3rem 0; padding-left:.2rem; }
.step .text ol li::marker { color:var(--accent-dark); font-weight:700; }
.note { margin:.9rem 0 .25rem !important; padding:.6rem .9rem; border-left:3px solid var(--accent-dark); border-radius:0 6px 6px 0; background:var(--callout); color:var(--fg); font-size:.95rem; }
.note strong, .notes strong { color:var(--accent-dark); }
.notes { margin:.9rem 0 .25rem; padding:.2rem .9rem; border-left:3px solid var(--accent-dark); border-radius:0 6px 6px 0; background:var(--callout); font-size:.95rem; }
.notes p { margin:0 !important; padding:.5rem 0; }
.notes p + p { border-top:1px solid var(--line); }
main > .note, .tabpanel > .note { max-width:46rem; }

.step .figs, .diagrams { display:grid; grid-template-columns:1fr; gap:.75rem; margin:0; }
.step.multi .body { grid-template-columns:1fr; }
.step.multi .figs { grid-template-columns:repeat(auto-fit,minmax(180px,230px)); }
.figs figure { width:auto; flex:none; margin:0; }
.figs img { width:100%; height:auto; max-height:18rem; aspect-ratio:auto; object-fit:contain; background:var(--callout); }
.diagrams { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:.5rem 0 1.5rem; }
.diagrams img { max-height:30rem; background:#fff; }
figcaption { margin-top:.35rem; color:var(--muted); font-size:.85rem; text-align:center; }

/* sidebar: show steps only for the section being read */
.side { padding-top:1.25rem; }
.side .range { margin-left:.4rem; color:var(--muted); font:600 .7rem/1 ui-monospace, Menlo, monospace; }
.side.acc li.grp > ol { display:none; }
.side.acc li.grp.open > ol { display:block; }
.side.acc li.l2.grp > ol { display:none; }
.side.acc li.l2.grp.open > ol { display:block; }

@media (max-width:800px) {
  .step .body { grid-template-columns:1fr; }
  h2 { font-size:1.45rem; }
}

#wire-table + .tbl td:nth-child(2), #wire-table + .tbl td:nth-child(3) { white-space:nowrap; }

.tooltbl td:first-child { width:5rem; }
.tooltbl td > img { display:block; width:4rem; height:auto; background:#fff; border-radius:6px; }
.step { position:relative; }
.step:has(.gd) { padding-bottom:2.8rem; }
.step .gd { display:inline-flex; gap:1rem; position:absolute; left:1.25rem; bottom:.85rem; margin:0; }
.step .gd .dot { margin:0; width:.8rem; height:.8rem; }
.step .gd { align-items:center; }
.step .gd .gl { margin-right:.3rem; font-size:.8rem; font-weight:700; color:var(--muted); }

/* Sidebar tabs: Exoskeleton / X hand */
.side ol.tabs > li.tab { margin:0 0 .5rem; }
.side .tabbtn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.5rem .75rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; font-size:1rem; font-weight:800; text-align:left; cursor:pointer; }
.side .tabbtn::after { content:"+"; color:var(--muted); font-weight:700; }
.side li.tab.open > .tabbtn { border-color:var(--accent-dark); }
.side li.tab.open > .tabbtn::after { content:"\2212"; }
.side .tabbtn:hover { border-color:var(--accent-dark); }
.side ol.tabs > li.tab > ol.nav1 { margin:.75rem 0 0; padding:0 0 0 .25rem; }
h1.xh-title { margin:4rem 0 0; padding-top:1.5rem; border-top:3px solid var(--accent); font-size:2.1rem; }

/* Placeholder for assembly animation videos */
.vid { margin:.5rem 0 1.25rem; max-width:30rem; }
.vid-box { position:relative; aspect-ratio:16 / 9; border:1px solid var(--line); border-radius:12px; background:repeating-linear-gradient(135deg, var(--callout) 0 14px, var(--card) 14px 28px); display:flex; align-items:center; justify-content:center; }
.vid-play { width:3.5rem; height:3.5rem; border-radius:50%; background:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.2); position:relative; }
.vid-play::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-35%, -50%); border-style:solid; border-width:.7rem 0 .7rem 1.1rem; border-color:transparent transparent transparent #10130d; }
.vid.live { max-width:46rem; }
.vid video { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.vid figcaption { margin-top:.5rem; font-size:.9rem; color:var(--muted); }
.vid figcaption strong { color:var(--fg); }
.step .gd .gg { display:inline-flex; align-items:center; gap:.4rem; }
.nb { white-space:nowrap; }

/* bill of materials */
body.bom h2#tools { margin-top:3.5rem; }

/* Exoskeleton and X Hand are separate tabs: only one panel shows at a time */
#xh-panel h1.xh-title { margin-top:1rem; border-top:0; padding-top:0; }

.xh-video { margin:1rem 0 1.5rem; }
.xh-video video { display:block; width:100%; max-width:46rem; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.xh-video figcaption { margin-top:.4rem; color:var(--muted); font-size:.85rem; }
/* photo placeholder: stands in for a picture that is still to come */
.ph-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; height:14rem; border:2px dashed var(--line); border-radius:8px; background:var(--callout); color:var(--muted); font:700 .8rem/1.3 ui-monospace, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; }
.ph-box span { font-weight:600; font-size:.7rem; }


/* Part numbers in the instructions: hover (or focus) shows the part's STEP render, click opens it in the BOM. */
.hv.part { color:inherit; text-decoration:none; cursor:pointer; }
.hv.part:hover { color:var(--accent-dark); }
.hv.part img { width:400px; max-width:80vw; font-weight:400; }
.tbl.narrow.sizes { max-width:48rem; }
/* A photo placed directly under one part of a step. */
.li-fig { float:right; width:8.5rem; margin:.15rem 0 .5rem 1rem; }
.li-fig img { display:block; width:100%; height:auto; border-radius:8px; background:var(--callout); }
.step .text ol li:has(.li-fig)::after { content:""; display:block; clear:both; }
/* Two tool photos side by side beside one part of a step. */
.li-figs { float:right; display:flex; gap:.4rem; margin:.15rem 0 .5rem 1rem; }
.li-figs .li-fig { float:none; width:7rem; margin:0; }