:root {
  --nessie-teal: #6AC5B3;
  --nessie-teal-ink: #2E8B79; /* darker teal — AA-legible on white */
  --nessie-h1-blue: #7AAADB;
  --nessie-h2-blue: #90B9E1;
  --nessie-navy: #2F5496;
  --nessie-navy-deep: #223C6E; /* chrome / deep brand navy */

  --eu-blue: #003399;
  --eu-gold: #FFCC00;

  --scenario-green: #1A7A4A;
  --scenario-red: #8B0000;
  --scenario-amber: #B06000;
  --scenario-orange: #C05800;
  --scenario-gray: #595959;

  --scenario-green-lt: #C6E0B4;
  --scenario-red-lt: #FADBD8;
  --scenario-amber-lt: #FFF2CC;
  --scenario-orange-lt: #FDE5CC;
  --scenario-gray-lt: #E8E8E8;

  --bg-light: #EAF3FB;
  --border: #CCCCCC;
  --text-dark: #333333;
  --text-mid: #595959;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', Calibri, sans-serif;
  color: var(--text-dark);
  background: var(--bg-light);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Headers use DM Serif Display; body copy stays Open Sans. */
.slide-title,
.display,
.participant-main h1,
.participant-main h2,
.scen-headline,
.compare .panel .scen-label,
.rr-text {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Header / Footer (shared)                                            */
/* ------------------------------------------------------------------ */

.site-header {
  background: var(--nessie-navy-deep);
  color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 12px;
  border-bottom: 3px solid var(--nessie-teal);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.brand-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--nessie-teal), var(--nessie-navy));
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark svg {
  width: 18px;
  height: 18px;
}

.site-header .brand .lockup {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.site-header .brand .mark {
  color: var(--nessie-h1-blue);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 1.5px;
}

/* Official NESSIE · Interreg North Sea · EU funding lockup, upper-left. */
.site-header .brand .brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.site-header .brand .sep {
  width: 1px;
  height: 18px;
  align-self: center;
  background: rgba(255, 255, 255, 0.25);
}

.site-header .brand .sub {
  color: var(--nessie-h2-blue);
  font-size: 12px;
  font-weight: 600;
}

.site-header .session-title {
  color: #fff;
  font-size: 15px;
  text-align: right;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-mid);
  padding: 10px 12px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  background: var(--nessie-navy);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.btn:hover {
  background: #264377;
}

.btn:disabled {
  background: var(--border);
  color: #888;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--nessie-navy);
  border: 2px solid var(--nessie-h2-blue);
}

.btn-secondary:hover {
  background: rgba(144, 185, 225, 0.15);
}

.btn-full {
  width: 100%;
}

.btn-action {
  background: var(--nessie-teal-ink);
}
.btn-action:hover {
  background: #246e60;
}

/* ------------------------------------------------------------------ */
/* Funding lockup (EU + Interreg) — reusable, compliance attribution  */
/* ------------------------------------------------------------------ */
.funding-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.funding-lockup .eu-flag {
  flex: 0 0 auto;
  width: 54px;
  height: 36px;
  border-radius: 3px;
}
.funding-lockup .fl-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-mid);
  text-align: left;
}
.funding-lockup .fl-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.funding-lockup .fl-interreg {
  font-size: 12px;
  font-weight: 700;
  color: var(--nessie-navy);
  line-height: 1.3;
}
.navy-bg .funding-lockup .fl-text,
.funding-lockup.on-navy .fl-text {
  color: rgba(255, 255, 255, 0.88);
}
.navy-bg .funding-lockup .fl-interreg,
.funding-lockup.on-navy .fl-interreg {
  color: #fff;
}
.navy-bg .funding-lockup .eu-flag,
.funding-lockup.on-navy .eu-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.navy-bg .funding-lockup .fl-sep,
.funding-lockup.on-navy .fl-sep {
  background: rgba(255, 255, 255, 0.25);
}
.funding-lockup.lg .eu-flag {
  width: 72px;
  height: 48px;
}
.funding-lockup.lg .fl-text,
.funding-lockup.lg .fl-interreg {
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Participant (mobile) view                                           */
/* ------------------------------------------------------------------ */

.participant-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  min-height: calc(100vh - 60px - 40px);
}

.participant-main h1 {
  font-size: 22px;
  color: var(--nessie-navy);
  margin: 4px 0 16px;
}

.participant-main h2 {
  font-size: 18px;
  color: var(--nessie-navy);
  margin: 0 0 12px;
}

.field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-input {
  width: 100%;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  text-transform: uppercase;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: inherit;
}

.code-input:focus {
  outline: none;
  border-color: var(--nessie-teal);
}

.role-list,
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 20px;
}

.select-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.select-card:hover {
  border-color: var(--nessie-h2-blue);
}

.select-card.selected {
  border-color: var(--nessie-teal);
  border-left: 4px solid var(--nessie-teal);
  background: rgba(106, 197, 179, 0.12);
}

.select-card .badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nessie-navy);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.select-card .label {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Vote-screen option cards: larger thumb target for the critical action */
.option-list .select-card {
  min-height: 72px;
}
.option-list .select-card .label {
  font-size: 18px;
}

.select-card .sublabel {
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 400;
}

/* ---- Vote option cards: subcopy + pros/cons accordion ------------------- */
.option-list .vote-option {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.option-list .vote-option:hover {
  border-color: var(--nessie-h2-blue);
}
.option-list .vote-option.selected {
  border-color: var(--nessie-teal);
  border-left-color: var(--nessie-teal);
  background: rgba(106, 197, 179, 0.1);
}
.vo-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
}
.vo-main .badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nessie-navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vote-option.selected .vo-main .badge {
  background: var(--nessie-teal-ink);
}
.vo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vo-text .label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}
.vo-sub {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.35;
}
.vo-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #f6f8fb;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--nessie-navy);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.vo-caret {
  transition: transform 0.2s;
}
.vo-acc-toggle.open .vo-caret {
  transform: rotate(180deg);
}
.vo-acc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px 16px;
  background: #f6f8fb;
}
.vo-acc[hidden] {
  display: none;
}
.vo-acc-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vo-acc-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vo-pros .vo-acc-h {
  color: var(--scenario-green);
}
.vo-cons .vo-acc-h {
  color: var(--scenario-red);
}
.vo-acc ul {
  margin: 0;
  padding-left: 16px;
}
.vo-acc li {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.4;
  margin-bottom: 2px;
}
.vote-wait {
  background: #fff6e6;
  border: 1px solid #f3d9a3;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #8a6d2f;
  margin: 0 0 14px;
}

.hint {
  font-size: 14px;
  color: var(--text-mid);
  margin: 8px 0 16px;
}

.confirm-box {
  text-align: center;
  padding: 28px 16px;
}

.confirm-box .check {
  font-size: 56px;
  line-height: 1;
  color: var(--scenario-green);
}

.confirm-box .confirm-title {
  font-size: 20px;
  font-weight: 700;
  margin: 12px 0 6px;
}

.confirm-box .confirm-detail {
  font-size: 17px;
  color: var(--text-mid);
}

.linkish {
  background: none;
  border: none;
  color: var(--nessie-navy);
  text-decoration: underline;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px;
}

.error-msg {
  color: var(--scenario-red);
  font-size: 14px;
  margin: 8px 0;
  min-height: 18px;
}

/* Participant result card */
.result-card {
  border-radius: 12px;
  padding: 22px 18px;
  margin: 8px 0 16px;
}

.result-card .scen-label {
  font-size: 26px;
  font-weight: 700;
}

.result-card .scen-headline {
  font-size: 22px;
  font-weight: 700;
  margin: 10px 0;
}

.result-card .scen-narrative {
  font-size: 16px;
  color: var(--text-dark);
}

.choices-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.choices-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
}

.choices-list li .role-name {
  font-weight: 600;
  color: var(--nessie-navy);
}

/* ------------------------------------------------------------------ */
/* Host slide deck                                                     */
/* ------------------------------------------------------------------ */

.host-body {
  overflow: hidden;
  height: 100vh;
}

.deck {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.slide {
  position: absolute;
  inset: 60px 0 56px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 6vw;
  text-align: center;
  overflow: hidden;
}

.slide.active {
  display: flex;
}

.slide.scrollable {
  justify-content: flex-start;
  overflow-y: auto;
}

.teal-accent {
  color: var(--nessie-teal);
}

.navy-bg {
  background: var(--nessie-navy);
  color: #fff;
}

.navy-bg h1.slide-title,
.navy-bg .slide-header,
.navy-bg .big-sub,
.navy-bg p.lead {
  color: #fff;
}

.connected-count {
  font-size: 16px;
  color: var(--text-mid);
  margin-top: 14px;
}

.navy-bg .connected-count {
  color: var(--nessie-h2-blue);
}

/* Persistent deck chrome */
.deck-chrome {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  z-index: 20;
}

.deck-chrome .slide-indicator {
  font-size: 14px;
  color: var(--text-mid);
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-chrome .live-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--nessie-navy);
}
.deck-chrome .live-count .ld {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nessie-teal);
}

.deck-chrome .nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.deck-chrome .join-chip {
  font-size: 14px;
  color: var(--text-mid);
  min-width: 150px;
  text-align: right;
}

.deck-chrome .join-chip b {
  color: var(--nessie-navy);
  letter-spacing: 1px;
}

.vote-total {
  font-size: 16px;
  color: var(--text-mid);
  margin: 10px 0;
}

/* Result slide (full bleed) — refresh.css styles the text + choice grid */
.slide.result-slide {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: 36px;
}

/* Reveal slide */
.reveal-box {
  border: 2px solid var(--nessie-teal);
  border-radius: 12px;
  padding: 10px 8px;
  max-width: 820px;
  margin: 14px auto;
  width: 100%;
}

.reveal-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 19px;
}

.reveal-row:last-child {
  border-bottom: none;
}

.reveal-row .star {
  color: var(--scenario-green);
  font-size: 24px;
}

.reveal-row .rn {
  font-weight: 700;
  color: var(--nessie-navy);
}

.reveal-row.matched {
  background: var(--scenario-green-lt);
}

.reveal-row.matched .star {
  color: var(--scenario-green);
}

.reveal-row.unmatched {
  color: var(--text-mid);
  background: #f4f4f4;
}

.reveal-row.unmatched .star {
  color: var(--border);
}

.reveal-row .yourpick {
  font-size: 14px;
  color: var(--text-mid);
  display: block;
}

/* Final comparison */
.compare {
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 10px auto;
}

.compare .panel {
  flex: 1;
  border-radius: 12px;
  padding: 20px 18px;
  border: 1px solid var(--border);
}

.compare .panel h3 {
  margin: 0 0 8px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-mid);
}

.compare .panel .scen-label {
  font-size: 28px;
  font-weight: 700;
}

.compare .panel .scen-headline {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
}

.compare .vs {
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--nessie-navy);
}

.changes {
  list-style: none;
  padding: 0;
  margin: 16px auto 0;
  max-width: 720px;
  width: 100%;
  text-align: left;
}

.changes li {
  padding: 7px 14px;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.changes li.changed {
  background: var(--scenario-amber-lt);
  font-weight: 600;
}

.changes .rn {
  font-weight: 700;
  color: var(--nessie-navy);
}

.same-note {
  margin-top: 14px;
  font-size: 18px;
  font-style: italic;
  color: var(--text-mid);
}

/* Round robin */
.rr-instruction {
  font-size: 16px;
  color: var(--text-mid);
  margin-top: 12px;
}

/* Pre-session setup */
.setup-screen {
  position: fixed;
  inset: 60px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: var(--bg-light);
  z-index: 30;
}

.setup-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 34px 30px;
  max-width: 560px;
  width: 100%;
  text-align: center;
}

.setup-card h1 {
  color: var(--nessie-navy);
  font-size: 26px;
  margin: 0 0 8px;
}

.setup-card p {
  color: var(--text-mid);
  font-size: 16px;
}

.setup-card .code-display {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 12px;
  color: var(--nessie-teal);
  margin: 18px 0;
}

.setup-card .join-url {
  font-size: 18px;
  color: var(--nessie-navy);
  font-weight: 600;
  margin-bottom: 20px;
}

@media (max-width: 720px) {
  .compare {
    flex-direction: column;
  }
  .site-header .session-title {
    display: none;
  }
  .site-header .brand .sep,
  .site-header .brand .sub {
    display: none;
  }
  .site-header .brand .brand-logo {
    height: 30px;
  }
}