/* ==========================================================================
   notes-year.css — /notes/year-sample/
   ==========================================================================
   Layers on notes-picker.css (chips, search, tour, replay) and
   notes-university.css (stepper). Reuse is deliberate: picker → university →
   year are consecutive steps in one journey and must not look like three
   different products.
   ========================================================================== */

.page-year {
  --pk-line: rgb(255 255 255 / .1);
  --pk-card: rgb(255 255 255 / .04);
  --pk-pane: rgb(18 18 22 / .96);
  --pk-veil: rgb(6 6 8 / .74);
}
.theme-light .page-year {
  --pk-line: rgb(15 18 26 / .13);
  --pk-card: rgb(15 18 26 / .03);
  --pk-pane: rgb(255 255 255 / .97);
  --pk-veil: rgb(20 22 30 / .55);
}
.page-year .section, .yrHero, .uniStep { position: relative; z-index: 1; }
.page-year .yrSection { padding-block: clamp(var(--s-10), 6vw, var(--s-16)); }
.page-year .yrSection + .yrSection:not(.section--alt) { border-top: 1px solid var(--pk-line); }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.yrHero { padding-block: clamp(var(--s-9), 5vw, var(--s-14)) clamp(var(--s-6), 3vw, var(--s-9)); }
.yrHero__in {
  display: grid; gap: clamp(var(--s-6), 4vw, var(--s-10));
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
@media (max-width: 52rem) { .yrHero__in { grid-template-columns: 1fr; } }
.yrHero__h1 {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.3rem); line-height: 1.05; letter-spacing: -.03em;
}
/* The year number as a large ghosted glyph — gives the page an identity that
   differs per year without needing per-year artwork. */
.yrHero__yn {
  font-family: var(--font-display); font-size: 1.5em; line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgb(240 198 74 / .5);
  text-stroke: 2px rgb(240 198 74 / .5);
}
.yrHero__sub { color: var(--text-mid); font-size: var(--fs-lg); max-width: 52ch; }
.yrHero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.pkChip--warn { border-color: rgb(255 181 69 / .4); color: rgb(255 200 130); }

/* ── PROGRESS DIAL ──────────────────────────────────────────────────────── */
.yrDial { position: relative; width: clamp(7rem, 14vw, 9.5rem); }
.yrDial[hidden] { display: none; }
.yrDial svg { width: 100%; display: block; transform: rotate(-90deg); }
.yrDial__bg, .yrDial__fg { fill: none; stroke-width: 7; stroke-linecap: round; }
.yrDial__bg { stroke: rgb(255 255 255 / .1); }
.theme-light .yrDial__bg { stroke: rgb(15 18 26 / .1); }
.yrDial__fg {
  stroke: var(--y-yellow);
  stroke-dasharray: 326.7;                       /* 2πr, r = 52 */
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .7s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 8px rgb(240 198 74 / .5));
}
.yrDial__read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.yrDial__read strong {
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1;
  color: var(--text-hi); font-variant-numeric: tabular-nums;
}
.yrDial__read span {
  font-family: var(--font-mono); font-size: .56rem; color: var(--text-lo);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

/* ── SHELF TILES ────────────────────────────────────────────────────────── */
.yrShelves {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  perspective: 1200px;
}
.yrShelf {
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: var(--s-5); border-radius: var(--radius-lg); cursor: pointer;
  border: 1px solid var(--pk-line);
  background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015) 62%), var(--surface-1);
  color: var(--text-mid); font: inherit;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s, background .3s;
}
.theme-light .yrShelf { background: linear-gradient(160deg, #fff, #f7f7f9 62%); }
.yrShelf:hover { border-color: rgb(240 198 74 / .45); box-shadow: 0 18px 44px -20px rgb(0 0 0 / .75); }
.yrShelf.is-on {
  border-color: rgb(240 198 74 / .7);
  background: linear-gradient(160deg, rgb(240 198 74 / .16), rgb(240 198 74 / .04) 62%), var(--surface-1);
}
.yrShelf b { color: var(--text-hi); font-size: var(--fs-base); }
.yrShelf i { font-style: normal; font-size: .66rem; color: var(--text-lo); }
.yrShelf__ic {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  margin-bottom: var(--s-2);
  border: 1px solid rgb(240 198 74 / .3);
  background: radial-gradient(circle at 32% 28%, rgb(240 198 74 / .22), transparent 62%), var(--pk-card);
}
.yrShelf__ic::after {
  content: ''; width: 1rem; height: 1rem; background: var(--y-yellow);
  mask-repeat: no-repeat; mask-size: contain; mask-position: center;
}
.yrShelf__ic--all::after   { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.yrShelf__ic--book::after  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-7a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H20z'/%3E%3C/svg%3E"); }
.yrShelf__ic--paper::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.yrShelf__ic--pen::after   { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.yrShelf__ic--flask::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 2v7L4 19a2 2 0 0 0 1.7 3h12.6A2 2 0 0 0 20 19L15 9V2M8 2h8M7.5 14h9'/%3E%3C/svg%3E"); }

/* ── TOOLS ──────────────────────────────────────────────────────────────── */
.yrTools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.yrTools .pkSearch { flex: 1; min-width: min(100%, 17rem); max-width: 30rem; }
.yrSort select {
  padding: .62rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pk-line); background: var(--pk-card);
  color: var(--text-mid); font: inherit; font-size: var(--fs-sm);
}

/* ── SUBJECT CARDS ──────────────────────────────────────────────────────── */
.yrGrid {
  display: grid; gap: clamp(var(--s-3), 1.6vw, var(--s-4));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  perspective: 1200px;
  margin-top: var(--s-6);
}
.yrCard {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line);
  background: linear-gradient(165deg, rgb(255 255 255 / .05), rgb(255 255 255 / .012) 62%), var(--surface-1);
  overflow: hidden;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s, opacity .3s;
  animation: pkRise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.theme-light .yrCard { background: linear-gradient(165deg, #fff, #f8f8fa 62%); }
.yrCard[hidden] { display: none; }
.yrCard:hover { border-color: rgb(240 198 74 / .45); box-shadow: 0 0 0 1px rgb(240 198 74 / .25), 0 20px 48px -20px rgb(0 0 0 / .75); }
.yrCard:focus-within { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
.yrCard.is-empty { opacity: .55; }
.yrCard.is-empty:hover { opacity: 1; }
/* Tracked subjects get a permanent marker so they read as "mine" at a glance. */
.yrCard.is-tracked { border-color: rgb(120 220 160 / .45); }
.yrCard.is-tracked::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgb(120 220 160);
}
.yrCard__hit { position: absolute; inset: 0; z-index: 2; }
.yrCard__sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .09), transparent 62%);
  transition: opacity .3s;
}
.yrCard:hover .yrCard__sheen { opacity: 1; }

/* Above the stretched link, or it would navigate instead of toggling. */
.yrCard__track {
  position: absolute; right: .55rem; top: .55rem; z-index: 4;
  width: 1.65rem; height: 1.65rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--pk-line); background: var(--pk-card);
  display: grid; place-items: center; padding: 0;
  transition: border-color .25s, background .25s, transform .2s;
}
.yrCard__track span {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: transparent; border: 1px solid var(--text-lo);
  transition: background .2s, border-color .2s;
}
.yrCard__track:hover { transform: scale(1.12); border-color: rgb(120 220 160 / .6); }
.yrCard__track[aria-pressed="true"] { border-color: rgb(120 220 160 / .7); background: rgb(120 220 160 / .16); }
.yrCard__track[aria-pressed="true"] span { background: rgb(120 220 160); border-color: rgb(120 220 160); }

.yrCard__top { display: flex; align-items: center; gap: var(--s-2); padding-right: 2rem; }
.yrCard__n {
  font-size: .62rem; color: var(--y-yellow);
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid rgb(240 198 74 / .3);
}
.yrCard__n b { font-variant-numeric: tabular-nums; }
.yrCard__n--none { color: var(--text-lo); border-color: var(--pk-line); }
.yrCard__t {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--text-hi);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yrCard__bar { display: block; height: 3px; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.yrCard__bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--y-yellow), rgb(255 226 140)); }
.yrCard__kinds { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.yrCard__kinds li { font-size: .58rem; padding: .12rem .42rem; border-radius: 5px; border: 1px solid var(--pk-line); color: var(--text-lo); }
.yrCard__kinds b { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.yrCard__kinds .is-pyq { border-color: rgb(255 146 69 / .35); color: rgb(255 186 130); }
.yrCard__kinds .is-lab { border-color: rgb(120 200 255 / .3); color: rgb(150 210 255); }
.yrCard__go { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-mid); }
.yrCard:hover .yrCard__go { color: var(--y-yellow); }

/* ── OTHER YEARS ────────────────────────────────────────────────────────── */
.yrYears { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.yrYear {
  display: grid; gap: 2px; padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line); background: var(--pk-card);
  color: inherit; text-decoration: none;
  transition: transform .25s, border-color .25s, box-shadow .3s;
}
.yrYear:hover { transform: translateY(-3px); border-color: rgb(240 198 74 / .5); box-shadow: 0 16px 40px -18px rgb(0 0 0 / .7); }
.yrYear.is-on { border-color: rgb(240 198 74 / .65); background: rgb(240 198 74 / .08); }
.yrYear b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--y-yellow); }
.yrYear span { color: var(--text-hi); font-size: var(--fs-sm); }
.yrYear i { font-style: normal; font-size: .64rem; color: var(--text-lo); }
.yrYear--all b { font-size: 1.3rem; }

/* ── MY SUBJECTS RAIL ───────────────────────────────────────────────────── */
.yrRail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  border-top: 1px solid rgb(120 220 160 / .35);
  background: var(--pk-pane); backdrop-filter: blur(14px);
  animation: yrRailIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes yrRailIn { from { transform: translateY(100%); } }
.yrRail[hidden] { display: none; }
.yrRail__in {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: var(--container, 76rem); margin-inline: auto;
  padding: var(--s-3) var(--s-5);
}
.yrRail__k { flex: none; font-size: var(--fs-sm); color: var(--text-mid); white-space: nowrap; }
.yrRail__k b { color: rgb(150 235 190); font-variant-numeric: tabular-nums; }
.yrRail__chips { flex: 1; min-width: 0; display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 2px; }
.yrRail__chips a {
  flex: none; padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid rgb(120 220 160 / .35); background: rgb(120 220 160 / .1);
  color: rgb(170 240 205); font-size: var(--fs-xs); text-decoration: none; white-space: nowrap;
}
.yrRail__chips a:hover { background: rgb(120 220 160 / .2); }
.yrRail__clear { flex: none; border: 0; background: none; color: var(--text-lo); font-size: var(--fs-sm); cursor: pointer; }
.yrRail__clear:hover { color: var(--text-hi); }
/* The replay button must clear the rail. */
.page-year .pkReplay { bottom: 4.6rem; }

@media (max-width: 40rem) {
  .yrHero__yn { font-size: 1.2em; }
  .yrRail__in { padding: var(--s-2) var(--s-4); }
  .yrRail__k { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yrCard, .yrShelf, .yrYear, .yrRail { animation: none; transition: none; }
  .yrDial__fg { transition: none; }
}
/* "2" + "nd Year" as one unit — see notes/year.php. */
.yrHero__yr { display: inline-flex; align-items: baseline; }
.yrHero__yr .yrHero__yn { margin-right: .02em; }