/* Hardware guide components shared with GEAR DexUMI. */
: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; }
.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; }
/* Pictures under the text share the width equally, so pictures on the same canvas show at the same size. */
.step.multi .figs { grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); max-width:38rem; }
.step.multi .figs img { max-height:none; }
.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; }

/* the closing card of the assembly guide */
.step.done { border-color:var(--accent); }
.step.done .num { font-size:1.1rem; }