/* =========================================================
   Adelaide Home Lab — build reference
   style.css — extracted from index.html for maintainability
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root{
  --bg: #0D1114;
  --panel: #151B1F;
  --panel-2: #1B2227;
  --line: #262F35;
  --text: #E7EDEF;
  --muted: #8FA0A8;
  --dim: #5C6B72;
  --teal: #5EEAD4;
  --teal-dim: #2C6E64;
  --amber: #F2B663;
  --red: #E8836B;
  --purple: #B39DDB;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

/* ---------- reset & base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.6; font-size:16px;
}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
code, .mono{font-family:var(--mono);}

/* ---------- accessibility: skip link, focus, motion ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teal); color:#0A0D0F; padding:10px 16px;
  font-family:var(--mono); font-size:13px; font-weight:600; border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, .u-item a:focus-visible, .tab-nav label:focus-within{
  outline:2px solid var(--teal); outline-offset:2px; border-radius:2px;
}
summary{-webkit-tap-highlight-color:transparent;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- page shell / rail nav ---------- */
.shell{display:grid; grid-template-columns:230px 1fr; max-width:1320px; margin:0 auto;}
@media (max-width:900px){ .shell{grid-template-columns:1fr;} .rail{display:none;} }

.rail{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:1px solid var(--line); padding:24px 0;
}
.rail-brand{
  padding:0 18px 20px; font-family:var(--mono); font-size:13px; color:var(--dim);
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.rail-brand b{color:var(--teal); display:block; font-size:15px; letter-spacing:.02em;}
.rail-brand .v{display:inline-block; margin-top:4px; font-size:11px; color:var(--dim);}
.u-list{list-style:none; margin:0; padding:0;}
.u-item{display:grid; grid-template-columns:34px 1fr; align-items:center; border-bottom:1px solid var(--line);}
.u-item .u-num{font-family:var(--mono); font-size:11px; color:var(--dim); text-align:center; border-right:1px solid var(--line); padding:9px 0;}
.u-item a{display:block; padding:9px 12px; color:var(--muted); font-size:13px; font-family:var(--mono);}
.u-item a:hover, .u-item a.active{color:var(--teal); text-decoration:none; background:rgba(94,234,212,0.06);}

/* ---------- main / hero ---------- */
main{padding:48px 40px 120px;}
.hero{margin-bottom:56px;}
.hero .eyebrow{font-family:var(--mono); color:var(--teal); font-size:13px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.hero .eyebrow::before{content:''; width:8px; height:8px; background:var(--teal); border-radius:50%; box-shadow:0 0 8px var(--teal);}
.hero h1{font-weight:800; font-size:clamp(32px,4vw,48px); margin:14px 0 10px; letter-spacing:-0.02em; line-height:1.1;}
.hero p.lead{color:var(--muted); font-size:18px; max-width:660px; margin:0 0 22px;}
.status-strip{display:flex; gap:10px; flex-wrap:wrap;}
.pill{font-family:var(--mono); font-size:12px; padding:5px 10px; border-radius:20px; border:1px solid var(--line); color:var(--muted);}
.pill.ok{color:var(--teal); border-color:var(--teal-dim);}
.pill.warn{color:var(--amber); border-color:#5C4626;}

/* ---------- section headings ---------- */
section{margin-bottom:64px; scroll-margin-top:20px;}
section h2{font-weight:700; font-size:26px; margin:0 0 6px; padding-bottom:14px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px;}
section h2 .idx{font-family:var(--mono); color:var(--dim); font-size:16px; font-weight:400;}
section .kicker{color:var(--muted); margin:14px 0 24px; max-width:none;}
h3{font-size:16px; font-family:var(--mono); color:var(--teal); text-transform:uppercase; letter-spacing:.04em; margin:32px 0 12px;}
h4.sub{font-size:14px; font-family:var(--mono); color:var(--text); margin:20px 0 8px;}

/* ---------- callouts ---------- */
.callout{border:1px solid var(--line); background:var(--panel); border-left:3px solid var(--teal); padding:16px 18px; border-radius:4px; margin:18px 0; font-size:14.5px; color:var(--muted);}
.callout.fix{border-left-color:var(--amber);}
.callout.warn{border-left-color:var(--red);}
.callout.good{border-left-color:var(--teal);}
.callout b{color:var(--text);}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; margin:12px 0 8px; font-size:14.5px;}
th, td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
th{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); font-weight:500;}
td{color:var(--muted);}
td.hi, td b{color:var(--text); font-weight:600;}
tr:hover td{color:var(--text);}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px;}
.tbl-wrap table{margin:0;}
.tbl-wrap th:first-child, .tbl-wrap td:first-child{padding-left:16px;}
.tbl-wrap.matrix td, .tbl-wrap.matrix th{text-align:center; padding:8px 6px; font-size:13px;}
.tbl-wrap.matrix td:first-child, .tbl-wrap.matrix th:first-child{text-align:left; padding-left:12px;}

/* ---------- cards / grids ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
@media (max-width:700px){.grid2, .grid3{grid-template-columns:1fr;}}
.card{border:1px solid var(--line); background:var(--panel); border-radius:6px; padding:18px 20px;}
.card h4{margin:0 0 10px; font-size:15px; font-family:var(--mono); color:var(--text);}
.card .big{font-family:var(--mono); font-size:28px; color:var(--teal); font-weight:600;}
.card .unit{font-size:13px; color:var(--dim);}

/* ---------- checklists ---------- */
.checklist{list-style:none; padding:0; margin:12px 0;}
.checklist li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--muted);}
.checklist li::before{content:'☐'; color:var(--dim); font-size:16px; line-height:1;}
.checklist li.done::before{content:'☑'; color:var(--teal);}

/* ---------- collapsible phases (build checklist, security audit) ---------- */
details.phase{border:1px solid var(--line); border-radius:6px; margin:14px 0; overflow:hidden; background:var(--panel);}
details.phase summary{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; cursor:pointer; list-style:none; font-family:var(--mono); font-weight:600; color:var(--text); font-size:14.5px;}
details.phase summary::-webkit-details-marker{display:none;}
details.phase summary::after{content:'+'; color:var(--dim); font-size:20px; font-weight:400;}
details.phase[open] summary::after{content:'–';}
details.phase summary .goal{display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:3px; font-family:var(--sans);}
.phase-body{padding:4px 18px 18px; border-top:1px solid var(--line);}

/* ---------- collapsible steps (configuration steps) ---------- */
details.step{border:1px solid var(--line); border-radius:6px; margin:10px 0; background:var(--panel-2);}
details.step summary{padding:11px 16px; cursor:pointer; list-style:none; font-family:var(--mono); font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:10px;}
details.step summary::-webkit-details-marker{display:none;}
details.step summary::before{content:'▸'; color:var(--teal); font-size:12px;}
details.step[open] summary::before{content:'▾';}
.step-body{padding:2px 16px 16px 34px; font-size:14px; color:var(--muted);}
.step-body pre{background:#0A0D0F; border:1px solid var(--line); border-radius:5px; padding:12px 14px; overflow-x:auto; font-size:13px; color:var(--teal); margin:10px 0;}
.step-body ul, .step-body ol{margin:6px 0; padding-left:20px;}
.step-body li{margin:4px 0;}
.step-body ol{counter-reset:tier;}
.step-body ol > li{margin:6px 0;}

/* step-card metadata: difficulty, time, why, links, task checklist */
.step-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:2px 0 12px;}
.diff{font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em;}
.diff.beg{color:#5EEAD4; border:1px solid #2C6E64; background:rgba(94,234,212,.06);}
.diff.int{color:#F2B663; border:1px solid #5C4626; background:rgba(242,182,99,.06);}
.diff.adv{color:#E8836B; border:1px solid #7A3B2E; background:rgba(232,131,107,.06);}
.time-est{font-family:var(--mono); font-size:11px; color:var(--dim);}
.step-why{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal); padding:10px 14px; border-radius:4px; margin:8px 0 14px; font-size:13.5px; color:var(--muted);}
.step-why b{color:var(--text);}
.step-links{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px;}
.step-links .lbl{color:var(--dim); font-family:var(--mono); margin-right:8px;}
.step-links a{margin-right:16px;}
.task-list{list-style:none; margin:10px 0; padding:0;}
.task-list li{display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-size:13.5px; color:var(--muted);}
.task-list input[type=checkbox]{accent-color:var(--teal); margin-top:3px; cursor:pointer;}
.concept-svg{background:#0A0D0F; border:1px solid var(--line); border-radius:6px; padding:10px; margin:10px 0;}
.concept-svg svg{width:100%; height:auto; display:block;}
.concept-svg .drawio-embed{width:100%; min-height:80px;}
.tab-group-label{font-family:var(--mono); font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; margin:26px 0 4px;}

/* ---------- tabs (CSS-only, radio-driven) ---------- */
.tabs{margin:18px 0;}
.tabs input[type=radio]{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
.tab-nav{display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.tab-nav label{font-family:var(--mono); font-size:13px; padding:9px 16px; color:var(--muted); cursor:pointer; border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; margin-bottom:-1px;}
.tab-panel{display:none;}

#hw-opn:checked ~ .tab-nav label[for="hw-opn"],
#hw-mkt:checked ~ .tab-nav label[for="hw-mkt"],
#hw-pmx:checked ~ .tab-nav label[for="hw-pmx"],
#hw-nas:checked ~ .tab-nav label[for="hw-nas"],
#hw-kvm:checked ~ .tab-nav label[for="hw-kvm"],
#hw-jgs:checked ~ .tab-nav label[for="hw-jgs"],
#sv-net:checked ~ .tab-nav label[for="sv-net"],
#sv-proxy:checked ~ .tab-nav label[for="sv-proxy"],
#sv-backup:checked ~ .tab-nav label[for="sv-backup"],
#sv-media:checked ~ .tab-nav label[for="sv-media"],
#sv-mon:checked ~ .tab-nav label[for="sv-mon"],
#sv-home:checked ~ .tab-nav label[for="sv-home"],
#sv-mobile:checked ~ .tab-nav label[for="sv-mobile"],
#sv-dwu:checked ~ .tab-nav label[for="sv-dwu"],
#adv-git:checked ~ .tab-nav label[for="adv-git"],
#adv-k8s:checked ~ .tab-nav label[for="adv-k8s"],
#adv-ai:checked ~ .tab-nav label[for="adv-ai"],
#adv-trade:checked ~ .tab-nav label[for="adv-trade"],
#adv-sec:checked ~ .tab-nav label[for="adv-sec"]{
  color:var(--teal); border-color:var(--line); background:var(--panel);
}

/* ---------- buttons ---------- */
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 18px;}
.btn{font-family:var(--mono); font-size:12.5px; padding:8px 14px; background:var(--panel-2); border:1px solid var(--line); color:var(--teal); border-radius:5px; cursor:pointer;}
.btn:hover{border-color:var(--teal-dim); background:rgba(94,234,212,0.08);}
.btn.ghost{color:var(--muted);}

/* ---------- misc small components ---------- */
.vlan-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px;}
footer{border-top:1px solid var(--line); padding:32px 40px; color:var(--dim); font-size:13px; font-family:var(--mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
code.inline{background:var(--panel-2); border:1px solid var(--line); padding:1px 6px; border-radius:4px; font-size:13.5px; color:var(--teal);}

.changelog-row{display:grid; grid-template-columns:90px 130px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
.changelog-row .ver{font-family:var(--mono); color:var(--teal); font-weight:600;}
.changelog-row .date{font-family:var(--mono); color:var(--dim);}
.changelog-row .desc{color:var(--muted);}
.changelog-row .desc b{color:var(--text);}

/* ---------- diagrams (SVG) ---------- */
.diagram-wrap{border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:20px; margin:18px 0;}
.diagram-wrap svg{width:100%; height:auto; display:block;}
.diagram-wrap .drawio-embed{width:100%; min-height:120px;}
.diagram-wrap .drawio-embed iframe{background:#2D3142; border-radius:4px;}
.diagram-caption{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:10px; text-align:center;}
.legend-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--muted);}
.legend-row span{display:inline-flex; align-items:center; gap:6px;}
.legend-swatch{display:inline-block; width:18px; height:3px; border-radius:2px;}
svg .node-rect{transition:filter .15s ease;}
svg .node-rect:hover{filter:brightness(1.3);}
svg text{font-family:'IBM Plex Mono', monospace;}

/* ---------- print ---------- */
@media print{
  .rail, .btn-row{display:none;}
  .shell{grid-template-columns:1fr; max-width:none;}
  main{padding:0;}
  body{background:#fff; color:#111;}
  a{color:#111;}
  details{display:block !important;}
  details > summary{list-style:none;}
  .diagram-wrap, .callout, .card{break-inside:avoid;}
}