/* WordCamp Philippines 2026 event app.
   Palette, type and radii are lifted verbatim from the WCPH 2026 site theme
   (--wp--preset--color--*): cream base, near-black ink, navy structure,
   brick red for what is live, marigold for attention, teal-blue for headings. */

@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/red-hat-display.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/dm-sans.woff2") format("woff2");
}

:root {
  --cream: #fffbfa;
  --ink: #1f1e20;
  --navy: #1e3b5f;
  --red: #a63a3a;
  --yellow: #f5af0f;
  --blue: #176790;

  --navy-deep: oklch(from var(--navy) calc(l - 0.06) c h);
  --navy-soft: oklch(from var(--navy) calc(l + 0.1) calc(c * 0.85) h);
  --muted: oklch(from var(--navy) 0.52 calc(c * 0.45) h);
  --line: color-mix(in oklab, var(--navy) 14%, var(--cream));
  --line-strong: color-mix(in oklab, var(--navy) 30%, var(--cream));
  --panel: #fff;
  --wash: color-mix(in oklab, var(--navy) 4%, var(--cream));

  /* Site radii: 20px surfaces, 8px media, 6px controls. */
  --r-card: 20px;
  --r-media: 8px;
  --r-control: 6px;

  --bar-h: 62px;
  --tab-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --text: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--navy); }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

.sprite { position: absolute; width: 0; height: 0; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- App chrome ---------- */

.appbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  /* Cream header carrying the full lockup, the same way the site does it. */
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.appbar-qr {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-control);
  background: var(--yellow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.16s var(--ease);
}
.appbar-qr:active { transform: scale(0.94); }
.appbar-qr .ico { width: 22px; height: 22px; }

.appbar-brand { display: flex; flex: none; margin-right: auto; }
.appbar-brand img { display: block; width: auto; height: 36px; }

.conn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.conn.is-offline { color: var(--red); }
.conn.is-offline .conn-dot { background: var(--red); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 22%, transparent); }

.tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  background: var(--navy);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.tabbar-inner {
  position: relative;
  display: flex;
  max-width: 640px;
  margin-inline: auto;
}

/* One indicator that slides, rather than a rule per tab that fades. It is a child
   of the row, so it is exactly one tab wide, sits flush on the bar's top edge, and
   runs edge to edge on the outer tabs with no padding gap. */
.tab-ind {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: calc(100% / var(--tab-count));
  background: var(--yellow);
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform 0.34s var(--ease);
}

.tabbar a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 2px 8px;
  text-decoration: none;
  color: color-mix(in oklab, var(--cream) 62%, var(--navy));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.tabbar a.active { color: var(--cream); }
.tabbar a.active .ico { color: var(--yellow); }
.tabbar a:active .ico { transform: scale(0.9); }
.tabbar .ico { transition: transform 0.18s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .tab-ind { transition: none; }
}

main {
  max-width: 640px;
  margin-inline: auto;
  padding:
    calc(var(--bar-h) + env(safe-area-inset-top) + 18px)
    max(18px, env(safe-area-inset-left))
    calc(var(--tab-h) + env(safe-area-inset-bottom) + 32px)
    max(18px, env(safe-area-inset-right));
}

.view { animation: rise 0.34s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Type primitives ---------- */

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}

/* The site marks every section heading with an 80x5 marigold rule. */
.section { margin-top: 34px; }
.section > h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--blue);
}
.section > h2 + .rule { margin-top: 12px; }
.rule { width: 80px; height: 5px; background: var(--yellow); border: 0; margin: 0 0 16px; }

.lede { margin: 10px 0 0; color: var(--muted); max-width: 62ch; }
.empty {
  margin: 0;
  padding: 26px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--wash);
  border-radius: var(--r-card);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--r-control);
  padding: 11px 18px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--red);
  color: var(--cream);
  transition: transform 0.16s var(--ease), filter 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-sun { background: var(--yellow); color: var(--ink); }
.btn-line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-on-red { background: var(--yellow); color: var(--ink); }
.btn-ghost-on-red { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cream) 55%, transparent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------- Hero (Today) ---------- */

.hero {
  border-radius: var(--r-card);
  padding: 24px;
  background: var(--red);
  color: var(--cream);
}
.hero.is-wrap { background: var(--navy); }
.hero .eyebrow { color: var(--yellow); display: flex; align-items: center; gap: 8px; }
.hero h2 { font-size: 1.85rem; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.hero p { margin: 12px 0 0; color: color-mix(in oklab, var(--cream) 88%, var(--red)); }
.hero strong { color: var(--cream); }

.countdown {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.countdown > div {
  flex: 1;
  min-width: 0;
  background: color-mix(in oklab, #000 14%, var(--red));
  border-radius: var(--r-media);
  padding: 12px 4px;
  text-align: center;
}
.hero.is-wrap .countdown > div { background: color-mix(in oklab, #000 16%, var(--navy)); }
.countdown b {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
/* Digits roll: the outgoing value leaves upward as the new one arrives. */
.countdown b > span {
  display: block;
  width: 100%;
}
.countdown b > span:not(:first-child) { position: absolute; inset: 0; }
.roll-in { animation: roll-in 0.42s var(--ease) both; }
.roll-out { animation: roll-out 0.42s var(--ease) both; }
@keyframes roll-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes roll-out { to { transform: translateY(-100%); opacity: 0; } }

.countdown .unit {
  display: block;
  margin-top: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  .roll-in, .roll-out { animation: none; }
  .roll-out { display: none; }
}

.notice {
  margin-top: 16px;
  background: var(--yellow);
  border-radius: var(--r-card);
  padding: 18px 20px;
  color: var(--ink);
}
.notice h3 { font-size: 1.05rem; font-weight: 700; }
.notice p { margin: 6px 0 0; font-size: 0.92rem; }

/* ---------- Session rows ---------- */

.rows { display: flex; flex-direction: column; }
.rows-top { margin-top: 18px; }

.row {
  display: grid;
  grid-template-columns: 58px 1fr 38px;
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.row:active { background: var(--wash); }

.row-time {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.row-time small { display: block; font-size: 0.7rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.row-body { min-width: 0; }
.h3 {
  display: block;
  font-family: var(--display);
  font-size: 1.03rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.row-meta { display: block; margin-top: 5px; font-size: 0.85rem; line-height: 1.35; color: var(--muted); }

.track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--track, var(--blue));
}
.track::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--track, var(--blue)); }

.star {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin: -6px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in oklab, var(--navy) 42%, var(--cream));
  cursor: pointer;
}
.star .ico { width: 21px; height: 21px; }
.star[aria-pressed="true"] { color: var(--red); }
.star[aria-pressed="true"] .ico { fill: var(--red); animation: pop 0.36s var(--ease); }
@keyframes pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.22); } }

.is-live .row-time { color: var(--red); }

.live-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 100px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The live hero is already red, so the pill inverts to stay legible. */
.hero .live-pill { background: var(--cream); color: var(--red); }
.row-time .live-pill { margin-top: 3px; }

.daybar {
  position: sticky;
  top: calc(var(--bar-h) + env(safe-area-inset-top));
  z-index: 5;
  margin: 26px 0 0;
  padding: 12px 0 10px;
  background: var(--cream);
  box-shadow: 0 10px 10px -6px var(--cream);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Segmented control ---------- */

.segmented {
  display: flex;
  gap: 4px;
  margin: 18px 0 4px;
  padding: 4px;
  background: var(--wash);
  border-radius: var(--r-control);
}
.segmented button {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 4px;
  padding: 8px 6px;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.segmented button small {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.75;
}
.segmented button[aria-selected="true"] { background: var(--navy); color: var(--cream); }

/* ---------- Detail ---------- */

.back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px -6px;
  padding: 6px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue);
  cursor: pointer;
}

.detail-title { font-size: 1.75rem; line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }

.facts {
  display: flex;
  flex-direction: column;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-card);
  overflow: hidden;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
}
.facts li + li { border-top: 1px solid color-mix(in oklab, var(--cream) 16%, var(--navy)); }
.facts .ico { color: var(--yellow); }
.facts b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 700; }
.facts span { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 68%, var(--navy)); }
.facts button { margin-left: auto; border: 0; background: none; padding: 6px; color: var(--yellow); cursor: pointer; }

.prose { margin: 22px 0 0; color: color-mix(in oklab, var(--ink) 82%, var(--cream)); max-width: 66ch; }
.prose p { margin: 0 0 12px; }

/* ---------- People ---------- */

.people { display: flex; flex-direction: column; }
.person {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.people .person:last-child { border-bottom: 1px solid var(--line); }
.person:active { background: var(--wash); }
.avatar {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 84px; height: 84px; font-size: 1.7rem; box-shadow: 0 0 0 4px var(--yellow); margin: 4px 0 0 4px; }
.person { align-items: flex-start; }
.person .avatar { margin-top: 2px; }
.person .h3 { font-size: 1rem; }
.person .row-meta { margin-top: 3px; }

.person-when {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--track, var(--blue));
}
.person-when.is-tba { color: var(--muted); font-weight: 700; }

.person.is-static { cursor: default; border-top: 1px solid var(--line); }
.people .person.is-static:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Today blocks ---------- */

.group-go {
  margin-left: auto;
  flex: none;
  align-self: center;
  padding: 7px 12px;
  border-radius: 100px;
  background: var(--wash);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.stats > div {
  padding: 18px 12px;
  text-align: center;
  background: var(--wash);
  border-radius: var(--r-card);
}
.stats b {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.stats span {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
}

/* Doubled class so this beats the Connect variant defined further down. */
.gentle.gentle-ink .ico { color: var(--blue); fill: none; }

/* ---------- Update bar ---------- */

.update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 32px), 420px);
  padding: 10px 10px 10px 16px;
  border-radius: 100px;
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 12px 30px -12px oklch(from var(--navy) l c h / 0.55);
  animation: rise 0.3s var(--ease) both;
}
.update-bar[hidden] { display: none; }
.update-bar span { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 700; }
.update-go {
  flex: none;
  border: 0;
  border-radius: 100px;
  padding: 8px 16px;
  background: var(--yellow);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.update-later {
  flex: none;
  border: 0;
  background: none;
  padding: 4px 6px;
  font-size: 1.25rem;
  line-height: 1;
  color: color-mix(in oklab, var(--cream) 65%, var(--navy));
  cursor: pointer;
}

/* ---------- Install banner ---------- */

.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--wash);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: rise 0.34s var(--ease) both;
}
.install-banner img { flex: none; width: 32px; height: 32px; border-radius: 6px; }
.install-banner div { flex: 1; min-width: 0; }
.install-banner b { display: block; font-family: var(--display); font-size: 0.84rem; line-height: 1.2; }
/* One line each. The install section below carries the detail. */
.install-banner span {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.install-cta {
  flex: none;
  border: 0;
  border-radius: 100px;
  padding: 7px 13px;
  background: var(--navy);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
}
.install-close {
  flex: none;
  margin: -6px -6px -6px -4px;
  padding: 6px;
  border: 0;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* ---------- Emergency ---------- */

.emergency .daybar { position: static; }

.emergency-first {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--r-card);
  background: var(--red);
  color: var(--cream);
  text-decoration: none;
}
.emergency-first:active { transform: scale(0.99); }
.emergency-first em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.emergency-first b {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}
.emergency-icon { width: 34px; height: 34px; color: color-mix(in oklab, var(--cream) 70%, var(--red)); }

/* ---------- Side events ---------- */

.side-event { cursor: default; }
.side-event .row-time { text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.04em; }
.side-event .row-time small { font-size: 1.2rem; letter-spacing: -0.02em; color: var(--navy); }
.side-event .row-meta + .row-meta { margin-top: 4px; }

.side-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.side-meta em {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--wash);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.side-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.side-links a {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in oklab, var(--blue) 30%, transparent);
}

/* ---------- Checklist ---------- */

.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.progress-bar { flex: 1; height: 8px; border-radius: 100px; background: var(--line); overflow: hidden; }
.progress-bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--yellow);
  transition: width 0.4s var(--ease);
}
.progress b { font-family: var(--display); font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.checklist { margin: 6px 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist p { margin: 5px 0 0; font-size: 0.88rem; color: var(--muted); }
.checklist li.is-done .h3 { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.tick {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tick .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.tick[aria-pressed="true"] {
  background: var(--blue);
  box-shadow: none;
  color: var(--cream);
}
.tick[aria-pressed="true"] .ico { animation: pop 0.36s var(--ease); }

.checklist-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in oklab, var(--blue) 30%, transparent);
}

/* ---------- Numbered / icon steps ---------- */

.steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .ico { color: var(--blue); }
.steps span { font-size: 0.95rem; }
.step-n {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 800;
}

/* ---------- Open-Source Library ---------- */

.book {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.book:last-of-type { border-bottom: 1px solid var(--line); }
.book header { display: flex; align-items: center; gap: 14px; }
.book header .avatar { width: 56px; height: 56px; }
.book .h3 { font-size: 1.1rem; }
.book-link {
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
}
.book-bio { margin: 14px 0 16px; color: color-mix(in oklab, var(--ink) 78%, var(--cream)); font-size: 0.92rem; }
.book .eyebrow { margin-bottom: 8px; }

.topics { margin: 0 0 18px; padding: 0; list-style: none; }
.topics li {
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--wash);
  border-radius: var(--r-control);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--r-control);
  padding: 10px 14px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: inherit;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.slot:active { transform: scale(0.97); }
.slot.is-mine { background: var(--blue); box-shadow: none; color: var(--cream); }
.slot.is-mine .slot-tick { width: 15px; height: 15px; stroke-width: 2.6; }
/* Taken by a different Book at the same time: still tappable, it just swaps. */
.slot.is-busy { color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- Credits ---------- */

.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
/* On Info the same grid sits on cream and wraps to a fixed three across. */
.face {
  min-width: 0;
  text-align: center;
  /* Names like "Rene Christopher Caralian" have to break rather than run into
     the next cell. */
  overflow-wrap: anywhere;
}
.face .avatar { width: 60px; height: 60px; margin: 0 auto 8px; }
.face b {
  display: block;
  font-family: var(--display);
  font-size: 0.86rem;
  line-height: 1.2;
}
/* Scoped to .face-team, never bare span: .avatar is a span too, and colouring
   that yellow made the fallback initials invisible on the yellow disc. */
.face-team {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow);
}

.faces-ink { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin: 14px 0 6px; }
.faces-ink b { color: var(--ink); font-size: 0.82rem; }
.faces-ink .avatar { width: 64px; height: 64px; }
.faces-ink .face-team { color: var(--muted); }

.names { margin: 0; text-align: center; font-size: 0.9rem; line-height: 1.8; color: color-mix(in oklab, var(--cream) 84%, var(--navy)); }
.names-ink { text-align: left; color: var(--muted); }

/* ---------- Phase picker (prototype control) ---------- */

.phase-picker { position: relative; display: flex; flex: 0 1 auto; min-width: 0; }
.conn { border: 0; background: none; padding: 6px 0; font: inherit; cursor: pointer; }
/* Truncate rather than push the badge button off the screen at 320px. */
#phaseLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-caret { width: 16px; height: 16px; margin-left: -2px; }
.conn.is-pinned { color: var(--red); }
.conn.is-pinned .conn-dot { background: var(--red); }

.phase-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(78vw, 280px);
  padding: 8px;
  background: var(--panel);
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 var(--line), inset 0 0 0 1px var(--line), 0 18px 40px -18px oklch(from var(--navy) l c h / 0.4);
  animation: rise 0.2s var(--ease) both;
}
.phase-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--r-control);
  padding: 10px 12px;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.phase-menu button small { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.phase-menu button[aria-selected="true"] { background: var(--navy); color: var(--cream); }
.phase-menu button[aria-selected="true"] small { color: var(--yellow); }
.phase-note {
  margin: 6px 10px 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}
.phase-menu .phase-note:last-child { margin: 10px 10px 4px; }

/* ---------- Connect ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 0;
  border-radius: 100px;
  padding: 9px 15px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip.is-on { background: var(--navy); box-shadow: none; color: var(--cream); }

.shared { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.shared em {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 100px;
  background: color-mix(in oklab, var(--yellow) 26%, var(--cream));
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--ink) 85%, var(--yellow));
}

.opener {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-card);
  padding: 24px 22px;
  background: var(--yellow);
  font: inherit;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.opener:active { transform: scale(0.99); }

.gentle { margin: 0; padding: 0; list-style: none; }
.gentle li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.gentle li:last-child { border-bottom: 1px solid var(--line); }
.gentle .ico { flex: none; color: var(--yellow); fill: var(--yellow); }
.gentle span { font-size: 0.93rem; color: color-mix(in oklab, var(--ink) 82%, var(--cream)); }

/* ---------- Post-event survey ---------- */

.survey textarea {
  width: 100%;
  border: 0;
  border-radius: var(--r-control);
  padding: 13px 15px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  resize: vertical;
}
.survey textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.survey .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.survey .eyebrow { margin-bottom: 10px; }

.survey-sessions { margin: 0; padding: 0; list-style: none; }
.survey-sessions li { padding: 12px 0; border-top: 1px solid var(--line); }
.survey-sessions li:last-child { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.survey-sessions .h3 { font-size: 0.95rem; }
.survey-sessions .rating { margin: 6px 0 0; }
.survey-sessions .rate .ico { width: 24px; height: 24px; }

.survey-done { text-align: center; }
.survey-done .rule { margin-inline: auto; }
.survey-done .btn-row { justify-content: center; }

/* ---------- Ratings ---------- */

.rating { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; }
.rate {
  border: 0;
  background: none;
  padding: 4px;
  color: color-mix(in oklab, var(--navy) 34%, var(--cream));
  cursor: pointer;
}
.rate .ico { width: 30px; height: 30px; }
.rate.is-on { color: var(--yellow); }
.rate.is-on .ico { fill: var(--yellow); }
.rating-note { margin-left: 8px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }

/* ---------- FAQ and news ---------- */

.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-caret { flex: none; color: var(--blue); transition: transform 0.24s var(--ease); }
.qa details[open] .qa-caret { transform: rotate(180deg); }
.qa details p {
  margin: 0 0 16px;
  padding-right: 30px;
  font-size: 0.92rem;
  color: color-mix(in oklab, var(--ink) 78%, var(--cream));
}

.news-row { text-decoration: none; color: inherit; }
.news-row .row-time { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; }
.news-row .row-time small { font-size: 1.1rem; letter-spacing: -0.02em; color: var(--navy); }

/* ---------- Search ---------- */

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0 14px;
  background: var(--wash);
  border-radius: var(--r-control);
}
.search .ico { color: var(--muted); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 13px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  border: 0;
  background: none;
  padding: 4px 0 4px 4px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* ---------- Venue ---------- */

.venue-card {
  background: var(--blue);
  color: var(--cream);
  border-radius: var(--r-card);
  padding: 24px;
}
.venue-card h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.venue-card .eyebrow { color: var(--yellow); }
.venue-card p { margin: 10px 0 0; color: color-mix(in oklab, var(--cream) 88%, var(--blue)); }

.floorplan {
  margin-top: 16px;
  min-height: 200px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  border-radius: var(--r-card);
  background: color-mix(in oklab, var(--yellow) 12%, var(--cream));
  outline: 2px dashed color-mix(in oklab, var(--yellow) 60%, var(--cream));
  outline-offset: -2px;
  color: var(--muted);
}
.floorplan img { width: 100%; border-radius: var(--r-media); }
.floorplan b { font-family: var(--display); font-size: 1.05rem; color: var(--navy); }
.floorplan .ico { width: 30px; height: 30px; color: color-mix(in oklab, var(--yellow) 80%, var(--ink)); }

/* ---------- Iloilo guide ---------- */

.dishes { margin: 4px 0 0; padding: 0; list-style: none; }
.dishes li { padding: 16px 0; border-top: 1px solid var(--line); }
.dishes li:last-child { border-bottom: 1px solid var(--line); }
.dishes p { margin: 6px 0 0; color: color-mix(in oklab, var(--ink) 78%, var(--cream)); }
.dish-where {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px !important;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--red) !important;
}
.dish-where .ico { width: 16px; height: 16px; flex: none; }

.group li > div { min-width: 0; }
.group span { display: block; }

/* ---------- Grouped list (Info) ---------- */

.group {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: 0 1px 0 var(--line), inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.group li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.group li + li { border-top: 1px solid var(--line); }
.group .ico { color: var(--blue); }
.group b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 700; }
.group span { font-size: 0.8rem; color: var(--muted); }
.group a { color: var(--blue); font-weight: 700; text-decoration: none; }
.group .copy { margin-left: auto; border: 0; background: none; padding: 8px; color: var(--blue); cursor: pointer; }
.group .copy:active { transform: scale(0.9); }

/* ---------- Sponsors ---------- */

/* Dinagyang-inspired tile band from the site's brand kit. It has one job: it marks
   the sponsor thank-you, so it never becomes wallpaper. */
.band {
  height: 40px;
  background: url("../assets/pattern.png") repeat-x center / auto 100%;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.band + .thanks { border-radius: 0 0 var(--r-card) var(--r-card); }

.thanks {
  background: var(--navy);
  border-radius: var(--r-card);
  padding: 24px 20px;
  color: var(--cream);
}

/* The rotating two-or-three sponsor thank-you that appears on every view. */
.spotlight { margin-top: 34px; animation: rise 0.34s var(--ease) both; }
.spotlight .thanks { padding: 20px; }
.spotlight h2 { font-size: 1.05rem; }
.spotlight .rule { width: 56px; height: 4px; margin: 10px auto 16px; }
.spotlight .logos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.spotlight .logo { min-height: 56px; padding: 10px; }
.spotlight .logo img { max-width: 104px; }
.spotlight-all {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow);
  text-decoration: none;
}
.thanks h2 { font-size: 1.4rem; font-weight: 800; color: var(--cream); text-align: center; }
.thanks .rule { margin: 12px auto 18px; }
.thanks .tier {
  margin: 20px 0 10px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Card size steps down with the tier, so the hierarchy sponsors bought is visible. */
.logos.tier-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.logos.tier-lg .logo { min-height: 84px; padding: 16px; }
.logos.tier-lg .logo img { max-width: 148px; }

.logos.tier-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logos.tier-md .logo { min-height: 62px; }
.logos.tier-md .logo img { max-width: 104px; }

.logos.tier-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.logos.tier-sm .logo { min-height: 52px; padding: 9px; }
.logos.tier-sm .logo img { max-width: 88px; }

.thanks-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in oklab, var(--cream) 68%, var(--navy));
}
.logo {
  display: grid;
  place-items: center;
  padding: 12px;
  min-height: 64px;
  background: var(--cream);
  border-radius: var(--r-media);
  text-decoration: none;
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}
.logo img { width: 100%; max-width: 132px; height: auto; }

/* ---------- Toast + skeleton ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
  z-index: 30;
  transform: translate(-50%, 16px);
  padding: 11px 18px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skeleton span {
  height: 74px;
  border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--wash), var(--line), var(--wash));
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton span:first-child { height: 170px; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- Adapt ---------- */

@media (min-width: 600px) {
  :root { --bar-h: 68px; }
  .appbar-brand img { height: 42px; }
  main { padding-top: calc(var(--bar-h) + env(safe-area-inset-top) + 26px); }
  .hero { padding: 32px; }
  .hero h2 { font-size: 2.2rem; }
  .countdown b { font-size: 2.5rem; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos.tier-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos.tier-md, .logos.tier-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

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

/* ---------- QR badge, scanning, booth ---------- */

.duo { display: flex; flex-wrap: wrap; gap: 10px; }
.duo .btn { flex: 1 1 auto; justify-content: center; }

/* Text inputs, matching the survey's textarea so forms read as one system. */
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.field > span em { font-weight: 400; font-style: normal; color: var(--muted); }
.field input {
  width: 100%;
  border: 0;
  border-radius: var(--r-control);
  padding: 13px 15px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }

/* The disclosure list. Anything not being shared is visibly struck back, so the
   shape of the list alone answers "what am I handing over". */
.disclose { margin: 0 0 16px; }
.disclose > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.disclose dt { font-size: 0.86rem; color: var(--muted); }
.disclose dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.disclose .is-off dd { font-weight: 400; color: var(--muted); }

.consent {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-card);
  padding: 14px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.consent[aria-pressed="true"] {
  background: color-mix(in oklab, var(--yellow) 16%, var(--cream));
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.consent-box {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  height: 22px;
  margin-top: 2px;
  border-radius: 5px;
  background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.consent[aria-pressed="true"] .consent-box { background: var(--navy); }
.consent-box .ico { width: 15px; height: 15px; color: var(--yellow); }
.consent b { display: block; font-family: var(--display); font-size: 1rem; color: var(--navy); }
.consent em { display: block; margin-top: 3px; font-style: normal; font-size: 0.84rem; color: var(--muted); }

/* Unfinished organiser content, same dashed-yellow convention as the floor plan. */
.placeholder {
  margin: 14px 0 0;
  border-radius: var(--r-media);
  padding: 12px 14px;
  background: color-mix(in oklab, var(--yellow) 12%, var(--cream));
  outline: 2px dashed color-mix(in oklab, var(--yellow) 60%, var(--cream));
  outline-offset: -2px;
  font-size: 0.86rem;
  color: var(--muted);
}

.qr-card {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 22px;
  border-radius: var(--r-card);
  background: #fff; /* Not cream: scanners want maximum contrast. */
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.qr { width: min(74vw, 260px); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-name { margin: 10px 0 0; font-family: var(--display); font-size: 1.1rem; color: var(--navy); }
.qr-sub { margin: 0; font-size: 0.86rem; color: var(--muted); }

.scan-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--navy);
  aspect-ratio: 4 / 3;
}
.scan-stage video { width: 100%; height: 100%; object-fit: cover; }
.scan-stage.is-failed { display: none; } /* No empty black box when there is no camera. */
.scan-frame {
  position: absolute;
  inset: 16%;
  border: 3px solid var(--yellow);
  border-radius: var(--r-media);
}

.scan-result {
  border-radius: var(--r-card);
  padding: 16px;
  background: color-mix(in oklab, var(--yellow) 14%, var(--cream));
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.scan-result.is-bad { background: var(--wash); box-shadow: inset 0 0 0 2px var(--line); }
.scan-result header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.scan-result .btn { margin-top: 14px; }
.scan-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.scan-line em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.scan-line.is-muted { color: var(--muted); }
.scan-line .ico { width: 17px; height: 17px; }

/* The sponsor's script, turned to face the attendee. Marigold so it reads as
   something to be shown rather than something to be read by staff. */
.ask {
  border-radius: var(--r-card);
  padding: 16px;
  background: color-mix(in oklab, var(--yellow) 20%, var(--cream));
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.ask-line {
  margin: 4px 0 8px;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy);
}
.ask-note { margin: 0; font-size: 0.86rem; color: var(--muted); }

/* The code is the first thing on the badge screen, so it needs no top margin and
   its hint sits tight underneath rather than reading as body copy. */
.view > .qr-card { margin-top: 4px; }
.qr-hint { margin-top: 10px; text-align: center; }

/* Denser codes get more room rather than smaller modules. */
.qr.is-dense { width: min(88vw, 330px); }