/* ============================================================
   Polymer Lab — page-specific styles.

   Uses the design-system.css / theme.css variables and extends
   them where the Polymer Lab needs domain-specific visual
   language (Hansen radar, Tg sparkline bands, verdict pills).
   ============================================================ */

/* ---------- Hero ---------- */
.pl-hero {
  background:
    radial-gradient(ellipse at top, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,212,255,.20), transparent 70%),
    linear-gradient(135deg, #0a0e27 0%, #17204a 55%, #0a0e27 100%);
  color: #fff;
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  border-radius: 0 0 24px 24px;
  position: relative;
  overflow: hidden;
}
.pl-hero-inner  { max-width: 900px; margin: 0 auto; }
.pl-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: .35rem .9rem; border-radius: 999px;
  font-size: .85rem; letter-spacing: .02em;
  backdrop-filter: blur(6px);
  color: #b5e2ff;
}
.pl-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800; letter-spacing: -.02em;
  margin: 1.15rem 0 .6rem;
  background: linear-gradient(135deg, #fff 0%, #c7e8ff 60%, #a8b8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.pl-hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  max-width: 780px; margin: 0 auto;
  color: rgba(255,255,255,.78);
}
.pl-balance-pill {
  margin-top: 1.25rem;
  display: inline-block;
  min-height: 1.5rem;
  font-size: .88rem;
  color: rgba(255,255,255,.85);
}

/* ---------- Input card ---------- */
.pl-input-section {
  max-width: 1000px;
  margin: -2.5rem auto 2rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 5;
}
.pl-input-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  padding: 1.75rem 1.75rem 1.25rem;
  box-shadow: 0 20px 45px rgba(10,14,39,.18), 0 2px 6px rgba(0,0,0,.06);
}
.pl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: .9rem;
}
@media (max-width: 720px) {
  .pl-form-row { grid-template-columns: 1fr; }
}
.pl-form-field label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .3rem;
  color: var(--text-primary, #1f2937);
}
.pl-req { color: #f43f5e; margin-left: 2px; }
.pl-opt { color: var(--text-muted, #6b7280); font-weight: 400; margin-left: 4px; }
.pl-input {
  width: 100%;
  padding: .65rem .85rem;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: .95rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 10px;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #111827);
  transition: border-color .15s, box-shadow .15s;
}
.pl-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

/* ---------- Tier grid ---------- */
.pl-tier-grid {
  border: 0; padding: 0; margin: 1rem 0 .5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
@media (max-width: 720px) { .pl-tier-grid { grid-template-columns: 1fr; } }
.pl-tier-legend {
  padding: 0 4px; font-weight: 600; font-size: .8rem;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .35rem;
}
.pl-tier-card {
  position: relative;
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem 1rem; border-radius: 12px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  background: var(--card-bg, #fff);
}
.pl-tier-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.pl-tier-card:hover { transform: translateY(-1px); }
.pl-tier-card:has(input:checked),
.pl-tier-card.pl-tier-selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
.pl-tier-name {
  font-weight: 700; font-size: 1rem;
  color: var(--text-primary, #111827);
}
.pl-tier-cost {
  font-size: .8rem; font-weight: 600;
  color: #7c3aed;
  letter-spacing: .02em;
}
.pl-tier-desc {
  font-size: .82rem; line-height: 1.4;
  color: var(--text-muted, #4b5563);
}

/* ---------- Buttons ---------- */
.pl-form-actions {
  display: flex; gap: .6rem; margin-top: .75rem;
  flex-wrap: wrap;
}
.pl-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.4rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .1s, box-shadow .15s, filter .15s;
  border: 1px solid transparent;
}
.pl-btn:active { transform: translateY(1px); }
.pl-btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.pl-btn-primary:hover { filter: brightness(1.08); }
.pl-btn-primary:disabled { opacity: .55; cursor: progress; filter: grayscale(.3); }
.pl-btn-ghost {
  background: transparent;
  border-color: var(--border-color, #d1d5db);
  color: var(--text-primary, #111827);
}
.pl-btn-ghost:hover { background: rgba(124,58,237,.06); }

/* ---------- Progress ---------- */
.pl-results-section { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.pl-progress {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pl-progress-bar {
  height: 8px; background: var(--border-color, #e5e7eb);
  border-radius: 999px; overflow: hidden; margin-bottom: .6rem;
}
.pl-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #7c3aed, #00d4ff);
  transition: width .35s ease-out;
}
.pl-progress-text {
  font-size: .88rem; color: var(--text-muted, #4b5563);
}

/* ---------- Drug intake summary card ---------- */
.pl-drug-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: grid; gap: .65rem;
  grid-template-columns: 1.1fr 2fr;
}
@media (max-width: 720px) { .pl-drug-card { grid-template-columns: 1fr; } }
.pl-drug-title {
  font-weight: 700; font-size: 1.1rem; color: var(--text-primary, #111827);
  margin-bottom: .25rem;
}
.pl-drug-smiles {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: .82rem;
  color: var(--text-muted, #6b7280);
  word-break: break-all;
}
.pl-drug-metrics {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem;
  font-size: .85rem; color: var(--text-primary, #1f2937);
}
.pl-drug-metrics span { white-space: nowrap; }
.pl-drug-metrics strong { color: #7c3aed; }

/* ---------- Top recommendation banner ---------- */
.pl-top-recommendation {
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(0,212,255,.10));
  border: 1.5px solid rgba(16,185,129,.35);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .9rem;
}
.pl-top-recommendation i.fa-crown { font-size: 1.5rem; color: #f59e0b; }
.pl-top-rec-text strong { font-size: 1.05rem; color: var(--text-primary, #111827); }
.pl-top-rec-text div { font-size: .85rem; color: var(--text-muted, #4b5563); margin-top: 2px; }

/* ---------- Candidate grid ---------- */
.pl-candidate-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.pl-candidate-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
  transition: transform .15s, box-shadow .15s;
}
.pl-candidate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10,14,39,.12);
}
.pl-candidate-rank {
  position: absolute; top: .75rem; right: .9rem;
  font-weight: 700; color: var(--text-muted, #9ca3af);
  font-size: .9rem;
}
.pl-candidate-header {
  display: flex; align-items: baseline; gap: .5rem;
  flex-wrap: wrap;
}
.pl-candidate-name {
  font-weight: 700; font-size: 1.05rem;
  color: var(--text-primary, #111827);
}
.pl-candidate-class {
  font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted, #9ca3af);
}
.pl-candidate-trade { font-size: .85rem; color: var(--text-muted, #6b7280); font-style: italic; }
.pl-verdict-pill {
  display: inline-block;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  align-self: flex-start;
}
.pl-verdict-good     { background: rgba(16,185,129,.18); color: #059669; }
.pl-verdict-marginal { background: rgba(245,158,11,.18); color: #d97706; }
.pl-verdict-poor     { background: rgba(244,63,94,.18);  color: #dc2626; }

.pl-candidate-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .9rem;
  font-size: .85rem;
  color: var(--text-primary, #1f2937);
  padding: .4rem 0;
  border-top: 1px dashed var(--border-color, #e5e7eb);
  border-bottom: 1px dashed var(--border-color, #e5e7eb);
}
.pl-candidate-metrics strong { color: #7c3aed; }

.pl-candidate-tg-mini {
  display: flex; gap: .3rem; align-items: flex-end;
  height: 34px;
  margin-top: .1rem;
}
.pl-candidate-tg-mini .bar {
  flex: 1; min-width: 6px;
  background: linear-gradient(180deg, #7c3aed, #00d4ff);
  border-radius: 3px 3px 0 0;
  position: relative;
}
.pl-candidate-tg-mini .bar .t {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: .65rem; color: var(--text-muted, #6b7280);
  white-space: nowrap;
}
.pl-candidate-tg-mini .bar[data-unstable="true"] {
  background: linear-gradient(180deg, #f59e0b, #dc2626);
}

.pl-candidate-rationale {
  font-size: .83rem; line-height: 1.45; margin: .35rem 0 0;
  color: var(--text-muted, #4b5563);
  padding-left: 1.1rem;
}
.pl-candidate-rationale li { margin-bottom: .2rem; }

/* ---------- Error + disclaimer ---------- */
.pl-error {
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.3);
  color: #b91c1c;
  padding: 1rem 1.25rem; border-radius: 12px;
  font-size: .92rem;
}
.pl-disclaimer {
  max-width: 900px; margin: 2rem auto; padding: 0 1.5rem;
  font-size: .82rem; color: var(--text-muted, #6b7280);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}

/* ---------- Feature tiles ---------- */
.pl-features { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; }
.pl-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.pl-feature-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: transform .1s, box-shadow .15s;
}
.pl-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10,14,39,.10);
}
.pl-feature-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(0,212,255,.14));
  color: #7c3aed;
  font-size: 1rem;
  margin-bottom: .6rem;
}
.pl-feature-card h3 {
  font-size: 1rem; font-weight: 700;
  margin: 0 0 .35rem; color: var(--text-primary, #111827);
}
.pl-feature-card p {
  font-size: .88rem; line-height: 1.5;
  color: var(--text-muted, #4b5563);
  margin: 0;
}

/* ============================================================
   RICH RENDER (Pro + Unlimited) — radar, briefs, generated cards,
   cost modal, ZIP button.
   ============================================================ */
.pl-section-title {
  font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .75rem;
  color: var(--text-primary, #111827);
  border-left: 3px solid #7c3aed; padding-left: .6rem;
}

.pl-radar-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.pl-radar-card canvas { max-height: 320px; }
.pl-radar-caption {
  font-size: .8rem; color: var(--text-muted, #6b7280); margin-top: .5rem; text-align: center;
}

/* Brief cards — Pro tier per-polymer narrative */
.pl-brief-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-left: 3px solid #7c3aed;
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: .8rem;
}
.pl-brief-head {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .35rem;
}
.pl-brief-name { font-weight: 700; font-size: 1.05rem; color: var(--text-primary, #111827); }
.pl-brief-rationale {
  font-size: .9rem; line-height: 1.55;
  color: var(--text-primary, #1f2937); margin: .25rem 0 .5rem;
}
.pl-brief-reco {
  font-size: .85rem; line-height: 1.5;
  color: var(--text-muted, #4b5563);
  background: rgba(124,58,237,.07);
  padding: .55rem .75rem; border-radius: 8px;
  border-left: 2px solid #7c3aed;
  margin-bottom: .5rem;
}
.pl-brief-lit {
  font-size: .8rem; color: var(--text-muted, #6b7280);
  padding-left: 1.1rem; margin: .4rem 0 0;
}
.pl-brief-lit li { margin-bottom: .15rem; }
.pl-brief-fto {
  font-size: .8rem; margin-top: .35rem;
}
.pl-brief-fto-verdict {
  display: inline-block; padding: .05rem .55rem; border-radius: 6px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.pl-brief-fto-green  { background: rgba(16,185,129,.18); color: #059669; }
.pl-brief-fto-yellow { background: rgba(245,158,11,.18); color: #d97706; }
.pl-brief-fto-red    { background: rgba(244,63,94,.18);  color: #dc2626; }

/* Generated polymer cards (BO / RL) */
.pl-generated-card {
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(0,212,255,.06));
  border: 1.5px dashed rgba(124,58,237,.35);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
  position: relative;
}
.pl-generated-card::before {
  content: 'NOVEL';
  position: absolute; top: .55rem; right: .9rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  padding: .15rem .5rem; border-radius: 4px;
  background: linear-gradient(135deg, #7c3aed, #00d4ff); color: #fff;
}
.pl-generated-label { font-weight: 700; font-size: .95rem; color: var(--text-primary, #111827); }
.pl-generated-comp  { font-size: .88rem; color: var(--text-primary, #1f2937); margin: .15rem 0 .3rem; font-family: "SFMono-Regular", Consolas, Menlo, monospace; }
.pl-generated-metrics {
  display: flex; gap: .35rem .9rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--text-primary, #1f2937);
  padding-top: .35rem; border-top: 1px dashed var(--border-color, #e5e7eb);
}
.pl-generated-metrics strong { color: #7c3aed; }

/* Cost-preview modal */
.pl-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,39,.55); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pl-modal-overlay.pl-modal-show { opacity: 1; pointer-events: auto; }
.pl-modal {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 1.5rem 1.75rem 1rem;
  width: min(560px, 92vw); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 28px 60px rgba(10,14,39,.4);
  display: flex; flex-direction: column; gap: .6rem;
}
.pl-modal h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.pl-modal .pl-modal-cost {
  font-size: 1.3rem; font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #00d4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-modal-subtasks {
  list-style: none; padding-left: 0; margin: 0;
  font-size: .88rem; color: var(--text-primary, #1f2937);
}
.pl-modal-subtasks li {
  padding: .25rem .6rem; border-left: 2px solid rgba(124,58,237,.3);
  margin-bottom: .15rem;
}
.pl-modal-notes {
  font-size: .8rem; color: var(--text-muted, #6b7280);
  background: rgba(245,158,11,.08);
  padding: .4rem .6rem; border-radius: 6px;
  border-left: 2px solid #f59e0b;
}
.pl-modal-actions {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding-top: .7rem; border-top: 1px solid var(--border-color, #e5e7eb);
  margin-top: .25rem;
  position: sticky; bottom: -1rem; padding-bottom: .2rem;
  background: var(--card-bg, #fff);
}

/* ZIP download button */
.pl-zip-btn {
  margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.1rem; border-radius: 10px;
  background: #111827; color: #fff; border: 0;
  font-weight: 600; cursor: pointer; font-size: .9rem;
  transition: background .15s;
}
.pl-zip-btn:hover { background: #1f2937; }

/* Job phase line */
.pl-phase {
  font-size: .78rem; color: var(--text-muted, #6b7280);
  margin-top: .15rem; font-style: italic;
}

/* ============================================================
   PC-SAFT panel — rendered inside each candidate card.
   ============================================================ */
.pl-pcsaft-panel {
  margin-top: .5rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: .45rem;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem;
}
.pl-pcsaft-head {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 700;
  color: #7c3aed;
  font-size: .78rem; letter-spacing: .02em;
  text-transform: uppercase;
}
.pl-pcsaft-head i { font-size: .75rem; }
.pl-pcsaft-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .15rem .6rem;
  color: var(--text-primary, #1f2937);
}
.pl-pcsaft-metrics strong { color: #7c3aed; }
.pl-pcsaft-diagram {
  width: 100%; height: 72px; margin-top: .2rem;
  background: linear-gradient(180deg, rgba(124,58,237,.03), transparent);
  border-radius: 6px; border: 1px solid var(--border-color, #e5e7eb);
}
.pl-pcsaft-diagram .axis  { stroke: rgba(148,163,184,.5); stroke-width: 1; }
.pl-pcsaft-diagram .curve {
  fill: none; stroke: #7c3aed; stroke-width: 1.8;
  stroke-linejoin: round;
}
.pl-pcsaft-diagram .zero  { stroke: rgba(148,163,184,.35); stroke-dasharray: 2 3; stroke-width: 1; }
.pl-pcsaft-diagram text   { fill: var(--text-muted, #9ca3af); font-size: 8px; }
.pl-synergy-pill {
  display: inline-block;
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.pl-synergy-exceptional { background: linear-gradient(135deg,#7c3aed,#00d4ff); color: #fff; }
.pl-synergy-high        { background: rgba(124,58,237,.20); color: #7c3aed; }
.pl-synergy-moderate    { background: rgba(6,182,212,.18);  color: #0891b2; }
.pl-synergy-low         { background: rgba(148,163,184,.18); color: #64748b; }
.pl-pcsaft-reasons {
  font-size: .74rem; color: var(--text-muted, #4b5563);
  padding-left: .8rem; margin: .15rem 0 0;
}
.pl-pcsaft-reasons li { margin-bottom: .1rem; }