/* Hardware guide and BOM components shared with GEAR DexUMI and GEAR Neck. */
: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; }
main > p { max-width:46rem; }
[id] { scroll-margin-top:1.25rem; }

.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); }

.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; color:var(--accent-dark); font:700 .75rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; }
.panel ul { margin:0; padding-left:1.1rem; }
.panel li { margin:.2rem 0; }

.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, .step.multi .body { grid-template-columns:1fr; }
.step.diagram .body, .step.diagram .figs { grid-template-columns:1fr; }
.step.diagram .figs img { max-height:30rem; }
.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); }

.step .figs, .diagrams { display:grid; grid-template-columns:1fr; gap:.75rem; margin:0; }
.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; }
.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; }

.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); color:var(--muted); font:700 .72rem/1.3 ui-monospace, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; 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; }

.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; }
}

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

/* assembly animation video */
.vid { margin:.5rem 0 1.25rem; }
.vid.live { max-width:46rem; }
.vid video { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.vid.photo img { 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); text-align:left; }
.vid figcaption strong { color:var(--fg); }

/* screenshots inside a step's instructions (print steps) */
.step .text .figs { max-width:34rem; margin:.6rem 0 .9rem; }
.step .text .figs img { max-height:22rem; }
.step.multi .text .figs { grid-template-columns:repeat(auto-fit,minmax(180px,230px)); }
.callout { margin-top:0; }

/* BOM tables: one line per row, part number column wide enough for the full number */
main.wide { max-width:none; }
.tbl.fit { width:fit-content; max-width:100%; }
table.oneline { width:100%; min-width:0; }
.tbl.fit table.oneline { width:auto; }
table.oneline th, table.oneline td { white-space:nowrap; }
table.oneline .pn { width:12.5rem; }
/* flexure grip parts listed under their assembly in the printed parts table */
table.oneline .subrow td:nth-child(2) { padding-left:1.75rem; color:var(--muted); }
table.oneline .subrow td { padding-top:.35rem; padding-bottom:.35rem; font-size:.9rem; }
/* BOM tables: tighter cells so the one-line rows fit the page */
body.bom .tbl th, body.bom .tbl td { padding:.6rem .65rem; }
body.bom .layout { max-width:1600px; }
/* print steps: software screenshots need more width than assembly photos */
.step[id^="print"] .text .figs { max-width:none; grid-template-columns:repeat(auto-fit, minmax(260px, 30rem)); }
.step[id^="print"] .text .figs img { max-height:26rem; }

/* Sidebar tabs: Gripper / Firmware (same as GEAR DexUMI); only one panel shows at a time */
.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; }
.side.acc li.tab:not(.open) > ol { display:none; }
#fw-panel > h2:first-child { margin-top:1rem; padding-top:0; border-top:0; }
/* long code lines scroll inside their box instead of widening the step card */
.step.nofig .body, .step.multi .body { grid-template-columns:minmax(0,1fr); }

/* top-level tab titles: UMI Robot Wrist (and the BOM tab headings) */
h1.xh-title { margin:4rem 0 0; padding-top:1.5rem; border-top:3px solid var(--accent); font-size:2.1rem; }
#wrist-panel h1.xh-title { margin-top:1rem; border-top:0; padding-top:0; }

/* custom CNC parts: the STEP link previews a picture of the part, as in GEAR DexUMI */
.hv.stp { border-bottom:0; cursor:pointer; }
.hv.stp img { width:400px; max-width:80vw; }

/* assembly steps (gripper "step…" and wrist "wr-step…"): the photos always sit on the right in a single column, so a
   step's photos can be added or swapped without changing its layout. The "multi" class no longer lays them out in a row. */
@media (min-width:801px) {
  .step[id^="step"]:not(.nofig):not(.diagram) .body,
  .step[id^="wr-step"]:not(.nofig):not(.diagram) .body { grid-template-columns:minmax(0,1fr) minmax(0,14.5rem); }
}
.step[id^="step"]:not(.nofig):not(.diagram) .figs,
.step[id^="wr-step"]:not(.nofig):not(.diagram) .figs { grid-template-columns:1fr; }
.step .figs figcaption { margin-top:.25rem; font-size:.8rem; color:var(--muted); }

/* Narrowest phones: step picture grids fall back to one column that fits the screen. */
@media (max-width:420px) {
  .step[id^="print"] .text .figs, .step.multi .figs, .step.multi .text .figs { grid-template-columns:minmax(0, 1fr); }
}