/*
  Sonnenbund design overlay for the Galène client.

  Loaded AFTER galene.css (see the galene.html/index.html overrides), so
  equal-specificity rules here win by cascade order. This file re-skins and
  re-spaces only: colours, fonts, spacing, rounding, shadows. It never
  changes ids, structural classes or behaviour, so Galène's own JS keeps
  working and a Galène update needs at most a re-check of the overridden
  HTML files — not of this file.

  The design system is ported from sonnenbund-seite (src/app/globals.css):
  same tokens (warm-white ground, amber sun accent, fir green, wordmark
  brown), same card recipe (1px line border, 3px accent top border, 12px
  radius, soft double shadow), same button shape (700 weight, 8px radius,
  1.5px border), same eyebrow style (uppercase, wide tracking).

  Type roles:
  - Hand font (Indie Flower)  = brand voice: wordmark, drawer title,
    the "Willkommen!" greeting. Never for functional text.
  - Sans (Open Sans)          = everything functional, incl. the room
    title in the top bar (readability first — it was hand font before
    and unreadable on the light bar).
*/

@font-face {
  font-family: 'Sonnenbund Sans';
  src: url('/fonts/open-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sonnenbund Hand';
  src: url('/fonts/indie-flower.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sb-bg: #FCFAF6;            /* warm white ground */
  --sb-surface: #FFFFFF;
  --sb-surface-2: #F7F1E7;     /* warm card alternative */
  --sb-text: #3D342B;          /* warm near-black */
  --sb-text-soft: #5F4936;
  --sb-headline: #8A6A4E;      /* wordmark brown, for brand headings */
  --sb-line: rgba(61, 52, 43, .12);
  --sb-line-strong: rgba(61, 52, 43, .20);
  --sb-amber: #F4A50C;         /* sun amber, primary accent */
  --sb-amber-strong: #E0930A;
  --sb-amber-ink: #3D342B;     /* text on amber fill */
  --sb-green: #0D704D;         /* fir green */
  --sb-green-strong: #0A6042;
  --sb-green-ink: #0A6042;     /* green as text colour (AA) */
  --sb-wash-green: #F1F6F2;    /* faintest green tint */
  --sb-welcome: #2A9DB0;       /* greeting turquoise (large text only) */
  --sb-danger: #BE4436;        /* warm functional red (mute, errors) */
  --sb-dark: #1F1A15;          /* warm black — the video stage */
  --sb-dark-surface: #2A241D;  /* tile ground on the video stage */
  --sb-focus: #C97A00;
  --sb-radius: 12px;
  --sb-radius-sm: 8px;
  --sb-shadow-sm: 0 1px 2px rgba(61, 52, 43, .06);
  --sb-shadow: 0 1px 2px rgba(61, 52, 43, .05), 0 10px 28px rgba(61, 52, 43, .07);
  --sb-sans: 'Sonnenbund Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sb-hand: 'Sonnenbund Hand', 'Segoe Script', cursive;

  /* Right-click menu skin. galene.css defines the same custom properties;
     this file loads later, so these values win. */
  --contextualMenuBg: var(--sb-surface);
  --contextualMenuText: var(--sb-text);
  --contextualMenuShadow: 0 10px 28px rgba(61, 52, 43, .18);
  --contextualMenuRadius: 8px;
  --contextualSubMenuBg: var(--sb-surface);
  --contextualHover: var(--sb-surface-2);
  --contextualOverflowIcon: var(--sb-headline);
  --contextualSeperator: var(--sb-line-strong);
}

/* ---- Base ---- */
body {
  font-family: var(--sb-sans);
  color: var(--sb-text);
  background-color: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--sb-green-ink);
}
a:hover {
  color: var(--sb-green);
}
.app {
  background-color: var(--sb-bg);
  box-shadow: none;
}
.container {
  background: var(--sb-bg);
}

/* Checkbox / radio accent (Galène defaults to purple). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--sb-amber);
}

/* ---- Buttons (shape from the sonnenbund-seite .btn recipe) ---- */
.btn {
  font-family: inherit;
  font-weight: 700;
  border: 1.5px solid transparent;
  border-radius: var(--sb-radius-sm);
  padding: .5em 1.1em;
  line-height: 1.4;
}
/* Join / connect = primary amber. */
.btn-blue {
  background-color: var(--sb-amber);
  border-color: var(--sb-amber-strong);
  color: var(--sb-amber-ink);
}
.btn-blue:hover {
  background-color: var(--sb-amber-strong);
  border-color: var(--sb-amber-strong);
  color: var(--sb-amber-ink);
}
/* Enable (start presenting) = go green. */
.btn-success {
  background-color: var(--sb-green);
  border-color: var(--sb-green-strong);
  color: #fff;
}
.btn-success:hover {
  background-color: var(--sb-green-strong);
  border-color: var(--sb-green-strong);
  color: #fff;
}
/* Disable / stop = warm functional red. */
.btn-cancel {
  background-color: var(--sb-danger);
  border-color: #A93A2E;
  color: #fff;
}
.btn-cancel:hover {
  background-color: #A93A2E;
  border-color: #A93A2E;
  color: #fff;
}
/* Neutral default = warm brown. */
.btn-default {
  background-color: var(--sb-text-soft);
  border-color: var(--sb-text-soft);
  color: #fff;
}
.btn-default:hover {
  background-color: var(--sb-text);
  border-color: var(--sb-text);
  color: #fff;
}

/* ---- Text inputs / selects ---- */
.form-control,
.select {
  font-family: inherit;
  color: var(--sb-text);
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-sm);
}
.form-control {
  padding: .5em .75em;
}
.form-control:focus {
  border-color: var(--sb-amber);
}

/* =====================================================================
   Landing page (index.html)
   ===================================================================== */

/* Centred hero column: logo, wordmark, tagline, join card. The footer
   below stays pinned to the bottom by the body flex column that
   mainpage.css already sets up. */
.home {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  margin-bottom: 0;
  padding: clamp(1.5rem, 4vh, 3rem) 1.25rem;
  text-align: center;
}
.sb-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sb-hero-logo {
  width: clamp(72px, 11vw, 92px);
  height: auto;
  margin-bottom: .6rem;
}
.home .navbar-brand {
  margin: 0;
  font-family: var(--sb-hand);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--sb-headline);
}
.sb-tagline {
  margin: .4rem 0 0;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--sb-text-soft);
}

/* Join card — the sonnenbund-seite card recipe with the amber top edge. */
.sb-card {
  width: min(100%, 23rem);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-top: 3px solid var(--sb-amber);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 1.5rem 1.5rem 1.35rem;
  text-align: left;
}
.sb-card label {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .4rem;
}
.sb-card .form-control {
  width: 100%;
}
#submitbutton {
  width: 100%;
  margin-top: .9rem;
}
#errormessage {
  height: auto;
  min-height: 1.2em;
  margin: .6rem 0 0;
  color: var(--sb-danger);
  font-weight: 600;
  font-size: .9rem;
}

/* Public rooms list under the card (only shown when rooms exist). */
.home .groups,
.home .nogroups {
  width: min(100%, 34rem);
  text-align: left;
}
.home .groups h2,
.home .nogroups h2 {
  font-family: var(--sb-hand);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--sb-headline);
  margin: 0 0 .5rem;
}
#public-groups-table {
  border-collapse: collapse;
  width: 100%;
}
#public-groups-table td {
  padding: .5rem .8rem .5rem 0;
  border-bottom: 1px solid var(--sb-line);
  color: var(--sb-text-soft);
  font-size: .95rem;
}
#public-groups-table tr a {
  margin-left: 0;
  font-weight: 700;
}

/* ---- Discreet thank-you footer to the Galène developers ----
   Landing page only (Thomas approved this exact look). German by
   default; the tiny inline script in index.html flips to English for
   non-German browsers by toggling .lang-en on <html>. */
.sb-thanks {
  font-family: var(--sb-sans);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--sb-text-soft);
  text-align: center;
  padding: .8rem 1rem;
  max-width: 46rem;
  margin: 1rem auto 0;
}
.sb-thanks a {
  color: var(--sb-green-strong);
  text-decoration: none;
  font-weight: 600;
}
.sb-thanks a:hover {
  text-decoration: underline;
}
.sb-thanks .sb-links {
  margin-top: .25rem;
  opacity: .95;
}
.sb-thanks .sb-links a + a::before {
  content: "·";
  color: var(--sb-line);
  margin: 0 .5rem;
  text-decoration: none;
}
/* Locale toggle: German by default, English when <html class="lang-en">. */
.sb-thanks [lang="en"] { display: none; }
html.lang-en .sb-thanks [lang="de"] { display: none; }
html.lang-en .sb-thanks [lang="en"] { display: inline; }

/* =====================================================================
   Meeting screen (galene.html) — top bar
   ===================================================================== */

/* Warm translucent bar with a hairline, like the sonnenbund-seite nav.
   Height stays 3.5rem — galene.css derives every layout height from it. */
.topnav {
  background: var(--sb-bg);
  background: rgba(252, 250, 246, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--sb-line);
  padding: 0 .9rem 0 .5rem;
}

/* Left cluster: hamburger + title, vertically centred (the flex display
   neutralises galene.css's floats on the children). */
#header {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
header .collapse {
  color: var(--sb-text-soft);
  font-size: 18px;
  margin: 0 .35rem 0 0;
  padding: .35rem .55rem;
  border-radius: var(--sb-radius-sm);
}
header .collapse:hover {
  color: var(--sb-text);
  background: var(--sb-surface-2);
}

/* Room title: clear dark sans — galene.js replaces the h1's text content
   with the room name, so readability comes first here (the hand font is
   reserved for brand voice). The sun logo lives in a ::before pseudo-
   element because setTitle() wipes the h1's children: a pseudo-element
   survives the textContent replacement, an inline <img> would not. */
.header-title {
  display: block;
  font-family: var(--sb-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sb-text);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-title::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: .55rem;
  vertical-align: -0.4em;
  background: url('/sonnenbund-icon.png') center / contain no-repeat;
}

/* Control cluster: one flex row with a single gap (floats are ignored on
   flex items, so galene.css's uneven per-item margins fall away). */
.nav-menu {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: none;
}
.nav-menu .nav-link {
  margin: 0;
}
.nav-link {
  color: var(--sb-text-soft);
  padding: .3rem .55rem;
  min-width: 34px;
  border-radius: var(--sb-radius-sm);
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover {
  color: var(--sb-text);
  background: var(--sb-surface-2);
}
.nav-link label {
  color: var(--sb-text-soft);
  font-size: .64rem;
  font-weight: 600;
  margin-top: 1px;
}
.nav-link:hover label,
.nav-link label:hover {
  color: var(--sb-text);
}
.nav-button {
  font-size: 21px;
}
.nav-more {
  padding-top: 0;
}
/* Muted / cancel states keep a functional red, tuned warm. */
.nav-cancel, .muted, .nav-cancel label, .muted label {
  color: var(--sb-danger);
}
.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
  color: var(--sb-danger);
}
/* The present/unpresent buttons lose their fixed width and odd offsets;
   the flex gap does the spacing. */
#presentbutton, #unpresentbutton {
  width: auto;
  margin: 0;
  font-size: .95rem;
  text-align: center;
}

/* =====================================================================
   Meeting screen — left sidebar (brand corner + participants)
   ===================================================================== */

#left-sidebar {
  background: var(--sb-surface-2);
  border-right: 1px solid var(--sb-line);
}
/* Brand corner: quiet warm header with the hand-font wordmark in the
   wordmark brown — replaces the former heavy green block. */
.users-header {
  background: var(--sb-surface-2);
  border-bottom: 1px solid var(--sb-line);
  display: flex;
  align-items: center;
  padding: 0 .9rem;
}
.users-header .galene-header,
#left-sidebar .galene-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sb-hand);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--sb-headline);
  line-height: 1;
  /* The header is a link back to the landing page. */
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.users-header .galene-header:hover,
#left-sidebar .galene-header:hover {
  opacity: .75;
}
.galene-header .sb-logo {
  height: 1.5em;
  width: auto;
  display: inline-block;
}

/* Participant list: transparent rows on the warm surface, fir-green
   presence dot, faint green wash on hover. */
#users {
  background-color: transparent;
  border: none;
}
#users .user-p {
  border-bottom: 1px solid var(--sb-line);
  font-size: .95rem;
}
#users > div:hover {
  background-color: var(--sb-wash-green);
}
#users > div::before {
  color: var(--sb-green);
}
#users > div::after {
  color: var(--sb-text-soft);
}

/* =====================================================================
   Meeting screen — chat column
   ===================================================================== */

#chat {
  background-color: var(--sb-bg);
  border-right: 1px solid var(--sb-line);
}
#box {
  padding: 1rem .9rem;
}
/* Bubbles follow the sonnenbund-seite chat demo: white surface with a
   hairline and one squared-off corner; own messages get the faint green
   wash and sit right. (The padding keeps galene.css's !important.) */
.message {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: 14px 14px 14px 4px;
  box-shadow: var(--sb-shadow-sm);
  font-size: .82rem;
  padding: 6px 12px 8px !important;
}
.message-sender {
  background: #E8F1ED; /* 10% fir green over white, precomputed */
  border-color: rgba(13, 112, 77, .22);
  border-radius: 14px 14px 4px 14px;
  float: right;
}
.message-private {
  background: var(--sb-surface);
  border-left: 3px solid var(--sb-amber);
}
.message-system {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: .78rem;
  color: var(--sb-text-soft);
}
.message-header {
  font-style: normal;
}
.message-user {
  font-weight: 700;
  font-size: .78rem;
  color: var(--sb-green-ink);
}
.message-time {
  color: var(--sb-text-soft);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.message-content {
  color: var(--sb-text);
  font-size: .92rem;
  line-height: 1.45;
  padding-left: 0;
}
.close-chat {
  color: var(--sb-text-soft);
}
.close-chat:hover, .close-chat:active {
  border-color: var(--sb-line-strong);
}
/* Composer: warm ground with a hairline on top; the fixed 53px height
   stays — #box's height calc depends on it. */
.reply {
  background-color: var(--sb-bg);
  border-top: 1px solid var(--sb-line);
  padding: 8px 10px;
}
.reply textarea.form-reply {
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-sm);
  background-color: var(--sb-surface);
  color: var(--sb-text);
  box-shadow: none;
  text-indent: 0;
  padding: 6px 10px;
}
.reply textarea.form-reply:focus {
  border-color: var(--sb-amber);
}
/* Send arrow = small primary. */
#inputbutton {
  background-color: var(--sb-amber);
  border-color: var(--sb-amber-strong);
  color: var(--sb-amber-ink);
  font-weight: 700;
  padding: 0 .85em;
}
#inputbutton:hover {
  background-color: var(--sb-amber-strong);
}
.file-progress {
  accent-color: var(--sb-amber);
}

/* =====================================================================
   Meeting screen — video stage
   ===================================================================== */

.video-container {
  background: var(--sb-dark);
}
#peers {
  padding: .9rem;
  row-gap: .8rem;
  column-gap: .8rem;
}
.peer {
  background: var(--sb-dark-surface);
  border-radius: var(--sb-radius);
  overflow: hidden;
}
/* The sun shines on whoever speaks. */
.peer-active {
  border: 2px solid var(--sb-amber);
}
/* Name plate: readable on any video via a soft dark scrim. */
.label {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 1.1rem .6rem .45rem;
  background: linear-gradient(180deg, rgba(31, 26, 21, 0), rgba(31, 26, 21, .62));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.chat-btn .icon-chat {
  color: #ECE3D6;
  text-shadow: none;
}
.show-video {
  background: var(--sb-amber);
  color: var(--sb-amber-ink);
}
/* Same keyframes name as galene.css — the later definition wins, so the
   attention pulse glows amber instead of purple. */
@keyframes blink {
  0% { box-shadow: 0 0 15px rgba(244, 165, 12, .9); }
  50% { box-shadow: none; }
  100% { box-shadow: 0 0 15px rgba(244, 165, 12, .9); }
}
#captions {
  background-color: rgba(31, 26, 21, .78);
  color: #FCFAF6;
  border-radius: var(--sb-radius-sm);
  padding: .25em .7em;
}

/* ---- Hide the upload-bitrate number under the own video ----
   Galène shows it as the local tile's label with class .label-fallback
   (in place of a username). Hiding just that class removes the numbers
   without touching real username labels. */
.label-fallback {
  display: none !important;
}

/* =====================================================================
   Pre-join screen ("green room") — the restyled login container
   ===================================================================== */

/* Full-viewport stage above the meeting chrome (topnav is z-index ~1039):
   before joining, the meeting top bar has no role, so the pre-join screen
   covers it. Deliberately no `display` here — galene.css provides the
   flex display and its `.invisible` must keep winning to hide the screen. */
#login-container {
  position: fixed;
  inset: 0;
  z-index: 2000;
  height: auto;             /* galene.css sets a calc() height; inset sizes us */
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: centring a block that is taller than the
     viewport pushes its top above the reachable scroll area — the screen
     then looks shoved down with its top cut off. Starting at the top keeps
     everything reachable; the block's own margin provides the placement. */
  justify-content: flex-start;
  padding: clamp(1rem, 3vh, 2rem) 1.25rem;
  background: var(--sb-bg);
  overflow: auto;
}

.sb-greenroom {
  width: min(100%, 62rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* sit high on the screen rather than dead-centre: a fixed, gently
     viewport-scaled top offset, all remaining space below */
  margin: clamp(.25rem, 5vh, 3.25rem) auto 0;
}

/* Brand link back to the landing page. */
.sb-gr-brand a {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sb-hand);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--sb-headline);
  text-decoration: none;
  transition: opacity .15s ease;
}
.sb-gr-brand a:hover {
  opacity: .75;
}
.sb-gr-brand img {
  height: 1.5em;
  width: auto;
}

/* Two columns: big preview left, join panel right; stacked on small
   screens (media query below). */
.sb-gr-columns {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.sb-gr-stage {
  min-width: 0;
}
.sb-gr-videobox {
  position: relative;
  /* The box follows the real camera shape: the preview script writes the
     stream's width/height ratio into --sb-gr-ar once known (portrait phone
     cameras included), so the picture fits without cropping. 16:10 is the
     placeholder shape until then. The width formula caps the box height at
     58vh (44vh on small screens below): with the ratio fixed, limiting the
     width to height-cap x ratio limits the height, so a tall portrait
     stream can never push the controls out of view. */
  aspect-ratio: var(--sb-gr-ar, 1.6);
  width: min(100%, calc(58vh * var(--sb-gr-ar, 1.6)));
  margin-inline: auto;
  background: var(--sb-dark);
  border-radius: var(--sb-radius);
  overflow: hidden;
  box-shadow: var(--sb-shadow);
}
#sonnenbund-gr-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirror the self-view, the way a real mirror would. */
  transform: scaleX(-1);
}
/* The id/class selectors above set `display`, so galene.css's plain
   `.invisible` would lose against them — restate it. */
#sonnenbund-gr-video.invisible,
.sb-gr-placeholder.invisible {
  display: none;
}
.sb-gr-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: #B9AD9C;           /* soft warm tone, readable on the dark stage */
  font-size: .95rem;
}
.sb-gr-placeholder i {
  font-size: 2.3rem;
  opacity: .85;
}
.sb-gr-privacy {
  margin: .6rem 0 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--sb-text-soft);
}

/* Join panel — the sonnenbund card recipe. */
.login-box {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 1.4rem 1.4rem 1.35rem;
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-top: 3px solid var(--sb-amber);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
}
/* The brand greeting — the one element allowed outside the measured
   palette, carried over from sonnenbund-seite (large text, 3:1). */
.login-box .sb-welcome {
  font-family: var(--sb-hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--sb-welcome);
  text-align: center;
  margin: 0 0 .35rem;
}
/* Room name under the greeting, in the quiet eyebrow style. */
.sb-gr-room {
  margin: 0 0 .9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--sb-text-soft);
  overflow-wrap: anywhere;
}
.loginform label {
  display: block;
  min-width: 0;
  padding-top: .85rem;
  font-weight: 600;
  font-size: .92rem;
}
#userform label {
  padding-top: 0;
}
.loginform .form-control {
  width: 100%;
  margin-top: .35rem;
}
.sb-gr-devices {
  display: grid;
  gap: .15rem;
  margin-top: .35rem;
}
.sb-gr-devices .select {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .45rem .6rem;
}
.sb-gr-sliderline {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .45rem;
}
.sb-gr-msg {
  margin: .7rem 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sb-danger);
}
/* Galène reads these radios on submit; the screen sets them from the
   camera/microphone picks, so they never show. */
.sb-gr-presentradios {
  display: none;
}
#connectbutton {
  display: block;
  width: 100%;
  margin-top: 1.35rem;
  padding: .65em 1.5rem;
  font-size: 1rem;
}

/* Stacked layout on narrow screens: preview on top, panel below. The top
   is kept tight — no big empty band above the brand — and the preview is
   height-capped harder (44vh via the width formula, see .sb-gr-videobox),
   so the name field and the controls stay within easy reach. */
@media only screen and (max-width: 900px) {
  #login-container {
    padding: .5rem .9rem 1rem;
  }
  .sb-greenroom {
    gap: .7rem;
    margin-top: .25rem;
  }
  .sb-gr-brand a {
    font-size: 1.2rem;
  }
  .sb-gr-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }
  .sb-gr-videobox {
    width: min(100%, calc(44vh * var(--sb-gr-ar, 1.6)));
  }
  .sb-gr-privacy {
    margin-top: .4rem;
    font-size: .8rem;
  }
  .login-box {
    padding: 1.1rem 1rem;
  }
  .login-box .sb-welcome {
    font-size: 1.35rem;
    margin-bottom: .25rem;
  }
  #connectbutton {
    margin-top: 1rem;
  }
}

/* =====================================================================
   Settings drawer (right sidenav)
   ===================================================================== */

.sidenav {
  background-color: var(--sb-surface);
  box-shadow: 0 0 40px rgba(31, 26, 21, .22);
}
/* Galène's JS opens the drawer by writing an inline width of 250px
   (openNav). That is too narrow on desktop: long rows like
   "Rauschunterdrückung" wrapped onto a second line. The attribute selector
   targets exactly the open state and out-weighs the inline style, letting
   the drawer reach further into the room. Below Galène's own 1024px cut
   (and if upstream ever opens with a different inline width) the rule
   simply does not match and the drawer keeps the upstream width. */
@media only screen and (min-width: 1025px) {
  #sidebarnav[style*="width: 250px"] {
    width: 340px !important;
  }
}
.sidenav-header {
  background: var(--sb-surface-2);
  border-bottom: 1px solid var(--sb-line);
}
.sidenav-header h2 {
  font-family: var(--sb-hand);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--sb-headline);
  padding: 10px 1rem;
}
.sidenav a {
  color: var(--sb-text-soft);
  font-size: 26px;
}
.sidenav a:hover {
  color: var(--sb-text);
}
.sidenav-content {
  background: var(--sb-surface);
  padding: 1rem;
}
fieldset {
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-sm);
  padding: .8rem .9rem .9rem;
  margin-top: 1.2rem;
}
/* Section titles as quiet eyebrows (sonnenbund-seite pattern). */
legend {
  color: var(--sb-text-soft);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  padding: 0 .4em;
}
.sidenav-label, .sidenav-label-first {
  font-weight: 600;
  font-size: .9rem;
}
.sidenav-label {
  margin-top: .9rem;
}
.sidenav form {
  margin-top: .8rem;
}
.select {
  padding: .35rem .6rem;
}

/* Profile block in the drawer. */
.profile-logo {
  background: var(--sb-amber);
  color: var(--sb-amber-ink);
}
.profile-info {
  color: var(--sb-text-soft);
}
#permspan {
  color: var(--sb-green-ink);
}
#chpwspan a {
  color: var(--sb-green-ink);
}
.sidenav .user-logout a {
  color: var(--sb-green-ink);
}
.sidenav .user-logout a:hover {
  color: var(--sb-green);
}

/* =====================================================================
   Dialogs and toasts
   ===================================================================== */

#invite-dialog {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-line-strong);
  border-top: 3px solid var(--sb-amber);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 1.1rem 1.4rem 1.2rem;
  color: var(--sb-text);
}
#invite-dialog::backdrop {
  background: rgba(31, 26, 21, .5);
}
#invite-dialog button {
  background-color: var(--sb-amber);
  color: var(--sb-amber-ink);
  font-weight: 700;
  border: 1.5px solid var(--sb-amber-strong);
  border-radius: var(--sb-radius-sm);
}
#invite-dialog button:hover {
  background-color: var(--sb-amber-strong);
}
#invite-dialog #invite-cancel {
  background-color: transparent;
  color: var(--sb-text-soft);
  border-color: var(--sb-line-strong);
}
#invite-dialog #invite-cancel:hover {
  background-color: var(--sb-surface-2);
  color: var(--sb-text);
}
#invite-dialog input {
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-sm);
  padding: .35em .6em;
  font-family: inherit;
}

.toastify {
  font-family: var(--sb-sans);
  border-radius: var(--sb-radius-sm);
  box-shadow: var(--sb-shadow);
}
.toastify.error {
  background: var(--sb-danger);
  color: #fff;
}
.toastify.error .toast-close {
  color: #fff;
}
.toastify.warning {
  background: var(--sb-amber);
  color: var(--sb-amber-ink);
}
.toastify.warning .toast-close {
  color: var(--sb-amber-ink);
}
.toastify.info {
  background: var(--sb-green);
  color: #fff;
}
.toastify.info .toast-close {
  color: #fff;
}

/* ---- Focus ring in brand colour ---- */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sb-focus);
  outline-offset: 2px;
}

/* ---- Blur-strength slider (settings drawer + pre-join screen) ---- */
/* Drawer row: the label takes a full line of its own, the slider and the
   value share the next one — nothing pokes out of the 250px drawer. */
#sonnenbund-blur-strength-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin-top: 0.5rem;
}
#sonnenbund-blur-strength-row.invisible {
  display: none;
}
#sonnenbund-blur-strength-row .sidenav-label {
  flex: 1 0 100%;
  margin: 0;
}
.sonnenbund-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--sb-amber);
}
.sonnenbund-slider-value {
  flex: 0 0 auto;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sb-text-soft);
}
/* Long German labels ("Rauschunterdrückung") break cleanly with a hyphen
   instead of overflowing the drawer. */
.sidenav label {
  hyphens: auto;
}