/* =============================================================================
   Pulse — Layout (Views, Grids, Dock).
   Farben und Komponenten liegen in theme.css / components-*.css.
   Performance: nur Compositor-Properties (transform/opacity) animieren.
   ============================================================================= */

body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

/*
  .app füllt nur die 1fr-Zelle, nicht das ganze Viewport.
  height: 100% + z-index über dem Footer würde Impressum/Datenschutz
  unklickbar machen (Klicks treffen die App-Fläche).
*/
.app {
  min-height: 0;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  width: 100%;
  min-width: 0;
}

.view {
  width: 100%;
  min-height: 100%;
  display: grid;
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
}

.view[hidden] {
  display: none !important;
}

/* Verhindert, dass #view-home vor dem Hash-Routing aufblitzt (Screen-Share). */
html.route-booting #view-home {
  display: none !important;
}

/* Hub #/admin hat hidden im Markup; zusätzlich ausblenden, falls JS den Hash später setzt. */
html.route-booting #view-admin {
  display: none !important;
}

/* ----- Home (nur Mitmachen) ----- */
.view-home {
  grid-template-rows: auto auto auto auto;
  gap: 24px;
  /* 1fr soll den Rest füllen — align-content:start würde die Zeile schrumpfen
     und den Admin-Link auf kleinen Viewports unter den Footer schieben. */
  overflow: auto;
}

.view.view-admin {
  /* Block statt Grid mit 1fr: sonst wird das Formular auf Viewport-Höhe
     beschnitten und ist nicht nach unten scrollbar (html/body: overflow hidden). */
  display: block;
  overflow: auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.view-admin .home-brand {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  margin-bottom: 24px;
}

.view-admin .home-tools {
  grid-column: auto;
  flex-wrap: wrap;
  margin-left: auto;
}

.home-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  min-width: 0;
}

.home-title {
  grid-column: 2;
  min-width: 0;
}

.home-title h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  line-height: 1.25;
}

.home-tools {
  grid-column: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

a#btn-admin-home {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

/* Startseite: Join zentriert, große Eingabe, kein Zwei-Spalten-Create. */
.home-join {
  width: min(28rem, 100%);
  margin-inline: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-join .join-panel {
  overflow: visible;
}

.home-join #join-code-input {
  font-size: 1.5rem;
  letter-spacing: 0.28em;
  text-align: center;
  min-height: 3.25rem;
  font-variant-numeric: tabular-nums;
}

.home-join .btn.primary {
  width: 100%;
  min-height: 48px;
}

/* Fernbedienung koppeln (#/fernbedienung): ein Feld mit großen Ziffern, Handy zuerst. */
.remote-entry {
  width: min(28rem, 100%);
  margin-inline: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.remote-entry .join-panel {
  overflow: visible;
}

.remote-entry .remote-entry-code {
  font-size: 1.75rem;
  letter-spacing: 0.28em;
  text-align: center;
  min-height: 3.5rem;
  font-variant-numeric: tabular-nums;
}

.remote-entry .btn.primary {
  width: 100%;
  min-height: 48px;
}

.remote-entry .remote-entry-hint {
  margin: 0.35rem 0 0.5rem;
}

.remote-entry .join-code-error.form-error {
  margin: 0.35rem 0 0.75rem;
}

.remote-entry .join-code-error.form-error[hidden] {
  display: none;
}

.remote-entry #remote-entry-code[aria-invalid="true"] {
  border-color: var(--danger, #b91c1c);
}

.remote-entry-back {
  margin: 0;
  text-align: center;
}

/* Unauffälliger Link unter dem Code-Feld der Beitrittsseite. */
.join-remote-link {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
}

.join-remote-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted, inherit);
  text-decoration: underline;
}

/* Kopplungsdialog des Presenters: Code zum Eintippen unter dem QR-Code. */
.remote-pairing-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line, rgba(128, 128, 128, 0.3));
  text-align: center;
}

.remote-pairing-code-block p {
  margin: 0;
}

.remote-pairing-code-label {
  font-weight: 650;
}

.remote-pairing-code {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* „Alle Fernbedienungen trennen“: leise unter dem Link-Knopf; die Rückfrage steht im Dialog. */
.remote-pairing-revoke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line, rgba(128, 128, 128, 0.3));
  text-align: center;
}

.remote-pairing-revoke-confirm p {
  margin: 0 0 0.5rem;
}

.remote-pairing-revoke-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.remote-pairing-short-url {
  overflow-wrap: anywhere;
  user-select: all;
}

.admin-back {
  color: var(--link);
  font-weight: 650;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

.admin-back:hover,
.admin-back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Sessions-Hub (#/admin): Übersicht + Create-Form + Sidebar ----- */
.admin-sessions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(17rem, 100%);
  gap: 14px;
  align-items: start;
  max-width: 72rem;
}

/* Linke Spalte: Hub-Übersicht + Create-Form (Listen-Chrome). */

.admin-form-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Admin-Listen (Teams/Users): gleicher Abschnitts-Chrome wie Events-Liste. */
.admin-list-chrome.admin-form-sections {
  margin-top: 12px;
}

.admin-list-chrome .users-toolbar,
.admin-list-chrome .teams-grid {
  margin-top: 8px;
}

.admin-list-chrome .table-wrap,
.admin-list-chrome .list-pager-wrap {
  margin-top: 8px;
}

.admin-form-section--collapsible > summary.admin-form-section__title {
  cursor: pointer;
  list-style: none;
}

.admin-form-section--collapsible > summary.admin-form-section__title::-webkit-details-marker {
  display: none;
}

.admin-form-section--collapsible > summary.admin-form-section__title::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s ease;
}

.admin-form-section--collapsible[open] > summary.admin-form-section__title::before {
  transform: rotate(90deg);
}

.admin-form-section__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-form-section--collapsible summary {
  cursor: pointer;
  list-style: none;
}

.admin-form-section--collapsible summary::-webkit-details-marker {
  display: none;
}

/* Picker: Teilnehmer- und Ergebnis-Ansicht */
.picker-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 36rem;
  margin: 0 auto;
}

.picker-search {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.picker-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.picker-cat-btn {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 0.85rem;
}

.picker-cat-btn.is-active {
  border-color: var(--primary-color, #003399);
  background: color-mix(in srgb, var(--primary-color, #003399) 12%, transparent);
}

.picker-options {
  display: grid;
  gap: 8px;
  max-height: min(60vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.picker-options--grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.picker-options--list,
.picker-options--dropdown {
  grid-template-columns: 1fr;
}

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--bg);
  contain: content;
}

/* Join: Kurzbezeichnung größer und fett — voller Labeltext nur als Tooltip/ARIA. */
.picker-option .picker-label {
  font-size: clamp(0.98rem, 2.9vw, 1.14rem);
  font-weight: 650;
  line-height: 1.2;
}

.picker-option.is-selected {
  border-color: var(--primary-color, #003399);
  box-shadow: inset 0 0 0 1px var(--primary-color, #003399);
}

.picker-option:focus-visible {
  outline: 2px solid var(--secondary-color, #ffcc00);
  outline-offset: 2px;
}

.picker-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.picker-label mark {
  background: color-mix(in srgb, var(--secondary-color, #ffcc00) 55%, transparent);
  padding: 0 2px;
}

.picker-virtual-viewport {
  position: relative;
  max-height: min(60vh, 420px);
  overflow: auto;
}

.picker-virtual-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  gap: 8px;
}

.picker-confirm {
  align-self: flex-start;
}

.picker-counter {
  margin: 0;
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .picker-options--grid {
    grid-template-columns: 1fr;
  }
}

/* Dropdown Single-Select */
.picker-input--dropdown {
  max-width: 28rem;
}

.picker-dropdown {
  position: relative;
}

.picker-dropdown-trigger {
  width: 100%;
  min-height: 48px;
  text-align: left;
  padding: 0.65rem 2rem 0.65rem 0.85rem;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--bg);
  position: relative;
}

.picker-dropdown-trigger::after {
  content: "▾";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.picker-dropdown-trigger.has-value {
  border-color: var(--primary-color, #003399);
}

.picker-dropdown-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: min(50vh, 320px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  padding: 8px;
}

.picker-dropdown-search {
  margin-bottom: 6px;
}

.picker-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.picker-dropdown-item {
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: clamp(0.98rem, 2.9vw, 1.14rem);
  font-weight: 650;
}

.picker-dropdown-item:hover,
.picker-dropdown-item:focus-visible {
  background: var(--bg-soft);
  outline: none;
}

.picker-dropdown-item.is-selected {
  border-color: var(--primary-color, #003399);
  background: color-mix(in srgb, var(--primary-color, #003399) 8%, transparent);
}

/* Kategorien-Editor (Admin) */
.picker-categories-editor {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.picker-cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.picker-cat-row input[type="text"] {
  min-height: 36px;
}

.picker-cat-row input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.slide-edit-option .picker-opt-cat {
  min-height: 36px;
  max-width: 10rem;
}

.picker-result-display-settings {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.picker-result-display-settings legend {
  padding: 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.picker-result-count-label-count {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.picker-editor-preview {
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.picker-preview-box {
  max-height: 180px;
  overflow: auto;
  border-radius: 8px;
  padding: 4px;
  background: var(--bg-soft);
}

.picker-results-cat-title {
  margin: 12px 0 6px;
  padding-left: 8px;
  border-left: 4px solid var(--primary-color, #003399);
  font-size: 0.9rem;
}

/* Picker: zweistufige Kategorie-Navigation (Join) */
.picker-step-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.picker-step-title {
  margin: 0;
  font-weight: 650;
  font-size: 1.05rem;
}

.picker-category-step__intro {
  margin: 0 0 0.65rem;
}

.picker-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: 0.65rem;
}

.picker-category-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--bg);
  border-left-width: 4px;
  border-left-color: var(--cat-accent, var(--primary-color, #003399));
}

.picker-category-tile__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.picker-category-tile__count {
  font-size: 0.85rem;
}

/* Picker: Bubble-Ergebnisse (stimmenzentriert, ohne Kategoriegruppen) */
.picker-results--bubbles {
  width: 100%;
  min-width: 0;
}

.picker-bubble-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: min(58vh, 480px);
}

.picker-bubble-canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 10rem;
  margin: 0;
}

/* Kategorielegende: Overlay oben rechts, Swatch rechts neben Beschriftung. */
.picker-results-legend {
  position: absolute;
  top: 0.25rem;
  /* Minimaler Rand — Legende liegt nah am rechten Bildschirmrand. */
  right: 0.08rem;
  z-index: 3;
  max-width: min(38%, 280px);
  pointer-events: none;
  box-sizing: border-box;
}

.picker-results-legend[hidden] {
  display: none;
}

.picker-category-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vertikale Stapelung für Stage/Join-Ergebnisse */
.picker-category-legend--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.28rem;
  text-align: right;
}

.picker-category-legend__item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  max-width: 100%;
  /* Eine Stufe größer als zuvor; JS setzt px-Wert aus Metriken wenn verfügbar. */
  font-size: var(--picker-legend-font-size, clamp(0.76rem, 1.55vw, 0.92rem));
  color: #000;
}

.picker-category-legend__swatch {
  flex: 0 0 auto;
  width: var(--picker-legend-swatch-size, 12px);
  height: var(--picker-legend-swatch-size, 12px);
  border-radius: 50%;
  background: var(--legend-color, #2563eb);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.picker-category-legend__label {
  overflow-wrap: anywhere;
}

.picker-bubble-canvas--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
}

.picker-results-empty {
  margin: 0;
  font-size: var(--stage-body-size, 1rem);
  text-align: center;
}

.picker-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--bubble-width, var(--bubble-size, 104px));
  height: var(--bubble-height, var(--bubble-size, 104px));
  border-radius: 50%;
  background: var(--picker-bubble-surface, rgba(255, 255, 255, 0.94));
  border: var(--picker-bubble-border-width, 4px) solid var(--picker-bubble-color, #2563eb);
  color: #000;
  text-align: center;
  padding: 0.28rem 0.55rem;
  box-sizing: border-box;
  /* Text muss vollständig in der Ellipse bleiben — kein Überlauf nach außen. */
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
  --float-x: 3px;
  --float-y: 2px;
  --float-duration: 7s;
  --float-delay: -2s;
}

.picker-bubble--live {
  animation: picker-bubble-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
  will-change: transform;
}

.picker-bubble-grid[data-page-hidden="true"] .picker-bubble--live {
  animation-play-state: paused;
}

@keyframes picker-bubble-float {
  from {
    transform: translate3d(calc(var(--float-x) * -1), calc(var(--float-y) * -1), 0);
  }
  to {
    transform: translate3d(var(--float-x), var(--float-y), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .picker-bubble,
  .picker-bubble--live {
    animation: none;
    transition: none;
  }
}

.picker-bubble__label {
  display: block;
  /* 94 % Innenbreite — muss mit PICKER_BUBBLE_INSET_X in bubbleViewModel übereinstimmen. */
  max-width: 94%;
  font-weight: 650;
  font-size: var(--picker-bubble-label-size, clamp(0.72rem, 2vw, 0.96rem));
  line-height: 1.14;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  /* Kein text-overflow: ellipsis — Beschriftung muss vollständig sichtbar bleiben. */
  white-space: normal;
  color: #000;
}

/* Screenreader-Reihenfolge (visuell ausgeblendet) */
.picker-bubble-sr-list {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fallback-Liste bei Platzmangel */
.picker-bubble-canvas--list {
  min-height: auto;
}

/* Abgerundete Ergebnis-Rechtecke: Kachelfläche skaliert mit den Stimmen (Treemap) */
.picker-bubble-canvas--tiles {
  min-height: auto;
}

.picker-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Innenabstand muss zu TILE_INSET_X/Y in treemapLayout.js passen. */
  padding: 0.25rem 0.375rem;
  border-radius: var(--picker-tile-radius, 0.45rem);
  background: var(--picker-bubble-surface, #fff);
  border: var(--picker-bubble-border-width, 3px) solid var(--picker-tile-color, #2563eb);
  color: #000;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.picker-tile__label {
  display: block;
  max-width: 100%;
  font-weight: 650;
  font-size: var(--picker-bubble-label-size, clamp(0.85rem, 2.2vw, 1.35rem));
  line-height: 1.12;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  color: #000;
}

.picker-results-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Mehrspaltige Ergebnisliste — dynamische Spaltenanzahl aus Layout-Berechnung */
.picker-results-list--grid {
  display: grid;
  grid-template-columns: repeat(var(--picker-list-columns, 1), minmax(0, 1fr));
  column-gap: var(--picker-list-col-gap, 0.65rem);
  row-gap: var(--picker-list-row-gap, 0.35rem);
  width: 100%;
  height: 100%;
  align-content: start;
  box-sizing: border-box;
}

.picker-results-list__item {
  /* Kompakte Zeile: Punkt, Label und Stimmen direkt nebeneinander — kein Vollbreiten-Grid. */
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  max-width: 100%;
}

.picker-results-list__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-top: 0.2rem;
  background: var(--picker-bubble-surface, #fff);
  border: var(--picker-bubble-border-width, 3px) solid var(--dot-color, #2563eb);
  box-sizing: border-box;
}

.picker-results-list__label {
  flex: 0 1 auto;
  font-size: var(--picker-bubble-label-size, 0.96rem);
  color: #000;
  overflow-wrap: anywhere;
}

.picker-results-list__votes {
  flex: 0 0 auto;
  margin-left: 0.15rem;
  font-size: var(--picker-bubble-count-size, 0.78rem);
  color: #000;
  opacity: 0.85;
  white-space: nowrap;
}

/* Picker-Editor: Option und Kurzbezeichnung in einer Zeile */
.picker-options-hint {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
}

.picker-option-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(5.5rem, 0.72fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: end;
  padding: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #666);
  border-bottom: 1px solid var(--line);
}

.picker-option-header--cats {
  grid-template-columns: minmax(0, 1.15fr) minmax(5rem, 0.62fr) minmax(5.5rem, 0.55fr) auto;
}

.picker-option-header__actions {
  justify-self: end;
}

.slide-edit-option--picker {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(5.5rem, 0.72fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}

.slide-edit-option--picker-cats {
  grid-template-columns: minmax(0, 1.15fr) minmax(5rem, 0.62fr) minmax(5.5rem, 0.55fr) auto;
}

.slide-edit-option--picker .slide-option-row__label,
.slide-edit-option--picker .slide-option-row__short {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
}

.slide-edit-option__short-cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.slide-edit-option__short-cell .slide-option-row__short {
  flex: 1 1 auto;
}

.slide-edit-option__cat-slot {
  min-width: 0;
}

.slide-edit-option__cat-slot .picker-opt-cat {
  width: 100%;
  max-width: none;
}

.slide-edit-option__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
  justify-self: end;
}

.picker-short-label-count {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--muted, #666);
  white-space: nowrap;
}

.picker-editor-settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin-top: 0.35rem;
}

.picker-preview-collapsible {
  margin-top: 0.5rem;
}

.picker-preview-collapsible > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  list-style-position: outside;
}

.picker-editor-preview {
  margin-top: 0.35rem;
}

.admin-sessions-sidebar {
  position: sticky;
  top: calc(var(--admin-chrome-height, 52px) + 8px);
  padding: 14px 16px;
}

.recent-list--compact {
  gap: 6px;
}

.recent-list--compact a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  text-decoration: none;
  font-size: 0.88rem;
}

.recent-list--compact a:hover,
.recent-list--compact a:focus-visible {
  border-color: var(--btn-primary-bg);
}

.recent-list--compact strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.recent-list--compact .muted {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn--sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.88rem;
}

.join-panel {
  overflow: auto;
}

.home-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.recent-panel {
  margin-top: 16px;
}

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-list a {
  color: var(--link);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}