/* components.css */

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.01em;border-radius:var(--r-sm);
  padding:.72rem 1.4rem;
  transition:all .18s;white-space:nowrap;cursor:pointer;
  border:none;
}
.btn svg{width:14px;height:14px;transition:transform .18s;flex-shrink:0;}
.btn:hover svg{transform:translateX(3px);}
.btn-ink{background:var(--ink);color:var(--bg);}
.btn-ink:hover{background:var(--red);}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red-dark);}
.btn-outline{border:1.5px solid var(--border-lg);color:var(--ink);background:transparent;}
.btn-outline:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn-ghost{color:var(--ink-2);background:transparent;padding-left:0;padding-right:0;}
.btn-ghost:hover{color:var(--red);}
.btn-lg{padding:.9rem 1.8rem;font-size:.88rem;}
.btn-sm{padding:.45rem .9rem;font-size:.75rem;}

/* ── Callout ── */
.callout{
  border-left:3px solid var(--red);
  background:var(--red-soft);
  padding:1.2rem 1.4rem;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:1.75rem 0;
}
.callout-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-bottom:.4rem;
}
.callout p{margin:0;font-size:.875rem;color:var(--ink-2);line-height:1.75;}

/* ── Decision table ── */
.dtable{border:1px solid var(--border-md);border-radius:var(--r-md);overflow:hidden;margin:1.5rem 0;}
.dtable-head{
  background:var(--ink);color:var(--bg);
  padding:.6rem 1.2rem;
  font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
[data-theme="dark"] .dtable-head{background:var(--bg-muted);color:var(--ink);}
.dtable-row{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid var(--border);}
.dtable-row:last-child{border-bottom:none;}
.dk{
  padding:.85rem 1.2rem;
  background:var(--bg-muted);border-right:1px solid var(--border);
  font-size:.72rem;font-weight:600;color:var(--ink-3);
}
.dv{padding:.85rem 1.2rem;font-size:.865rem;color:var(--ink-2);line-height:1.7;}

/* ── Insight list ── */
.insights{display:flex;flex-direction:column;gap:.55rem;margin:1.25rem 0;}
.insight{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--bg-card);border:1px solid var(--border);
  box-shadow:var(--sh-sm);
}
.idot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:.55rem;}
.insight p{font-size:.865rem;color:var(--ink-2);margin:0;line-height:1.72;}

/* ── Methods grid ── */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1.25rem 0;}
.method{border:1px solid var(--border);border-radius:var(--r-md);padding:1.2rem;background:var(--bg-card);}
.m-icon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--red-soft);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;}
.m-icon svg{width:16px;height:16px;color:var(--red);}
.method h4{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.2rem;}
.method p{font-size:.75rem;color:var(--ink-3);line-height:1.55;margin:0;}

/* ── Metrics row ── */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.5rem 0;}
@media(max-width:500px){.metrics{grid-template-columns:1fr;}}
.metric{padding:1.6rem 1.4rem;border-radius:var(--r-md);background:var(--ink);}
.metric-v{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:#fff;display:block;line-height:1;margin-bottom:.3rem;}
.metric-d{color:#4ade80;font-size:.74rem;font-weight:600;display:block;margin-bottom:.3rem;}
.metric-l{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:500;letter-spacing:.03em;}

/* ── Wireframe block ── */
.wf{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin:1.5rem 0;box-shadow:var(--sh-md);}
.wf-bar{background:var(--bg-muted);padding:.5rem .9rem;display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--border);}
.wf-dot{width:10px;height:10px;border-radius:50%;}
.wf-lbl{font-size:.64rem;font-weight:500;color:var(--ink-3);margin-left:auto;}
.wf-body{padding:1.6rem;}

/* ── Lightbox ── */
#lightbox{position:fixed;inset:0;background:rgba(8,9,18,.95);z-index:900;display:none;align-items:center;justify-content:center;padding:2rem;}
#lightbox.open{display:flex;}
#lb-img{max-width:90vw;max-height:85vh;border-radius:var(--r-sm);}
#lb-close,#vm-close{position:absolute;top:1.2rem;right:1.5rem;font-size:1.6rem;color:rgba(255,255,255,.5);cursor:pointer;background:none;border:none;line-height:1;transition:color .18s;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.12);}
#lb-close:hover,#vm-close:hover{color:#fff;background:rgba(255,255,255,.1);}
#lb-cap{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:.8rem;text-align:center;white-space:nowrap;}

/* ── Video modal ── */
#vid-modal{position:fixed;inset:0;background:rgba(8,9,18,.95);z-index:900;display:none;align-items:center;justify-content:center;padding:2rem;}
#vid-modal.open{display:flex;}
#vm-inner{width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);overflow:hidden;}
#vm-inner iframe{width:100%;height:100%;border:none;}

/* ── Section labels ── */
.sec-num{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.75rem;}
.sec-num-light{color:rgba(224,62,18,.6);}

/* ── Skill tags ── */
.skill-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.skill-tag{font-size:.74rem;font-weight:500;padding:.28rem .65rem;border:1px solid var(--border-md);border-radius:var(--r-sm);color:var(--ink-2);background:var(--bg-muted);transition:border-color .18s,color .18s;}
.skill-tag:hover{border-color:var(--red);color:var(--red);}
.skill-grp-l{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem;}