/*
 * shared.css
 * 用途：launcher.html / snapshot.html 公用样式
 * 不修改 index.html（Phase B 保守策略）
 * 视觉变量与 G03_index.html 保持一致（IBM Plex 字体 / 深浅色双主题）
 */

/* ── 字体 ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── 变量（深色，默认） ─────────────────────── */
:root {
  --bg:         #07090f;
  --surface:    #0d111d;
  --surface2:   #111827;
  --border:     #1a2235;
  --border2:    #243044;
  --text:       #e8eaf0;
  --text2:      #8892a4;
  --text3:      #4b5568;
  --accent:     #e8a020;
  --green:      #22c55e;
  --red:        #ef4444;
  --yellow:     #f59e0b;

  --ultra:      #dc2626; --ultra-dim: rgba(220,38,38,0.10);
  --reach:      #c2410c; --reach-dim: rgba(194,65,12,0.10);
  --target:     #1d4ed8; --target-dim: rgba(29,78,216,0.10);
  --likely:     #15803d; --likely-dim: rgba(21,128,61,0.10);

  --font-mono:  'IBM Plex Mono', monospace;
  --font-sans:  'IBM Plex Sans', sans-serif;

  --radius:     2px;
  --max-w:      600px;         /* 移动优先，桌面居中 */

  /* ── School Signals 语义 alias（不改全站变量）── */
  --accent-amber:      var(--accent);
  --accent-amber-soft: rgba(232, 160, 32, 0.10);
  --text-primary:      var(--text);
  --text-secondary:    var(--text2);
  --text-muted:        var(--text3);
  --border-subtle:     var(--border);
  --bg-panel:          var(--surface);
  --green-soft:        rgba(34, 197, 94, 0.10);
  --green-border:      rgba(34, 197, 94, 0.22);
  --amber-border:      rgba(232, 160, 32, 0.22);
}

/* ── 浅色主题 ───────────────────────────────── */
[data-theme="light"] {
  --bg:       #f0f0eb;
  --surface:  #fafaf7;
  --surface2: #e8e8e3;
  --border:   #d4d4cc;
  --border2:  #b8b8b0;
  --text:     #0a0a0f;
  --text2:    #3a3a4a;
  --text3:    #7a7a8a;
  --accent:   #e8780a;
  --green:    #16a34a;
  --red:      #dc2626;

  --ultra:    #b91c1c; --ultra-dim: rgba(185,28,28,0.08);
  --reach:    #9a3412; --reach-dim: rgba(154,52,18,0.08);
  --target:   #1e40af; --target-dim: rgba(30,64,175,0.08);
  --likely:   #166534; --likely-dim: rgba(22,101,52,0.08);
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  /* 底部导航 padding（含 iPhone safe area）*/
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

/* ── 页面容器 ────────────────────────────────── */
.page-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Header ─────────────────────────────────── */
.sh-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.sh-logo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.sh-spacer { flex: 1; }
.sh-theme-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  cursor: pointer;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
}
.sh-theme-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Buttons ─────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: var(--radius);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
}
.btn-primary:hover { background: #fbbf24; }
.btn-primary:disabled { background: var(--border2); color: var(--text3); cursor: not-allowed; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  width: 100%;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm {
  padding: 6px 12px;
  font-size: 10px;
  width: auto;
}

/* ── Cards ──────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--border2); }
.card.active  { border-color: var(--accent); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--accent); }

/* ── Flow Entry Card（launcher 4入口） ─────── */
.flow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  color: inherit;
}
.flow-card:hover { border-color: var(--accent); background: var(--surface2); }
.flow-card-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.flow-card-body { flex: 1; }
.flow-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.flow-card-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.flow-card-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text3);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.15s;
}
.flow-card:hover .flow-card-arrow { color: var(--accent); }

/* ── Section header ─────────────────────────── */
.section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.section-sub {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Form elements ──────────────────────────── */
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.form-input,
.form-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s;
}
.form-input:focus,
.form-select:focus { border-color: var(--accent); }
.form-select option { background: var(--surface2); color: var(--text); }
.form-group { margin-bottom: 14px; }

/* Radio toggle（domestic / intl） */
.radio-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
}
.radio-opt {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  background: var(--bg);
  border-right: 1px solid var(--border2);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.radio-opt:last-child { border-right: none; }
.radio-opt.selected {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.radio-opt input { display: none; }

/* Checkbox list（兴趣选择） */
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
  user-select: none;
}
.check-item:hover { border-color: var(--border2); }
.check-item.selected { border-color: var(--accent); background: var(--surface2); }
.check-item input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.check-item-label { font-size: 13px; color: var(--text); }
.check-item-sub   { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* School search tag chips */
.school-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 32px;
}
.school-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
}
.school-chip-remove {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.school-chip-remove:hover { color: var(--red); }

/* Search dropdown */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
}
.search-dropdown-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover { background: var(--surface2); }
.search-dropdown-item .school-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  margin-left: 6px;
}
.search-wrap { position: relative; }

/* ── Grade badge ─────────────────────────────── */
.grade {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
}
.grade-Aplus  { background: rgba(34,197,94,0.18);  color: #4ade80; }
.grade-A      { background: rgba(34,197,94,0.12);  color: #86efac; }
.grade-Bplus  { background: rgba(245,158,11,0.18); color: #fcd34d; }
.grade-B      { background: rgba(245,158,11,0.10); color: #fde68a; }
.grade-C      { background: rgba(239,68,68,0.12);  color: #fca5a5; }

/* ── Metric row ─────────────────────────────── */
.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.metric-row:last-child { border-bottom: none; }
.metric-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.metric-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  margin-top: 1px;
  flex-shrink: 0;
}
.metric-val.good   { color: var(--green); }
.metric-val.warn   { color: var(--yellow); }
.metric-val.danger { color: var(--red); }

/* ── Bucket tag ─────────────────────────────── */
.bucket-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--radius);
}
.bucket-tag.ultra_reach { background: var(--ultra-dim); color: var(--ultra); }
.bucket-tag.reach       { background: var(--reach-dim); color: var(--reach); }
.bucket-tag.target      { background: var(--target-dim); color: var(--target); }
.bucket-tag.likely      { background: var(--likely-dim); color: var(--likely); }

/* ── Paywall card ───────────────────────────── */
.paywall-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.paywall-lock { font-size: 28px; margin-bottom: 10px; }
.paywall-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.paywall-sub {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 16px;
  line-height: 1.5;
}
.paywall-items {
  text-align: left;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.paywall-item {
  font-size: 12px;
  color: var(--text2);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.paywall-item::before { content: '·'; color: var(--accent); flex-shrink: 0; }
.paywall-price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Backend pending placeholder */
.pending-card {
  background: var(--surface2);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
}
.pending-icon { font-size: 28px; margin-bottom: 10px; opacity: 0.5; }
.pending-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pending-sub { font-size: 12px; color: var(--text3); line-height: 1.6; }

/* ── Loading / Spinner ──────────────────────── */
.loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 12px;
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sh-spin 0.7s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* Skeleton pulse */
.skel {
  height: 10px;
  background: var(--border);
  border-radius: var(--radius);
  animation: sh-pulse 1.5s ease-in-out infinite;
  margin-bottom: 6px;
}
.skel.h16 { height: 16px; }
.skel.h32 { height: 32px; }
.skel.w60 { width: 60%; }
.skel.w80 { width: 80%; }
@keyframes sh-pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 0.5; } }

/* ── Bottom Nav ─────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 1000;
  height: 56px;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 4px;
  transition: color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-item:hover { color: var(--text2); }
.nav-item.active { color: var(--accent); }
.nav-item-icon { font-size: 18px; line-height: 1; }
.nav-item-label { font-size: 9px; }

/* ── Divider ────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}
.divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Verdict block ──────────────────────────── */
.verdict-box {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 8px;
}
.verdict-box p {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
}

/* ── Level badge ────────────────────────────── */
.level {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.level-excellent, .level-strong, .level-affordable, .level-likely {
  background: rgba(34,197,94,0.14); color: #4ade80;
}
.level-good, .level-moderate, .level-within, .level-target {
  background: rgba(245,158,11,0.14); color: #fcd34d;
}
.level-high, .level-stretched, .level-reach, .level-weak, .level-small {
  background: rgba(239,68,68,0.12); color: #fca5a5;
}
.level-ultra { background: rgba(220,38,38,0.16); color: #f87171; }
.level-unknown, .level-nodata {
  background: rgba(75,85,99,0.18); color: var(--text3);
}

/* ── STEM tag ───────────────────────────────── */
.stem-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: rgba(29,78,216,0.15);
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Recent item ────────────────────────────── */
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.recent-item:last-child { border-bottom: none; }
.recent-item-icon { font-size: 14px; opacity: 0.5; }
.recent-item-title { font-size: 13px; color: var(--text2); flex: 1; }
.recent-item-arrow { font-family: var(--font-mono); font-size: 12px; color: var(--text3); }

/* ── Utility ────────────────────────────────── */
.mt4  { margin-top:  4px; }
.mt8  { margin-top:  8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mb4  { margin-bottom:  4px; }
.mb8  { margin-bottom:  8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.mb20 { margin-bottom: 20px; }
.mono { font-family: var(--font-mono); }
.small { font-size: 11px; }
.text2 { color: var(--text2); }
.text3 { color: var(--text3); }
.accent { color: var(--accent); }
.center { text-align: center; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.gap4 { gap: 4px; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }

/* ── School Signals Components ──────────────── */

/* Signal block container */
.signal-block {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* School row — 3-column grid */
.school-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.1s;
}
.school-row:last-child { border-bottom: none; }
.school-row:hover { background: var(--surface2); margin: 0 -18px; padding: 14px 18px; }

/* Rank number */
.school-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

/* School name + meta */
.school-main { min-width: 0; }
.school-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-meta {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Metric block (right column) */
.metric-block { text-align: right; flex-shrink: 0; }
.metric-primary {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-amber);
}
.metric-label {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Signal badges */
.signal-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.signal-high {
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}
.signal-very-high {
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  letter-spacing: 0.02em;
}
.signal-medium {
  color: var(--accent-amber);
  background: var(--accent-amber-soft);
  border: 1px solid var(--amber-border);
}
.signal-low {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
}

/* Show all ghost button */
.show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  border: 1px solid var(--amber-border);
  border-radius: 6px;
  color: var(--accent-amber);
  background: var(--accent-amber-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.show-all-btn:hover {
  background: rgba(232, 160, 32, 0.18);
  border-color: rgba(232, 160, 32, 0.5);
}

/* Data note / caveat */
.data-note {
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 2px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
}

/* Section kicker */
.signal-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.signal-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.45;
}

/* Mobile stacked rows */
@media (max-width: 480px) {
  .school-row {
    grid-template-columns: 24px 1fr;
    align-items: flex-start;
  }
  .metric-block {
    grid-column: 2;
    text-align: left;
    margin-top: 6px;
  }
}

/* ══════════════════════════════════════════════════════
   REPORT SHARED STYLES
   Used by: school-fit-report.html, major-deep-dive.html
══════════════════════════════════════════════════════ */

/* Section card — unified */
.report-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}
.report-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.report-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.report-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.report-metric-row:last-child { border-bottom: none; }
.report-metric-lbl { color: var(--text2); }
.report-metric-val {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.report-metric-val.good { color: var(--green); }
.report-metric-val.warn { color: var(--accent); }
.report-metric-val.muted { color: var(--text3); font-weight: 400; }
.report-limit-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  line-height: 1.6;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.report-warn-banner {
  display: flex;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(232,160,32,0.07);
  border: 1px solid rgba(232,160,32,0.2);
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.report-sub-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 12px 0 6px;
}
.report-footer {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  padding: 16px 0 8px;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════
   PRINT / PDF STYLES
   Triggered by window.print() or Ctrl+P
══════════════════════════════════════════════════════ */
@media print {
  /* Page setup — suppress all browser headers/footers */
  @page {
    size: A4;
    margin: 18mm 16mm 18mm 16mm;
    /* Chrome/Edge: remove URL, title, date, page number */
    @top-left   { content: ""; }
    @top-center { content: ""; }
    @top-right  { content: ""; }
    @bottom-left   { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right  { content: ""; }
  }

  /* Font rendering — prevent ligature/encoding artifacts (fi fl ff etc.) */
  * {
    -webkit-font-smoothing: antialiased !important;
    font-variant-ligatures: none !important;
    text-rendering: optimizeLegibility !important;
    font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif !important;
  }
  code, .sfr-section-kicker, .sfr-metric-lbl, .sfr-stat-lbl,
  .sfr-limit-note, .sfr-report-meta, .career-meta, .sfr-eyebrow {
    font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  }

  /* Print color adjust */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Force light mode for print */
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg:       #ffffff !important;
    --surface:  #f8f8f8 !important;
    --surface2: #f0f0f0 !important;
    --border:   #e0e0e0 !important;
    --border2:  #cccccc !important;
    --text:     #111111 !important;
    --text2:    #444444 !important;
    --text3:    #888888 !important;
    --accent:   #b45309 !important;
    --green:    #15803d !important;
    --red:      #dc2626 !important;
  }

  /* Hide non-report chrome */
  .bottom-nav,
  #app-bottom-nav,
  #app-bottom-nav *,
  .sfr-back,
  .report-back,
  .pdf-btn,
  #unlock-modal,
  .modal-card,
  #onboarding-overlay,
  .sfr-lock-overlay,
  .lock-cta-card,
  button:not(.no-print-hide),
  .btn-primary,
  .btn-ghost {
    display: none !important;
  }

  /* Header: compact */
  .sfr-header,
  .report-header {
    position: static !important;
    border-bottom: 2px solid #111 !important;
    padding: 8px 0 6px !important;
    margin-bottom: 12px;
  }
  .sfr-header-inner,
  .report-header-inner {
    padding: 0 !important;
  }
  .sfr-badge,
  .report-badge {
    border: 1px solid #888 !important;
    color: #444 !important;
    background: #f0f0f0 !important;
  }

  /* Body padding */
  .sfr-body,
  .page,
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sections */
  .sfr-section,
  .rpt-section,
  .report-section {
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Stat grid */
  .sfr-stat-grid,
  .stat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .sfr-stat,
  .stat-card {
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    padding: 7px 8px !important;
  }
  .sfr-stat-val { font-size: 14px !important; }
  .sfr-stat-lbl { font-size: 8px !important; }

  /* Metric rows */
  .sfr-metric-row,
  .report-metric-row {
    padding: 5px 0 !important;
    font-size: 12px !important;
  }

  /* Kickers and titles */
  .sfr-section-kicker,
  .rpt-kicker,
  .report-kicker {
    font-size: 8px !important;
    color: #888 !important;
  }
  .sfr-section-title,
  .rpt-title,
  .report-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* Limit notes */
  .sfr-limit-note,
  .report-limit-note {
    font-size: 8px !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
  }

  /* Career rows */
  .career-row { padding: 6px 0 !important; font-size: 12px !important; }

  /* Verify items */
  .verify-item { padding: 5px 0 !important; }
  .verify-text { font-size: 11px !important; }

  /* Warning banners */
  .sfr-warn-banner,
  .report-warn-banner {
    padding: 6px 8px !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* Report footer */
  .sfr-report-meta,
  .report-footer {
    font-size: 8px !important;
    padding: 8px 0 4px !important;
    border-top: 1px solid #ddd;
  }

  /* Major deep dive specific */
  .rpt-section { padding: 12px 0 !important; }
  .sel-counter-wrap,
  .sel-limit-msg,
  #sel-counter-wrap,
  .unlock-badge { display: none !important; }
  .sxm-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Page breaks */
  h2, h3, .sfr-section-title, .rpt-title { page-break-after: avoid; }
  .sfr-section, .rpt-section { page-break-inside: avoid; }

  /* ── Universal P0 print rules ── */
  /* Hide all interactive elements */
  .sc-check, .sch-wic-check, .wic-on,
  input[type=checkbox], select, textarea,
  .compare-bar, #compare-bar, #schools-compare-bar,
  .cip6-select-bar, #cip6-select-bar,
  .bulk-bar, .filter-bar, .ps-filter-bar,
  #ps-filter-bar, .sort-bar, .sort-tabs,
  .no-print-hide, .btn-save, .btn-view,
  .cta-strip, .next-steps,
  #pdf-placeholder, #pdf-confirm, #pdf-btn,
  .mjr-chip, .grp-label,
  .wic-lock-btn, .wic-lock-price, .wic-lock-note,
  .edit-btn, #schools-load-more,
  [onclick]:not(.print-keep) { pointer-events: none; }

  /* Hide specifically interactive-only elements */
  .sc-check, .sch-wic-check,
  .compare-bar, #compare-bar, #schools-compare-bar,
  .cip6-select-bar, #cip6-select-bar,
  .bulk-bar, #ps-filter-bar, .sort-tabs,
  .no-print-hide, .btn-save,
  .cta-strip, .next-steps,
  #pdf-placeholder, .mjr-chip, .grp-label,
  .wic-lock-btn, .wic-lock-price,
  #schools-load-more { display: none !important; }

  /* PDF footer branding */
  .pdf-report-footer {
    display: block !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: #888;
    border-top: 1px solid #ddd;
    padding-top: 6px;
    margin-top: 16px;
    text-align: center;
  }

  /* Compact school list for program-schools print */
  .ps-print-table { display: table !important; width: 100%; border-collapse: collapse; font-size: 10px; }
  .ps-print-table th { background: #f0f0f0; border: 1px solid #ddd; padding: 4px 6px; text-align: left; font-weight: 600; }
  .ps-print-table td { border: 1px solid #ddd; padding: 3px 6px; }
  .school-card.ps-print-hide { display: none !important; }
}