/* De Werkplaats — narrowcasting (V1 Modern Calm) — flex-only voor Chromium 49 */

/* Lokaal gehoste Ubuntu — geen externe CDN dependency */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/ubuntu-300.woff2?v=20260428110107') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ubuntu-400.woff2?v=20260428110107') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ubuntu-500.woff2?v=20260428110107') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/ubuntu-700.woff2?v=20260428110107') format('woff2');
}

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: #0f1612;
  font-family: 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
  color: #ece4cf;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

#stage {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0f1612;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nc {
  width: 1920px; height: 1080px;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  overflow: hidden;
}

/* Diagnostiek — alleen zichtbaar bij errors (rood) */
.diag {
  position: fixed;
  bottom: 12px; right: 12px;
  background: rgba(180, 50, 50, .9);
  color: #fff;
  font-family: monospace;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 4px;
  max-width: 560px;
  z-index: 9999;
  line-height: 1.3;
}

/* ── V1 Modern Calm — DARK ───────────────────────────────── */
.v1 {
  background: #0f1612;
  color: #ece4cf;
  padding: 56px 72px;
  display: flex;
  flex-direction: column;
}
.v1, .v1 * { font-family: 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif; font-weight: 400; }

/* TOPBAR */
.v1 > .top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #2a342c;
}
.v1 > .top > .logo {
  flex: 0 0 auto;
  height: 110px; width: auto; display: block;
  margin-right: 40px;
}
.v1 > .top > .room-block { flex: 1 1 auto; }
.v1 > .top > .clock-wrap {
  flex: 0 0 auto;
  text-align: right;
  margin-left: 40px;
}
.v1 .room-block .org {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #b8d3a7;
}
.v1 .room-block .room {
  font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-top: 8px;
  color: #ece4cf;
}
.v1 .room-block .room-meta { color: #9aa898; font-size: 15px; margin-top: 8px; }
.v1 .room-block .room-tv {
  color: #6e7c6c; font-size: 13px; margin-top: 4px;
  font-style: italic; letter-spacing: .01em;
}
.v1 .clock {
  font-size: 80px; font-weight: 300; letter-spacing: -0.04em; line-height: 1;
  color: #ece4cf;
}
.v1 .clock .colon { color: #b8d3a7; }
.v1 .date {
  color: #9aa898; font-size: 15px; text-align: right; margin-top: 8px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* MIDDLE row — now-card + right column */
.v1 > .middle {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  margin-top: 32px;
  margin-bottom: 32px;
}
.v1 > .middle > .now {
  flex: 1.3 1 0;
  min-width: 0;
  min-height: 0;
  margin-right: 56px;
}
.v1 > .middle > .right {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* NOW CARD */
.v1 .now {
  background: #1a2620; color: #f0eee5;
  border: 1px solid #2a3a31;
  border-radius: 32px;
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  height: 100%;
}
.v1 .now > * + * { margin-top: 16px; }
.v1 .now .badge {
  display: inline-flex; align-items: center;
  font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
  color: #b8d3a7; font-weight: 500;
}
.v1 .now .badge .dot {
  width: 10px; height: 10px; background: #b8d3a7; border-radius: 50%;
  margin-right: 12px;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { opacity: 1; }
  70% { opacity: .35; }
  100% { opacity: 1; }
}
.v1 .now h1 {
  font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  margin: 18px 0 0;
}
.v1 .now h1.no-title {
  font-weight: 300; color: #a9b3a8; font-style: italic;
}
.v1 .now .org-line { color: #a9b3a8; font-size: 20px; margin-top: 12px; }
.v1 .now .guests-welcome {
  margin-top: 16px;
  padding: 12px 20px;
  background: rgba(184, 211, 167, 0.10);
  border-left: 3px solid #b8d3a7;
  border-radius: 4px 14px 14px 4px;
  display: block;
}
.v1 .now .guests-welcome .gw-lbl {
  display: block;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #b8d3a7; font-weight: 500;
}
.v1 .now .guests-welcome .gw-names {
  display: block;
  font-size: 20px; font-weight: 500; color: #ece4cf; line-height: 1.3;
  margin-top: 4px;
}
.v1 .now .meta {
  display: flex;
  margin-top: 24px;
}
.v1 .now .meta > * + * { margin-left: 48px; }
.v1 .now .meta .lbl {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8a958a;
}
.v1 .now .meta .val { font-size: 24px; font-weight: 500; margin-top: 6px; }
.v1 .now .names {
  margin-top: 18px; font-size: 16px; line-height: 1.5; color: #c8cfc6;
}
.v1 .now .names .name { white-space: nowrap; display: inline-block; }
.v1 .now .names .name + .name::before {
  content: " · "; color: #5a665d; margin: 0 6px;
}
.v1 .progress {
  height: 4px; background: rgba(255,255,255,.12); border-radius: 999px;
  margin-top: 20px; overflow: hidden;
}
.v1 .progress > div {
  height: 100%; background: #b8d3a7;
  -webkit-transition: width 1s linear;
  transition: width 1s linear;
}

/* NOW — free state */
.v1 .now.free h1 { color: #f0eee5; }
.v1 .now.free .badge { color: #b8d3a7; }
.v1 .now.free .free-text {
  margin-top: 36px; color: #a9b3a8; font-size: 22px;
}

/* RIGHT column children spacing */
.v1 .right > * + * { margin-top: 22px; }

/* WEATHER */
.v1 .weather {
  background: #1a2620;
  border: 1px solid #2a3a31;
  color: #ece4cf;
  border-radius: 28px;
  padding: 28px 32px;
  flex: 0 0 auto;
}
.v1 .weather .row1 {
  display: flex; align-items: center; justify-content: space-between;
}
.v1 .weather .city {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #9aa898;
}
.v1 .weather .cond { font-size: 18px; font-weight: 500; color: #ece4cf; }
.v1 .weather .now-temp {
  display: flex; align-items: center; margin-top: 8px;
}
.v1 .weather .weather-icon { color: #efa15c; flex-shrink: 0; margin-right: 24px; }
.v1 .weather .weather-icon svg { display: block; width: 56px; height: 56px; }
.v1 .weather .t {
  font-size: 84px; font-weight: 300; line-height: 1; letter-spacing: -0.04em;
  color: #ece4cf;
}
.v1 .weather .sub { color: #9aa898; font-size: 14px; margin-top: 4px; }
.v1 .hours {
  display: flex;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #2a3a31;
}
.v1 .hours .h { flex: 1 1 0; text-align: center; }
.v1 .hours .h .hv { font-size: 12px; color: #9aa898; letter-spacing: .08em; }
.v1 .hours .h svg { margin: 6px auto; display: block; color: #9aa898; width: 22px; height: 22px; }
.v1 .hours .h .tv { font-weight: 500; font-size: 18px; color: #ece4cf; }

/* NEXT BLOCK */
.v1 .next-block {
  flex: 1 1 0;
  min-height: 0;
  background: #1a2620;
  border: 1px solid #2a3a31;
  border-radius: 28px;
  padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.v1 .nb-kicker {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #9aa898;
}
.v1 .nb-time {
  font-size: 64px; font-weight: 400; color: #b8d3a7;
  line-height: 1; margin-top: 14px; letter-spacing: -0.02em;
}
.v1 .next-block.is-free .nb-time {
  font-size: 30px; font-weight: 300; font-style: italic;
  color: #9aa898;
}

/* BOTTOM row */
.v1 > .bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding-top: 24px;
  border-top: 1px solid #2a342c;
}
.v1 > .bottom > .starter {
  flex: 1.3 1 0;
  min-width: 0;
  margin-right: 56px;
}
.v1 > .bottom > .rec {
  flex: 1 1 0;
  min-width: 0;
}

/* STARTER */
.v1 .starter {
  background: #2c3a26;
  color: #ece4cf;
  border: 1px solid #3a4a32;
  border-radius: 28px;
  padding: 28px 36px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.v1 .starter .lbl {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: #b8d3a7; font-weight: 500;
}
.v1 .starter .q {
  font-size: 30px; line-height: 1.25; font-weight: 500;
  margin-top: 10px; letter-spacing: -0.01em;
  color: #ece4cf;
}
.v1 .starter .q .attr {
  display: block; margin-top: 10px; font-size: 14px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: #b8d3a7;
}
.v1 .starter .quote-mark {
  position: absolute; right: 24px; top: -10px;
  font-size: 140px; line-height: 1; color: #b8d3a7; opacity: .18;
  font-family: Georgia, serif; pointer-events: none;
}

/* RECORDER */
.v1 .rec {
  background: #1a2620;
  border: 1px solid #2a3a31;
  border-radius: 28px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
}
.v1 .rec-left {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.v1 .rec-left > * + * { margin-top: 14px; }
.v1 .rec-row { display: flex; align-items: center; }
.v1 .rec .mic {
  width: 56px; height: 56px; border-radius: 50%;
  background: #b8d3a7; color: #15201a;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 16px;
}
.v1 .rec .ttl {
  color: #ece4cf; font-weight: 500; font-size: 24px;
  line-height: 1.05; letter-spacing: -0.01em;
}
.v1 .rec .sub { color: #9aa898; font-size: 14px; margin-top: 4px; }
.v1 .rec .url {
  color: #b8d3a7; font-weight: 500; font-size: 14px; letter-spacing: .04em;
}
.v1 .rec .qr-wrap {
  flex: 0 0 auto;
  padding: 8px; background: #fff; border-radius: 14px; border: 1px solid #2a3a31;
  margin-left: 22px;
}