/* Theme taken from defensie.nl (stylesheet RenderContextHandler.DjOlzHUk.css, Nov 2026):
   Rijkshuisstijl greys, royal-orange theme colour, black/white primary buttons,
   square corners, dashed focus outline, and the site's own .dark palette. */

:root {
  /* Palette (exact defensie.nl values) */
  --orange: #e17000;          /* --color-brand-royal-orange-base */
  --orange-dark: #b45900;     /* royal-orange-darken-1 */
  --orange-light: #f9e2cc;    /* royal-orange-lighten-2 */
  --gray-1: #f9f9f9;
  --gray-2: #f3f3f3;
  --gray-3: #e6e6e6;
  --gray-4: #ccc;
  --gray-6: #999;
  --gray-7: #696969;
  --gray-8: #535353;
  --black-1: #111;            /* --color-dark-black-1..4 */
  --black-2: #1a1a1a;
  --black-3: #262626;
  --black-4: #333;
  --error-red: #d52b1e;

  /* Light theme roles */
  --bg: var(--gray-1);
  --surface: #fff;
  --surface-alt: var(--gray-2);
  --text: #000;
  --text-muted: var(--gray-7);
  --divider: var(--gray-3);
  --input-border: var(--gray-7);
  --btn-primary-bg: var(--black-1);
  --btn-primary-fg: #fff;
  --btn-primary-hover: var(--black-4);
  --btn-primary-active: var(--gray-8);
  --btn-secondary-bg: var(--gray-3);
  --btn-secondary-fg: #000;
  --btn-secondary-hover: var(--gray-4);
  --focus: #000;
  --card-border: var(--black-1);
  --error: var(--error-red);
  --ok: #39870c;

  --font-sans: "RO Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* Roboto Condensed only when installed; otherwise the normal sans (no narrow fallbacks) */
  --font-headings: "Roboto Condensed", var(--font-sans);

  /* Spacing scale */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

  color-scheme: light;
}

/* Dark theme (defensie.nl .dark values). Set by theme.js from device preference or toggle. */
:root[data-theme="dark"] {
  --bg: var(--black-1);
  --surface: var(--black-2);
  --surface-alt: var(--black-3);
  --text: #fff;
  --text-muted: var(--gray-3);
  --divider: var(--black-3);
  --input-border: var(--gray-6);
  --btn-primary-bg: #fff;
  --btn-primary-fg: #000;
  --btn-primary-hover: var(--gray-3);
  --btn-primary-active: var(--gray-4);
  --btn-secondary-bg: var(--black-4);
  --btn-secondary-fg: #fff;
  --btn-secondary-hover: var(--gray-8);
  --focus: #fff;
  --card-border: var(--gray-6);
  --error: #ff6b5e;
  --ok: #7cc243;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px dashed var(--focus); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 max(var(--space-3), env(safe-area-inset-right)) var(--space-5) max(var(--space-3), env(safe-area-inset-left));
}

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  padding-top: env(safe-area-inset-top);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 3.5rem;
}
.brand {
  font-family: var(--font-headings); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
  color: var(--text); text-decoration: none; white-space: nowrap;
  border-left: 5px solid var(--orange); padding: .125rem 0 .125rem .625rem;
}
.header-actions { display: flex; align-items: center; gap: .25rem; min-width: 0; }

/* Session name with its caption */
.nav-session {
  display: flex; flex-direction: column; min-width: 0;
  padding-right: .75rem; margin-right: .5rem;
  border-right: 1px solid var(--divider);
  line-height: 1.2;
}
.nav-session-label {
  font-size: .6875rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.nav-session-name {
  font-weight: 700; font-size: .9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem;
}

/* Icon buttons: 44px touch target, 22px icon */
.icon-button {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; color: var(--text);
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.icon-button svg {
  width: 1.375rem; height: 1.375rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-button svg .dot { fill: currentColor; stroke: none; }
@media (hover: hover) { .icon-button:hover { background: var(--surface-alt); color: var(--orange); } }
.icon-button:active { background: var(--divider); }
#leave { color: var(--text); }

/* Moon in light mode (go dark), sun in dark mode (go light) */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* ---------- Headings: Roboto Condensed with the orange bar underneath, like defensie.nl ---------- */
h1, h2 { font-family: var(--font-headings); font-weight: 700; color: var(--text); }
h1 {
  font-size: 2rem; line-height: 1.2;
  margin: var(--space-4) 0 var(--space-2); overflow-wrap: anywhere;
}
h1::after {
  content: ""; display: block; width: 60px; height: 6px; margin-top: .625rem;
  background: var(--orange);
}
/* Section labels: compact so the whole session fits on a phone */
h2 {
  font-size: 1rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em;
  margin: var(--space-3) 0 var(--space-1);
}
.lead { font-size: 1.1875rem; line-height: 1.5; margin: 0 0 var(--space-3); max-width: 40rem; }

/* ---------- Join form ---------- */
.panel { background: var(--surface); padding: var(--space-4); max-width: 32rem; }
.field { margin: 0 0 var(--space-3); }
label { display: block; font-weight: 700; margin-bottom: var(--space-1); }
input {
  display: block; width: 100%;
  padding: .875rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--input-border); border-radius: 0;
  font-size: 1.125rem; /* >= 16px avoids iOS zoom on focus */
}
input:focus-visible { outline-offset: 2px; }

/* ---------- Buttons (defensie.nl .btn: bold, square, 2px border) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1.5rem; min-height: 2.875rem;
  border: 2px solid transparent; border-radius: 0;
  font-weight: 700; line-height: 1.5rem; cursor: pointer;
  transition: background-color .3s ease-in-out;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
  .btn-secondary:hover:not(:disabled) { background: var(--btn-secondary-hover); }
}
.btn-primary:active:not(:disabled) { background: var(--btn-primary-active); }
.btn:disabled { cursor: not-allowed; opacity: .4; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: var(--space-2); max-width: 32rem; }

.error { color: var(--error); font-weight: 700; margin: 0; }
.error:not(:empty) { margin: var(--space-1) 0; }

/* ---------- Session ---------- */
.progress { color: var(--text-muted); margin: 0; font-size: 1rem; }

/* Team: compact rows (name + small card), as many columns as fit */
.people {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem;
}
.person {
  display: flex; align-items: center; gap: .625rem;
  min-height: 3rem; padding: .375rem .5rem .375rem .75rem;
  background: var(--surface); border-left: 4px solid var(--divider);
}
.person.voted { border-left-color: var(--orange); }
.person.offline { opacity: .5; }
.person .avatar, .person .status { display: none; } /* used by the Apple theme */
.who { flex: 1; min-width: 0; }
.person-name {
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-name .you { font-weight: 400; color: var(--text-muted); }

/* Seat card: flips over in 3D on reveal */
.mini { width: 1.75rem; height: 2.375rem; flex: none; perspective: 400px; }
.mini-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1);
}
.mini.revealed .mini-inner { transform: rotateY(180deg); }
.mini-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: var(--font-headings); font-size: 1rem; font-weight: 700;
}
.mini-back { border: 2px dashed var(--divider); background: var(--surface-alt); }
.mini.voted .mini-back {
  border: 2px solid var(--orange);
  background: repeating-linear-gradient(45deg, var(--orange) 0 4px, var(--orange-dark) 4px 8px);
  background-size: 11.314px 11.314px; /* one stripe period, so the drift loops seamlessly */
  animation: stripes-drift 1.2s linear infinite;
}
@keyframes stripes-drift { to { background-position: 11.314px 0; } }
.mini-front { transform: rotateY(180deg); border: 2px solid var(--card-border); background: var(--surface); color: var(--text); }

/* ---------- Result after reveal: a solid, inverted block that can't be missed ---------- */
:root { --result-bg: var(--black-1); --result-fg: #fff; --result-accent: var(--orange); }
:root[data-theme="dark"] { --result-bg: #fff; --result-fg: #000; --result-accent: var(--orange-dark); }

.summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  margin: .75rem 0 0; padding: 1rem 1.25rem;
  background: var(--result-bg); color: var(--result-fg);
  border-top: 6px solid var(--result-accent);
}
.summary:not(.shown) { display: none; }
.summary-main { display: flex; flex-direction: column; line-height: 1; }
.summary-label {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  opacity: .8; margin-bottom: .25rem;
}
.summary .big {
  font-family: var(--font-headings); font-weight: 700;
  font-size: 3.5rem; line-height: 1; color: var(--result-accent);
  font-variant-numeric: tabular-nums;
}
.summary-side { display: flex; flex-direction: column; gap: .5rem; min-width: 0; flex: 1 1 12rem; }
.summary .meta { font-size: 1rem; font-weight: 700; }

/* Votes per card (bars, motion.css) */
.summary { --bar-top: var(--result-accent); }
.bar-v { font-family: var(--font-headings); font-size: 1.125rem; }

/* Consensus: green */
.summary.is-consensus { background: var(--ok); color: #fff; border-top-color: #fff; --bar-top: currentColor; }
.summary.is-consensus .big { color: #fff; }
:root[data-theme="dark"] .summary.is-consensus { color: #000; border-top-color: #000; }
:root[data-theme="dark"] .summary.is-consensus .big { color: #000; }

/* Lowest / highest estimate in the team list */
.person .tag:empty { display: none; }
.person .tag {
  display: block; margin-top: .125rem;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--orange-dark);
}
:root[data-theme="dark"] .person .tag { color: var(--orange); }
.person.extreme { box-shadow: inset 0 0 0 2px var(--orange); }

/* Cards can't be picked after reveal: hide them so the result gets the space */
#room-view.is-revealed .tray { display: none; }

/* ---------- Card deck (a plain section in this theme) ---------- */
/* 9 cards: 5 per row = 2 rows */
.deck {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  max-width: 32rem;
  padding-top: 6px; /* room for the lifted selected card */
}
.card {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--card-border); border-radius: 0;
  font-family: var(--font-headings); font-size: 1.625rem; font-weight: 700;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, rotate .3s ease-out;
}
.card:active { transform: scale(.96); }
@media (hover: hover) {
  .card:hover:not(:disabled) { border-color: var(--orange); background: var(--surface-alt); }
}
.card[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); color: #fff;
  transform: translateY(-5px);
}
.card:disabled { cursor: not-allowed; opacity: .4; transform: none; }

/* ---------- Wide screens: team left, cards right ---------- */
@media (min-width: 56rem) {
  #room-view:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    /* right column ("side") holds the cards, or the result once revealed */
    grid-template-areas:
      "title    title"
      "progress side"
      "meter    side"
      "label    side"
      "team     side"
      "actions  side"
      "error    side"
      "note     side";
    grid-template-rows: auto auto auto auto auto auto auto 1fr; /* last row absorbs extra height of the side column */
    column-gap: var(--space-4);
    align-items: start;
  }
  #room-title { grid-area: title; }
  #room-view .progress { grid-area: progress; }
  #room-view .meter { grid-area: meter; }
  #room-view .section-title { grid-area: label; }
  #room-view .people { grid-area: team; }
  #room-view .actions { grid-area: actions; }
  #room-error { grid-area: error; }
  #observer-note { grid-area: note; }
  #room-view .tray, #room-view .summary { grid-area: side; }
  #room-view .summary { margin-top: var(--space-3); flex-direction: column; align-items: flex-start; }
  #room-view .summary-side { flex: none; width: 100%; }
  #room-view .tray-title { margin-top: var(--space-3); }
}

/* ---------- Phones: everything on one screen ---------- */
@media (max-width: 40rem) {
  :root { --space-3: 1rem; --space-4: 1.25rem; --space-5: 1.5rem; }
  .container { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); padding-bottom: var(--space-3); }
  .header-inner { gap: .5rem; min-height: 3.25rem; }
  .brand { font-size: 1.0625rem; }
  .header-actions { gap: 0; }
  .nav-session { padding-right: .5rem; margin-right: .25rem; }
  .nav-session-name { max-width: 7rem; }
  h1 { font-size: 1.625rem; }
  #room-title { display: none; } /* the session name is already in the header */
  .progress { margin-top: .75rem; }
  .panel { padding: var(--space-3); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
  .person { min-height: 2.75rem; padding: .25rem .375rem .25rem .625rem; gap: .5rem; }
  .person-name { font-size: .9375rem; }
  .actions { max-width: none; }
  .actions .btn { padding-left: .75rem; padding-right: .75rem; }
  .deck { max-width: none; gap: .375rem; }
  .card { font-size: 1.5rem; }
}

/* Clock (shared.css): condensed heading font, like the brand */
:root .clock { font-family: var(--font-headings); font-size: 1.125rem; color: var(--text); }

/* Motion colours (motion.css) */
:root {
  --motion-accent: var(--orange);
  --motion-ok: var(--ok);
  --motion-track: var(--divider);
  --motion-muted: var(--text-muted);
  --motion-confetti: var(--orange-light);
  --motion-radius: 0;
  --switch-radius: 0;          /* square, like the rest of this theme */
  --switch-off: var(--gray-6);
}

/* Theme menu colours (menu.css) */
:root {
  --menu-bg: var(--surface);
  --menu-fg: var(--text);
  --menu-border: var(--divider);
  --menu-hover: var(--surface-alt);
  --menu-accent: var(--orange);
  --menu-radius: 0;
  --menu-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .summary { animation: none; }
}