/* ==========================================================================
   notes-picker.css — /notes/ and /notes/picker-sample/.
   ==========================================================================
   Everything is prefixed `pk` or scoped under .page-picker, so nothing here
   can reach the live /notes/ picker.

   NO overflow clip on the body — see the note in notes-study.css. It clips
   fixed-position descendants, and the tour spotlight is fixed.
   ========================================================================== */

.page-picker {
  --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-picker {
  --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-picker .section, .pkHero { position: relative; z-index: 1; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.pkHero { padding-block: clamp(var(--s-10), 6vw, var(--s-16)) clamp(var(--s-6), 3vw, var(--s-10)); }
.pkHero__h1 {
  font-size: clamp(2.3rem, 1.2rem + 4.8vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.035em; margin: var(--s-3) 0 var(--s-4);
}
/* Word-level reveal; wrappers injected by JS so the server ships plain text. */
.pkHero__h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pkHero__h1 .w > i {
  display: inline-block; font-style: inherit; transform: translateY(105%);
  animation: pkUp .85s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--wi, 0) * 60ms);
}
@keyframes pkUp { to { transform: translateY(0); } }
.pkHero__sub { color: var(--text-mid); font-size: var(--fs-lg); max-width: 52ch; }
.pkHero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-6); }
.pkChip {
  display: inline-flex; align-items: center; gap: .4ch;
  padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid var(--pk-line); background: var(--pk-card);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.pkChip strong { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.pkChip--free { border-color: rgb(120 220 160 / .35); color: rgb(150 235 190); }

/* ── SEARCH ─────────────────────────────────────────────────────────────── */
.pkSearch {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 34rem; padding: var(--s-3) var(--s-4);
  border-radius: 999px; border: 1px solid var(--pk-line);
  background: var(--pk-card); color: var(--text-lo);
  transition: border-color .25s, box-shadow .3s;
}
.pkSearch:focus-within {
  border-color: rgb(240 198 74 / .55);
  box-shadow: 0 0 0 4px rgb(240 198 74 / .1);
}
.pkSearch input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text-hi);
  font: inherit; font-size: var(--fs-base); outline: none;
}
.pkSearch input::-webkit-search-cancel-button { display: none; }
.pkSearch__clear {
  border: 0; background: rgb(255 255 255 / .1); color: var(--text-mid);
  width: 1.5rem; height: 1.5rem; border-radius: 50%; cursor: pointer; line-height: 1;
}
.pkSearch__hint { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-lo); min-height: 1.2em; }

/* ── HEADINGS ───────────────────────────────────────────────────────────── */
/* Scoped under .page-picker so it beats the shared `.section` rule in
   site.css, which sets --section-y on both sides and was winning on source
   order — the sections were butting straight into each other with ~45px
   between a card grid and the next heading. */
.page-picker .pkSection { padding-block: clamp(var(--s-12), 7vw, var(--s-20)); }
/* A hairline where two same-coloured sections meet, so the boundary reads
   even mid-scroll. Not between a section and an --alt one: the background
   change already does that job and a line on top of it looks like a seam. */
.page-picker .pkSection + .pkSection:not(.section--alt) { border-top: 1px solid var(--pk-line); }
.page-picker .pkHead { margin-bottom: clamp(var(--s-7), 3.5vw, var(--s-10)); }
.pkHead { margin-bottom: clamp(var(--s-6), 3vw, var(--s-9)); }
.pkHead h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem); letter-spacing: -.03em; margin: 0 0 var(--s-2); }
.pkHead p { margin: 0; color: var(--text-mid); }

/* ── UNIVERSITY CARDS ───────────────────────────────────────────────────── */
.pkGrid {
  display: grid; gap: clamp(var(--s-4), 2vw, var(--s-6));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  perspective: 1600px;
}
.pkCard {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); border: 1px solid var(--pk-line);
  background: linear-gradient(165deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015) 62%), var(--surface-1);
  overflow: hidden;
  /* --tx/--ty come from the tilt script; --i staggers the entrance. */
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s;
  animation: pkRise .6s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pkRise { from { opacity: 0; transform: translateY(18px) rotateX(8deg); } }
.theme-light .pkCard { background: linear-gradient(165deg, #fff, #f7f7f9 62%); }
.pkCard:hover {
  border-color: rgb(240 198 74 / .5);
  box-shadow: 0 0 0 1px rgb(240 198 74 / .3), 0 30px 70px -26px rgb(0 0 0 / .85);
}
.pkCard[hidden] { display: none; }
.pkCard__hit { position: absolute; inset: 0; z-index: 3; }
.pkCard:focus-within { outline: 2px solid var(--y-yellow); outline-offset: 3px; }

.pkCard__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pkCard__photo { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pkCard:hover .pkCard__photo { transform: scale(1.07); }
/* RTU has no photograph — a generated plate rather than a borrowed building. */
.pkCard__plate {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 20% 15%, rgb(240 198 74 / .3), transparent 60%),
    radial-gradient(100% 90% at 85% 80%, rgb(120 140 255 / .25), transparent 62%),
    linear-gradient(150deg, #14141a, #1d1d26);
}
.pkCard__plate::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 50%, black, transparent);
}
.pkCard__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(8 8 10 / .85), rgb(8 8 10 / .1) 60%);
}
.pkCard__logo {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2;
  width: 3rem; height: 3rem; border-radius: 12px;
  display: grid; place-items: center; padding: .35rem;
  background: rgb(255 255 255 / .96);
  box-shadow: 0 10px 26px -10px rgb(0 0 0 / .8);
  transform: translateZ(30px);
}
.pkCard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pkCard__most {
  position: absolute; right: var(--s-3); top: var(--s-3); z-index: 2;
  padding: .18rem .55rem; border-radius: 999px;
  background: var(--y-yellow); color: #0d0d0f;
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

.pkCard__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.pkCard__short {
  margin: 0; font-family: var(--font-mono); font-size: .62rem; color: var(--y-yellow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.pkCard__name { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-hi); }
/* The bar is the point of the numbers: 265 files vs 23 should be legible
   without reading either figure. */
.pkCard__bar { display: block; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.pkCard__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--y-yellow), rgb(255 226 140));
  animation: pkFill 1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + .3s);
}
@keyframes pkFill { to { width: var(--w, 0%); } }
.pkCard__facts { list-style: none; padding: 0; margin: var(--s-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pkCard__facts li { font-size: var(--fs-xs); color: var(--text-lo); }
.pkCard__facts b { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.pkCard__go { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-mid); }
.pkCard:hover .pkCard__go { color: var(--y-yellow); }

.pkEmpty { margin-top: var(--s-6); color: var(--text-mid); }
.pkEmpty[hidden] { display: none; }
.pkEmpty button { border: 0; background: none; color: var(--y-yellow); cursor: pointer; font: inherit; text-decoration: underline; }

/* ── AFFILIATED COLLEGES ────────────────────────────────────────────────── */
.pkColleges {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.pkCollege {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--pk-line); background: var(--pk-card);
  color: inherit; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
  animation: pkRise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.pkCollege:hover {
  transform: translateY(-3px);
  border-color: rgb(240 198 74 / .45);
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / .7);
}
.pkCollege[hidden] { display: none; }
.pkCollege img { width: 2.4rem; height: 2.4rem; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; flex: none; }
.pkCollege__ini {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 8px;
  display: grid; place-items: center; background: rgb(240 198 74 / .14);
  color: var(--y-yellow); font-family: var(--font-display);
}
.pkCollege__t { flex: 1; min-width: 0; display: grid; }
.pkCollege__t b { color: var(--text-hi); font-size: var(--fs-sm); }
.pkCollege__t i { font-style: normal; font-size: .66rem; color: var(--text-lo); }
.pkCollege__via {
  flex: none; font-family: var(--font-mono); font-size: .56rem; color: var(--y-yellow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

/* ── WHAT YOU GET ───────────────────────────────────────────────────────── */
.pkKinds {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  perspective: 1200px;
}
.pkKind {
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line); background: var(--pk-card);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.pkKind:hover { border-color: rgb(240 198 74 / .4); }
.pkKind h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-base); }
.pkKind p { margin: 0; color: var(--text-lo); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pkKind__ic {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  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);
  box-shadow: 0 0 0 4px rgb(240 198 74 / .06);
}
.pkKind__ic::after {
  content: ''; width: 1.05rem; height: 1.05rem; background: var(--y-yellow);
  mask-repeat: no-repeat; mask-size: contain; mask-position: center;
}
.pkKind__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"); }
.pkKind__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"); }
.pkKind__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"); }
.pkKind__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"); }

/* ── GUIDED TOUR ────────────────────────────────────────────────────────── */
.pkTour { position: fixed; inset: 0; z-index: 900; }
.pkTour[hidden] { display: none; }
/* Transparent by design — the spotlight's box-shadow does the darkening. A
   background here would fill the hole and the spotlight would never appear. */
.pkTour__veil { position: absolute; inset: 0; background: transparent; }
.pkTour__spot {
  position: absolute; border-radius: var(--radius-lg); pointer-events: none;
  box-shadow: 0 0 0 9999px var(--pk-veil), 0 0 0 2px rgb(240 198 74 / .9), 0 0 44px rgb(240 198 74 / .4);
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.pkTour__pop {
  position: absolute; width: min(21rem, calc(100vw - 1.5rem));
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid rgb(240 198 74 / .35);
  background: var(--pk-pane); backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -22px rgb(0 0 0 / .9);
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.pkTour__step { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-lo); }
.pkTour__step b { color: var(--y-yellow); }
.pkTour__pop h4 { margin: var(--s-2) 0; font-size: var(--fs-lg); }
.pkTour__pop p { margin: 0 0 var(--s-4); color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pkTour__acts { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pkTour__nav { display: flex; align-items: center; gap: var(--s-2); }
.pkTour__skip, .pkTour__back {
  border: 0; background: none; color: var(--text-lo); font-size: var(--fs-sm); cursor: pointer;
}
.pkTour__skip:hover, .pkTour__back:hover { color: var(--text-mid); }
.pkTour__arrow {
  position: absolute; width: .85rem; height: .85rem;
  background: var(--pk-pane);
  border-left: 1px solid rgb(240 198 74 / .35); border-top: 1px solid rgb(240 198 74 / .35);
  left: var(--ax, 50%); top: -.45rem; transform: translateX(-50%) rotate(45deg);
}
.pkTour__pop[data-side="above"] .pkTour__arrow { top: auto; bottom: -.45rem; transform: translateX(-50%) rotate(225deg); }

/* ── REPLAY BUTTON ──────────────────────────────────────────────────────── */
.pkReplay {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 60;
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pk-line); background: var(--pk-pane);
  color: var(--text-mid); font-size: var(--fs-sm);
  box-shadow: 0 14px 36px -14px rgb(0 0 0 / .8);
  transition: border-color .25s, transform .25s, color .25s;
}
.pkReplay:hover { border-color: rgb(240 198 74 / .5); color: var(--text-hi); transform: translateY(-2px); }
.pkReplay span {
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: rgb(240 198 74 / .16); color: var(--y-yellow); font-size: .7rem;
}

@media (max-width: 40rem) {
  .pkHero__h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .pkCard__logo { width: 2.5rem; height: 2.5rem; }
  .pkTour__pop { width: calc(100vw - 1.5rem); padding: var(--s-4); }
  .pkReplay { right: var(--s-3); bottom: var(--s-3); font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .pkHero__h1 .w > i, .pkCard, .pkCollege, .pkCard__bar i { animation: none; transform: none; }
  .pkCard__bar i { width: var(--w, 0%); }
  .pkCard, .pkKind, .pkTour__spot, .pkTour__pop, .pkCard__photo { transition: none; }
}

/* ── HERO LAYOUT + 3D PATH ──────────────────────────────────────────────────
   The hero was one column with the right half of a laptop screen empty. It is
   now two, with the four-level route as a 3D stack — university, year,
   subject, files — built from a real path in the database. */
.pkHero__in {
  display: grid; gap: clamp(var(--s-8), 5vw, var(--s-14));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 64rem) { .pkHero__in { grid-template-columns: 1fr; } }

.pkPath { position: relative; perspective: 1500px; display: grid; place-items: center; }
.pkPath__stage {
  position: relative; width: 100%;
  min-height: clamp(20rem, 32vw, 26rem);
  display: grid; place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--ax, 0deg)) rotateY(var(--ay, 0deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.pkPath__glow {
  position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(240 198 74 / .18), transparent 62%);
  filter: blur(30px);
}
/* A descending staircase: each step sits lower, further right and further
   back, so the sequence reads as depth rather than as a list. */
.pkPath__card {
  position: absolute; display: grid; gap: 2px;
  width: min(16rem, 74%); padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg); border: 1px solid var(--pk-line);
  background: linear-gradient(150deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 60%), var(--surface-1);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 56px -22px rgb(0 0 0 / .9);
  transform:
    translate3d(calc(var(--i) * 2.1rem - 3.2rem), calc(var(--i) * 4.4rem - 6.6rem), calc(var(--i) * 26px))
    rotateX(4deg) rotateY(-7deg);
  transition: transform .6s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
  z-index: calc(var(--i) + 1);
  animation: pkStep .6s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * 130ms + .3s);
}
@keyframes pkStep { from { opacity: 0; } }
.theme-light .pkPath__card { background: linear-gradient(150deg, #fff, #f7f7f9 60%); }
.pkPath__stage:hover .pkPath__card {
  transform:
    translate3d(calc(var(--i) * 2.6rem - 3.9rem), calc(var(--i) * 4.7rem - 7rem), calc(var(--i) * 40px))
    rotateX(2deg) rotateY(-9deg);
  border-color: rgb(240 198 74 / .35);
}
.pkPath__n {
  position: absolute; left: -.7rem; top: -.7rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--y-yellow); color: #0d0d0f;
  font-family: var(--font-display); font-size: .78rem;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .7);
}
.pkPath__l {
  font-family: var(--font-mono); font-size: .56rem; color: var(--text-lo);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.pkPath__v { color: var(--text-hi); font-size: var(--fs-base); line-height: var(--lh-snug); }
/* A thread running behind the stack, so the four cards read as one route. */
.pkPath__line {
  position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px;
  translate: -3.4rem 0;
  background: linear-gradient(to bottom, transparent, rgb(240 198 74 / .5), transparent);
  transform: translateZ(-40px) rotate(6deg);
}
.pkPath__cap {
  margin: var(--s-4) 0 0; text-align: center;
  font-size: var(--fs-xs); color: var(--text-lo);
}

@media (prefers-reduced-motion: reduce) {
  .pkPath__card { animation: none; transition: none; }
  .pkPath__stage { transition: none; }
  .pkPath__stage:hover .pkPath__card {
    transform: translate3d(calc(var(--i) * 2.1rem - 3.2rem), calc(var(--i) * 4.4rem - 6.6rem), calc(var(--i) * 26px)) rotateX(4deg) rotateY(-7deg);
  }
}


/* ── HIDE THE PATH BELOW DESKTOP ────────────────────────────────────────────
   MUST come after `.pkPath { display: grid }` above.
   This rule originally sat in the 64rem media query further up the file, but
   the base .pkPath rule was appended AFTER it — same specificity, later in the
   cascade — so `display: grid` won at every width and the staircase kept
   showing on phones. Source order is the whole fix; nothing else changed.

   Hidden rather than reflowed: four stacked cards on a phone is a screenful of
   decoration sitting between the headline and the search box, which is the one
   control a student on a small screen actually needs. */
@media (max-width: 64rem) {
  .pkPath { display: none !important; }
}