/* THE COST OF MOVING FORWARD — planner page styles.
   Builds on base.css + style.css tokens; only the planner-specific components live here. */

/* generic est badge (the timeline only styled it inside .spec/.nx-name) */
.est{display:inline-block;font-family:var(--font-mono);font-size:9px;padding:1px 6px;border:1px solid var(--color-amber);color:var(--color-amber);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.1em;vertical-align:middle}

/* ==================== CONTROLS ==================== */
#controls{padding-block:var(--space-8)}
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}
.ctrl{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md)}
.ctrl label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent);margin-bottom:var(--space-3)}
.ctrl-note{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5}
.num-input{width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);font-family:var(--font-mono);font-size:var(--text-base);color:var(--color-text)}
.num-input:focus{outline:2px solid var(--color-accent);outline-offset:1px}

.ctrl-block{margin-top:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md)}
.ctrl-block-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent);margin-bottom:var(--space-4)}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3)}
.profiles button{text-align:left;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);transition:var(--transition);color:var(--color-text-muted);display:flex;flex-direction:column;gap:2px}
.profiles button .seg-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint)}
.profiles button .seg-l{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.profiles button:hover{border-color:var(--color-border-strong)}
.profiles button[aria-pressed="true"]{border-color:var(--color-accent);background:color-mix(in oklab, var(--color-accent) 12%, var(--color-surface-2));box-shadow:var(--glow-accent)}
.profiles button[aria-pressed="true"] .seg-n{color:var(--color-accent)}
.tier-blurb{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;max-width:70ch}

.ctrl-row{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between}
.class-filter{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-full)}
.class-filter button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--color-text-muted);transition:var(--transition)}
.class-filter button[aria-pressed="true"]{background:var(--color-accent);color:#070912}
.specs-toggle{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px dashed var(--color-border-strong);background:transparent;color:var(--color-text-faint);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;transition:var(--transition)}
.specs-toggle:hover{color:var(--color-text-muted)}
.specs-toggle[aria-pressed="true"]{color:var(--color-text);border-style:solid;border-color:var(--color-border)}

/* ==================== THE RELATIONAL READ ==================== */
.read-card{background:linear-gradient(135deg, color-mix(in oklab, var(--color-accent) 10%, var(--color-surface)), var(--color-surface));border:1px solid color-mix(in oklab, var(--color-accent) 35%, var(--color-border));border-left:4px solid var(--color-accent);border-radius:var(--radius-xl);padding:clamp(var(--space-5),3vw,var(--space-8));box-shadow:var(--shadow-lg)}
.read-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--color-accent);margin-bottom:var(--space-4)}
.read-lead{font-size:var(--text-lg);color:var(--color-text);line-height:1.5;max-width:70ch}
.read-lead strong{color:var(--color-accent)}
.read-body{margin-top:var(--space-4);font-size:var(--text-base);color:var(--color-text-muted);line-height:1.6;max-width:72ch}
.read-body strong{color:var(--color-text)}

/* ==================== MACHINE GRID ==================== */
.machine-grid{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-5)}
.empty{color:var(--color-text-muted);padding:var(--space-5)}
.m-card{position:relative;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:var(--space-3)}
.m-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--cls-color)}
.m-card.v-over{opacity:.92}

.m-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.m-class{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cls-color)}
.m-verdict{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--color-border)}
.m-verdict.v-fit{color:var(--c-gpu);border-color:color-mix(in oklab, var(--c-gpu) 50%, var(--color-border))}
.m-verdict.v-over{color:var(--color-text-faint)}
.m-verdict.v-short{color:var(--color-red);border-color:color-mix(in oklab, var(--color-red) 50%, var(--color-border))}
.m-verdict.v-spec{color:var(--color-purple);border-color:color-mix(in oklab, var(--color-purple) 50%, var(--color-border))}

.m-name{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em}
.m-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);margin-top:calc(var(--space-2) * -1)}

.m-total{margin-top:var(--space-2);padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.m-total-num{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;color:var(--color-accent);line-height:1;font-variant-numeric:tabular-nums}
.m-total-lab{margin-top:var(--space-2);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}

.m-costs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.m-costs .cc{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;gap:2px}
.m-costs .cc .k{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}
.m-costs .cc .v{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text);font-variant-numeric:tabular-nums}
.m-runbreak{font-family:var(--font-mono);font-size:10px;color:var(--color-text-faint);letter-spacing:.02em}
.m-runbreak .dot{opacity:.5;margin-inline:2px}

.m-for{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.m-for .for-k{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent);margin-bottom:2px}

.m-tiers{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);display:flex;align-items:center;gap:var(--space-2)}
.tier-pill{display:inline-grid;place-items:center;min-width:24px;padding:1px 6px;border:1px solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:10px}

/* tech specs — hidden by default; the whole point is they're secondary */
.m-specs{display:none;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);padding-top:var(--space-3);border-top:1px dashed var(--color-border);font-family:var(--font-mono)}
body.show-specs .m-specs{display:flex}
.m-specs .spec-k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-faint)}
.m-specs .spec-v{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted)}
.m-specs .spec-note{flex:1 1 100%;font-size:10px;color:var(--color-text-faint);line-height:1.4}

.m-src{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--color-accent);text-decoration:underline;margin-top:auto}

/* ==================== OWN VS SUBSCRIBE ==================== */
.os-controls{margin-top:var(--space-2)}
#usageCtrl.inert{opacity:.55}
#usageCtrl.inert .year-slider{cursor:not-allowed}
.be-wrap{margin-top:var(--space-8);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-5);align-items:start}
.be-chart{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-md)}
.be-legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted)}
.be-key{display:inline-flex;align-items:center;gap:var(--space-2)}
.be-key .sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.be-read{align-self:stretch}

@media (max-width:860px){
  .be-wrap{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ctrl-row{flex-direction:column;align-items:stretch}
  .m-costs{grid-template-columns:1fr 1fr}
}