/* Notes, subjects and search. Tokens only. */

/* --- Search ------------------------------------------------------------ */
.nsearch { display: flex; gap: var(--s-2); max-width: 40rem; margin-top: var(--s-8); }
.nsearch__input { flex: 1; font-size: var(--fs-body-lg); padding: var(--s-4) var(--s-5); }
.nsearch__results {
  max-width: 40rem; margin-top: var(--s-2);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden; box-shadow: var(--shadow-card);
}
.nsearch__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-5); text-decoration: none;
  border-bottom: 1px solid var(--surface-line);
}
.nsearch__row:last-child { border-bottom: 0; }
.nsearch__row:hover, .nsearch__row:focus { background: var(--surface-2); }
.nsearch__label { color: var(--text-hi); font-weight: 600; font-size: var(--fs-sm); }
.nsearch__meta  { color: var(--text-lo); font-size: var(--fs-xs); white-space: nowrap; }
.nsearch__none  { padding: var(--s-4) var(--s-5); color: var(--text-lo); font-size: var(--fs-sm); margin: 0; }

/* --- The download block. Deliberately the loudest thing on the page: it is
       what the student came for, so it does not hide under the prose. ----- */
.dl {
  display: grid; gap: var(--s-6); align-items: center;
  grid-template-columns: 1fr;
  padding: var(--s-8);
  border: 1px solid color-mix(in srgb, var(--y-yellow) 40%, var(--surface-line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--y-yellow) 6%, var(--surface-1));
}
@media (min-width: 48rem) { .dl { grid-template-columns: 1fr auto; } }
.dl__title { font-size: var(--fs-h3); margin: 0 0 var(--s-2); }
.dl__desc  { color: var(--text-mid); margin: 0 0 var(--s-3); }
.dl__facts { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.dl__facts li { font-size: var(--fs-sm); color: var(--text-lo); }
.dl__credit { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--text-lo); }
.dl__credit a { color: var(--accent-ink); }

/* --- Units ------------------------------------------------------------- */
.units { display: grid; gap: var(--s-3); counter-reset: unit; }
.unitrow {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1);
}
.unitrow__n {
  font-family: var(--font-mono); font-size: var(--fs-h3);
  color: var(--y-yellow); line-height: 1;
}
.unitrow__t { font-size: var(--fs-body-lg); margin: 0 0 var(--s-1); }
.unitrow__topics { color: var(--text-mid); font-size: var(--fs-sm); margin: 0; }
.notes__src { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-lo); }
.notes__src a { color: var(--accent-ink); }

/* --- Questions --------------------------------------------------------- */
.qlist { display: grid; gap: var(--s-2); counter-reset: q; max-width: 68ch; }
.qrow {
  counter-increment: q;
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--surface-line);
}
.qrow__q { margin: 0; color: var(--text-hi); }
.qrow__q::before {
  content: "Q" counter(q) ". ";
  font-family: var(--font-mono); color: var(--accent-ink); font-size: var(--fs-sm);
}
.qrow__marks { font-size: var(--fs-xs); color: var(--text-lo); white-space: nowrap; }

/* --- Cross-links ------------------------------------------------------- */
.varlist { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.varlist--wide { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.varlist a {
  display: block; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); text-decoration: none;
  font-size: var(--fs-sm); color: var(--text-hi);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.varlist a:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--y-yellow) 45%, var(--surface-line));
}
.relbox {
  padding: var(--s-6); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); background: var(--surface-1);
}
.relbox h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }

.subj-card__code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-lo); margin: 0 0 var(--s-3); }
.notes__empty { color: var(--text-mid); }
.notes__empty a { color: var(--accent-ink); }

/* Blog empty state — deliberately roomy. A cramped "no posts" reads like a bug;
   a composed one reads like a decision. */
.blog-empty { max-width: 60ch; }
.blog-empty p { color: var(--text-mid); }

/* --- In-page PDF viewer ------------------------------------------------- */
.dl__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.dl__dl { white-space: nowrap; }

.pdfview {
  margin-top: var(--s-6);
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  background: var(--surface-1); overflow: hidden;
}
.pdfview[hidden] { display: none; }
.pdfview__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--surface-line);
  background: var(--surface-2);
}
.pdfview__name { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-hi); }
.pdfview__acts { display: flex; gap: var(--s-2); }
.pdfview__frame { line-height: 0; background: var(--surface-2); }
.pdfview__frame iframe {
  width: 100%; height: min(80vh, 900px); border: 0; display: block;
}
/* On a phone a tall viewer plus browser chrome leaves nothing to scroll with,
   so it gets shorter and the download link matters more. */
@media (max-width: 40rem) { .pdfview__frame iframe { height: 65vh; } }
.pdfview__fallback {
  margin: 0; padding: var(--s-3) var(--s-5);
  font-size: var(--fs-xs); color: var(--text-lo);
  border-top: 1px solid var(--surface-line);
}
.pdfview__fallback a { color: var(--accent-ink); }

/* --- Year / branch filter bar ------------------------------------------- */
.yearbar {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.yearbar--sub { margin-bottom: var(--s-6); }
.yearbar__btn {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--surface-line); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--text-mid);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.yearbar__btn:hover { border-color: var(--y-yellow); color: var(--text-hi); }
.yearbar__btn.is-on {
  background: var(--y-yellow); border-color: var(--y-yellow); color: var(--y-black);
}
.yearbar__btn.is-on:hover { color: var(--y-black); }
.yearbar--sub .yearbar__btn { font-weight: 500; font-size: var(--fs-xs); }
.yearbar__state {
  font-size: var(--fs-sm); color: var(--text-lo); margin-bottom: var(--s-6);
}
.yearbar__state a { color: var(--accent-ink); }

/* --- PDF modal ---------------------------------------------------------- */
.pdfmodal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; }
.pdfmodal[hidden] { display: none; }
.pdfmodal__backdrop {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / 0.72); backdrop-filter: blur(3px);
}
.pdfmodal__panel {
  position: relative;
  width: min(1100px, 94vw); height: min(92vh, 1000px);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--surface-line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px -20px rgb(0 0 0 / 0.8);
  overflow: hidden;
}
.pdfmodal__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--surface-line); background: var(--surface-2);
}
.pdfmodal__name { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfmodal__acts { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.pdfmodal__x {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-mid);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pdfmodal__x:hover { background: var(--surface-0); color: var(--y-yellow); }
.pdfmodal__frame { flex: 1; min-height: 0; background: var(--surface-2); position: relative; }

/* Branded cover for Drive's pop-out control. Sized generously so it still
   covers the button if Drive shifts it, and it eats clicks so that corner does
   nothing rather than launching Drive. The PDF page behind it is white, so the
   badge is white too and reads as a watermark rather than a patch. */
.pdfmodal__brand {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 64px; height: 56px;
  display: grid; place-items: center;
  background: #fff;                 /* matches the rendered PDF page, not the theme */
  pointer-events: auto;
}
.pdfmodal__brand img {
  width: 28px; height: 28px; border-radius: 6px;
  opacity: 0.9;
}
.pdfmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Full-bleed on a phone: a centred dialog with margins wastes the only screen
   space a scanned page actually needs. */
@media (max-width: 40rem) {
  .pdfmodal__panel { width: 100vw; height: 100vh; border-radius: 0; border: 0; }
}
body.pdf-open { overflow: hidden; }

/* A card link that is a button must not look like one. */
.card__linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: left;
}

/* --- All parts of a subject ---------------------------------------------- */
.parts { margin-top: var(--s-6); }
.parts__h { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.parts__list { display: grid; gap: var(--s-2); counter-reset: part; }
.part {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s-4);
  align-items: center; padding: var(--s-3) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1);
}
.part.is-current { border-color: color-mix(in srgb, var(--y-yellow) 50%, transparent); }
.part__n {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.part__t { color: var(--text-hi); font-size: var(--fs-sm); font-weight: 600; }
.part__now { font-size: var(--fs-xs); color: var(--text-lo); }

/* --------------------------------------------------------------------------
   University mark on the picker card.

   Sits on a light plate because almost every institutional logo is drawn for
   white paper — dropped straight onto the dark canvas, half of them become an
   illegible smudge. The plate is the honest fix; recolouring somebody's crest
   to suit our palette is not ours to do.
   -------------------------------------------------------------------------- */
.univ-card__mark {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--surface-line);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out);
}
.univ-card__mark img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block;
}
/* Fallback for any university we have no mark for. */
.univ-card__mark--text {
  background: var(--surface-2);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
}
.univ-card:hover .univ-card__mark { transform: translateY(-2px) scale(1.04); }

@media (prefers-reduced-motion: reduce) { .univ-card__mark { transition: none; } }

/* Resource groups on a subject page — "Best Notes", "Assignments",
   "PYQ Papers", "Lab Record & Experiments". Named to match the live site so a
   returning student recognises the shelves. An empty group never renders. */
.rgroup + .rgroup { margin-top: clamp(var(--s-8), 4vw, var(--s-12)); }
.rgroup__head { margin-bottom: var(--s-4); }
.rgroup__h {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-body-lg); color: var(--text-hi); margin: 0 0 var(--s-1);
}
.rgroup__n {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 2px var(--s-2); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--accent-ink);
}
.rgroup__blurb { color: var(--text-lo); font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   FIRST-VISIT COACHMARK

   Was a mascot with a speech bubble. The character competed with the thing it
   was pointing at and, worse, it showed on every visit — an instruction you
   have already followed is not help, it is clutter. Now: a compact card, a
   drawn arrow, and a Got it that never shows it again.
   ========================================================================== */
.guide {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  width: max-content; max-width: min(100%, 30rem);
  margin: var(--s-5) 0 calc(-1 * var(--s-2));
  position: relative;
}
.guide[hidden] { display: none; }

.guide__bubble {
  position: relative;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid rgb(240 198 74 / 0.42);
  box-shadow: var(--shadow-card);
  animation: guide-pop 0.5s var(--ease-spring) both;
}
@keyframes guide-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.theme-light .guide__bubble {
  box-shadow: 0 1px 2px rgb(28 28 28 / 0.06), 0 14px 30px -10px rgb(28 28 28 / 0.18);
}

.guide__kicker {
  margin: 0 0 var(--s-1);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-ink);
}
.guide__say {
  margin: 0; max-width: 46ch;
  color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.guide__got {
  margin-top: var(--s-3);
  padding: var(--s-1) var(--s-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-line);
  background: none; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); color: var(--text-hi);
}
.guide__got:hover { border-color: var(--y-yellow); }

/* The arrow draws itself, then the dashes keep travelling toward the target —
   a static arrow reads as an icon, a moving one reads as a direction. */
.guide__arrow { color: var(--y-yellow); margin-left: var(--s-6); }
.guide__arrowline {
  stroke-dashoffset: 60;
  animation: guide-draw 0.9s var(--ease-out) 0.3s both,
             guide-flow 1.4s linear 1.2s infinite;
}
.guide__arrowhead { opacity: 0; animation: guide-head 0.3s var(--ease-out) 1.1s both; }
@keyframes guide-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes guide-flow { to { stroke-dashoffset: -30; } }
@keyframes guide-head { to { opacity: 1; } }

.guide--right .guide__arrow { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .guide__bubble, .guide__arrowline, .guide__arrowhead { animation: none; }

  .guide__arrowline { stroke-dashoffset: 0; }
  .guide__arrowhead { opacity: 1; }
}