/* ══════════════════════════════════════════════════════════════════════════
   EDULIBRARY — the chrome for the college record.

   Owner instruction 2026-09-03: the college pages get a header and footer of
   their own, because the record covers 53 institutions and ICE is one row in
   it rather than its host. Branded EduLibrary.

   Shape and measurements from the owner's reference,
   `Documents/Edusanjal Profile Redesign/NCE Profile v2.dc.html`:

     shell            left rail 248px · feed · right rail 320px
     rail item        min-height 48px, radius 16px, 14px gap to a 24px icon
     brand mark       36px, radius 13px, navy gradient, terracotta letter
     top bar          sticky, radius 20px, rgba(255,255,255,.6),
                      backdrop-filter blur(26px) saturate(1.6),
                      1px rgba(255,255,255,.75), shadow 0 12px 30px rgba(4,9,36,.1)
     search field     min-height 44px, radius 15px, rgba(243,239,233,.82)
     mesh             four blurred radial blobs, 28s/34s/40s/46s offset loops

   ⚠️ Colours resolve through `--ice-*` tokens, not the reference's hard-coded
   hex. The reference is already on ICE's palette but hex breaks graphite dark
   mode, which the Playwright theme audit enforces.
   ══════════════════════════════════════════════════════════════════════════ */

.edu {
  --edu-rail: 248px;
  --edu-aside: 320px;
  --edu-gap: 24px;
  --edu-ease: cubic-bezier(.2, .7, .2, 1);
  --edu-glass: rgb(255 255 255 / 60%);
  --edu-glass-edge: rgb(255 255 255 / 75%);

  margin: 0;
  background: var(--ice-color-bg);
  color: var(--ice-color-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

html[data-theme="dark"] .edu,
.edu[data-theme="dark"] {
  --edu-glass: rgb(30 31 34 / 66%);
  --edu-glass-edge: rgb(255 255 255 / 12%);
}

/* ─────────────────────────────── the mesh ─────────────────────────────── */

.edu-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ice-color-bg);
}

.edu-mesh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
}

.edu-mesh__a {
  width: 52vw; height: 52vw; left: -14vw; top: -16vw;
  background: radial-gradient(circle at 50% 50%, rgb(247 154 170 / 70%), rgb(247 154 170 / 0) 68%);
  animation: eduMeshA 28s ease-in-out infinite;
}

.edu-mesh__b {
  width: 48vw; height: 48vw; right: -12vw; top: -8vw;
  background: radial-gradient(circle at 50% 50%, rgb(240 169 122 / 62%), rgb(240 169 122 / 0) 68%);
  animation: eduMeshB 34s ease-in-out infinite;
}

.edu-mesh__c {
  width: 66vw; height: 66vw; left: 12vw; top: 42vh;
  filter: blur(54px);
  background: radial-gradient(circle at 50% 50%, rgb(232 234 242 / 95%), rgb(232 234 242 / 0) 70%);
  animation: eduMeshC 40s ease-in-out infinite;
}

.edu-mesh__d {
  width: 44vw; height: 44vw; right: -8vw; bottom: -14vw;
  filter: blur(48px);
  background: radial-gradient(circle at 50% 50%, rgb(26 43 82 / 24%), rgb(26 43 82 / 0) 70%);
  animation: eduMeshA 46s ease-in-out infinite;
}

html[data-theme="dark"] .edu-mesh__a { background: radial-gradient(circle at 50% 50%, rgb(120 60 80 / 42%), transparent 68%); }
html[data-theme="dark"] .edu-mesh__b { background: radial-gradient(circle at 50% 50%, rgb(140 90 55 / 38%), transparent 68%); }
html[data-theme="dark"] .edu-mesh__c { background: radial-gradient(circle at 50% 50%, rgb(48 52 66 / 70%), transparent 70%); }
html[data-theme="dark"] .edu-mesh__d { background: radial-gradient(circle at 50% 50%, rgb(30 48 92 / 46%), transparent 70%); }

@keyframes eduMeshA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(5vw, 4vh, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes eduMeshB {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  50%  { transform: translate3d(-6vw, 5vh, 0) scale(1); }
  100% { transform: translate3d(0, 0, 0) scale(1.1); }
}
@keyframes eduMeshC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, -4vh, 0) scale(1.2); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ─────────────────────────────── the shell ────────────────────────────── */

.edu-shell {
  display: grid;
  grid-template-columns: var(--edu-rail) minmax(0, 1fr);
  gap: 0 var(--edu-gap);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 26px);
}

.edu-col { min-width: 0; padding-bottom: 64px; }

.edu-main { min-width: 0; }

.edu-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ice-color-surface);
  font-weight: 650;
}

.edu-skip:focus { left: 16px; top: 16px; }

/* ────────────────────────────── the left rail ─────────────────────────── */

.edu-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 14px 20px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.edu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 18px;
  text-decoration: none;
}

.edu-brand__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(180deg, #1A2B52, #0C1A38);
  box-shadow: 0 10px 18px -8px rgb(12 26 56 / 65%), inset 0 2px 3px rgb(255 255 255 / 25%);
  color: var(--ice-color-terracotta);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.edu-brand__word {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ice-color-text);
}

.edu-nav { display: flex; flex-direction: column; gap: 3px; }

.edu-nav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.4;
  color: var(--ice-color-text-muted);
  text-decoration: none;
  transition: background 160ms var(--edu-ease), color 160ms var(--edu-ease);
}

.edu-nav__item:hover {
  background: var(--edu-glass);
  color: var(--ice-color-text);
  text-decoration: none;
}

.edu-nav__item.is-current {
  font-weight: 600;
  color: var(--ice-color-text);
  background: var(--edu-glass);
  border-color: var(--edu-glass-edge);
  box-shadow: 0 8px 18px -14px rgb(4 9 36 / 50%);
}

.edu-nav__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edu-nav__item.is-current .edu-nav__icon { stroke: var(--ice-color-crimson); }

.edu-nav--sub .edu-nav__item { min-height: 42px; font-size: 15px; }
.edu-nav--sub .edu-nav__icon { width: 16px; height: 16px; }

.edu-rule { margin: 14px 0; height: 1px; background: var(--ice-color-border); }

.edu-rail__label {
  margin: 0 14px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ice-color-text-muted);
}

.edu-rail__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--edu-glass-edge);
  border-radius: 18px;
  background: var(--edu-glass);
  text-decoration: none;
}

.edu-rail__who:hover { text-decoration: none; }

.edu-rail__whomark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #F0A97A, #D9702C);
  box-shadow: 0 10px 16px -8px rgb(217 112 44 / 70%), inset 0 2px 3px rgb(255 255 255 / 50%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.edu-rail__whotext { min-width: 0; display: grid; gap: 1px; }
.edu-rail__whotext span:first-child { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ice-color-text); }
.edu-rail__whotext span:last-child { font-size: 12px; line-height: 1.35; color: var(--ice-color-text-muted); }

/* ─────────────────────────────── the top bar ──────────────────────────── */

.edu-top {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;
  background: linear-gradient(180deg, var(--ice-color-bg) 18%, transparent);
}

.edu-top__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid var(--edu-glass-edge);
  border-radius: 20px;
  background: var(--edu-glass);
  box-shadow: 0 12px 30px rgb(4 9 36 / 10%);
}

/* The one blur that earns its cost on this page: the feed genuinely scrolls
   beneath this bar, which is the case ice-glass.css reserves it for. */
@supports (backdrop-filter: blur(4px)) {
  .edu-top__bar {
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
  }
  .edu-top { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* ⚠️ `min-width: 0` IS LOAD-BEARING. A flex item defaults to `min-width: auto`
   and will not shrink below its own min-content, and this one's label is a long
   unbroken sentence — so at 390px the bar measured 556 and `body` is
   `overflow-x: clip`, which CUTS rather than scrolls. That is the same defect
   the owner found on a phone on 2026-09-03 (docs/00 entry 117), in its flexbox
   form. It never showed because this chrome only ever ran on one page. */
.edu-search {
  flex: 1;
  min-width: 0;
  max-width: 430px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--edu-glass-edge);
  border-radius: 15px;
  background: var(--ice-color-surface-field);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ice-color-text-muted);
  text-decoration: none;
}

.edu-search:hover { color: var(--ice-color-text); text-decoration: none; }

/* The placeholder line is decoration; it ellipsises rather than setting the
   width of the whole top bar. */
.edu-search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edu-search svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.edu-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edu-top__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.edu-top__links a {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ice-color-text-muted);
  text-decoration: none;
}

.edu-top__links a:hover { color: var(--ice-color-text); background: var(--ice-color-surface-field); text-decoration: none; }

.edu-top__cta {
  color: var(--ice-color-on-action) !important;
  background: linear-gradient(180deg, #E8526A, var(--ice-color-crimson));
  box-shadow:
    0 12px 20px -12px rgb(196 30 58 / 70%),
    inset 0 2px 3px rgb(255 255 255 / 40%),
    inset 0 -4px 6px rgb(168 24 48 / 50%);
}

.edu-top__cta:hover { background: linear-gradient(180deg, #E8526A, var(--ice-color-crimson)) !important; filter: brightness(1.06); }

/* ─────────────────────────────── the footer ───────────────────────────── */

.edu-foot {
  margin-top: 48px;
  padding: 26px clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--ice-color-border);
  border-radius: 26px;
  background: var(--edu-glass);
  box-shadow: 0 18px 44px -20px rgb(4 9 36 / 30%);
}

.edu-foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ice-space-6);
}

.edu-foot__brand { display: flex; align-items: center; gap: 12px; }
.edu-foot__word { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ice-color-text); }
.edu-foot__tag { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ice-color-text-muted); }

.edu-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.edu-foot__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ice-color-text-muted);
  text-decoration: none;
}

.edu-foot__links a:hover { color: var(--ice-color-text); text-decoration: underline; }

.edu-foot__rule {
  max-width: 74ch;
  margin: var(--ice-space-5) 0 0;
  padding-top: var(--ice-space-5);
  border-top: 1px solid var(--ice-color-border);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ice-color-text-muted);
}

.edu-foot__who {
  margin: var(--ice-space-3) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ice-color-text-muted);
}

.edu-foot__who a { color: var(--ice-color-text); }
.edu-foot__who span { margin-left: 8px; }

/* ────────────────────────────── narrow screens ────────────────────────── */

/* Below 1080 the rail becomes a horizontal scroller pinned under the top bar,
   which is how the reference's own mobile composition handles it. */
@media (max-width: 1079px) {
  .edu-shell { grid-template-columns: minmax(0, 1fr); }

  .edu-rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 14px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .edu-rail::-webkit-scrollbar { display: none; }

  .edu-brand { padding: 0 10px 0 0; }
  .edu-nav { flex-direction: row; gap: 6px; }
  .edu-nav__item { white-space: nowrap; min-height: 42px; font-size: 14.5px; }
  .edu-rule, .edu-rail__label, .edu-nav--sub, .edu-rail__who { display: none; }
  .edu-top { padding: 10px 0; }
  .edu-top__links a:not(.edu-top__cta) { display: none; }
  .edu-search { max-width: none; }
}

@media (max-width: 560px) {
  .edu-brand__word { display: none; }
  .edu-search span { font-size: 14px; }
  .edu-foot { border-radius: 22px; padding: 22px 18px; }
}

/* ───────────────────────── reduced settings and print ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .edu-mesh span { animation: none; }
  .edu-nav__item { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .edu-top__bar, .edu-foot, .edu-nav__item.is-current, .edu-rail__who {
    background: var(--ice-color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media print {
  .edu-mesh, .edu-rail, .edu-top { display: none; }
  .edu-shell { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STORIES moved out on 2026-09-03. `.srail` and `.sview` now live in
   `public/css/ice-feed.css`, which both this chrome and the answer library
   load, because the story rail and its viewer are the same components on both
   (`src/components/profile/StoryRail.astro`). The viewer's script moved with
   them and is now `public/js/profile-stories.js`.
   ══════════════════════════════════════════════════════════════════════════ */