/* static/css/apps/resources.css
   RESOURCES PAGE — light style, fully tokenised from variables.css.
   No page-local colour copies: every colour comes from the shared tokens.
   Cards mirror the season result (spoiled / missed / profit) and match the
   About card recipe. Scoped under .res-page. See design-system.md. */

.res-page{
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
.res-page *{box-sizing:border-box}
.res-wrap{max-width:1000px;margin:0 auto;padding:48px 24px 40px}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.res-head{background:radial-gradient(1200px 300px at 50% -120px,var(--brand-green-bg),transparent 70%),#fff;
  border-bottom:1px solid var(--border-color);padding:52px 24px 44px;text-align:center}
.res-eyebrow{color:var(--brand-green);font-weight:800;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;margin:0}
.res-eyebrow::after{content:"";display:block;width:34px;height:3px;background:var(--brand-gold);
  border-radius:2px;margin:.6rem auto 0}
.res-head h1{font-size:36px;color:var(--text-primary);margin:12px 0 12px;font-weight:800;letter-spacing:-.5px}
.res-sub{color:var(--text-secondary);font-size:17px;max-width:560px;margin:0 auto;line-height:1.5}

/* ── DEMO CARD — light, green left bar ──────────────────────────────── */
.res-feature{position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  background:#fff;border:1px solid var(--border-color);border-left:5px solid var(--urgency-low);
  border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(20,40,28,.07)}
.res-feature-body{padding:34px 36px}
.res-badge{display:inline-block;background:var(--urgency-low-bg);color:var(--urgency-low-text);
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;border:1px solid var(--urgency-low-border)}
.res-feature h2{font-size:27px;color:var(--text-primary);margin:16px 0 12px;font-weight:800;line-height:1.15}
.res-feature h2 .accent{color:var(--text-primary)}
.res-feature p{color:var(--text-secondary);font-size:16px;line-height:1.6;margin:0 0 26px}
.res-btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;
  padding:12px 24px;border-radius:11px;background:var(--btn-cta);color:#fff;
  box-shadow:0 6px 16px rgba(22,163,74,.25);transition:background .12s ease,transform .12s ease}
.res-btn:hover{background:var(--btn-cta-hover);transform:translateY(-1px);color:#fff}
.res-meta{font-size:13px;color:var(--text-muted);margin:14px 0 0}

/* season-result panel + mini card */
.res-preview{background:linear-gradient(160deg,var(--brand-green-wash),var(--brand-green-bg));
  display:flex;align-items:center;justify-content:center;padding:28px}
.res-mini{background:#fff;border:1px solid var(--brand-green-border);border-radius:16px;padding:22px 20px;
  text-align:center;width:100%;max-width:260px;box-shadow:0 10px 26px rgba(20,40,28,.10)}
.res-mini-top{font-size:11px;color:var(--text-muted);font-weight:800;letter-spacing:.5px}
.res-mini-emoji{font-size:34px;margin:8px 0 0}
.res-mini h3{margin:2px 0 0;color:var(--text-primary);font-size:18px;font-weight:800}
.res-mini-lam{color:var(--text-muted);font-size:12px;margin:2px 0 14px}
.res-score{display:flex;gap:10px}
.res-score>div{flex:1}
.res-v{font-size:19px;font-weight:800}
.res-l{font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.res-v.good{color:var(--urgency-low)} .res-v.bad{color:var(--urgency-critical)} .res-v.warn{color:var(--urgency-high)}

/* ── WHY IT'S HARD — tinted cards (red / amber / green), like About ─── */
.res-why{margin-top:52px;text-align:center}
.res-why h2{font-size:23px;color:var(--text-primary);font-weight:800;margin:0 0 24px}
.res-why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.res-pt{background:#fff;border:1px solid var(--border-color);border-top:4px solid var(--border-color);
  border-radius:16px;padding:28px 26px;min-height:172px;display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .12s ease}
.res-pt:hover{box-shadow:0 14px 30px rgba(20,40,28,.10);transform:translateY(-2px)}
.res-ic{display:block;font-size:1.8rem;margin-bottom:.5rem}
.res-pt b{display:block;color:var(--text-primary);font-size:18px;margin:16px 0 6px}
.res-pt span{color:var(--text-secondary);font-size:15px;line-height:1.55}
.res-pt.waste{background:var(--urgency-critical-bg);border-color:var(--urgency-critical-border);border-top-color:var(--urgency-critical)}
.res-pt.waste .res-ic{color:var(--urgency-critical)}
.res-pt.waste b{color:var(--urgency-critical-text)}
.res-pt.short{background:var(--urgency-high-bg);border-color:var(--urgency-high-border);border-top-color:var(--urgency-high)}
.res-pt.short .res-ic{color:var(--urgency-high)}
.res-pt.short b{color:var(--urgency-high-text)}
.res-pt.solve{background:var(--urgency-low-bg);border-color:var(--urgency-low-border);border-top-color:var(--urgency-low)}
.res-pt.solve .res-ic{color:var(--urgency-low)}
.res-pt.solve b{color:var(--urgency-low-text)}

/* ── TAKEAWAY ───────────────────────────────────────────────────────── */
.res-takeaway{max-width:660px;margin:44px auto 0;background:var(--brand-green-bg);
  border:1px solid var(--brand-green-border);border-left:5px solid var(--brand-gold);
  border-radius:14px;padding:20px 26px;color:var(--urgency-low-text);
  font-size:16px;line-height:1.55;font-weight:500;text-align:center}
.res-takeaway b{color:var(--brand-green)}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:800px){
  .res-feature{grid-template-columns:1fr}
  .res-why-row{grid-template-columns:1fr}
  .res-head h1{font-size:30px}
}