/* ============================================================
   THE CAREER LAB — page-local styles (W7)
   Leans on design-system.css. Only Lab-specific pieces live here.
   Reused DS components: .folio .fig .field .state .loading-rule
   .cta .cta2 .kicker .deck .mono
   Red budget preserved: red = links, accents, one series only.
   ============================================================ */

.lab-h { font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1; letter-spacing:-.025em; margin-top:8px; }
.masthead h1 a { color:inherit; }
.masthead h1 a span { color:var(--red); }
/* Lead earns the full measure: headline spans up to ~1100px so it sits on one
   line at 1240; the deck keeps a ~840px reading measure. No half-empty row. */
.lab-lead { margin-top:36px; }
.lab-lead .lab-h { max-width:1100px; }
.lab-lead .deck { max-width:840px; }

/* ── AI disclaimer line (visible on the page + repeated per draft) ── */
.lab-disclaimer {
  margin-top:26px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
  border-left:2px solid var(--red); padding:6px 0 6px 14px;
}

.lab-section-sub { margin-top:18px; font-size:15px; color:var(--ink2); line-height:1.6; max-width:680px; }

/* ============================================================
   OUTPUTS LEDGER — one card per draft type
   ============================================================ */
.lab-outputs { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.lab-card {
  border:1px solid var(--rule); background:var(--paper); display:flex; flex-direction:column;
}
.lab-card-head {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--fig-bg); color:var(--fig-tx); padding:9px 18px; display:flex; justify-content:space-between; gap:12px;
}
.lab-card-head .lab-card-tag { color:var(--fig-tx); opacity:.72; }
.lab-card-body { padding:22px 24px 20px; display:flex; flex-direction:column; flex:1; }
.lab-card-title { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.015em; margin-bottom:8px; }
.lab-card-desc { font-size:14.5px; color:var(--ink2); line-height:1.55; margin-bottom:16px; }

/* inputs-needed row: which byn2 pieces feed this draft */
.lab-needs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.lab-need {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--hair); color:var(--mut); white-space:nowrap;
}
.lab-need.is-ready { border-color:var(--rule); color:var(--ink); }
.lab-need.is-ready::before { content:"✓ "; color:var(--red); font-weight:700; }

/* ── EMPTY-INPUT STATE (states which inputs it wants + links) ── */
.lab-empty { border-top:1px solid var(--hair2); padding-top:16px; margin-top:auto; }
.lab-empty p { font-size:14px; color:var(--ink2); line-height:1.55; margin-bottom:12px; }
.lab-empty-links { display:flex; flex-wrap:wrap; gap:8px 18px; }
.lab-empty-links a {
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  border-bottom:2px solid var(--red); padding-bottom:1px;
}
.lab-empty-links a:hover { color:var(--red); }

/* ── ACTION ROW (generate) ── */
.lab-actionrow { margin-top:auto; padding-top:8px; }
.lab-gen {
  background:var(--ink); color:var(--paper); font-family:var(--font-body); font-weight:700;
  font-size:13px; letter-spacing:.02em; padding:12px 24px; border:none; cursor:pointer; transition:.2s;
}
.lab-gen:hover { background:var(--red); color:#fff; }
.lab-gen[disabled] { background:var(--mut); cursor:not-allowed; }

/* ── LOADING (reuses .loading-rule from DS) ── */
.lab-loading { padding:4px 0; }
.lab-loading .lab-loading-msg { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }

/* ── DEGRADE / ERROR line (quiet; the "what it would use" report stays visible) ── */
.lab-degrade {
  font-size:14px; color:var(--ink2); line-height:1.55;
  border-left:2px solid var(--hair); padding-left:16px; margin-top:14px;
}
.lab-degrade.is-capacity { border-left-color:var(--red); }

/* ── RESULT: editable draft ── */
.lab-result { margin-top:4px; }
.lab-result-tools { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.lab-result-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.lab-draft {
  width:100%; min-height:150px; resize:vertical; border:1px solid var(--hair); background:var(--paper2); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.6; padding:14px 16px;
}
.lab-draft:focus { outline:none; border-color:var(--ink); }
.lab-draft-disclaimer {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-top:8px; line-height:1.5;
}
.lab-meta { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }

.lab-btnrow { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.lab-btn {
  background:none; border:1px solid var(--hair); color:var(--ink); font-family:var(--font-body);
  font-weight:600; font-size:12.5px; padding:9px 16px; cursor:pointer; transition:.2s;
}
.lab-btn:hover { border-color:var(--ink); }
.lab-btn.is-primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.lab-btn.is-primary:hover { background:var(--red); border-color:var(--red); color:#fff; }

/* ── STALE / REGENERATE OFFER (edited draft + inputs changed) ── */
.lab-stale {
  border:1px solid var(--red); background:var(--paper2); padding:14px 16px; margin-top:14px;
}
.lab-stale p { font-size:13.5px; color:var(--ink2); line-height:1.55; margin-bottom:12px; }
.lab-stale-links { display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   PROMPT LIBRARY (static, ported verbatim from v1)
   ============================================================ */
.lab-prompts { margin-top:28px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.lab-prompt { padding:20px 26px; border-left:1px solid var(--hair); display:flex; flex-direction:column; }
.lab-prompt:nth-child(3n+1) { border-left:none; padding-left:0; }
.lab-prompt .lab-prompt-cat { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.lab-prompt h4 { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em; margin:10px 0 6px; }
.lab-prompt .lab-prompt-desc { font-size:13px; color:var(--mut); line-height:1.5; margin-bottom:12px; }
.lab-prompt .lab-prompt-text {
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink2); line-height:1.5;
  background:var(--paper2); border:1px solid var(--hair2); padding:12px; margin-bottom:12px; word-break:break-word;
}
.lab-prompt .lab-copy {
  margin-top:auto; align-self:flex-start; background:none; border:1px solid var(--hair); color:var(--ink);
  font-family:var(--font-body); font-weight:600; font-size:11.5px; padding:7px 14px; cursor:pointer; transition:.2s;
}
.lab-prompt .lab-copy:hover { border-color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .lab-h { font-size:34px; }
  .lab-outputs { grid-template-columns:1fr; }
  .lab-prompts { grid-template-columns:1fr; }
  .lab-prompt { border-left:none; padding-left:0; padding-right:0; border-top:1px solid var(--hair2); }
  .lab-prompt:first-child { border-top:none; }
}
@media (max-width:640px){
  .lab-h { font-size:30px; }
  .lab-card-body { padding:20px 18px 18px; }
}
@media (max-width:400px){
  .lab-h { font-size:26px; }
}