/* College-Predictor-only styles. Loaded ONLY on college-predictor.html,
   so overrides to shared rank-predictor.css classes here are scoped to this
   page and don't affect the rank predictor. */

/* ── Input page: tighter vertical rhythm so the whole form fits one viewport ── */
.cp-hero-head { margin-bottom: 16px; }
.cp-hero-form { gap: 16px; }
.cp-hero-form .hero-form-grid { gap: 12px; }
.cp-rank-paths { gap: 0; }
.cp-rank-card { padding: 16px; }
.cp-rank-card .exam-path-title { margin-top: 2px; }

/* Even card height: both rank cards stretch to the taller one (Mains, which
   has the extra domicile field); the Advanced card centers its single field
   vertically so it doesn't trail empty space at the bottom. */
.cp-rank-paths { align-items: stretch; }
.cp-rank-card { display: flex; flex-direction: column; }
.cp-rank-field { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cp-rank-card .rs-urls-help { margin-top: 8px; }

/* ── Results hero ── */
.cp-results-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.rc-value-suffix {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-soft, #475569);
  margin-left: 8px;
}
@media (min-width: 720px) { .rc-value-suffix { font-size: 18px; } }

.cp-total-context {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #475569);
}

/* Unified search-summary bar — one full-width bordered strip echoing the
   user's query (Advanced · Mains · Domicile · Category) with Edit as the last
   segment. Dark fill so it reads as a single "your search" object that spans
   the table width, with hairline internal dividers between segments. */
.cp-summary-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
  background: var(--ink, #1E293B);
  border: 2px solid var(--ink, #1E293B);
  border-radius: 14px;
  box-shadow: var(--shadow-sm, 2px 2px 0 0 #1E293B);
  overflow: hidden;
}
.cp-summary-seg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.cp-summary-seg:first-child { border-left: 0; }
.cp-summary-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.cp-summary-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  color: #fff;
}
/* Edit — the trailing segment. Accent-coloured, divider on its left. */
.cp-summary-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--primary, #fc7f02);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.cp-summary-edit:hover { background: rgba(252, 127, 2, 0.14); }

/* Narrow screens: stack the segments so values never crush; dividers flip to
   the top edge and Edit becomes a full-width footer segment. */
@media (max-width: 600px) {
  .cp-summary-bar { flex-direction: column; align-items: stretch; }
  .cp-summary-seg { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .cp-summary-seg:first-child { border-top: 0; }
  .cp-summary-edit {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    justify-content: center;
  }
}

/* ── Share report card (off-screen capture target) ──
   The hider parent carries the off-screen positioning; the card itself stays
   in normal flow so html-to-image (which inlines the captured node's OWN
   computed styles onto the clone) doesn't push the content off the canvas —
   that bug renders a blank cream rectangle. A fixed width gives the shared PNG
   a clean, WhatsApp-friendly aspect. */
.cp-share-hider {
  position: absolute;
  left: -99999px;
  top: 0;
  pointer-events: none;
  z-index: -1;
}
.cp-share-report {
  width: 440px;
  box-sizing: border-box;
  padding: 26px;
  background: var(--cream, #FFFDF5);
  /* Square corners: the captured PNG is a rectangle, so a border-radius here
     leaves the bounding-box corners showing through as white on WhatsApp.
     Filling edge-to-edge removes that leftover entirely. */
  border-radius: 0;
  border: 2px solid var(--ink, #1E293B);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink, #1E293B);
}
/* Header row: brand + title + query on the left, scannable QR pulled up into
   the top-right (previously empty) space for tighter vertical packing. */
.cp-sr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cp-sr-main { flex: 1; min-width: 0; }
.cp-sr-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cp-sr-brand { font-family: 'Outfit', sans-serif; display: inline-flex; align-items: baseline; gap: 6px; }
.cp-sr-name { font-weight: 900; font-size: 23px; letter-spacing: -0.02em; }
.cp-sr-sub { font-weight: 800; font-size: 11px; color: var(--primary, #fc7f02); }
.cp-sr-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px; color: var(--ink-soft, #475569); }
.cp-sr-query {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft, #475569);
}
.cp-sr-query span { background: #fff; border: 1.5px solid var(--ink, #1E293B); border-radius: 999px; padding: 4px 10px; }
.cp-sr-query b { font-weight: 900; color: var(--ink, #1E293B); }
.cp-sr-listhead {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink, #1E293B);
  margin: 18px 0 8px;
}

/* Shared column geometry so the header row and every data row line up.
   The header uses geometry-only classes (cp-sr-crhead / cp-sr-probhead) that
   carry NO font-size, so the three column labels stay one uniform size — the
   data classes (cp-sr-cr) set the value font separately. */
.cp-sr-rank, .cp-sr-rank-h { width: 20px; flex-shrink: 0; }
.cp-sr-col { flex: 1; min-width: 0; }
.cp-sr-cr, .cp-sr-crhead { width: 84px; flex-shrink: 0; text-align: right; }
.cp-sr-probwrap, .cp-sr-probhead { width: 92px; flex-shrink: 0; }

.cp-sr-colhead {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(30, 41, 59, 0.22);
}
.cp-sr-hlabel {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 10px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft, #475569);
}
.cp-sr-probhead { text-align: center; }

.cp-sr-list { display: flex; flex-direction: column; }
.cp-sr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(30, 41, 59, 0.1);
}
.cp-sr-row:first-child { border-top: 0; }
.cp-sr-rank { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 13px; color: var(--primary, #fc7f02); }
.cp-sr-col { display: flex; flex-direction: column; gap: 1px; }
.cp-sr-inst { font-weight: 800; font-size: 13px; }
.cp-sr-branch { font-size: 12px; color: var(--ink-soft, #475569); }
.cp-sr-cr { font-weight: 800; font-size: 13px; }
/* Fixed-width chance column with the pill centered, so the closing-rank value
   never shifts when a wider label like "MEDIUM" appears in the next row. */
.cp-sr-probwrap { display: flex; justify-content: center; }
.cp-sr-prob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.cp-sr-more {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(30, 41, 59, 0.25);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--primary, #fc7f02);
  text-align: center;
}
/* Conversion block in the header's top-right: QR with the CTA copy stacked
   beneath it (replaces the old full-width CTA strip at the foot of the card). */
.cp-sr-aside {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.cp-sr-qr {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background: #fff;
  border: 2px solid var(--ink, #1E293B);
  border-radius: 6px;
}
.cp-sr-cta-copy { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.cp-sr-cta-main {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 15px;
  color: var(--primary, #fc7f02); line-height: 1.15;
}
.cp-sr-cta-sub { font-size: 11px; font-weight: 600; color: var(--ink-soft, #475569); line-height: 1.3; }

/* ── Unified control strip: Recommendation · IITs · NITs+ on one row, branch
   dropdown pushed to the right edge. (margin-left:auto from rank-predictor.css
   already right-aligns the select; restated here for clarity.) */
.cp-colleges-flat { margin-top: 24px; }
.cp-unified-controls { row-gap: 8px; }
.cp-unified-controls .branch-select { margin-left: auto; }