/* ============================================================
   DONATO — Getting Started / onboarding page
   Extends css/style.css (same tokens). Page-specific components:
   chapter stepper, step sections, callouts, J3 pin-map.
   ============================================================ */

/* function-group accent colors for the J3 pin-map + legend */
:root{
  --grp-power:  var(--copper);
  --grp-led:    #d77bd0;   /* addressable-LED data */
  --grp-gpio:   #56a8e0;   /* level-shifted 5V I/O */
  --grp-out:    #e8623c;   /* MOSFET switch outputs */
}

/* ---------- compact onboarding hero ---------- */
.gs-hero{
  position:relative; overflow:hidden;
  padding:64px 0 40px; border-bottom:1px solid var(--line);
  background:radial-gradient(70% 120% at 12% 0%, rgba(224,138,60,.16), transparent 60%), var(--ink);
}
.gs-hero .eyebrow{margin-bottom:18px}
.gs-hero h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:700; max-width:16em}
.gs-hero .lede{max-width:40em}
.gs-hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ---------- sticky chapter stepper ---------- */
.gs-stepper-wrap{
  position:sticky; top:68px; z-index:40;
  background:rgba(14,17,22,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.gs-progress{height:3px; background:transparent}
.gs-progress-bar{
  height:100%; width:12%;
  background:linear-gradient(90deg,var(--copper-deep),var(--copper-2));
  transition:width .35s ease;
}
.gs-stepper{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin;
  padding:10px 0; -webkit-overflow-scrolling:touch;
}
.gs-stepper::-webkit-scrollbar{height:6px}
.gs-stepper::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.gs-step{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); color:var(--muted);
  font-family:var(--font-disp); font-weight:600; font-size:.9rem;
  cursor:pointer; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s;
}
.gs-step:hover{color:var(--text); border-color:var(--copper)}
.gs-step .gs-step-n{
  display:grid; place-items:center; flex:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--panel-2); color:var(--muted);
  font-size:.78rem; border:1px solid var(--line);
}
.gs-step.is-active{
  color:#1a1208; border-color:transparent;
  background:linear-gradient(135deg,var(--copper-2),var(--copper-deep));
  box-shadow:var(--shadow-copper);
}
.gs-step.is-active .gs-step-n{background:rgba(0,0,0,.22); color:#1a1208; border-color:transparent}
.gs-step.is-done{color:var(--text)}
.gs-step.is-done .gs-step-n{
  background:var(--copper-soft); color:var(--copper-2);
  border-color:rgba(224,138,60,.4);
}

/* ---------- step sections ---------- */
.step{padding:74px 0; border-bottom:1px solid var(--line)}
.step:nth-child(even){background:var(--ink-2)}
.step{scroll-margin-top:128px}            /* clears sticky header (68) + stepper */
.step-head{display:flex; align-items:flex-start; gap:20px; margin-bottom:30px}
.step-badge{
  flex:none; width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center; font-family:var(--font-disp);
  font-weight:700; font-size:1.5rem; color:var(--copper-2);
  background:var(--copper-soft); border:1px solid rgba(224,138,60,.34);
}
.step-head .kicker{display:block; margin-bottom:4px}
.step-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.step-body{max-width:64rem}
.step-body p{color:var(--muted); margin:0 0 16px}
.step-body strong{color:var(--text)}
.step-body a{color:var(--copper-2); border-bottom:1px solid transparent}
.step-body a:hover{border-color:var(--copper-2)}
.step-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em; background:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:.12em .45em; color:var(--copper-2);
}
.step-body h3{font-size:1.2rem; margin:30px 0 12px}

/* ordered step list */
.steps-list{list-style:none; counter-reset:s; padding:0; margin:18px 0 0; display:grid; gap:14px}
.steps-list li{
  position:relative; padding:2px 0 2px 46px; color:var(--muted);
}
.steps-list li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:0; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--copper-2); font-family:var(--font-disp); font-weight:700; font-size:.9rem;
}
.steps-list li strong{color:var(--text)}

/* checklist (reuse buy-list look) */
.gs-check{list-style:none; padding:0; margin:18px 0; display:grid; gap:11px}
.gs-check li{position:relative; padding-left:30px; color:var(--text)}
.gs-check li::before{
  content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px;
  display:grid; place-items:center; border-radius:6px; font-size:.72rem; font-weight:700;
  background:var(--copper-soft); color:var(--copper-2); border:1px solid rgba(224,138,60,.35);
}

/* ---------- callout boxes ---------- */
.callout{
  display:flex; gap:14px; padding:18px 20px; margin:22px 0;
  border:1px solid var(--line); border-left-width:4px; border-radius:var(--radius-sm);
  background:var(--panel); color:var(--muted); font-size:.97rem;
}
.callout .ic{flex:none; font-size:1.2rem; line-height:1.5}
.callout strong{color:var(--text)}
.callout.tip{border-left-color:var(--copper)}
.callout.warn{border-left-color:#e8623c; background:#241612}
.callout.warn strong{color:#ffb59c}
.callout.danger{border-left-color:#ef4444; background:#2a1414}
.callout.danger strong{color:#ffb4b4}

/* ---------- option cards (switch / control choices) ---------- */
.opt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.opt{
  background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  display:flex; flex-direction:column;
}
.opt.is-pick{border-color:rgba(224,138,60,.5); background:linear-gradient(160deg,var(--copper-soft),var(--panel))}
.opt-tag{font-family:var(--font-disp); font-weight:600; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.opt.is-pick .opt-tag{color:var(--copper-2)}
.opt h3{font-size:1.08rem; margin:10px 0 6px}
.opt p{color:var(--muted); font-size:.92rem; margin:0 0 10px}
.opt .opt-meta{margin-top:auto; color:var(--muted-2); font-size:.84rem; border-top:1px solid var(--line); padding-top:12px}

/* ---------- J3 pin-map ---------- */
.pinmap-frame{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:22px; margin:8px 0 22px; box-shadow:var(--shadow);
}
.pinmap-title{font-family:var(--font-disp); font-weight:600; color:var(--muted-2); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.pinmap{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch}
.pin{
  flex:0 0 auto; width:74px; text-align:center;
  border:1px solid var(--line); border-top-width:4px; border-radius:8px;
  background:var(--ink-2); padding:10px 6px 12px;
}
.pin .pin-screw{width:20px;height:20px;margin:0 auto 8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6b7682, #2b333d);
  border:1px solid #3a434f; position:relative}
.pin .pin-screw::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:2px;background:#0e1116;border-radius:1px;transform:rotate(35deg)}
.pin .pin-no{font-family:var(--font-disp); font-weight:700; font-size:1.05rem; color:var(--text)}
.pin .pin-lbl{font-family:var(--font-disp); font-weight:600; font-size:.78rem; margin-top:3px; color:var(--text); word-break:break-word}
.pin .pin-fn{font-size:.68rem; color:var(--muted-2); margin-top:3px; line-height:1.3}
.pin.g-power{border-top-color:var(--grp-power)}
.pin.g-led{border-top-color:var(--grp-led)}
.pin.g-gpio{border-top-color:var(--grp-gpio)}
.pin.g-out{border-top-color:var(--grp-out)}

.legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:6px}
.legend span{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem}
.legend i{width:12px; height:12px; border-radius:3px; flex:none}
.lg-power{background:var(--grp-power)} .lg-led{background:var(--grp-led)}
.lg-gpio{background:var(--grp-gpio)} .lg-out{background:var(--grp-out)}

/* detailed pin table */
.pin-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin:22px 0}
table.pin-table{width:100%; border-collapse:collapse; min-width:620px; background:var(--panel)}
.pin-table th,.pin-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.94rem; vertical-align:top}
.pin-table thead th{
  font-family:var(--font-disp); font-weight:600; color:var(--muted-2);
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; background:var(--ink-2);
}
.pin-table tbody tr:last-child td{border-bottom:0}
.pin-table td:first-child{font-family:var(--font-disp); font-weight:700; color:var(--text)}
.pin-table .tag{display:inline-block; font-family:var(--font-disp); font-weight:600; font-size:.72rem; padding:2px 8px; border-radius:999px; color:#1a1208}
.tag.g-power{background:var(--grp-power)} .tag.g-led{background:var(--grp-led)}
.tag.g-gpio{background:var(--grp-gpio)} .tag.g-out{background:var(--grp-out)}
.pin-table td strong{color:var(--text)}
.pin-table code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86em; color:var(--copper-2)}

/* code block */
.codeblock{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; overflow-x:auto; margin:14px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem;
  color:var(--text); line-height:1.6;
}
.codeblock .c{color:var(--muted-2)}

/* back-to-store / help footer cta */
.gs-help-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .opt-grid{grid-template-columns:1fr}
  .gs-help-grid{grid-template-columns:1fr}
  .gs-stepper-wrap{top:0}              /* header nav hidden on mobile, stepper to top */
  .step{scroll-margin-top:104px}
}
@media (max-width:560px){
  .step{padding:54px 0}
  .step-head{gap:14px}
  .step-badge{width:44px; height:44px; font-size:1.2rem}
}