:root{
  color-scheme: light;

  /* ---- Portrait design tokens (see DESIGN FILE/) ---- */
  --color-portrait-ink:#08304c;
  --color-nautical-teal:#084e72;
  /* sampled directly from assets/imt-logo.png: the torch's gold and the wordmark's navy */
  --color-imt-navy:#1e398c;
  --color-imt-gold:#d4a52a;
  --color-graphite-body:#2c2c2c;
  --color-slate-helper:#6b6b6b;
  --color-ash-divider:#dedede;
  --color-mist-hairline:#eeeeee;
  --color-white-canvas:#ffffff;
  --color-mint-wash:#d7ffe2;
  --color-sky-wash:#e8f1ff;
  --color-peach-wash:#ffebd6;
  /* Functional exception: the design file has no semantic error color of its own
     (its palette is two navy inks + one decorative rainbow), so this is a
     pragmatic addition for a real UI error state, not a brand hue. */
  --color-danger:#c0392b;

  /* More tokens, so the dark theme (end of this file) can change them.
     --color-page is the page behind the cards; --color-accent is the navy
     when it is used as text, a border or an icon (the navy as a button
     background stays --color-imt-navy). */
  --color-page:#ffffff;
  --color-accent:#1e398c;
  --color-drop:#fbfcfe;
  --color-row:#f8f9fb;
  --color-gone:#b4b9c2;
  --color-ok-ink:#0c4a2c;
  --color-bad-ink:#7c2018;
  --color-sun-ink:#b9770e;

  /* Fonts: Switzer/Basier Circle are commercial and unavailable on Google Fonts,
     so we use the design file's own listed substitutes. */
  --font-switzer:'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-basier-circle:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cursive:'Caveat', cursive;

  --page-max-width:1200px;

  --radius-nav:28px;
  --radius-tags:9999px;
  --radius-cards:24px;
  --radius-buttons:28px;

  --shadow-md: rgba(0,0,0,.03) 0 16px 16px -8px, rgba(0,0,0,.03) 0 10px 10px -5px, rgba(0,0,0,.03) 0 5px 5px -2.5px, rgba(0,0,0,.03) 0 3px 3px -1.5px, rgba(0,0,0,.03) 0 2px 2px -1px, rgba(0,0,0,.03) 0 1px 1px -.5px;
  --shadow-subtle-2: oklab(0 0 0 / .04) 0 0 0 1px, rgba(0,0,0,.03) 0 16px 16px -8px, rgba(0,0,0,.03) 0 10px 10px -5px, rgba(0,0,0,.03) 0 5px 5px -2.5px, rgba(0,0,0,.03) 0 3px 3px -1.5px, rgba(0,0,0,.03) 0 2px 2px -1px, rgba(0,0,0,.03) 0 1px 1px -.5px;
  --shadow-subtle-3: oklab(0 0 0 / .06) 0 0 0 1px, rgba(0,0,0,.07) 0 20px 20px -10px, rgba(0,0,0,.04) 0 10px 10px -5px, rgba(0,0,0,.03) 0 5px 5px -2.5px, rgba(0,0,0,.03) 0 3px 3px -1.5px, rgba(0,0,0,.03) 0 2px 2px -1px, rgba(0,0,0,.03) 0 1px 1px -.5px;
}

*{box-sizing:border-box}
html,body{background:var(--color-page)}
body{
  margin:0;
  color:var(--color-portrait-ink);
  font-family:var(--font-switzer);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* "clip", like the html rule near the end of this file, cuts anything that
     sticks out sideways without making the body a scroll area of its own;
     as a scroll area it would stop the header below from staying put */
  overflow-x:clip;
  /* No "perspective" on the body: it put the sticky header inside a 3D
     rendering context, which makes it shake while scrolling. The 3D tilts
     below carry their own perspective() instead. */
}
h1,h2,h3{ font-family:var(--font-basier-circle); text-wrap:balance; margin:0; }
a{color:inherit}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:14px; z-index:30;
  max-width:calc(var(--page-max-width) - 80px);
  margin:0 auto; padding:0 20px;
  transform-origin:top center;
  animation:dropIn .7s cubic-bezier(.2,.8,.2,1) .02s backwards;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--color-white-canvas);
  border-radius:var(--radius-nav);
  box-shadow:var(--shadow-md);
  padding:8px 12px 8px 14px;
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled .header-inner{ box-shadow:var(--shadow-subtle-3); }

.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--color-portrait-ink); min-width:0; }
.brand-icon{ flex-shrink:0; display:block; object-fit:contain; }
.brand-name{ font-family:var(--font-basier-circle); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.btn-contact{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-weight:600; font-size:13.5px;
  padding:10px 18px; border-radius:var(--radius-buttons);
  border:1.5px solid var(--color-accent); color:var(--color-accent); background:var(--color-white-canvas);
  text-decoration:none; white-space:nowrap;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
}
.btn-contact svg{ width:15px;height:15px;flex-shrink:0; }
.btn-contact:hover{ background:var(--color-imt-navy); color:#fff; transform:translateY(-2px); }
.btn-contact:active{ transform:translateY(0) scale(.97); }

/* The entrance animations play and then let go ('backwards', not 'forwards'): the element goes back to its
   ordinary styles, with no transform left on it at all. A leftover transform, even an identity one, gives a
   sticky header its own paint layer, which is what shakes while scrolling on a phone. */
@keyframes dropIn{ from{ opacity:0; transform:perspective(1600px) translateY(-16px) rotateX(8deg); } }

/* soft one-off radial glow behind the hero only, per the source design system */
.hero-glow{
  position:absolute; left:50%; top:64px;
  width:min(900px,100vw); height:min(520px,70vw);
  transform:translateX(-50%);
  background:radial-gradient(min(560px,90vw) min(360px,60vw) at 50% 30%, color-mix(in srgb, var(--color-imt-gold) 14%, transparent) 0%, transparent 70%);
  z-index:-1; pointer-events:none;
}

.wrap{
  max-width:860px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:48px 0;
  position:relative;
  z-index:1;
}
.hero,.search-card,#emptyState{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- hero ---------- */
.hero{
  text-align:center;
  transform-origin:top center;
  animation:heroIn .8s cubic-bezier(.2,.8,.2,1) .12s backwards;
}
@keyframes heroIn{ from{ opacity:0; transform:perspective(1600px) translateY(18px) rotateX(6deg); } }

.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--color-nautical-teal);
  background:var(--color-sky-wash);
  padding:7px 16px;border-radius:var(--radius-tags);
  margin-bottom:22px;
  max-width:100%;
  text-align:center;
  white-space:nowrap;
  line-height:1.4;
}
@media (max-width:480px){
  .eyebrow{ font-size:9.5px; letter-spacing:.01em; padding:6px 12px; white-space:normal; }
}

h1{
  font-size:clamp(34px,7vw,64px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.12;
  color:var(--color-portrait-ink);
  margin-bottom:0;
}
.cursive-accent{
  font-family:var(--font-cursive);
  font-weight:700;
  font-size:1.2em;
  color:var(--color-accent);
  padding-inline:2px;
}

/* ---------- search ---------- */
.search-card{
  margin-top:40px;
  background:var(--color-white-canvas);
  border:1px solid var(--color-mist-hairline);
  border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle-2);
  padding:24px;
  animation:cardIn .7s cubic-bezier(.2,.8,.2,1) .24s backwards;
  transition:box-shadow .35s ease;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(var(--rise, 20px)); } }
.search-card:hover{ box-shadow:var(--shadow-subtle-3); }

.field-label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-slate-helper);margin-bottom:8px;
}
.search-row{display:flex;gap:10px;position:relative}
#roll{
  flex:1;
  min-width:0;
  font:inherit;
  font-size:16px;
  font-weight:500;
  letter-spacing:.02em;
  padding:14px 18px;
  border-radius:var(--radius-tags);
  border:1.5px solid var(--color-mist-hairline);
  background:var(--color-white-canvas);
  color:var(--color-portrait-ink);
  transition:border-color .2s ease;
}
#roll::placeholder{color:var(--color-slate-helper);letter-spacing:normal;font-weight:400}
#roll:focus{outline:none;border-color:var(--color-portrait-ink)}

/* IMT brand CTA - solid navy, sampled from the logo */
.btn-rainbow{
  position:relative;
  font:inherit;font-weight:700;font-size:15px;
  padding:12px 26px;border-radius:var(--radius-buttons);
  color:#fff;cursor:pointer;
  white-space:nowrap;
  border:none;
  background-color:var(--color-imt-navy);
  box-shadow:var(--shadow-subtle-2);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, filter .15s ease;
}
.btn-rainbow:hover{ transform:perspective(900px) translateY(-2px) rotateX(4deg); box-shadow:var(--shadow-md); filter:brightness(1.12); }
.btn-rainbow:active{ transform:translateY(0) scale(.97); }

.error{
  margin-top:14px;font-size:14px;color:var(--color-danger);font-weight:500;
  display:flex;gap:6px;align-items:flex-start;
}

/* ---------- steps strip ---------- */
.steps-strip{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:nowrap;
  gap:8px 20px;
  max-width:100%; margin:28px auto 0;
  --rise:14px;
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) .34s backwards;
}
.step{ display:flex; align-items:center; gap:8px; transition:transform .2s cubic-bezier(.2,.8,.2,1); white-space:nowrap; }
.step-badge{
  width:30px;height:30px;flex-shrink:0;
  border-radius:50%;
  background:var(--color-sky-wash); color:var(--color-nautical-teal);
  display:flex;align-items:center;justify-content:center;
}
.step-badge svg{ width:15px;height:15px; }
.step-text{ font-size:13.5px; color:var(--color-graphite-body); font-weight:500; }
.step + .step::before{
  content:"";
  width:16px;height:1px;background:var(--color-ash-divider);
  margin-right:12px;
  align-self:center;
  flex-shrink:0;
}
@media (max-width:900px){
  .steps-strip{ flex-wrap:wrap; }
}
@media (max-width:520px){
  .steps-strip{ flex-direction:column; align-items:center; gap:12px; }
  .step + .step::before{ display:none; }
}

/* ---------- results ---------- */
#results{margin-top:40px}
.ticket-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  margin-bottom:16px;flex-wrap:wrap;
}
.ticket-head .roll-lbl{font-size:12px;color:var(--color-slate-helper);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.ticket-head .roll-val{font-size:24px;font-weight:700;color:var(--color-portrait-ink);letter-spacing:-.01em;font-family:var(--font-basier-circle)}
.ticket-head .roll-roster{font-size:13px;color:var(--color-slate-helper);font-weight:500;margin-top:2px}
.count-badge{
  font-size:13px;font-weight:600;color:var(--color-nautical-teal);
  background:var(--color-sky-wash);
  padding:6px 14px;border-radius:var(--radius-tags);white-space:nowrap;
}

.actions{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:600;font-size:14px;
  padding:11px 22px;border-radius:var(--radius-buttons);cursor:pointer;
  border:1.5px solid var(--color-mist-hairline);background:var(--color-white-canvas);color:var(--color-portrait-ink);
  transition:transform .15s ease, border-color .15s ease, background .2s ease, color .2s ease;
}
.btn-ghost svg{ width:16px;height:16px;flex-shrink:0; }
.btn-ghost:hover{ background:var(--color-imt-navy); border-color:var(--color-imt-navy); color:#fff; transform:translateY(-2px); }
.btn-ghost:active{ transform:translateY(0) scale(.97); }

.day-group{margin-bottom:28px}
.day-title{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-slate-helper);margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.day-title::after{content:"";flex:1;height:1px;background:var(--color-ash-divider)}

.card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media (max-width:640px){
  .card-grid{ grid-template-columns:1fr; }
}

.exam-card{
  background:var(--color-white-canvas);
  border:1px solid var(--color-mist-hairline);
  border-radius:var(--radius-cards);
  padding:20px 22px;
  box-shadow:var(--shadow-subtle-2);
  transform-origin:top center;
  animation:cardReveal .55s cubic-bezier(.2,.8,.2,1) backwards;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}   /* no will-change: it made every card its own paint layer, which stutters a phone */
.exam-card:hover{ box-shadow:var(--shadow-subtle-3); }
@keyframes cardReveal{ from{ opacity:0; transform:perspective(1600px) translateY(16px) rotateX(-6deg); } }

.exam-subject{font-weight:700;font-size:16px;color:var(--color-portrait-ink);line-height:1.4;margin-bottom:16px}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.detail{
  background:var(--tint, var(--color-mist-hairline));
  border-radius:12px;
  padding:10px 12px;
}
.detail .k{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--color-slate-helper);margin-bottom:4px;
}
.detail .v{font-size:15px;font-weight:700;color:var(--color-portrait-ink)}

.card-cal-link{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:14px;
  font-size:12.5px; font-weight:600; color:var(--color-nautical-teal);
  text-decoration:none;
}
.card-cal-link svg{ width:13px;height:13px;flex-shrink:0; }
.card-cal-link:hover{ text-decoration:underline; }

.empty{
  text-align:center;padding:48px 20px;color:var(--color-slate-helper);font-size:14.5px;font-weight:400;
}

/* ---------- footer ---------- */
footer{
  max-width:var(--page-max-width);
  margin:56px auto 0;padding:20px 20px 40px;
  border-top:1px solid var(--color-ash-divider);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.disclaimer{
  width:100%; max-width:560px;
  text-align:left;
  background:var(--color-mist-hairline);
  border-radius:16px;
  padding:16px 20px;
}
.disclaimer-label{
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-nautical-teal);
  margin-bottom:8px;
}
.disclaimer-list{ margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px; }
.disclaimer-list li{
  position:relative;padding-left:14px;
  font-size:12px;line-height:1.55;color:var(--color-slate-helper);font-weight:400;
}
.disclaimer-list li::before{
  content:"";position:absolute;left:0;top:7px;
  width:4px;height:4px;border-radius:50%;
  background:var(--color-nautical-teal);
}
.disclaimer-text{ margin:0; font-size:12px;line-height:1.55;color:var(--color-slate-helper);font-weight:400; }
footer .credit{font-size:13px;color:var(--color-slate-helper);font-weight:400}
footer .credit a{color:var(--color-portrait-ink);text-decoration:none;font-weight:600}
footer .credit a:hover{text-decoration:underline}

[hidden]{display:none!important}

@media (prefers-reduced-motion: reduce){
  .site-header,.hero,.search-card,.steps-strip,.exam-card{ animation:none!important; opacity:1!important; transform:none!important; }
  .btn-rainbow:hover,.btn-contact:hover,.btn-ghost:hover,.exam-card:hover{ transform:none!important; }
  .exam-card{ transition:none!important; }
}

@media (max-width:480px){
  .detail-grid{grid-template-columns:repeat(2,1fr)}
  .search-card{ padding:18px; }
  .search-row{flex-direction:column; gap:8px;}
  #roll{ padding:11px 16px; }
  .btn-rainbow{ padding:11px 20px; font-size:14px; }
  .actions{flex-wrap:nowrap}
  .btn-rainbow,.btn-ghost{flex:1;text-align:center;padding-left:14px;padding-right:14px}
  .wrap{padding-block:36px 0}
  .brand-name{ font-size:12.5px; }
  .brand-icon{ width:24px; height:26px; }
  .btn-contact{ padding:9px 14px; font-size:12.5px; }
}

/* ============ PRINT: plain, one page, roll number + info only ============ */
@media print{
  @page{ size:auto; margin:10mm 14mm; }
  html,body{ background:#fff!important; }
  html,body,.wrap{ perspective:none!important; }
  .site-header,.hero-glow,.search-card,.steps-strip,.actions,.eyebrow,footer .disclaimer,.count-badge,.card-cal-link{ display:none!important; }
  body *{ animation:none!important; transform:none!important; box-shadow:none!important; opacity:1!important; }
  .wrap{ max-width:100%; padding:0; }
  h1{ display:none; }
  .ticket-head{ display:block; margin-bottom:10px; border-bottom:1.5px solid #000; padding-bottom:8px; }
  .ticket-head .roll-lbl{ font-size:10px; color:#000; }
  .ticket-head .roll-val{ font-size:18px; color:#000; }
  .ticket-head .roll-roster{ font-size:10.5px; color:#333; }
  .day-group{ margin-bottom:8px; }
  .day-title{ font-size:10.5px; color:#000; margin-bottom:4px; }
  .day-title::after{ display:none; }
  .card-grid{ display:block!important; }
  .exam-card{
    border:0; border-bottom:1px solid #ccc; border-radius:0;
    padding:6px 0; margin-bottom:0;
    page-break-inside:avoid; break-inside:avoid;
  }
  .exam-subject{ font-size:12.5px; margin-bottom:4px; color:#000; }
  .detail-grid{ display:flex; gap:18px; }
  .detail{ background:none!important; padding:0; }
  .detail .k{ color:#555; font-size:8.5px; }
  .detail .v{ color:#000; font-size:11.5px; }
  footer{ margin-top:14px; padding-top:8px; border-color:#ccc; }
  footer .credit{ font-size:10px; color:#555; }
  footer .credit a{ color:#000; }
}

/* ============ portal + weekly additions ============ */
a.btn-ghost{ text-decoration:none; }

/* ---------- greeting card (portal) ---------- */
.greet-card,.notice-card{
  max-width:640px;
  margin:40px auto 0;
  background:var(--color-white-canvas);
  border:1px solid var(--color-mist-hairline);
  border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle-2);
  padding:28px 24px 24px;
  text-align:center;
  animation:cardReveal .55s cubic-bezier(.2,.8,.2,1) backwards;
}
.greet-roll{
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-slate-helper);margin-bottom:8px;
}
.greet-name,.notice-title{
  font-size:clamp(24px,5vw,34px);font-weight:700;letter-spacing:-.01em;line-height:1.2;
  color:var(--color-portrait-ink);overflow-wrap:anywhere;
}
.greet-meta{
  display:inline-block;margin-top:12px;
  font-size:12.5px;font-weight:600;color:var(--color-nautical-teal);
  background:var(--color-sky-wash);
  padding:6px 14px;border-radius:var(--radius-cards);line-height:1.5;
}
.greet-note,.notice-text{
  margin:14px auto 0;max-width:460px;
  font-size:13.5px;line-height:1.55;color:var(--color-slate-helper);
}
.notice-card .btn-ghost{ margin-top:20px; }

.tool-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin-top:24px;text-align:left;
}
@media (max-width:560px){ .tool-grid{ grid-template-columns:1fr; } }
.tool-btn{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-radius:20px;
  background:var(--color-imt-navy);color:#fff;text-decoration:none;
  box-shadow:var(--shadow-subtle-2);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, filter .15s ease;
}
.tool-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); filter:brightness(1.12); }
.tool-btn:active{ transform:translateY(0) scale(.98); }
.tool-btn:focus-visible,.btn-ghost:focus-visible,.btn-rainbow:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.tool-icon{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.tool-icon svg{ width:20px;height:20px; }
.tool-text{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.tool-title{ font-family:var(--font-basier-circle);font-weight:700;font-size:16px; }
.tool-sub{ font-size:12.5px;line-height:1.4;opacity:.85; }
.tool-btn .icon-locked{ display:none; }
.tool-btn.is-locked{
  background:var(--color-mist-hairline);color:var(--color-slate-helper);
  box-shadow:none;cursor:not-allowed;filter:none;transform:none;
}
.tool-btn.is-locked .tool-icon{ background:var(--color-ash-divider); }
.tool-btn.is-locked .tool-title{ color:var(--color-graphite-body); }
.tool-btn.is-locked .tool-sub{ opacity:1; }
.tool-btn.is-locked .icon-open{ display:none; }
.tool-btn.is-locked .icon-locked{ display:block; }
.greet-clear{ margin-top:18px;font-size:13px;padding:9px 18px; }

/* ---------- weekly ---------- */
.today-badge,.clash-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-tags);white-space:nowrap;
}
.today-badge{ background:var(--color-imt-navy);color:#fff; }
.clash-badge{
  display:inline-block;margin-left:8px;vertical-align:middle;
  background:color-mix(in srgb, var(--color-danger) 12%, transparent);color:var(--color-danger);
}
.day-note{
  background:var(--color-peach-wash);color:var(--color-portrait-ink);
  border-radius:16px;padding:14px 18px;margin-bottom:12px;
  font-size:14.5px;font-weight:600;
}
.day-free{ font-size:13.5px;color:var(--color-slate-helper);padding:2px 0 4px; }

@media (prefers-reduced-motion: reduce){
  .greet-card,.notice-card{ animation:none!important; }
  .tool-btn:hover{ transform:none!important; }
}
@media print{
  .today-badge,.clash-badge{ display:none!important; }
}

/* narrowest phones: keep the full brand name visible next to Feedback */
@media (max-width:360px){
  .site-header{ padding:0 12px; }
  .header-inner{ padding:7px 8px 7px 10px; gap:8px; }
  .brand{ gap:7px; }
  .brand-name{ font-size:11px; letter-spacing:.01em; }
  .btn-contact{ padding:9px 11px; font-size:12px; gap:5px; }
}

/* the cursive accent word is always capitals, whatever the markup says */
.cursive-accent{ text-transform:uppercase; }


/* ---------- portal hero spacing ----------
   The portal's hero is only a heading and the search card, so it gets more
   room above, between and below than the tool pages do. */
.portal .wrap{ padding-block:clamp(72px, 12vh, 132px) 0; }
.portal .search-card,
.portal .greet-card{ margin-top:clamp(44px, 7vh, 72px); }
.portal .steps-strip{ margin-top:clamp(32px, 5vh, 48px); }
.portal footer{ margin-top:clamp(64px, 12vh, 128px); }
.portal .hero-glow{ top:clamp(72px, 10vh, 120px); height:min(600px, 80vw); }
@media (max-width:480px){
  .portal .wrap{ padding-block:clamp(52px, 9vh, 84px) 0; }
  .portal .search-card,
  .portal .greet-card{ margin-top:clamp(36px, 6vh, 52px); }
}

/* ---------- live pill (portal hero) ---------- */
.live-pill{ gap:8px; }
.live-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:#17a35b; box-shadow:0 0 0 0 rgba(23,163,91,.5);
  animation:livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(23,163,91,.5); }
  100%{ box-shadow:0 0 0 9px rgba(23,163,91,0); }
}

/* ---------- weekly: banner, group sessions ---------- */
.view-banner{
  background:var(--color-peach-wash); color:var(--color-portrait-ink);
  border-radius:16px; padding:12px 16px; margin-bottom:22px;
  font-size:13.5px; line-height:1.5; font-weight:500;
}
.group-card{
  background:var(--color-white-canvas);
  border:1px solid var(--color-mist-hairline);
  border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle-2);
  padding:16px 20px; margin-top:14px;
}
.group-head{ font-weight:700; font-size:15px; color:var(--color-portrait-ink); margin-bottom:8px; }
.group-head span{ font-weight:500; font-size:12.5px; color:var(--color-slate-helper); }
.group-list{ list-style:none; margin:0; padding:0; }
.group-list li{
  display:grid; grid-template-columns:5.5em 1fr 1fr 1fr 28px; gap:8px; align-items:center;
  padding:8px 0; border-top:1px solid var(--color-mist-hairline);
  font-size:13px; color:var(--color-graphite-body);
}
.group-list .group-name{ font-weight:700; color:var(--color-portrait-ink); }
.group-list .card-cal-link{ margin:0; justify-self:end; padding:6px; }
.group-list .card-cal-link svg{ width:15px; height:15px; }
@media (max-width:560px){
  .group-list li{ grid-template-columns:5em 1fr 28px; row-gap:2px; }
  .group-list li span:nth-child(3), .group-list li span:nth-child(4){ grid-column:2; font-size:12px; color:var(--color-slate-helper); }
  .group-list .card-cal-link{ grid-column:3; grid-row:1 / span 3; }
}
#otherWeekBtn{ font-size:13px; }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none!important; } }
@media print{ .view-banner, .live-pill, #otherWeekBtn{ display:none!important; } }

/* tag on a class only some students take */
.elective-badge{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--radius-tags); white-space:nowrap;
  background:var(--color-sky-wash); color:var(--color-nautical-teal);
}
@media print{ .elective-badge{ display:none!important; } }

/* links inside a footer note */
.disclaimer-text a{ color:var(--color-nautical-teal); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.disclaimer-text a:hover{ color:var(--color-accent); }

/* ---------- footer disclaimer: one box, wider on desktop ----------
   The note and the bullet points stack on phones and sit side by side on
   wide screens. */
.disclaimer{ max-width:860px; padding:20px 24px; }
.disclaimer-body{ display:grid; gap:12px; }
@media (min-width:860px){
  .disclaimer{ padding:24px 32px; }
  .disclaimer-body{ grid-template-columns:1.25fr 1fr; gap:36px; align-items:start; }
  .disclaimer-text, .disclaimer-list li{ font-size:12.5px; line-height:1.6; }
}

/* ---------- today first ----------
   Today's group leads the list; days already gone follow under a divider. */
.day-group.is-today .day-title{ color:var(--color-accent); }
.earlier-divider{
  margin:36px 0 20px; padding-top:20px;
  border-top:1px dashed var(--color-ash-divider);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-slate-helper);
}
@media print{ .earlier-divider{ display:none!important; } }

/* the pill when a week has begun and its schedule isn't in yet */
.live-pill.is-stale{
  background:color-mix(in srgb, var(--color-danger) 11%, var(--color-white-canvas));
  color:var(--color-danger);
}
.live-pill.is-stale .live-dot{ background:var(--color-danger); animation:none; box-shadow:none; }


/* ---------- upload page ---------- */
.up-input{
  flex:1; min-width:0; font:inherit; font-size:16px; font-weight:500;
  padding:14px 18px; border-radius:var(--radius-tags);
  border:1.5px solid var(--color-mist-hairline);
  background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.up-input:focus{ outline:none; border-color:var(--color-portrait-ink); }
.up-remember{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:var(--color-slate-helper); cursor:pointer; }
.up-remember input{ width:16px; height:16px; accent-color:var(--color-accent); }
.up-drop{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:30px 18px; border-radius:18px; cursor:pointer;
  border:1.5px dashed var(--color-ash-divider); background:var(--color-drop);
  transition:border-color .2s ease, background .2s ease;
}
.up-drop svg{ width:30px; height:30px; color:var(--color-accent); margin-bottom:4px; }
.up-drop:hover,.up-drop:focus-visible,.up-drop.is-over{ border-color:var(--color-accent); background:var(--color-sky-wash); outline:none; }
.up-drop.is-busy{ opacity:.55; pointer-events:none; }
.up-drop-title{ font-weight:700; font-size:16px; color:var(--color-portrait-ink); }
.up-drop-sub{ font-size:13px; line-height:1.5; color:var(--color-slate-helper); max-width:420px; }
.up-files{ list-style:none; margin:16px 0 0; padding:0; }
.up-files li{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-top:1px solid var(--color-mist-hairline); font-size:13.5px;
}
.up-file-name{ flex:1; min-width:0; overflow-wrap:anywhere; font-weight:600; color:var(--color-portrait-ink); }
.up-file-size{ color:var(--color-slate-helper); white-space:nowrap; font-size:12.5px; }
.up-file-remove{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--color-danger);
  background:none; border:none; cursor:pointer; padding:8px 4px; min-height:36px;
}
.up-file-remove:hover{ text-decoration:underline; }
.up-actions{ margin:18px 0 0; }
.btn-rainbow:disabled{ opacity:.45; cursor:not-allowed; transform:none!important; filter:none!important; }
.up-status{ text-align:left; }
.up-status .notice-title{ font-size:clamp(20px,4vw,26px); }
.up-status .notice-text{ margin-left:0; max-width:none; }
.up-report{ list-style:none; margin:16px 0 0; padding:0; }
.up-report li{
  padding:10px 14px; border-radius:12px; margin-top:8px;
  font-size:13px; line-height:1.5; overflow-wrap:anywhere;
}
.up-report li strong{ display:block; }
.up-report .is-ok{ background:var(--color-mint-wash); color:var(--color-ok-ink); }
.up-report .is-bad{ background:color-mix(in srgb, var(--color-danger) 10%, var(--color-white-canvas)); color:var(--color-bad-ink); }
.up-report .is-note{ background:var(--color-mist-hairline); color:var(--color-graphite-body); }
button.btn-contact{ font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; }

/* ---------- header: round icon buttons ---------- */
.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-icon{
  width:40px; height:40px; flex-shrink:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--color-accent); color:var(--color-accent); background:var(--color-white-canvas);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
}
.btn-icon svg{ width:18px; height:18px; }
.btn-icon:hover{ background:var(--color-imt-navy); color:#fff; transform:translateY(-2px); }
.btn-icon:active{ transform:translateY(0) scale(.95); }
.btn-icon:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
@media (max-width:480px){ .btn-icon{ width:38px; height:38px; } .header-actions{ gap:6px; } }
@media (max-width:360px){ .btn-icon{ width:36px; height:36px; } .btn-icon svg{ width:16px; height:16px; } }
@media (prefers-reduced-motion: reduce){ .btn-icon:hover{ transform:none!important; } }
@media print{ .header-actions{ display:none!important; } }

/* narrowest phones: Feedback becomes an icon too, so the brand name still fits */
@media (max-width:360px){
  .header-actions .btn-contact{
    width:36px; height:36px; padding:0; gap:0; font-size:0;
    justify-content:center; border-radius:50%;
  }
  .header-actions .btn-contact svg{ width:16px; height:16px; }
}

/* ---------- compact class rows (Weekly and Exam Seat) ----------
   Time on the left, what and where in the middle, calendar button on the
   right. About a third the height of the old four-box card. */
.exam-card.cls-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:10px 12px 10px 10px; border-radius:18px;
}
.cls-time{
  width:78px; padding:9px 4px; border-radius:12px; text-align:center;
  background:var(--tint, var(--color-mist-hairline));
  display:flex; flex-direction:column; gap:1px;
}
.cls-start{ font-weight:700; font-size:14px; color:var(--color-portrait-ink); white-space:nowrap; }
.cls-end{ font-size:11px; color:var(--color-slate-helper); white-space:nowrap; }
.cls-main{ min-width:0; }
.cls-card .exam-subject{ font-size:14.5px; line-height:1.3; margin:0 0 4px; }
.cls-meta{ display:flex; flex-wrap:wrap; gap:1px 12px; font-size:12.5px; color:var(--color-graphite-body); }
.cls-meta b{ font-weight:500; color:var(--color-slate-helper); }
.card-cal-link.cls-cal{
  width:44px; height:44px; margin:0; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-imt-navy); color:#fff;
  box-shadow:var(--shadow-subtle-2);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), filter .15s ease;
}
.card-cal-link.cls-cal svg{ width:21px; height:21px; }
.card-cal-link.cls-cal:hover{ text-decoration:none; filter:brightness(1.15); transform:translateY(-2px); }
.card-cal-link.cls-cal:active{ transform:scale(.94); }
.card-cal-link.cls-cal:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.card-grid{ gap:10px; }
.day-group{ margin-bottom:22px; }
.day-title{ margin-bottom:10px; }

/* the one line that says what the button does */
.cal-hint{
  display:flex; align-items:center; gap:8px; margin:-10px 0 20px;
  font-size:12.5px; color:var(--color-slate-helper);
}
.cal-hint-icon{
  width:22px; height:22px; flex-shrink:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-imt-navy); color:#fff;
}
.cal-hint-icon svg{ width:12px; height:12px; }

/* group sessions list uses the same button, smaller */
.group-list .card-cal-link.cls-cal{ width:34px; height:34px; padding:0; box-shadow:none; }
.group-list .card-cal-link.cls-cal svg{ width:16px; height:16px; }
.group-list li{ grid-template-columns:5.5em 1fr 1fr 1fr 34px; }
@media (max-width:560px){ .group-list li{ grid-template-columns:5em 1fr 34px; } }

/* tool pages: a smaller heading, so the schedule starts higher on a phone */
.tool h1{ font-size:clamp(26px, 5.4vw, 52px); }
.tool .eyebrow{ margin-bottom:14px; }
.tool #results{ margin-top:28px; }
@media (max-width:640px){
  .tool .wrap{ padding-block:22px 0; }
  .tool #results{ margin-top:22px; }
  .tool .actions{ margin-bottom:22px; }
  .tool .ticket-head{ margin-bottom:12px; }
  .tool .ticket-head .roll-val{ font-size:21px; }
}
@media (max-width:360px){
  .exam-card.cls-card{ gap:9px; padding:9px 9px 9px 8px; }
  .cls-time{ width:68px; }
  .cls-start{ font-size:13px; }
  .card-cal-link.cls-cal{ width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){ .card-cal-link.cls-cal:hover{ transform:none!important; } }
@media print{ .cal-hint{ display:none!important; } }

/* ---------- campus occasions at the top of a day (Weekly) ---------- */
.event-banner{
  display:flex; align-items:center; gap:14px;
  border-radius:18px; padding:12px 16px; margin-bottom:12px;
  background:linear-gradient(120deg, #0f6b45 0%, #17875a 55%, #2aa36f 100%);
  color:#fff; box-shadow:var(--shadow-subtle-2);
  position:relative; overflow:hidden;
}
.event-onam::after{
  /* a soft gold wash on the right, like lamp light */
  content:""; position:absolute; inset:0 0 0 55%;
  background:radial-gradient(120px 80px at 100% 50%, rgba(247,201,72,.35), transparent 70%);
  pointer-events:none;
}
.event-motif{ width:56px; height:56px; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.event-text{ min-width:0; position:relative; z-index:1; }
.event-title{ font-family:var(--font-basier-circle); font-weight:700; font-size:18px; letter-spacing:.01em; line-height:1.2; }
.event-note{ font-size:13px; margin-top:2px; opacity:.92; }
.event-onam .event-title{ color:#fff8e1; }
@media (max-width:360px){ .event-motif{ width:46px; height:46px; } .event-title{ font-size:16px; } }
@media (prefers-reduced-motion: no-preference){
  .event-onam .event-motif{ animation:pookalamTurn 40s linear infinite; }
}
@keyframes pookalamTurn{ to{ transform:rotate(360deg); } }
@media print{ .event-banner{ background:none!important; color:#000!important; border:1px solid #999; } .event-motif{ display:none; } }

/* the arrow on a campus occasion that has a link */
.event-text{ flex:1; }
.event-link{
  position:relative; z-index:1; flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f7c948; color:#0f5a3a; text-decoration:none;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.45);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), filter .15s ease;
}
.event-link svg{ width:21px; height:21px; }
.event-link:hover{ transform:translateX(3px); filter:brightness(1.08); }
.event-link:active{ transform:scale(.94); }
.event-link:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:360px){ .event-link{ width:40px; height:40px; } .event-note{ font-size:12px; } }
@media (prefers-reduced-motion: reduce){ .event-link:hover{ transform:none!important; } }
@media print{ .event-link{ display:none!important; } }

/* Sports Night: night purple on the juniors' side, gold on the seniors',
   a motif at each end and the text centred between them */
.event-sports{
  background:
    radial-gradient(160px 110px at 0% 50%, rgba(142,99,224,.55), transparent 70%),
    radial-gradient(160px 110px at 100% 50%, rgba(214,165,61,.5), transparent 70%),
    linear-gradient(100deg, #1a0f30 0%, #120a1f 50%, #1f1608 100%);
  justify-content:space-between;
}
.event-sports .event-text{ text-align:center; }
.event-sports .event-title{
  text-transform:uppercase; letter-spacing:.09em; font-size:17px;
  background:linear-gradient(90deg, #cdb9ff 0%, #f4ecd8 50%, #f0c869 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.event-sports .event-note{ color:#e9e1f5; letter-spacing:.02em; }
.event-sports .event-motif{ width:50px; height:50px; }
.day-group > :not(.day-title) + .event-banner{ margin-top:12px; }
@media (max-width:480px){ .event-sports .event-title{ font-size:15px; letter-spacing:.06em; } .event-sports{ gap:8px; padding:12px; } }
@media (max-width:360px){ .event-sports .event-motif{ width:40px; height:40px; } .event-sports .event-title{ font-size:15px; letter-spacing:.06em; } }
.event-by{ font-size:11.5px; margin-top:3px; opacity:.75; letter-spacing:.04em; }
.event-sports .event-note{ text-wrap:balance; }
/* the moon rocks and drifts, the sun turns */
@media (prefers-reduced-motion: no-preference){
  .event-sports .motif-moon{ animation:moonDrift 4.5s ease-in-out infinite; }
  .event-sports .motif-sun{ animation:pookalamTurn 16s linear infinite; }
}
@keyframes moonDrift{
  0%, 100%{ transform:translateY(2px) rotate(-10deg); }
  50%{ transform:translateY(-3px) rotate(10deg); }
}

/* ---------- mess menu: a floating button and the card it opens ---------- */
.mess-fab{
  position:fixed; z-index:40;
  right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-imt-navy); color:#fff;
  box-shadow:0 10px 22px -8px rgba(30,57,140,.65), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.mess-fab::after{
  /* the torch gold, as a small ring */
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--color-imt-gold) 70%, transparent); pointer-events:none;
}
.mess-fab svg{ width:25px; height:25px; }
.mess-fab:hover{ transform:translateY(-2px); }
.mess-fab:active{ transform:scale(.94); }
.mess-fab.is-open{ background:var(--color-portrait-ink); }
.mess-fab:focus-visible, .mess-arrow:focus-visible, .mess-close:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }

.mess-panel{
  position:fixed; z-index:39;
  right:max(16px, env(safe-area-inset-right)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 66px);
  width:min(372px, calc(100vw - 32px)); max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--color-white-canvas); border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle-3), 0 24px 48px -16px rgba(8,48,76,.28);
  padding:14px 14px 12px; font-family:var(--font-switzer); color:var(--color-graphite-body);
  animation:messIn .18s cubic-bezier(.2,.8,.2,1);
}
.mess-panel[hidden]{ display:none; }
@keyframes messIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.mess-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mess-title{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.mess-kicker{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-slate-helper); }
.mess-date{ font-family:var(--font-basier-circle); font-weight:700; font-size:15.5px; color:var(--color-portrait-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.mess-arrow, .mess-close{
  width:36px; height:36px; flex-shrink:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--color-accent); background:var(--color-white-canvas); color:var(--color-accent);
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.mess-arrow svg, .mess-close svg{ width:17px; height:17px; }
.mess-arrow:hover:not([disabled]){ background:var(--color-imt-navy); color:#fff; }
.mess-arrow[disabled]{ border-color:var(--color-ash-divider); color:var(--color-ash-divider); cursor:default; }
.mess-close{ border-color:transparent; color:var(--color-slate-helper); margin-left:-2px; }
.mess-close:hover{ background:var(--color-mist-hairline); color:var(--color-portrait-ink); }
.mess-row{ display:flex; gap:12px; align-items:flex-start; padding:9px 4px; border-top:1px solid var(--color-mist-hairline); }
.mess-row:first-child{ border-top:0; }
.mess-row .cls-time{ flex-shrink:0; }
.mess-main{ min-width:0; padding-top:1px; }
.mess-meal{ font-family:var(--font-basier-circle); font-weight:700; font-size:14.5px; color:var(--color-portrait-ink); display:flex; align-items:center; gap:8px; }
.mess-tag{ font-family:var(--font-switzer); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-tags); background:var(--color-imt-gold); color:#3a2a00; }
.mess-items{ font-size:13px; line-height:1.45; margin-top:2px; }
.mess-row.is-next .mess-items{ color:var(--color-portrait-ink); }
.mess-empty{ font-size:13.5px; color:var(--color-slate-helper); text-align:center; padding:22px 8px; margin:0; }
.mess-note{ font-size:11.5px; color:var(--color-slate-helper); margin:8px 4px 0; padding-top:8px; border-top:1px solid var(--color-mist-hairline); }
@media (max-width:480px){
  .mess-fab{ width:50px; height:50px; }
  .mess-fab svg{ width:23px; height:23px; }
  .mess-panel{ bottom:calc(max(16px, env(safe-area-inset-bottom)) + 62px); padding:12px 12px 10px; }
  .mess-row{ gap:10px; }
}
/* the small pop-up beside the button: what is on now or next */
.mess-hint{
  position:fixed; z-index:39; cursor:pointer;
  right:calc(max(16px, env(safe-area-inset-right)) + 64px); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 5px);
  max-width:min(230px, calc(100vw - 110px));
  background:var(--color-white-canvas); border-radius:16px; padding:7px 13px 8px;
  box-shadow:var(--shadow-subtle-3), 0 12px 24px -12px rgba(8,48,76,.3);
  font-family:var(--font-switzer); display:flex; flex-direction:column; line-height:1.3;
  opacity:0; transform:translateX(8px) scale(.96); transform-origin:right center; pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.mess-hint.is-on{ opacity:1; transform:none; pointer-events:auto; }
.mess-hint b{ font-family:var(--font-basier-circle); font-size:13px; font-weight:700; color:var(--color-portrait-ink); white-space:nowrap; }
.mess-hint span{ font-size:11.5px; color:var(--color-slate-helper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mess-hint::after{
  content:""; position:absolute; right:-5px; top:50%; width:11px; height:11px; margin-top:-5.5px;
  background:var(--color-white-canvas); transform:rotate(45deg); border-radius:2px;
}
@media (max-width:480px){ .mess-hint{ right:calc(max(16px, env(safe-area-inset-right)) + 60px); } }
@media (prefers-reduced-motion: reduce){ .mess-hint{ transition:none; } }
@media print{ .mess-hint{ display:none!important; } }
/* room at the foot of the page so the button never sits on the last line */
body.portal footer, body.tool footer{ padding-bottom:84px; }
@media (prefers-reduced-motion: reduce){ .mess-panel{ animation:none; } .mess-fab:hover{ transform:none; } }
@media print{ .mess-fab, .mess-panel{ display:none!important; } }

/* ---------- the nav bar: links with icon and text; a menu on phones ---------- */
.nav-link{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:600 13.5px var(--font-switzer); white-space:nowrap; text-decoration:none;
  padding:9px 16px; border-radius:var(--radius-buttons);
  border:1.5px solid var(--color-accent); color:var(--color-accent); background:var(--color-white-canvas);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
}
.nav-link svg{ width:16px; height:16px; flex-shrink:0; }
.nav-link:hover{ background:var(--color-imt-navy); color:#fff; transform:translateY(-2px); }
.nav-link:active{ transform:translateY(0) scale(.97); }
.nav-link.nav-install{ background:var(--color-imt-navy); color:#fff; }
.nav-link.nav-install:hover{ background:var(--color-portrait-ink); border-color:var(--color-portrait-ink); }
.nav-link:focus-visible, .nav-toggle:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.nav-toggle{
  display:none; width:40px; height:40px; flex-shrink:0; border-radius:50%; cursor:pointer;
  align-items:center; justify-content:center;
  border:1.5px solid var(--color-accent); color:var(--color-accent); background:var(--color-white-canvas);
  transition:background .2s ease, color .2s ease;
}
.nav-toggle svg{ width:19px; height:19px; }
.nav-toggle[aria-expanded="true"]{ background:var(--color-imt-navy); color:#fff; }
@media (max-width:720px){
  .site-header{ perspective:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:20px; z-index:31;
    flex-direction:column; align-items:stretch; gap:2px; min-width:236px; max-width:calc(100vw - 40px);
    padding:8px; background:var(--color-white-canvas); border-radius:20px;
    box-shadow:var(--shadow-subtle-3), 0 20px 40px -16px rgba(8,48,76,.3);
  }
  .nav-menu.is-open{ display:flex; animation:messIn .16s cubic-bezier(.2,.8,.2,1); }
  .nav-menu .nav-link{
    border:0; border-radius:14px; padding:13px 14px; gap:12px; font-size:14.5px; text-align:left;
    color:var(--color-portrait-ink); background:transparent; white-space:normal; transform:none;
  }
  .nav-menu .nav-link svg{ width:19px; height:19px; color:var(--color-accent); }
  .nav-menu .nav-link:hover{ background:var(--color-sky-wash); color:var(--color-portrait-ink); transform:none; }
  .nav-menu .nav-link.nav-install{ background:var(--color-imt-navy); color:#fff; margin-top:4px; }
  .nav-menu .nav-link.nav-install svg{ color:#fff; }
  .nav-menu .nav-link.nav-install.is-hint{ background:var(--color-sky-wash); color:var(--color-portrait-ink); font-size:13px; }
  .nav-menu .nav-link.nav-install.is-hint svg{ color:var(--color-accent); }
}
@media (max-width:360px){ .nav-menu{ right:12px; } .nav-toggle{ width:38px; height:38px; } }
@media (prefers-reduced-motion: reduce){ .nav-link:hover{ transform:none!important; } .nav-menu.is-open{ animation:none; } }
@media print{ .nav-toggle, .nav-menu{ display:none!important; } }

/* ---------- who this page is for: one card at the top of Weekly and Exam Seat ---------- */
.ticket-head.id-card{
  display:block; position:relative; overflow:hidden;
  background:var(--color-white-canvas); border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle-2); padding:20px 22px 18px 26px; margin-bottom:24px;
}
.ticket-head.id-card::before{
  /* the torch gold running into the wordmark navy, down the left edge */
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, var(--color-imt-gold), var(--color-imt-navy));
}
.id-card .roll-lbl{ font-size:11.5px; letter-spacing:.07em; }
.id-card .roll-val{ font-size:26px; line-height:1.2; margin-top:3px; }
.id-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.id-chip{
  font-size:12.5px; font-weight:600; white-space:nowrap; padding:5px 12px; border-radius:var(--radius-tags);
  background:var(--color-sky-wash); color:var(--color-nautical-teal);
}
.id-chip-roll{ background:var(--color-imt-navy); color:#fff; letter-spacing:.02em; }
.id-chip-count{ background:var(--color-peach-wash); color:var(--color-portrait-ink); }
.id-card .actions{ margin:16px 0 0; padding-top:16px; border-top:1px solid var(--color-mist-hairline); }
.id-card .cal-hint{ margin:12px 0 0; }
@media (max-width:640px){
  .tool .ticket-head.id-card{ padding:16px 16px 14px 20px; margin-bottom:20px; }
  .tool .id-card .roll-val{ font-size:22px; }
  .id-chip{ font-size:12px; padding:4px 10px; }
  .tool .id-card .actions{ margin:14px 0 0; padding-top:14px; }
}
@media print{
  .ticket-head.id-card{ box-shadow:none!important; border-radius:0; padding:0 0 8px; overflow:visible; }
  .ticket-head.id-card::before{ display:none; }
  .id-chip{ background:none!important; color:#000!important; padding:0 8px 0 0; }
  .id-card .cal-hint{ display:none!important; }
}

/* "Install as an app" in the greeting card, beside "Not you?" */
.greet-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; }
.greet-actions .greet-clear{ margin-top:0; }
.greet-install{ font-size:13px; padding:9px 18px; border-color:color-mix(in srgb, var(--color-accent) 40%, transparent); color:var(--color-accent); }
.greet-install.is-hint{ font-size:12.5px; background:var(--color-sky-wash); border-color:transparent; }
@media (max-width:480px){ .greet-actions{ flex-direction:column; align-items:center; } .greet-actions .btn-ghost{ white-space:nowrap; } }
@media print{ .greet-actions{ display:none!important; } }

/* ---------- RESET 2026 (HAWC): the poster's paper beige, deep teal and orange ---------- */
.event-where{ display:flex; align-items:center; gap:4px; font-size:12px; margin-top:3px; opacity:.9; }
.event-where svg{ width:13px; height:13px; flex-shrink:0; }
.event-time{
  position:relative; z-index:1; flex-shrink:0; white-space:nowrap;
  font:700 12px var(--font-switzer); letter-spacing:.03em; padding:6px 11px; border-radius:var(--radius-tags);
  background:rgba(255,255,255,.2); color:inherit;
}
.event-reset{
  color:#0f4b45;
  background:
    linear-gradient(90deg, #0f4b45 0 6px, transparent 6px),
    radial-gradient(140px 90px at 100% 0%, rgba(15,75,69,.16), transparent 70%),
    radial-gradient(120px 80px at 0% 100%, rgba(232,146,28,.18), transparent 70%),
    #f3ead8;
  box-shadow:var(--shadow-subtle-2), inset 0 0 0 1px rgba(15,75,69,.14);
  padding-left:20px;
}
/* the words run along the banner instead of stacking: title and "HAWC · Day n"
   together, then the activity, then time and place. On a laptop that is one
   line across the full width; on a phone it folds to two or three. */
.event-reset .event-text{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:3px; }
.event-reset .event-title{
  order:1; font-size:21px; font-weight:800; letter-spacing:.04em; line-height:1.1; color:#0f4b45; text-transform:uppercase; white-space:nowrap;
}
.event-reset .event-title b{ color:#e8921c; font-style:italic; font-weight:800; margin-left:2px; display:inline-block; transform:rotate(-4deg); }
.event-reset .event-by{
  order:2; margin:0; opacity:1; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--radius-tags); background:#0f4b45; color:#f3ead8;
}
.event-reset .event-note{ order:3; flex-basis:100%; font-weight:700; font-size:13.5px; margin:0; opacity:1; color:#0f4b45; }
.event-reset .event-where{ order:4; margin:0; color:#3d3d3d; }
@media (min-width:860px){
  .event-reset{ padding-top:14px; padding-bottom:14px; }
  .event-reset .event-text{ flex-wrap:nowrap; column-gap:16px; }
  .event-reset .event-note{ flex-basis:auto; flex:1; font-size:15px; padding-left:16px; border-left:1.5px solid rgba(15,75,69,.25); }
  .event-reset .event-where{ font-size:13px; white-space:nowrap; padding:6px 12px; border-radius:var(--radius-tags); background:rgba(15,75,69,.09); color:#0f4b45; }
}
.event-reset .event-time{ background:#0f4b45; color:#f3ead8; }
.event-reset .event-motif{ width:52px; height:52px; filter:none; }
@media (prefers-reduced-motion: no-preference){
  .event-reset .motif-reset{ animation:resetBob 3.2s ease-in-out infinite; }
}
@keyframes resetBob{ 0%, 100%{ transform:translateY(1.5px) rotate(-4deg); } 50%{ transform:translateY(-2.5px) rotate(4deg); } }
@media (max-width:480px){
  .event-reset{ gap:10px; padding:12px 12px 12px 18px; }
  .event-reset .event-motif{ width:44px; height:44px; }
  .event-reset .event-title{ font-size:18px; }
  .event-reset .event-time{ font-size:11px; padding:5px 9px; }
}
.event-reset .event-link{ background:#e8921c; color:#12302c; }
.event-reset .event-link:focus-visible{ outline-color:#0f4b45; }
.event-reset .event-where{ font-weight:600; }
@media (max-width:480px){
  .event-reset .event-text{ column-gap:7px; }
  .event-reset .event-title{ font-size:17px; letter-spacing:.02em; }
  .event-reset .event-by{ font-size:9.5px; letter-spacing:.05em; padding:2px 7px; }
  .event-reset .event-link{ width:40px; height:40px; }
  .event-reset .event-motif{ width:40px; height:40px; }
}
@media (max-width:360px){ .event-reset .event-title{ font-size:15.5px; } .event-reset .event-motif{ width:34px; height:34px; } }

/* ---------- the small "Get the app" pop-up on Weekly, bottom left, clear of the mess button ---------- */
.install-pop{
  position:fixed; z-index:38;
  left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  width:min(330px, calc(100vw - 32px - 62px));
  display:flex; align-items:center; gap:10px; padding:9px 8px 9px 10px;
  background:var(--color-white-canvas); border-radius:18px;
  box-shadow:var(--shadow-subtle-3), 0 16px 32px -14px rgba(8,48,76,.32);
  font-family:var(--font-switzer);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.install-pop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.install-pop-icon{ width:40px; height:40px; border-radius:10px; flex-shrink:0; border:1px solid var(--color-mist-hairline); }
.install-pop-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.install-pop-text b{ font-family:var(--font-basier-circle); font-size:13.5px; font-weight:700; color:var(--color-portrait-ink); }
.install-pop-text span{ font-size:11.5px; color:var(--color-slate-helper); }
.install-pop-go{
  flex-shrink:0; cursor:pointer; border:0; border-radius:var(--radius-buttons);
  background:var(--color-imt-navy); color:#fff; font:700 12.5px var(--font-switzer); padding:8px 14px;
  transition:transform .15s ease, filter .15s ease;
}
.install-pop-go:hover{ filter:brightness(1.12); }
.install-pop-go:active{ transform:scale(.95); }
.install-pop-close{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--color-slate-helper);
}
.install-pop-close svg{ width:14px; height:14px; }
.install-pop-close:hover{ background:var(--color-mist-hairline); color:var(--color-portrait-ink); }
.install-pop-go:focus-visible, .install-pop-close:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .install-pop{ transition:none; } }
@media print{ .install-pop{ display:none!important; } }

/* ---------- clean edges for everything that floats over the page ---------- */
/* 1. Above the nav bar: once the page has scrolled, a white fade behind the
      bar hides whatever is passing under it (no more strip of content showing
      above the bar). */
.site-header::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; width:100vw; transform:translateX(-50%);
  top:-14px; height:calc(100% + 14px + 22px);
  background:linear-gradient(180deg, var(--color-page) 0%, var(--color-page) 62%, color-mix(in srgb, var(--color-page) 0%, transparent) 100%);
  opacity:0; transition:opacity .25s ease;
}
.site-header.is-scrolled::before{ opacity:1; }

/* 2. Along the foot of the screen, on phones: rows fade out before they reach
      the mess button, its bubble and the install pop-up. */
.bottom-fade{ display:none; }
@media (max-width:720px){
  .bottom-fade{
    display:block; position:fixed; z-index:36; left:0; right:0; bottom:0; pointer-events:none;
    height:calc(104px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, color-mix(in srgb, var(--color-page) 0%, transparent) 0%, color-mix(in srgb, var(--color-page) 86%, transparent) 52%, var(--color-page) 100%);
  }
}

/* 3. While the phone menu or the mess menu card is open, the page behind steps back. */
.wrap, footer, .hero-glow, .mess-fab, .mess-hint, .install-pop{ transition:filter .2s ease, opacity .2s ease; }
@media (max-width:720px){
  html.menu-open .wrap, html.menu-open footer, html.menu-open .hero-glow,
  html.mess-open .wrap, html.mess-open footer, html.mess-open .hero-glow{ filter:blur(5px); opacity:.55; pointer-events:none; }
  html.menu-open .mess-fab, html.menu-open .mess-hint, html.menu-open .install-pop,
  html.mess-open .install-pop{ filter:blur(3px); opacity:.5; pointer-events:none; }
  html.mess-open .bottom-fade, html.menu-open .bottom-fade{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .wrap, footer, .hero-glow, .mess-fab, .mess-hint, .install-pop, .site-header::before{ transition:none; } }
@media print{ .bottom-fade, .site-header::before{ display:none!important; } }

/* Weekly's top card: the name on the left, Back to portal at the right end of
   the same line; the calendar hint alone at the foot (no Save as PDF since 13 Oct) */
.id-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.id-who{ min-width:0; }
.id-back{ flex-shrink:0; padding:9px 16px; font-size:13.5px; white-space:nowrap; text-decoration:none; }
.id-card .actions.id-foot{ align-items:center; gap:10px 16px; margin-top:14px; padding-top:12px; }
.id-card .actions.id-foot .btn-ghost{ flex:0 0 auto; padding:9px 18px; font-size:13.5px; }
.id-card .actions.id-foot .cal-hint{ margin:0; flex:1 1 220px; }
/* on a phone there is no room beside the name, so it goes above the week line */
@media (max-width:640px){
  .id-head{ flex-direction:column-reverse; align-items:flex-start; gap:12px; }
  .id-back{ padding:7px 13px 7px 10px; font-size:12.5px; gap:5px; }
  .id-back svg{ width:14px; height:14px; }
}
@media print{ .id-back{ display:none!important; } }

/* ---------- nav: Resources ----------
   On a laptop it is a plain word with a small arrow (not a button like
   Feedback and Install app) that opens a simple drop-down. On a phone there
   is no drop-down: the menu just lists everything. */
.nav-group{ position:relative; }
.nav-link.nav-res{
  border-color:transparent; background:transparent; color:var(--color-portrait-ink);
  padding:9px 8px 9px 10px; gap:5px; font-weight:600; transform:none;
}
.nav-link.nav-res > svg:first-child{ display:none; }
.nav-link.nav-res:hover, .nav-group.is-open > .nav-res{ background:transparent; color:var(--color-accent); transform:none; }
.nav-chev{ width:14px!important; height:14px!important; transition:transform .2s ease; }
.nav-group.is-open .nav-chev{ transform:rotate(180deg); }
.res-menu{
  display:none; position:absolute; top:calc(100% + 12px); left:0; z-index:32; min-width:206px;
  padding:6px; background:var(--color-white-canvas); border-radius:14px;
  box-shadow:var(--shadow-subtle-3), 0 18px 34px -16px rgba(8,48,76,.28);
}
.nav-group.is-open .res-menu{ display:block; animation:messIn .16s cubic-bezier(.2,.8,.2,1); }
.res-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; white-space:nowrap;
  font:600 14px var(--font-switzer); color:var(--color-portrait-ink); text-decoration:none;
}
.res-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--color-accent); }
.res-item:hover{ background:var(--color-sky-wash); }
.res-item:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
@media (max-width:720px){
  .nav-menu .nav-res{ display:none; }
  .nav-group, .res-menu{ display:contents; }
  .nav-menu .res-item{ border-radius:14px; padding:13px 14px; gap:12px; font-size:14.5px; }
  .nav-menu .res-item svg{ width:19px; height:19px; }
}
@media (prefers-reduced-motion: reduce){ .nav-group.is-open .res-menu{ animation:none; } .nav-chev{ transition:none; } }

/* ---------- Bus Schedule page ---------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bus-arrow{ width:.95em; height:.95em; vertical-align:-.12em; margin:0 .32em; }
.bus-head .roll-val{ font-size:22px; }
.bus-nexts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.bus-next{
  position:relative; overflow:hidden; background:var(--color-imt-navy); color:#fff; border-radius:20px; padding:15px 16px 14px;
  box-shadow:0 20px 26px -18px rgba(30,57,140,.75);
}
.bus-next::after{ content:""; position:absolute; right:-56px; top:-66px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(212,165,42,.42), transparent 68%); }
.bus-next > *{ position:relative; z-index:1; }
.bus-next-top{ display:flex; align-items:center; gap:9px; }
.bus-next-ico{ width:30px; height:30px; flex-shrink:0; border-radius:9px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.bus-next-ico svg{ width:17px; height:17px; }
.bus-next-route{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#dbe3fb; white-space:nowrap; }
.bus-next-time{ font-family:var(--font-basier-circle); font-weight:700; font-size:32px; line-height:1.1; margin-top:10px; white-space:nowrap; letter-spacing:-.01em; }
.bus-next-wait{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:#e3e9fb; margin-top:4px; }
.bus-pulse{ width:8px; height:8px; border-radius:50%; background:#8fa3e6; flex-shrink:0; }
.bus-next.is-soon .bus-pulse{ background:#f2c94c; box-shadow:0 0 0 0 rgba(242,201,76,.7); }
.bus-next.is-soon .bus-next-wait{ color:#fff; font-weight:700; }
@media (prefers-reduced-motion: no-preference){
  .bus-next.is-soon .bus-pulse{ animation:busPulse 1.6s ease-out infinite; }
}
@keyframes busPulse{ to{ box-shadow:0 0 0 9px rgba(242,201,76,0); } }

.bus-shifts{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:860px){ .bus-shifts{ grid-template-columns:1fr 1fr; align-items:start; } }
/* stacked (phones): the shift that is running comes first */
@media (max-width:859px){ .bus-card.is-running{ order:-1; } }
.bus-card{ background:var(--color-white-canvas); border-radius:var(--radius-cards); box-shadow:var(--shadow-subtle-2); padding:16px 16px 10px; }
.bus-card-head{ display:flex; align-items:center; gap:12px; margin:0 2px 12px; }
.bus-shift-ico{ width:42px; height:42px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--color-peach-wash); color:var(--color-sun-ink); }
.bus-card.is-night .bus-shift-ico{ background:var(--color-sky-wash); color:var(--color-accent); }
.bus-shift-ico svg{ width:22px; height:22px; }
.bus-shift{ font-size:17px; font-weight:700; color:var(--color-portrait-ink); margin:0; line-height:1.2; }
.bus-span{ margin:2px 0 0; font-size:12.5px; color:var(--color-slate-helper); }
.bus-table{ width:100%; border-collapse:separate; border-spacing:6px 4px; table-layout:fixed; margin:0 -6px; width:calc(100% + 12px); }
.bus-table th{
  text-align:left; font:700 11.5px var(--font-switzer); letter-spacing:.05em; text-transform:uppercase; color:var(--color-nautical-teal);
  padding:9px 12px; background:var(--color-sky-wash); border-radius:10px; white-space:nowrap;
}
.bus-table td{ padding:9px 12px; border-radius:10px; white-space:nowrap; background:var(--color-row); }
.bus-table td:empty{ background:transparent; }
.bus-time{ font-size:15px; font-weight:600; color:var(--color-portrait-ink); font-variant-numeric:tabular-nums; }
.bus-table td.is-gone{ background:transparent; }
.bus-table td.is-gone .bus-time{ color:var(--color-gone); font-weight:500; }
.bus-table td.is-next{ background:var(--color-imt-navy); box-shadow:0 10px 16px -10px rgba(30,57,140,.7); }
.bus-table td.is-next .bus-time{ color:#fff; font-weight:700; }
.bus-tag{
  margin-left:8px; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; vertical-align:1.5px;
  padding:2px 7px; border-radius:var(--radius-tags); background:#f2c94c; color:#3a2a00;
}
@media (max-width:480px){
  .bus-nexts{ gap:10px; }
  .bus-next{ padding:13px 12px 12px; border-radius:18px; }
  .bus-next-ico{ width:26px; height:26px; border-radius:8px; }
  .bus-next-ico svg{ width:15px; height:15px; }
  .bus-next-route{ font-size:11px; letter-spacing:.03em; }
  .bus-next-time{ font-size:25px; margin-top:8px; }
  .bus-next-wait{ font-size:12px; }
  .bus-card{ padding:14px 12px 8px; }
  .bus-table th{ font-size:10.5px; padding:8px 9px; letter-spacing:.03em; }
  .bus-table td{ padding:9px; }
  .bus-time{ font-size:14px; }
  .bus-tag{ margin-left:5px; padding:2px 6px; }
}
@media (max-width:360px){ .bus-next-route{ font-size:10px; } .bus-next-time{ font-size:22px; } .bus-table th{ font-size:9.5px; padding:8px 6px; } }
@media print{
  .bus-next{ background:none!important; color:#000!important; box-shadow:none!important; border:1px solid #999; }
  .bus-table td.is-next{ background:none!important; } .bus-table td.is-next .bus-time, .bus-table td.is-gone .bus-time{ color:#000!important; }
}

/* the floating pieces live on <html>, outside the body's own sideways clip:
   this keeps a moving bubble from ever nudging the page a pixel wider */
html{ overflow-x:clip; }

/* ---------- festival greetings (Mahashtami, Dussehra, ...) ---------- */
.event-festival{ color:#fff; }
.event-festival.is-lotus{
  background:
    radial-gradient(160px 110px at 100% 0%, rgba(247,201,72,.45), transparent 70%),
    linear-gradient(120deg, #6d0f1a 0%, #a3172a 55%, #c8352f 100%);
}
.event-festival.is-bow{
  background:
    radial-gradient(160px 110px at 100% 0%, rgba(255,243,214,.5), transparent 70%),
    linear-gradient(120deg, #c2410c 0%, #ea7a0c 55%, #f59e0b 100%);
}
.event-festival .event-title{ font-size:19px; letter-spacing:.01em; color:#fff8e6; }
.event-festival .event-note{ opacity:.95; }
.event-festival .event-motif{ width:56px; height:56px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
/* Moving parts. Everything below is off for anyone whose device asks for
   reduced motion. */
.event-festival .event-text{ position:relative; z-index:1; }
.fx-sparks{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.fx-spark{
  position:absolute; bottom:-8px; left:calc(8% + var(--i) * 13%);
  width:5px; height:5px; border-radius:50%; background:#ffe9a8; opacity:0;
  box-shadow:0 0 8px 2px rgba(255,226,140,.8);
}
.event-festival.is-bow .fx-spark{ background:#fff3d6; }
.event-festival::before{
  /* a slow sheen sweeping across the banner */
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:35%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg); opacity:0;
}
.event-festival .lp, .event-festival .bw-arrow, .event-festival .bw-string, .event-festival .bw-bow, .event-festival .fx-halo{
  transform-box:fill-box;
}
@media (prefers-reduced-motion: no-preference){
  .event-festival::before{ animation:festSheen 4.5s ease-in-out infinite 1s; }
  .fx-spark{ animation:festSpark 4.2s ease-in infinite; animation-delay:calc(var(--i) * .6s); }
  .event-festival .fx-halo{ transform-origin:center; animation:festHalo 2.8s ease-in-out infinite; }
  /* lotus */
  .event-festival .lp-ol{ transform-origin:right bottom; animation:petalL 3.2s ease-in-out infinite; }
  .event-festival .lp-or{ transform-origin:left bottom; animation:petalR 3.2s ease-in-out infinite; }
  .event-festival .lp-il{ transform-origin:right bottom; animation:petalL 3.2s ease-in-out infinite .15s; }
  .event-festival .lp-ir{ transform-origin:left bottom; animation:petalR 3.2s ease-in-out infinite .15s; }
  .event-festival .lp-c{ transform-origin:center bottom; animation:petalC 3.2s ease-in-out infinite .3s; }
  .event-festival .lp-base{ animation:festBase 3.2s ease-in-out infinite; }
  /* bow */
  .event-festival .bw-arrow{ animation:arrowShot 3.4s cubic-bezier(.5,0,.2,1) infinite; }
  .event-festival .bw-string{ transform-origin:right center; animation:stringPull 3.4s cubic-bezier(.5,0,.2,1) infinite; }
  .event-festival .bw-bow{ transform-origin:left center; animation:bowFlex 3.4s cubic-bezier(.5,0,.2,1) infinite; }
}
@keyframes festSheen{ 0%{ left:-40%; opacity:0; } 15%{ opacity:1; } 55%{ left:120%; opacity:0; } 100%{ left:120%; opacity:0; } }
@keyframes festSpark{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 15%{ opacity:.95; } 100%{ transform:translateY(-95px) translateX(10px) scale(1.1); opacity:0; } }
@keyframes festHalo{ 0%, 100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.07); opacity:1; } }
@keyframes petalL{ 0%, 100%{ transform:rotate(0deg); } 50%{ transform:rotate(-9deg); } }
@keyframes petalR{ 0%, 100%{ transform:rotate(0deg); } 50%{ transform:rotate(9deg); } }
@keyframes petalC{ 0%, 100%{ transform:translateY(0) scaleY(1); } 50%{ transform:translateY(-2px) scaleY(1.06); } }
@keyframes festBase{ 0%, 100%{ opacity:.7; } 50%{ opacity:1; } }
@keyframes arrowShot{
  0%{ transform:translateX(0); opacity:1; }
  35%{ transform:translateX(-7px); opacity:1; }
  45%{ transform:translateX(-7px); opacity:1; }
  60%{ transform:translateX(46px); opacity:0; }
  61%{ transform:translateX(-10px); opacity:0; }
  80%{ transform:translateX(0); opacity:1; }
  100%{ transform:translateX(0); opacity:1; }
}
@keyframes stringPull{ 0%, 100%{ transform:translateX(0); } 35%, 45%{ transform:translateX(-6px); } 50%, 80%{ transform:translateX(0); } }
@keyframes bowFlex{ 0%, 100%{ transform:scaleX(1); } 35%, 45%{ transform:scaleX(1.12); } 52%{ transform:scaleX(.95); } 60%{ transform:scaleX(1); } }
@media (max-width:360px){ .event-festival .event-motif{ width:46px; height:46px; } .event-festival .event-title{ font-size:17px; } }

/* ============ the light / dark switch, left of Resources ============
   Sits between the brand and the menu button: on a laptop that is just left
   of Resources, on a phone it stays in the bar beside the menu button. */
.theme-toggle{
  margin-left:auto; flex-shrink:0; width:40px; height:40px; border-radius:50%; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid transparent; background:transparent; color:var(--color-portrait-ink);
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle:hover{ background:var(--color-sky-wash); color:var(--color-accent); }
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.theme-toggle .th-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .th-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .th-sun{ display:block; }
@media (min-width:721px){ .theme-toggle{ margin-right:2px; } }
@media (max-width:480px){ .theme-toggle{ width:38px; height:38px; } }
@media (max-width:360px){ .theme-toggle{ width:36px; } .theme-toggle svg{ width:17px; height:17px; } }
@media print{ .theme-toggle{ display:none!important; } }

/* ============ dark theme ============
   Only on screens: a printed page or a saved PDF stays light. The same named
   colours as the light theme, with the values changed; the few places that
   needed more than that follow the block. Text and background pairs are
   checked for contrast (WCAG AA) by the dark-mode test, not by eye. */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --color-page:#0c1220;
    --color-white-canvas:#151d2e;
    --color-portrait-ink:#e8edf6;
    --color-graphite-body:#cfd6e3;
    --color-slate-helper:#98a3b8;
    --color-nautical-teal:#a9d6f5;
    --color-mist-hairline:#243049;
    --color-ash-divider:#33405c;
    --color-sky-wash:#1b2a47;
    --color-peach-wash:#3a2c1c;
    --color-mint-wash:#17382a;
    --color-imt-navy:#3556c4;      /* a button's background, white text on it */
    --color-accent:#9db4ff;        /* the same blue as text, a border or an icon */
    --color-danger:#ff8a7a;
    --color-drop:#121a2b;
    --color-row:#1c2539;
    --color-gone:#6d7a96;
    --color-ok-ink:#a7f0c6;
    --color-bad-ink:#ffb4a8;
    --color-sun-ink:#f0b45a;
    --shadow-md: 0 0 0 1px rgba(255,255,255,.05), 0 14px 24px -12px rgba(0,0,0,.7);
    --shadow-subtle-2: 0 0 0 1px rgba(255,255,255,.06), 0 14px 24px -12px rgba(0,0,0,.7);
    --shadow-subtle-3: 0 0 0 1px rgba(255,255,255,.09), 0 20px 30px -12px rgba(0,0,0,.8);
  }
  /* the logo's navy lettering needs a light ground */
  [data-theme="dark"] .brand-icon{ background:#fff; padding:3px 4px; border-radius:9px; box-sizing:content-box; }
  /* where the ink colour was a button's background */
  [data-theme="dark"] .mess-fab.is-open{ background:#2a3b6e; }
  [data-theme="dark"] .nav-link.nav-install:hover{ background:#27418a; border-color:#27418a; }
  /* typed text, and what a browser fills in */
  [data-theme="dark"] input:-webkit-autofill{ -webkit-text-fill-color:var(--color-portrait-ink); box-shadow:0 0 0 40px var(--color-white-canvas) inset; caret-color:var(--color-portrait-ink); }
  /* the RESET poster is paper-coloured: dimmed so it does not glare */
  [data-theme="dark"] .event-reset{ filter:brightness(.9); }
  [data-theme="dark"] .hero-glow{ opacity:.7; }
}

/* ---------- LMS and ERP: one row in Resources ---------- */
.res-pair{ display:flex; gap:6px; }
.res-pair .res-item{ flex:1 1 0; justify-content:center; gap:8px; padding:10px 8px; background:var(--color-sky-wash); }
.res-pair .res-item:hover{ background:var(--color-mist-hairline); }
@media (max-width:720px){
  .nav-menu .res-pair{ gap:6px; margin:2px 0; }
  .nav-menu .res-pair .res-item{ padding:13px 10px; }
}

/* ---------- master timetable (the hidden /master/ page) ----------
   A flat, square-cornered "operations console": hairline borders, underlined
   tabs, a strip of numbers instead of badges, tiles and tables instead of
   capsules. One colour per programme (and per course in a section's week),
   drawn as a hue so the same blocks work in light and dark. Everything else
   uses the site's named colours. */
.master .wrap{ max-width:1200px; }
.master .eyebrow{ border-radius:4px; }
.master .day-note, .master .view-banner{ border-radius:8px; }
.mt-hue{ --blk-bg:hsl(var(--h) 72% 90%); --blk-ink:hsl(var(--h) 62% 17%); --blk-edge:hsl(var(--h) 62% 44%); }
.master{ --mt-green:#0f7a43; --mt-line:#17a35b; }
@media screen{
  [data-theme="dark"] .mt-hue{ --blk-bg:hsl(var(--h) 36% 25%); --blk-ink:hsl(var(--h) 78% 92%); --blk-edge:hsl(var(--h) 62% 62%); }
  [data-theme="dark"] .master{ --mt-green:#5fd39a; --mt-line:#3fbf82; }
}

/* the lock */
.mt-gatecard{ max-width:440px; margin:36px auto 0; padding:22px; background:var(--color-white-canvas); border:1px solid var(--color-mist-hairline); border-radius:12px; box-shadow:var(--shadow-subtle-2); }
.mt-gatecard .up-input, .mt-gatecard .btn-rainbow{ border-radius:8px; }
.mt-gatecard .search-row{ display:flex; gap:10px; }

/* title row and tabs */
.mt-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 20px; }
.mt-kicker{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--color-accent); }
.mt-page-title{ font-size:clamp(26px, 3.4vw, 36px); letter-spacing:-.02em; margin:3px 0 4px; }
.mt-note{ margin:0; font-size:12.5px; color:var(--color-slate-helper); }
.mt-lock{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; cursor:pointer; font:600 13px var(--font-switzer);
  border:1px solid var(--color-ash-divider); border-radius:8px; background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-lock svg{ width:16px; height:16px; }
.mt-lock:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.mt-tabs{ display:flex; gap:2px; overflow-x:auto; margin:0 0 20px; border-bottom:1px solid var(--color-ash-divider); scrollbar-width:none; }
.mt-tabs::-webkit-scrollbar{ display:none; }
/* a sideways swipe on these never turns into the browser's own back / forward gesture */
.mt-tabs, .bd-scroll, .gr-scroll, .mt-table-wrap{ overscroll-behavior-x:contain; }
.mt-tab{
  flex:0 0 auto; margin-bottom:-1px; padding:12px 18px; cursor:pointer; white-space:nowrap; font:600 14px var(--font-switzer);
  border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--color-slate-helper);
}
.mt-tab:hover{ color:var(--color-portrait-ink); }
.mt-tab[aria-selected="true"]{ color:var(--color-portrait-ink); border-bottom-color:var(--color-imt-navy); }
[data-theme="dark"] .mt-tab[aria-selected="true"]{ border-bottom-color:var(--color-accent); }
.mt-tab:focus-visible, .mt-input:focus-visible, .mt-day:focus-visible, .mt-key:focus-visible, .mt-room:focus-visible, .bd-blk:focus-visible, .tl-free:focus-visible, .mt-step:focus-visible, .mt-now:focus-visible, .mt-btn:focus-visible, .mt-lock:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.mt-badge{ display:inline-block; min-width:18px; padding:0 6px; margin-left:5px; border-radius:4px; background:var(--color-danger); color:#fff; font-size:11px; font-weight:700; line-height:1.6; text-align:center; }
[data-theme="dark"] .mt-badge{ color:#1a0a08; }

/* panels, fields and buttons */
.mt-panel{ background:var(--color-white-canvas); border:1px solid var(--color-mist-hairline); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.mt-prow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px; }
.mt-prow-top{ margin-top:14px; }
.mt-lead{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--color-slate-helper); }
.mt-lead-pad{ margin:0 2px 14px; }
.mt-fields{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px 14px; margin-bottom:14px; }
.mt-fields-inline{ flex:1; margin:0; min-width:240px; }
.mt-field .field-label{ margin-bottom:6px; }
.mt-input{
  width:100%; min-width:0; font:inherit; font-size:14.5px; font-weight:500; padding:10px 12px; border-radius:8px;
  border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-input:disabled{ opacity:.55; cursor:not-allowed; }
.mt-btn{
  font:600 13px var(--font-switzer); padding:8px 14px; cursor:pointer; border-radius:8px;
  border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-btn:hover:not(:disabled){ border-color:var(--color-accent); color:var(--color-accent); }
.mt-btn:disabled{ opacity:.45; cursor:not-allowed; }
.mt-actions{ display:flex; gap:8px; margin-left:auto; }
.mt-searchbox{ position:relative; }
.mt-searchbox svg{ position:absolute; left:14px; top:50%; width:19px; height:19px; margin-top:-9.5px; color:var(--color-slate-helper); pointer-events:none; }
.mt-search{
  width:100%; font:inherit; font-size:17px; font-weight:500; padding:13px 16px 13px 44px; border-radius:10px;
  border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-search:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.mt-hint{ margin:10px 2px 0; font-size:12.5px; line-height:1.55; color:var(--color-slate-helper); }
.mt-hint b{ color:var(--color-portrait-ink); font-weight:600; }
.mt-count{ margin:16px 2px 12px; font-size:13px; font-weight:600; color:var(--color-slate-helper); }
.mt-tag{ display:inline-block; padding:2px 8px; border:1px solid var(--color-mist-hairline); border-radius:4px; background:var(--color-row); color:var(--color-portrait-ink); font-size:11.5px; font-weight:600; }
.mt-meta{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mt-sec-h{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 4px; font:700 12.5px var(--font-switzer); letter-spacing:.07em; text-transform:uppercase; color:var(--color-portrait-ink); }
.mt-sec-h span{ font-weight:500; letter-spacing:0; text-transform:none; font-size:12.5px; color:var(--color-slate-helper); }
.mt-none{ font-size:13.5px; color:var(--color-slate-helper); padding:4px 2px; }
kbd{ font:600 11px var(--font-switzer); padding:1px 6px; border:1px solid var(--color-ash-divider); border-bottom-width:2px; border-radius:4px; background:var(--color-row); color:var(--color-portrait-ink); }

.mt-weeknav{ display:inline-flex; align-items:center; gap:8px; }
.mt-step{
  width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:20px; line-height:1; padding:0 0 2px;
  border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-step:hover:not(:disabled){ border-color:var(--color-accent); color:var(--color-accent); }
.mt-step:disabled{ opacity:.35; cursor:default; }
.mt-weeklbl{ min-width:130px; text-align:center; font:700 14.5px var(--font-basier-circle); color:var(--color-portrait-ink); }

/* ---- the rooms board ---- */
.mt-legend{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.mt-key{
  display:inline-flex; align-items:center; gap:7px; padding:3px 0; cursor:pointer; font:500 12.5px var(--font-switzer);
  border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--color-graphite-body);
}
.mt-key i{ width:11px; height:11px; border-radius:3px; background:var(--blk-edge); }
.mt-key:hover{ color:var(--color-portrait-ink); }
.mt-key.is-on{ border-bottom-color:var(--blk-edge); color:var(--color-portrait-ink); font-weight:700; }
.mt-days{ display:grid; grid-template-columns:repeat(7, 1fr); margin-top:14px; border:1px solid var(--color-ash-divider); border-radius:10px; overflow:hidden; }
.mt-day{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 4px 9px; cursor:pointer; font:inherit;
  border:0; border-right:1px solid var(--color-ash-divider); border-radius:0; background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-day:last-child{ border-right:0; }
.mt-day:hover:not(:disabled):not(.is-on){ background:var(--color-row); }
.mt-day b{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--color-slate-helper); }
.mt-day span{ font:700 19px var(--font-basier-circle); line-height:1.2; }
.mt-day em{ font-style:normal; font-size:10px; font-weight:700; margin-top:2px; padding:1px 6px; border-radius:3px; background:var(--color-peach-wash); color:var(--color-portrait-ink); }
.mt-day.is-today::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--color-imt-gold); }
.mt-day.is-off span{ text-decoration:line-through; }
.mt-day:disabled{ opacity:.4; cursor:default; }
.mt-day.is-on{ background:var(--color-imt-navy); color:#fff; }
.mt-day.is-on b{ color:#dbe3fb; }
.mt-day.is-on em{ background:rgba(0,0,0,.3); color:#fff; }
.mt-timebar{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.mt-now{
  flex-shrink:0; font:700 13px var(--font-switzer); cursor:pointer; padding:8px 16px; border-radius:8px;
  border:1px solid var(--color-accent); background:transparent; color:var(--color-accent);
}
.mt-now:hover{ background:var(--color-imt-navy); border-color:var(--color-imt-navy); color:#fff; }
.mt-range{ flex:1; min-width:0; height:28px; cursor:pointer; background:transparent; -webkit-appearance:none; appearance:none; }
.mt-range::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:var(--color-ash-divider); }
.mt-range::-moz-range-track{ height:6px; border-radius:3px; background:var(--color-ash-divider); }
.mt-range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:var(--color-imt-navy); border:3px solid var(--color-white-canvas); box-shadow:0 0 0 1.5px var(--color-imt-navy); }
.mt-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--color-imt-navy); border:3px solid var(--color-white-canvas); box-shadow:0 0 0 1.5px var(--color-imt-navy); }
[data-theme="dark"] .mt-range::-webkit-slider-thumb{ background:var(--color-accent); box-shadow:0 0 0 1.5px var(--color-accent); }
[data-theme="dark"] .mt-range::-moz-range-thumb{ background:var(--color-accent); box-shadow:0 0 0 1.5px var(--color-accent); }
.mt-range:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:3px; border-radius:6px; }
.mt-timeout{ flex-shrink:0; min-width:84px; text-align:right; font:700 18px var(--font-basier-circle); font-variant-numeric:tabular-nums; color:var(--color-portrait-ink); }
.mt-keys-hint{ margin:10px 0 0; font-size:12px; color:var(--color-slate-helper); }

.mt-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:1px; margin-bottom:14px; background:var(--color-ash-divider); border:1px solid var(--color-ash-divider); border-radius:12px; overflow:hidden; }
.kpi{ display:flex; flex-direction:column; gap:1px; min-width:0; padding:12px 16px 13px; background:var(--color-white-canvas); }
.kpi span{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--color-slate-helper); }
.kpi b{ font:700 26px var(--font-basier-circle); line-height:1.15; font-variant-numeric:tabular-nums; color:var(--color-portrait-ink); }
.kpi em{ font-style:normal; font-size:12px; color:var(--color-slate-helper); overflow-wrap:anywhere; }
.kpi.is-free b{ color:var(--mt-green); }
.kpi.is-note{ background:var(--color-peach-wash); }
.kpi.is-note span, .kpi.is-note em{ color:var(--color-graphite-body); }

.mt-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-bottom:16px; }
.mt-room{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 12px; cursor:pointer; font:inherit; text-align:left;
  border:1px solid var(--color-mist-hairline); border-left:3px solid var(--mt-line); border-radius:8px; background:var(--color-white-canvas); color:var(--color-portrait-ink);
}
.mt-room b{ font-size:14px; }
.mt-room i{ font-style:normal; font-size:11.5px; color:var(--color-slate-helper); }
.mt-room.is-all{ background:color-mix(in srgb, var(--mt-line) 9%, var(--color-white-canvas)); }
.mt-room:hover{ border-color:var(--color-accent); border-left-color:var(--mt-line); }

.bd-scroll{ overflow-x:auto; border:1px solid var(--color-ash-divider); border-radius:12px; background:var(--color-white-canvas); }
.bd{ --room:96px; position:relative; min-width:940px; }
.bd-head, .bd-row{ display:flex; }
.bd-corner, .bd-room{
  flex:0 0 var(--room); position:sticky; left:0; z-index:3; background:var(--color-white-canvas);
  display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--color-mist-hairline);
  font-size:12.5px; font-weight:700; color:var(--color-portrait-ink);
}
.bd-corner{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--color-slate-helper); height:30px; }
.bd-axis{ position:relative; flex:1; height:30px; }
.bd-axis span{ position:absolute; top:8px; transform:translateX(-50%); font-size:11px; font-weight:600; color:var(--color-slate-helper); }
.bd-axis span:first-child{ transform:none; padding-left:3px; }
.bd-loadrow{ border-bottom:1px solid var(--color-ash-divider); }
.bd-loadrow .bd-corner{ height:38px; }
.bd-bars{ flex:1; display:flex; align-items:flex-end; gap:1px; height:38px; padding-top:4px; }
.bd-bars i{ flex:1; min-width:0; border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--color-accent) 32%, var(--color-white-canvas)); cursor:pointer; }
.bd-bars i:hover{ background:color-mix(in srgb, var(--color-accent) 60%, var(--color-white-canvas)); }
.bd-bars i.is-now{ background:var(--color-imt-navy); }
[data-theme="dark"] .bd-bars i.is-now{ background:var(--color-accent); }
.bd-body{ position:relative; }
.bd-group{ height:28px; background:var(--color-row); border-top:1px solid var(--color-mist-hairline); }
.bd-groupname{ position:sticky; left:0; display:inline-block; padding:0 12px; font:700 11px/28px var(--font-switzer); letter-spacing:.08em; text-transform:uppercase; color:var(--color-graphite-body); }
.bd-groupname span{ font-weight:500; margin-left:4px; color:var(--color-slate-helper); }
.bd-row{ height:40px; border-top:1px solid var(--color-mist-hairline); }
.bd-row.has-clash .bd-room::after{ content:"!"; margin-left:6px; width:16px; height:16px; border-radius:4px; background:var(--color-danger); color:#fff; font-size:11px; line-height:16px; text-align:center; }
[data-theme="dark"] .bd-row.has-clash .bd-room::after{ color:#1a0a08; }
.bd-track{
  position:relative; flex:1;
  background-image:linear-gradient(to right, var(--color-mist-hairline) 1px, transparent 1px);
  background-size:calc(100% / var(--cols)) 100%;
}
.bd-blk{
  position:absolute; box-sizing:border-box; margin:0; padding:1px 7px; overflow:hidden; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; justify-content:center; min-width:0; font-family:var(--font-switzer);
  border:0; border-left:3px solid var(--blk-edge); border-radius:4px; background:var(--blk-bg); color:var(--blk-ink);
  transition:opacity .15s ease, box-shadow .15s ease;
}
.bd-blk b{ font-size:12px; line-height:1.15; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.bd-blk span{ font-size:10.5px; line-height:1.15; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; opacity:.85; }
.bd-blk.is-live{ box-shadow:0 0 0 2px var(--blk-edge); z-index:2; }
.bd-blk.is-dim{ opacity:.2; }
.bd-blk.is-sel{ outline:2px solid var(--color-portrait-ink); outline-offset:1px; z-index:3; }
.bd-blk.is-clash{ outline:2px dashed var(--color-danger); outline-offset:-2px; }
.bd-row.is-flash .bd-track{ background-color:color-mix(in srgb, var(--color-imt-gold) 24%, transparent); }
.bd-row.is-flash .bd-room{ background:color-mix(in srgb, var(--color-imt-gold) 30%, var(--color-white-canvas)); }
.bd-cur{
  position:absolute; top:0; bottom:0; z-index:4; width:2px; margin-left:-1px; pointer-events:none; background:var(--color-imt-navy);
  left:calc(var(--room) + (100% - var(--room)) * var(--cur, .3));
}
.bd-cur::before{ content:""; position:absolute; top:0; left:-5px; border:6px solid transparent; border-top-color:var(--color-imt-navy); border-bottom:0; }
[data-theme="dark"] .bd-cur{ background:var(--color-accent); }
[data-theme="dark"] .bd-cur::before{ border-top-color:var(--color-accent); }
.bd-track, .bd-axis, .bd-bars{ cursor:col-resize; }
.mt-detail{ margin-top:14px; }
.mt-detail-in{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 18px; padding:14px 18px;
  border-radius:10px; border-left:5px solid var(--blk-edge); background:var(--blk-bg); color:var(--blk-ink);
}
.mt-detail-title{ font-family:var(--font-basier-circle); font-weight:700; font-size:17px; }
.mt-detail-title span{ font:500 12.5px var(--font-switzer); opacity:.8; }
.mt-detail-when{ font-size:13px; margin:3px 0 8px; opacity:.9; }
.mt-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mt-detail-in .mt-tag{ background:var(--color-white-canvas); }
.mt-load{ margin-top:18px; }
.mt-load summary{ cursor:pointer; font-weight:700; font-size:14.5px; color:var(--color-portrait-ink); }
.mt-load summary span{ font-weight:500; font-size:12.5px; color:var(--color-slate-helper); margin-left:8px; }
.mt-load > div{ margin-top:14px; }

/* ---- a section's week ---- */
.mt-who{ display:flex; flex-direction:column; gap:2px; margin:2px 2px 12px; font-size:13px; color:var(--color-slate-helper); }
.mt-who b{ font-family:var(--font-basier-circle); font-size:19px; color:var(--color-portrait-ink); }
.gr-scroll{ overflow-x:auto; border-radius:12px; border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); }
.gr{ display:grid; grid-template-columns:78px repeat(7, minmax(120px, 1fr)); min-width:940px; }
.gr > *{ border-bottom:1px solid var(--color-mist-hairline); border-right:1px solid var(--color-mist-hairline); }
.gr > :nth-child(8n){ border-right:0; }
.gr-corner{ position:sticky; left:0; z-index:2; background:var(--color-white-canvas); }
.gr-day{ padding:10px 8px; text-align:center; display:flex; flex-direction:column; gap:2px; background:var(--color-row); }
.gr-day b{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-portrait-ink); }
.gr-day span{ font-size:12px; color:var(--color-slate-helper); }
.gr-day em{ font-style:normal; font-size:11px; font-weight:700; color:var(--color-portrait-ink); background:var(--color-peach-wash); border-radius:3px; padding:2px 8px; margin:2px auto 0; }
.gr-day.is-today b{ color:var(--color-accent); }
.gr-time{ position:sticky; left:0; z-index:2; background:var(--color-row); padding:8px 8px; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.gr-time b{ font-size:12px; color:var(--color-portrait-ink); }
.gr-time span{ font-size:11px; color:var(--color-slate-helper); }
.gr-cell{ padding:5px; min-height:64px; display:flex; flex-direction:column; gap:4px; }
.gr-cell.is-off, .gr-day.is-off{ background-image:repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--color-slate-helper) 14%, transparent) 8px 9px); }
.gr-blk{ border-radius:6px; padding:6px 9px; font-size:12px; line-height:1.3; background:var(--blk-bg); color:var(--blk-ink); border-left:3px solid var(--blk-edge); }
.gr-blk b{ display:block; font-size:12.5px; }
.gr-blk span{ display:block; font-size:11px; opacity:.85; }
.gr-blk.is-group{ border:1.5px dashed var(--blk-edge); border-left-width:3px; }
.gr-note{ background:var(--color-peach-wash); color:var(--color-portrait-ink); border-left:3px solid var(--color-imt-gold); font-weight:600; font-size:11.5px; }
.gr-note.is-cont{ opacity:.55; }
.mt-keys{ display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:14px; }
.mt-key-pill{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid var(--color-mist-hairline); border-radius:6px; background:var(--color-white-canvas); color:var(--color-portrait-ink); font-size:12px; }
.mt-key-pill i{ width:10px; height:10px; border-radius:3px; background:var(--blk-edge); }
.mt-key-pill b{ font-weight:700; }

/* ---- find a time ---- */
.mt-picks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; }
.mt-group{ margin:0; padding:6px 10px 10px; border:1px solid var(--color-mist-hairline); border-top:3px solid var(--blk-edge); border-radius:10px; display:flex; flex-direction:column; gap:1px; min-width:0; }
.mt-group legend{ padding:0 6px; font-weight:700; font-size:12.5px; color:var(--color-portrait-ink); }
.mt-check{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; color:var(--color-portrait-ink); }
.mt-check:hover{ background:var(--color-row); }
.mt-check input{ accent-color:var(--color-imt-navy); width:16px; height:16px; margin:0; }
.mt-check:has(input:checked){ background:var(--color-sky-wash); font-weight:700; }
.mt-check:focus-within{ outline:2px solid var(--color-imt-gold); outline-offset:1px; }
.mt-bestcard{ margin-bottom:16px; }
.mt-best{ display:flex; flex-direction:column; }
.mt-bw{ display:grid; grid-template-columns:112px 1fr 76px auto; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--color-mist-hairline); font-size:13.5px; }
.mt-bwd{ font-weight:600; color:var(--color-slate-helper); }
.mt-bwt{ font:700 15px var(--font-basier-circle); color:var(--color-portrait-ink); }
.mt-bwl{ font-size:12.5px; color:var(--mt-green); font-weight:700; }
.mt-bw .mt-btn{ padding:6px 14px; }
.mt-daycard{ margin-bottom:16px; }
.mt-daycard .day-title{ margin-bottom:8px; }
.tl{ background:var(--color-white-canvas); border:1px solid var(--color-mist-hairline); border-radius:12px; padding:10px 14px 12px; }
.tl-lane{ display:flex; align-items:center; gap:12px; margin:6px 0; }
.tl-lbl{ flex:0 0 124px; font-size:12px; font-weight:600; color:var(--color-graphite-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-track{ position:relative; flex:1; height:22px; border-radius:4px; background:var(--color-row); }
.tl-blk{ position:absolute; top:0; bottom:0; border-radius:3px; background:var(--blk-bg); border-left:3px solid var(--blk-edge); box-sizing:border-box; }
.tl-ticks{ background:transparent; height:16px; }
.tl-ticks span{ position:absolute; top:0; transform:translateX(-50%); font-size:10.5px; font-weight:600; color:var(--color-slate-helper); }
.tl-all .tl-lbl{ color:var(--color-portrait-ink); font-weight:700; }
.tl-all .tl-track{ height:32px; }
.tl-free{
  position:absolute; top:0; bottom:0; box-sizing:border-box; border-radius:4px; cursor:pointer; padding:0 6px; overflow:hidden; white-space:nowrap;
  border:1.5px solid var(--mt-line); background:color-mix(in srgb, var(--mt-line) 16%, var(--color-white-canvas)); color:var(--color-portrait-ink); font:700 11.5px var(--font-switzer);
}
.tl-free:hover{ background:color-mix(in srgb, var(--mt-line) 28%, var(--color-white-canvas)); }
.tl-none{ position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; font-size:12px; color:var(--color-slate-helper); }

/* ---- search results: a table ---- */
.mt-rowhead, .mt-row{ display:grid; grid-template-columns:96px minmax(0, 2.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 118px; gap:14px; align-items:center; }
.mt-rowhead{ padding:0 15px 8px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--color-slate-helper); }
.mt-rows{ border:1px solid var(--color-mist-hairline); border-radius:10px; overflow:hidden; background:var(--color-white-canvas); }
.mt-row{ padding:9px 15px 9px 12px; border-bottom:1px solid var(--color-mist-hairline); border-left:3px solid var(--blk-edge); }
.mt-row:last-child{ border-bottom:0; }
.mt-row:hover{ background:var(--color-row); }
.mt-rt{ display:flex; flex-direction:column; gap:1px; }
.mt-rt b{ font-size:13.5px; white-space:nowrap; color:var(--color-portrait-ink); }
.mt-rt span{ font-size:11.5px; color:var(--color-slate-helper); white-space:nowrap; }
.mt-title{ font-weight:700; font-size:14px; line-height:1.3; color:var(--color-portrait-ink); }
.mt-session{ font-weight:500; font-size:12px; color:var(--color-slate-helper); }
.mt-hue .mt-session{ color:inherit; opacity:.85; }
.mt-row .mt-session{ color:var(--color-slate-helper); opacity:1; }
.mt-rp, .mt-ru, .mt-rr{ font-size:12.5px; color:var(--color-graphite-body); min-width:0; }
.mt-rr{ font-weight:600; color:var(--color-portrait-ink); }
.master .day-group{ margin-bottom:18px; }

/* ---- checks ---- */
.mt-check-card{ border-left:5px solid var(--color-mist-hairline); }
.mt-check-card.is-ok{ border-left-color:var(--mt-line); }
.mt-check-card.is-warn{ border-left-color:var(--color-danger); }
.mt-check-head{ display:flex; flex-direction:column; gap:2px; }
.mt-check-head b{ font-family:var(--font-basier-circle); font-size:17px; color:var(--color-portrait-ink); }
.mt-check-head span{ font-size:12.5px; color:var(--color-slate-helper); }
.mt-clash{ margin-top:14px; padding-top:14px; border-top:1px solid var(--color-mist-hairline); }
.mt-clash-when{ font-size:13.5px; margin-bottom:8px; color:var(--color-portrait-ink); }
.mt-clash-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mt-clash-two > div{ background:var(--blk-bg); color:var(--blk-ink); border-left:3px solid var(--blk-edge); border-radius:6px; padding:8px 11px; font-size:13px; font-weight:600; line-height:1.4; }
.mt-clash-go{ margin-top:10px; padding:7px 14px; }

/* ---- the room-hours table ---- */
.mt-table-wrap{ overflow-x:auto; border-radius:8px; border:1px solid var(--color-mist-hairline); background:var(--color-white-canvas); }
.mt-table{ border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums; }
.mt-table th, .mt-table td{ padding:8px 10px; text-align:center; white-space:nowrap; border-bottom:1px solid var(--color-mist-hairline); color:var(--color-portrait-ink); }
.mt-table thead th{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--color-slate-helper); font-weight:700; background:var(--color-row); }
.mt-table tbody th{ text-align:left; font-weight:700; position:sticky; left:0; background:var(--color-white-canvas); }
.mt-table tbody tr:last-child th, .mt-table tbody tr:last-child td{ border-bottom:0; }
.mt-heat.mt-h0{ color:var(--color-slate-helper); }
.mt-heat.mt-h1{ background:color-mix(in srgb, var(--color-accent) 10%, var(--color-white-canvas)); }
.mt-heat.mt-h2{ background:color-mix(in srgb, var(--color-accent) 20%, var(--color-white-canvas)); }
.mt-heat.mt-h3{ background:color-mix(in srgb, var(--color-accent) 30%, var(--color-white-canvas)); }
.mt-heat.mt-h4{ background:color-mix(in srgb, var(--color-accent) 42%, var(--color-white-canvas)); }
.mt-total{ font-weight:700; }
.mt-fine{ margin:14px 2px 0; font-size:12.5px; line-height:1.55; color:var(--color-slate-helper); }

/* ---- the little "copied" message: it lives on <html>, like the other floating pieces ---- */
.mt-toast{
  position:fixed; z-index:60; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:10px 18px; border-radius:8px; font:600 13.5px var(--font-switzer);
  background:var(--color-portrait-ink); color:var(--color-page); box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
}

@media (max-width:760px){
  .mt-rowhead{ display:none; }
  .mt-row{ grid-template-columns:78px 1fr; gap:2px 12px; align-items:start; }
  .mt-rt{ grid-row:1 / span 4; }
  .mt-rc, .mt-rp, .mt-ru, .mt-rr{ grid-column:2; }
  .mt-rr:empty, .mt-ru:empty{ display:none; }
}
@media (max-width:640px){
  .master .wrap{ padding-inline:14px; }
  .mt-top{ align-items:flex-start; }
  .mt-panel{ padding:14px; }
  .mt-prow{ gap:12px; }
  .mt-weeklbl{ min-width:112px; }
  .mt-timebar{ gap:10px; }
  .mt-keys-hint{ display:none; }
  .mt-actions{ margin-left:0; width:100%; }
  .mt-actions .mt-btn{ flex:1; }
  .mt-clash-two{ grid-template-columns:1fr; }
  .tl-lbl{ flex-basis:88px; font-size:11.5px; }
  .mt-fields{ grid-template-columns:1fr 1fr; }
  .mt-fields-inline{ min-width:0; width:100%; }
  .mt-bw{ grid-template-columns:90px 1fr auto; }
  .mt-bwl{ display:none; }
  .mt-tab{ padding:12px 14px; }
  .kpi b{ font-size:22px; }
  .mt-day span{ font-size:17px; }
  .mt-day em{ display:none; }
}
@media print{ .master .mt-tabs, .master .mt-lock, .master .mt-toast{ display:none!important; } }

/* No double-tap zoom: a quick second tap on a button, card or the page no longer zooms in. Pinch zoom and scrolling still work. */
html, body, a, button, input, select, textarea, label, summary, [role="button"], .step, .btn-ghost{ touch-action:manipulation; }

/* ---------- Garba Night: chaniya-choli colours, a turning mandala and crossed dandiya sticks ---------- */
.event-garba{
  background:
    radial-gradient(150px 100px at 0% 50%, rgba(255,210,74,.35), transparent 70%),
    radial-gradient(150px 100px at 100% 50%, rgba(20,184,166,.4), transparent 70%),
    linear-gradient(100deg, #4a0e6b 0%, #a3125f 38%, #d9480f 100%);
  justify-content:space-between; color:#fff;
}
/* mirror-work: a scatter of small bright dots across the banner */
.event-garba::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(circle, rgba(255,244,194,.9) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(255,210,74,.8) 0 1.2px, transparent 1.6px);
  background-size:46px 34px, 62px 46px; background-position:6px 8px, 24px 20px;
}
.event-garba .event-text{ text-align:center; }
.event-garba .event-title{ text-transform:uppercase; letter-spacing:.1em; font-size:18px; color:#fff; text-shadow:0 1px 6px rgba(60,0,60,.55); }
.event-garba .event-note{ color:#fff4d6; text-wrap:balance; }
.event-garba .event-motif{ width:64px; height:64px; filter:drop-shadow(0 2px 5px rgba(40,0,50,.45)); }
@media (max-width:480px){ .event-garba{ gap:8px; padding:12px; } .event-garba .event-title{ font-size:15px; letter-spacing:.07em; } .event-garba .event-motif{ width:54px; height:54px; } }
@media (max-width:360px){ .event-garba .event-motif{ width:40px; } .event-garba .event-motif{ height:40px; } }
/* the mandala turns, the dandiya sticks tap together, a sheen crosses the banner */
@media (prefers-reduced-motion: no-preference){
  .event-garba .motif-garba-a{ animation:pookalamTurn 18s linear infinite; }
  .event-garba .motif-garba-b{ animation:dandiyaTap 1.6s ease-in-out infinite; }
  .event-garba::after{
    content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform:skewX(-18deg);
    animation:garbaSheen 6s ease-in-out infinite;
  }
}
@keyframes dandiyaTap{ 0%, 100%{ transform:rotate(-7deg) scale(1); } 45%{ transform:rotate(7deg) scale(1.06); } 55%{ transform:rotate(7deg) scale(1.06); } }
@keyframes garbaSheen{ 0%, 55%{ left:-40%; } 100%{ left:140%; } }

/* ---------- master timetable: the Find tab ---------- */
.mt-suggest{ position:relative; }
.mt-sug{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; margin:0; padding:6px; list-style:none; max-height:min(60vh, 380px); overflow:auto;
  background:var(--color-white-canvas); border:1px solid var(--color-ash-divider); border-radius:12px; box-shadow:var(--shadow-md);
}
.mt-sug li{ display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.mt-sug li.is-active, .mt-sug li:hover{ background:color-mix(in srgb, var(--color-accent) 11%, transparent); }
.mt-sug-main{ display:flex; flex-direction:column; min-width:0; }
.mt-sug-main b{ font-size:14.5px; font-weight:600; color:var(--color-portrait-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-sug-main em{ font-style:normal; font-size:12px; color:var(--color-slate-helper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-sug-kind{ flex:none; font:600 10.5px var(--font-switzer); letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; color:#fff; background:var(--color-accent); }
.mt-sug-kind.is-section{ background:#6d3fc4; }
.mt-sug-kind.is-room{ background:#9a5608; }
.mt-sug .mt-sug-none{ cursor:default; color:var(--color-slate-helper); font-size:13.5px; }
.mt-sug .mt-sug-none:hover{ background:none; }
.mt-h2{ margin:0; font:700 17px var(--font-basier-circle); color:var(--color-portrait-ink); }
.mt-vac-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.mt-fields-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:520px){ .mt-fields-3{ grid-template-columns:1fr 1fr; } .mt-fields-3 .mt-field:first-child{ grid-column:1 / -1; } }
.mt-vac-group{ margin-top:12px; }
.mt-vac-group h3{ margin:0 0 6px; font:600 12px var(--font-switzer); letter-spacing:.06em; text-transform:uppercase; color:var(--color-slate-helper); }
.mt-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mt-room-chip{ display:inline-flex; flex-direction:column; align-items:center; min-width:62px; padding:6px 10px; border-radius:10px; border:1px solid color-mix(in srgb, #1f9d6a 45%, var(--color-ash-divider)); background:color-mix(in srgb, #1f9d6a 10%, var(--color-white-canvas)); }
.mt-room-chip b{ font-size:15px; font-weight:700; color:var(--color-portrait-ink); }
.mt-room-chip em{ font-style:normal; font-size:10.5px; color:var(--color-slate-helper); white-space:nowrap; }
.mt-actions-left{ margin:14px 0 0; }
.mt-shortcuts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; margin-bottom:14px; }
.mt-short{
  text-align:left; font:inherit; cursor:pointer; padding:14px 16px; border-radius:12px; display:flex; flex-direction:column; gap:3px;
  border:1px solid var(--color-mist-hairline); background:var(--color-white-canvas); color:var(--color-portrait-ink);
  transition:border-color .15s, transform .15s;
}
.mt-short b{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.mt-short span{ font-size:12.5px; color:var(--color-slate-helper); }
.mt-short:hover{ border-color:var(--color-accent); transform:translateY(-1px); }
.mt-short:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .mt-short:hover{ transform:none; } }

.mt-h2-pad{ margin:22px 2px 10px; }
.mt-h2-sub{ font:500 13px var(--font-switzer); color:var(--color-slate-helper); margin-left:8px; }

/* ---------- "Right now" on the Student, Room and Section tabs ---------- */
.mt-live{ background:var(--color-white-canvas); border:1px solid var(--color-mist-hairline); border-left:4px solid var(--color-accent); border-radius:12px; padding:14px 16px; margin:0 0 14px; }
.mt-live-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.mt-live-head b{ font:700 15px var(--font-basier-circle); color:var(--color-portrait-ink); }
.mt-live-head em{ font-style:normal; font-size:12.5px; color:var(--color-slate-helper); margin-left:auto; }
.mt-live-dot{ width:9px; height:9px; border-radius:50%; background:#1f9d6a; box-shadow:0 0 0 3px color-mix(in srgb, #1f9d6a 25%, transparent); flex:none; }
@media (prefers-reduced-motion: no-preference){ .mt-live-dot{ animation:mtLivePulse 2s ease-in-out infinite; } }
@keyframes mtLivePulse{ 0%, 100%{ box-shadow:0 0 0 2px color-mix(in srgb, #1f9d6a 30%, transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, #1f9d6a 8%, transparent); } }
.mt-live-label{ margin:10px 0 4px; font:600 11px var(--font-switzer); letter-spacing:.07em; text-transform:uppercase; color:var(--color-slate-helper); }
.mt-live-row{ display:flex; gap:12px; align-items:flex-start; padding:8px 10px; border-radius:10px; background:color-mix(in srgb, var(--color-accent) 6%, transparent); margin-bottom:6px; }
.mt-live-row.is-now{ background:color-mix(in srgb, #1f9d6a 14%, var(--color-white-canvas)); border:1px solid color-mix(in srgb, #1f9d6a 40%, transparent); }
.mt-live-row.is-past{ opacity:.55; }
.mt-live-time{ flex:none; min-width:104px; font:600 13px var(--font-switzer); color:var(--color-portrait-ink); padding-top:1px; }
.mt-live-what{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mt-live-what b{ font-size:14.5px; font-weight:600; color:var(--color-portrait-ink); }
.mt-live-what span{ font-size:12.5px; color:var(--color-slate-helper); }
.mt-live-when{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--color-accent); margin-top:2px; }
.mt-live-none{ font-size:13.5px; color:var(--color-slate-helper); padding:4px 2px 6px; }
.mt-live-note{ margin:10px 2px 0; font-size:12px; color:var(--color-slate-helper); }
.mt-sched-day{ margin:0 0 14px; }
.mt-sched-day h3{ margin:0 0 6px; font:600 13px var(--font-switzer); color:var(--color-portrait-ink); }
.mt-sched-day h3 span{ font:600 10.5px var(--font-switzer); letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:var(--color-accent); color:#fff; margin-left:6px; }
.mt-sched-day.is-today h3{ color:var(--color-accent); }
@media (max-width:520px){ .mt-live-time{ min-width:84px; font-size:12.5px; } .mt-live-row{ gap:9px; } }

/* ---------- text for search engines and readers: about, questions, tables, the mess menu page ---------- */
.mess-page{ max-width:760px; margin:0 auto; }
.mess-lead{ margin:0 0 14px; font-size:13.5px; color:var(--color-slate-helper); }
.mess-day{ background:var(--color-white-canvas); border:1px solid var(--color-mist-hairline); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.mess-day h2{ margin:0 0 8px; font:700 17px var(--font-basier-circle); display:flex; align-items:center; gap:10px; }
.mess-day dl{ margin:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:2px; }
.mess-day dt{ margin-top:8px; font:600 12px var(--font-switzer); letter-spacing:.05em; text-transform:uppercase; color:var(--color-slate-helper); }
.mess-day dd{ margin:0; font-size:14.5px; line-height:1.55; color:var(--color-portrait-ink); }
.mess-day.is-today{ border-color:var(--color-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.mess-day.is-past{ opacity:.6; }
.mess-badge{ font:600 10.5px var(--font-switzer); letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--color-slate-helper); color:#fff; }
.mess-badge.is-today{ background:var(--color-accent); }

/* ---------- Placement week: "Best of Luck for Placements" ---------- */
.event-placement{
  background:
    radial-gradient(170px 110px at 0% 50%, rgba(244,197,66,.28), transparent 70%),
    radial-gradient(170px 110px at 100% 50%, rgba(111,140,255,.38), transparent 70%),
    linear-gradient(100deg, #0b1747 0%, #14297a 52%, #1d3aa6 100%);
  justify-content:space-between; color:#fff;
}
.event-placement .event-text{ text-align:center; }
.event-placement .event-title{ font-size:19px; letter-spacing:.01em; color:#ffe9a0; text-shadow:0 1px 8px rgba(0,0,0,.35); text-wrap:balance; }
.event-placement .event-note{ color:#e3eaff; letter-spacing:.03em; text-transform:uppercase; font-size:11.5px; font-weight:600; margin-top:4px; }
.event-placement .event-motif{ width:62px; height:62px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
@media (max-width:480px){ .event-placement{ gap:8px; padding:12px; } .event-placement .event-title{ font-size:16px; } .event-placement .event-motif{ width:50px; height:50px; } }
@media (max-width:360px){ .event-placement .event-motif{ width:42px; height:42px; } .event-placement .event-title{ font-size:15px; } }
@media (prefers-reduced-motion: no-preference){
  .event-placement .motif-case{ animation:plFloat 3.2s ease-in-out infinite; }
  .event-placement .motif-growth{ animation:plFloat 3.2s ease-in-out -1.6s infinite; }
  .event-placement::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent); transform:skewX(-18deg); animation:garbaSheen 6s ease-in-out infinite; }
}
@keyframes plFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* ---------- festival greetings: Halloween (pumpkin) and Diwali (diya) ---------- */
.event-festival.is-pumpkin{
  background:
    radial-gradient(170px 110px at 100% 0%, rgba(255,154,46,.55), transparent 70%),
    linear-gradient(120deg, #1e0b3f 0%, #4a1a86 52%, #c2410c 100%);
}
.event-festival.is-diya{
  background:
    radial-gradient(170px 110px at 100% 0%, rgba(255,226,140,.5), transparent 70%),
    linear-gradient(120deg, #5c1500 0%, #c2410c 55%, #f08a0c 100%);
}
.event-festival.is-pumpkin .fx-spark{ background:#ffd9a0; }

/* ---------- festival banners with a scene: Halloween (moon and bats) and Diwali (crackers and lamps) ---------- */
.event-festival.is-pumpkin, .event-festival.is-diya{ min-height:88px; }
.fx-scene{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.fx-moon{ position:absolute; right:7%; top:-16px; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #fff0c4 0%, #ffc566 45%, #ff9a2e 100%); box-shadow:0 0 28px 8px rgba(255,170,70,.45); }
.fx-moon::after{ content:""; position:absolute; left:14px; top:26px; width:14px; height:14px; border-radius:50%; background:rgba(190,100,20,.28); box-shadow:22px -8px 0 -3px rgba(190,100,20,.22), 16px 18px 0 -4px rgba(190,100,20,.2); }
.fx-star{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff4c2; opacity:.7; }
.fx-bat{ position:absolute; left:-12%; opacity:.92; }
.fx-bat svg{ display:block; width:100%; height:auto; }
.fx-burst{ position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; opacity:0; border-radius:50%;
  background:repeating-conic-gradient(from 8deg, var(--c) 0 5deg, transparent 5deg 30deg);
  -webkit-mask-image:radial-gradient(circle, transparent 24%, #000 28%, #000 62%, transparent 66%); mask-image:radial-gradient(circle, transparent 24%, #000 28%, #000 62%, transparent 66%); }
.fx-rocket{ position:absolute; left:56%; bottom:-34px; width:11px; opacity:0; }
.fx-rocket svg{ display:block; width:100%; height:auto; }
.fx-lamps{ position:absolute; left:0; right:0; bottom:0; height:12px; }
.fx-lamp{ position:absolute; bottom:-2px; width:13px; height:6px; margin-left:-6px; border-radius:0 0 13px 13px; background:#a63a0a; box-shadow:0 -1px 0 #ffd36b inset; }
.fx-lamp::before{ content:""; position:absolute; left:50%; bottom:5px; width:5px; height:8px; margin-left:-2.5px; border-radius:50% 50% 40% 40%; background:radial-gradient(#fff7cc, #ffb21c 70%); filter:blur(.2px); }
.event-festival.is-diya .fx-spark{ left:calc(48% + var(--i) * 8%); }
@media (max-width:480px){ .fx-moon{ width:50px; height:50px; right:6%; } .fx-bat{ transform:scale(.85); } }
@media (prefers-reduced-motion: no-preference){
  .fx-bat{ animation:fxBatFly 8s linear infinite; }
  .fx-star{ animation:fxTwinkle 2.4s ease-in-out infinite; }
  .fx-burst{ animation:fxBurst 4.2s ease-out infinite; }
  .fx-rocket{ animation:fxRocket 4.2s ease-in infinite; animation-delay:-.2s; }
  .fx-lamp::before{ animation:fxFlame 1.3s ease-in-out infinite; animation-delay:inherit; }
}
@media (prefers-reduced-motion: reduce){ .fx-bat{ left:30%; } .fx-burst{ opacity:.7; transform:scale(.9); } .fx-rocket{ opacity:.9; bottom:8px; } }
@keyframes fxBatFly{ 0%{ left:-12%; margin-top:0; } 25%{ margin-top:-8px; } 50%{ margin-top:6px; } 75%{ margin-top:-5px; } 100%{ left:108%; margin-top:0; } }
@keyframes fxTwinkle{ 0%, 100%{ opacity:.25; } 50%{ opacity:1; } }
@keyframes fxBurst{ 0%{ opacity:0; transform:scale(.15); } 6%{ opacity:1; } 34%{ opacity:.95; transform:scale(1.05); } 52%{ opacity:0; transform:scale(1.25); } 100%{ opacity:0; transform:scale(1.25); } }
@keyframes fxRocket{ 0%{ opacity:0; transform:translateY(0); } 6%{ opacity:1; } 24%{ opacity:1; transform:translateY(-92px); } 30%{ opacity:0; transform:translateY(-100px); } 100%{ opacity:0; } }
@keyframes fxFlame{ 0%, 100%{ transform:scaleY(1); opacity:1; } 50%{ transform:scaleY(.8); opacity:.8; } }

/* ---------- the loading screen: the IMT logo, drawn in, while the page loads ---------- */
#preloader{
  position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(circle at 50% 38%, #ffffff 0%, #eef2ff 70%, #e3e9ff 100%); color:#142a73;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
html[data-theme="dark"] #preloader{ background:radial-gradient(circle at 50% 38%, #151d3d 0%, #0d1226 70%, #080b18 100%); color:#dfe6ff; }
#preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader.is-done .pre-tile{ transform:scale(1.08); }
/* a later page of the same visit: stay out of the way unless the page is slow */
html.pre-quick #preloader:not(.is-done){ opacity:0; visibility:hidden; animation:preLate .01s linear .35s forwards; }
@keyframes preLate{ to{ opacity:1; visibility:visible; } }
.pre-stage{ position:relative; width:150px; height:150px; display:grid; place-items:center; }
.pre-glow{ position:absolute; inset:-18px; border-radius:50%; background:radial-gradient(circle, rgba(244,197,66,.42) 0%, rgba(244,197,66,0) 68%); }
.pre-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.pre-ring circle{ fill:none; stroke:#d4a52a; stroke-width:3; stroke-linecap:round; stroke-dasharray:339.3; stroke-dashoffset:0; }
.pre-ring .pre-track{ stroke:rgba(212,165,42,.22); stroke-width:3; }
.pre-tile{ position:relative; width:92px; height:92px; border-radius:24px; background:#fff; display:grid; place-items:center;
  box-shadow:0 14px 34px rgba(20,42,115,.22), 0 0 0 1px rgba(20,42,115,.06); transition:transform .45s ease; }
html[data-theme="dark"] .pre-tile{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.pre-tile img{ width:56px; height:auto; display:block; }
.pre-star{ position:absolute; width:5px; height:5px; border-radius:50%; background:#f4c542; box-shadow:0 0 8px 2px rgba(244,197,66,.7); opacity:.8; }
.pre-star.s1{ left:6px; top:22px; } .pre-star.s2{ right:2px; top:46px; } .pre-star.s3{ left:30px; bottom:2px; }
.pre-name{ font:700 15px "Plus Jakarta Sans","Manrope",system-ui,sans-serif; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em; }
.pre-name b{ color:#d4a52a; font-weight:800; }
.pre-bar{ width:120px; height:3px; border-radius:3px; background:rgba(20,42,115,.12); overflow:hidden; }
html[data-theme="dark"] .pre-bar{ background:rgba(255,255,255,.12); }
.pre-bar i{ display:block; width:40%; height:100%; border-radius:3px; background:linear-gradient(90deg, transparent, #d4a52a, transparent); }
@media (prefers-reduced-motion: no-preference){
  .pre-glow{ animation:preGlow 2.2s ease-in-out infinite; }
  .pre-ring circle:not(.pre-track){ stroke-dashoffset:339.3; animation:preDraw .8s cubic-bezier(.45,.05,.2,1) .15s forwards; }
  .pre-tile{ opacity:0; transform:scale(.7); animation:preTile .6s cubic-bezier(.2,1.3,.4,1) forwards; }
  .pre-star{ animation:preTwinkle 1.8s ease-in-out infinite; } .pre-star.s2{ animation-delay:-.6s; } .pre-star.s3{ animation-delay:-1.2s; }
  .pre-name{ opacity:0; letter-spacing:.1em; animation:preName .6s ease-out .45s forwards; }
  .pre-bar{ opacity:0; animation:preFade .4s ease-out .7s forwards; }
  .pre-bar i{ animation:preSlide 1.3s ease-in-out infinite; }
  #preloader.is-done .pre-tile{ animation:none; opacity:1; transform:scale(1.08); }
}
@keyframes preGlow{ 0%, 100%{ transform:scale(.92); opacity:.7; } 50%{ transform:scale(1.12); opacity:1; } }
@keyframes preDraw{ to{ stroke-dashoffset:0; } }
@keyframes preTile{ to{ opacity:1; transform:scale(1); } }
@keyframes preTwinkle{ 0%, 100%{ opacity:.2; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.2); } }
@keyframes preName{ to{ opacity:1; letter-spacing:.34em; } }
@keyframes preFade{ to{ opacity:1; } }
@keyframes preSlide{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(280%); } }
@media print{ #preloader{ display:none!important; } }

/* a Design Thinking group on its class card: a chip of its own under the subject, never squeezed beside it */
.cls-tags{ margin:6px 0 2px; }
.group-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1;
  padding:5px 10px; border-radius:var(--radius-tags); background:var(--color-sky-wash); color:var(--color-nautical-teal); white-space:nowrap;
}

/* ---------- Finesse events (Campus Royale, Open Outcry): the poster's look ---------- */
.event-finesse{
  display:block; position:relative; overflow:hidden; isolation:isolate; padding:16px 18px 14px; color:#f3e3b5; border-radius:18px;
  background:#08080a; border:1px solid rgba(232,168,28,.38);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
/* the torn navy band across the middle, like the poster */
.event-finesse::before{
  content:""; position:absolute; z-index:-2; left:-6%; right:-6%; top:34%; bottom:-14%; transform:rotate(-3.5deg);
  background:radial-gradient(60% 80% at 70% 30%, #16307f 0%, #0b1a52 55%, #070f33 100%);
  clip-path:polygon(0 8%, 4% 3%, 8% 9%, 13% 2%, 18% 8%, 23% 3%, 29% 9%, 34% 2%, 40% 7%, 46% 1%, 52% 8%, 58% 3%, 64% 9%, 70% 2%, 76% 8%, 82% 3%, 88% 9%, 94% 3%, 100% 7%, 100% 100%, 0 100%);
}
/* a little paper grain over everything */
.event-finesse::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; mix-blend-mode:screen; animation:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .75  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.fn-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fn-kicker{ font:600 11.5px var(--font-switzer); letter-spacing:.36em; text-transform:uppercase; color:#e9d9ab; }
.event-finesse .event-motif{ width:46px; height:46px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.fn-main{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:14px 22px; margin-top:6px; }
.fn-title{ margin:0; font:800 clamp(30px, 8.6vw, 52px)/.98 var(--font-basier-circle); font-style:italic; text-transform:uppercase; letter-spacing:.01em; transform:skewX(-7deg); transform-origin:left bottom;
  text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 22px rgba(214,40,32,.45), 3px 3px 0 rgba(160,24,20,.5); }
.fn-cream{ color:#f6e8bf; }
.fn-gold{ color:#eba91e; }
.fn-tail{ color:#f6e8bf; font-size:.55em; vertical-align:.18em; letter-spacing:.04em; }
.fn-tagline{ margin:10px 0 0; font:500 11.5px var(--font-switzer); letter-spacing:.26em; text-transform:uppercase; color:#e9dfc3; opacity:.92; line-height:1.7; text-wrap:balance; }
.fn-side{ display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:150px; }
.fn-prize{ position:relative; text-align:center; padding:9px 18px 8px; color:#0e1c52; transform:rotate(-2.5deg); background:#f3e3b5;
  clip-path:polygon(0 6%, 5% 0, 12% 5%, 20% 0, 30% 5%, 41% 0, 52% 5%, 63% 0, 74% 5%, 85% 0, 93% 5%, 100% 1%, 100% 94%, 95% 100%, 86% 95%, 76% 100%, 64% 95%, 52% 100%, 40% 95%, 28% 100%, 16% 95%, 7% 100%, 0 95%); }
.fn-prize span{ display:block; font:700 10.5px var(--font-switzer); letter-spacing:.2em; text-transform:uppercase; font-style:italic; }
.fn-prize b{ display:block; font:800 italic 27px/1.05 var(--font-basier-circle); letter-spacing:.01em; }
.fn-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:auto; padding:11px 18px; border-radius:999px;
  font:700 14px var(--font-switzer); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:#1a1204;
  background:linear-gradient(180deg, #ffe9a0, #e0a31c); border:0; box-shadow:0 6px 16px rgba(232,168,28,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s;
}
.fn-cta svg{ width:18px; height:18px; flex:none; }
.fn-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(232,168,28,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.fn-cta:focus-visible{ outline:2px solid #fff4c2; outline-offset:3px; }
.fn-facts{ display:flex; margin-top:16px; border-top:1px solid rgba(233,217,171,.28); padding-top:12px; }
.fn-fact{ flex:1 1 0; min-width:0; text-align:center; padding:0 8px; }
.fn-fact + .fn-fact{ border-left:1px solid rgba(233,217,171,.35); }
.fn-fact span{ display:block; font:600 10px var(--font-switzer); letter-spacing:.2em; text-transform:uppercase; color:#e9d9ab; opacity:.85; }
.fn-fact b{ display:block; margin-top:3px; font:700 15px/1.2 var(--font-basier-circle); letter-spacing:.02em; text-transform:uppercase; color:#eba91e; text-wrap:balance; }
.fn-by{ margin-top:12px; font:500 11px var(--font-switzer); letter-spacing:.16em; text-transform:uppercase; color:#cdbf98; opacity:.8; text-align:center; }
/* a phone: the title takes the width, the prize and the button sit under it side by side, the details share the row */
@media (max-width:560px){
  .event-finesse{ padding:14px 14px 12px; }
  .fn-kicker{ font-size:10px; letter-spacing:.3em; }
  .fn-main{ grid-template-columns:1fr; gap:12px; }
  .fn-title{ font-size:clamp(30px, 10.4vw, 42px); }
  .fn-tagline{ font-size:10px; letter-spacing:.2em; }
  .fn-side{ flex-direction:row; align-items:center; min-width:0; gap:10px; }
  .fn-side > *{ flex:1 1 0; }
  .fn-prize{ padding:8px 10px 7px; } .fn-prize b{ font-size:22px; }
  .fn-cta{ padding:12px 10px; }
  .fn-facts{ flex-wrap:wrap; row-gap:10px; }
  .fn-fact{ flex:1 1 33%; padding:0 4px; }
  .fn-fact b{ font-size:12.5px; }
  .event-finesse .event-motif{ width:40px; height:40px; }
}
@media (max-width:360px){ .fn-title{ font-size:28px; } .fn-fact b{ font-size:11.5px; } .fn-cta{ font-size:13px; } }
/* a wide screen: title and tagline on the left, the prize and button on the right, the details in a row below */
@media (min-width:900px){ .event-finesse{ padding:22px 28px 16px; } .fn-title{ font-size:58px; } .fn-fact b{ font-size:17px; } .fn-prize b{ font-size:32px; } }
@media (prefers-reduced-motion: no-preference){ .event-finesse .motif-finesse{ animation:plFloat 3.4s ease-in-out infinite; } }
@media print{ .event-finesse{ background:none!important; color:#000!important; border:1px solid #999; box-shadow:none; } .event-finesse::before, .event-finesse::after{ display:none; } .fn-title, .fn-gold, .fn-cream, .fn-fact b{ color:#000!important; text-shadow:none; } }

/* ---------- master timetable: clubs and committees ---------- */
.k-clubs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
.k-clubcard{ text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:16px 18px; border:1px solid var(--color-mist-hairline); border-radius:14px; background:var(--color-white-canvas); color:var(--color-portrait-ink); transition:border-color .15s, transform .15s, box-shadow .15s; }
.k-clubcard:hover{ border-color:var(--color-accent); transform:translateY(-2px); box-shadow:var(--shadow-subtle-2); }
.k-clubcard:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.k-clubname{ font:800 21px var(--font-basier-circle); }
.k-clubkind{ align-self:flex-start; font:700 10.5px var(--font-switzer); letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--color-accent); color:#fff; }
.k-clubmeta{ font-size:13px; font-weight:600; color:var(--color-graphite-body); }
.k-head{ display:flex; flex-direction:column; gap:12px; }
.k-crumb{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.k-crumb b{ font:800 19px var(--font-basier-circle); } .k-crumb span{ color:var(--color-slate-helper); margin:0 4px; }
.k-comms{ display:flex; flex-wrap:wrap; gap:8px; }
.mt-chip{ font:600 12.5px var(--font-switzer); padding:7px 12px; border-radius:999px; cursor:pointer; border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-graphite-body); }
.mt-chip.is-on{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.k-commchip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; font-size:14px; }
.k-commchip b{ font-weight:800; } .k-commchip i{ font-style:normal; font-size:11.5px; padding:1px 7px; border-radius:999px; background:rgba(127,127,127,.22); }
.k-ask{ margin:0; font-size:13.5px; color:var(--color-slate-helper); }
#kDetails > .mt-panel{ margin-top:14px; }
/* the people: small chips you tap in and out */
.k-people-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-bottom:10px; }
.k-people-head b{ font-size:13px; color:var(--color-slate-helper); }
.k-teams{ display:flex; gap:6px; flex-wrap:wrap; }
.k-team i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--tc); margin-right:6px; }
.k-team.is-on i{ box-shadow:0 0 0 2px #fff6; }
.k-chips{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.k-chip{ font:600 13px var(--font-switzer); padding:8px 13px; border-radius:999px; cursor:pointer; border:1.5px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-slate-helper); display:inline-flex; align-items:center; gap:6px; }
.k-chip.is-on{ background:color-mix(in srgb, var(--color-accent) 14%, var(--color-white-canvas)); border-color:var(--color-accent); color:var(--color-portrait-ink); }
.k-chip:hover:not(:disabled){ border-color:var(--color-accent); }
.k-chip.is-warn{ border-style:dashed; cursor:not-allowed; opacity:.75; } .k-chip.is-warn b{ color:#c0392b; }
.k-chip.is-pending{ border-style:dashed; cursor:default; gap:8px; padding:5px 6px 5px 12px; }
.k-pick{ font:inherit; font-size:12.5px; padding:4px 6px; border-radius:8px; border:1px solid var(--color-ash-divider); background:var(--color-white-canvas); color:var(--color-portrait-ink); max-width:190px; }
.k-x{ border:0; background:none; font-size:18px; line-height:1; color:var(--color-slate-helper); cursor:pointer; padding:2px 6px; margin-left:-8px; }
.k-x:hover{ color:#c0392b; }
/* the answer */
.k-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; margin-bottom:6px; }
.k-lens{ display:flex; gap:6px; }
.k-ans{ margin-top:14px; }
.k-ans-h{ font:700 11.5px var(--font-switzer); letter-spacing:.09em; text-transform:uppercase; color:var(--color-slate-helper); margin-bottom:7px; }
.k-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.k-pill{ font:inherit; cursor:pointer; display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; padding:8px 13px; border-radius:12px; border:1.5px solid color-mix(in srgb, #1f9d6a 55%, var(--color-ash-divider)); background:color-mix(in srgb, #1f9d6a 10%, var(--color-white-canvas)); color:var(--color-portrait-ink); }
.k-pill span{ font-size:11.5px; font-weight:600; color:var(--color-slate-helper); } .k-pill b{ font-size:14.5px; font-weight:800; } .k-pill em{ font:600 11px var(--font-switzer); font-style:normal; color:#b35a00; }
.k-pill:hover{ border-color:#1f9d6a; transform:translateY(-1px); }
.k-pill:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.k-none{ font-size:13px; color:var(--color-slate-helper); }
.k-copyall{ margin-top:12px; }
.k-stripwrap{ margin-top:16px; }
.kf-track{ cursor:crosshair; }
.kf-seg{ position:absolute; top:0; bottom:0; background:rgba(214,72,58,var(--b)); }
.kf-seg.is-all{ background:rgba(31,157,106,.30); }
.kf-good{ position:absolute; top:0; bottom:0; border:2px solid #1f9d6a; border-radius:4px; box-sizing:border-box; pointer-events:none; }
.k-key{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin-top:8px; font-size:11.5px; color:var(--color-slate-helper); }
.k-key i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; } .k-key .g{ background:rgba(31,157,106,.4); border:1px solid #1f9d6a; } .k-key .r{ background:rgba(214,72,58,.4); } .k-key span{ margin-left:auto; }
.k-probe{ position:relative; margin-top:10px; padding:10px 14px; border:1px solid var(--color-mist-hairline); border-radius:10px; background:var(--color-row); font-size:13px; }
.k-probe p{ margin:6px 0 0; } .k-probe ul{ margin:4px 0 0; padding-left:18px; } .k-probe li span{ color:var(--color-slate-helper); }
.k-probe-x{ position:absolute; top:4px; right:6px; border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:var(--color-slate-helper); padding:4px 8px; }
/* more options: folded away */
.k-more{ margin-top:16px; border-top:1px solid var(--color-mist-hairline); padding-top:10px; }
.k-more summary{ cursor:pointer; font:600 13px var(--font-switzer); color:var(--color-graphite-body); padding:6px 0; }
.k-settings{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); margin:10px 0; }
.k-days{ display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 10px; }
.k-lanes{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--color-graphite-body); cursor:pointer; }
.k-addrow{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:14px; }
.k-add{ flex:1 1 260px; } .k-tools{ margin-left:0; }
@media (max-width:640px){
  .k-clubs{ grid-template-columns:1fr; } .k-commchip{ flex:1 1 auto; justify-content:center; }
  .kf-wrap .tl-lbl{ flex-basis:54px; font-size:11.5px; } .kf-wrap .tl-lane{ gap:8px; } .kf-wrap .tl-ticks span{ font-size:9.5px; } .kf-wrap{ padding:8px 10px 10px; }
  .k-tools .mt-btn{ flex:1; } .k-key span{ margin-left:0; }
}

/* clubs: the programme tabs sit under the team tabs, in the same quiet style */
#kProgs{ display:flex; gap:2px 18px; flex-wrap:wrap; margin:2px 0 4px; }
#kProgs .mt-chip{ border:0; border-radius:0; background:none; padding:6px 0; color:var(--color-slate-helper); font:600 13px var(--font-switzer); border-bottom:2px solid transparent; }
#kProgs .mt-chip.is-on{ background:none; color:var(--color-portrait-ink); border-bottom-color:var(--color-accent); }
#kProgs .mt-chip i{ font-style:normal; font-size:11.5px; opacity:.7; margin-left:3px; }

/* ---------- clubs: design pass (no pills: tabs, a roster, a week of days, rows) ---------- */
#panel-clubs .k-head{ padding:18px 20px 0; gap:6px; }
.k-crumb b{ font:800 22px var(--font-basier-circle); letter-spacing:-.01em; }
/* the batch buttons are tabs */
#panel-clubs .k-comms{ gap:0; border-bottom:1px solid var(--color-mist-hairline); margin:6px -20px 0; padding:0 20px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
#panel-clubs .k-comms::-webkit-scrollbar{ display:none; }
#panel-clubs .k-commchip{ flex:none; border:0; border-bottom:3px solid transparent; border-radius:0; background:none; color:var(--color-slate-helper); padding:12px 16px 11px; margin-bottom:-1px; font-size:14.5px; gap:8px; }
#panel-clubs .k-commchip b{ font-weight:700; }
#panel-clubs .k-commchip i{ background:none; padding:0; font-size:12px; opacity:.8; }
#panel-clubs .k-commchip.is-on{ color:var(--color-accent); border-bottom-color:var(--color-accent); background:none; }
#panel-clubs .k-commchip:hover:not(.is-on){ color:var(--color-portrait-ink); }
.k-ask{ padding-bottom:14px; }
/* the people: a roster of round initials */
.k-people-head{ margin-bottom:6px; }
.k-people-head b{ font:700 12px var(--font-switzer); letter-spacing:.07em; text-transform:uppercase; }
#kTeams{ gap:2px 18px; }
#kTeams .mt-chip{ border:0; border-radius:0; background:none; padding:6px 0; color:var(--color-slate-helper); font:600 13px var(--font-switzer); border-bottom:2px solid transparent; }
#kTeams .mt-chip.is-on{ background:none; color:var(--color-portrait-ink); border-bottom-color:var(--color-accent); }
#kTeams .k-team i{ margin-right:6px; }
.k-chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:14px 6px; margin-top:10px; align-items:start; }
.k-person{ position:relative; display:flex; justify-content:center; }
.k-chip{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; max-width:92px; padding:4px 2px; border-radius:12px; font:600 12.5px/1.15 var(--font-switzer); color:var(--color-portrait-ink); text-align:center; }
.k-chip::before{ content:attr(data-ini); width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font:800 16px var(--font-basier-circle); letter-spacing:.02em; color:#fff; background:var(--tc, #6b7bd6);
  box-shadow:0 0 0 3px var(--color-white-canvas), 0 0 0 5px var(--tc, #6b7bd6); transition:transform .15s, opacity .15s, filter .15s, box-shadow .15s; }
.k-chip:hover:not(:disabled)::before{ transform:scale(1.06); }
.k-chip:focus-visible{ outline:2px solid var(--color-imt-gold); outline-offset:2px; }
.k-chip:not(.is-on)::before{ filter:grayscale(1); opacity:.35; box-shadow:0 0 0 3px var(--color-white-canvas), 0 0 0 5px var(--color-ash-divider); }
.k-chip:not(.is-on){ color:var(--color-slate-helper); }
.k-chip.is-on::after{ content:""; position:absolute; top:2px; right:calc(50% - 31px); width:17px; height:17px; border-radius:50%; background:#1f9d6a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; border:2px solid var(--color-white-canvas); box-sizing:content-box; }
.k-chip.is-warn::before{ background:#9aa0ad; filter:none; opacity:.6; box-shadow:0 0 0 3px var(--color-white-canvas), 0 0 0 5px #c0392b; border:0; }
.k-chip.is-warn b{ position:absolute; top:0; right:calc(50% - 31px); color:#fff; background:#c0392b; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:11px; }
.k-chip.is-pending{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:110px; padding:4px 2px; font:600 12.5px var(--font-switzer); }
.k-chip.is-pending::before{ content:"?"; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font:800 20px var(--font-basier-circle); color:var(--color-slate-helper); border:2px dashed var(--color-ash-divider); background:none; box-shadow:none; opacity:1; filter:none; }
.k-pick{ max-width:100%; font-size:12px; }
.k-x{ position:absolute; top:0; right:calc(50% - 38px); width:20px; height:20px; margin:0; padding:0; border-radius:50%; background:var(--color-white-canvas); border:1px solid var(--color-ash-divider); font-size:14px; line-height:18px; z-index:2; }
/* meeting length: one joined control */
.k-lens{ gap:0; border:1px solid var(--color-ash-divider); border-radius:10px; overflow:hidden; background:var(--color-white-canvas); }
.k-lens .mt-chip{ border:0; border-radius:0; padding:9px 16px; font-size:13.5px; background:none; }
.k-lens .mt-chip + .mt-chip{ border-left:1px solid var(--color-ash-divider); }
.k-lens .mt-chip.is-on{ background:var(--color-accent); color:#fff; }
.k-days{ gap:6px; } .k-days .mt-chip{ width:42px; height:36px; padding:0; border-radius:8px; display:grid; place-items:center; font-size:12px; }
/* the answer: a week of days, then rows */
.k-ans-h{ margin-bottom:9px; }
.k-pills.k-week{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
.k-week .k-pill{ align-items:center; text-align:center; padding:10px 4px 11px; gap:3px; border-radius:14px; border:1px solid var(--color-mist-hairline); border-top:4px solid #1f9d6a; background:var(--color-white-canvas); }
.k-week .k-pill span{ font:700 11px var(--font-switzer); letter-spacing:.07em; text-transform:uppercase; color:var(--color-slate-helper); }
.k-week .k-pill b{ font:800 15px/1.15 var(--font-basier-circle); color:var(--color-portrait-ink); }
.k-week .k-pill:hover{ background:color-mix(in srgb, #1f9d6a 8%, var(--color-white-canvas)); border-color:#1f9d6a; }
.k-week .k-pill em{ display:block; font-size:10.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-pills.k-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--color-mist-hairline); border-radius:12px; overflow:hidden; }
.k-list .k-pill{ display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:2px 12px; text-align:left; border:0; border-radius:0; background:var(--color-white-canvas); padding:12px 14px; }
.k-list .k-pill + .k-pill{ border-top:1px solid var(--color-mist-hairline); }
.k-list .k-pill span{ font:700 12.5px var(--font-switzer); color:var(--color-slate-helper); }
.k-list .k-pill b{ font:800 15.5px var(--font-basier-circle); color:var(--color-portrait-ink); }
.k-list .k-pill small{ font:700 12px var(--font-switzer); color:#1f9d6a; }
.k-list .k-pill em{ grid-column:2 / -1; }
.k-list .k-pill:hover{ background:color-mix(in srgb, #1f9d6a 7%, var(--color-white-canvas)); transform:none; }
.k-none{ display:block; padding:12px 14px; border:1px dashed var(--color-ash-divider); border-radius:12px; }
.k-pills.k-week .k-none{ grid-column:1 / -1; }
@media (max-width:640px){
  #panel-clubs .k-head{ padding:14px 14px 0; } #panel-clubs .k-comms{ margin:6px -14px 0; padding:0 8px; }
  .k-chips{ grid-template-columns:repeat(4, 1fr); gap:12px 2px; }
  .k-pills.k-week{ grid-template-columns:repeat(4, 1fr); }
  .k-week .k-pill b{ font-size:14px; }
  .k-lens{ width:100%; } .k-lens .mt-chip{ flex:1; padding:11px 0; }
  .k-list .k-pill{ grid-template-columns:64px 1fr auto; padding:12px; }
}

/* clubs: choose the period (day, week, dates, all) */
.k-period{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; }
.k-modes{ display:flex; border:1px solid var(--color-ash-divider); border-radius:10px; overflow:hidden; background:var(--color-white-canvas); }
.k-modes .mt-chip{ border:0; border-radius:0; padding:9px 16px; font-size:13.5px; background:none; }
.k-modes .mt-chip + .mt-chip{ border-left:1px solid var(--color-ash-divider); }
.k-modes .mt-chip.is-on{ background:var(--color-accent); color:#fff; }
.k-when-pick{ display:flex; align-items:center; }
.k-dates{ display:flex; gap:10px; flex-wrap:wrap; }
.k-dates label{ display:flex; align-items:center; gap:6px; font:600 13px var(--font-switzer); color:var(--color-slate-helper); }
.k-date{ width:auto; min-width:0; padding:8px 10px; }
.k-dow{ font:700 13px var(--font-switzer); color:var(--color-slate-helper); min-width:30px; }
@media (max-width:640px){ .k-period{ width:100%; } .k-modes{ width:100%; } .k-modes .mt-chip{ flex:1; padding:11px 0; } .k-when-pick{ width:100%; } }

/* ---------- Xposure 26: the poster's look (charcoal, red, blue disc, film strip) ---------- */
.event-xposure{
  display:block; position:relative; overflow:hidden; isolation:isolate; padding:16px 18px 0; color:#fff; border-radius:18px; background:#1d1d1f;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.event-xposure::before{
  content:""; position:absolute; z-index:-1; right:-8%; top:-30%; width:62%; height:150%; background:linear-gradient(160deg, #d0140a, #a60e07);
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%, 6% 82%, 1% 66%, 9% 50%, 3% 34%, 11% 18%);
}
.xp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.xp-kicker{ font:600 11px var(--font-switzer); letter-spacing:.34em; text-transform:uppercase; color:#f1f1f1; }
.xp-by{ font:800 italic 14px var(--font-basier-circle); letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.xp-main{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px 22px; margin-top:8px; }
.xp-title{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:0 .22em; font:800 clamp(40px, 12vw, 70px)/1 var(--font-basier-circle); letter-spacing:-.02em; color:#fff; text-transform:uppercase; }
.xp-title > span:first-child{ display:inline-flex; align-items:center; }
.xp-o{ width:.82em; height:.82em; margin:0 .02em; flex:none; }
.xp-year{ color:#fff; }
.xp-tagline{ margin:6px 0 0; font:600 11px var(--font-switzer); letter-spacing:.26em; text-transform:uppercase; color:#f1d9d6; }
.xp-themes{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:12px; padding:8px 16px 8px 12px; border-radius:999px; background:#efe6d2; color:#161616; }
.xp-themes span{ font:700 9.5px var(--font-switzer); letter-spacing:.22em; text-transform:uppercase; color:#8a2a1e; }
.xp-themes b{ font:800 14px var(--font-basier-circle); text-transform:uppercase; letter-spacing:.01em; }
.xp-themes i{ width:1px; height:14px; background:#161616; opacity:.5; }
.xp-side{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.xp-prize{ width:118px; height:118px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 35% 30%, #1b3bd0, #0a1f9c 70%); box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.4); }
.xp-prize b{ order:1; font:800 36px/1 var(--font-basier-circle); letter-spacing:-.01em; }
.xp-prize span{ order:2; margin-top:4px; font:700 9.5px var(--font-switzer); letter-spacing:.18em; text-transform:uppercase; color:#dfe6ff; }
.xp-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:auto; padding:11px 20px; border-radius:999px;
  font:800 14px var(--font-switzer); letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:#1a1204; background:#fbbf1c; border:0;
  box-shadow:0 6px 16px rgba(251,191,28,.28); transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s;
}
.xp-cta svg{ width:18px; height:18px; flex:none; }
.xp-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(251,191,28,.4); }
.xp-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.xp-note{ margin-top:12px; font:600 11px var(--font-switzer); letter-spacing:.14em; text-transform:uppercase; color:#e9e9e9; opacity:.85; }
/* the film strip: blue, red, yellow, green and black blocks, with a sprocket row above and below */
.xp-strip{
  display:flex; height:30px; margin:14px -18px 0; background-color:#efe6d2; padding:5px 0;
  background-image:radial-gradient(circle, #1d1d1f 2px, transparent 2.5px), radial-gradient(circle, #1d1d1f 2px, transparent 2.5px);
  background-size:14px 5px, 14px 5px; background-position:3px 0, 3px 100%; background-repeat:repeat-x, repeat-x;
}
.xp-strip i{ flex:1; margin:5px 0; }
.xp-strip i:nth-child(1){ background:#0a1f9c; } .xp-strip i:nth-child(2){ background:#d0140a; } .xp-strip i:nth-child(3){ background:#fbbf1c; }
.xp-strip i:nth-child(4){ background:#0f8a2f; } .xp-strip i:nth-child(5){ background:#161616; }
@media (max-width:560px){
  .event-xposure{ padding:14px 14px 0; }
  .event-xposure::before{ width:78%; right:-20%; opacity:.9; }
  .xp-main{ grid-template-columns:1fr; gap:12px; }
  .xp-themes{ display:flex; border-radius:18px; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 16px; } .xp-themes i{ display:none; }
  .xp-side{ flex-direction:row; justify-content:space-between; }
  .xp-prize{ width:104px; height:104px; } .xp-prize b{ font-size:32px; }
  .xp-cta{ flex:1; padding:13px 10px; }
  .xp-strip{ margin:12px -14px 0; }
}
@media (min-width:900px){ .event-xposure{ padding:22px 28px 0; } .xp-title{ font-size:76px; } .xp-strip{ margin:16px -28px 0; } .xp-prize{ width:132px; height:132px; } .xp-prize b{ font-size:42px; } }
@media (prefers-reduced-motion: no-preference){ .xp-o{ animation:xpSpin 14s linear infinite; } @keyframes xpSpin{ to{ transform:rotate(360deg); } } }
@media print{ .event-xposure{ background:none!important; color:#000!important; border:1px solid #999; box-shadow:none; } .event-xposure::before{ display:none; } .xp-title, .xp-year, .xp-kicker, .xp-by, .xp-note{ color:#000!important; } }
/* Exam cards: Hall and Seat as two boxes, dashed and TBA until the seating plan fills them */
.cls-hs{ display:flex; gap:8px; margin-top:7px; }
.cls-hs .hs{ display:flex; flex-direction:column; min-width:68px; padding:5px 12px 6px; border-radius:11px; line-height:1.15;
  background:var(--color-mist-hairline); border:1.5px dashed var(--color-ash-divider); }
.cls-hs .hs b{ font:700 9.5px var(--font-switzer); text-transform:uppercase; letter-spacing:.12em; color:var(--color-slate-helper); }
.cls-hs .hs i{ font:800 16px var(--font-basier-circle); font-style:normal; color:var(--color-slate-helper); opacity:.65; margin-top:2px; }
.cls-hs .hs.is-set{ background:var(--color-sky-wash); border:1.5px solid var(--color-accent); }
.cls-hs .hs.is-set b{ color:var(--color-accent); }
.cls-hs .hs.is-set i{ color:var(--color-portrait-ink); opacity:1; }