/* THE PEN — components for the sixteen tools. Brand v3 tokens come from journey.css; generic chrome
   (tabs, toolhead, cards, settings, listen, shelf, certificate) from pen-base.css. */

/* ---------- shared ---------- */
.row2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.warncell{color:var(--red)}
.goodcell{color:var(--chrome-hi)}
.tbl tr.on td{background:rgba(236,238,242,.05)}
.tbl tr.done td{opacity:.5}
.stat.bad .v{color:var(--red)}
.stat.good .v{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.select-wrap select{width:100%}
pre.su-sheet,pre.rt-sheet{white-space:pre-wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:12px;line-height:1.9;color:var(--dim);margin-top:12px;overflow-x:auto}

/* ---------- THE DESK ---------- */
.dk-line{display:grid;grid-template-columns:36px 1fr 110px auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.dk-syl{color:var(--chrome-mid);text-align:right}
.dk-text{line-height:1.5}
.dk-last{color:var(--ash);font-size:10px}
.dk-flags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dk-flag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.dk-flag.red{border-color:rgba(212,42,42,.5);color:var(--red)}
.dk-flag.amber{border-color:rgba(236,238,242,.25);color:var(--chrome-mid)}
.dk-flag.good{border-color:rgba(236,238,242,.35);color:var(--chrome-hi)}
.dk-verdicts{margin-top:16px;display:grid;gap:8px}
.dk-v{font-size:14px;color:var(--dim);border-left:2px solid var(--line);padding-left:12px}
.dk-v.good{border-color:var(--chrome-hi);color:var(--white)}
.dk-v.warn{border-color:var(--chrome-mid)}
.dk-v.bad{border-color:var(--red);color:var(--white)}
.dk-sec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.dk-sec b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:15px;font-weight:400}
.dk-pairs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dk-pairs span{border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.dk-stress{display:grid;gap:6px;margin-top:10px}
.dk-stress>div{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:11px;color:var(--dim);border-bottom:1px solid var(--line-soft);padding-bottom:5px}

/* ---------- THE RHYME ---------- */
.rh-head{display:flex;justify-content:space-between;align-items:baseline}
.rh-head b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:16px;font-weight:400}
.rh-chips{margin-top:10px;max-height:190px;overflow:auto}
.rh-verdict{margin-top:16px;border:1px solid var(--line);border-left:3px solid var(--chrome-mid);border-radius:var(--r);padding:16px;background:var(--panel)}
.rh-verdict.perfect{border-left-color:var(--chrome-hi)}
.rh-verdict.none,.rh-verdict.unknown{border-left-color:var(--red)}
.rh-verdict h3{margin:6px 0}

/* ---------- THE SPARK ---------- */
.sp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sp-clock{font-size:34px;letter-spacing:.06em;color:var(--chrome-hi)}
.sp-clock.red{color:var(--red)}
.sp-senses{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:16px 0}
.sp-senses>div{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--panel-2)}
.sp-senses b{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-hi)}
.sp-senses span{font-size:12px;color:var(--dim)}
.sp-seeds{display:grid;gap:8px}
.sp-seed{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.sp-txt{font-size:15px;line-height:1.45}
.sp-acts{display:flex;gap:6px}
.sp-list{color:var(--dim);line-height:2;padding-left:20px}
.sp-list li.on{color:var(--white)}

/* ---------- THE TITLES ---------- */
.ti-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ti-head b{font-family:var(--font-display);text-transform:uppercase;font-size:15px;letter-spacing:.04em;font-weight:400}
.ti-make{margin:8px 0 10px;color:var(--chrome-mid)}
.ti-progress{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:14px}
.ti-list{display:grid;gap:6px;margin-top:8px}
.ti-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line-soft);padding:7px 0}
.ti-row.kept{background:rgba(236,238,242,.04)}
.ti-t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:17px}
.ti-acts{display:flex;gap:6px}

/* ---------- THE MAP ---------- */
.mp-bar{display:flex;height:34px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px;background:var(--panel-2)}
.mp-bar i{position:relative;display:grid;place-items:center;font-style:normal;border-right:1px solid var(--void);min-width:2px;transition:width .3s}
.mp-bar i span{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,11,.7)}
.mp-intro{background:#3A3A40}.mp-verse{background:#6E747C}.mp-pre{background:#8E959E}.mp-chorus{background:var(--chrome-hi)}
.mp-post{background:#C9CDD3}.mp-bridge{background:var(--crimson)}.mp-solo{background:#4A4A52}.mp-outro{background:#2A2A30}
.mp-hook16{background:var(--chrome-hi)}.mp-verse16{background:#6E747C}
.mp-rows{display:grid;gap:6px}
.mp-row{display:grid;grid-template-columns:34px 170px 90px 150px 1fr auto;gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.mp-n{color:var(--ash)}
.mp-job{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-flags{display:grid;gap:8px;margin-top:8px}
.mp-flag{font-size:14px;color:var(--dim);border-left:2px solid var(--line);padding-left:12px}
.mp-flag.good{border-color:var(--chrome-hi);color:var(--white)}
.mp-flag.warn{border-color:var(--chrome-mid)}
.mp-flag.bad{border-color:var(--red);color:var(--white)}
.mp-flag.note{border-color:var(--chrome-lo);font-size:13px}

/* ---------- THE BED ---------- */
.bd-now{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.bd-now b{font-family:var(--font-display);font-size:clamp(38px,7vw,70px);line-height:.9;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bd-now span{font-family:var(--font-mono);font-size:18px;color:var(--dim)}
.bd-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.bd-guide{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;color:var(--chrome-mid)}
.bd-guide span{border:1px solid var(--line);border-radius:3px;padding:4px 9px;color:var(--chrome-hi)}
.bd-guide small{color:var(--ash);margin-left:4px}
.bd-chords{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.bd-chords span{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-family:var(--font-display);text-transform:uppercase;font-size:16px;letter-spacing:.04em;color:var(--dim);background:var(--panel-2)}
.bd-chords span.on{color:var(--black);background:var(--chrome-grad);border-color:transparent}
.bd-chords small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ash);margin-top:2px}
.bd-chords span.on small{color:rgba(10,10,11,.7)}

/* ---------- THE HOOK LAB ---------- */
.hk-song{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.hk-song b{font-family:var(--font-display);text-transform:uppercase;font-size:17px;letter-spacing:.04em;font-weight:400}
.hk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.hk-card{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--panel-2)}
.hk-card.winner{border-color:var(--chrome-mid);box-shadow:inset 0 0 0 1px rgba(236,238,242,.08)}
.hk-top{display:flex;justify-content:space-between}
.hk-score.good{color:var(--chrome-hi)}
.hk-score.warn{color:var(--red)}
.hk-text{font-size:16px;line-height:1.4;margin:10px 0 12px}
.hk-listeners{margin:10px 0;display:grid;gap:4px}
.hk-card .checklist label{padding:5px 8px;font-size:12px}

/* ---------- THE WRITERS ---------- */
.wr-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.wr-card.studied{border-color:var(--chrome-lo)}
.wr-lane{color:var(--chrome-mid);margin-left:6px}
.wr-more{margin-top:8px;display:grid;gap:4px;color:var(--ash)}
.wr-steals{display:grid;gap:8px}
.wr-steal{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.wr-steal label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.wr-steal.done{opacity:.55}

/* ---------- THE CO-WRITE ---------- */
.cw-targets{display:grid;gap:10px}
.cw-target{display:grid;grid-template-columns:1fr 180px auto;gap:12px;align-items:center;border-bottom:1px solid var(--line-soft);padding-bottom:10px}

/* ---------- THE SPLITS ---------- */
.sl-rows{display:grid;gap:8px}
.sl-row{display:grid;grid-template-columns:1.2fr 1.1fr 90px 110px 150px 1fr auto;gap:8px;align-items:center}
.sl-signs{display:grid;gap:8px;margin-top:10px}
.sl-sign{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;background:var(--panel-2)}
.sl-sign.on{border-color:var(--chrome-lo);color:var(--chrome-hi)}

/* ---------- THE FORM ---------- */
.fm-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.fm-card:hover{border-color:var(--chrome-lo)}
.fm-pitch{border-left:2px solid var(--chrome-mid);padding:10px 14px;margin-top:10px;font-size:15px;color:var(--white);background:var(--panel-2)}

/* ---------- THE CATALOG ---------- */
.ct-tbl tr.ct-ready td:first-child{border-left:2px solid var(--chrome-hi)}
.ct-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-vers label{font-size:12px}
.ct-pitches{margin-top:10px;display:grid;gap:8px;border-top:1px solid var(--line-soft);padding-top:10px}
.ct-grid td{text-align:center;font-family:var(--font-mono);font-size:12px}
.ct-grid td:first-child{text-align:left;font-family:var(--font-body);font-size:13px}
.ct-empty{color:var(--ash);background:rgba(212,42,42,.06)}
.ct-part{color:var(--chrome-mid)}
.ct-full{color:var(--black);background:var(--chrome-grad)}

/* ---------- THE SETUP ---------- */
.su-step{border-left:2px solid var(--line)}
.su-step.lit{border-left-color:var(--chrome-hi)}
.su-head{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:flex-start}
.su-n{color:var(--ash);padding-top:3px}
.su-head b{font-family:var(--font-display);text-transform:uppercase;font-size:16px;letter-spacing:.04em;font-weight:400}
.su-chk{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);cursor:pointer;white-space:nowrap}
.su-breaks{margin-top:10px;font-size:13.5px;color:var(--dim);border-left:2px solid rgba(212,42,42,.45);padding-left:12px}
.su-breaks b{color:var(--red);font-weight:400;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:3px}
.su-cost{margin-top:10px}

/* ---------- THE PLATFORMS ---------- */
.pl-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pl-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pl-status{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--line);color:var(--dim)}
.pl-status.st-open{color:var(--chrome-hi);border-color:var(--chrome-lo)}
.pl-status.st-closed{color:var(--red);border-color:rgba(212,42,42,.4)}
.pl-status.st-closing{color:var(--red);border-color:rgba(212,42,42,.4)}
.pl-status.st-selective{color:var(--chrome-mid)}
.pl-fee{margin-top:10px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel-2);font-size:13px;color:var(--dim)}
.pl-fee b{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-mid);margin-bottom:4px;font-weight:400}
.pl-fee.unsourced{border-style:dashed}
.pl-fee.unsourced b{color:var(--red)}
.pl-fee.big{font-size:15px;color:var(--white)}

/* ---------- THE RATE CARD ---------- */
.rt-floor{font-family:var(--font-display);font-size:34px;line-height:1;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:6px}
.rt-work{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--panel-2);font-size:11px}
.rt-work b{color:var(--chrome-hi)}
.rt-tier{background:var(--panel-2)}
.rt-term{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;margin-bottom:8px}

/* ---------- THE LEDGER ---------- */
.lg-lanes td:first-child{max-width:340px}
.lg-pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;border-bottom:1px solid var(--line-soft);padding:10px 0}
.lg-verdict{margin-top:16px;border-left:2px solid var(--chrome-mid);padding:12px 14px;background:var(--panel-2);font-size:14px;color:var(--white)}
.lg-verdict.warn{border-left-color:var(--red)}
.lg-verdict.good{border-left-color:var(--chrome-hi)}
.lg-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--dim)}
.lg-row b{color:var(--white);font-weight:400;font-family:var(--font-mono)}
.lg-row.tot{border-bottom:0;border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--white)}
.lg-bars{display:grid;gap:8px;margin-top:16px}
.lg-bar{display:grid;grid-template-columns:200px 1fr 90px;gap:12px;align-items:center;font-size:13px;color:var(--dim)}
.lg-bar i{display:block;height:8px;border-radius:4px;background:var(--chrome-bar);min-width:2px}
.lg-bar b{font-family:var(--font-mono);font-size:12px;color:var(--white);text-align:right;font-weight:400}

/* ---------- phones ---------- */
@media (max-width:900px){
  .dk-line{grid-template-columns:30px 1fr;gap:8px}
  .dk-last,.dk-flags{grid-column:2;justify-content:flex-start}
  .mp-row{grid-template-columns:28px 1fr 70px;row-gap:4px}
  .mp-row .mono,.mp-job{grid-column:2/-1}
  .sl-row{grid-template-columns:1fr 1fr;row-gap:6px}
  .cw-target,.lg-pick,.lg-bar,.rt-term{grid-template-columns:1fr;gap:8px}
  .sp-clock{font-size:28px}
  .bd-now b{font-size:44px}
  .hk-grid,.fm-grid,.pl-grid,.wr-grid{grid-template-columns:1fr}
}