/* ============================================================================
   components.css — v4 class-based component library (College Comparison)
   ----------------------------------------------------------------------------
   Pairs with the v4 token block in theme.css (body[data-theme="v4"]). All
   values come from tokens — NO hex codes here. Loaded only on v4 surfaces.
   Source of visual truth: design/wireframes_v4.html + design/04_design_brief.md.
   ============================================================================ */

body[data-theme="v4"]{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui); -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" off;
}
body[data-theme="v4"] .tnum{ font-feature-settings:"tnum"; }

/* --- Typography helpers --- */
body[data-theme="v4"] .v4-display{ font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; }
body[data-theme="v4"] .v4-h1{ font-family:var(--font-display); font-weight:500; font-size:27px; line-height:1.12; letter-spacing:-.01em; }
body[data-theme="v4"] .v4-h2{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.25; }
body[data-theme="v4"] .v4-section{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:22px 2px 10px; }
body[data-theme="v4"] .v4-muted{ color:var(--text-muted); }
body[data-theme="v4"] .v4-faint{ color:var(--text-faint); }

/* --- Top nav --- */
.v4-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px 12px; background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.v4-wordmark{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--accent); text-decoration:none; }
.v4-navlinks{ display:flex; gap:16px; align-items:center; font-size:13px; font-weight:600; color:var(--text-muted); }
.v4-navlinks a{ color:var(--text-muted); text-decoration:none; }
.v4-navlinks a.on,.v4-navlinks a:hover{ color:var(--text); }
/* Active section gets a subtle gradient underline — brand "light at the edge":
   green holds, then warms to soft gold at the right (same profile as the login
   button / parent sub-tabs). */
.v4-navlinks a.on{ position:relative; }
.v4-navlinks a.on::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 64%,#ECBF6C 100%); }
.v4-avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
/* Brand lockup (logo + wordmark) shown at the left of the nav, app-wide. */
.v4-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto; }
.v4-brand img{ width:40px; height:40px; object-fit:contain; display:block; }
.v4-brand span{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--text); white-space:nowrap; }

/* --- Buttons --- */
.v4-btn{ font-family:var(--font-ui); font-size:13px; font-weight:600; border-radius:var(--radius-control); padding:9px 14px; border:1px solid transparent; cursor:pointer; white-space:nowrap; min-height:40px; transition:background .12s,border-color .12s; }
/* Green fill with a gold corner glow (radial anchored bottom-right, blending
   up-and-left into the canopy green) — the app's signature CTA treatment. */
.v4-btn-primary{ background:radial-gradient(circle at bottom right, #ECBF6C 0%, var(--accent) 40%); color:#fff; box-shadow:0 6px 16px rgba(47,74,57,.22); }
.v4-btn-primary:hover{ filter:brightness(.96); }
.v4-btn-ghost{ background:transparent; color:var(--accent); border-color:var(--border-strong); }
.v4-btn-ghost:hover{ background:var(--accent-dim); }
.v4-btn-block{ display:block; width:100%; text-align:center; }
.v4-btn-sm{ font-size:12px; padding:6px 11px; min-height:32px; }

/* --- Tabs (underline) --- */
.v4-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--border); margin-top:18px; }
.v4-tab{ padding:10px 2px 12px; font-size:14px; font-weight:600; color:var(--text-faint); position:relative; background:none; border:none; cursor:pointer; font-family:var(--font-ui); }
.v4-tab.on{ color:var(--text); }
.v4-tab.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; }
.v4-tab .cnt{ color:var(--text-faint); font-weight:500; }

/* --- Filter pills --- */
.v4-filters{ display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 4px; }
.v4-fpill{ font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-chip); padding:5px 11px; cursor:pointer; }
.v4-fpill.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* --- Chips: admissions tier (slate, never green) + provenance --- */
.v4-chip-tier{ font-size:11px; font-weight:600; color:var(--tier-text); background:var(--tier-bg); border:1px solid var(--tier-border); border-radius:var(--radius-chip); padding:3px 9px; white-space:nowrap; }
.v4-chip-prov{ font-size:11px; font-weight:600; border-radius:var(--radius-chip); padding:3px 9px; white-space:nowrap; }
.v4-prov-fit{ color:var(--accent); background:var(--accent-dim); border:1px solid rgba(47,74,57,.18); }
.v4-prov-rec{ color:#6b4e9e; background:rgba(107,78,158,.08); border:1px solid rgba(107,78,158,.2); }
.v4-prov-you{ color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); }

/* --- Fit band (fuzzy, monochrome green ramp, NEVER a number) --- */
.v4-fit{ display:flex; align-items:center; gap:9px; margin:9px 0; }
.v4-fit-label{ font-size:12.5px; font-weight:600; min-width:78px; }
.v4-track{ display:flex; gap:3px; flex:1; max-width:150px; }
.v4-seg{ height:7px; flex:1; border-radius:3px; background:var(--fit-fair); opacity:.5; }
.v4-seg.f{ opacity:1; }
.v4-seg.fade{ -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent); mask-image:linear-gradient(90deg,#000 35%,transparent); }
.v4-fit.excellent .v4-seg.f{ background:var(--fit-excellent); }
.v4-fit.strong .v4-seg.f{ background:var(--fit-strong); }
.v4-fit.decent .v4-seg.f{ background:var(--fit-decent); }
.v4-fit.fair .v4-seg.f{ background:var(--fit-decent); }
.v4-mini{ width:46px; }
.v4-mini .v4-seg{ height:6px; }
/* Continuous fit bar — a warm→cool ramp painted across the full track; the
   cover hides everything past the score position, so BOTH the length AND the tip
   colour reflect the score (an 80 ends olive-green, an 87 deep forest — the old
   4-segment bar maxed both out identically). A rounded, taller pill. */
.v4-track.v4-cont{ position:relative; display:block; height:7px; flex:1; min-width:170px; max-width:340px;
  border-radius:999px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(60,50,30,.12);
  background:linear-gradient(90deg,#B3473E 0%,#CF7738 18%,#E8B04B 38%,#9CA453 56%,#4E7D63 78%,#2F4A39 100%); }
/* The unfilled remainder: a distinctly darker groove (not the near-white paper)
   with a soft shadow at the fill boundary, so how much is left reads clearly. */
.v4-track.v4-cont .v4-cover{ position:absolute; top:0; bottom:0; right:0; left:100%;
  background:#D8CEB9; box-shadow:inset 2px 0 3px rgba(60,50,30,.14); transition:left .3s ease; }
.v4-mini .v4-track.v4-cont{ height:7px; min-width:0; }

/* --- Cards --- */
.v4-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px; box-shadow:var(--shadow-card); margin-bottom:12px; }
.v4-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.v4-schoolname{ font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.1; letter-spacing:-.01em; }
.v4-loc{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.v4-read{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:15.5px; line-height:1.45; color:var(--text); margin:11px 0 4px; }
.v4-read .by{ display:block; font-family:var(--font-ui); font-style:normal; font-size:11.5px; font-weight:600; color:var(--text-faint); margin-top:6px; letter-spacing:.02em; }
.v4-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* --- Compact row (expand in place) --- */
.v4-row{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin-bottom:8px; cursor:pointer; }
.v4-row .nm{ font-family:var(--font-display); font-weight:500; font-size:15.5px; flex:1; }
.v4-row .chev{ color:var(--text-faint); font-size:13px; }

/* --- Density toggle --- */
.v4-density{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-chip); padding:3px; margin:6px 0 2px; }
.v4-density span{ font-size:11.5px; font-weight:600; color:var(--text-muted); padding:4px 12px; border-radius:var(--radius-chip); cursor:pointer; }
.v4-density .on{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* --- Profile strip / well --- */
.v4-pstrip{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-control); padding:12px 14px; margin-top:14px; }
.v4-pstrip p{ font-size:13px; line-height:1.45; color:var(--text-muted); }
.v4-pstrip a{ color:var(--accent); font-weight:600; font-size:12.5px; white-space:nowrap; text-decoration:none; }

/* --- Counselor note / aside --- */
.v4-note{ display:flex; gap:9px; background:var(--surface-2); border-left:3px solid var(--accent); border-radius:8px; padding:10px 12px; margin-top:12px; }
.v4-note .ic{ width:22px; height:22px; border-radius:50%; background:#6b4e9e; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.v4-note p{ font-size:12.5px; line-height:1.45; color:var(--text-muted); }
.v4-note b{ color:var(--text); font-weight:600; }

/* --- Explore rail --- */
.v4-rail{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-control); padding:11px 14px; margin:14px 0 6px; }
.v4-rail .lbl{ font-size:13px; font-weight:600; }
.v4-rail .lbl em{ font-style:normal; font-family:var(--font-display); font-weight:500; }
.v4-rail a{ font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap; cursor:pointer; }

/* --- My List buckets + nudge --- */
.v4-bucket{ margin-top:18px; }
.v4-bucket h3{ font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.v4-bucket .hint{ font-size:11.5px; font-weight:500; color:var(--text-faint); }
.v4-listrow{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin-top:8px; }
.v4-listrow .nm{ font-family:var(--font-display); font-weight:500; font-size:15px; }
.v4-listrow .sub{ display:flex; gap:6px; align-items:center; margin-top:3px; }
.v4-listrow .x{ color:var(--text-faint); font-size:15px; cursor:pointer; }
.v4-nudge{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-dim); border:1px solid rgba(47,74,57,.18); border-radius:var(--radius-control); padding:11px 13px; margin-top:14px; }
.v4-nudge p{ font-size:12.5px; color:var(--accent); font-weight:500; line-height:1.4; }
.v4-nudge a{ font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; cursor:pointer; }

/* --- School sheet / modal --- */
.v4-scrim{ position:fixed; inset:0; background:rgba(28,36,33,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.v4-sheet{ position:relative; background:var(--surface); border-radius:22px 22px 0 0; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; padding:6px 18px 24px; box-shadow:var(--shadow-modal); }
.v4-sheet-close{ position:sticky; top:0; float:right; margin:-2px -6px 0 0; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; }
.v4-sheet-close:hover{ background:var(--surface-2); color:var(--text); }
.v4-grab{ width:38px; height:5px; border-radius:3px; background:var(--border-strong); margin:8px auto 14px; }
.v4-subtabs{ display:flex; gap:6px; background:var(--surface-2); border-radius:var(--radius-chip); padding:4px; margin:8px 0 12px; }
.v4-subtabs span{ flex:1; text-align:center; font-size:12px; font-weight:600; color:var(--text-muted); padding:6px; border-radius:var(--radius-chip); cursor:pointer; }
.v4-subtabs .on{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.v4-vibe{ font-size:14px; line-height:1.6; color:var(--text); }
.v4-worth{ margin-top:6px; padding:0; }
.v4-worth li{ list-style:none; font-size:13px; line-height:1.5; color:var(--text-muted); padding:7px 0; border-bottom:1px solid var(--border); display:flex; gap:8px; }
.v4-worth li::before{ content:"·"; color:var(--accent); font-weight:800; }
.v4-attr{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.v4-attr .a-l{ font-size:13px; font-weight:600; }
.v4-attr .a-l small{ display:block; font-weight:500; color:var(--text-faint); font-size:11.5px; margin-top:1px; }
.v4-attr a{ font-size:11.5px; color:var(--accent); font-weight:600; text-decoration:none; }
.v4-pillband{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--radius-chip); }
.v4-pb-good{ background:var(--accent-dim); color:var(--accent); }
.v4-pb-mid{ background:#F3ECDD; color:#8a6d22; }

/* --- Layout container --- */
.v4-body{ max-width:760px; margin:0 auto; padding:18px 18px 40px; }
@media(min-width:680px){ .v4-body{ padding:24px 24px 56px; } }

/* --- Shared school badge (colored initial inline with a school name) --- */
.school-badge{ display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; min-width:1.55rem; border-radius:6px; color:#fff; font-weight:800; font-size:0.82rem; margin-right:0.5rem; vertical-align:middle; flex:0 0 auto; }