/* ============================================================================
   Student Inspiration Week — Emirates NBD
   Mobile-first event app. Dark navy + glowing-path theme.
   Edit brand values in :root. Content lives in data.js.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand (authoritative — from the brief) */
  --navy:        #072447;   /* primary  */
  --white:       #FFFFFF;   /* secondary */
  --blue:        #1158AD;   /* brighter signature blue */
  --near-black:  #020202;
  --gradient:    linear-gradient(180deg, #020202 -10.46%, #072447 33.89%, #1158AD 66.97%);

  /* Accent (official) + glow world */
  --accent:      #2765FF;   /* official Emirates NBD accent */
  --accent-ink:  #85AAFF;   /* lighter tint of the accent for small text/icons — AA on dark cards */
  --glow:        #2765FF;   /* accent used for fills, borders, glows, active states */
  --glow-soft:   rgba(39, 101, 255, 0.5);
  --violet:      #6C63FF;   /* blue-purple glass accent */
  --success:     #2ED47A;   /* completed / done — success green */

  /* Text on the dark field */
  --text:        #F4F8FF;
  --text-dim:    #A9BEDC;
  --text-faint:  #97ABC9;   /* raised from #6F86A8 for AA on dark cards */

  /* Glass surfaces — dark-navy translucent so text on cards stays AA
     regardless of the bright background/glowing path bleeding through. */
  --glass:       rgba(10, 27, 51, 0.74);
  --glass-2:     rgba(20, 42, 72, 0.80);
  --glass-brd:   rgba(255, 255, 255, 0.14);
  --glass-brd-2: rgba(120, 180, 255, 0.35);

  /* Spacing — 8pt grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius:   18px;
  --radius-sm:12px;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --tabbar-h: 68px;
  --topbar-h: 52px;
  --maxw: 680px;               /* content column width on larger screens */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--near-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--glow);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Backdrop (fixed glowing dunes) ------------------------------------ */
.app-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--gradient); }
.app-backdrop__img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max(100%, 900px); height: 62%;
  background: url("images/background.png") center bottom / cover no-repeat;
  opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
}
.app-backdrop__glow {
  position: absolute; left: 50%; top: -8%; transform: translateX(-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(17,88,173,.55), transparent 68%);
  filter: blur(30px);
}

/* ---- App frame --------------------------------------------------------- */
.app {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---- Top bar ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  padding: 0 var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  /* Gradient background contained to the bar: 90% black at top → transparent at its bottom edge. */
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}
.topbar__logo { display: flex; align-items: center; gap: var(--s4); color: var(--white); min-height: 44px; padding: 0; margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); }
.topbar__logoimg { height: 22px; width: auto; display: block; }
.topbar__logoimg--ei { height: 16px; }
.topbar__section { font-size: 12px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* ---- Views ------------------------------------------------------------- */
.views {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s5) var(--s4) calc(var(--tabbar-h) + var(--s6) + env(safe-area-inset-bottom));
  scroll-behavior: smooth;
}
.view { animation: viewIn .38s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Bottom tab bar — floating glass pill ------------------------------ */
.tabbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  z-index: 1000;
  width: calc(100% - var(--s5)); max-width: calc(var(--maxw) - var(--s5));
  display: flex; gap: 2px;
  padding: 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(6,16,32,.72));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-faint);
  flex: 1; min-height: 50px; padding: 6px 8px; border-radius: 999px;
  position: relative;
  transition: color .2s var(--ease);
}
.tab__icon { width: 24px; height: 24px; }
.tab__icon svg { width: 100%; height: 100%; }
.tab__label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.tab.is-active { color: var(--white); }
/* Active tab: a floating frosted-glass capsule (iOS "Liquid Glass" style) —
   translucent fill, bright specular top edge, fine light border, soft float shadow. */
.tab.is-active::before {
  content: ""; position: absolute; inset: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),   /* specular top highlight */
    inset 0 -1px 2px rgba(0,0,0,0.16),       /* faint lower shade for depth */
    0 4px 12px rgba(0,0,0,0.30);             /* soft float shadow */
  z-index: -1;
  animation: tabPop .28s var(--ease);
}
@keyframes tabPop {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
.tab.is-active .tab__icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }

/* ---- Reusable: glass card --------------------------------------------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass--accent { border-color: var(--glass-brd-2); box-shadow: 0 8px 34px rgba(17,88,173,.28), inset 0 1px 0 rgba(255,255,255,.12); }

/* ---- Typography helpers ----------------------------------------------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; letter-spacing: -.01em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; margin-bottom: var(--s3); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.muted { color: var(--text-dim); }
.section { margin-top: var(--s7); }
.section:first-child { margin-top: 0; }
.stack > * + * { margin-top: var(--s3); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 6px 20px rgba(17,88,173,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--ghost { color: var(--text); border: 1px solid var(--glass-brd); background: var(--glass); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; font-size: 14px; padding: 0 var(--s4); }

/* ---- Icon sizing ------------------------------------------------------- */
.qk-ico svg, .pillar__ico svg, .ic-ico svg, .es-ico svg,
.stamp__lock svg, .stamp__tick svg, .day-card__meta span svg { width: 100%; height: 100%; display: block; }
.btn svg { width: 19px; height: 19px; flex: none; }
.act-card__chev svg { width: 20px; height: 20px; }
.sub__back svg, .detail__back svg, .pathway h3 svg, .acc__q svg, .bf-logo svg { width: 18px; height: 18px; flex: none; }

/* ============================================================================
   HOME
   ========================================================================== */
.hero { text-align: left; padding-top: var(--s4); }
.hero__dates { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3);
  font-size: 13px; font-weight: 600; color: var(--white);
  padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-brd); }
.hero__title { margin: var(--s2) 0; }
.hero__vp { color: var(--text-dim); font-size: 15px; margin-top: var(--s3); max-width: 34ch; }

/* Happening-now card */
.now { margin-top: var(--s5); padding: var(--s5); border-radius: var(--radius); }
.now__label { display: flex; align-items: center; gap: 8px; }
.now__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 0 var(--glow-soft); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--glow-soft);} 70%{box-shadow:0 0 0 10px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.now__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: var(--s3) 0 var(--s1); }
.now__meta { color: var(--text-dim); font-size: 14px; }
.now__next { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--glass-brd); font-size: 14px; color: var(--text-dim); }
.now__next b { color: var(--text); font-weight: 600; }

/* ---- Countdown --------------------------------------------------------- */
.countdown {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--s1);
  margin: var(--s4) 0 var(--s2);
}
.cd__unit {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; min-width: 0; max-width: 72px; padding: 9px 4px;
  background: var(--glass); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-sm);
}
.cd__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 7vw, 30px); line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; text-align: center;
}
.cd__lbl { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.cd__sep { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--text-faint); padding-top: 8px; }

/* Kick-off state */
.now.cd-live { animation: livePulse 1.4s var(--ease) 1; }
.cd--done .cd__num { color: var(--accent-ink); }
@keyframes livePulse {
  0%   { box-shadow: 0 8px 34px rgba(17,88,173,.28), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 0 var(--glow-soft); }
  40%  { box-shadow: 0 8px 34px rgba(17,88,173,.28), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 14px rgba(39,101,255,.18); }
  100% { box-shadow: 0 8px 34px rgba(17,88,173,.28), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 0 transparent; }
}

/* ---- Confetti burst ---------------------------------------------------- */
.confetti { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -24px; border-radius: 2px; opacity: 0;
  animation-name: confettiFall; animation-timing-function: cubic-bezier(.2,.6,.5,1); animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0%   { transform: translate3d(0, -24px, 0) rotate(var(--r)); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--x), 105vh, 0) rotate(calc(var(--r) + 540deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .now.cd-live { animation: none; }
}

/* Quick links */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.quick__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--radius); text-align: left; }
.quick__item .qk-ico { width: 30px; height: 30px; flex: none; color: var(--accent-ink); }
.quick__item span { font-weight: 600; font-size: 14px; }

/* Pillars strip */
.pillars { display: flex; gap: var(--s3); overflow-x: auto; padding: var(--s2) var(--s1) var(--s3); margin: 0 calc(var(--s4) * -1); scroll-snap-type: x mandatory; }
.pillars::-webkit-scrollbar { display: none; }
.pillar { scroll-snap-align: start; flex: 0 0 66%; padding: var(--s4); border-radius: var(--radius); }
.pillars > :first-child { margin-left: var(--s4); }
.pillars > :last-child { margin-right: var(--s4); }
.pillar__ico { width: 34px; height: 34px; color: var(--accent-ink); margin-bottom: var(--s3); }
.pillar__img { width: 80px; height: 80px; object-fit: contain; display: block; margin-bottom: var(--s3); }
.pillar h3 { font-size: 15px; margin-bottom: 6px; }
.pillar p { font-size: 13px; color: var(--text-dim); }

/* ============================================================================
   AGENDA — glowing path timeline
   ========================================================================== */
.timeline { position: relative; margin-top: var(--s5); padding-left: 52px; }
.timeline__line {
  position: absolute; left: 21px; top: 12px; bottom: 12px; width: 3px;
  background: linear-gradient(180deg, var(--glow), var(--blue), var(--violet));
  box-shadow: 0 0 12px var(--glow-soft); border-radius: 3px;
}
.day-node { position: relative; margin-bottom: var(--s4); }
.day-node__marker {
  position: absolute; left: -52px; top: 6px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1;
  color: var(--white); text-align: center;
  /* opaque navy base under the glassy gradient so the timeline line never shows through */
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.38), rgba(17,88,173,.28) 45%, rgba(7,36,71,.92)), var(--navy);
  border: 1.5px solid var(--glass-brd-2);
  box-shadow: 0 0 16px var(--glow-soft), inset 0 1px 2px rgba(255,255,255,.4);
}
.day-node__marker small { display:block; font-size: 8px; font-weight: 600; opacity: .8; }
.day-card { width: 100%; text-align: left; padding: var(--s4) var(--s5); border-radius: var(--radius); transition: transform .15s var(--ease), border-color .2s; }
.day-card:active { transform: scale(.985); }
.day-card__theme { font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.day-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 3px 0 6px; }
.day-card__meta { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.day-node.is-today .day-card { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow-soft), 0 8px 30px rgba(17,88,173,.35); }
.badge-today { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--white); padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
/* Completed days: bead keeps its DAY + number at full colour, with a small
   green 'done' check badge tucked into the bottom-right corner. */
.day-node__check {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--success);
  border: 2px solid #06172c;         /* dark ring so the badge reads as a separate chip */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
.day-node__check::after {
  content: ""; width: 6px; height: 3.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}

/* Today: solid accent fill with a pulsing halo — the single brightest marker */
.day-node.is-today .day-node__marker {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  box-shadow: 0 0 0 0 rgba(39, 101, 255, 0.5), 0 0 22px var(--glow-soft), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  animation: markerPulse 2.2s var(--ease) infinite;
}
@keyframes markerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(39, 101, 255, 0.5),  0 0 22px var(--glow-soft), inset 0 1px 2px rgba(255,255,255,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(39, 101, 255, 0), 0 0 22px var(--glow-soft), inset 0 1px 2px rgba(255,255,255,.5); }
  100% { box-shadow: 0 0 0 0 rgba(39, 101, 255, 0),    0 0 22px var(--glow-soft), inset 0 1px 2px rgba(255,255,255,.5); }
}

/* Day detail */
.detail__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 600; font-size: 14px; margin-bottom: var(--s4); min-height: 44px; }
.detail__hero { padding: var(--s5); border-radius: var(--radius); margin-bottom: var(--s5); }
.detail__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.note { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-brd); }
.note b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 2px; }
.note span { font-size: 14px; }
.note__map { display: inline-flex; margin-top: var(--s3); color: var(--accent-ink); }
.note__map svg { width: 16px; height: 16px; }

.session { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--glass-brd); }
.session:last-child { border-bottom: none; }
.session__time { flex: none; width: 52px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent-ink); }
.session__body h4 { font-size: 15px; font-weight: 600; }
.session__body p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.session__body .spk { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ============================================================================
   ACTIVATIONS
   ========================================================================== */
.act-grid { display: grid; gap: var(--s4); margin-top: var(--s5); }
.act-card { text-align: left; padding: var(--s5); border-radius: var(--radius); display: flex; gap: var(--s4); align-items: flex-start; transition: transform .15s var(--ease); }
.act-card:active { transform: scale(.985); }
.act-card__ico {
  flex: none; width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  background: linear-gradient(150deg, rgba(39,101,255,.92), rgba(108,99,255,.75));
  box-shadow: inset 0 1px 3px rgba(255,255,255,.35), 0 6px 16px rgba(17,88,173,.4);
}
.act-card__ico svg { width: 26px; height: 26px; }
.act-card__body { flex: 1; }
.act-card__body h3 { font-size: 16px; }
.act-card__body p { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.act-card__chev { color: var(--text-faint); align-self: center; }
.act-card__tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tag-progress { background: rgba(39,101,255,.2); color: var(--accent-ink); }
.tag-done { background: rgba(108,99,255,.22); color: #c9c4ff; }

/* Sub-view shell */
.sub__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 600; font-size: 14px; margin-bottom: var(--s4); min-height: 44px; }

/* Passport */
.passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) 0; }
.stamp {
  aspect-ratio: 1; border-radius: var(--radius); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--glass-brd); background: var(--glass); text-align: center; padding: var(--s3);
}
.stamp.is-locked { opacity: .78; }
.stamp.is-earned { border-style: solid; border-color: var(--glass-brd-2);
  background: radial-gradient(circle at 35% 25%, rgba(56,166,255,.35), rgba(7,36,71,.6));
  box-shadow: 0 0 20px var(--glow-soft), inset 0 1px 2px rgba(255,255,255,.3); }
.stamp__num { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.stamp.is-earned .stamp__num { text-shadow: 0 0 12px var(--glow-soft); }
.stamp__name { font-size: 11px; font-weight: 600; }
.stamp__lock { width: 20px; height: 20px; color: var(--text-faint); }
.stamp__tick { width: 26px; height: 26px; color: var(--accent-ink); }
.passport-progress { text-align: center; margin-bottom: var(--s4); }
.passport-progress .pp-count { font-family: var(--font-display); font-size: 40px; font-weight: 700; }
.passport-bar { height: 8px; border-radius: 999px; background: var(--glass); overflow: hidden; margin-top: var(--s3); }
.passport-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--glow), var(--violet)); transition: width .5s var(--ease); }
.code-entry { display: flex; gap: var(--s3); margin-top: var(--s4); }
.code-entry input { flex: 1; min-height: 48px; padding: 0 var(--s4); border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-brd); color: var(--text); font-size: 16px; font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.code-entry input::placeholder { color: var(--text-faint); letter-spacing: normal; text-transform: none; font-family: var(--font-body); }
.hint { font-size: 12px; color: var(--text-faint); margin-top: var(--s3); text-align: center; }
.passport-done { text-align: center; padding: var(--s5); border-radius: var(--radius); margin-top: var(--s5);
  background: radial-gradient(circle at 50% 0%, rgba(108,99,255,.35), transparent 70%); border: 1px solid var(--glass-brd-2); }
.passport-done .big { font-size: 46px; }

/* Quiz */
.quiz-shell { margin-top: var(--s5); }
.quiz-progress { font-size: 12px; color: var(--text-dim); margin-bottom: var(--s3); font-weight: 600; }
.quiz-q { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: var(--s5); }
.quiz-opts { display: grid; gap: var(--s3); }
.quiz-opt { text-align: left; padding: var(--s4) var(--s5); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-brd); font-size: 15px; font-weight: 500; min-height: 56px; transition: transform .12s var(--ease), border-color .2s; }
.quiz-opt:active { transform: scale(.98); }
.quiz-result { text-align: center; padding: var(--s6) var(--s5); border-radius: var(--radius); margin-top: var(--s5); }
.quiz-result .emoji { font-size: 64px; }
.quiz-result h2 { margin: var(--s3) 0; }

/* Photo booth */
.booth-stage { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--glass); border: 1px solid var(--glass-brd); margin: var(--s4) 0; display:flex;align-items:center;justify-content:center; }
.booth-stage canvas { width: 100%; height: 100%; object-fit: contain; }
.booth-stage .booth-empty { color: var(--text-faint); text-align: center; padding: var(--s5); font-size: 14px; }
.frame-row { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s2); margin: 0 calc(var(--s4)*-1); }
.frame-row::-webkit-scrollbar { display:none; }
.frame-row > :first-child { margin-left: var(--s4); }
.frame-row > :last-child { margin-right: var(--s4); }
.frame-chip { flex: none; padding: 10px 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-brd); font-size: 13px; font-weight: 600; white-space: nowrap; min-height: 40px; }
.frame-chip.is-active { border-color: var(--glow); color: var(--white); box-shadow: 0 0 12px var(--glow-soft); }
.booth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Embed slot (polls / feedback) */
.embed-slot { padding: var(--s6) var(--s5); border-radius: var(--radius); text-align: center; margin-top: var(--s5); border-style: dashed; }
.embed-slot .es-ico { width: 46px; height: 46px; margin: 0 auto var(--s4); color: var(--accent-ink); }
.embed-slot p { color: var(--text-dim); font-size: 14px; margin-bottom: var(--s4); }
.embed-frame { width: 100%; min-height: 70vh; border: none; border-radius: var(--radius); margin-top: var(--s4); background: var(--glass); }
.prompt-list { display: grid; gap: var(--s3); margin-top: var(--s5); }
.prompt-item { padding: var(--s4); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-brd); font-size: 14px; }
.prompt-item b { color: var(--accent-ink); font-family: var(--font-display); }

/* Social wall */
.wall-grid { columns: 2; column-gap: var(--s3); margin-top: var(--s5); }
.wall-card { break-inside: avoid; margin-bottom: var(--s3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-brd); background: var(--glass); }
.wall-card canvas, .wall-card .wall-thumb { width: 100%; display: block; }
.wall-card .wall-cap { padding: var(--s3); font-size: 12px; color: var(--text-dim); }
.wall-empty { text-align: center; color: var(--text-faint); padding: var(--s6) var(--s4); font-size: 14px; }

/* ============================================================================
   INFO
   ========================================================================== */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.info-card { padding: var(--s4); border-radius: var(--radius); }
.info-card .ic-ico { width: 26px; height: 26px; color: var(--accent-ink); margin-bottom: var(--s2); }
.info-card b { display: block; font-size: 14px; margin-bottom: 3px; }
.info-card p { font-size: 12.5px; color: var(--text-dim); }

.people { display: grid; gap: var(--s3); margin-top: var(--s4); }
.person { display: flex; gap: var(--s4); align-items: center; padding: var(--s4); border-radius: var(--radius); }
.person__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--white);
  background: linear-gradient(140deg, var(--blue), var(--violet)); box-shadow: inset 0 1px 2px rgba(255,255,255,.3); }
.person__avatar--photo { overflow: hidden; background: var(--glass); }
.person__avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.person__body { flex: 1; min-width: 0; }
.person b { font-size: 15px; }
.person span { display: block; font-size: 12px; color: var(--text-dim); font-weight: 600; margin: 1px 0 3px; }
.person p { font-size: 12.5px; color: var(--text-dim); }
.person__li { flex: none; align-self: center; color: var(--accent-ink); }
.person__li svg { width: 20px; height: 20px; }
.btn--icon { min-height: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; }

.social-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-brd); font-size: 13px; font-weight: 600; min-height: 44px; }

.pathway { display: block; padding: var(--s5); border-radius: var(--radius); margin-top: var(--s3); text-align: left; }
.pathway h3 { font-size: 16px; display: flex; align-items: center; justify-content: space-between; }
.pathway p { font-size: 13px; color: var(--text-dim); margin-top: 5px; }

.acc { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-brd); margin-top: var(--s3); background: var(--glass); }
.acc__q { width: 100%; text-align: left; padding: var(--s4) var(--s5); font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 52px; }
.acc__a { padding: 0 var(--s5); max-height: 0; overflow: hidden; transition: max-height .3s var(--ease), padding .3s var(--ease); color: var(--text-dim); font-size: 13.5px; }
.acc.is-open .acc__a { max-height: 260px; padding: 0 var(--s5) var(--s4); }
.acc__q svg { transition: transform .3s var(--ease); flex: none; }
.acc.is-open .acc__q svg { transform: rotate(180deg); }

.logos { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.logo-pill { font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-brd); color: var(--text-dim); }

.brand-footer { text-align: center; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--glass-brd); color: var(--text-faint); font-size: 12px; }
.brand-footer .bf-logo { display:inline-flex; align-items:center; justify-content:center; margin-bottom: var(--s3); }
.brand-footer .bf-logoimg { height: 28px; width: auto; display: block; }

/* Chips / dividers */
.chip { display:inline-block; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-brd); color:var(--text-dim); }

/* Dev day switcher (preview only) */
.devbar { position: absolute; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1001;
  display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(4,12,26,.9); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); font-size: 11px; }
.devbar button { padding: 5px 9px; border-radius: 999px; color: var(--text-dim); font-weight: 600; }
.devbar button.is-active { background: var(--glow); color: var(--near-black); }
.devbar .devbar__x { color: var(--text-faint); padding: 5px 8px; }

/* ---- Interaction: unified hover + press states ------------------------- */
/* One transition covers both the press (scale) and the hover (brighten)
   for every interactive card & button, so feedback feels consistent. */
.btn, .day-card, .act-card, .quick__item, .pathway, .quiz-opt,
.social-btn, .acc__q, .frame-chip, .tab {
  transition: transform .15s var(--ease), filter .18s var(--ease),
              border-color .18s var(--ease), box-shadow .2s var(--ease),
              color .2s var(--ease);
}
/* Hover only where a real pointer exists — keeps touch devices free of
   "sticky hover" (a hover look that stays stuck after a tap). */
@media (hover: hover) {
  .btn:hover, .day-card:hover, .act-card:hover, .quick__item:hover,
  .pathway[href]:hover, .quiz-opt:hover, .social-btn:hover,
  .acc__q:hover, .frame-chip:hover, .person__li:hover {
    filter: brightness(1.08);
  }
  /* bordered surfaces also brighten their edge to the bluish tint */
  .day-card:hover, .act-card:hover, .quick__item:hover, .pathway[href]:hover,
  .quiz-opt:hover, .social-btn:hover, .frame-chip:hover, .btn--ghost:hover {
    border-color: var(--glass-brd-2);
  }
  /* inactive bottom-tab labels lift toward full white */
  .tab:not(.is-active):hover { color: var(--text); }
}

/* ---- Larger screens: centered app column (no phone-frame chrome) ------- */
@media (min-width: 620px) {
  .app-backdrop::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 30%, rgba(17,88,173,.14), transparent 60%); }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}