/* NU Events: Bricks. One layout, three themes (white, green, night) switched by
   <html data-theme="…">. Every stud on a time bar is one hour; partial hours are
   curved slope pieces. */

:root,
[data-theme="white"] {
  --ground: #E9ECF1;
  --ground-image: radial-gradient(circle, #DDE1E8 4px, transparent 4.5px);
  --ground-size: 18px 18px;
  --plate: #FFFFFF;
  --plate-shade: #D3D8E1;
  --outer: 0 0 0 transparent;
  --fg: #1D2433;
  --muted: #5B6478;
  --rule: #EEF1F5;
  --head-fg: #1D2433;
  --head-muted: #5B6478;
  --head-shadow: none;
  --lane: #EEF1F5;
  --lane-dot: #DCE1E9;
  --btn: #FFFFFF;
  --btn-fg: #1D2433;
  --btn-shade: #D3D8E1;
  --btn-dark: #1D2433;
  --btn-dark-fg: #FFFFFF;
  --btn-dark-shade: #0E131D;
  --now: #E3242B;
  --now-glow: 0 0 0 transparent;
  --yellow: #FFC400;
  --yellow-shade: #D9A300;
  --on-yellow: #1D2433;
  --star-idle: #A0A8B8;
  --star-fill: #FFC400;
  --star-stroke: #1D2433;
  --brick-hi: 0 0 0 transparent;
  --backdrop: rgb(29 36 51 / 0.45);

  --c-concert: #F2489B; --c-hackathon: #7D4CDB; --c-competition: #17A55A; --c-workshop: #0F9F94;
  --c-talk: #3F51B5;    --c-career: #00A3C4;    --c-sports: #FF8A00;      --c-party: #FFB800;
  --c-culture: #A23B8E; --c-club: #7CB518;      --c-academic: #1F6FE0;    --c-volunteering: #8D6E3F;
  --c-other: #8A93A6;   --c-library: #5E3A22;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 72px;
  --pad: 18px;
}

[data-theme="green"] {
  --ground: #2B7F3A;
  --ground-image: radial-gradient(circle at 50% 45%, #3A994B 4.5px, #2F8841 5.5px, transparent 6px);
  --ground-size: 20px 20px;
  --outer: 0 4px 0 #1E5F2A;
  --head-fg: #FFFFFF;
  --head-muted: #E2F5E5;
  --head-shadow: 0 3px 0 #1E5F2A;
  --backdrop: rgb(16 48 24 / 0.55);
}

[data-theme="night"] {
  --ground: #161A23;
  --ground-image: radial-gradient(circle, #1E2330 4px, transparent 4.5px);
  --ground-size: 18px 18px;
  --plate: #222836;
  --plate-shade: #171B24;
  --fg: #EEF1F7;
  --muted: #9AA3B5;
  --rule: #2C3342;
  --head-fg: #EEF1F7;
  --head-muted: #9AA3B5;
  --lane: #1B202B;
  --lane-dot: #2A3140;
  --btn: #2A303E;
  --btn-fg: #EEF1F7;
  --btn-shade: #1A1E28;
  --btn-dark: #3A4254;
  --btn-dark-fg: #EEF1F7;
  --btn-dark-shade: #232836;
  --now: #FF4D4D;
  --now-glow: 0 0 10px rgb(255 77 77 / 0.55);
  --yellow: #FFD21F;
  --yellow-shade: #C9A300;
  --on-yellow: #161A23;
  --star-idle: #6B7486;
  --star-fill: #FFD21F;
  --star-stroke: #FFD21F;
  --brick-hi: inset 0 2px 0 rgb(255 255 255 / 0.3);
  --backdrop: rgb(5 7 12 / 0.65);

  --c-concert: #FF5FAE; --c-hackathon: #9B6BFF; --c-competition: #2FCB74; --c-workshop: #22C7B8;
  --c-talk: #6F7DFF;    --c-career: #1BC3E0;    --c-sports: #FF9A1F;      --c-party: #FFC83D;
  --c-culture: #D366C0; --c-club: #9BD93A;      --c-academic: #3D8BFF;    --c-volunteering: #C29A62;
  --c-other: #8F99AD;   --c-library: #9A6B45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ground);
  background-image: var(--ground-image);
  background-size: var(--ground-size);
  color: var(--fg);
  font: 700 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--plate); padding: 8px 12px; z-index: 20; }

/* studs on top of any brick: set --stud (colour) and --stud-gap (spacing) */
.studded { position: relative; }
.studded::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: -6px; height: 6px; pointer-events: none;
  background: radial-gradient(ellipse 8px 6px at 50% 100%, var(--stud) 97%, transparent 100%) repeat-x;
  background-size: var(--stud-gap, 27px) 6px;
}

/* ============================================================ header */
.top { max-width: 46rem; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) var(--pad) 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--head-fg); }
.brand { margin: 0; font: 900 30px/1 var(--font); letter-spacing: -0.5px; text-shadow: var(--head-shadow); }
.today-label { margin: 6px 0 0; font-size: 15px; color: var(--head-muted); }
.top-actions { display: flex; gap: 10px; }

.brick-btn {
  --stud: var(--btn);
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; padding: 0 0 3px;
  background: var(--btn); color: var(--btn-fg);
  border: 0; border-radius: 8px;
  box-shadow: inset 0 -4px 0 var(--btn-shade), var(--outer);
}
.brick-btn:active, .filter-btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--btn-shade); }

.toolbar { display: flex; gap: 10px; margin-top: 26px; }
.filter-btn {
  --stud: var(--btn-dark);
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 16px 3px;
  background: var(--btn-dark); color: var(--btn-dark-fg);
  border: 0; border-radius: 8px;
  box-shadow: inset 0 -4px 0 var(--btn-dark-shade), var(--outer);
  font-weight: 800; font-size: 15px;
}
.filter-btn:active { box-shadow: inset 0 -2px 0 var(--btn-dark-shade); }
.filter-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--on-yellow); font-size: 13px; font-weight: 900;
}
.search {
  --stud: var(--btn);
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 12px 3px;
  background: var(--btn); color: var(--muted);
  border-radius: 8px; box-shadow: inset 0 -4px 0 var(--btn-shade), var(--outer);
}
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; color: var(--fg); font-weight: 700; }
.search input::placeholder { color: var(--muted); }

/* ============================================================ agenda */
.agenda { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad) calc(48px + env(safe-area-inset-bottom)); }
.loading, .empty { color: var(--head-muted); padding: 40px 0; }
.empty h2 { margin: 0 0 8px; font: 900 22px/1.2 var(--font); color: var(--head-fg); }
.empty .plate { padding: 22px 18px; color: var(--muted); }
.empty .plate h2 { color: var(--fg); }

.day-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 10px; color: var(--head-fg); }
.day-name { margin: 0; font: 900 28px/1 var(--font); letter-spacing: -0.4px; text-shadow: var(--head-shadow); }
.day-date { font-size: 15px; color: var(--head-muted); }
.day-count { margin-left: auto; font-size: 13.5px; color: var(--head-muted); }

.plate {
  background: var(--plate); border-radius: 10px;
  box-shadow: inset 0 -4px 0 var(--plate-shade), var(--outer);
  padding: 10px 12px 8px;
}
.plate-inner { position: relative; }

.ruler {
  position: relative; height: 30px; margin: 2px 0 2px;
  font-size: 12.5px; font-weight: 800; color: var(--muted);
  border-bottom: 1.5px solid var(--muted);
  background: repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px calc(100% / var(--hours))) bottom / 100% 5px no-repeat;
}
.ruler span { position: absolute; top: 2px; transform: translateX(-50%); }
.ruler span.first { transform: none; }
.ruler span.last { transform: translateX(-100%); }
.ruler .now-pill {
  top: -2px; z-index: 4; transform: translateX(-50%);
  font-size: 12px; font-weight: 900; color: #FFFFFF; background: var(--now);
  padding: 4px 7px; border-radius: 999px; box-shadow: var(--now-glow);
}
.now-line {
  position: absolute; top: 28px; bottom: 6px; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--now); box-shadow: var(--now-glow);
  z-index: 3; pointer-events: none;
}

.row { padding: 12px 0 10px; border-bottom: 2px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.row-main { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) 44px; align-items: start; }
.when { font-size: 17px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.when small { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.when.soft { font-size: 13.5px; font-weight: 800; color: var(--muted); padding-top: 2px; }
.open { min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.title { font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.title .ink { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--cat); }
.meta { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 8px 4px; border-radius: 6px; }
.tag.live { background: var(--now); color: #FFFFFF; }
.tag.changed { background: var(--yellow); color: var(--on-yellow); }
.tag.cancelled { box-shadow: inset 0 0 0 1.5px var(--now); color: var(--now); }
.is-cancelled .title, .is-cancelled .meta { opacity: 0.6; }
/* ended earlier today: stays listed until midnight, faded */
.tag.ended { box-shadow: inset 0 0 0 1.5px var(--muted); color: var(--muted); }
.is-ended .title, .is-ended .meta, .is-ended .when-col { opacity: 0.55; }
.is-cancelled .title { text-decoration: line-through; text-decoration-thickness: 2px; }

.star {
  justify-self: end; width: 44px; height: 40px; margin-top: -8px;
  display: grid; place-items: center; padding: 0;
  border: 0; background: none; color: var(--star-idle);
}
.star svg { width: 22px; height: 22px; }
.star[aria-pressed="true"] { color: var(--star-stroke); }
.star[aria-pressed="true"] path { fill: var(--star-fill); }

/* the time lane under each event */
.lane {
  position: relative; height: 22px; margin-top: 8px; border-radius: 4px;
  background-color: var(--lane);
  background-image: radial-gradient(circle, var(--lane-dot) 3.5px, transparent 4px);
  background-size: calc(100% / var(--hours)) 22px;
  background-position: 0 3px;
}
.studs {
  position: absolute; top: 2px; height: 6px;
  background: radial-gradient(ellipse 8px 6px at 50% 100%, var(--cat) 97%, transparent 100%) repeat-x;
  background-size: calc(100% / var(--n)) 6px;
}
.body {
  position: absolute; top: 8px; height: 13px; background: var(--cat);
  border-radius: 3px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), var(--brick-hi);
}
.is-cancelled .body { background: repeating-linear-gradient(-45deg, var(--cat) 0 4px, transparent 4px 8px); box-shadow: none; opacity: 0.7; }
.is-cancelled .studs { opacity: 0.4; }
.is-ended .body, .is-ended .studs { opacity: 0.45; }
.tile {
  position: absolute; top: 8px; height: 13px; border-radius: 3px;
  background: color-mix(in srgb, var(--cat) 50%, var(--lane));
}
.tile.fade-right { border-top-right-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to right, #000 75%, transparent); mask-image: linear-gradient(to right, #000 75%, transparent); }
.tile.fade-left { border-top-left-radius: 0; border-bottom-left-radius: 0;
  -webkit-mask-image: linear-gradient(to left, #000 75%, transparent); mask-image: linear-gradient(to left, #000 75%, transparent); }
.tile.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}

/* ============================================================ sheets */
.sheet-backdrop { position: fixed; inset: 0; z-index: 10; background: var(--backdrop); }
.sheet {
  --stud: var(--plate);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 46rem; max-height: 88vh; margin: 0 auto;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--plate); color: var(--fg);
  border-radius: 14px 14px 0 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.sheet::before { left: 16px; right: 16px; }
.sheet-scroll { max-height: calc(88vh - 42px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.sheet.opening { transform: translateY(105%); }
.sheet h2 { margin: 4px 0 14px; font: 900 24px/1.2 var(--font); overflow-wrap: anywhere; }
.sheet .cat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--muted); }
.sheet .cat::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--cat); }
.sheet.has-cat { border-top: 8px solid var(--cat); padding-top: 14px; }
.sheet.has-cat::before { top: -14px; }
.sheet a:not(.btn) { color: var(--fg); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sheet-footer { position: sticky; bottom: -1px; margin: 0 -4px; padding: 12px 4px 2px; background: var(--plate); }

.facts { margin: 0 0 16px; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 6rem 1fr; gap: 10px; padding: 9px 0; border-bottom: 2px solid var(--rule); }
.facts .k { color: var(--muted); font-size: 14px; }
.desc { margin: 0 0 18px; font-weight: 600; white-space: pre-line; max-width: 60ch; }
.notice { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; background: var(--yellow); color: var(--on-yellow); font-weight: 800; }
.notice.bad { background: transparent; box-shadow: inset 0 0 0 2px var(--now); color: var(--now); }
.help { margin: 0 0 16px; color: var(--muted); font-weight: 600; }
.help b { color: var(--fg); }

.actions { display: grid; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 16px 13px;
  border: 0; border-radius: 8px;
  background: var(--lane); color: var(--fg);
  box-shadow: inset 0 -4px 0 var(--plate-shade);
  font-weight: 800; text-decoration: none; text-align: center;
}
[data-theme="night"] .btn { background: var(--btn); box-shadow: inset 0 -4px 0 var(--btn-shade); }
.btn.dark { background: var(--btn-dark); color: var(--btn-dark-fg); box-shadow: inset 0 -4px 0 var(--btn-dark-shade); }
.btn.yellow { background: var(--yellow); color: var(--on-yellow); box-shadow: inset 0 -4px 0 var(--yellow-shade); }
.btn:active { transform: translateY(2px); }
.source { display: block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
.source a { color: var(--fg); }

/* filter sheet */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 2px; border: 0; border-bottom: 2px solid var(--rule); background: none; text-align: left;
}
.check-row .name { flex: 1; font-weight: 800; }
.check-row .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.tick {
  width: 28px; height: 24px; flex: none; position: relative;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--lane); box-shadow: inset 0 0 0 2px var(--plate-shade);
}
[aria-checked="true"] .tick { background: var(--cat); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), var(--brick-hi); }
[aria-checked="true"] .tick::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: -5px; height: 5px;
  background: radial-gradient(ellipse 5px 5px at 50% 100%, var(--cat) 97%, transparent 100%) repeat-x; background-size: 11px 5px;
}
.tick svg { opacity: 0; }
[aria-checked="true"] .tick svg { opacity: 1; }

/* settings: theme swatches */
.section-label { margin: 6px 0 10px; color: var(--muted); font-size: 14px; font-weight: 800; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0;
  border: 0; background: none; text-align: center; font-weight: 800; color: var(--fg);
}
.swatch {
  position: relative; height: 74px; margin-top: 8px; border-radius: 10px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.18);
}
.swatch::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: -7px; height: 7px;
  background: radial-gradient(ellipse 8px 7px at 50% 100%, var(--sw) 97%, transparent 100%) repeat-x; background-size: 22px 7px;
}
.swatch.white { --sw: #FFFFFF; background: #FFFFFF; box-shadow: inset 0 -5px 0 #D3D8E1, inset 0 0 0 1.5px #D3D8E1; }
.swatch.white::before { filter: drop-shadow(0 -1px 0 #C5CCD8); }
.swatch.green { --sw: #2B7F3A; background: #2B7F3A; }
.swatch.night { --sw: #222836; background: #222836; }
.swatch .mini { width: 60%; height: 10px; border-radius: 3px; background: #FFC400; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); }
.theme-opt[aria-checked="true"] .swatch { outline: 3px solid var(--yellow); outline-offset: 3px; }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 30;
  transform: translateX(-50%); max-width: calc(100vw - 36px);
  padding: 11px 16px 13px; border-radius: 8px;
  background: var(--btn-dark); color: var(--btn-dark-fg); font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--btn-dark-shade);
}

@media (min-width: 720px) {
  :root { --gutter: 84px; --pad: 24px; }
  .brand { font-size: 36px; }
  .top { padding-top: 40px; }
  .sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 14px; max-height: 84vh; }
  .sheet.opening { transform: translateY(-46%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* registration */
.tag.reg { background: var(--btn-dark); color: var(--btn-dark-fg); }
.tag.reg-closed { box-shadow: inset 0 0 0 1.5px var(--muted); color: var(--muted); }
.tag.audience { box-shadow: inset 0 0 0 1.5px currentColor; color: var(--muted); }
.desc a { color: var(--fg); overflow-wrap: anywhere; }

/* ============================================================ bottom dock: a Lego pyramid of glass bricks
   Events (12 studs) sits on Clubs · Internships · Courses (5 + 6 + 5 studs), leaving 2 bare studs at each end.
   Unselected bricks are clear "dewy" glass; the selected one is solid. --u is the stud pitch: 22px, smaller on
   narrow phones so the 16-stud base always fits. */
:root, [data-theme="white"], [data-theme="green"] {
  --g-rgb: 255 255 255; --g-t: .04; --g-shine: .9;
  --g-glint: .85; --g-bounce: .28; --g-text: 0 1px 0 rgb(255 255 255 / .6);
  --sel: #1D2433; --sel-fg: #FFFFFF; --sel-shade: #0E131D; --sel-count: #FFC400;
}
[data-theme="night"] {
  --g-t: .04; --g-shine: .7;
  --g-glint: .45; --g-bounce: .12; --g-text: 0 1px 1px rgb(0 0 0 / .5);
  --sel: #EEF1F7; --sel-fg: #161A23; --sel-shade: #B9C0CE; --sel-count: #7A5C00;
}

.agenda { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; pointer-events: none;
  padding: 0 var(--pad) calc(16px + env(safe-area-inset-bottom));
}
.pyr {
  --u: min(22px, calc((100vw - 2 * var(--pad)) / 16));
  /* shaded studs: bright middle, soft grey edge and a tiny highlight, so they read as 3D on a light page.
     Declared here, next to --u, so var(--u) resolves (on :root it wouldn't exist yet). */
  --g-studs:
    radial-gradient(circle 1.5px at 38% 55%, rgb(255 255 255 / .95) 90%, rgb(255 255 255 / 0) 100%) 0 0 / var(--u) 6px repeat-x,
    radial-gradient(ellipse calc(var(--u) * .32) 6px at 50% 100%, rgb(255 255 255 / .9) 0 45%, rgb(196 204 218 / .85) 80%, rgb(150 160 180 / .6) 95%, transparent 100%) 0 0 / var(--u) 6px repeat-x;
  position: relative; width: calc(var(--u) * 16); height: 108px; margin: 0 auto; pointer-events: auto;
}
[data-theme="night"] .pyr { /* dewy glass studs with a dew drop each */
  --g-studs:
    radial-gradient(circle 1.6px at 38% 58%, rgb(255 255 255 / .7) 90%, rgb(255 255 255 / 0) 100%) 0 0 / var(--u) 6px repeat-x,
    radial-gradient(ellipse calc(var(--u) * .32) 6px at 50% 100%, rgb(255 255 255 / .6) 0 50%, rgb(255 255 255 / .29) 85%, transparent 100%) 0 0 / var(--u) 6px repeat-x;
}
.brk {
  /* the button only holds the label; the glass is a separate layer under it (.glass), so if iOS Safari ever
     fails to draw the blur, the text still shows on top */
  position: absolute; box-sizing: border-box; margin: 0; min-width: 0; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; isolation: isolate;
  background: transparent; color: var(--fg); font: 900 15px/1.1 var(--font); text-shadow: var(--g-text);
}
.brk .glass {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60px 16px at 16% 8%, rgb(255 255 255 / var(--g-glint)), rgb(255 255 255 / 0) 70%),
    radial-gradient(90% 40% at 50% 100%, rgb(255 255 255 / var(--g-bounce)), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, rgb(var(--g-rgb) / calc(var(--g-t) + .12)) 0%, rgb(var(--g-rgb) / var(--g-t)) 48%, rgb(var(--g-rgb) / calc(var(--g-t) * .7)) 100%);
  /* plain numbers: Safari mishandles var() inside backdrop-filter */
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  backdrop-filter: blur(3px) saturate(160%);
  box-shadow:
    inset 0 1px .5px rgb(255 255 255 / calc(.55 + var(--g-shine) * .45)),
    inset 1px 0 .5px rgb(255 255 255 / calc(var(--g-shine) * .45)),
    inset -1px 0 .5px rgb(255 255 255 / calc(var(--g-shine) * .3)),
    inset 0 -1px 1px rgb(255 255 255 / calc(var(--g-shine) * .5)),
    inset 0 -8px 14px -8px rgb(255 255 255 / calc(var(--g-shine) * .5)),
    inset 0 0 0 1px rgb(255 255 255 / calc(.12 + var(--g-shine) * .25)),
    0 10px 22px -10px rgb(0 0 0 / .35);
}
[data-theme="night"] .brk .glass { -webkit-backdrop-filter: blur(3px) saturate(170%); backdrop-filter: blur(3px) saturate(170%); }
.brk .glass::after { /* sheen on the upper half */
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 45%; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / calc(var(--g-shine) * .45)), rgb(255 255 255 / 0));
}
/* after a tab switch the glass is switched off for two frames, which makes iOS rebuild the blur
   (otherwise it can paint the bricks solid white/black after the page jumps) */
.dock.repaint .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.brk .lbl { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.bb .lbl { flex-direction: column; gap: 2px; }
.brk::before { content: ""; position: absolute; top: -6px; height: 6px; pointer-events: none; background: var(--g-studs); }
.brk .tc { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.brk[aria-pressed="true"] {
  background: var(--sel); color: var(--sel-fg); text-shadow: none;
  box-shadow: inset 0 -4px 0 var(--sel-shade), inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 22px -10px rgb(0 0 0 / .4);
}
.brk[aria-pressed="true"] .glass { display: none; }
.brk[aria-pressed="true"] .tc { color: var(--sel-count); }
.brk[aria-pressed="true"]::before {
  background: radial-gradient(ellipse calc(var(--u) * .32) 6px at 50% 100%, var(--sel) 96%, transparent 100%) 0 0 / var(--u) 6px repeat-x;
}
.brk:active .lbl { transform: translateY(1px); }
.brk:focus-visible { outline-offset: 3px; }
.ev { left: calc(var(--u) * 2); top: 6px; width: calc(var(--u) * 12); height: 48px; border-radius: 8px 8px 0 0; padding: 0 0 3px; }
.ev::before { left: 0; right: 0; }
.base { position: absolute; left: 0; top: 54px; width: 100%; height: 54px; }
.bb { top: 0; height: 54px; padding: 0 4px 4px; }
.bb.l { left: 0; width: calc(var(--u) * 5); border-radius: 8px 0 0 11px; }
.bb.m { left: calc(var(--u) * 5); width: calc(var(--u) * 6); border-radius: 0; }
.bb.r { left: calc(var(--u) * 11); width: calc(var(--u) * 5); border-radius: 0 8px 11px 0; }
.bb.m::before { display: none; }
.bb.l::before { left: 0; width: calc(var(--u) * 2); }
.bb.r::before { right: 0; width: calc(var(--u) * 2); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .brk .glass { background: rgb(var(--g-rgb) / .8); }
  [data-theme="night"] .brk .glass { background: rgb(42 48 62 / .92); }
}
.toast { bottom: calc(140px + env(safe-area-inset-bottom)); }

/* courses tab (the schedule builder comes later) */
.soon { padding: 22px 18px; }
.soon h2 { margin: 0 0 8px; font: 900 22px/1.2 var(--font); }
.soon p { margin: 0; color: var(--muted); font-weight: 600; }

/* countdown brick: one stud = one day left */
.cd { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cdb { position: relative; height: 19px; flex: none; }
.cdb .body { top: 6px; }
/* lego studs: small, 16px apart (one per day on countdowns), sitting on top of the brick body */
.lego {
  position: absolute; left: 0; top: 2px; height: 4px;
  background: radial-gradient(ellipse 3.5px 4px at 50% 100%, var(--cat) 95%, transparent 100%) repeat-x;
  background-size: 16px 4px;
}
.lane .lego { top: 4px; }
.cdl { font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.cd.hot { --cat: var(--now); }
.cd.hot .cdl { color: var(--now); }
.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 65%, transparent); mask-image: linear-gradient(to right, #000 65%, transparent);
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}

/* fests shelf */
.shelf-toggle {
  margin-left: auto; padding: 6px 2px; border: 0; background: none;
  color: var(--head-muted); font-weight: 800; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px;
}

/* clubs: tiles for what closes this week */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-top: 8px; }
.ct {
  --stud: var(--cat); --stud-gap: 17px;
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 128px;
  padding: 10px 12px 13px; border: 0; border-top: 7px solid var(--cat); border-radius: 10px;
  background: var(--plate); color: var(--fg); box-shadow: inset 0 -4px 0 var(--plate-shade), var(--outer); text-align: left;
}
.ct.studded::before { top: -13px; }
.ct:active { transform: translateY(2px); }
.ct .cn { font-size: 15.5px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.ct .cw { margin-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.ct .tag { margin-top: 6px; }
.ct .cby { margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.ct .cby b { color: var(--fg); font-weight: 900; }
.ct .cby.hot, .ct .cby.hot b { color: var(--now); }
.ct .cd { margin-top: 6px; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* internships: one deadline ruler for every row */
.ruler.deadlines span { white-space: nowrap; }
.ruler.deadlines .today { color: var(--now); }
.lane-paint { position: absolute; inset: 0; }
.flag { position: absolute; top: -1px; width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; background: var(--fg); }
.when.hot, .when.hot small { color: var(--now); }

/* coffee break: a pizza slice under the time */
.when-col { min-width: 0; }
.food { display: block; width: 22px; height: 22px; margin-top: 5px; }
.food svg { display: block; }
.food-fact { display: inline-flex; align-items: center; gap: 8px; }
.food-fact svg { flex: none; }

/* ============================================================ Floating events (no fixed date) */
/* the big switch under the search */
.mode-row { margin-top: 18px; }
.mode-btn {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 66px; overflow: hidden;
  padding: 0 16px 4px; border: 0; border-radius: 10px; text-align: left; color: var(--fg);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .14), var(--outer);
}
.mode-btn:active { transform: translateY(2px); }
.mode-label { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mode-label b { font: 900 18px/1.15 var(--font); }
.mode-label small { font-size: 13px; font-weight: 700; color: var(--muted); }
.mode-go { position: relative; z-index: 1; flex: none; }
/* Lego sea with a treasure chest (canvas Q2): label under the water, the chest opens on hover */
.mode-btn.floating { --wall-dim: 0; background: #1D5DB5; }
[data-theme="night"] .mode-btn.floating { --wall-dim: .16; }
.mode-btn.floating .mode-label { position: absolute; left: 16px; top: 23px; z-index: 2; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.mode-btn.floating .mode-label b { color: #FFFFFF; font-size: 17px; line-height: 1.12; }
.mode-btn.floating .mode-label small { color: #D5DAE4; line-height: 1.25; }
.mode-btn.floating .mode-go {
  z-index: 2; margin-left: auto; padding: 6px; border-radius: 8px; color: var(--fg); background: var(--plate);
  box-shadow: inset 0 -3px 0 var(--plate-shade), 0 3px 8px rgb(0 0 0 / .35); box-sizing: content-box;
}
.sea-art { position: absolute; left: 0; top: 0; display: block; }
.sea-art g.a { transform-box: fill-box; transform-origin: 50% 50%; }
.sea-art .bob { animation: sea-bob 2.6s ease-in-out infinite; }
.sea-art .wave { animation: sea-wave 2.6s ease-in-out infinite; }
@keyframes sea-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2.2px) rotate(3deg); } }
@keyframes sea-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.4px); } }
.sea-art .lid { transform-box: view-box; }
.sea-art .burst, .sea-art .spark { opacity: 0; }
/* one opening (1.9s): lid up, bubbles out and gone, lid shut. JS adds .opening on hover (or once on phones). */
.mode-btn.floating.opening .lid { animation: chest-lid 1.9s both; }
.mode-btn.floating.opening .burst { animation: chest-bubble 1.9s both; }
.mode-btn.floating.opening .spark { animation: chest-spark 1.9s both; }
@keyframes chest-lid {
  0% { transform: rotate(0); }
  13% { transform: rotate(-32deg); }
  20%, 72% { transform: rotate(-28deg); animation-timing-function: ease-in; }
  90%, 100% { transform: rotate(0); }
}
@keyframes chest-bubble {
  0%, 10% { opacity: 0; transform: translate(0, 0) scale(.5); }
  16% { opacity: 1; transform: translate(0, -3px) scale(1); animation-timing-function: ease-in; }
  58% { opacity: 1; }
  66%, 100% { opacity: 0; transform: translate(1.5px, calc(var(--rise) * -1px)) scale(1.1); }
}
@keyframes chest-spark {
  0%, 14% { opacity: 0; transform: scale(0) rotate(0); }
  28% { opacity: 1; transform: scale(1) rotate(45deg); }
  42%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sea-art .bob, .sea-art .wave { animation: none; }
}
/* Lego wall with a gap (canvas N2): the label sits in the gap, white on the grey baseplate */
.mode-btn.fixed { --wall-dim: 0; background: #22252D; overflow: visible; }
[data-theme="night"] .mode-btn.fixed { --wall-dim: .16; }
.mode-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.mode-wall .wall-art { position: absolute; left: 0; top: 0; display: block; }
.mode-wall .wall-dim { fill-opacity: var(--wall-dim); }
.mode-btn.fixed .mode-label {
  position: absolute; left: 16px; top: 14px; z-index: 2; text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}
.mode-btn.fixed .mode-label b { color: #FFFFFF; line-height: 1.12; }
.mode-btn.fixed .mode-label small { color: #D5DAE4; line-height: 1.25; }
.mode-btn.fixed .mode-go {
  z-index: 2; margin-left: auto; padding: 6px; border-radius: 8px; color: var(--fg); background: var(--plate);
  box-shadow: inset 0 -3px 0 var(--plate-shade), 0 3px 8px rgb(0 0 0 / .35); box-sizing: content-box;
}
/* the loose brick: drops in, one short hard bounce off the studs, then falls out past the bottom edge.
   Cut off only at the bottom, so it can come in from above. JS adds .falling (hover, or once on phones). */
.wall-fall { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; clip-path: inset(-160px -80px 0 -80px); }
.mode-btn.fixed.falling .wall-fall { visibility: visible; }
.wall-fall .fx { position: absolute; top: 100.1px; width: 33px; height: 13.2px; }
.wall-fall .fy { position: absolute; inset: 0; }
.wall-fall .fr { position: absolute; left: -4px; top: -5px; overflow: visible; transform-origin: 20.5px 11.6px; }
[data-theme="night"] .wall-fall .fr { filter: brightness(.86); }
.mode-btn.fixed.falling .fx { animation: wall-fall-x .82s linear both; }
.mode-btn.fixed.falling .fy { animation: wall-fall-y .82s both; }
.mode-btn.fixed.falling .fr { animation: wall-fall-r .82s linear both; }
@keyframes wall-fall-x {
  0% { transform: translateX(21px); opacity: 0 }
  9% { opacity: 1 }
  46.5% { transform: translateX(11px) }
  59.8% { transform: translateX(7px) }
  100% { transform: translateX(0) }
}
@keyframes wall-fall-y { /* gravity: speeds up falling, slows down rising */
  0% { transform: translateY(-138.4px); animation-timing-function: cubic-bezier(.33, 0, .67, .33) }
  46.5% { transform: translateY(-66.2px); animation-timing-function: cubic-bezier(.33, .67, .67, 1) }
  59.8% { transform: translateY(-73px); animation-timing-function: cubic-bezier(.33, 0, .67, .33) }
  100% { transform: translateY(0) }
}
@keyframes wall-fall-r {
  0% { transform: rotate(-40deg) scale(1) }
  46.5% { transform: rotate(9deg) scale(1) }
  59.8% { transform: rotate(-12deg) scale(1) }
  100% { transform: rotate(-55deg) scale(1.08) }
}
@media (prefers-reduced-motion: reduce) { .wall-fall { display: none; } }

/* cards with Lego pieces floating around them */
.floating .float-list { display: grid; gap: 24px; padding-top: 12px; }
.float-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start;
  padding: 14px 8px 12px 16px; border-radius: 12px; background: var(--plate);
  box-shadow: inset 0 -4px 0 var(--plate-shade), var(--outer);
}
.float-card .star { margin-top: -6px; }
.fdue { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.fdue b { color: var(--fg); font-weight: 900; }
.fdue.hot, .fdue.hot b { color: var(--now); }
.piece {
  position: absolute; top: -13px; width: calc(var(--w) * 14px); height: 10px; border-radius: 2px; background: var(--cat);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 5px 8px -3px rgb(0 0 0 / .3);
  transform: rotate(var(--rot)); animation: piece-bob 5s ease-in-out infinite;
}
.piece::before {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px;
  background: radial-gradient(ellipse 3.5px 4px at 50% 100%, var(--cat) 95%, transparent 100%) repeat-x; background-size: 14px 4px;
}
.piece.loose { top: auto; bottom: -17px; left: 26px; animation-delay: -2.5s; }
@keyframes piece-bob {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-3px) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .piece { animation: none; } }

/* settings: bugs, mistakes & suggestions */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn:disabled { opacity: .5; }
.fb-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fb-kind {
  min-height: 42px; padding: 6px 8px 9px; border: 0; border-radius: 8px;
  background: var(--lane); color: var(--fg); font-weight: 800; box-shadow: inset 0 -4px 0 var(--plate-shade);
}
[data-theme="night"] .fb-kind { background: var(--btn); box-shadow: inset 0 -4px 0 var(--btn-shade); }
.fb-kind[aria-checked="true"] { background: var(--btn-dark); color: var(--btn-dark-fg); box-shadow: inset 0 -4px 0 var(--btn-dark-shade); }
.fb-box textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical;
  padding: 12px 14px 14px; border: 0; border-radius: 8px; outline: none;
  background: var(--lane); color: var(--fg); font: 700 16px/1.4 var(--font);
  box-shadow: inset 0 0 0 2px var(--plate-shade);
}
[data-theme="night"] .fb-box textarea { background: var(--btn); }
.fb-box textarea:focus { box-shadow: inset 0 0 0 2px var(--fg); }
.fb-box textarea::placeholder { color: var(--muted); }
.fb-meta { min-height: 1.2em; margin: 8px 2px 14px; color: var(--muted); font-size: 13px; font-weight: 700; }