/* ============================================================
   ICE answer library — additions only
   ------------------------------------------------------------
   /answers, /answers/<slug> and /answers/category/<id> render on
   the existing `.pf` profile composition (ice-profile-v1.css), so
   they inherit the whole design system, both themes and every
   dark-mode contrast fix already made there.

   This file therefore defines ONLY what `.pf` has no pattern for:
   a data table, the library grid, and the source block. Everything
   else is pf-panel / pf-kicker / pf-list / pf-steps / pf-defs /
   pf-chips / pf-fine.

   Every colour is a `--pf-*` role inherited from `.pf`, never a
   literal, so graphite dark mode needs no parallel rules here. Two
   rules from AGENTS.md are honoured deliberately:

     · no broad element selectors — every selector below is scoped
       under an `.ans-` class, so nothing can leak into .page-tools
       or anywhere else;
     · text is never muted with `opacity`, because opacity
       composites toward whatever sits behind and lands at a
       different ratio on the cream canvas, the white card and the
       graphite card. Muted text uses `--pf-muted`.
   ============================================================ */

/* ---------- the panel must be allowed to shrink ---------- */

/* `.pf-panel` is a grid item of `.pf-main`, and a grid item defaults to
   `min-width:auto` — it will not shrink below its content. So a table with a
   520px floor pushed the panel to 556px inside a 335px track, and because
   `body` is `overflow-x:clip` the excess did not scroll, it was CUT OFF: the
   right-hand columns of the fee table were invisible and unreachable on a
   phone. Silent data loss, not a cosmetic overflow.

   Scoped to this stylesheet, which only the /answers routes load, so the shared
   profile pages are untouched. */
.pf-main > .pf-panel{ min-width:0; }

/* ---------- data table ---------- */

/* Wrapper scrolls instead of the page, so a four-column fee table cannot
   introduce horizontal overflow on a 360px screen.

   `min-width:0` is load-bearing and not defensive boilerplate. A grid or flex
   item defaults to `min-width:auto`, which means it refuses to shrink below its
   content — so the table's 520px floor pushed the whole .pf-panel to 556px on a
   375px viewport and the body to 576px, and the wrapper never scrolled because
   it was never constrained. `min-width:0` lets it shrink and hand the overflow
   to its own scroll container, which is the entire point of the wrapper.

   Note also that `document.documentElement.scrollWidth` CLAMPS to the viewport
   and reported 375 while this was broken. Measure `document.body.scrollWidth`,
   or the panel's own width, when checking for horizontal overflow. */
.ans-tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  min-width:0;
  max-width:100%;
  margin:14px 0 4px;
  border:1px solid var(--pf-line);
  border-radius:10px;

  /* The scrollbar is part of the design here, not chrome to hide.
     Mobile Chrome shows an overlay scrollbar only once a finger is already
     moving, which is no use to a reader who does not know there is anything to
     move towards — so the visible hint below carries that job, and this just
     makes the desktop scrollbar match the page instead of the OS. */
  scrollbar-width:thin;
  scrollbar-color:var(--pf-line) transparent;
}
.ans-tablewrap::-webkit-scrollbar{height:9px}
.ans-tablewrap::-webkit-scrollbar-track{background:transparent}
.ans-tablewrap::-webkit-scrollbar-thumb{
  background:var(--pf-line);
  border-radius:999px;
}
.ans-tablewrap:hover::-webkit-scrollbar-thumb{background:var(--pf-muted)}

/* The wrapper is focusable now (AnswerBody gives it tabindex="0", because a
   scroll container that cannot be focused cannot be scrolled by keyboard), so
   it needs its own ring rather than the one the sitewide rule paints on links. */
.ans-tablewrap:focus-visible{
  outline:3px solid var(--ice-color-text-action,var(--pf-brand));
  outline-offset:2px;
}

/* ---- say that it scrolls ----
   `min-width:0` above made the wrapper scroll instead of the page, which fixed
   the cut-off. It did not fix the reader's problem: at 390px the wrapper is
   314px around a 520px table, and a fully-bordered rounded card with no visible
   scrollbar looks exactly like a table that ends where it ends. A parent
   comparing Regular against Full Fee saw one column and no reason to think
   there were two more.

   The breakpoint is honest rather than approximate. `.ans-table` carries a
   520px min-width FLOOR, so every table in the corpus is at least 520px wide by
   construction — which means below roughly 620px of viewport every one of them
   scrolls, and the hint is never shown over a table that fits. If that floor
   ever changes, change this number with it. */
.ans-tablewrap__hint{
  display:none;
  margin:6px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--pf-muted);
}
@media (max-width:620px){
  .ans-tablewrap__hint{display:block}
}
/* `min-width` is a FLOOR, so the wrapper above scrolls rather than the table
   compressing. It was written as `min(100%,520px)` first, which resolves to the
   container width on a phone and therefore did nothing: the four-column fee
   table crammed into 314px with every rupee figure wrapping onto two lines.
   A money table that wraps is a money table people misread. */
.ans-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:13.5px;
  line-height:1.45;
  /* These tables are mostly money and mostly compared down the column: eight
     semesters against four years, Regular against Full Fee. The system stack
     ships proportional figures by default, so "Rs 55,792" and "Rs 4,22,128" set
     to different widths and the digits do not line up under each other. Tabular
     figures are the whole reason the feature exists, and a fee table is the
     clearest case for it on the site. */
  font-variant-numeric:tabular-nums;
}
.ans-table caption{
  caption-side:bottom;
  padding:9px 12px 10px;
  font-size:12px;
  color:var(--pf-muted);
  text-align:left;
  border-top:1px solid var(--pf-line);
}
.ans-table th,
.ans-table td{
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
  border-top:1px solid var(--pf-line);
}
.ans-table thead th{
  border-top:0;
  background:var(--surface-tint);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pf-muted);
  white-space:nowrap;
}
.ans-table tbody th{
  font-weight:700;
  color:var(--pf-ink);
}
.ans-table td{ color:var(--pf-ink); }
.ans-table tbody tr:nth-child(even) td,
.ans-table tbody tr:nth-child(even) th{ background:var(--surface-tint); }

/* ---------- library grid ---------- */

.ans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:var(--pf-gap);
  margin:0;
  padding:0;
  list-style:none;
}
/* ---- the card is the <li>; the LINK is the question ----
   The anchor used to wrap the whole card, which made its accessible name the
   question AND the summary AND the date — 230 to 290 characters of "anchor
   text" per card, on 65 pages. That is what a screen reader reads out in a link
   list and what a crawler records as the link's label, and at that length it is
   neither.

   So the anchor is the question only, and `.ans-card__q::after` stretches an
   invisible box over the card to keep the whole surface clickable. The reader
   loses nothing: same hit area, same hover, and the summary underneath becomes
   selectable text rather than part of a link. */
.ans-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px var(--pf-pad) 15px;
  border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);
  background:var(--pf-surface);
  color:inherit;
  min-height:44px;
}
.ans-card:hover{ background:var(--surface-tint); }
/* The ring goes on the CARD, because the focused thing a keyboard user sees
   should be the whole target, not the two lines of heading inside it. */
.ans-card:focus-within{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
.ans-card__q{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.012em;
  line-height:1.3;
  color:var(--pf-brand);
  text-decoration:none;
}
.ans-card__q::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}
/* The card already carries the ring via :focus-within, so the anchor must not
   draw a second one inside it. */
.ans-card__q:focus-visible{ outline:none; }
html[data-theme="dark"] .ans-card__q{ color:var(--pf-ink); }
.pf-panel .ans-card__q:not(.pf-btn){ color:var(--pf-brand); }
html[data-theme="dark"] .pf-panel .ans-card__q:not(.pf-btn){ color:var(--pf-ink); }
.ans-card__a{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--pf-muted);
}
.ans-card__meta{
  margin-top:auto;
  padding-top:4px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pf-muted);
}

/* ---------- category index ---------- */

.ans-cats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:var(--pf-gap);
  margin:0;
  padding:0;
  list-style:none;
}
/* Same title-as-link-plus-overlay pattern as `.ans-card` above, and for the
   same reason. The section name was also a `<b>` — emphasis markup doing a
   heading's job inside a link — and is now the anchor itself. */
.ans-cat{
  position:relative;
  display:block;
  padding:14px var(--pf-pad);
  border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);
  color:inherit;
}
.ans-cat:hover{ background:var(--surface-tint); }
.ans-cat:focus-within{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
.ans-cat__name{
  display:block;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.012em;
  color:var(--pf-brand);
  text-decoration:none;
}
.ans-cat__name::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.ans-cat__name:focus-visible{ outline:none; }
html[data-theme="dark"] .ans-cat__name{ color:var(--pf-ink); }
.pf-panel .ans-cat__name:not(.pf-btn){ color:var(--pf-brand); }
html[data-theme="dark"] .pf-panel .ans-cat__name:not(.pf-btn){ color:var(--pf-ink); }
.ans-cat__blurb{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--pf-muted);
}
.ans-cat em{
  display:block;
  margin-top:7px;
  font-style:normal;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pf-muted);
}

/* ---------- sources ---------- */

.ans-sources{
  margin:16px 0 0;
  padding:13px var(--pf-pad) 14px;
  border:1px solid var(--pf-line);
  border-radius:10px;
  background:var(--surface-tint);
}
.ans-sources > p{
  margin:0 0 7px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pf-muted);
}
.ans-sources ul{ margin:0; padding-left:17px; }
.ans-sources li{
  font-size:12.5px;
  line-height:1.55;
  color:var(--pf-ink);
}
.ans-sources li + li{ margin-top:5px; }

/* ---------- the ICE block ---------- */

/* Set apart on purpose: a reader should be able to see where the sourced answer
   stops and the college starts, without having to work it out.

   The separation is carried by the uppercase label and by sitting on the plain
   card surface, where `.ans-sources` directly above it sits on the tint. That is
   deliberate rather than decorative — it was a 3px accent border on one side
   first, which is a stock "callout" tell and reads as generated rather than
   designed. The label is the signal; the border was noise. */
.ans-ice{
  margin:16px 0 0;
  padding:13px var(--pf-pad) 14px;
  border:1px solid var(--pf-line);
  border-radius:10px;
  background:var(--pf-surface);
}
.ans-ice > p:first-child{
  margin:0 0 5px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pf-muted);
}
.ans-ice > p:last-child{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--pf-ink);
}

/* ---------- breadcrumb ---------- */

/* Now a `nav > ol > li` (2026-08-22) so the BreadcrumbList in this page's JSON-LD
   has a counterpart in the accessibility tree. The separator is a list marker
   rather than a text node between two anchors, which is what lost its trailing
   space in the build and rendered "Answers ·Fees and scholarships" on all 59
   pages. `::before` is safe for a decorative separator in a way it is not for a
   word: it carries no meaning, so nothing is lost when a screen reader skips it,
   and `aria-hidden` is not available on a pseudo-element. */
.ans-crumb{
  margin:0 0 10px;
  font-size:12px;
  color:var(--pf-muted);
}
.ans-crumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 6px;
  margin:0;
  padding:0;
  list-style:none;
}
.ans-crumb li{ display:flex; align-items:center; gap:6px; }
.ans-crumb li + li::before{
  content:'\00B7';
  color:var(--pf-line);
  font-weight:700;
}
/* `.pf-panel a:not(.pf-btn)` in ice-profile-v1.css is (0,2,1); a bare
   `.ans-crumb a` is (0,1,1) and loses, so this rule did nothing and the
   breadcrumb rendered in the terracotta link colour — louder than the h1 it
   sits above, with a hover that made it quieter instead of stronger. Matching
   the specificity is the fix; `!important` would have hidden the reason. */
.pf-panel .ans-crumb a:not(.pf-btn){
  color:var(--pf-muted);
  text-decoration-color:var(--pf-line);
  text-underline-offset:3px;
  /* 12px text in a 16px line box is a 16px tap target. The padding takes the
     hit area past the 24px WCAG 2.5.8 floor without moving the text, because
     the negative margin gives the space back to the layout. */
  padding:5px 2px;
  margin:-5px -2px;
}
.pf-panel .ans-crumb a:not(.pf-btn):hover{
  color:var(--pf-ink);
  text-decoration-color:currentColor;
}
.ans-crumb [aria-current='page']{ color:var(--pf-ink); font-weight:600; }

/* ---------- reading the answer ----------
   Everything below is the answer leaf and the category hub read as prose rather
   than as a card. It was measured at 89ch on a 1280px screen at 14px, which is
   outside the 65-75ch the design system asks for and well outside what holds a
   reader through a two-thousand-word sourced answer. */

/* The h1 had no rule anywhere. `.pf-panel` styles h2 and h3, so the question —
   the whole point of the page, on 65 of them — fell back to the UA default:
   2em, weight 400, `letter-spacing:normal`, and the inherited 1.62 body leading,
   which set a two-line heading with more air between its lines than a paragraph
   has. It read as a heading borrowed from a different type system than
   everything under it, because it was. */
.pf-panel h1{
  margin:0 0 10px;
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.05rem);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.14;
  color:var(--pf-brand);
  text-wrap:balance;
  max-width:26ch;
}

/* The sentence that IS the answer, and the page's declared `speakable` target.
   It rendered at exactly the size and colour of the body copy that follows it,
   so the one paragraph a reader in a hurry needs looked like the first of
   several. Bigger, and in the ink rather than the muted role. */
/* `.pf-panel > .ans-lede` rather than `.ans-lede !important`: two classes beat
   the one-class-one-element `.pf-panel > p` it has to outrank, and the next
   person can see why it wins by reading it. */
.pf-panel > .ans-lede{
  margin:0 0 16px;
  max-width:64ch;
  font-size:16px;
  line-height:1.55;
  color:var(--pf-ink);
  text-wrap:pretty;
}

/* Prose measure. Capped on the TEXT blocks only, so tables, card grids and the
   source block keep the full panel width they need. */
.pf-panel > p,
.pf-panel > .pf-list,
.pf-panel > .pf-steps,
.pf-panel > .pf-defs,
.pf-panel > .pf-fine{
  max-width:70ch;
}
.pf-panel > p{
  font-size:15px;
  line-height:1.62;
  text-wrap:pretty;
}

/* Section rhythm. `.pf-panel h2` shipped `margin:5px 0 6px`, which collapses
   against the paragraph above to 12px — the same gap two paragraphs get from
   each other, so a section boundary on a long answer was not legible as a
   boundary at all. More space above than below, which is what makes a heading
   belong to what follows it. Scoped by the fact that only the three /answers
   routes load this stylesheet. */
.pf-panel h2{
  margin:2rem 0 .5rem;
  max-width:34ch;
  text-wrap:balance;
}
.pf-panel h3{
  margin:1.5rem 0 .45rem;
  max-width:38ch;
  text-wrap:balance;
}
.pf-panel > *:first-child{ margin-top:0; }

/* The section blurb on the /answers hub. It used to be piped into `.pf-kicker`,
   an 11px uppercase label slot, which turned an 80-character sentence into
   80 characters of tracked capitals. */
.ans-sectionlede{
  margin:0 0 14px;
  max-width:66ch;
  font-size:14.5px;
  line-height:1.6;
  color:var(--pf-muted);
  text-wrap:pretty;
}

/* ---------- grid items must fill their cell ----------
   `.ans-cat` and `.ans-card` are anchors inside `<li>` grid items. The `li`
   stretches to the row height; the anchor did not, so a row of section cards
   had ragged bottoms and the "12 ANSWERS" labels sat at three different
   heights. One line each, and the row reads as a row. */
.ans-cats > li,
.ans-grid > li{ display:grid; }

/* ---------- source links ---------- */

/* Same 24px tap-target argument as the breadcrumb: 12.5px text in a 19px line
   box, in a list where the links sit directly above one another. */
.pf-panel .ans-sources a:not(.pf-btn){
  /* 5px, not 4: measured, 4px produced a 23px hit box and the WCAG 2.5.8 floor
     is 24. One pixel of padding is the difference between passing and nearly. */
  padding:5px 2px;
  margin:-5px -2px;
  text-underline-offset:3px;
}

@media (max-width:640px){
  .ans-table{ font-size:13px; }
  .ans-table th,.ans-table td{ padding:8px 10px; }
}