/* Rankings tables. Loaded only on /rankings pages (see RK_STYLES in src/routes/rankings.tsx).
   Desktop (720px and up): one compact table with a sticky header, fixed column widths, and a whole-row link.
   Phones (under 720px): the same schools as a card list, with no horizontal scrolling. */

:root {
  --rk-gold: #b08a2e;
  --rk-silver: #7c8799;
  --rk-bronze: #a46a3f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rk-gold: #d8b46a; --rk-silver: #c3ccd9; --rk-bronze: #d59a70; }
}
:root[data-theme="dark"] { --rk-gold: #d8b46a; --rk-silver: #c3ccd9; --rk-bronze: #d59a70; }

/* ---------- Desktop table ---------- */

.rk-wrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-sm); overflow-x: auto; }
/* From 1000px the table always fits, so the wrapper clips instead of scrolling and the header can stick. */
@media (min-width: 62.5rem) { .rk-wrap { overflow: clip; } }

.rk-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .92rem; color: var(--text); font-variant-numeric: tabular-nums; }
.rk-cap { caption-side: top; text-align: left; padding: .85rem 1.1rem .65rem; font-size: .82rem; font-weight: 600; color: var(--muted); }

.rk-table th, .rk-table td { padding: .5rem .55rem; text-align: left; vertical-align: middle; }
.rk-table th:first-child, .rk-table td:first-child { padding-left: 1.1rem; }
.rk-table th:last-child, .rk-table td:last-child { padding-right: 1.1rem; }
.rk-c { text-align: center !important; }
.rk-r { text-align: right !important; }

/* Column widths: fixed, so every grade and pillar column lines up. The school column takes the rest. */
.rk-w-rank { width: 4.4rem; }
.rk-w-ring { width: 6.25rem; }
.rk-w-g { width: 7.4rem; }
.rk-w-p { width: 6.9rem; }
.rk-w-n { width: 6.4rem; }

.rk-table thead th {
  position: sticky; top: 4.1rem; z-index: 3;
  background: var(--surface); border-bottom: 1px solid var(--line-strong);
  padding-top: .62rem; padding-bottom: .62rem;
  font-size: .8rem; font-weight: 700; line-height: 1.25; color: var(--subtle); white-space: normal; text-wrap: balance;
}
.rk-th { display: inline-flex; align-items: center; gap: .2rem; }
.rk-table thead .rk-c .rk-th { justify-content: center; }
.rk-table thead .rk-r .rk-th { justify-content: flex-end; }

.rk-table tbody tr { position: relative; }
.rk-table tbody th, .rk-table tbody td { height: 4rem; padding-top: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); background: var(--bg); font-weight: 400; }
.rk-table tbody tr:last-child > * { border-bottom: 0; }
.rk-table tbody tr:nth-child(even) > * { background: var(--surface); }
.rk-table tbody tr:hover > *, .rk-table tbody tr:focus-within > * { background: var(--surface-2); }
.rk-table tbody tr:hover .rk-name, .rk-table tbody tr:focus-within .rk-name { color: var(--blue); text-decoration: underline !important; text-decoration-color: currentColor; }

/* Whole row is the link: the name's ::after covers the row. Badges and grades sit above it. */
.rk-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Keyboard focus on the name: the whole row is outlined, so the target is clear. */
.rk-table tbody tr:has(.rk-name:focus-visible) > * { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.rk-name:focus-visible { outline: none; }
.rk-table .pop-host { position: relative; z-index: 2; }
.rk-table .pop-trigger, .rk-table .pop-i { position: relative; z-index: 2; }

/* Rank */
.rk-rank .rk-num { font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.rk-num { display: inline-block; min-width: 2ch; }
.rk-top-1 .rk-num { color: var(--rk-gold); }
.rk-top-2 .rk-num { color: var(--rk-silver); }
.rk-top-3 .rk-num { color: var(--rk-bronze); }
.rk-row.rk-top-1 > :first-child { box-shadow: inset 3px 0 0 var(--rk-gold); }
.rk-row.rk-top-2 > :first-child { box-shadow: inset 3px 0 0 var(--rk-silver); }
.rk-row.rk-top-3 > :first-child { box-shadow: inset 3px 0 0 var(--rk-bronze); }

/* School cell: name on one line, city and state beneath. */
.rk-table .rk-school { width: auto; min-width: 0; }
.rk-school-h { text-align: left; }
.rk-name-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.rk-name {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: var(--ink) !important; text-decoration: none !important; font-size: .95rem; line-height: 1.3;
}
.rk-meta { display: block; margin-top: .05rem; font-size: .8rem; line-height: 1.3; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 62.49rem) {
  .rk-name { white-space: normal; }
}

/* Icon-only badges: Honor Roll (star), Recommended (seal), Catholic (cross). */
.rk-badge { display: inline-flex; align-items: center; gap: .25rem; height: 1.35rem; padding: 0 .5rem 0 .4rem; border-radius: 999px; border: 1px solid transparent; flex: none; cursor: help; font-size: .7rem; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: .01em; }
.rk-badge svg { width: .72rem; height: .72rem; flex: none; }
.rk-badge.honor { color: var(--gold-fill-ink); background: var(--gold-fill); border-color: var(--gold-fill); }
.rk-badge.honor.life { color: var(--teal-ink); background: var(--teal-50); border-color: var(--teal-100); }
.rk-badge.rec { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); }
.rk-badge.cath { color: var(--navy, #14325c); background: var(--surface-2); border-color: var(--line-strong); }
.rk-badge:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Score ring: the shared small ring, scaled to a 3rem disc so the row stays 56-64px. */
.rk-ring { display: inline-flex; }
.rk-table .ring, .rk-list .ring { width: 3rem !important; height: 3rem !important; }
.rk-table .ring svg, .rk-list .ring svg { width: 100%; height: 100%; }
/* The life ring's cross keeps its weight when the ring is scaled down (user units: the ring is drawn at 96). */
.rk-table .ring-cross, .rk-list .ring-cross { stroke-width: 3.6px; }
/* At 3rem a three-digit score (100) must fit inside the disc, so the number is set smaller here. */
.rk-table .ring.sm .ring-label b, .rk-list .ring.sm .ring-label b { font-size: .68rem; letter-spacing: -.04em; white-space: nowrap; }

/* Grades: badge and score on one line ("A 93"), centered in the column. */
.rk-gs { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.rk-gs .grade.sm { width: 1.6rem; height: 1.6rem; font-size: .85rem; border-radius: 7px; }
.rk-n { min-width: 1.9ch; font-size: .84rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: left; }

/* Not enough information: a muted dash with its own popover. */
.rk-dash { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; color: var(--subtle); font-weight: 700; font-size: 1rem; cursor: help; }
.rk-dash:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Column (i) buttons are a touch smaller in headers. */
.rk-th .pop-i { width: 1.25rem; height: 1.25rem; }
.rk-th .pop-i svg { width: .8rem; height: .8rem; }

/* Mid-width (720 to 999px): pillar score numbers step down so the columns still fit. */
@media (max-width: 62.49rem) {
  .rk-w-g { width: 6.6rem; }
  .rk-w-p { width: 5.2rem; }
  .rk-w-n { width: 5.6rem; }
  .rk-w-ring { width: 5.2rem; }
  .rk-w-p .rk-n { display: none; }
  .rk-w-p .rk-th .pop-i { display: none; }
}
@media (max-width: 62.49rem) and (min-width: 45rem) {
  .rk-w-p .rk-th { white-space: normal; }
}

/* ---------- Phone card list ---------- */

.rk-phone-cap, .rk-list { display: none; }
.rk-phone-cap { margin: 0 0 .75rem; font-size: .84rem; font-weight: 600; color: var(--muted); }

@media (max-width: 44.99rem) {
  .rk-wrap { display: none; }
  .rk-phone-cap { display: block; }
  .rk-list { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }

  .rk-card {
    position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-sm); padding: .85rem .9rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .rk-card:hover, .rk-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
  .rk-card.rk-top-1 { box-shadow: inset 3px 0 0 var(--rk-gold), var(--shadow-sm); }
  .rk-card.rk-top-2 { box-shadow: inset 3px 0 0 var(--rk-silver), var(--shadow-sm); }
  .rk-card.rk-top-3 { box-shadow: inset 3px 0 0 var(--rk-bronze), var(--shadow-sm); }
  .rk-card.rk-top-1:hover, .rk-card.rk-top-1:focus-within { box-shadow: inset 3px 0 0 var(--rk-gold), var(--shadow); }
  .rk-card.rk-top-2:hover, .rk-card.rk-top-2:focus-within { box-shadow: inset 3px 0 0 var(--rk-silver), var(--shadow); }
  .rk-card.rk-top-3:hover, .rk-card.rk-top-3:focus-within { box-shadow: inset 3px 0 0 var(--rk-bronze), var(--shadow); }
  .rk-card-head { display: grid; grid-template-columns: 2rem 3rem minmax(0, 1fr); gap: .7rem; align-items: center; }
  .rk-card-head.rk-noring { grid-template-columns: 2rem minmax(0, 1fr); }
  .rk-card-rank { text-align: center; }
  .rk-card-rank .rk-num { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
  .rk-card-id { min-width: 0; }
  .rk-card .rk-name { white-space: normal; font-size: 1rem; }
  .rk-card .rk-name-row { flex-wrap: wrap; row-gap: .25rem; }
  .rk-card .rk-meta { white-space: normal; }
  .rk-card .rk-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
  .rk-card .pop-host { position: relative; z-index: 2; }
  .rk-card-meta { margin: .6rem 0 0; font-size: .84rem; color: var(--muted); }

  .rk-chips { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .75rem; }
  .rk-chip { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; padding-top: .45rem; border-top: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--text); }
  .rk-chip .rk-cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
  .rk-chip .rk-gs { justify-content: flex-end; flex: none; }
  .rk-chip .rk-gs .grade.sm { width: 1.5rem; height: 1.5rem; font-size: .8rem; }
  .rk-chip .rk-n { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-card { transition: none; }
  .rk-card:hover, .rk-card:focus-within { transform: none; }
}
@media (forced-colors: active) {
  .rk-badge, .rk-dash { forced-color-adjust: none; }
  .rk-row.rk-top-1 > :first-child, .rk-row.rk-top-2 > :first-child, .rk-row.rk-top-3 > :first-child { box-shadow: none; }
}

/* ---------- Hub: tabs and ranking cards (/rankings) ---------- */

.rk-tabs {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0 1.6rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  width: fit-content; max-width: 100%;
}
.rk-tabs::-webkit-scrollbar { display: none; }
.rk-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
  font-size: .92rem; font-weight: 700; color: var(--muted); white-space: nowrap; text-decoration: none !important;
}
.rk-tabs a:hover { color: var(--ink); background: var(--surface-2); }
.rk-tabs a[aria-selected="true"] { color: var(--btn-ink); background: var(--btn-bg); }
.rk-tabs a[aria-selected="true"] .rk-count { background: rgba(255, 255, 255, .22); color: var(--btn-ink); }
.rk-tabs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rk-count {
  min-width: 1.6rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--line);
  color: var(--subtle); font-size: .74rem; font-weight: 800; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums;
}
.rk-panel { margin-bottom: 2.75rem; }
.rk-panel[hidden] { display: none; }
.rk-note { max-width: 48rem; color: var(--muted); font-size: .95rem; margin: 0 0 1.25rem; }

.rk-grid { display: grid; gap: 1rem; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .rk-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .rk-grid { grid-template-columns: repeat(3, 1fr); } }

.rk-hub {
  position: relative; display: flex; flex-direction: column; gap: .45rem; height: 100%; margin: 0;
  padding: 1.15rem 1.25rem 1rem; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rk-hub:hover, .rk-hub:focus-within { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.rk-hub-ico {
  width: 2.2rem; height: 2.2rem; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--blue-50); color: var(--blue); margin-bottom: .2rem;
}
.rk-hub-title { margin: 0; font-size: 1.04rem; line-height: 1.3; }
.rk-hub-title a { color: var(--ink) !important; text-decoration: none !important; }
.rk-hub-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rk-hub:hover .rk-hub-title a, .rk-hub:focus-within .rk-hub-title a { color: var(--blue) !important; text-decoration: underline !important; text-underline-offset: .18em; }
.rk-hub-blurb { margin: 0; flex: 1 1 auto; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.rk-hub-meta {
  margin: .3rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--subtle);
}
.rk-hub-meta::after { content: "›"; font-size: 1.15rem; line-height: 1; color: var(--blue); transition: transform .2s; }
.rk-hub:hover .rk-hub-meta::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .rk-hub, .rk-hub-meta::after { transition: none; } .rk-hub:hover { transform: none; } }

.rk-group { margin: 1.6rem 0 .4rem; font-size: 1rem; }
.rk-lists { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rk-lists li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.rk-lists a { font-weight: 700; }

/* Which-colleges switch on the Catholic life rankings: full labels on wide screens, short ones on phones. */
.seg-switch a { white-space: nowrap; }
.seg-switch .seg-short { display: none; }
@media (max-width: 480px) {
  .seg-switch { display: flex; width: 100%; }
  .seg-switch a { flex: 1 1 auto; text-align: center; padding: .4rem .5rem; }
  .seg-switch .seg-full { display: none; }
  .seg-switch .seg-short { display: inline; }
}
/* A tied rank reads "20 (tie)"; the note sits under the number where the column is narrow. */
.rk-tie { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1.2; }