/* PGW ImplementAI 2026 — design tokens + screen components.
   Source of truth: PGW/brand/guide/pgw-implementai-brand-guide-v1.html
   + approved mock attendee-home-v3-APPROVED-2026-07-21 (moodboard). */

:root {
  --lime: #c8d562;
  --lime-deep: #b4c24a;
  /* Lime is a FILL and a BORDER colour, never type on a light ground:
     --lime-deep as text measures 1.95:1 on white. Use --lime-ink for that. */
  --lime-ink: #676f25; /* 5.14 on paper — lime-family text, light grounds ONLY.
                          Never on charcoal (2.76): there, use --lime (9.35). */
  --ink: #272728;
  --ink-soft: #4a4744;
  /* Contrast pass 2026-07-27 — measured, not eyeballed. The quiet tier failed
     AA badly: --grey-light was #aba69e = 2.30:1 on paper, 2.07:1 on greige,
     below even the 3:1 large-text floor, carrying 10.5px mono labels. --grey
     was #7a756e = 4.34:1, under the 4.5:1 body bar. Both darkened along their
     OWN hue so the warm-neutral character holds, and the four-step hierarchy
     (ink 14.17 / ink-soft 8.76 / grey 6.70 / grey-light 5.16 on paper) is
     preserved rather than collapsing into one flat grey. */
  --grey: #5c5853;
  --grey-light: #6f6960;
  --paper: #faf9f6;
  --card: #ffffff;
  --greige: #efede8;
  --greige-line: #e4e1da;
  --hair: rgba(39, 39, 40, 0.07);
  --radius: 24px;
  --radius-sm: 18px;
  --shadow: 0 1px 2px rgba(39, 39, 40, 0.03), 0 12px 30px -16px rgba(39, 39, 40, 0.14);
  --shadow-sm: 0 1px 2px rgba(39, 39, 40, 0.04);
  --font: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* App frame — full-bleed on phones, letterboxed on desktop */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
}

.scroll {
  flex: 1;
  padding-bottom: 110px; /* clear the tab bar */
}

/* mono section label */
.lab {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding: 0 24px;
  margin-bottom: 12px;
}

/* App bar */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .wm {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--greige);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
}

/* Hero */
.hero {
  position: relative;
  padding: 8px 24px 34px;
  overflow: hidden;
}
.hero .net {
  position: absolute;
  top: 2px;
  right: -4px;
  opacity: 0.4;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
}
h1.title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  margin-top: 16px;
}
h1.title .ai {
  position: relative;
}
h1.title .ai::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 10px;
  background: var(--lime);
  z-index: -1;
  border-radius: 2px;
}
.subtitle {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey);
  font-weight: 400;
}

/* Now carousel — swipe sideways to peek at what's coming (Nicole, v4) */
.nowrap {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 24px 6px;
  scrollbar-width: none;
}
.nowrap::-webkit-scrollbar {
  display: none;
}
.nowrap .now {
  margin: 0;
  flex: 0 0 88%;
  /* hard lock: each card centres and features; no resting between bubbles,
     no momentum-skipping past one */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.nowrap .upcard {
  background: var(--card);
}
.live .dot.up {
  background: var(--greige-line);
  box-shadow: 0 0 0 3px rgba(39, 39, 40, 0.05);
}
.seemore {
  display: block;
  text-align: right;
  padding: 10px 24px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  color: var(--grey);
}

/* Now card */
.now {
  margin: 0 24px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.now .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.live {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 213, 98, 0.28);
}
.tagm {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-light);
  letter-spacing: 0.05em;
}
.now h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 14px;
  line-height: 1.25;
}
.now .who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.now .who .pic {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dfe4b8, #c8d562);
  flex: 0 0 27px;
}
.now .who .txt {
  font-size: 13px;
  color: var(--grey);
}
.now .who .txt b {
  color: var(--ink-soft);
  font-weight: 500;
}
.prog {
  margin-top: 18px;
  height: 5px;
  border-radius: 99px;
  background: var(--greige);
  overflow: hidden;
}
.prog i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: 99px;
  transition: width 1s linear;
}
.now .foot {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-light);
  letter-spacing: 0.04em;
}

/* Primary action */
.ask {
  margin: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lime);
  color: var(--ink);
  border: 1px solid var(--lime-deep);
  border-radius: 999px;
  padding: 16px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 22px -12px rgba(180, 194, 74, 0.9);
}
.ask svg {
  width: 19px;
  height: 19px;
}
/* v4: ask box lives inside the on-now card */
.ask.askin {
  margin: 18px 0 0;
  padding: 13px;
  font-size: 14px;
}

/* Press feedback — brief greige press-down on every tappable (v4 fidelity pass) */
.tile,
.logicard,
.ask,
.tab,
.seemore,
.now {
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.tile:active,
.logicard:active,
.seemore:active {
  background-color: var(--greige);
  transform: scale(0.985);
}
.ask:active {
  background-color: var(--lime-deep);
  transform: scale(0.985);
}
.tab:active {
  color: var(--ink-soft);
}
.tab.center:active .fab {
  background-color: var(--lime-deep);
}

/* Nav tiles */
.navwrap {
  margin-top: 40px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 24px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}
.tile .ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--greige);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile .ico svg {
  width: 21px;
  height: 21px;
  color: var(--ink);
}
.tile .n {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tile .s {
  font-size: 11.5px;
  color: var(--grey-light);
  margin-top: 3px;
}
.tile.starred .ico {
  background: rgba(200, 213, 98, 0.24);
}
.tile .badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
}
.tile .bottomrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Logistics cards (v3: two full cards) */
.logigrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 24px;
}
.logicard {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.logicard svg {
  width: 20px;
  height: 20px;
  color: var(--ink);
  flex: 0 0 20px;
}
.logicard .n {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.logicard .s {
  font-size: 11px;
  color: var(--grey-light);
  margin-top: 2px;
}

/* Tab bar */
/* Build stamp — bottom of Home. Quiet on purpose: it is a diagnostic, not a
   feature. Nobody should notice it until someone needs to ask for it. */
.buildstamp {
  margin: 34px 0 4px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--grey-light);
  opacity: 0.55;
}

/* Crew sign-out. Sits at the very bottom of the crew screens, deliberately
   below everything else — reached on purpose, never in passing. */
.crewout {
  margin: 36px 0 10px;
  display: flex;
  justify-content: center;
}
.crewout .dbtn.arm {
  background: #b4453c;
  color: var(--paper);
  border-color: #b4453c;
}

/* Update bar — the version beacon's attendee face. Sits directly above the tab
   bar so it reads as part of the app's own furniture rather than a browser
   alert, and never covers the content someone is reading. */
#updatebar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--shadow);
}
#updatebar[hidden] {
  display: none;
}
.ubtext {
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
}
.ubbtn {
  flex: none;
  background: var(--lime);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}
.ubbtn:active {
  background: var(--lime-deep);
}
.dbtn[disabled] {
  opacity: 0.45;
}

.tabs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  height: 84px;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 13px 14px 0;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--grey-light);
  font-weight: 500;
}
.tab svg {
  width: 22px;
  height: 22px;
  color: var(--grey-light);
}
.tab.active {
  color: var(--ink);
}
.tab.active svg {
  color: var(--ink);
}
.tab.center {
  margin-top: -14px;
}
.tab.center .fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lime);
  border: 1px solid var(--lime-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px -8px rgba(180, 194, 74, 0.9);
}
.tab.center .fab svg {
  width: 24px;
  height: 24px;
  color: var(--ink);
}

/* Break card in the carousel — quieter than a session */
.upcard.brk {
  background: var(--greige);
  border-color: transparent;
  box-shadow: none;
}

/* Page head + day pills (Agenda / Speakers) */
.pagehead {
  padding: 28px 24px 18px;
}
.pagehead h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pagehead .sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--grey);
}
.daypills {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--greige-line);
  color: var(--grey);
  background: var(--card);
  transition: background-color 0.12s ease;
}
.pill.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pill:active {
  background-color: var(--greige);
}

/* Agenda list */
.aglist {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agrow {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.agtime {
  flex: 0 0 44px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-light);
  padding-top: 18px;
  letter-spacing: 0.04em;
}
.agcard {
  flex: 1;
  display: block;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.agcard:active {
  background-color: var(--greige);
  transform: scale(0.99);
}
.agcard.isnow {
  border-color: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(200, 213, 98, 0.18), var(--shadow-sm);
}
.agcard h3 {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.3;
}
.agcard .who {
  margin-top: 8px;
}
.agcard .who .txt {
  font-size: 12.5px;
}
.agbreak {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--greige);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  align-self: center;
  width: 100%;
}

/* wayfinding icon for breaks/socials */
.evico {
  display: inline-flex;
  align-items: center;
}
.evico svg {
  width: 17px;
  height: 17px;
  color: var(--ink-soft);
  flex: 0 0 17px;
}
.live .evico {
  margin-right: 2px;
}

/* small partner logo on agenda/session cards */
.aglogo {
  max-height: 16px;
  max-width: 74px;
  object-fit: contain;
  margin-left: auto;
  flex: 0 0 auto;
  opacity: 0.9;
}
.agcard .who,
.upcard .who {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Speakers */
.splist {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.spcard {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin: 0 0;
}
.splist .spcard,
.spcard {
  align-items: flex-start;
}
.spavatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: 0 0 52px;
  object-fit: cover;
}
.spinit {
  background: linear-gradient(135deg, #dfe4b8, #c8d562);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}
.spbody {
  flex: 1;
}
.spbody .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.spbody .n {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.spbody .s {
  font-size: 12px;
  color: var(--grey);
  margin-top: 2px;
}
.spbio {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grey);
}
.lichip {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--greige);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background-color 0.12s ease;
}
.lichip:active {
  background-color: var(--greige-line);
}

/* session detail spcard sits in page padding */
#view > .spcard {
  margin: 0 24px 14px;
}
.spcard {
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.spcard:active {
  background-color: var(--greige);
  transform: scale(0.99);
}
.spbio.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Speaker profile page */
.sphero {
  text-align: left;
}
.spportrait {
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin: 26px 24px 0;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  background: var(--greige);
}
.spportrait.spinit {
  display: flex;
  font-size: 34px;
}
.spdetail {
  padding: 0 24px;
}
.contactlist {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contactrow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.contactrow:active {
  background-color: var(--greige);
  transform: scale(0.99);
}
.contactrow svg {
  width: 19px;
  height: 19px;
  color: var(--ink);
  flex: 0 0 19px;
}
.limark {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--greige);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  flex: 0 0 19px;
}

/* Educational partners */
.ptgrid {
  padding: 0 24px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ptcard {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  min-height: 92px;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.ptcard:active {
  background-color: var(--greige);
  transform: scale(0.985);
}
.ptcard.wide {
  grid-column: 1 / -1;
  min-height: 110px;
}
.ptlogo {
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
}
.ptcard.wide .ptlogo {
  max-height: 78px;
}
.ptheroband {
  margin: 20px 24px 0;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
}
.ptlogo.big {
  max-height: 92px;
}
.quotebar {
  margin: 20px 24px;
  background: var(--greige);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
#view > .now {
  margin-left: 24px;
  margin-right: 24px;
}

/* Ask a question */
.askform {
  padding: 0 24px;
}
.askform textarea,
.askform input {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  resize: none;
  outline: none;
}
/* Crew sign-in stacks two fields; keep them off each other. */
.askform input + input {
  margin-top: 10px;
}
.askform textarea:focus,
.askform input:focus {
  border-color: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(200, 213, 98, 0.22);
}
.mylist {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.myq {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.myq p {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--greige);
  color: var(--grey);
  flex: 0 0 auto;
}
.chip.s-approved {
  background: rgba(200, 213, 98, 0.24);
  color: var(--ink-soft);
}
.chip.s-promoted {
  background: var(--lime);
  color: var(--ink);
}

/* Moderator */
.modbtns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.mbtn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--greige-line);
  background: var(--card);
  color: var(--ink-soft);
  transition: background-color 0.12s ease;
}
.mbtn.go {
  background: var(--lime);
  border-color: var(--lime-deep);
  color: var(--ink);
}
.mbtn:active {
  background-color: var(--greige);
}

/* Big room screen (route: #/screen) — the third face */
.screenmode {
  max-width: none;
  background: var(--ink);
}
.screenmode .tabs {
  display: none;
}
.screenmode .scroll {
  padding-bottom: 0;
}
.bigscreen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 8vw;
  color: var(--paper);
  position: relative;
}
.bs-head {
  position: absolute;
  top: 5vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* A watermark, not a headline (2026-08-21). At 17px/600 in full paper this was
   the loudest text on the screen and it was the THEME — the one thing every
   person in the room already knows. Dropped a step in weight and held at 78%
   so it reads as a mark in the corner rather than competing with the topic.
   78% on charcoal measures well clear of AA, and it is large text besides. */
.bs-brand {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(250, 249, 246, 0.78);
}

/* ---- the orienting pair: what this session is, and who is giving it ----
   .bs-session (a tracked mono eyebrow) was retired here — it carried the
   topic at caption size, which is why row ten could not read it. */
.bs-context {
  margin-bottom: 4vh;
}
.bs-topic {
  font-size: clamp(24px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--paper);
  max-width: 24ch;
}
.bs-speaker {
  margin-top: 1.8vh;
  font-size: clamp(15px, 1.8vw, 26px);
  font-weight: 400;
  color: var(--lime);
}

/* When a question is on screen the pair steps back to a context line — the
   question is why anyone is looking at this display. */
.bigscreen.hasq .bs-topic {
  font-size: clamp(15px, 1.9vw, 26px);
  color: var(--lime);
  max-width: 40ch;
}
.bigscreen.hasq .bs-speaker {
  margin-top: 0.8vh;
  font-size: clamp(12px, 1.3vw, 17px);
  /* 0.62 sits above the 0.52 floor measured on this ground in 2026-07-27. */
  color: rgba(250, 249, 246, 0.62);
}
.bs-q {
  font-size: clamp(26px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.bs-tag {
  margin-top: 5vh;
  font-family: var(--mono);
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.16em;
  /* 0.45 measured 4.10:1 on the charcoal ground — under AA for small text.
     0.52 gives 4.93:1 and is visually indistinguishable at room distance. */
  color: rgba(250, 249, 246, 0.52);
}
.bs-idle {
  font-size: clamp(24px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.bs-idle span {
  font-size: clamp(13px, 1.6vw, 20px);
  color: rgba(250, 249, 246, 0.55);
  font-weight: 400;
}

/* Placeholder pages */
.stub {
  padding: 40px 24px;
}
.stub h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.stub p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
}

/* ---------- Pulse surveys ---------- */

/* The prompt that appears on home once a session has finished.
   Sits above "Happening now" deliberately — it is the most time-sensitive
   thing on the screen, and it disappears the moment it's answered. */
.pulseprompt {
  display: block;
  margin: 4px 24px 26px;
  padding: 20px 22px 18px;
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, background 0.12s ease;
}
.pulseprompt:active {
  transform: scale(0.985);
  background: var(--greige-line);
}
.pulseprompt .lab {
  margin: 0 0 8px;
  padding: 0;
}
.pulseprompt h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 5px;
}
.pulseprompt p {
  font-size: 13px;
  color: var(--grey);
}
.pp-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pp-go svg {
  width: 16px;
  height: 16px;
}

/* The rating row — five big tap targets, not a slider.
   48px minimum so it works with a thumb, standing up, in a corridor. */
.ratings {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.rate {
  height: 56px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}
.rate:active {
  transform: scale(0.94);
}
.rate.on {
  background: var(--lime);
  border-color: var(--lime-deep);
}
.askform button[disabled] {
  opacity: 0.45;
  cursor: default;
}
.pulsedone {
  padding: 0 24px;
  color: var(--grey);
  font-size: 14px;
}

/* Crew results rollup */
.pulserow {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.pr-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pr-avg {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  font-size: 16px;
  font-weight: 700;
  background: var(--lime);
  border-radius: 14px;
}
.pr-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.pr-n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.pr-bar {
  height: 5px;
  margin-top: 14px;
  background: var(--greige);
  border-radius: 3px;
  overflow: hidden;
}
.pr-bar i {
  display: block;
  height: 100%;
  background: var(--lime-deep);
}
.pr-comments {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.pr-comments p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.pr-comments p:last-child {
  margin-bottom: 0;
}

/* Scale anchors — permanent, so the direction is obvious BEFORE anyone taps.
   Adam, 2026-07-27: without these the meaning of "1" is a guess until you've
   already committed to it. */
.rateends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------- Admin (crew only) ---------- */
.delaybox {
  margin: 0 24px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.delaynow {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.delayhelp {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--grey);
}
.delaybtns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.dbtn {
  flex: 1 0 auto;
  min-width: 58px;
  padding: 13px 10px;
  font-size: 14px;
  font-weight: 600;
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: var(--radius-sm);
  transition: transform 0.1s ease, background 0.1s ease;
}
.dbtn:active {
  transform: scale(0.95);
}
.dbtn.reset {
  flex: 1 0 100%;
  background: var(--lime);
  border-color: var(--lime-deep);
}
.daytabs {
  display: flex;
  gap: 8px;
  padding: 0 24px 14px;
}
.dtab {
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--greige);
  border-radius: 999px;
}
.dtab.on {
  background: var(--ink);
  color: var(--paper);
}
.adlist {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.adrow.edited {
  border-color: var(--lime-deep);
}
.adtimes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.adtime {
  width: 52px;
  padding: 8px 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: 10px;
  outline: none;
}
.adtime:focus {
  border-color: var(--lime-deep);
  background: var(--card);
}
.adtime.bad {
  border-color: #b4453c;
}
.addash {
  color: var(--grey-light);
  font-size: 11px;
}
.admeta {
  flex: 1;
  min-width: 0;
}
.adtitle {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.adwas {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.adwas.dim {
  color: var(--grey-light);
}

/* ---------- Optional name on a question (Johnny's ask) ----------
   Anonymity is the resting state: the box is unticked on every visit, and the
   name field only becomes usable once it's ticked. Nobody attaches their name
   by accident. */
.namecheck {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
.namecheck input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nc-box {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--greige-line);
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.nc-box svg {
  width: 14px;
  height: 14px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.namecheck input:checked + .nc-box {
  background: var(--lime);
  border-color: var(--lime-deep);
}
.namecheck input:checked + .nc-box svg {
  opacity: 1;
  transform: scale(1);
}
.namecheck input:focus-visible + .nc-box {
  box-shadow: 0 0 0 3px rgba(200, 213, 98, 0.5);
}
.nc-txt {
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey);
  padding-top: 2px;
}

/* Collapsed until the box is ticked — no dead field cluttering the page. */
.nameinput {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.16s ease, opacity 0.16s ease, margin-top 0.16s ease;
}
.nameinput.on {
  max-height: 60px;
  margin-top: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-width: 1px;
  opacity: 1;
}
.nameinput.bad {
  border-color: #b4453c;
}

/* Name on the moderator desk — the one thing they need at a glance to decide
   whether to read it out as "a question from Sarah" or just read it out. */
.qname {
  color: var(--lime-ink);
  font-weight: 600;
}

/* ---------- Add to home screen (#/install + the prompt on Home) ----------
   Colours are pulled from the tokens above, never hand-mixed. Two contrast
   notes, because the contrast pass of 2026-07-28 was undone once already by
   someone reaching for --grey-light out of habit:
     - step text uses --ink, not --grey: these are instructions being followed
       on a phone in a bright hotel foyer, one hand on a coffee.
     - --grey (5.9:1 on paper) carries the sub-labels. NOT --grey-light. */

.instbar {
  display: flex;
  align-items: stretch;
  margin: 4px 24px 26px;
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.instbar-go {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.instbar-go:active {
  background: var(--greige-line);
}
.instbar-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--lime);
}
.instbar-ico svg {
  width: 20px;
  height: 20px;
}
.instbar-go b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.instbar-go .s {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--grey);
}
/* A dismiss that is findable but not inviting — 44px wide so a thumb can hit
   it, low contrast so it never competes with the thing it dismisses. */
.instbar-x {
  flex: none;
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--grey);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.instbar-x:active {
  background: var(--greige-line);
}

.instwhy {
  margin: 4px 24px 0;
}
/* .lab carries its own 24px side padding, for use at full page width. In here
   the wrapper already provides that gutter, so leaving it doubles up and the
   label's TEXT lands 24px right of the bullets it belongs to — invisible in
   the markup, obvious the moment you measure it. */
.instwhy .lab {
  padding: 0;
}
.instwhy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.instwhy li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.instwhy li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-deep);
}

.instnote {
  margin: 0 24px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.instnote b {
  color: var(--ink);
  font-weight: 600;
}

.steps {
  list-style: none;
  margin: 0 24px;
  padding: 0;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
/* A bare numeral, no disc behind it (Adam, 2026-08-21). The icon beside it
   already carries a filled box; a second filled shape 12px away made the row
   read as two badges and a sentence instead of one step.

   The height is deliberately the SAME 30px as .stepico rather than sized to
   the digit. The row top-aligns, so matching heights is what puts the two
   centres on one line — the earlier 22px disc sat 4px high against the icon,
   which is exactly the offset Adam picked out by eye. Change one height here
   and you must change the other. */
.stepn {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 30px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 12px;
}
/* The glyph sits AFTER the number and BEFORE the words on purpose: the eye
   lands on the shape it is hunting for on its own screen before it starts
   reading. */
.stepico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--greige);
  color: var(--ink);
}
.stepico svg {
  width: 17px;
  height: 17px;
}
.steptxt {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 4px;
}
.steptxt b {
  font-weight: 600;
}

.instother {
  margin: 22px 24px 0;
  border-top: 1px solid var(--greige-line);
  padding-top: 18px;
}
.instother summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.instother summary::-webkit-details-marker {
  display: none;
}
.instother summary::after {
  content: ' ↓';
  color: var(--grey);
}
.instother[open] summary::after {
  content: ' ↑';
}
.instother .steps,
.instother .instnote {
  margin-left: 0;
  margin-right: 0;
}
.instother .instnote {
  margin-top: 14px;
}

.instfoot {
  margin: 26px 24px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.instfoot b {
  color: var(--ink);
  font-weight: 600;
}

.instdone {
  margin: 0 24px;
  padding: 26px 22px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.instmark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
}
.instmark svg {
  width: 26px;
  height: 26px;
}
.instdone p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- FAQ (#/faq) ---------- */

/* The catch-all card under Wi-Fi and Venue, spanning both columns. */
.logicard.wide {
  grid-column: 1 / -1;
}

.faqgroup {
  margin: 0 24px;
}
.faqitem {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.faqitem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* 15px top and bottom on a 13.5px line gives a ~50px target — a question
     opened one-handed, standing up, with a coffee in the other hand. */
  padding: 15px 18px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faqitem summary::-webkit-details-marker {
  display: none;
}
/* A chevron drawn in CSS rather than another SVG in icons.js — it is
   decoration that rotates, not an icon anyone needs to recognise. */
.faqitem summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--grey);
  border-bottom: 1.5px solid var(--grey);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.16s ease;
}
.faqitem[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faqitem[open] summary {
  padding-bottom: 8px;
}
.faqbody {
  padding: 0 18px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.faqbody p {
  margin: 0 0 10px;
}
.faqbody p:last-child {
  margin-bottom: 0;
}
.faqbody b {
  color: var(--ink);
  font-weight: 600;
}
.faqbody a {
  color: var(--lime-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 111, 37, 0.3);
}
.faqlist {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.faqlist li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
}
.faqlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime-deep);
}

/* ---------- Welcome + last year's recap (#/welcome) ---------- */

/* Full-width tile in the Jump-to grid. */
.tile.wide {
  grid-column: 1 / -1;
}

.welcomenote {
  margin: 0 24px;
  padding: 20px 22px;
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: var(--radius);
}
.welcomenote p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.welcomenote p + p {
  margin-top: 12px;
}
.welcomenote b {
  color: var(--ink);
  font-weight: 600;
}

.videowrap {
  margin: 0 24px;
}
/* aspect-ratio rather than the old padding-top hack: the box is correct before
   the player loads, so the page does not jump when the iframe arrives. */
.videoframe {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--hair);
}
.videoframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.videotitle {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.videoout {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--grey);
}

/* ---------- back control (regression fix, 2026-08-21) ----------
   Present because v18 made the app open standalone: no address bar, no browser
   back. Android keeps its system button; iOS had nothing. */
.backbar {
  padding: 14px 18px 0;
}
.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Generous padding, not a big visible box — the target is ~44px tall while
     the mark stays quiet. A back control has to be hittable with a thumb on
     the move and must never compete with the page title beneath it. */
  padding: 10px 12px 10px 6px;
  margin-left: -6px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
  background: transparent;
}
.backbtn svg {
  width: 19px;
  height: 19px;
}
.backbtn:active {
  background: var(--greige);
  color: var(--ink);
}
/* The speaker and partner pages open on a full-bleed hero, so the bar sits
   over it rather than pushing it down the screen. */
.backbar + .sphero,
.backbar + .ptheroband {
  margin-top: -6px;
}

/* ---------- Ask closed between sessions (Adam's ruling, 2026-08-21) ---------- */
.askshut {
  margin: 0 24px;
  padding: 26px 22px;
  text-align: center;
  background: var(--greige);
  border: 1px solid var(--greige-line);
  border-radius: var(--radius);
}
.askshut-ico {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--card);
  color: var(--grey);
}
.askshut-ico svg {
  width: 22px;
  height: 22px;
}
.askshut p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.askshut p + p {
  margin-top: 8px;
}
.askshut b {
  color: var(--ink);
  font-weight: 600;
}

/* The line on a session page that is NOT the one on stage. Quiet on purpose —
   it replaces a button, and it must not look like one. */
.asklater {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.asklater svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.asklater b {
  color: var(--ink-soft);
  font-weight: 600;
}

/* "Next up — X at 11:05" inside the break card. */
.nownext {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--greige-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.nownext b {
  color: var(--ink-soft);
  font-weight: 600;
}
.now.brk {
  background: var(--greige);
  border-color: var(--greige-line);
  box-shadow: none;
}