/* ============================================================
   FONTS (Styleguide)
   ------------------------------------------------------------
   Wenn du die Markenfonts hast, lege sie in public/fonts ab:
     - public/fonts/HUMANE-Bold.woff2
     - public/fonts/HUMAN-Bold.woff2
     - public/fonts/StackSansText-Regular.woff2
   Dann werden sie automatisch verwendet. Ohne Dateien greifen
   die Google-Fallbacks (Bebas Neue / Anton / Work Sans).
   ============================================================ */

@font-face {
  font-family: "HUMANE";
  src: url("fonts/HUMANE-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HUMAN";
  src: url("fonts/HUMAN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Text";
  src: url("fonts/StackSansText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Text Light";
  src: url("fonts/StackSansText-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  /* Marita Haas – Podcast Fragenbox (Styleguide 2026) */
  --pq-brand: #75a5c8;            /* Azurblau */
  --pq-brand-dark: #5b8fb3;
  --pq-brand-rgb: 117, 165, 200;

  --pq-accent: #d84122;           /* Orange */
  --pq-accent-dark: #b8351c;
  --pq-accent-rgb: 216, 65, 34;

  --pq-bonus: #b47a67;            /* Gedämpftes Terrakotta für Bonusfolgen */
  --pq-bonus-dark: #97624f;
  --pq-bonus-rgb: 180, 122, 103;

  --pq-active-card: #5f859f;      /* Gedämpftes Petrol-Blau für aktive Filter-Cards */
  --pq-active-card-dark: #486f88;
  --pq-active-card-rgb: 95, 133, 159;

  --pq-pill-neutral-bg: rgba(255, 255, 255, 0.78);
  --pq-pill-neutral-border: rgba(27, 27, 27, 0.16);
  --pq-pill-neutral-shadow: 0 1px 2px rgba(27, 27, 27, 0.04);

  --pq-pill-episode-bg: rgba(248, 243, 235, 0.96);
  --pq-pill-episode-border: rgba(130, 95, 70, 0.18);
  --pq-pill-episode-shadow: 0 1px 2px rgba(111, 72, 58, 0.03);

  --pq-bg: #f7f2e7;               /* Hellorange Hintergrund */
  --pq-surface: #ffffff;
  --pq-surface-2: rgba(255, 255, 255, 0.70);
  --pq-border: rgba(27, 27, 27, 0.14);
  --pq-text: #1b1b1b;
  --pq-muted: rgba(27, 27, 27, 0.62);
  --pq-shadow: 0 14px 44px rgba(27, 27, 27, 0.10);
  --pq-radius: 16px;
  --pq-sidebar-width: 260px;

  /* Approx. height of the sticky topbar (used for sticky sidebar offset/height). */
  --pq-topbar-height: 64px;

  /* Typography (Fonts werden in header.ejs via Google-Fallback geladen.
     Für die exakten Markenfonts bitte zusätzlich WOFF2 Dateien unter /public/fonts ablegen. */
  --pq-font-humane: "HUMANE", "Bebas Neue", Impact, "Arial Narrow", system-ui, sans-serif;
  --pq-font-human: "HUMAN", "Anton", "Arial Black", system-ui, sans-serif;
  --pq-font-body: "Stack Sans Text", "Work Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Bootstrap 5 Variablen überschreiben (Bootswatch kommt davor) */
  --bs-primary: var(--pq-brand);
  --bs-primary-rgb: var(--pq-brand-rgb);

  --bs-link-color: var(--pq-accent);
  --bs-link-hover-color: var(--pq-accent-dark);

  --bs-body-bg: var(--pq-bg);
  --bs-body-color: var(--pq-text);
  --bs-secondary-color: var(--pq-muted);
  --bs-border-color: rgb(117, 165, 200);

}


html {
  height: 100%;
}

/* Kleiner, damit mehr auf den Screen passt (globaler Bootstrap-Scale) */
html {
  font-size: 16px;
  scroll-padding-top: var(--pq-topbar-height);
  /* verhindert horizontale Layout-Sprünge (Scrollbars) */
  scrollbar-gutter: stable;
}

html.pq-no-page-gutter-html {
  scrollbar-gutter: auto;
}

@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

body {
  min-height: 100%;
  box-sizing: border-box;
  font-family: var(--pq-font-body);
  background-color: var(--pq-bg);
  background-image: none;
  color: var(--pq-text);
}

/* Top bar */
.pq-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  border-bottom: 1px solid var(--pq-border);
  background: rgba(247, 242, 231, 0.92);
  backdrop-filter: blur(8px);
}

/* Flash (Toast) */
.pq-toast-container {
  position: fixed;
  top: 76px;
  right: 14px;
  z-index: 1080;
  max-width: min(420px, calc(100vw - 28px));
  pointer-events: none;
}

.pq-toast-container .toast {
  pointer-events: auto;
}

.pq-toast {
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius);
  box-shadow: var(--pq-shadow);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.pq-toast-container.pq-toast-container-public {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  max-width: min(1120px, calc(100vw - 22px));
  z-index: 1095;
}

.pq-toast.pq-toast-public-success {
  width: 100%;
  min-width: min(900px, calc(100vw - 22px));
  min-height: 280px;
  border: 1px solid rgba(var(--pq-accent-rgb), 0.34) !important;
  border-radius: 0 !important;
  background: #f7f2ef;
  color: #1b1b1b;
  overflow: hidden;
  box-shadow:
    0 26px 62px rgba(27, 27, 27, 0.34);
}

.pq-toast.pq-toast-public-success .toast-header {
  background: transparent;
  color: #1b1b1b;
  border-bottom: 1px solid rgba(var(--pq-accent-rgb), 0.24);
  padding: 18px 24px;
  align-items: center;
  border-radius: 0 !important;
}

.pq-toast.pq-toast-public-success .toast-header i {
  display: none;
}

.pq-toast.pq-toast-public-success .toast-header strong {
  font-family: var(--pq-font-body);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pq-toast.pq-toast-public-success .toast-header .btn-close {
  opacity: 0.7;
}

.pq-toast.pq-toast-public-success .toast-body {
  padding: 26px 24px 28px;
  font-family: var(--pq-font-body);
  font-size: clamp(1.85rem, 3.3vw, 2.65rem);
  line-height: 1.28;
  font-weight: 600;
  color: #1b1b1b;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-radius: 0 !important;
}

.pq-toast-container.pq-toast-container-public .toast,
.pq-toast-container.pq-toast-container-public .toast-header,
.pq-toast-container.pq-toast-container-public .toast-body {
  border-radius: 0 !important;
}

.pq-inline-success-toast {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px);
  white-space: nowrap;
  overflow: hidden;
  color: #1b1b1b;
  background: #f7f2ef;
  border: 1px solid rgba(var(--pq-accent-rgb), 0.34);
  font-family: var(--pq-font-body);
  font-size: var(--pq-public-ui-size, 1.02rem);
  font-weight: 400;
  line-height: 1.15;
  transform-origin: left center;
  transition:
    max-width 0.36s ease,
    opacity 0.24s ease,
    transform 0.36s ease,
    margin-left 0.36s ease,
    padding 0.36s ease;
}

.pq-inline-success-toast.is-success {
  color: #1b1b1b;
  background: #f7f2ef;
  border-color: rgba(var(--pq-accent-rgb), 0.34);
}

.pq-inline-success-toast.is-danger {
  color: #7e2214;
  background: #f8ece8;
  border-color: rgba(var(--pq-accent-rgb), 0.58);
}

.pq-inline-success-toast.is-visible {
  margin-left: 3px;
  padding: 0 8px;
  max-width: var(--pq-inline-max-width, min(640px, calc(100vw - 170px)));
  opacity: 1;
  transform: translateX(0);
  animation: pqInlineToastIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pq-inline-success-toast.is-hide {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  padding: 0;
  transform: translateX(-8px);
}

.pq-public-alt-submitrow.pq-inline-success-active {
  justify-content: flex-start;
}

.pq-public-alt-submitrow.pq-inline-success-active .pq-public-alt-submitlinks {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin-left: 0;
}

.pq-public-alt-submitrow.pq-inline-success-active .pq-inline-success-toast {
  position: relative;
  z-index: 6;
}

@media (max-width: 575px) {
  .pq-inline-success-toast {
    font-size: var(--pq-public-ui-size, 1rem);
  }

  .pq-inline-success-toast.is-visible {
    padding: 0 6px;
    max-width: var(--pq-inline-max-width, min(420px, calc(100vw - 148px)));
  }
}

@keyframes pqInlineToastIn {
  0% {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
    filter: blur(1px);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

body.pq-public-success-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(18, 18, 18, 0.54);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

body.pq-public-inline-notice-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgba(16, 12, 10, 0.24);
  pointer-events: none;
}

@media (max-width: 680px) {
  .pq-toast-container.pq-toast-container-public {
    max-width: calc(100vw - 14px);
  }

  .pq-toast.pq-toast-public-success {
    min-width: 0;
    min-height: 220px;
    border-radius: 0 !important;
  }

  .pq-toast.pq-toast-public-success .toast-header {
    padding: 14px 16px;
  }

  .pq-toast.pq-toast-public-success .toast-body {
    padding: 16px 16px 18px;
    font-size: clamp(1.45rem, 6.4vw, 2.1rem);
    min-height: 140px;
  }
}

.pq-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.pq-brand .pq-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.pq-navlink {
  border-radius: 999px;
  padding: 6px 10px;
}

.pq-navlink.active {
  background: rgba(var(--bs-primary-rgb), 0.14);
}

/* Admin shell */
.pq-shell {
  display: grid;
  grid-template-columns: var(--pq-sidebar-width, 260px) 1fr;
  min-height: calc(100vh - var(--pq-topbar-height));
}

/* Sidebar einklappen/ausklappen */
.pq-shell.pq-collapsed {
  grid-template-columns: 76px 1fr;
}

.pq-shell.pq-collapsed .pq-sidebar {
  padding: 12px 10px;
}

.pq-shell.pq-collapsed .pq-sidebar .pq-side-title {
  display: none;
}

.pq-shell.pq-collapsed .pq-sidebar .pq-side-label {
  display: none;
}

.pq-shell.pq-collapsed .pq-sidebar .list-group {
  padding: 5px;
  margin-bottom: 10px;
}

.pq-shell.pq-collapsed .pq-sidebar .list-group-item {
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.pq-shell.pq-collapsed .pq-sidebar .list-group-item i {
  margin-right: 0 !important;
  font-size: 18px;
}



/* Sidebar: resize handle (Desktop) */
.pq-sidebar {
  position: sticky;
  top: var(--pq-topbar-height);
  height: calc(100vh - var(--pq-topbar-height));
  overflow-y: auto;
  overflow-x: visible;
  align-self: start;
}

.pq-sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}

.pq-sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(27, 27, 27, 0.12);
}

.pq-sidebar-resizer:hover::after {
  background: rgba(27, 27, 27, 0.28);
}

body.pq-resizing {
  user-select: none;
  cursor: col-resize;
}

body.pq-resizing * {
  cursor: col-resize !important;
}

/* Icon-only mode (auto, when sidebar width is small) */
html.pq-sidebar-icons .pq-sidebar {
  padding: 12px 10px;
}

html.pq-sidebar-icons .pq-sidebar .pq-side-title {
  display: none;
}

html.pq-sidebar-icons .pq-sidebar .pq-side-label {
  display: none;
}

html.pq-sidebar-icons .pq-sidebar .list-group {
  padding: 5px;
  margin-bottom: 10px;
}

html.pq-sidebar-icons .pq-sidebar .list-group-item {
  justify-content: center;
  text-align: center;
  padding: 10px;
}

html.pq-sidebar-icons .pq-sidebar .list-group-item i {
  margin-right: 0 !important;
  font-size: 18px;
}



@media (max-width: 991px) {
  .pq-shell {
    grid-template-columns: 1fr;
  }
}

.pq-sidebar {
  border-right: 1px solid var(--pq-border);
  padding: 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}

@media (max-width: 991px) {
  .pq-sidebar {
    display: none;
  }
}

.pq-sidebar .pq-side-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pq-muted);
  margin: 16px 10px 10px;
}

.pq-sidebar .list-group-item {
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  background: transparent;
}

.pq-sidebar .list-group-item.active {
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--pq-text);
}

/* Sidebar: if the viewport is short, tighten paddings so the menu fits better */
@media (min-width: 992px) and (max-height: 760px) {
  .pq-sidebar {
    padding: 10px;
  }
  .pq-sidebar .pq-side-title {
    margin: 12px 8px 6px;
    font-size: 10px;
  }
  .pq-sidebar .list-group {
    padding: 6px;
    margin-bottom: 10px;
  }
  .pq-sidebar .list-group-item {
    padding: 8px 9px;
    margin-bottom: 4px;
  }
}

/* Cards */
.pq-card {
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius);
  box-shadow: var(--pq-shadow);
}

.pq-card .card-body {
  padding: 14px;
}

.pq-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--pq-border);
  padding: 12px 14px;
}

/* List items */
.pq-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  background: var(--pq-surface);
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
    min-height: 130px;
    
      display: flex;
  flex-direction: column;
}

/* ============================================================
   Question presentation (prominent question first row)
   ------------------------------------------------------------
   Pattern:
   - First row: ID + Question text (prominent)
   - Below: pills + meta info (subtle)
   ============================================================ */

.pq-qheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pq-qheadline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.pq-qtitle {
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.28;
  color: var(--pq-text);
  text-decoration: none;
  min-width: 0;
  word-break: break-word;
}

a.pq-qtitle {
  text-decoration: none;
  transition: text-shadow 160ms ease;
}

a.pq-qtitle:hover,
a.pq-qtitle:focus {
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  outline: none; /* optional; keep if you have another focus style */
}


.pq-qtitle.pq-qtitle-sm {
  font-size: 0.9rem;
  font-weight: 450;
  margin-bottom: 5px;
}

/* ID/Order labels (keine Pills) */
.pq-qid-inline {
  font: inherit;
  font-weight: 500;
  color: rgba(var(--pq-brand-rgb), 0.95);
  margin-right: 10px;
  white-space: nowrap;
}

.pq-qid {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
  color: var(--pq-brand-dark);
      font-size: 1.05rem;
    line-height: 1.25;
}


.pq-qid-sm {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 450;
  color: var(--pq-brand-dark);
      font-size: .9rem;
line-height: 1.25;

}

a.pq-qid:hover,
a.pq-qid:focus {
  text-decoration: underline;
}

.pq-qorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid rgba(var(--pq-accent-rgb), 0.28);
  background: rgba(var(--pq-accent-rgb), 0.10);
  color: rgba(27, 27, 27, 0.92);
}

.pq-qtitle.pq-qtitle-lg {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.22;
}

.pq-pill-id {
  background: rgba(var(--pq-brand-rgb), 0.12);
  border-color: rgba(var(--pq-brand-rgb), 0.40);
  color: rgba(27, 27, 27, 0.95);
  font-weight: 500;
}

.pq-pill-order {
  background: rgba(var(--pq-accent-rgb), 0.12);
  border-color: rgba(var(--pq-accent-rgb), 0.36);
  color: rgba(27, 27, 27, 0.95);
  font-weight: 500;
}

.pq-qmeta {
  /* Pills bewusst etwas weiter unten (Abstand zu den Infos) */
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Ratings: always align as a group on the right side of the card */
.pq-qmeta-ratings {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.pq-qsubmeta {
  /* Direkt unter der Frage: kompakt + gut lesbar */
/*  margin-top: 4px; */
  font-size: 11px;
  line-height: 1.35;
}

.pq-question-edit-hero {
  margin-bottom: 0.55rem;
}

.pq-episode-edit-hero {
  margin-bottom: 0.55rem;
}

.pq-question-edit-hero .pq-qsubmeta {
  gap: 0.5rem 1rem;
  font-size: 11px;
  line-height: 1.35;
}

.pq-question-edit-hero .pq-qheadline {
  margin-top: 0.35rem;
}

.pq-question-edit-hero .pq-qheadline > h1.pq-qtitle.pq-qtitle-lg {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.22;
  padding: 15px;
}

.pq-question-edit-hero .pq-qmeta {
  gap: 8px;
  margin-top: 0.6rem;
}

.pq-episode-edit-hero .pq-qheadline > h1.pq-qtitle.pq-qtitle-lg {
  background: var(--pq-episode-surface);
  border-color: var(--pq-episode-border);
  box-shadow: 0 8px 20px rgba(111, 72, 58, 0.05);
}

.pq-card-header-with-pills {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pq-card-header-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pq-card-header-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pq-card-header-pills .pq-pill {
  margin-bottom: 0;
}

.pq-question-answer-header-actions {
  align-items: center;
}

.pq-question-side-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 48px;
  border-bottom: 1px solid var(--pq-border) !important;
}

@media (min-width: 992px) {
  .pq-episode-edit-layout .pq-card-header-with-pills,
  .pq-episode-questions-card > .card-header {
    min-height: 48px;
  }

  .pq-card-header-pills .pq-pill {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Drag & drop: ganze Karte ist draggable (keine Handles) */
.pq-draggable-item {
  cursor: grab;
}

.pq-draggable-item:active {
  cursor: grabbing;
}

/* On very small screens, keep actions below the headline */
@media (max-width: 575px) {
  .pq-qheader {
    flex-direction: column;
    align-items: stretch;
  }

  .pq-card-header-pills {
    justify-content: flex-start;
  }
}


/* Dashboard: "Neu seit letztem Login" hervorheben */
.pq-item.pq-item-new {
  position: relative;
  border-color: rgba(25, 135, 84, 0.45);
  background: var(--pq-question-surface);
  box-shadow: 0 6px 18px rgba(25, 135, 84, 0.06);
  overflow: hidden;
}

.pq-item.pq-item-new::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;          /* inset */
  bottom: 3px;       /* inset */
  width: 4px;         /* slightly wider looks cleaner */
  background: rgba(25, 135, 84, 0.75);
  border-radius: 10px; /* smaller radius so it doesn’t look like a “blob” */
}


/* Aktionen-Spalte in Listen etwas kompakter und mobil ohne "Fixbreite" */
.pq-actions-col {
  min-width: 220px;
}

/* Drag & drop */
.pq-sortable {
  min-height: 44px;
}

.pq-sort-ghost {
  opacity: 0.45;
}

.pq-sort-chosen {
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18) !important;
}

body.pq-is-saving {
  cursor: progress;
}

.pq-drop-hint {
  border: 1px dashed var(--pq-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
}

/* Planner list-mode toggles (same card, different actions) */
.pq-list-backlog .pq-actions-episode { display: none !important; }
.pq-list-episode .pq-actions-backlog { display: none !important; }
.pq-list-backlog .pq-order-badge { display: none !important; }


/* Planner: Aktionen (oben rechts in der ersten Zeile) */
.pq-item-actions-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}


/* Buttons/Actions: niemals umbrechen (z.B. Besprochen + Aus Planung) */
.pq-actions-nowrap {
  flex-wrap: nowrap !important;
}

/* Planner: Aktionen unterhalb der Frage (legacy) */
.pq-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.pq-item-actions .pq-actions-backlog {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
}

.pq-item-actions .pq-actions-episode {
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.pq-schedule-form {
  width: auto;
  max-width: 100%;
}

@media (max-width: 575px) {
  .pq-item-actions {
    gap: 8px;
  }
}

.pq-meta {
  color: var(--pq-muted);
 /* font-size: 12px; */
}


/* Kalender: Drop-Ziel hervorheben (Frage auf Folge ziehen) */
.pq-calendar-drop-target {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.30);
  outline-offset: 2px;
  border-radius: 14px;
}

.pq-draggable-item[draggable='true'] {
  cursor: grab;
}

.pq-draggable-item.pq-dragging {
  opacity: 0.55;
}

/* the card / container */
.pq-draggable-item.pq-episode-qitem{
  display: flex;
  flex-direction: column;
  height: 100%; /* or a fixed/min height if needed */
}



/* Calendar tweaks */
#pq-calendar .fc {
  font-family: inherit;
  /* FullCalendar CSS Vars */
  --fc-border-color: rgba(27, 27, 27, 0.10);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.50);
  --fc-today-bg-color: rgba(var(--pq-accent-rgb), 0.10);
  --fc-event-text-color: var(--pq-text);
  --fc-small-font-size: 0.84em;
}

#pq-calendar .fc-toolbar-title {
  font-family: var(--pq-font-humane);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(28px, 3.6vw, 46px);
}

#pq-calendar .fc-event {
  cursor: pointer;
  background: transparent;
  border: 0;
}

#pq-calendar .pq-fc-event .fc-event-main {
  padding: 0 !important;
  color: inherit;
  width: 100%;
}

#pq-calendar .fc-daygrid-event .fc-event-main-frame {
  display: block;
}

#pq-calendar .fc-daygrid-event {
  white-space: normal;
  margin: 2px 4px;
}

#pq-calendar .fc-daygrid-event-harness {
  margin-top: 8px;
}

/* Kalender: schöner, mehr wie der Rest der App */
#pq-calendar .fc-toolbar {
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--pq-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#pq-calendar .fc-toolbar .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#pq-calendar .fc .fc-button {
  border-radius: 999px;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.55) !important;
  background: rgba(var(--pq-brand-rgb), 0.16) !important;
  color: var(--pq-text) !important;
  font-weight: 700;
  padding: 6px 12px;
  box-shadow: none !important;
}

#pq-calendar .fc .fc-button:hover {
  background: rgba(var(--pq-brand-rgb), 0.26) !important;
}

#pq-calendar .fc .fc-button:focus {
  box-shadow: 0 0 0 4px rgba(var(--pq-brand-rgb), 0.22) !important;
}

#pq-calendar .fc .fc-button.fc-button-active,
#pq-calendar .fc .fc-button:active {
  background: rgba(var(--pq-brand-rgb), 0.70) !important;
  border-color: rgba(var(--pq-brand-rgb), 0.85) !important;
  color: #fff !important;
}

#pq-calendar .fc .fc-button:disabled {
  opacity: 0.55;
}

#pq-calendar .fc .fc-scrollgrid {
  border-radius: 16px;
  overflow: hidden;
}

/* Legend */
.pq-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pq-muted);
}

.pq-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--pq-border);
}

.pq-legend-planned { background: rgba(var(--bs-primary-rgb), 0.80); }
.pq-legend-recorded { background: rgba(255, 193, 7, 0.8); }
.pq-legend-published { background: rgba(25, 135, 84, 0.75); }
.pq-legend-cancelled { background: rgba(33, 37, 41, 0.6); }

/* Event cards */
.pq-fc-event .fc-event-main {
  padding: 0;
}


.pq-fc-event-inner {
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.pq-fc-event-inner:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
  border-color: rgba(var(--bs-primary-rgb), 0.28);
}

.pq-fc-event-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.pq-fc-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  font-size: 11px;
  color: var(--pq-text);
}

.pq-fc-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--pq-muted);
}

.pq-fc-count-line {
  display: block;
  margin-top: -2px;
  margin-bottom: 6px;
}

.pq-fc-event-title {
  font-weight: 500;
  line-height: 1.2;
  /* Keep long episode titles compact in the calendar (hover shows full title). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Statusfarben via linke Kante */
.pq-fc-status-planned .pq-fc-event-inner { border-left: 5px solid rgba(var(--bs-primary-rgb), 0.85); }
.pq-fc-status-recorded .pq-fc-event-inner { border-left: 5px solid rgba(255, 193, 7, 0.85); }
.pq-fc-status-published .pq-fc-event-inner { border-left: 5px solid rgba(25, 135, 84, 0.8); }
.pq-fc-status-cancelled .pq-fc-event-inner { border-left: 5px solid rgba(33, 37, 41, 0.7); opacity: 0.85; }

/* Calendar (small screens): compact dot indicator instead of full event card content */
.pq-fc-dot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

.pq-fc-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--pq-border);
  background: rgba(var(--bs-primary-rgb), 0.85);
}

.pq-fc-status-recorded .pq-fc-dot { background: rgba(255, 193, 7, 0.85); }
.pq-fc-status-published .pq-fc-dot { background: rgba(25, 135, 84, 0.80); }
.pq-fc-status-cancelled .pq-fc-dot { background: rgba(33, 37, 41, 0.70); }

.pq-title {
  letter-spacing: -0.02em;
}

/* Make default bootstrap cards match */
.card {
  border-radius: var(--pq-radius);
}

.table {
  background: var(--pq-surface);
}

/* Small utility */
.pq-muted {
  color: var(--pq-muted) !important;
}

.pq-badge {
  border: 1px solid var(--pq-border);
  border-radius: 5px;
  padding: 5px 8px;
  font-weight: 500;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.6);
}

.pq-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

/* Pills (Status, Tags, Source) */
.pq-pill {
  border: 1px solid var(--pq-border);
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  line-height: 1;
}

.pq-pill-status {
  font-weight: 500;
}

.pq-pill-open {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.88);
}

.pq-pill-scheduled {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(130, 95, 70, 0.18);
  color: rgba(33, 37, 41, 0.88);
}

.pq-pill-answered {
  background: rgba(76, 122, 94, 0.08);
  border-color: rgba(76, 122, 94, 0.24);
  color: rgba(61, 96, 74, 0.96);
}

.pq-pill-archived {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.84);
}

/* Episode status pills */
.pq-pill-ep-planned {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(130, 95, 70, 0.18);
  color: rgba(33, 37, 41, 0.88);
}

.pq-pill-ep-recorded {
  background: rgba(156, 141, 100, 0.10);
  border-color: rgba(156, 141, 100, 0.22);
  color: rgba(90, 79, 48, 0.92);
}

.pq-pill-ep-published {
  background: rgba(76, 122, 94, 0.08);
  border-color: rgba(76, 122, 94, 0.24);
  color: rgba(61, 96, 74, 0.96);
}

.pq-pill-ep-cancelled {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.84);
}

.pq-pill-new {
  background: rgba(76, 122, 94, 0.08);
  border-color: rgba(76, 122, 94, 0.24);
  color: rgba(61, 96, 74, 0.96);
  font-weight: 700;
}

.pq-pill-tag { /* legacy alias for priority */
  background: rgba(var(--pq-accent-rgb), 0.12);
  border-color: rgba(var(--pq-accent-rgb), 0.40);
}

.pq-pill-priority {
  /* Base style (individual prio colors are applied via .pq-prio-* classes) */
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(27, 27, 27, 0.20);
  color: rgba(27, 27, 27, 0.92);
  font-weight: 700;
}

/* Priority color scheme (TOP → DEFINITIV NICHT) */
.pq-pill-priority.pq-prio-top {
  background: rgba(var(--pq-accent-rgb), 0.16);
  border-color: rgba(var(--pq-accent-rgb), 0.55);
  color: var(--pq-accent-dark);
}

.pq-pill-priority.pq-prio-spannend {
  background: rgba(var(--pq-brand-rgb), 0.16);
  border-color: rgba(var(--pq-brand-rgb), 0.55);
  color: var(--pq-brand-dark);
}

.pq-pill-priority.pq-prio-gut {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.42);
  color: rgba(25, 135, 84, 0.95);
}

.pq-pill-priority.pq-prio-normal {
  background: rgba(108, 117, 125, 0.12);
  border-color: rgba(108, 117, 125, 0.35);
  color: rgba(33, 37, 41, 0.92);
  font-weight: 600;
}

.pq-pill-priority.pq-prio-eher-nicht {
  background: rgba(255, 193, 7, 0.18);
  border-color: rgba(255, 193, 7, 0.55);
  color: rgba(27, 27, 27, 0.92);
}

.pq-pill-priority.pq-prio-definitiv-nicht {
  background: rgba(33, 37, 41, 0.10);
  border-color: rgba(33, 37, 41, 0.35);
  color: rgba(33, 37, 41, 0.95);
}

/* Distinguish own vs other user ratings */
.pq-pill-priority.pq-prio-own {
  box-shadow: 0 0 0 3px rgba(var(--pq-brand-rgb), 0.18);
}

.pq-pill-priority.pq-prio-other {
  border-style: dashed;
  opacity: 0.96;
}

.pq-pill-priority .pq-prio-user {
  font-weight: 700;
}

.pq-pill-priority .pq-prio-sep {
  opacity: 0.65;
  margin: 0 2px;
}

.pq-pill-source {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.82);
  font-weight: 700;
}
/* nicer focus */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22);
}

/* Buttons: keep small buttons from breaking */
.btn.btn-sm {
  white-space: nowrap;
}

/* Empty state */
.pq-empty {
  border: 1px dashed var(--pq-border);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.pq-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  color: var(--pq-muted);
  font-size: 22px;
}

/* Episode view: geplante Fragen als "Karten" in einer List-Group */
#pq-episode-sortable.list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kalender: Backlog Panel & Modal-Listen */
.pq-calendar-backlog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  min-height: 220px;
  max-height: 520px;
  padding: 8px;
  scrollbar-gutter: stable;
}

@media (min-width: 992px) {
  .pq-calendar-main-col .pq-calendar-main-card,
  .pq-calendar-sidebar-col .pq-calendar-backlog-card {
    position: sticky;
    top: calc(var(--pq-topbar-height, 72px) + 8px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pq-calendar-main-col .pq-calendar-main-card .card-body,
  .pq-calendar-sidebar-col .pq-calendar-backlog-card .card-body {
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .pq-calendar-main-col .pq-calendar-main-body {
    scrollbar-gutter: stable;
  }

  .pq-calendar-sidebar-col .pq-calendar-backlog-list {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

.pq-calendar-backlog-list .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

.pq-calendar-backlog-list .list-group-item + .list-group-item {
  margin-top: 0;
}

.pq-qtext {
  font-size: 12px;
  line-height: 1.25;
}

.pq-selected {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.25);
  background: rgba(var(--bs-primary-rgb), 0.06);
}

.pq-modal-card .list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pq-modal-card .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

#pq-episode-sortable.list-group .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
    min-height: 130px;
    
}

.pq-episode-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Public landing */
.pq-hero {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--pq-shadow);
}

.pq-hero h1 {
  letter-spacing: -0.03em;
}

/* ============================================================
   PUBLIC PAGE (Frage einreichen) – Intro + Cover + Form
   ============================================================ */

.pq-public-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.pq-public-hero .card-body {
  padding: 20px;
}

/* Headline links, Cover rechts (auf Mobile stapeln) */
.pq-public-headrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.pq-public-headimg {
  display: flex;
  justify-content: center;
}

.pq-cover-img.pq-cover-img-head {
  max-width: 360px;
}

/* Fallback, falls das Cover ausgeblendet wird (PUBLIC_SHOW_PODCAST_COVER=0) */
.pq-cover-fallback {
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  box-shadow: var(--pq-shadow);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  text-align: center;
}

.pq-cover-fallback-title {
  font-family: var(--pq-font-humane);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.95;
  font-size: clamp(28px, 3.2vw, 44px);
}

.pq-cover-fallback-sub {
  margin-top: 10px;
  font-family: var(--pq-font-body);
  opacity: 0.72;
}

@media (min-width: 992px) {
  .pq-public-headrow {
    grid-template-columns: 1fr 360px;
    gap: 18px;
  }

  .pq-public-headimg {
    justify-content: flex-end;
  }
}

/*
  Public Seite: Headline oben volle Breite,
  darunter Cover + Text (auf Mobile: Cover zuerst, damit es direkt unter der Headline sitzt).
*/
.pq-public-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cover"
    "copy";
  gap: 18px;
  align-items: start;
}

.pq-public-hero-cover {
  grid-area: cover;
}

.pq-public-hero-copy {
  grid-area: copy;
}

@media (min-width: 992px) {
  .pq-public-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "copy cover";
  }
}

.pq-public-kicker {
  font-family: var(--pq-font-humane);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  color: rgba(27, 27, 27, 0.68);
}

.pq-public-headline {
  font-family: var(--pq-font-humane);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.92;
  font-size: clamp(38px, 5.8vw, 70px);
  margin: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.pq-public-lead {
  font-size: 1.15rem;
}

.pq-public-lead p {
  margin-bottom: 12px;
}

/* Textarea helper row: limit + counter */
.pq-form-subrow {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pq-public-question {
  scroll-margin-top: 96px; /* sticky header offset (mobile scroll/focus) */
}

.pq-public-cta {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .pq-public-cta {
    grid-template-columns: 1fr 1fr;
  }
}

.pq-public-cta-link {
  color: inherit;
  text-decoration: none;
}

.pq-public-cta-link:hover {
  border-color: rgba(27, 27, 27, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

.pq-public-cta-link .pq-link {
  text-decoration: underline;
}

.pq-public-cta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.pq-public-cta-disabled {
  opacity: 0.65;
}

/* Datenschutz (Details/Accordion) */
.pq-public-privacy {
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
}

.pq-public-privacy summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pq-public-privacy summary::-webkit-details-marker {
  display: none;
}

.pq-public-privacy-body {
  padding-top: 10px;
}

.pq-public-adminlink {
  display: flex;
  justify-content: flex-end;
}

.pq-public-cta-item i {
  color: var(--pq-accent);
  font-size: 18px;
  margin-top: 1px;
}

/* Spotify Icon in Grün */
.pq-public-cta-item i.pq-icon-spotify {
  color: #1DB954;
}

/* Apple: dark (logo is monochrome) */
.pq-public-cta-item i.pq-icon-apple {
  color: #111;
}

/* Amazon: brand orange */
.pq-public-cta-item i.pq-icon-amazon {
  color: #FF9900;
}

.pq-public-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pq-public-hero-cover {
  display: flex;
  justify-content: center;
}

.pq-cover-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  box-shadow: var(--pq-shadow);
  background: #fff;
}

@media (max-width: 575px) {
  .pq-public-hero .card-body {
    padding: 16px;
  }
  .pq-public-headline {
    font-size: clamp(34px, 10vw, 56px);
  }
  .pq-public-lead {
    font-size: 1rem;
  }
}


/* Kalender: Fragen im Backlog kompakter darstellen (eine Zeile + Tooltip) */
.pq-calendar-backlog-list .pq-qtext {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Input-Groups: nie umbrechen (Dropdown + Pfeil, Suche + Buttons) */
.pq-inputgroup-nowrap {
  flex-wrap: nowrap !important;
}

.pq-inputgroup-nowrap .form-control,
.pq-inputgroup-nowrap .form-select {
  min-width: 0;
}

.pq-inputgroup-nowrap .btn {
  white-space: nowrap;
}

/* Fragenliste: Einplanen-Dropdown kompakter */
.pq-schedule-compact {
  width: 240px;
  max-width: 100%;
    padding-left: 1px;
}

/* Planner: Einplanen-Dropdown etwas schmaler */
.pq-schedule-compact-sm {
  width: 170px;
  max-width: 100%;
}

/* Planner (mobile): schedule dropdown should stay compact and allow a drag-handle next to it */
.pq-schedule-inline {
  flex: 0 1 auto;
  min-width: 0;
}

.pq-inline-actions {
  max-width: 100%;
}

@media (max-width: 575px) {
  .pq-schedule-compact {
    width: 100%;
  }
}

/* Planung: zwei Scroll-Container auf Desktop, plus etwas Innenabstand */
@media (min-width: 992px) {

  .pq-planner-episodes-scroll {
    /* Keep the episode column scrollable on desktop so content fits into
       typical 1920×1080 screens without forcing the whole page to scroll. */
    max-height: calc(100vh - 340px);
   /* overflow: auto;
    padding: 8px; */
    scrollbar-gutter: stable;
  }
}

/* Planung: Episoden-Fragen einklappen */
.pq-collapse-hint {
  display: none; /* wird bei "eingeklappt" per JS/CSS sichtbar */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.22);
  background: rgba(255, 255, 255, 0.7);
  color: var(--pq-muted);
  cursor: pointer;
  user-select: none;
}

.pq-list-episode.pq-episode-collapsed .pq-item.pq-draggable-item {
  display: none;
}

.pq-list-episode.pq-episode-collapsed .pq-collapse-hint {
  display: flex;
}

/* Sticky "Right menu" / Side-Column auf Edit-Seiten */
@media (min-width: 992px) {
  .pq-sticky-sidebar {
    position: sticky;
      top: 0px; /*unterhalb der sticky Topbar */
    align-self: flex-start;
    max-height: calc(100vh - 104px);
 /*   overflow: auto; */
    scrollbar-gutter: stable;
  }

  /* Auf der Folgen-Seite: lange Fragenliste lieber im Card-Body scrollen */
  .pq-card-body-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }

  .pq-episode-questions-sidebar {
    position: sticky;
    top: calc(var(--pq-topbar-height, 72px) + 8px);
    align-self: flex-start;
  }

  .pq-episode-questions-sidebar .pq-episode-questions-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pq-episode-questions-sidebar .pq-card-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  .pq-episode-questions-card .card-header .btn,
  .pq-episode-questions-card .card-header .btn-group {
    box-shadow: none !important;
  }
}

/* Weniger Bewegung, wenn Nutzer das bevorzugt (reduziert "Jitter"/"Jumps") */
@media (prefers-reduced-motion: reduce) {
  .pq-fc-event-inner {
    transition: none !important;
  }
  .pq-fc-event-inner:hover {
    transform: none !important;
  }
}


/* ============================================================
   STYLEGUIDE TYPOGRAPHY
   ============================================================ */

.pq-brand,
.navbar-brand {
  /* Kundenvorgabe: vorerst überall (außer große Überschrift) die Text-Schrift nutzen */
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

h1, h2, h3 {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.pq-title {
  font-family: var(--pq-font-humane);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.95;
}

/* Public Hero */
.pq-hero .pq-title {
  font-size: clamp(2.6rem, 4.8vw, 4.8rem);
}

.pq-hero p,
.pq-muted,
.small {
  font-family: var(--pq-font-body);
}

/* Buttons / Pills: Text-Schrift, nicht fett */
.btn,
.pq-pill,
.pq-badge,
.badge {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.btn {
  border-radius: 999px;
}

/* Brand dot in Orange */
.pq-dot {
  background: var(--pq-accent);
  box-shadow: 0 0 0 6px rgba(var(--pq-accent-rgb), 0.18);
}

/* Links */
a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============================================================
   COLOR + SURFACES
   ============================================================ */

.pq-card,
.card {
  border-radius: var(--pq-radius);
}

.card {
  border-color: rgba(27, 27, 27, 0.12);
  box-shadow: 0 10px 32px rgba(27, 27, 27, 0.10);
}

/* Primary buttons in Azurblau */
.btn-primary,
.btn-outline-primary:hover {
  background-color: var(--pq-brand) !important;
  border-color: var(--pq-brand) !important;
}

/* Accent button helper (Orange) */
.btn-pq-accent {
  background: var(--pq-accent);
  border-color: var(--pq-accent);
  color: #fff;
}
.btn-pq-accent:hover {
  background: var(--pq-accent-dark);
  border-color: var(--pq-accent-dark);
  color: #fff;
}

/* Outline-primary */
.btn-outline-primary {
  border-color: rgba(var(--pq-brand-rgb), 0.85) !important;
  color: var(--pq-text) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
}

/* ============================================================
   LIST GROUPS (Padding / Spacing Fixes)
   ============================================================ */

/* Globaler Innenabstand für List-Groups (macht Listen in Cards luftiger) */
.list-group {
  padding: 10px;
}

/* Sidebar: eigener Innenabstand */
.pq-sidebar .list-group {
  padding: 10px;
}

.pq-sidebar .list-group-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 27, 27, 0.10);
}

.pq-sidebar .list-group-item.active {
  background: rgba(var(--pq-brand-rgb), 0.22);
  border-color: rgba(var(--pq-brand-rgb), 0.35);
}

/* Backlog-Listen in Cards: mehr Luft + visuell wie "Cards" */
.pq-calendar-backlog-list .list-group-item,
.pq-planner-backlog .list-group-item,
.pq-episode-questions .list-group-item {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 10px;
}

/* ============================================================
   INPUT GROUP ALIGNMENT (Suchfeld + X Button)
   (nicht global, damit "Einplanen" Dropdowns kompakt bleiben)
   ============================================================ */

.pq-search-inputgroup .form-control,
.pq-search-inputgroup .form-select,
.pq-search-inputgroup .btn {
  min-height: 42px;
}

.pq-search-inputgroup .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary {
  background: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  border-left-color: var(--bs-border-color) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  color: inherit !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:hover,
.pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:focus,
.pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:active {
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  background: rgba(var(--pq-brand-rgb), 0.12) !important;
  color: var(--pq-brand-dark) !important;
  box-shadow: none !important;
}

.pq-questions-filter-card .pq-filter-form .form-control,
.pq-questions-filter-card .pq-filter-form .form-select {
  min-height: 42px !important;
  height: 42px !important;
}

.pq-questions-filter-card .pq-search-inputgroup .form-control {
  background: #ffffff !important;
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
}

.pq-questions-filter-card .pq-search-inputgroup .form-control:focus {
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--pq-brand-rgb), 0.10) !important;
}

.pq-questions-filter-card .pq-filter-form .form-select {
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  padding-right: 2.5rem !important;
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

.pq-questions-filter-card .pq-filter-form .form-select:focus {
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--pq-brand-rgb), 0.10) !important;
}

.pq-questions-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary {
  background: #ffffff !important;
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  border-left-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  color: var(--pq-text) !important;
  min-height: 42px !important;
  height: 42px !important;
}

.pq-questions-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:hover,
.pq-questions-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:focus,
.pq-questions-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:active {
  border-color: rgba(var(--pq-brand-rgb), 0.55) !important;
  background: rgba(var(--pq-brand-rgb), 0.12) !important;
  color: var(--pq-brand-dark) !important;
  box-shadow: none !important;
}

.pq-episodes-filter-card .pq-search-inputgroup .form-control,
.pq-episodes-filter-card .pq-search-inputgroup .form-select {
  background: rgba(255, 252, 247, 0.96) !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
}

.pq-episodes-filter-card .pq-search-inputgroup .form-control:focus,
.pq-episodes-filter-card .pq-search-inputgroup .form-select:focus {
  border-color: rgba(130, 95, 70, 0.42) !important;
  box-shadow: 0 0 0 0.25rem rgba(130, 95, 70, 0.12) !important;
}

.pq-episodes-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary {
  background: rgba(255, 252, 247, 0.96) !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
  border-left-color: rgba(130, 95, 70, 0.24) !important;
}

.pq-episodes-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:hover,
.pq-episodes-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:focus,
.pq-episodes-filter-card .pq-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:active {
  border-color: rgba(130, 95, 70, 0.42) !important;
  background: rgba(130, 95, 70, 0.10) !important;
  color: rgba(84, 58, 43, 0.92) !important;
  box-shadow: none !important;
}

.pq-transcripts-search-inputgroup .form-control,
.pq-transcripts-search-inputgroup .form-select {
  background: rgba(255, 252, 247, 0.96) !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
}

.pq-transcripts-search-inputgroup .form-control:focus,
.pq-transcripts-search-inputgroup .form-select:focus {
  border-color: rgba(130, 95, 70, 0.42) !important;
  box-shadow: 0 0 0 0.25rem rgba(130, 95, 70, 0.12) !important;
}

.pq-transcripts-search-inputgroup .pq-search-reset-btn.btn-outline-secondary {
  background: rgba(255, 252, 247, 0.96) !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
  border-left-color: rgba(130, 95, 70, 0.24) !important;
}

.pq-transcripts-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:hover,
.pq-transcripts-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:focus,
.pq-transcripts-search-inputgroup .pq-search-reset-btn.btn-outline-secondary:active {
  border-color: rgba(130, 95, 70, 0.42) !important;
  background: rgba(130, 95, 70, 0.10) !important;
  color: rgba(84, 58, 43, 0.92) !important;
  box-shadow: none !important;
}

/* ============================================================
   FULLCALENDAR (Look & Feel)
   ============================================================ */

#pq-calendar .fc-toolbar {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 18px;
}

#pq-calendar .fc .fc-button {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 999px;
}

.pq-fc-event-inner {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(var(--pq-brand-rgb), 0.30);
  box-shadow: 0 10px 28px rgba(27, 27, 27, 0.12);
}

.pq-fc-pill {
  border-color: rgba(var(--pq-brand-rgb), 0.30);
  background: rgba(var(--pq-brand-rgb), 0.14);
}

.pq-legend-planned { background: rgba(var(--pq-brand-rgb), 0.85); }


/* ============================================================
   CONTAINER PADDING (Cards nicht "am Rand kleben")
   ============================================================ */

.pq-content {
  padding: 20px;
}

@media (min-width: 992px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}



/* ============================================================
   WIZARD (Kurzanleitung)
   ============================================================ */

.pq-wizard-body p,
.pq-wizard-body li {
  font-size: 1.02rem;
  line-height: 1.45;
}

.pq-wizard-highlight {
  position: relative;
  outline: 3px solid rgba(var(--pq-accent-rgb), 0.85);
  outline-offset: 4px;
  border-radius: 14px;
  box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10);
  animation: pqPulse 1.35s ease-in-out infinite;
}

@keyframes pqPulse {
  0% { box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10); }
  50% { box-shadow: 0 0 0 12px rgba(var(--pq-accent-rgb), 0.18); }
  100% { box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10); }
}


/* ============================================================
   ADMIN UI – READABILITY / DATA DENSITY
   ------------------------------------------------------------
   - Color scheme stays as defined in :root
   - Only applies to admin pages (body.pq-admin)
   - Public submission page stays unchanged
   ============================================================ */

body.pq-admin {
  --pq-admin-font: "Work Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --pq-admin-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-family: var(--pq-admin-font);
  font-size: 15px;
  line-height: 1.45;
}

/* Make headings look like a classic admin UI (no display-font + no forced uppercase) */
body.pq-admin h1,
body.pq-admin h2,
body.pq-admin h3,
body.pq-admin .pq-title {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2;
  font-weight: 700;
}

body.pq-admin h1,
body.pq-admin .pq-title {
  font-size: 1.85rem;
}

body.pq-admin h2 { font-size: 1.35rem; }
body.pq-admin h3 { font-size: 1.12rem; }

/* Brand / navbar */
body.pq-admin .pq-brand,
body.pq-admin .navbar-brand {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 700;
}

/* Buttons + badges: keep colors, remove heavy uppercase for readability */
body.pq-admin .btn,
body.pq-admin .badge,
body.pq-admin .pq-pill,
body.pq-admin .pq-badge {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;



    
}

body.pq-admin .btn-primary,
body.pq-admin .btn-success,
body.pq-admin .btn-pq-accent {
  box-shadow: 0 8px 18px rgba(27, 27, 27, 0.12);
  transition:
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

body.pq-admin .btn-primary:not(:disabled):hover,
body.pq-admin .btn-success:not(:disabled):hover,
body.pq-admin .btn-pq-accent:not(:disabled):hover,
body.pq-admin .btn-primary:not(:disabled):focus-visible,
body.pq-admin .btn-success:not(:disabled):focus-visible,
body.pq-admin .btn-pq-accent:not(:disabled):focus-visible {
  box-shadow: 0 12px 24px rgba(27, 27, 27, 0.16);
}

body.pq-admin .btn-primary:not(:disabled):active,
body.pq-admin .btn-success:not(:disabled):active,
body.pq-admin .btn-pq-accent:not(:disabled):active {
  box-shadow: 0 6px 14px rgba(27, 27, 27, 0.12);
}

/* Special case: buttons directly attached to dropdowns should stay visually calm */
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary {
  box-shadow: none !important;
  transition: none !important;
}

body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary:hover,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary:focus,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary:focus-visible,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-primary:active {
  background-color: var(--pq-brand) !important;
  border-color: var(--pq-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary:hover,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary:focus,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary:focus-visible,
body.pq-admin .input-group.pq-inputgroup-nowrap > .form-select + .btn.btn-outline-primary:active,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary:hover,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary:focus,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary:focus-visible,
body.pq-admin .pq-add-question-form > .form-select + .btn.btn-outline-primary:active {
  background-color: transparent !important;
  border-color: rgba(var(--pq-brand-rgb), 0.85) !important;
  color: var(--pq-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Meta text: slightly smaller, but still readable */
body.pq-admin .pq-muted {
  font-size: 0.92rem;
}

body.pq-admin .pq-meta {
  font-size: 0.7rem; 
/*    padding-left: 5px; */
    margin-top: 2px;
    margin-bottom: 5px;
}

/* Forms */
body.pq-admin .form-label {
  font-size: 0.92rem;
  font-weight: 600;
}

body.pq-admin .form-control,
body.pq-admin .form-select {
  font-size: 0.8rem;
}

/* Dropdowns etwas kleiner (besser für dichte Listen) */
body.pq-admin select.form-select {
  font-size: 0.8rem;
}

body.pq-admin select.form-select.form-select-sm {
  font-size: 0.8rem;
  height: 31px;
}

/* Make list items slightly more compact for data-heavy lists */
body.pq-admin .pq-item {
  padding: 10px 12px;
}

body.pq-admin .pq-card .card-body {
  padding: 16px;
}

body.pq-admin .pq-card .card-header {
  padding: 12px 16px;
}

/* FullCalendar title: use readable font too */
body.pq-admin #pq-calendar .fc-toolbar-title {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}



/* Keyword highlighting (Admin search) */
.pq-mark {
  padding: 0 0.14em;
  border-radius: 0.25em;
  background: rgba(var(--pq-accent-rgb), 0.18);
  color: inherit;
}

/* Edit hint: replace separate "Bearbeiten" buttons with a subtle hover icon */
body.pq-admin a.pq-editable:hover::after,
body.pq-admin a.pq-editable:focus-visible::after {
  content: "\202F✎"; /* narrow no-break space + icon */
  margin-left: 0.35rem;
  font-size: 0.9em;
  opacity: 0.65;
}

/* Modal title link should look like a title (not a blue link) */
.pq-modal-title-link {
  color: inherit;
  text-decoration: none;
}
.pq-modal-title-link:hover,
.pq-modal-title-link:focus-visible {
  text-decoration: underline;
}


/* Filter action buttons */
.pq-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pq-filter-actions .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

.pq-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.pq-filter-toggle-btn.pq-btn-icon {
  gap: 0;
}

.pq-filter-toggle-btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.pq-filter-toggle-btn.active:hover,
.pq-filter-toggle-btn.active:focus,
.pq-filter-toggle-btn.active:focus-visible {
  background-color: var(--pq-brand-dark);
  border-color: var(--pq-brand-dark);
  color: #fff;
}

/* Kleiner Reset-Button ("x") soll nicht auf volle Breite wachsen */
.pq-btn-icon {
  width: 40px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}


/* Episode modal: a bit wider on large screens */
#pqEpisodeModal .modal-dialog {
  max-width: min(1600px, calc(100vw - 2rem));
    max-height: 80vh;
}


/* ============================================================
   Calendar: modern day grid / spacing
   (Overrides – keep near the end so it wins)
   ============================================================ */

body.pq-admin #pq-calendar .fc {
  --fc-border-color: rgba(27, 27, 27, 0.08);
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.55);
  /* Avoid "double tinted" today highlight: we style today via the frame below. */
  --fc-today-bg-color: transparent;
}

/* Ensure FullCalendar's built-in "today" background layer is fully disabled */
/*
body.pq-admin #pq-calendar .fc-day-today {
  background: transparent !important;
}*/

/*

body.pq-admin #pq-calendar .fc-day-today .fc-daygrid-day-bg {
  background: transparent !important;
}
*/
body.pq-admin #pq-calendar .fc-scrollgrid {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(27, 27, 27, 0.10);
  background: rgba(255, 255, 255, 0.55);
}

body.pq-admin #pq-calendar .fc-daygrid-day-frame {
  padding: 6px;
}

body.pq-admin #pq-calendar .fc-daygrid-day-number {
  font-weight: 700;
  font-size: 12px;
  color: rgba(27, 27, 27, 0.72);
}

/*
body.pq-admin #pq-calendar .fc-day-today .fc-daygrid-day-frame {

  background: rgba(var(--pq-accent-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--pq-accent-rgb), 0.18);
}
*/
body.pq-admin #pq-calendar .fc-day-other .fc-daygrid-day-number {
  opacity: 0.35;
}

body.pq-admin #pq-calendar .fc-col-header-cell {
  background: rgba(255, 255, 255, 0.45);
}

body.pq-admin #pq-calendar .fc-col-header-cell-cushion {
  padding: 10px 0;
  font-weight: 700;
  font-size: 12px;
  color: rgba(27, 27, 27, 0.70);
}

body.pq-admin #pq-calendar .fc-daygrid-event-harness {
  margin-top: 6px;
}

body.pq-admin #pq-calendar .fc-daygrid-event {
  margin: 2px 4px;
}

body.pq-admin #pq-calendar .fc-popover {
  border-radius: 14px;
  border-color: rgba(27, 27, 27, 0.14);
  overflow: hidden;
}

body.pq-admin #pq-calendar .fc-popover-header {
  background: rgba(255, 255, 255, 0.85);
}



/* Clamp question titles (links + headers) to max 2 lines (prevents cards from growing too tall) */
a.pq-qtitle,
a.pq-qtitle-sm,
h1.pq-qtitle,
h1.pq-qtitle-sm,
h2.pq-qtitle,
h2.pq-qtitle-sm,
h3.pq-qtitle,
h3.pq-qtitle-sm {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-width: 100%;
  word-break: break-word;
}

/* Clamp episode titles (as titles/cards, not inline references) to max 2 lines */
a.pq-ep-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
 /* line-height: 1.25; */
  max-width: 100%;
  word-break: break-word;
}

/* Inline episode references (e.g. "Eingeplant: ...") should never explode layout */
.pq-ep-ref{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 575.98px){
  .pq-ep-ref{ max-width: 100%; }
}


/* make sure flex containers allow clamping properly */
.pq-qheadline,
.pq-qheadline > a.pq-qtitle,
.pq-qheadline > a.pq-qtitle-sm {
  min-width: 0;
}

/* Keep question header actions on one line (no wrapping) */
.pq-qheader {
  display: flex;
  /* "anchor-center" is not a valid CSS value (can lead to inconsistent rendering).
     Keep headline + actions top-aligned, especially when the title wraps. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pq-actions-col {
  flex: 0 0 auto;
}

/* Actions row: on desktop keep on one line; on small screens allow wrapping */
@media (min-width: 992px) {
  .pq-actions-col > .d-flex {
    /* Wichtig: Kein Overflow-Clipping, damit Button-Schatten nicht abgeschnitten werden.
       (Wrap ist hier ok – besser als horizontales Scrollen + abgeschnittene Shadows.) */
    flex-wrap: wrap !important;
    white-space: normal;
    overflow: visible;
  }
}
/* Buttons/forms inside actions shouldn't shrink weirdly */
.pq-actions-col form {
  flex: 0 0 auto;
}
.pq-actions-col .btn {
  flex: 0 0 auto;
}

/* Always top-align headline + actions, even when title wraps */
.pq-qheader{
  align-items: flex-start !important;
}

/* Ensure the actions column itself is top-aligned */
.pq-item-actions-top{
  align-self: flex-start;          /* key */
  display: flex;
  flex-direction: column;          /* keeps backlog + episode rows stacked */
  align-items: flex-end;           /* right aligned */
  gap: 8px;
}


/* ============================================================
   RESPONSIVE POLISH
   ------------------------------------------------------------
   Ziel:
   - Keine horizontalen Überläufe
   - Auf Mobile weniger "Info-Dichte" (Meta einkürzen)
   - Auf großen Screens (z.B. 1920×1080) bessere Lesbarkeit
   ============================================================ */

/* Reduce overly long line lengths on very wide screens (admin area). */
@media (min-width: 1400px) {
  .pq-shell .pq-content {
    max-width: 1960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Slightly tighter padding on smaller screens (admin area). */
@media (max-width: 991px) {
  .pq-content {
    padding: 14px 12px;
  }
}

@media (max-width: 575px) {
  .pq-content {
    padding: 12px 10px;
  }
}

/* Episode detail: keep "add question" controls compact on phones */
@media (max-width: 575px) {
  .pq-add-question-form .form-select { min-width: 0; }
}

.pq-add-question-form > .btn,
.pq-add-question-form > .btn:hover,
.pq-add-question-form > .btn:focus,
.pq-add-question-form > .btn:focus-visible,
.pq-add-question-form > .btn:active {
  box-shadow: none !important;
}

/* Meta row inside list cards: on very small screens show only the first 2 entries. */
@media (max-width: 575px) {
  .pq-qsubmeta {
    font-size: 10px;
    line-height: 1.25;
  }
  .pq-qsubmeta span:nth-child(n+3) {
    display: none !important;
  }
}

/* Make schedule dropdowns fluid on phones (only where they sit in full-width action columns). */
@media (max-width: 575px) {
  .pq-actions-col .pq-schedule-compact,
  .pq-actions-col .pq-schedule-compact-sm,
  .pq-add-question-form .pq-schedule-compact,
  .pq-add-question-form .pq-schedule-compact-sm {
    width: 100% !important;
  }
}

/* Action blocks inside list cards: better stacking and less overflow on phones. */
@media (max-width: 575px) {
  .pq-item-actions-top {
    align-items: stretch;
    width: 100%;
  }

  .pq-item-actions-top .pq-actions-backlog,
  .pq-item-actions-top .pq-actions-episode {
    width: 100%;
    justify-content: flex-start !important;
  }

  /* Keep episode action buttons accessible without forcing horizontal page scroll */
  .pq-item-actions-top .pq-actions-episode {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
}

/* Questions list (right actions column): on phones stack and allow wrapping. */
@media (max-width: 575px) {
  .pq-actions-col {
    width: 100%;
    text-align: left !important;
  }

  .pq-actions-col > .d-flex {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-x: visible !important;
  }

  .pq-actions-col > .d-flex > * {
    flex: 0 0 auto;
  }

  /* Schedule form should take full width */
  .pq-actions-col form.input-group {
    width: 100%;
    max-width: 100%;
  }
}

/* Questions list: below md stack headline + actions so the title never disappears. */
@media (max-width: 767.98px) {
  .pq-qheader-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pq-qheader-actions .pq-actions-col {
    min-width: 0;
    width: 100%;
    text-align: left !important;
  }

  .pq-qheader-actions .pq-actions-col > .d-flex {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .pq-qheader-actions .pq-actions-col form.input-group {
    width: 100%;
    max-width: 100%;
  }
}

/* Extra-small: delete button in list is too cramped -> hide below 576px */
@media (max-width: 575.98px) {
  .pq-qheader-actions .pq-delete-form {
    display: none !important;
  }
}

/* ============================================================
   MOBILE COMPACT MODE (Admin)
   ------------------------------------------------------------
   - NO pills on small devices
   - Optional icon-only buttons (add .pq-icon-only-sm)
   - More compact controls
   ============================================================ */

@media (max-width: 767.98px) {
  /* Pills are now user-toggleable via the topbar button (Details).
     We no longer force-hide them on mobile, because the user can decide. */

  /* Meta row stays tidy when pills disappear (e.g. keep drag handle usable) */
  .pq-qmeta {
    justify-content: flex-end;
    gap: 10px;
  }

  /* Planner backlog: keep it flexible on mobile.
     (Pills can be hidden globally via the topbar toggle.) */

  /* List cards should not enforce a tall minimum height on phones. */
  .pq-item {
    min-height: 0;
  }

  /* Calendar: make toolbar + grid fit small screens better */
  body.pq-admin #pq-calendar .fc-toolbar {
    padding: 10px 10px;
    gap: 10px;
  }
  body.pq-admin #pq-calendar .fc-toolbar-title {
    font-size: 1.4rem !important;
  }
  body.pq-admin #pq-calendar .fc .fc-button {
    font-size: 0.78rem !important;
    padding: 0.32rem 0.55rem !important;
  }
  body.pq-admin #pq-calendar .fc-daygrid-day-frame {
    padding: 4px;
  }
  body.pq-admin #pq-calendar .fc-daygrid-day-number {
    font-size: 11px;
  }
  body.pq-admin #pq-calendar .fc-daygrid-event-harness {
    margin-top: 2px;
  }
  body.pq-admin #pq-calendar .fc-daygrid-event {
    margin: 1px 2px;
  }
  .pq-fc-dot {
    width: 8px;
    height: 8px;
  }

  /* 2) Icon-only buttons (opt-in) */
  .pq-icon-only-sm .pq-btn-text {
    display: none !important;
  }
  .btn.pq-icon-only-sm {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* 3) Compact controls in the admin UI */
  body.pq-admin .btn {
    font-size: 0.85rem;
    padding: 0.40rem 0.75rem;
  }
  body.pq-admin .btn.btn-sm {
    font-size: 0.80rem;
    padding: 0.30rem 0.60rem;
  }

  body.pq-admin .form-control,
  body.pq-admin .form-select {
    font-size: 0.85rem;
    padding-top: 0.40rem;
    padding-bottom: 0.40rem;
  }
  body.pq-admin .form-control.form-control-sm,
  body.pq-admin .form-select.form-select-sm {
    font-size: 0.80rem;
    padding-top: 0.30rem;
    padding-bottom: 0.30rem;
  }

  body.pq-admin .pq-btn-icon {
    width: 36px;
  }

  /* Search input groups were forced tall – shrink them on mobile */
  body.pq-admin .pq-search-inputgroup .form-control,
  body.pq-admin .pq-search-inputgroup .form-select,
  body.pq-admin .pq-search-inputgroup .btn {
    min-height: 36px;
  }

  /* If a layout used .pq-actions-nowrap, allow wrapping on small screens */
  .pq-actions-nowrap {
    flex-wrap: wrap !important;
  }
}

/* Prevent accidental horizontal overflow caused by long unbroken strings. */
.pq-item,
.pq-card,
.pq-qtitle,
.pq-qsubmeta,
.pq-qheadline {
  overflow-wrap: anywhere;
}

/*
  Robust 2-line clamp helper.
  - Works for very long unbroken strings (asdf... / long URLs)
  - Adds modern `line-clamp` as well as the -webkit variant
*/
.pq-clamp-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* avoid layout breakouts on long unbroken tokens */
  overflow-wrap: anywhere;
  word-break: break-word;
}


.pq-qheadline > h1.pq-qtitle.pq-qtitle-lg {
  /* Clamp long titles to 2 lines with ellipsis (edit episode + edit question) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  /* ensure pathological no-space strings still clamp instead of "continuing" */
  overflow-wrap: anywhere;
  word-break: break-word;

  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius);
  padding: 15px;
  background: var(--pq-surface);
margin-top: 5px;
    margin-bottom: 10px !important;
    border-color: rgba(27, 27, 27, 0.12);
  box-shadow: 0 10px 32px rgba(27, 27, 27, 0.10);
}

.btn-outline-secondary {
    border-color:#dfdfdf !important; 
    box-shadow: 0 5px 5px rgba(27, 27, 27, 0.10);
}


.btn-outline-primary,
.btn-outline-danger {
        box-shadow: 0 5px 5px rgba(27, 27, 27, 0.10);
}

.row.flex-nowrap > [class^="col"] { min-width: 0; }

/* Bootstrap provides flex-*-nowrap helpers. When the sidebar is wide, the
   content area can become narrow while the viewport is still "lg".
   Ensure columns are allowed to shrink to avoid horizontal overflow. */
.row.flex-lg-nowrap > [class^="col"],
.row.flex-md-nowrap > [class^="col"],
.row.flex-xl-nowrap > [class^="col"] {
  min-width: 0;
}

/* Admin filter forms: allow controls to shrink in tight layouts */
.pq-filter-form > [class^="col"] {
  min-width: 0;
}
.pq-filter-form .form-control,
.pq-filter-form .form-select {
  min-width: 0;
}
/* Episode header: allow left flex group to shrink so title can truncate */
.pq-episode-head-left { min-width: 0; }
.pq-episode-title { min-width: 0; max-width: 100%; }



/* ============================================================
   HELP PAGE (Handbuch) – nicer layout + consistent callouts
   ------------------------------------------------------------
   - readable line length
   - nicer headings + spacing
   - consistent "callout" + "tip" styles
   - TOC never exceeds viewport; scrolls inside
   - callout UL/OL markers pushed inward correctly (NO overlap)
   ============================================================ */

/* Base readability */
.pq-help {
/*  --pq-help-max: 88ch; */
  --pq-help-gap: 1.0rem;

  /* Accent + list spacing inside callouts */
  --pq-help-accent-gutter: 10px;  /* distance from callout left edge to content */
  --pq-help-list-inset: 22px;     /* extra push for UL/OL markers inward */
  --pq-help-nested-inset: 16px;   /* extra push for nested lists */
}

.pq-help p,
.pq-help li {
  max-width: var(--pq-help-max);
}

/* Slightly nicer rhythm */
.pq-help h1,
.pq-help h2,
.pq-help h3,
.pq-help h4 {
  scroll-margin-top: 90px;
}

.pq-help h2 {
  margin-top: 1.25rem;
  margin-bottom: .6rem;
}

.pq-help h3 {
  margin-top: 1.05rem;
  margin-bottom: .45rem;
}

.pq-help hr {
  max-width: var(--pq-help-max);
  opacity: .18;
}

/* Lists: more air + better scanability */
.pq-help ul,
.pq-help ol {
  max-width: var(--pq-help-max);
  padding-left: 2rem;
  margin-bottom: 1rem;
}

.pq-help li {
  margin: .28rem 0;
}

/* Inline code looks "designed" */
.pq-help code {
  padding: .12rem .35rem;
  border-radius: 8px;
  border: 1px solid rgba(27,27,27,.12);
  background: rgba(255,255,255,.65);
  font-size: .92em;
}

/* ============================================================
   Callouts (consistent look)
   ============================================================ */

.pq-help .pq-help-callout,
.pq-help .pq-help-tip {
  max-width: var(--pq-help-max);
  border-radius: 16px;
  padding: 14px 15px;
  margin: 14px 0;
  position: relative;
  overflow: hidden;
}

/* Title row inside callouts */
.pq-help .pq-help-callout .fw-semibold,
.pq-help .pq-help-tip .fw-semibold {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* Icon emphasis */
.pq-help .pq-help-callout i,
.pq-help .pq-help-tip i {
  font-size: 1.05em;
  opacity: .95;
}

/* Reduce margins inside callouts */
.pq-help .pq-help-callout p:last-child,
.pq-help .pq-help-tip p:last-child {
  margin-bottom: 0;
}

.pq-help .pq-help-callout ul,
.pq-help .pq-help-callout ol,
.pq-help .pq-help-tip ul,
.pq-help .pq-help-tip ol {
  margin-bottom: 0;
  margin-top: .5rem;
}

/* Callout: neutral info */
.pq-help .pq-help-callout {
  border: 1px solid rgba(27,27,27,0.12);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 10px 28px rgba(27,27,27,0.06);
}

/* Subtle left accent */
.pq-help .pq-help-callout::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(var(--pq-brand-rgb), 0.70);
}

/* Tip: dashed + different accent */
.pq-help .pq-help-tip {
  border: 1px dashed rgba(27,27,27,0.20);
  background: rgba(255,255,255,0.70);
}

.pq-help .pq-help-tip::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(var(--pq-accent-rgb), 0.70);
}

/* Indent ALL callout direct children away from accent bar */
.pq-help .pq-help-callout > *,
.pq-help .pq-help-tip > * {
  padding-left: var(--pq-help-accent-gutter);
}

/* ------------------------------------------------------------
   FIX: UL/OL markers inside callouts moved inward correctly
   ------------------------------------------------------------ */

/* Push the entire list block inward (affects markers reliably) */
.pq-help .pq-help-callout ul,
.pq-help .pq-help-callout ol,
.pq-help .pq-help-tip ul,
.pq-help .pq-help-tip ol {
  /* Move list as a whole away from accent bar */
  margin-left: var(--pq-help-list-inset);

  /* Keep some text indent for readability */
  padding-left: 1.15rem;

  /* Ensure markers stay outside but no longer overlap the accent */
  list-style-position: outside;
}

/* Nested lists: additional inward move */
.pq-help .pq-help-callout ul ul,
.pq-help .pq-help-callout ol ol,
.pq-help .pq-help-callout ul ol,
.pq-help .pq-help-callout ol ul,
.pq-help .pq-help-tip ul ul,
.pq-help .pq-help-tip ol ol,
.pq-help .pq-help-tip ul ol,
.pq-help .pq-help-tip ol ul {
  margin-left: var(--pq-help-nested-inset);
}

/* ============================================================
   TOC (Table of contents)
   ============================================================ */

/* Never exceed viewport; scroll inside */
.pq-help-toc {
  max-height: calc(100vh - 110px);
/*  overflow: hidden; */
    top: 70px;
    position: sticky;
}

/* Ensure child scroll container can actually scroll */
.pq-help-toc .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;

}

/* Scroll region inside TOC */
.pq-help-toc-scroll {
/*  overflow: auto; */

  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

/* TOC items */
.pq-help-toc .list-group {
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(27,27,27,0.10);
}

.pq-help-toc .list-group-item {
  border-radius: 10px;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 0.92rem;
}

.pq-help-toc .list-group-item:hover {
  background: rgba(var(--pq-brand-rgb), 0.10);
}





/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 991px) {
  .pq-help-toc {
    max-height: none;
  }

  .pq-help-toc-scroll {
    overflow: visible;
  }

  .pq-help {
    --pq-help-max: 100%;
  }
}




/* Prevent accidental horizontal scrolling (admin) */
body.pq-admin {
  overflow-x: hidden;
}

/* Sticky sidebar, but do NOT clamp its height */
@media (min-width: 992px) {
  .pq-sidebar {
    position: sticky;
/*    top: 84px; */
    align-self: flex-start;

    /* IMPORTANT: remove max-height + overflow that would create internal scrolling */
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}


/* Default topbar height.
   JS updates this at runtime to match the real navbar height (important on mobile). */
:root{
  --pq-topbar-height: calc(64px + env(safe-area-inset-top));
}

/* Topbar should never move out of the viewport */
.pq-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;


  /* iOS notch safe area */
 /* padding-top: env(safe-area-inset-top);*/
  padding-bottom: 5px;
  padding-top: 5px;

  /* keep your visual style */
  background: rgba(245, 240, 230, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pq-topbar .container-fluid {
  position: relative;
}

.pq-topbar-rating-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  gap: 0.32rem;
  padding: 0.1rem 0.2rem;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(47, 41, 35, 0.72);
  text-decoration: none;
  white-space: nowrap;
  z-index: 1;
}

.pq-topbar-rating-link:hover,
.pq-topbar-rating-link:focus {
  color: rgba(47, 41, 35, 0.88);
  text-decoration: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.pq-topbar-rating-item {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
}

.pq-topbar-rating-item i {
  color: rgba(138, 106, 72, 0.78);
  font-size: 0.78rem;
  line-height: 1;
}

.pq-topbar-rating-text {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(47, 41, 35, 0.58);
  letter-spacing: 0.01em;
}

.pq-topbar-rating-number {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(47, 41, 35, 0.74);
}

.pq-topbar-rating-sep {
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(47, 41, 35, 0.54);
}

/* Global offset for the fixed topbar (avoids overlap on mobile). */
body {
  padding-top: var(--pq-topbar-height);
}

/* Prevent double-offsets (older layout rules kept main/pq-shell padded). */
.pq-app,
.pq-shell,
.pq-layout,
main{
  padding-top: 0 !important;
}

/* Keep Bootstrap modals full-screen; the dialog itself is already centered with margins. */
.modal {
  top: 0;
}

@media (min-width: 500px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 0 !important;
  }
}

/* Title row with right-aligned episode link */
.pq-ep-titlebar{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pq-ep-titleleft{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0; /* allows ellipsis */
  flex: 1 1 auto;
}

.pq-ep-titleleft a{
  min-width: 0;
}


.pq-ep-titlewrap{
  flex: 1 1 auto;
  min-width: 0;
}

/* prevent the chip from shrinking too much */
.pq-ep-link{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.1;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}

.pq-ep-link:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.18);
  transform: translateY(-1px);
  text-decoration: none;
}

.pq-ep-link:active{ transform: translateY(0); }

.pq-ep-linkicon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(0,0,0,.06);
}

.pq-ep-linktext{ font-weight: 600; }

.pq-ep-linkhint{
  opacity: .6;
  font-size: .85em;
  margin-left: 2px;
}

.pq-episode-link-group {
  width: 100%;
  flex-wrap: nowrap;
}

.pq-episode-link-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: 1%;
  background: rgba(255, 252, 247, 0.96) !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
  border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.pq-episode-link-group .pq-ep-link {
  flex: 0 0 auto;
  margin-left: 0;
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.9rem;
  border-left: 1px solid rgba(130, 95, 70, 0.24) !important;
  border-radius: 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 !important;
  border-color: rgba(130, 95, 70, 0.24) !important;
  background: rgba(255, 252, 247, 0.96) !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
  color: var(--pq-text) !important;
}

.pq-episode-link-group .form-control:focus {
  border-color: rgba(130, 95, 70, 0.42) !important;
  box-shadow: 0 0 0 0.25rem rgba(130, 95, 70, 0.12) !important;
}

.pq-episode-link-group .pq-ep-link:hover,
.pq-episode-link-group .pq-ep-link:focus,
.pq-episode-link-group .pq-ep-link:focus-visible,
.pq-episode-link-group .pq-ep-link:active {
  border-color: rgba(130, 95, 70, 0.42) !important;
  background: rgba(130, 95, 70, 0.10) !important;
  color: rgba(84, 58, 43, 0.92) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none;
}

/* Optional: if titles get very long, keep layout clean */
.pq-ep-titleleft{
  overflow: hidden;
}

/* Allow multi-line (clamped) episode titles inside the flex row */
.pq-ep-titleleft a.pq-ep-title{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
}

/* Episode list/title rows: keep edit marker close to title text (not row edge) */
.pq-ep-titlebar a.pq-ep-title.pq-editable {
  padding-right: 0.2em;
}

.pq-ep-titlebar a.pq-ep-title.pq-editable::after {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 0.24rem !important;
  vertical-align: 0.03em;
}

/* Question/episode list cards (questions list + dashboard): marker next to title text */
.pq-item .pq-qheadline a.pq-editable {
  padding-right: 0.2em;
}

.pq-item .pq-qheadline a.pq-editable::after {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 0.24rem !important;
  vertical-align: 0.03em;
}

/* Calendar backlog lists (sidebar + modal): marker next to question title text */
#pqCalendarBacklogList .pq-qheadline a.pq-editable,
#pqEpisodeModalBacklog .pq-qheadline a.pq-editable {
  padding-right: 0.2em;
}

#pqCalendarBacklogList .pq-qheadline a.pq-editable::after,
#pqEpisodeModalBacklog .pq-qheadline a.pq-editable::after {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 0.24rem !important;
  vertical-align: 0.03em;
}

/* Episode edit: assigned questions list */
#pq-episode-sortable .pq-qheadline a.pq-editable {
  padding-right: 0.2em;
}

#pq-episode-sortable .pq-qheadline a.pq-editable::after {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin-left: 0.24rem !important;
  vertical-align: 0.03em;
}

.pq-ep-titlebar{
  padding-top: 2px;
  overflow: visible;
  align-items: flex-start; /* better for multi-line titles */
}

.pq-item{
  overflow: visible; /* only if it was hidden before */
}


/* Spotify green */
.pq-ep-link i.bi-spotify{
  color: #1DB954;
}

/* ============================================================
   Analytics Charts
   - Chart.js ist responsive, aber ohne Container-Höhe wirken Bars "gequetscht".
   ============================================================ */

.pq-chart-wrap {
  position: relative;
  height: 360px;
}

.pq-chart-wrap-lg {
  height: 420px;
}

.pq-chart-wrap-sm {
  height: 320px;
}

.pq-chart-wrap-spotify-sm {
  height: 240px;
}

.pq-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 575px) {
  .pq-chart-wrap { height: 300px; }
  .pq-chart-wrap-lg { height: 340px; }
  .pq-chart-wrap-sm { height: 260px; }
}

/* Sidebar footer: visible indicator + toggle for collapse/expand */
.pq-sidebar-footer {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(27, 27, 27, 0.08);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

/* ============================================================
   SIDEBAR FOOTER – TRUE 100% WIDTH + inset button + hint hidden when collapsed
   (DROP-IN, paste at END)
   ============================================================ */

@media (min-width: 992px) {

/* Match your sidebar padding (your CSS uses padding: 14px on .pq-sidebar) */
:root{
  --pq-sidebar-pad: 14px;
}

/* Sidebar must not clip horizontal bleed */
.pq-shell .pq-sidebar{
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  padding-bottom: 0 !important;
}

/* Footer: BLEED to full width by cancelling sidebar padding on BOTH sides */
.pq-shell .pq-sidebar .pq-sidebar-footer{
  margin-top: auto !important;

  position: sticky !important;
  bottom: 0 !important;
  z-index: 50 !important;

  /* This is the key: cancel the sidebar padding */
  margin-left: calc(var(--pq-sidebar-pad) * -1) !important;
  margin-right: calc(var(--pq-sidebar-pad) * -1) !important;

  /* Full-width bar, but with its OWN inner padding */
  padding: 8px var(--pq-sidebar-pad) !important;

  border-top: 1px solid rgba(27,27,27,0.10) !important;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.90) 45%,
    rgba(255,255,255,0.96)
  ) !important;

  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 -8px 18px rgba(27,27,27,0.05) !important;
}

/* Button: NOT edge-to-edge (footer padding gives the inset) */
.pq-shell .pq-sidebar .pq-sidebar-toggle{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 6px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(27,27,27,0.12) !important;

  background: rgba(255,255,255,0.80) !important;
  color: var(--pq-text) !important;

  font-family: var(--pq-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  line-height: 1.1 !important;

  box-shadow: 0 8px 18px rgba(27,27,27,0.07) !important;
  cursor: pointer !important;
  text-align: center !important;

  transition: transform 90ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}

.pq-shell .pq-sidebar .pq-sidebar-toggle i{
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}

.pq-shell .pq-sidebar .pq-sidebar-toggle:hover{
  background: rgba(var(--pq-brand-rgb), 0.12) !important;
  border-color: rgba(var(--pq-brand-rgb), 0.26) !important;
  box-shadow: 0 10px 22px rgba(27,27,27,0.09) !important;
}

.pq-shell .pq-sidebar .pq-sidebar-toggle:active{
  transform: translateY(1px) !important;
}

/* Hint: centered + very small */
.pq-shell .pq-sidebar .pq-sidebar-hint{
  margin-top: 5px !important;
  text-align: center !important;
  color: rgba(27,27,27,0.50) !important;

  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
}

/* Collapsed mode: ALWAYS hide hint */
.pq-shell.pq-collapsed .pq-sidebar .pq-sidebar-hint{
  display: none !important;
}

/* Icon-only mode: also hide hint */
html.pq-sidebar-icons .pq-sidebar .pq-sidebar-hint{
  display: none !important;
}

/* ============================================================
   HIDE UGLY SCROLLBAR (sidebar only, scrolling still works)
   ============================================================ */
.pq-shell .pq-sidebar{
  scrollbar-width: none !important;          /* Firefox */
}
.pq-shell .pq-sidebar::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
.pq-shell .pq-sidebar::-webkit-scrollbar-thumb{
  background: transparent !important;
}

} /* end desktop sidebar footer */

/* Mobile: sidebar is hidden (admin navigation happens via topbar) */
@media (max-width: 991.98px) {
  .pq-sidebar { display: none !important; }
}


/* Public page: bottom links row (Datenschutz left, Backend right) */
.pq-public-bottomlinks{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pq-public-bottomlinks .pq-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pq-public-bottomlinks .pq-link:hover{
  text-decoration: underline;
}

@media (max-width: 575px){
  .pq-public-bottomlinks{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Backend link on public page: subtle (only this link) */
.pq-link-subtle{
  opacity: 0.55;
  font-size: 0.88rem;
  text-decoration: none;
}
.pq-link-subtle:hover,
.pq-link-subtle:focus{
  opacity: 0.85;
  text-decoration: underline;
}
.pq-link-subtle i{
  opacity: 0.75;
}

/* When no cover is shown: force full width layout */
.pq-public-headrow--nocover{
  grid-template-columns: 1fr !important;
}

/* Also ensure the image column cannot reserve space (safety) */
.pq-public-headrow--nocover .pq-public-headimg{
  display: none !important;
}



/* Make the editable marker NOT affect layout */
.pq-editable {
  position: relative;
  padding-right: 1.1em;            /* reserve space so text never overlaps the icon */
}

.pq-editable::after {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(0.05em);   /* tiny optical alignment */
  pointer-events: none;
  margin-left: 0 !important;       /* ensure older styles don’t reintroduce spacing */
}

/* === HOTFIX: spacing under fixed topbar === */
body{
  padding-top: var(--pq-topbar-height) !important;
}

main.pq-content{
  padding-top: 8px !important;
}


/* === TODAY: single source of truth (full cell, no double tint) === */
body.pq-admin #pq-calendar .fc td.fc-day-today{
  background: rgba(var(--pq-accent-rgb), 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--pq-accent-rgb), 0.18) !important;
}

/* kill inner layers that can add a second tint */
body.pq-admin #pq-calendar .fc td.fc-day-today .fc-daygrid-day-frame,
body.pq-admin #pq-calendar .fc td.fc-day-today .fc-daygrid-day-bg{
  background: transparent !important;
}


/* ============================================================
   QUESTION vs EPISODE VISUAL SYSTEM
   ------------------------------------------------------------
   Ziel:
   - Fragen = weiße Karten + schwarze Links
   - Folgen  = getönte Karten + Linkfarbe "Folgen" (blau)
   - Konsistent über Dashboard / Fragen / Folgen / Planung / Kalender / Modals
   ============================================================ */

:root {
  --pq-question-surface: #ffffff;

  /* Episode surfaces use a warmer sand/champagne tint than question surfaces. */
  --pq-episode-surface: #f3ede2;
  --pq-episode-surface-hover: #ede4d6;
  --pq-episode-border: rgba(130, 95, 70, 0.18);

  --pq-link-question: var(--pq-text);
  --pq-link-episode: var(--pq-text);
}

.pq-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.pq-dashboard-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
}

@media (min-width: 1200px) {
  .pq-dashboard-question-stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pq-dashboard-episode-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pq-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius);
  box-shadow: 0 10px 24px rgba(27, 27, 27, 0.06);
  color: inherit;
  text-decoration: none;
}

.pq-stat-card--question {
  background: var(--pq-question-surface);
}

.pq-stat-card--episode {
  background: var(--pq-episode-surface);
  border-color: var(--pq-episode-border);
}

.pq-stat-card--link {
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.pq-stat-card--link:hover,
.pq-stat-card--link:focus {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(27, 27, 27, 0.08);
}

.pq-stat-card.is-active {
  background: rgba(var(--pq-active-card-rgb), 0.12);
  border-color: var(--pq-active-card);
  box-shadow: 0 0 0 3px rgba(var(--pq-active-card-rgb), 0.22), 0 14px 28px rgba(27, 27, 27, 0.08);
}

.pq-stat-card.is-active .pq-stat-card-label,
.pq-stat-card.is-active .pq-stat-card-value {
  color: var(--pq-active-card-dark);
}

.pq-stat-card.is-active .pq-stat-card-meta {
  color: rgba(var(--pq-active-card-rgb), 0.9);
}

.pq-stat-card-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pq-muted);
}

.pq-stat-card-value {
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
}

.pq-stat-card-meta {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--pq-muted);
}

.pq-card-episode-surface,
.pq-episode-edit-layout .pq-card,
.pq-episodes-panel {
  background: var(--pq-episode-surface) !important;
  border-color: var(--pq-episode-border) !important;
}

.pq-episode-edit-layout .pq-episode-questions-card,
.pq-episode-edit-layout .pq-episode-questions-card .card-header,
.pq-episode-edit-layout .pq-episode-questions-card .card-body {
  background: var(--pq-question-surface) !important;
  border-color: var(--pq-border) !important;
}

.pq-episode-questions-card .pq-qorder {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(27, 27, 27, 0.14) !important;
  box-shadow: 0 1px 2px rgba(27, 27, 27, 0.04) !important;
  color: rgba(27, 27, 27, 0.82) !important;
}

.pq-episode-add-question-box {
  padding: 12px;
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.pq-episode-add-question-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pq-episode-add-question-box .form-select {
  background-color: #ffffff !important;
  min-width: 0;
  padding-right: 2.8rem !important;
  background-position: right 0.9rem center !important;
  background-size: 16px 12px !important;
  border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.pq-add-question-form > .btn {
  border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.pq-planner-backlog-panel,
.pq-planner-backlog-panel .card-header,
.pq-planner-backlog-panel .card-body {
  background: var(--pq-question-surface) !important;
  border-color: var(--pq-border) !important;
}

.pq-planner-question-card {
  background: var(--pq-question-surface) !important;
  border-color: var(--pq-border) !important;
}

.pq-planner-backlog-panel :is(.form-control, .form-select),
.pq-planner-question-card :is(.form-control, .form-select) {
  background: #ffffff !important;
}

.pq-planner-backlog-panel .form-check-input {
  background-color: #ffffff !important;
  border-color: rgba(27, 27, 27, 0.22) !important;
  box-shadow: none !important;
}

.pq-planner-backlog-panel .form-check-input:focus,
.pq-planner-backlog-panel .form-check-input:focus-visible {
  border-color: rgba(var(--pq-brand-rgb), 0.46) !important;
  box-shadow: 0 0 0 0.18rem rgba(var(--pq-brand-rgb), 0.12) !important;
}

.pq-planner-backlog-panel .form-check-input:checked {
  background-color: rgba(var(--pq-brand-rgb), 0.92) !important;
  border-color: rgba(var(--pq-brand-rgb), 0.92) !important;
}

.pq-dashboard-layout > [class*="col-"] > .pq-card > .card-header {
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* Question cards (default) */
.pq-item.pq-item-question,
.pq-item.pq-qcard,
.list-group-item.pq-card-question {
  background: var(--pq-question-surface) !important;
}

/* Keep "new" highlight intact (question cards can still be highlighted). */
.pq-item.pq-item-question.pq-item-new {
  background: var(--pq-question-surface) !important;
}

/* Episode cards */
.pq-item.pq-item-episode,
.pq-item.pq-ep-card,
.pq-card.pq-card-episode,
.pq-fc-event-inner {
  background: var(--pq-episode-surface) !important;
  border-color: var(--pq-episode-border) !important;
}

.pq-item.pq-item-episode,
.pq-card.pq-card-episode {
  position: relative;
  overflow: hidden;
}

.pq-item.pq-item-episode::before,
.pq-card.pq-card-episode::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(33, 37, 41, 0.82);
}

.pq-item.pq-item-episode.pq-episode-kind-bonus,
.pq-card.pq-card-episode.pq-card-episode-bonus {
  background: var(--pq-episode-surface) !important;
  border-color: rgba(var(--pq-bonus-rgb), 0.38) !important;
}

.pq-item.pq-item-episode.pq-episode-kind-bonus::before,
.pq-card.pq-card-episode.pq-card-episode-bonus::before {
  background: rgba(var(--pq-bonus-rgb), 0.82);
}

.pq-transcript-card-row {
  align-items: stretch !important;
}

.pq-item.pq-item-episode.pq-transcript-list-item.pq-episode-kind-bonus::before {
  background: rgba(var(--pq-bonus-rgb), 0.82) !important;
}

.pq-transcript-card-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pq-transcript-card-pills {
  padding-top: 10px;
}

.pq-transcript-card-actions {
  align-self: flex-start;
}

.pq-fc-event-inner:hover {
  background: var(--pq-episode-surface-hover) !important;
}

/* Question links: black */
a.pq-qtitle,
a.pq-qtitle-sm,
a.pq-qid,
a.pq-qid-sm {
  color: var(--pq-link-question) !important;
}

/* Episode links: blue */
a.pq-link-episode {
  color: var(--pq-link-episode) !important;
}

a.pq-link-episode:hover,
a.pq-link-episode:focus {
  color: rgba(27, 27, 27, 0.88) !important;
}

/* Calendar event title: treat as "episode link" color */
.pq-fc-event-title {
  color: var(--pq-link-episode);
}

.pq-pill-episode-kind,
.pq-pill-episode-label {
  font-weight: 700;
}

.pq-pill-episode-kind-regular {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.82);
}

.pq-pill-episode-kind-bonus {
  background: rgba(var(--pq-bonus-rgb), 0.10);
  border-color: rgba(var(--pq-bonus-rgb), 0.24);
  color: var(--pq-bonus-dark);
}

.pq-pill-episode-label {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(27, 27, 27, 0.14);
  color: var(--pq-text);
}

.pq-planner-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(var(--pq-brand-rgb), 0.10), rgba(var(--pq-accent-rgb), 0.06)),
    rgba(255, 255, 255, 0.72);
  text-align: left;
}

.pq-planner-empty-state .pq-empty-icon {
  margin-bottom: 0;
}


/* ============================================================
   GLOBAL "PILLS" TOGGLE
   ------------------------------------------------------------
   Adds a user-controlled compact mode (via the topbar button).
   ============================================================ */

html.pq-hide-pills .pq-qmeta,
html.pq-hide-pills .pq-pill,
html.pq-hide-pills .pq-fc-pill {
  display: none !important;
}


/* ============================================================
   TEAM RATINGS TOGGLE
   ------------------------------------------------------------
   - Default: HIDE ratings of others + the aggregated team rating.
   - Enabled via the small team icon button (stored in localStorage).
   ============================================================ */

html.pq-hide-team-ratings .pq-pill-priority.pq-prio-team,
html.pq-hide-team-ratings .pq-pill-priority.pq-prio-other {
  display: none !important;
}


/* ============================================================
   MODALS + FIXED TOPBAR
   ------------------------------------------------------------
   When the topbar is fixed (mobile + desktop), Bootstrap modals
   can appear "under" the bar. We add a top padding equal to the
   topbar height (plus safe-area) so dialogs are always visible.
   ============================================================ */

.modal {
  /* --pq-topbar-height already accounts for safe-area insets on iOS (when supported). */
  padding-top: calc(var(--pq-topbar-height) + 12px) !important;
}

button[data-pq-team-ratings-toggle="1"].active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;

  box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .18);
}

button[data-pq-team-ratings-toggle="1"].active:hover {
box-shadow: 0 5px 5px rgba(27, 27, 27, 0.10);
}

.input-group > .btn[data-pq-team-ratings-toggle="1"] {
  margin-left: 0 !important;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(27, 27, 27, 0.82);
  border-color: #dfdfdf !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  box-shadow: none !important;
}

.input-group > .btn[data-pq-team-ratings-toggle="1"]:not(.active):hover,
.input-group > .btn[data-pq-team-ratings-toggle="1"]:not(.active):focus,
.input-group > .btn[data-pq-team-ratings-toggle="1"]:not(.active):focus-visible {
  background: rgba(var(--pq-brand-rgb), 0.12);
  color: var(--pq-brand-dark);
  border-color: rgba(var(--pq-brand-rgb), 0.42) !important;
  box-shadow: none !important;
}

.input-group > .btn[data-pq-team-ratings-toggle="1"]:hover,
.input-group > .btn[data-pq-team-ratings-toggle="1"]:focus,
.input-group > .btn[data-pq-team-ratings-toggle="1"]:focus-visible,
.input-group > .btn[data-pq-team-ratings-toggle="1"].active,
.input-group > .btn[data-pq-team-ratings-toggle="1"].active:hover {
  box-shadow: none !important;
}


/* IMPORTANT: allow the episodes panel to grow when cards expand */
.pq-episodes-panel .card-body{
  overflow: visible !important;
}

.pq-episodes-panel .pq-planner-episodes-scroll{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

@media (min-width: 992px) {
  .pq-planner-episodes-col .pq-episodes-panel {
    position: sticky;
    top: calc(var(--pq-topbar-height, 72px) + 18px);
  }

  .pq-planner-episodes-col .pq-episodes-panel .card-body {
    overflow: hidden !important;
  }

  .pq-planner-episodes-col .pq-planner-episodes-scroll {
    max-height: calc(100vh - var(--pq-topbar-height, 72px) - 170px) !important;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }

  .pq-dashboard-sidebar-col .pq-dashboard-sidebar-card {
    position: sticky;
    top: calc(var(--pq-topbar-height, 72px) + 18px);
  }

  .pq-dashboard-sidebar-col .pq-dashboard-sidebar-card .card-body {
    overflow: hidden;
  }

.pq-dashboard-sidebar-col .pq-dashboard-episodes-list {
    max-height: calc(100vh - var(--pq-topbar-height, 72px) - 230px);
/*    overflow: auto !important;
    padding-right: 4px;
    scrollbar-gutter: stable; */
  }

  .pq-dashboard-sidebar-card .pq-qid-inline,
  .pq-dashboard-sidebar-card .pq-ep-title,
  .pq-dashboard-sidebar-card a.pq-link-episode,
  .pq-dashboard-sidebar-card a.pq-link-episode:hover,
  .pq-dashboard-sidebar-card a.pq-link-episode:focus {
    color: var(--pq-text) !important;
    -webkit-text-fill-color: var(--pq-text) !important;
  }

  .pq-questions-filter-card {
    position: sticky;
    top: calc(var(--pq-topbar-height, 72px) + 8px);
    z-index: 1020;
  }
}

body.pq-admin #pq-calendar .pq-fc-status-planned   .pq-fc-event-inner { border-left-color: rgba(var(--bs-primary-rgb), 0.85) !important; }
body.pq-admin #pq-calendar .pq-fc-status-recorded  .pq-fc-event-inner { border-left-color: rgba(255, 193, 7, 0.85) !important; }
body.pq-admin #pq-calendar .pq-fc-status-published .pq-fc-event-inner { border-left-color: rgba(25, 135, 84, 0.80) !important; }
body.pq-admin #pq-calendar .pq-fc-status-cancelled .pq-fc-event-inner { border-left-color: rgba(33, 37, 41, 0.70) !important; opacity: 0.85; }

/* Calendar episode cards: border color per status (keep left stripe too) */
body.pq-admin #pq-calendar .pq-fc-status-planned .pq-fc-event-inner{
  border-color: rgba(var(--bs-primary-rgb), 0.28) !important;
  border-left-color: rgba(var(--bs-primary-rgb), 0.85) !important;
}

body.pq-admin #pq-calendar .pq-fc-status-recorded .pq-fc-event-inner{
  border-color: rgba(255, 193, 7, 0.30) !important;
  border-left-color: rgba(255, 193, 7, 0.85) !important;
}

body.pq-admin #pq-calendar .pq-fc-status-published .pq-fc-event-inner{
  border-color: rgba(25, 135, 84, 0.28) !important;
  border-left-color: rgba(25, 135, 84, 0.80) !important;
}

body.pq-admin #pq-calendar .pq-fc-status-cancelled .pq-fc-event-inner{
  border-color: rgba(33, 37, 41, 0.28) !important;
  border-left-color: rgba(33, 37, 41, 0.70) !important;
  opacity: 0.85;
}

body.pq-admin #pq-calendar .pq-fc-status-planned .pq-fc-event-inner:hover{
  border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
}
body.pq-admin #pq-calendar .pq-fc-status-recorded .pq-fc-event-inner:hover{
  border-color: rgba(255, 193, 7, 0.50) !important;
}
body.pq-admin #pq-calendar .pq-fc-status-published .pq-fc-event-inner:hover{
  border-color: rgba(25, 135, 84, 0.45) !important;
}
body.pq-admin #pq-calendar .pq-fc-status-cancelled .pq-fc-event-inner:hover{
  border-color: rgba(33, 37, 41, 0.45) !important;
}


/* Mobile only: hide Details while the burger menu is opening/closing and when open */
@media (max-width: 991.98px) {
  .pq-topbar .navbar-collapse.collapsing .pq-details-toggle-item,
  .pq-topbar .navbar-collapse.show       .pq-details-toggle-item {
    display: none !important;
  }
}

/* Info Tags toggle: make state obvious */
/* Info Tags toggle: make state obvious */
#pqPillsToggle{
  position: relative;
  border-width: 2px;
  font-weight: 600;

  height: calc(1.5em + .4rem);
  display: inline-flex;
  align-items: center;

  margin-top: 2px; /* push down a bit */
  padding-right: 1rem;
}

/* Default state = pills visible (button looks "active") */
html:not(.pq-hide-pills) #pqPillsToggle{
  background: rgba(13,110,253,.12);      /* bootstrap primary-ish */
  border-color: rgba(13,110,253,.45);
  color: #0b5ed7;
  box-shadow: 0 0 0 .22rem rgba(13,110,253,.12);
}

/* Add an ON badge */
html:not(.pq-hide-pills) #pqPillsToggle::after{
  content: "An";
  position: absolute;
  top: -7px;
  right: -12px; /* pushed further right */
  font-size: 8px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  letter-spacing: .4px;
}

/* Hidden state = pills hidden (button looks inactive / warning) */
html.pq-hide-pills #pqPillsToggle{
  background: rgba(108,117,125,.08);     /* bootstrap secondary-ish */
  border-color: rgba(108,117,125,.35);
  color: #495057;
  box-shadow: none;
}

/* Add an OFF badge */
html.pq-hide-pills #pqPillsToggle::after{
  content: "Aus";
  position: absolute;
  top: -7px;
  right: -12px; /* pushed further right */
  font-size: 8px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: #6c757d;
  color: #fff;
  letter-spacing: .4px;
}

/* Optional: make it feel "pressed" while active */
html:not(.pq-hide-pills) #pqPillsToggle:active{
  transform: translateY(1px);
}

html:not(.pq-hide-pills) .pq-pill{
  box-shadow: 0 0 0 .12rem rgba(13,110,253,.08);
}

/* Allow the title to shrink inside the flex row (required for clamping) */
.pq-qheadline .pq-qtitle{
  flex: 1 1 auto;
  min-width: 0;        /* THIS is the key */
}

/* Keep the ID from stealing layout; it can stay nowrap, but must not grow */
.pq-qheadline .pq-qid-inline{
  flex: 0 0 auto;
}

.pq-qheadline .pq-qtitle{
  overflow-wrap: anywhere;
  word-break: break-word;
}


.pq-ep-title-colored{
  color: var(--pq-text) !important;
    font-weight: 600;
}

.pq-ep-title-colored{
  color: var(--pq-text) !important;
  -webkit-text-fill-color: var(--pq-text) !important; /* <-- key */
  font-weight: 600 !important;
}

.pq-item.pq-item-episode .pq-qid-inline,
.pq-card.pq-card-episode .pq-qid-inline,
.pq-episode-edit-hero .pq-qid-inline {
  color: rgba(27, 27, 27, 0.88);
}

/* Date pills reuse the same palette as episode statuses */
.pq-pill-date { font-weight: 500; } /* optional */

.pq-pill-date-planned{
  background: rgba(var(--pq-brand-rgb), 0.14);
  border-color: rgba(var(--pq-brand-rgb), 0.42);
  color: rgba(27, 27, 27, 0.95);
}

.pq-pill-date-recorded{
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.42);
  color: rgba(27, 27, 27, 0.95);
}

.pq-pill-date-published{
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.36);
  color: rgba(25, 135, 84, 0.95);
}


/* Calendar legend buttons should follow Bootstrap button styling */
.pq-legend-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pq-legend-toggle.is-off{
  opacity: 0.5;
}

/* Farben: Termin-Art (geplant/aufgenommen/veröffentlicht) via linke Kante */
.pq-fc-type-planned .pq-fc-event-inner { border-left: 5px solid rgba(var(--bs-primary-rgb), 0.85); }
.pq-fc-type-recorded .pq-fc-event-inner { border-left: 5px solid rgba(255, 193, 7, 0.85); }
.pq-fc-type-published .pq-fc-event-inner { border-left: 5px solid rgba(25, 135, 84, 0.80); }

/* Status-Icon in Event (und auch im Dot-Modus) */
.pq-fc-status-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}
.pq-fc-dot-wrap .pq-fc-type-icons { margin-left: 4px; display: inline-flex; gap: 4px; }
.pq-fc-dot-wrap .pq-fc-type-icon { font-size: 12px; }

.pq-fc-event-top .pq-fc-type-icons { display: inline-flex; gap: 8px; margin-left: 6px; margin-right: 6px; }
.pq-fc-event-top .pq-fc-type-icon { font-size: 14px; }

/* Typ-Pill (klein) */
.pq-fc-type-pill { text-transform: none; }

/* Calendar (small screens): compact dot indicator instead of full event card content */
.pq-fc-dot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}

.pq-fc-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--pq-border);
  background: rgba(var(--bs-primary-rgb), 0.85);
}

.pq-fc-type-recorded .pq-fc-dot { background: rgba(255, 193, 7, 0.85); }
.pq-fc-type-published .pq-fc-dot { background: rgba(25, 135, 84, 0.80); }
.pq-fc-status-cancelled .pq-fc-dot { background: rgba(33, 37, 41, 0.70); }

.pq-title {
  letter-spacing: -0.02em;
}

/* Make default bootstrap cards match */
.card {
  border-radius: var(--pq-radius);
}

.table {
  background: var(--pq-surface);
}

/* Small utility */
.pq-muted {
  color: var(--pq-muted) !important;
}

.pq-badge {
  border: 1px solid var(--pq-border);
  border-radius: 5px;
  padding: 5px 8px;
  font-weight: 500;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.6);
}

.pq-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

/* Pills (Status, Tags, Source) */
.pq-pill {
  border: 1px solid var(--pq-border);
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  line-height: 1;
}

.pq-pill-status {
  font-weight: 500;
}

.pq-pill-open {
  background: rgba(108, 117, 125, 0.12);
  border-color: rgba(108, 117, 125, 0.35);
  color: rgba(33, 37, 41, 0.95);
}

.pq-pill-scheduled {
  background: rgba(var(--pq-brand-rgb), 0.14);
  border-color: rgba(var(--pq-brand-rgb), 0.42);
  color: rgba(27, 27, 27, 0.95);
}

.pq-pill-answered {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.36);
  color: rgba(25, 135, 84, 0.95);
}

.pq-pill-archived {
  background: rgba(33, 37, 41, 0.10);
  border-color: rgba(33, 37, 41, 0.28);
  color: rgba(33, 37, 41, 0.95);
}

/* Episode status pills */
.pq-pill-ep-planned {
  background: rgba(var(--pq-brand-rgb), 0.14);
  border-color: rgba(var(--pq-brand-rgb), 0.42);
  color: rgba(27, 27, 27, 0.95);
}

.pq-pill-ep-recorded {
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.42);
  color: rgba(27, 27, 27, 0.95);
}

.pq-pill-ep-published {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.36);
  color: rgba(25, 135, 84, 0.95);
}

.pq-pill-ep-cancelled {
  background: rgba(33, 37, 41, 0.10);
  border-color: rgba(33, 37, 41, 0.28);
  color: rgba(33, 37, 41, 0.95);
}

.pq-pill-new {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.36);
  color: rgba(25, 135, 84, 0.95);
  font-weight: 700;
}

.pq-pill-tag { /* legacy alias for priority */
  background: rgba(var(--pq-accent-rgb), 0.12);
  border-color: rgba(var(--pq-accent-rgb), 0.40);
}

.pq-pill-priority {
  /* Base style (individual prio colors are applied via .pq-prio-* classes) */
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(27, 27, 27, 0.20);
  color: rgba(27, 27, 27, 0.92);
  font-weight: 700;
}

/* Priority color scheme (TOP → DEFINITIV NICHT) */
.pq-pill-priority.pq-prio-top {
  background: rgba(var(--pq-accent-rgb), 0.16);
  border-color: rgba(var(--pq-accent-rgb), 0.55);
  color: var(--pq-accent-dark);
}

.pq-pill-priority.pq-prio-spannend {
  background: rgba(var(--pq-brand-rgb), 0.16);
  border-color: rgba(var(--pq-brand-rgb), 0.55);
  color: var(--pq-brand-dark);
}

.pq-pill-priority.pq-prio-gut {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.42);
  color: rgba(25, 135, 84, 0.95);
}

.pq-pill-priority.pq-prio-normal {
  background: rgba(108, 117, 125, 0.12);
  border-color: rgba(108, 117, 125, 0.35);
  color: rgba(33, 37, 41, 0.92);
  font-weight: 600;
}

.pq-pill-priority.pq-prio-eher-nicht {
  background: rgba(255, 193, 7, 0.18);
  border-color: rgba(255, 193, 7, 0.55);
  color: rgba(27, 27, 27, 0.92);
}

.pq-pill-priority.pq-prio-definitiv-nicht {
  background: rgba(33, 37, 41, 0.10);
  border-color: rgba(33, 37, 41, 0.35);
  color: rgba(33, 37, 41, 0.95);
}

/* Distinguish own vs other user ratings */
.pq-pill-priority.pq-prio-own {
  box-shadow: 0 0 0 3px rgba(var(--pq-brand-rgb), 0.18);
}

.pq-pill-priority.pq-prio-other {
  border-style: dashed;
  opacity: 0.96;
}

.pq-pill-priority .pq-prio-user {
  font-weight: 700;
}

.pq-pill-priority .pq-prio-sep {
  opacity: 0.65;
  margin: 0 2px;
}

.pq-pill-source {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(var(--pq-brand-rgb), 0.55);
  color: var(--pq-brand-dark);
  font-weight: 700;
}
/* nicer focus */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22);
}

/* Buttons: keep small buttons from breaking */
.btn.btn-sm {
  white-space: nowrap;
}

/* Empty state */
.pq-empty {
  border: 1px dashed var(--pq-border);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.pq-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  color: var(--pq-muted);
  font-size: 22px;
}

/* Episode view: geplante Fragen als "Karten" in einer List-Group */
#pq-episode-sortable.list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kalender: Backlog Panel & Modal-Listen */
.pq-calendar-backlog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  min-height: 220px;
  max-height: 520px;
  padding: 8px;
  scrollbar-gutter: stable;
}

@media (min-width: 992px) {
  #pq-calendar-backlog-card .pq-calendar-backlog-list {
    max-height: calc(100vh - 300px);
  }
}

.pq-calendar-backlog-list .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

.pq-calendar-backlog-list .list-group-item + .list-group-item {
  margin-top: 0;
}

.pq-qtext {
  font-size: 12px;
  line-height: 1.25;
}

.pq-selected {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.25);
  background: rgba(var(--bs-primary-rgb), 0.06);
}

.pq-modal-card .list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pq-modal-card .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

#pq-episode-sortable.list-group .list-group-item {
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
    min-height: 130px;
    
}

.pq-episode-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Public landing */
.pq-hero {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--pq-border);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--pq-shadow);
}

.pq-hero h1 {
  letter-spacing: -0.03em;
}

/* ============================================================
   PUBLIC PAGE (Frage einreichen) – Intro + Cover + Form
   ============================================================ */

.pq-public-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.pq-public-hero .card-body {
  padding: 20px;
}

/* Headline links, Cover rechts (auf Mobile stapeln) */
.pq-public-headrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.pq-public-headimg {
  display: flex;
  justify-content: center;
}

.pq-cover-img.pq-cover-img-head {
  max-width: 360px;
}

/* Fallback, falls das Cover ausgeblendet wird (PUBLIC_SHOW_PODCAST_COVER=0) */
.pq-cover-fallback {
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  box-shadow: var(--pq-shadow);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  text-align: center;
}

.pq-cover-fallback-title {
  font-family: var(--pq-font-humane);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.95;
  font-size: clamp(28px, 3.2vw, 44px);
}

.pq-cover-fallback-sub {
  margin-top: 10px;
  font-family: var(--pq-font-body);
  opacity: 0.72;
}

@media (min-width: 992px) {
  .pq-public-headrow {
    grid-template-columns: 1fr 360px;
    gap: 18px;
  }

  .pq-public-headimg {
    justify-content: flex-end;
  }
}

/*
  Public Seite: Headline oben volle Breite,
  darunter Cover + Text (auf Mobile: Cover zuerst, damit es direkt unter der Headline sitzt).
*/
.pq-public-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cover"
    "copy";
  gap: 18px;
  align-items: start;
}

.pq-public-hero-cover {
  grid-area: cover;
}

.pq-public-hero-copy {
  grid-area: copy;
}

@media (min-width: 992px) {
  .pq-public-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "copy cover";
  }
}

.pq-public-kicker {
  font-family: var(--pq-font-humane);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  color: rgba(27, 27, 27, 0.68);
}

.pq-public-headline {
  font-family: var(--pq-font-humane);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.92;
  font-size: clamp(38px, 5.8vw, 70px);
  margin: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.pq-public-lead {
  font-size: 1.15rem;
}

.pq-public-lead p {
  margin-bottom: 12px;
}

/* Textarea helper row: limit + counter */
.pq-form-subrow {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pq-public-question {
  scroll-margin-top: 96px; /* sticky header offset (mobile scroll/focus) */
}

.pq-public-cta {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .pq-public-cta {
    grid-template-columns: 1fr 1fr;
  }
}

.pq-public-cta-link {
  color: inherit;
  text-decoration: none;
}

.pq-public-cta-link:hover {
  border-color: rgba(27, 27, 27, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

.pq-public-cta-link .pq-link {
  text-decoration: underline;
}

.pq-public-cta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.pq-public-cta-disabled {
  opacity: 0.65;
}

/* Datenschutz (Details/Accordion) */
.pq-public-privacy {
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
}

.pq-public-privacy summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pq-public-privacy summary::-webkit-details-marker {
  display: none;
}

.pq-public-privacy-body {
  padding-top: 10px;
}

.pq-public-adminlink {
  display: flex;
  justify-content: flex-end;
}

.pq-public-cta-item i {
  color: var(--pq-accent);
  font-size: 18px;
  margin-top: 1px;
}

/* Spotify Icon in Grün */
.pq-public-cta-item i.pq-icon-spotify {
  color: #1DB954;
}

/* Apple: dark (logo is monochrome) */
.pq-public-cta-item i.pq-icon-apple {
  color: #111;
}

/* Amazon: brand orange */
.pq-public-cta-item i.pq-icon-amazon {
  color: #FF9900;
}

.pq-public-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pq-public-hero-cover {
  display: flex;
  justify-content: center;
}

.pq-cover-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  box-shadow: var(--pq-shadow);
  background: #fff;
}

@media (max-width: 575px) {
  .pq-public-hero .card-body {
    padding: 16px;
  }
  .pq-public-headline {
    font-size: clamp(34px, 10vw, 56px);
  }
  .pq-public-lead {
    font-size: 1rem;
  }
}


/* Kalender: Fragen im Backlog kompakter darstellen (eine Zeile + Tooltip) */
.pq-calendar-backlog-list .pq-qtext {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Input-Groups: nie umbrechen (Dropdown + Pfeil, Suche + Buttons) */
.pq-inputgroup-nowrap {
  flex-wrap: nowrap !important;
}

.pq-inputgroup-nowrap .form-control,
.pq-inputgroup-nowrap .form-select {
  min-width: 0;
}

.pq-inputgroup-nowrap .btn {
  white-space: nowrap;
}

/* Fragenliste: Einplanen-Dropdown kompakter */
.pq-schedule-compact {
  width: 240px;
  max-width: 100%;
    padding-left: 1px;
}

/* Planner: Einplanen-Dropdown etwas schmaler */
.pq-schedule-compact-sm {
  width: 170px;
  max-width: 100%;
}

/* Planner (mobile): schedule dropdown should stay compact and allow a drag-handle next to it */
.pq-schedule-inline {
  flex: 0 1 auto;
  min-width: 0;
}

.pq-inline-actions {
  max-width: 100%;
}

@media (max-width: 575px) {
  .pq-schedule-compact {
    width: 100%;
  }
}

/* Planung: zwei Scroll-Container auf Desktop, plus etwas Innenabstand */
@media (min-width: 992px) {

  .pq-planner-episodes-scroll {
    /* Keep the episode column scrollable on desktop so content fits into
       typical 1920×1080 screens without forcing the whole page to scroll. */
    max-height: calc(100vh - 340px);
   /* overflow: auto;
    padding: 8px; */
    scrollbar-gutter: stable;
  }
}

/* Planung: Episoden-Fragen einklappen */
.pq-collapse-hint {
  display: none; /* wird bei "eingeklappt" per JS/CSS sichtbar */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.22);
  background: rgba(255, 255, 255, 0.7);
  color: var(--pq-muted);
  cursor: pointer;
  user-select: none;
}

.pq-list-episode.pq-episode-collapsed .pq-item.pq-draggable-item {
  display: none;
}

.pq-list-episode.pq-episode-collapsed .pq-collapse-hint {
  display: flex;
}

/* Sticky "Right menu" / Side-Column auf Edit-Seiten */
@media (min-width: 992px) {
  .pq-sticky-sidebar {
    position: sticky;
      top: 0px; /*unterhalb der sticky Topbar */
    align-self: flex-start;
    max-height: calc(100vh - 104px);
 /*   overflow: auto; */
    scrollbar-gutter: stable;
  }

  /* Auf der Folgen-Seite: lange Fragenliste lieber im Card-Body scrollen */
  .pq-card-body-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }
}

/* Weniger Bewegung, wenn Nutzer das bevorzugt (reduziert "Jitter"/"Jumps") */
@media (prefers-reduced-motion: reduce) {
  .pq-fc-event-inner {
    transition: none !important;
  }
  .pq-fc-event-inner:hover {
    transform: none !important;
  }
}


/* ============================================================
   STYLEGUIDE TYPOGRAPHY
   ============================================================ */

.pq-brand,
.navbar-brand {
  /* Kundenvorgabe: vorerst überall (außer große Überschrift) die Text-Schrift nutzen */
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

h1, h2, h3 {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.pq-title {
  font-family: var(--pq-font-humane);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.95;
}

/* Public Hero */
.pq-hero .pq-title {
  font-size: clamp(2.6rem, 4.8vw, 4.8rem);
}

.pq-hero p,
.pq-muted,
.small {
  font-family: var(--pq-font-body);
}

/* Buttons / Pills: Text-Schrift, nicht fett */
.btn,
.pq-pill,
.pq-badge,
.badge {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.btn {
  border-radius: 999px;
}

/* Brand dot in Orange */
.pq-dot {
  background: var(--pq-accent);
  box-shadow: 0 0 0 6px rgba(var(--pq-accent-rgb), 0.18);
}

/* Links */
a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============================================================
   COLOR + SURFACES
   ============================================================ */

.pq-card,
.card {
  border-radius: var(--pq-radius);
}

.card {
  border-color: rgba(27, 27, 27, 0.12);
  box-shadow: 0 10px 32px rgba(27, 27, 27, 0.10);
}

/* Primary buttons in Azurblau */
.btn-primary,
.btn-outline-primary:hover {
  background-color: var(--pq-brand) !important;
  border-color: var(--pq-brand) !important;
}

/* Accent button helper (Orange) */
.btn-pq-accent {
  background: var(--pq-accent);
  border-color: var(--pq-accent);
  color: #fff;
}
.btn-pq-accent:hover {
  background: var(--pq-accent-dark);
  border-color: var(--pq-accent-dark);
  color: #fff;
}

/* Outline-primary */
.btn-outline-primary {
  border-color: rgba(var(--pq-brand-rgb), 0.85) !important;
  color: var(--pq-text) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
}

/* ============================================================
   LIST GROUPS (Padding / Spacing Fixes)
   ============================================================ */

/* Globaler Innenabstand für List-Groups (macht Listen in Cards luftiger) */
.list-group {
  padding: 10px;
}

/* Sidebar: eigener Innenabstand */
.pq-sidebar .list-group {
  padding: 10px;
}

.pq-sidebar .list-group-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 27, 27, 0.10);
}

.pq-sidebar .list-group-item.active {
  background: rgba(var(--pq-brand-rgb), 0.22);
  border-color: rgba(var(--pq-brand-rgb), 0.35);
}

/* Backlog-Listen in Cards: mehr Luft + visuell wie "Cards" */
.pq-calendar-backlog-list .list-group-item,
.pq-planner-backlog .list-group-item,
.pq-episode-questions .list-group-item {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 10px;
}

/* ============================================================
   INPUT GROUP ALIGNMENT (Suchfeld + X Button)
   (nicht global, damit "Einplanen" Dropdowns kompakt bleiben)
   ============================================================ */

.pq-search-inputgroup .form-control,
.pq-search-inputgroup .form-select,
.pq-search-inputgroup .btn {
  min-height: 42px;
}

.pq-search-inputgroup .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FULLCALENDAR (Look & Feel)
   ============================================================ */

#pq-calendar .fc-toolbar {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(27, 27, 27, 0.12);
  border-radius: 18px;
}

#pq-calendar .fc .fc-button {
  font-family: var(--pq-font-body);
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 999px;
}

.pq-fc-event-inner {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(var(--pq-brand-rgb), 0.30);
  box-shadow: 0 10px 28px rgba(27, 27, 27, 0.12);
}

.pq-fc-pill {
  border-color: rgba(var(--pq-brand-rgb), 0.30);
  background: rgba(var(--pq-brand-rgb), 0.14);
}

.pq-legend-planned { background: rgba(var(--pq-brand-rgb), 0.85); }


/* ============================================================
   CONTAINER PADDING (Cards nicht "am Rand kleben")
   ============================================================ */

.pq-content {
  padding: 12px 20px 20px;
}

body.pq-episode-edit-page main.pq-content {
  padding-bottom: 12px;
}

@media (min-width: 992px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}



/* ============================================================
   WIZARD (Kurzanleitung)
   ============================================================ */

.pq-wizard-body p,
.pq-wizard-body li {
  font-size: 1.02rem;
  line-height: 1.45;
}

.pq-wizard-highlight {
  position: relative;
  outline: 3px solid rgba(var(--pq-accent-rgb), 0.85);
  outline-offset: 4px;
  border-radius: 14px;
  box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10);
  animation: pqPulse 1.35s ease-in-out infinite;
}

@keyframes pqPulse {
  0% { box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10); }
  50% { box-shadow: 0 0 0 12px rgba(var(--pq-accent-rgb), 0.18); }
  100% { box-shadow: 0 0 0 8px rgba(var(--pq-accent-rgb), 0.10); }
}


/* ============================================================
   ADMIN UI – READABILITY / DATA DENSITY
   ------------------------------------------------------------
   - Color scheme stays as defined in :root
   - Only applies to admin pages (body.pq-admin)
   - Public submission page stays unchanged
   ============================================================ */

body.pq-admin {
  --pq-admin-font: "Work Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --pq-admin-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-family: var(--pq-admin-font);
  font-size: 15px;
  line-height: 1.45;
}

/* Make headings look like a classic admin UI (no display-font + no forced uppercase) */
body.pq-admin h1,
body.pq-admin h2,
body.pq-admin h3,
body.pq-admin .pq-title {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2;
  font-weight: 700;
}

body.pq-admin h1,
body.pq-admin .pq-title {
  font-size: 1.85rem;
}

body.pq-admin h2 { font-size: 1.35rem; }
body.pq-admin h3 { font-size: 1.12rem; }

/* Brand / navbar */
body.pq-admin .pq-brand,
body.pq-admin .navbar-brand {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 700;
}

/* Buttons + badges: keep colors, remove heavy uppercase for readability */
body.pq-admin .btn,
body.pq-admin .badge,
body.pq-admin .pq-pill,
body.pq-admin .pq-badge {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;



    
}

/* Meta text: slightly smaller, but still readable */
body.pq-admin .pq-muted {
  font-size: 0.92rem;
}

body.pq-admin .pq-meta {
  font-size: 0.7rem; 
/*    padding-left: 5px; */
    margin-top: 2px;
    margin-bottom: 5px;
}

/* Forms */
body.pq-admin .form-label {
  font-size: 0.92rem;
  font-weight: 600;
}

body.pq-admin .form-control,
body.pq-admin .form-select {
  font-size: 0.8rem;
}

/* Dropdowns etwas kleiner (besser für dichte Listen) */
body.pq-admin select.form-select {
  font-size: 0.8rem;
}

body.pq-admin select.form-select.form-select-sm {
  font-size: 0.8rem;
  height: 31px;
}

/* Make list items slightly more compact for data-heavy lists */
body.pq-admin .pq-item {
  padding: 10px 12px;
}

body.pq-admin .pq-card .card-body {
  padding: 16px;
}

body.pq-admin .pq-card .card-header {
  padding: 12px 16px;
}

/* FullCalendar title: use readable font too */
body.pq-admin #pq-calendar .fc-toolbar-title {
  font-family: var(--pq-admin-font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}



/* Keyword highlighting (Admin search) */
.pq-mark {
  padding: 0 0.14em;
  border-radius: 0.25em;
  background: rgba(var(--pq-accent-rgb), 0.18);
  color: inherit;
}

/* Edit hint: replace separate "Bearbeiten" buttons with a subtle hover icon */
body.pq-admin a.pq-editable:hover::after,
body.pq-admin a.pq-editable:focus-visible::after {
  content: "\202F✎"; /* narrow no-break space + icon */
  margin-left: 0.35rem;
  font-size: 0.9em;
  opacity: 0.65;
}

/* Modal title link should look like a title (not a blue link) */
.pq-modal-title-link {
  color: inherit;
  text-decoration: none;
}
.pq-modal-title-link:hover,
.pq-modal-title-link:focus-visible {
  text-decoration: underline;
}


/* Filter action buttons */
.pq-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pq-filter-actions .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Kleiner Reset-Button ("x") soll nicht auf volle Breite wachsen */
.pq-btn-icon {
  width: 40px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}


/* Episode modal: a bit wider on large screens */
#pqEpisodeModal .modal-dialog {
  max-width: min(1600px, calc(100vw - 2rem));
    max-height: 80vh;
}


/* ============================================================
   Calendar: modern day grid / spacing
   (Overrides – keep near the end so it wins)
   ============================================================ */

body.pq-admin #pq-calendar .fc {
  --fc-border-color: rgba(27, 27, 27, 0.08);
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.55);
  /* Avoid "double tinted" today highlight: we style today via the frame below. */
  --fc-today-bg-color: transparent;
}

/* Ensure FullCalendar's built-in "today" background layer is fully disabled */
/*
body.pq-admin #pq-calendar .fc-day-today {
  background: transparent !important;
}*/

/*

body.pq-admin #pq-calendar .fc-day-today .fc-daygrid-day-bg {
  background: transparent !important;
}
*/
body.pq-admin #pq-calendar .fc-scrollgrid {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(27, 27, 27, 0.10);
  background: rgba(255, 255, 255, 0.55);
}

body.pq-admin #pq-calendar .fc-daygrid-day-frame {
  padding: 6px;
}

body.pq-admin #pq-calendar .fc-daygrid-day-number {
  font-weight: 700;
  font-size: 12px;
  color: rgba(27, 27, 27, 0.72);
}

/*
body.pq-admin #pq-calendar .fc-day-today .fc-daygrid-day-frame {

  background: rgba(var(--pq-accent-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--pq-accent-rgb), 0.18);
}
*/
body.pq-admin #pq-calendar .fc-day-other .fc-daygrid-day-number {
  opacity: 0.35;
}

body.pq-admin #pq-calendar .fc-col-header-cell {
  background: rgba(255, 255, 255, 0.45);
}

body.pq-admin #pq-calendar .fc-col-header-cell-cushion {
  padding: 10px 0;
  font-weight: 700;
  font-size: 12px;
  color: rgba(27, 27, 27, 0.70);
}

body.pq-admin #pq-calendar .fc-daygrid-event-harness {
  margin-top: 6px;
}

body.pq-admin #pq-calendar .fc-daygrid-event {
  margin: 2px 4px;
}

body.pq-admin #pq-calendar .fc-popover {
  border-radius: 14px;
  border-color: rgba(27, 27, 27, 0.14);
  overflow: hidden;
}

body.pq-admin #pq-calendar .fc-popover-header {
  background: rgba(255, 255, 255, 0.85);
}



/* 1) Kill the big card feel */
.fc .pq-fc-event {
  border-radius: 8px !important;
  padding: 4px 6px !important: /* tighter */
  box-shadow: none !important;
}

/* 2) FullCalendar dayGrid block-events are tall by default; force compact */
.fc .fc-daygrid-event {
  margin-top: 2px !important;
}

.fc .fc-daygrid-block-event .fc-event-main {
  padding: 0 !important; /* remove FC internal padding */
}

/* 3) Make inner layout tight */
.pq-fc-event-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 2px;
  align-items: center;
}

/* Row 1: Nr + icons + count */
.pq-fc-event-top { 
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Ensure Nr doesn't wrap and stays small */
.pq-fc-pill {
  white-space: nowrap;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.1;
}

/* Icons tight */
.pq-fc-status-icons, .pq-fc-status-icon {
  display: inline-flex;
  gap: 4px;
}
.pq-fc-status-icon {
  font-size: 14px;
  line-height: 1;
}

/* Count right-aligned, smaller */
.pq-fc-count {
  margin-left: auto;
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}

/* Row 2: Title uses the space */
.pq-fc-event-title {
  grid-column: 1 / 4;
  line-height: 1.1;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Calendar density override (paste at END) ===== */
body.pq-admin #pq-calendar .fc .fc-daygrid-event-harness{
  margin-top: 2px !important;
}

body.pq-admin #pq-calendar .fc .fc-daygrid-event{
  margin: 1px 2px !important;
}

/* remove FC internal padding on block events */
body.pq-admin #pq-calendar .fc .fc-daygrid-block-event .fc-event-main{
  padding: 0 !important;
}

/* tighten YOUR event card */
body.pq-admin #pq-calendar .pq-fc-event-inner{
  padding: 4px 6px !important;     /* was 9px 10px */
  border-radius: 10px !important;  /* was 14px */
  box-shadow: none !important;     /* remove height-feel */
}

/* remove your vertical gaps inside the card */
body.pq-admin #pq-calendar .pq-fc-event-top{
  margin-bottom: 2px !important;   /* was 6px */
  gap: 6px !important;
}

body.pq-admin #pq-calendar .pq-fc-count-line{
  margin-bottom: 2px !important;   /* was 6px */
}

/* keep the "Nr." pill compact */
body.pq-admin #pq-calendar .pq-fc-pill{
  padding: 1px 6px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* title: slightly smaller + tight line-height */
body.pq-admin #pq-calendar .pq-fc-event-title{
  font-size: 12px !important;
  line-height: 1.15 !important;
  -webkit-line-clamp: 3;
}


/* ------------------------------------------------------------------
   Smart Transcript (Admin: Episode → Transkript)
   ------------------------------------------------------------------ */

.pq-audio-player {
  border-radius: 12px;
}

.pq-transcript {
  position: relative;
}

.pq-transcript-tabs-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.pq-transcript-tabs-bar .nav-tabs {
  margin-bottom: 0;
  min-width: 0;
}

.pq-transcript-tabs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.pq-audio-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pq-audio-player-row .pq-audio-player {
  flex: 1 1 auto;
}

.pq-transcript-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pq-transcript-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pq-transcript-toolbar-left,
.pq-transcript-toolbar-right,
.pq-transcript-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pq-transcript-toolbar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.pq-transcript-toolbar-title i {
  margin-right: 4px;
}

.pq-transcript-toolbar-controls {
  margin-left: auto;
}

.pq-transcript-layout-radios {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 6px;
}

.pq-transcript-layout-radios-label {
  color: rgba(0, 0, 0, 0.62);
  margin-right: 2px;
}

.pq-transcript-layout-radio-btn {
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  line-height: 1.2;
  font-size: 0.78rem;
  --bs-btn-color: rgba(0, 0, 0, 0.82);
  --bs-btn-bg: rgba(255, 255, 255, 0.9);
  --bs-btn-border-color: rgba(0, 0, 0, 0.22);
  --bs-btn-hover-color: rgba(0, 0, 0, 0.86);
  --bs-btn-hover-bg: rgba(0, 0, 0, 0.07);
  --bs-btn-hover-border-color: rgba(0, 0, 0, 0.28);
  --bs-btn-active-color: rgba(0, 0, 0, 0.9);
  --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
  --bs-btn-active-border-color: rgba(0, 0, 0, 0.32);
  --bs-btn-disabled-color: rgba(0, 0, 0, 0.45);
  --bs-btn-disabled-bg: rgba(255, 255, 255, 0.65);
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.16);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-check:checked + .pq-transcript-layout-radio-btn {
  --bs-btn-color: rgba(var(--bs-primary-rgb), 0.95);
  --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.14);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.55);
  --bs-btn-hover-color: rgba(var(--bs-primary-rgb), 0.98);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.18);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.6);
  --bs-btn-active-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.22);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.68);
}

.pq-transcript-shell {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.26) transparent;
}

.pq-transcript-shell::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.pq-transcript-shell::-webkit-scrollbar-track {
  background: transparent;
}

.pq-transcript-shell::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.24);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.pq-transcript-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.36);
}

.pq-transcript-turn {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid rgba(var(--bs-primary-rgb), 0.55);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 6px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  scroll-margin-top: 90px;
}

.pq-transcript-turn[data-speaker="A"] {
  border-left-color: rgba(var(--bs-primary-rgb), 0.55);
  background: rgba(var(--bs-primary-rgb), 0.05);
}
.pq-transcript-turn[data-speaker="B"] {
  border-left-color: rgba(var(--bs-success-rgb), 0.55);
  background: rgba(var(--bs-success-rgb), 0.05);
}
.pq-transcript-turn[data-speaker="C"] {
  border-left-color: rgba(var(--bs-warning-rgb), 0.65);
  background: rgba(var(--bs-warning-rgb), 0.06);
}
.pq-transcript-turn[data-speaker="D"] {
  border-left-color: rgba(var(--bs-danger-rgb), 0.55);
  background: rgba(var(--bs-danger-rgb), 0.05);
}

.pq-transcript-turn[data-speaker="A"] .pq-transcript-speaker,
.pq-transcript-speaker-pill[data-speaker="A"] {
  color: rgba(var(--bs-primary-rgb), 0.95);
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  background: rgba(var(--bs-primary-rgb), 0.12);
}

.pq-transcript-turn[data-speaker="B"] .pq-transcript-speaker,
.pq-transcript-speaker-pill[data-speaker="B"] {
  color: rgba(var(--bs-success-rgb), 0.95);
  border-color: rgba(var(--bs-success-rgb), 0.35);
  background: rgba(var(--bs-success-rgb), 0.12);
}

.pq-transcript-turn[data-speaker="C"] .pq-transcript-speaker,
.pq-transcript-speaker-pill[data-speaker="C"] {
  color: rgba(var(--bs-warning-rgb), 0.95);
  border-color: rgba(var(--bs-warning-rgb), 0.35);
  background: rgba(var(--bs-warning-rgb), 0.13);
}

.pq-transcript-turn[data-speaker="D"] .pq-transcript-speaker,
.pq-transcript-speaker-pill[data-speaker="D"] {
  color: rgba(var(--bs-danger-rgb), 0.95);
  border-color: rgba(var(--bs-danger-rgb), 0.35);
  background: rgba(var(--bs-danger-rgb), 0.12);
}

.pq-transcript-speaker-pill[data-speaker] {
  border: 1px solid currentColor;
}

.pq-transcript-turn:hover {
  border-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  transition: transform 120ms ease, border-color 120ms ease;
}

.pq-transcript-turn.pq-transcript-active {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

.pq-transcript-turn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pq-transcript-speaker {
  white-space: nowrap;
}

.pq-transcript-time {
  border: 0;
  background: transparent;
  padding: 0;
  margin-right: 12px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.62);
  text-decoration: none;
}

.pq-transcript-time:hover {
  text-decoration: underline;
}

.pq-transcript-text {
  font-size: 0.98rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pq-polish-change {
  text-decoration: underline dotted rgba(var(--bs-primary-rgb), 0.65);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  background: rgba(var(--bs-primary-rgb), 0.10);
  border-radius: 4px;
  padding: 0 1px;
  cursor: help;
}

.pq-transcript-plain {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.02);
  white-space: pre-wrap;
}

.pq-polish-summary-card {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05), rgba(var(--bs-primary-rgb), 0.025));
}

.pq-polish-summary-card .fw-semibold i {
  color: rgba(var(--bs-primary-rgb), 0.9);
}

.pq-polish-summary-group + .pq-polish-summary-group {
  margin-top: 0.45rem;
}

.pq-polish-summary-group summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.78);
}

.pq-polish-summary-list {
  max-height: 230px;
  overflow: auto;
  display: grid;
  gap: 0.38rem;
  padding-right: 0.1rem;
}

.pq-polish-summary-item {
  border: 1px dashed rgba(var(--bs-primary-rgb), 0.34);
  border-radius: 9px;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.76);
}

.pq-polish-summary-item-head {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.66);
  margin-bottom: 0.2rem;
}

.pq-polish-summary-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
}

.pq-polish-summary-pair {
  font-size: 0.78rem;
  line-height: 1.25;
}

.pq-polish-summary-pair code {
  font-size: 0.77rem;
  padding: 0.08rem 0.28rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.055);
}

.pq-transcript-speaker-pill {
  cursor: default;
}

.pq-transcript-setup-stack {
  display: block;
}

.pq-transcript-setup-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.pq-transcript-setup-card .fw-semibold i {
  color: rgba(var(--bs-primary-rgb), 0.9);
}

.pq-audio-settings-summary {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.82);
  overflow-x: auto;
}

.pq-audio-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 11.25rem;
  gap: 0.5rem;
  align-items: start;
}

.pq-audio-field-small {
  align-self: start;
}

.pq-audio-settings-row .form-select.form-select-sm,
.pq-audio-settings-row .form-control.form-control-sm {
  height: 31px;
  min-height: 31px;
}

.pq-audio-field .form-label {
  font-weight: 600;
  font-size: 0.78rem;
  margin-bottom: 0.2rem !important;
}

.btn.pq-inline-help,
.btn.pq-inline-help:hover,
.btn.pq-inline-help:focus,
.btn.pq-inline-help:focus-visible,
.btn.pq-inline-help:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 !important;
  color: var(--pq-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  user-select: none;
  outline: none !important;
}

.btn.pq-inline-help i {
  font-size: 0.92rem;
  line-height: 1;
}

.pq-transcript-setup-card .collapse .border-top {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.pq-audio-url-row {
  min-width: 0;
  width: 100%;
}

#pqAudioUrlText {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pqAudioUrlOpen {
  margin-left: auto;
  flex: 0 0 auto;
}

.pq-transcript-status-card .progress {
  background-color: rgba(0, 0, 0, 0.06);
}

.pq-transcript-status-card .progress .progress-bar {
  transition: width 180ms ease;
}

.pq-transcript-progress {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
}

.pq-process-timeline {
  position: relative;
}

.pq-process-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.9rem;
}

.pq-process-item:last-child {
  padding-bottom: 0;
}

.pq-process-item::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 1.5rem;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.14);
}

.pq-process-item:last-child::after {
  display: none;
}

.pq-process-marker {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.65);
  margin-top: 0.1rem;
}

.pq-process-marker-primary {
  background: rgba(var(--bs-primary-rgb), 0.12);
  border-color: rgba(var(--bs-primary-rgb), 0.3);
  color: rgba(var(--bs-primary-rgb), 0.9);
}

.pq-process-marker-info {
  background: rgba(13, 202, 240, 0.16);
  border-color: rgba(13, 202, 240, 0.32);
  color: #055160;
}

.pq-process-marker-success {
  background: rgba(25, 135, 84, 0.14);
  border-color: rgba(25, 135, 84, 0.35);
  color: #0f5132;
}

.pq-process-marker-warning {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.36);
  color: #664d03;
}

.pq-process-marker-danger {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.34);
  color: #842029;
}

.pq-process-content {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.82);
}

.pq-process-item-running .pq-process-marker i {
  animation: pq-process-spin 1.1s linear infinite;
}

@keyframes pq-process-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pq-process-head {
  flex-wrap: nowrap;
}

.pq-process-main {
  min-width: 0;
  flex: 1 1 auto;
}

.pq-process-title {
  min-width: 0;
  line-height: 1.2;
}

.pq-process-timewrap {
  flex: 0 0 auto;
  line-height: 1.1;
  min-width: 11.25rem;
}

.pq-process-step-duration {
  font-size: 0.65rem !important;
  line-height: 1;
  margin-top: 0.5rem;
  opacity: 0.72;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.12rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.pq-process-step-duration-icon,
.pq-process-step-duration-value {
  font-size: inherit;
  line-height: inherit;
}

.pq-process-step-duration-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  flex: 0 0 1em;
}

.pq-process-step-duration-value {
  display: inline-block;
  min-width: 8ch;
  text-align: right;
}

.pq-process-step-duration .bi {
  font-size: 1em !important;
  line-height: 1;
  vertical-align: 0;
}

.pq-process-detail {
  margin-top: 0.08rem;
  line-height: 1.2;
}


/* Transcript modal tweaks: allow more room in the dialog */
#pqTranscriptModal .modal-dialog.pq-transcript-modal {
  max-width: min(1600px, 98vw);
}

#pqTranscriptModal .modal-dialog.pq-transcript-modal.modal-dialog-scrollable .modal-content {
  max-height: 85vh;
}

#pqTranscriptModal .modal-dialog.pq-transcript-modal .modal-content {
  height: 85vh;
}

#pqTranscriptModal .modal-body {
  position: relative;
}

#pqTranscriptModal .pq-audio-player {
  position: sticky;
  top: 0;
  z-index: 7;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
}

#pqTranscriptModal .pq-transcript-shell {
  max-height: 53vh;
}

#pqTranscriptModal.pq-transcript-view-active .modal-body {
  overflow: hidden;
}

body.pq-transcript-embedded-page #pqTranscriptModal .pq-transcript-shell {
  max-height: 53vh;
}

#pqTranscriptListModal .modal-dialog.pq-transcript-list-modal {
  max-width: min(1680px, 98vw);
}

#pqTranscriptListModal .modal-content {
  overflow: hidden;
}

#pqTranscriptListModal .modal-body {
  padding: 0;
}

.pq-transcript-modal-iframe {
  display: block;
  width: 100%;
  height: min(92dvh, 980px);
  border: 0;
  background: transparent;
}

body.pq-transcript-embedded-page {
  padding-top: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.pq-transcript-embedded-page .pq-topbar,
body.pq-transcript-embedded-page .pq-sidebar,
body.pq-transcript-embedded-page .pq-sidebar-footer,
body.pq-transcript-embedded-page .pq-sidebar-resizer,
body.pq-transcript-embedded-page .pq-toast-container {
  display: none !important;
}

body.pq-transcript-embedded-page .pq-shell {
  display: block !important;
  min-height: 100dvh !important;
}

body.pq-transcript-embedded-page main.pq-content {
  padding: 0 !important;
  max-width: none !important;
  min-height: 100dvh !important;
}

body.pq-transcript-embedded-page #pqTranscriptModal {
  position: static;
  inset: auto;
  display: block;
  padding: 0 !important;
  background: transparent !important;
}

body.pq-transcript-embedded-page #pqTranscriptModal .modal-dialog.pq-transcript-modal {
  max-width: none !important;
  width: 100%;
  margin: 0;
}

body.pq-transcript-embedded-page #pqTranscriptModal .modal-dialog.pq-transcript-modal.modal-dialog-scrollable .modal-content,
body.pq-transcript-embedded-page #pqTranscriptModal .modal-dialog.pq-transcript-modal .modal-content {
  max-height: 100dvh !important;
  height: 100dvh !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Audio-sync highlighting */
.pq-transcript-turn.pq-transcript-playing,
.pq-transcript-turn.pq-transcript-overlap-active {
  box-shadow:
    0 0 0 3px rgba(var(--bs-primary-rgb), 0.24),
    0 12px 26px rgba(0, 0, 0, 0.13);
  border-color: rgba(var(--bs-primary-rgb), 0.48);
  transform: translateY(-1px);
  background: rgba(var(--bs-primary-rgb), 0.10);
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
  animation: pq-transcript-active-pulse 1.2s ease-in-out infinite;
}

.pq-transcript-turn.pq-transcript-playing[data-speaker="A"],
.pq-transcript-turn.pq-transcript-overlap-active[data-speaker="A"] {
  border-left-color: rgba(var(--bs-primary-rgb), 0.7);
}

.pq-transcript-turn.pq-transcript-playing[data-speaker="B"],
.pq-transcript-turn.pq-transcript-overlap-active[data-speaker="B"] {
  border-left-color: rgba(var(--bs-success-rgb), 0.7);
}

.pq-transcript-turn.pq-transcript-playing[data-speaker="C"],
.pq-transcript-turn.pq-transcript-overlap-active[data-speaker="C"] {
  border-left-color: rgba(var(--bs-warning-rgb), 0.75);
}

.pq-transcript-turn.pq-transcript-playing[data-speaker="D"],
.pq-transcript-turn.pq-transcript-overlap-active[data-speaker="D"] {
  border-left-color: rgba(var(--bs-danger-rgb), 0.7);
}

.pq-transcript-turn.pq-transcript-playing .pq-transcript-speaker {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes pq-transcript-active-pulse {
  0% {
    box-shadow:
      0 0 0 2px rgba(var(--bs-primary-rgb), 0.20),
      0 10px 22px rgba(0, 0, 0, 0.11);
    background: rgba(var(--bs-primary-rgb), 0.08);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(var(--bs-primary-rgb), 0.34),
      0 14px 28px rgba(0, 0, 0, 0.16);
    background: rgba(var(--bs-primary-rgb), 0.14);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(var(--bs-primary-rgb), 0.20),
      0 10px 22px rgba(0, 0, 0, 0.11);
    background: rgba(var(--bs-primary-rgb), 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pq-transcript-turn.pq-transcript-playing,
  .pq-transcript-turn.pq-transcript-overlap-active {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .pq-transcript-tabs-bar {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .pq-transcript-tabs-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .pq-audio-player-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .pq-audio-player-row .pq-transcript-sync {
    margin-left: auto;
  }

  .pq-transcript-layout-radios {
    margin-left: 0;
  }
}

/* THREADED mode: chat-like ("WhatsApp-ish") bubbles */
.pq-interrupt-layout-threaded .pq-transcript-shell {
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--bs-success-rgb), 0.06), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(var(--bs-primary-rgb), 0.05), transparent 42%),
    rgba(245, 247, 245, 0.88);
}

.pq-interrupt-layout-threaded .pq-transcript-row.pq-transcript-row-interrupt {
  display: block;
  margin: 0;
}

.pq-interrupt-layout-threaded .pq-transcript-turn {
  --pq-thread-bubble-bg: rgba(255, 255, 255, 0.95);
  --pq-thread-bubble-border: rgba(0, 0, 0, 0.12);
  position: relative;
  width: fit-content;
  max-width: min(76%, 920px);
  margin: 7px 10px;
  border-radius: 17px;
  border-left-width: 1px;
  background: var(--pq-thread-bubble-bg);
  border-color: var(--pq-thread-bubble-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.pq-interrupt-layout-threaded .pq-transcript-turn::after {
  content: none;
  display: none;
}

.pq-interrupt-layout-threaded .pq-transcript-turn[data-speaker="B"],
.pq-interrupt-layout-threaded .pq-transcript-turn[data-speaker="D"] {
  --pq-thread-bubble-bg: rgba(220, 248, 198, 0.9);
  --pq-thread-bubble-border: rgba(84, 170, 112, 0.35);
  margin-left: auto;
  margin-right: 10px;
}

.pq-interrupt-layout-threaded .pq-transcript-turn[data-speaker="A"],
.pq-interrupt-layout-threaded .pq-transcript-turn[data-speaker="C"] {
  --pq-thread-bubble-bg: rgba(255, 255, 255, 0.95);
  --pq-thread-bubble-border: rgba(0, 0, 0, 0.12);
  margin-right: auto;
  margin-left: 10px;
}

.pq-interrupt-layout-threaded .pq-transcript-turn.pq-transcript-interrupt {
  opacity: 1;
  border-style: dashed;
  border-width: 1px;
  border-left-width: 3px;
  background-image:
    linear-gradient(rgba(var(--bs-warning-rgb), 0.10), rgba(var(--bs-warning-rgb), 0.10)),
    linear-gradient(var(--pq-thread-bubble-bg), var(--pq-thread-bubble-bg));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(var(--bs-warning-rgb), 0.18),
    0 1px 0 rgba(var(--bs-warning-rgb), 0.2),
    0 5px 14px rgba(0, 0, 0, 0.1);
}

.pq-interrupt-layout-threaded .pq-transcript-turn.pq-transcript-interrupt .pq-transcript-speaker::before {
  content: "↯";
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 1.14em;
  line-height: 1;
  opacity: 0.95;
}

.pq-interrupt-layout-threaded .pq-transcript-turn.pq-transcript-playing,
.pq-interrupt-layout-threaded .pq-transcript-turn.pq-transcript-overlap-active {
  z-index: 2;
}

/* NEW mode (inline): short interruption is shown to the right in the same row. */
.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin: 10px 6px;
  padding-right: 22px;
  position: relative;
  overflow: visible;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn:not(.pq-transcript-interrupt) {
  flex: 1 1 0;
  max-width: 100%;
}

.pq-transcript-turn.pq-transcript-interrupt {
  border-left-style: dashed;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt {
  flex: 0 0 clamp(220px, 36%, 400px);
  max-width: 42%;
  width: auto;
  opacity: 0.8;
  transform: translateX(10px);
  background: rgba(var(--bs-warning-rgb), 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: opacity 200ms ease, box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt .pq-transcript-text {
  max-height: none;
  overflow: visible;
  word-break: break-word;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt.pq-transcript-playing,
.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt.pq-transcript-overlap-active {
  opacity: 1;
  transform: translateX(0);
  box-shadow:
    0 0 0 3px rgba(var(--bs-primary-rgb), 0.16),
    0 10px 20px rgba(0, 0, 0, 0.11);
  z-index: 2;
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt:hover {
  transform: translateX(10px) translateY(-1px);
}

.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt.pq-transcript-playing:hover,
.pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt.pq-transcript-overlap-active:hover {
  transform: translateY(-1px);
}

/* OLD mode (classic): interruption is shown below with indent. */
.pq-interrupt-layout-legacy .pq-transcript-row.pq-transcript-row-interrupt {
  display: block;
  margin: 0;
}

.pq-interrupt-layout-legacy .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn {
  margin: 8px 6px;
}

.pq-interrupt-layout-legacy .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt {
  margin-left: 1.35rem;
  width: auto;
  opacity: 0.95;
  transform: none;
}

@media (max-width: 991.98px) {
  .pq-interrupt-layout-threaded .pq-transcript-turn {
    max-width: min(90%, 640px);
  }

  .pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt {
    flex-direction: column;
  }

  .pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn:not(.pq-transcript-interrupt) {
    max-width: 100%;
  }

  .pq-interrupt-layout-inline .pq-transcript-row.pq-transcript-row-interrupt > .pq-transcript-turn.pq-transcript-interrupt {
    flex: 1 1 auto;
    max-width: 100%;
    transform: none;
  }
}

/* Standalone overlap segments (true timestamp overlap) keep subtle collapsed style. */
.pq-transcript-turn.pq-transcript-overlap {
  margin-top: -0.35rem;
  margin-left: 1.4rem;
  width: calc(100% - 1.4rem);
  opacity: 0.86;
}

.pq-transcript-turn.pq-transcript-overlap-host {
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.10);
}

.pq-transcript-sync .form-check-input {
  cursor: pointer;
}

/* JSON / code-ish blocks (used in transcript process/config details) */
.pq-pre {
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre;
}

/* Alternative public submit page: no hero image/copy, with recent questions slider. */
.pq-public-alt-wrap {
  width: min(1100px, 100%);
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 31px 18px;
  box-sizing: border-box;
  min-height: 0;
  align-self: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.pq-public-alt-card .card-body {
  padding: clamp(16px, 2.2vw, 26px);
  background: #d84122;
  color: #f7f2e7;
  container-type: inline-size;
}

.pq-public-alt-card {
  background: #d84122;
}

.pq-public-alt-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pq-public-alt-page .pq-public-alt-top .pq-public-headline {
  width: 95%;
  max-width: 95%;
  margin-inline: auto;
  font-size: clamp(66px, 12.5vw, 140px);
  line-height: 0.88;
  white-space: nowrap !important;
  text-wrap: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-align: center;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .pq-public-alt-top {
    margin-bottom: 10px;
  }

  .pq-public-alt-slide {
    justify-content: flex-start;
    padding-top: 10px !important;
    padding-bottom: 12px;
  }

  .pq-public-alt-quote-wrap {
    padding-top: 0;
  }
}

.pq-public-alt-carousel {
  border: 1px solid rgba(247, 242, 231, 0.30);
  border-radius: 14px;
  background: rgba(247, 242, 231, 0.08);
  overflow: hidden;
  margin-bottom: calc(1rem + 36px) !important;
  min-height: 144px;
}

.pq-public-alt-carousel .carousel-inner {
  height: 144px;
}

.pq-public-alt-carousel .carousel-item {
  height: 144px;
}

.pq-public-alt-form .pq-public-question {
  height: 260px;
  min-height: 260px;
  font-family: "Stack Sans Text Light", "Stack Sans Text", "Work Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--pq-public-ui-size, 1.08rem);
  font-weight: 400 !important;
  line-height: 1.42;
}

.pq-public-alt-form .pq-form-subrow .pq-muted,
.pq-public-alt-form .pq-form-subrow .pq-muted.small {
  font-family: var(--pq-font-body);
  font-size: 0.7rem !important;
  line-height: 1.1;
  color: rgba(247, 242, 231, 0.72) !important;
  font-weight: 400;
}

.pq-public-alt-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 /* padding: 30px 56px 14px; */
}

.pq-public-alt-quote-wrap {
  position: relative;
 /* max-width: 760px; */
  padding: 0 clamp(2.2rem, 5.2vw, 3.6rem);
  isolation: isolate;
}

.pq-public-alt-quote {
  font-family: "Stack Sans Text Light", "Stack Sans Text", "Work Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--pq-public-ui-size);
  font-weight: 400 !important;
  line-height: 1.42;
  text-align: center;
  margin: 0;
  max-width: 100%;
  color: #f7f2e7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  padding: 0.16rem 0.55rem;
  position: relative;
  z-index: 1;
}

.pq-public-alt-quote-wrap::before,
.pq-public-alt-quote-wrap::after {
  position: absolute;
  top: clamp(-0.08rem, -0.2vw, 0.06rem);
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(2.2rem, 5.3vw, 3.8rem);
  line-height: 0.78;
  color: rgba(247, 242, 231, 0.42);
  font-weight: 700;
  pointer-events: none;
  z-index: 0;
}

.pq-public-alt-quote-wrap::before {
  content: "“";
  left: clamp(1rem, 2.4vw, 1.8rem);
}

.pq-public-alt-quote-wrap::after {
  content: "”";
  right: clamp(1rem, 2.4vw, 1.8rem);
}

.pq-public-alt-ts {
  margin-top: 6px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(247, 242, 231, 0.72);
  white-space: nowrap;
  min-height: 1.1rem;
  z-index: 2;
}

.pq-public-alt-ts-empty {
  visibility: hidden;
}

.pq-public-alt-submitrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: relative;
}

.pq-public-alt-submitrow > * {
  min-width: 0;
}

.pq-public-alt-submitrow > .btn-primary,
.pq-public-submitrow > .btn-primary {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: "Stack Sans Text Light", "Stack Sans Text", "Work Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--pq-public-ui-size, 1.08rem);
  font-weight: 400 !important;
}

.pq-public-alt-prompt {
  text-align: center;
  width: 95%;
  max-width: 95%;
  margin: 2px auto 10px;
  font-family: var(--pq-font-humane);
  font-size: clamp(28px, 5.4vw, 76px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap !important;
  text-wrap: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.pq-public-alt-submitlinks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 0;
}

.pq-public-alt-submitrow .cf-turnstile {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
}

.pq-public-alt-submitrow .pq-inline-success-toast {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pq-public-alt-question-wrap {
  position: relative;
  font-size: var(--pq-public-ui-size, 1.08rem);
}

.pq-public-alt-input-overlay-wrap {
  position: relative;
}

.pq-public-alt-form {
  position: relative;
  overflow: visible;
}

.pq-public-alt-form .cf-turnstile {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  margin-top: 2px;
  overflow: visible;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 !important;
  min-height: 100%;
  height: 100% !important;
  max-width: none !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  padding: 12px 14px;
  box-sizing: border-box;
  border-width: 1px;
  background: rgba(247, 242, 231, 0.92);
  white-space: normal !important;
  text-overflow: clip;
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 8;
  pointer-events: auto;
  font-size: inherit !important;
  font-weight: 400;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(var(--pq-accent-rgb), 0.62);
  transform-origin: left center;
  transform: scaleX(1);
  opacity: 0;
  transition:
    transform var(--pq-inline-close-ms, 650ms) linear,
    opacity 120ms ease;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-visible {
  opacity: 1;
  transform: scale(1);
  animation: none;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-closing::after {
  opacity: 1;
  transform: scaleX(0);
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-message {
  display: block;
  width: 100%;
  padding: 0 28px 0 0;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: rgba(27, 27, 27, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close:hover,
.pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close:focus-visible {
  color: rgba(27, 27, 27, 0.95);
  outline: none;
}

.pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-hide {
  opacity: 0;
  transform: scale(0.985);
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 14px;
}

.pq-public-alt-submitrow .pq-inline-success-toast.is-visible {
  margin-left: 0;
}

.pq-public-alt-linkicon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #f7f2e7 !important;
  background-color: rgba(247, 242, 231, 0.08) !important;
  border-color: rgba(247, 242, 231, 0.66) !important;
}

.pq-public-alt-page .pq-public-alt-linkicon:hover,
.pq-public-alt-page .pq-public-alt-linkicon:focus,
.pq-public-alt-page .pq-public-alt-linkicon:focus-visible,
.pq-public-alt-page .pq-public-alt-linkicon:active {
  color: #f7f2e7 !important;
  background-color: rgba(247, 242, 231, 0.24) !important;
  border-color: #f7f2e7 !important;
  box-shadow: none !important;
}

.pq-public-alt-linkicon .bi-instagram {
  color: #f7f2e7 !important;
}

.pq-public-alt-linkicon .bi-spotify {
  color: #f7f2e7 !important;
}

.pq-public-alt-linkicon:hover .bi-instagram,
.pq-public-alt-linkicon:focus .bi-instagram {
  color: #f7f2e7 !important;
  opacity: 1;
}

.pq-public-alt-linkicon:hover .bi-spotify,
.pq-public-alt-linkicon:focus .bi-spotify {
  color: #f7f2e7 !important;
  opacity: 1;
}

.pq-public-alt-page .pq-public-alt-submitrow .btn-primary {
  background: #f7f2e7 !important;
  border-color: #f7f2e7 !important;
  color: #d84122 !important;
}

.pq-public-alt-page .pq-public-alt-submitrow .btn-primary:hover,
.pq-public-alt-page .pq-public-alt-submitrow .btn-primary:focus,
.pq-public-alt-page .pq-public-alt-submitrow .btn-primary:active {
  background: #f7f2e7 !important;
  border-color: #f7f2e7 !important;
  color: #d84122 !important;
  opacity: 0.92;
}

.pq-public-alt-footerbar {
  margin-top: 10px;
  padding-top: 2px;
  padding-bottom: max(1px, env(safe-area-inset-bottom));
  width: 100%;
  background: #d84122;
  border-top: 1px solid rgba(247, 242, 231, 0.28);
}

.pq-public-alt-footerinner {
  width: min(1240px, 100%);
  margin: 0 auto;
  min-height: 34px;
  padding: 0 12px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

/* Alt page: no rounded corners anywhere in this variant */
.pq-public-alt-page .pq-public-alt-card,
.pq-public-alt-page .pq-public-alt-card .card-body,
.pq-public-alt-page .pq-public-alt-carousel,
.pq-public-alt-page .pq-public-alt-carousel .carousel-inner,
.pq-public-alt-page .pq-public-alt-carousel .carousel-item,
.pq-public-alt-page .pq-public-question,
.pq-public-alt-page .btn,
.pq-public-alt-page .form-control,
.pq-public-alt-page .alert {
  border-radius: 0 !important;
}

.pq-public-alt-page .form-control {
  border-color: transparent !important;
  border-width: 1px !important;
}

.pq-public-alt-page .form-control:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(247, 242, 231, 0.42) !important;
}

.pq-public-alt-footerinner .pq-link {
  color: #f7f2e7;
}

.pq-public-alt-footerinner .pq-link-subtle {
  opacity: 0.82;
}

.pq-public-alt-footerinner .pq-link-subtle:hover,
.pq-public-alt-footerinner .pq-link-subtle:focus {
  opacity: 0.96;
}

.pq-public-alt-page .container.py-4 {
  min-height: 100dvh;
  height: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  box-sizing: border-box;
  max-width: none;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.pq-public-alt-page {
  background: #d84122 !important;
  color: #f7f2e7;
  --pq-public-ui-size: clamp(1.05rem, 1.55vw, 1.2rem);
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0 !important;
}

.pq-public-alt-page .pq-public-headline,
.pq-public-alt-page .pq-public-alt-prompt,
.pq-public-alt-page .pq-muted {
  color: #f7f2e7 !important;
}

/* Third public variant: inverted color scheme (light background, orange text) */
.pq-public-invert-page {
  background: #f7f2e7 !important;
  color: #111 !important;
}

.pq-public-invert-page .pq-public-alt-card,
.pq-public-invert-page .pq-public-alt-card .card-body {
  background: #f7f2e7 !important;
  color: #111 !important;
}

.pq-public-invert-page .pq-public-headline,
.pq-public-invert-page .pq-public-alt-prompt {
  color: #d84122 !important;
}

.pq-public-invert-page .pq-muted,
.pq-public-invert-page .pq-form-subrow .pq-muted,
.pq-public-invert-page .pq-form-subrow .pq-muted.small {
  color: #111 !important;
}

.pq-public-invert-page .pq-public-alt-carousel {
  background: rgba(216, 65, 34, 0.08) !important;
  border-color: rgba(216, 65, 34, 0.35) !important;
}

.pq-public-invert-page .pq-public-alt-quote {
  color: #111 !important;
}

.pq-public-invert-page .pq-public-alt-quote-wrap::before,
.pq-public-invert-page .pq-public-alt-quote-wrap::after {
  color: rgba(216, 65, 34, 0.5) !important;
}

.pq-public-invert-page .pq-public-alt-submitrow .btn-primary {
  background: #d84122 !important;
  border-color: #d84122 !important;
  color: #f7f2e7 !important;
}

.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:hover,
.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:focus,
.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:active {
  background: #d84122 !important;
  border-color: #d84122 !important;
  color: #f7f2e7 !important;
  opacity: 0.92;
}

.pq-public-invert-page .pq-public-alt-linkicon {
  color: #d84122 !important;
  background-color: rgba(216, 65, 34, 0.08) !important;
  border-color: rgba(216, 65, 34, 0.66) !important;
}

.pq-public-invert-page .pq-public-alt-page .pq-public-alt-linkicon:hover,
.pq-public-invert-page .pq-public-alt-page .pq-public-alt-linkicon:focus,
.pq-public-invert-page .pq-public-alt-page .pq-public-alt-linkicon:focus-visible,
.pq-public-invert-page .pq-public-alt-page .pq-public-alt-linkicon:active,
.pq-public-invert-page .pq-public-alt-linkicon:hover,
.pq-public-invert-page .pq-public-alt-linkicon:focus,
.pq-public-invert-page .pq-public-alt-linkicon:focus-visible,
.pq-public-invert-page .pq-public-alt-linkicon:active {
  color: #d84122 !important;
  background-color: rgba(216, 65, 34, 0.16) !important;
  border-color: #d84122 !important;
}

.pq-public-invert-page .pq-public-alt-linkicon .bi-instagram,
.pq-public-invert-page .pq-public-alt-linkicon .bi-spotify,
.pq-public-invert-page .pq-public-alt-linkicon:hover .bi-instagram,
.pq-public-invert-page .pq-public-alt-linkicon:focus .bi-instagram,
.pq-public-invert-page .pq-public-alt-linkicon:hover .bi-spotify,
.pq-public-invert-page .pq-public-alt-linkicon:focus .bi-spotify {
  color: #d84122 !important;
}

.pq-public-invert-page .pq-public-alt-footerbar {
  background: #f7f2e7 !important;
  border-top: 1px solid rgba(216, 65, 34, 0.28) !important;
}

.pq-public-invert-page .pq-public-alt-footerinner .pq-link {
  color: #111 !important;
}

.pq-public-invert-page .pq-public-alt-footerinner .pq-link-subtle {
  opacity: 0.86;
}

.pq-public-invert-page .pq-public-alt-footerinner .pq-link-subtle:hover,
.pq-public-invert-page .pq-public-alt-footerinner .pq-link-subtle:focus {
  opacity: 1;
}

.pq-public-invert-page .form-control {
  border-color: rgba(216, 65, 34, 0.42) !important;
  color: #111 !important;
  background: #f7f2e7 !important;
}

.pq-public-invert-page .form-control::placeholder {
  color: rgba(17, 17, 17, 0.58) !important;
}

.pq-public-invert-page .form-control:focus {
  border-color: #d84122 !important;
  box-shadow: 0 0 0 2px rgba(216, 65, 34, 0.24) !important;
}

.pq-public-invert-page .pq-public-alt-carousel .carousel-indicators [data-bs-target] {
  background: rgba(216, 65, 34, 0.42) !important;
}

.pq-public-invert-page .pq-public-alt-carousel .carousel-indicators .active {
  background: #d84122 !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay {
  background: rgba(247, 242, 231, 0.95) !important;
  color: #111 !important;
  border-color: rgba(216, 65, 34, 0.36) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-success {
  background: rgba(247, 242, 231, 0.96) !important;
  color: #111 !important;
  border-color: rgba(25, 135, 84, 0.52) !important;
  box-shadow: 0 10px 24px rgba(25, 135, 84, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-success::after {
  background: rgba(25, 135, 84, 0.62) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.pq-inline-success-toast--overlay.is-danger {
  background: rgba(216, 65, 34, 0.92) !important;
  color: #f7f2e7 !important;
  border-color: rgba(216, 65, 34, 0.62) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close {
  color: rgba(17, 17, 17, 0.72) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close:hover,
.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast .pq-inline-success-toast-close:focus-visible {
  color: #111 !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.is-danger .pq-inline-success-toast-close {
  color: rgba(247, 242, 231, 0.82) !important;
}

.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.is-danger .pq-inline-success-toast-close:hover,
.pq-public-invert-page .pq-public-alt-input-overlay-wrap .pq-inline-success-toast.is-danger .pq-inline-success-toast-close:focus-visible {
  color: #f7f2e7 !important;
}

.pq-public-invert-page .pq-public-alt-submitrow .btn-primary {
  color: #f7f2e7 !important;
}

.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:hover,
.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:focus,
.pq-public-invert-page .pq-public-alt-submitrow .btn-primary:active {
  color: #f7f2e7 !important;
}

html.pq-public-alt-html {
  scrollbar-gutter: auto;
  --pq-topbar-height: 0px;
}

@media (max-width: 767.98px) {
  .pq-public-alt-page .pq-footer-link-classic {
    display: none !important;
  }

  html.pq-public-alt-html {
    overflow-y: auto;
  }

  .pq-public-alt-page {
    overflow-y: auto !important;
  }

  .pq-public-alt-page .container.py-4 {
    overflow-y: visible;
  }

  .pq-public-alt-wrap {
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
  }

  .pq-public-alt-carousel {
    min-height: 0;
  }

  .pq-public-alt-carousel .carousel-control-prev,
  .pq-public-alt-carousel .carousel-control-next {
    display: none;
  }

  .pq-public-alt-page .container.py-4 {
    min-height: 100dvh;
    height: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: visible !important;
  }

  .pq-public-alt-wrap {
    padding: 6px 8px 12px;
    align-self: center;
    overflow-y: visible !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto;
  }

  .pq-public-alt-card .card-body {
    padding: 8px 8px 6px;
  }

  .pq-public-alt-top {
    margin-bottom: 8px !important;
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .pq-public-alt-page .pq-public-alt-top .pq-public-headline {
    width: 95%;
    max-width: 95%;
    margin-inline: auto;
  /*  font-size: clamp(30px, 10.2vw, 82px); */
    line-height: 0.88;
    white-space: nowrap !important;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    letter-spacing: 0;
  }

  .pq-public-alt-carousel .carousel-inner,
  .pq-public-alt-carousel .carousel-item {
    height: clamp(78px, 12.8vh, 106px);
    min-height: clamp(78px, 12.8vh, 106px);
  }

  .pq-public-alt-form .pq-public-question {
    height: clamp(112px, 18vh, 150px);
    min-height: clamp(112px, 18vh, 150px);
  }

  .pq-public-alt-slide {
    padding: 6px 10px 6px;
  }

  .pq-public-alt-quote-wrap {
    max-width: none;
    width: 100%;
    padding: 0 0.6rem;
  }

  .pq-public-alt-quote {
    font-size: var(--pq-public-ui-size);
    line-height: 1.36;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    padding: 0.1rem 0.22rem;
  }

  .pq-public-alt-quote-wrap::before,
  .pq-public-alt-quote-wrap::after {
    font-size: clamp(1.8rem, 6.2vw, 2.6rem);
    top: clamp(0.02rem, 0.2vw, 0.14rem);
  }

  .pq-public-alt-quote-wrap::before {
    left: 0.12rem;
  }

  .pq-public-alt-quote-wrap::after {
    right: 0.12rem;
  }

  .pq-public-alt-ts {
    display: inline-flex;
    margin-top: 3px;
    margin-bottom: 8px;
    font-size: 0.62rem;
    gap: 4px;
    min-height: 0.8rem;
    color: rgba(247, 242, 231, 0.78);
  }

  .pq-public-alt-carousel {
    margin-bottom: calc(0.72rem + 16px) !important;
  }

  .pq-public-alt-prompt {
    margin: 0 auto 6px;
  }

  .pq-public-alt-form .mb-2 {
    margin-bottom: 5px !important;
  }

  .pq-public-alt-form .pq-form-subrow .pq-muted,
  .pq-public-alt-form .pq-form-subrow .pq-muted.small {
    font-family: var(--pq-font-body);
    font-size: 0.62rem !important;
    line-height: 1.1;
    color: rgba(247, 242, 231, 0.78) !important;
    font-weight: 400;
  }

  .pq-public-alt-form .pq-form-subrow {
    margin-top: 3px;
  }
  .pq-public-alt-form .cf-turnstile {
    margin-top: 2px;
  }

  .pq-public-alt-submitrow {
    margin-top: 3px !important;
    margin-bottom: 10px;
    padding-bottom: 4px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .pq-public-alt-submitrow .btn {
    min-height: 32px;
    padding-top: 0.24rem;
    padding-bottom: 0.24rem;
  }

  .pq-public-alt-submitlinks {
    gap: 6px;
  }

  .pq-public-alt-linkicon {
    width: 30px;
    height: 30px;
  }

  .pq-public-alt-footerbar {
    margin-top: 8px;
    padding-top: 1px;
  }

  .pq-public-alt-footerinner {
    min-height: 26px;
    padding: 0 8px;
    gap: 6px;
  }

  .pq-public-alt-footerinner .pq-link {
    font-size: 0.66rem;
    gap: 4px;
    white-space: nowrap;
  }

  .pq-public-alt-footerinner .pq-link i {
    font-size: 0.72rem;
  }
}

@media (max-width: 767.98px) {
  .pq-public-alt-page {
    --pq-public-ui-size: clamp(1rem, 3.9vw, 1.14rem);
  }
}

@media (max-width: 420px) {
  .pq-public-alt-page .pq-public-alt-top .pq-public-headline {
    width: 95%;
    max-width: 95%;
    margin-inline: auto;
    font-size: clamp(40px, 12.5vw, 140px);
    line-height: 0.9;
    white-space: nowrap !important;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    letter-spacing: 0;
  }

  .pq-public-alt-prompt {
    margin: 0 auto 6px;
  }

  .pq-public-alt-quote {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (min-width: 421px) and (max-width: 767.98px) {
  .pq-public-alt-page .pq-public-alt-top .pq-public-headline {
    width: 95%;
    max-width: 95%;
    margin-inline: auto;
 /*   font-size: clamp(36px, 10.2vw, 82px); */
    font-size: clamp(50px, 11.5vw, 140px);
    line-height: 0.88;
    white-space: nowrap !important;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    letter-spacing: 0;
  }

  .pq-public-alt-carousel .carousel-inner,
  .pq-public-alt-carousel .carousel-item {
    height: clamp(96px, 17.4vh, 132px);
    min-height: clamp(96px, 17.4vh, 132px);
  }

  .pq-public-alt-slide {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .pq-public-alt-quote-wrap {
    padding-top: 0.38rem;
  }

  .pq-public-alt-quote-wrap::before,
  .pq-public-alt-quote-wrap::after {
    top: 0.16rem;
    font-size: clamp(1.55rem, 4.8vw, 2.1rem);
  }

  .pq-public-alt-ts {
    margin-bottom: 12px;
  }

  .pq-public-alt-carousel .carousel-indicators {
    margin-bottom: 5px;
  }
}

@media (max-width: 575px) {
  .pq-public-alt-footerinner.pq-public-bottomlinks {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
}

/* Alt page: short viewport heights (e.g. ~800px) */
@media (min-width: 768px) and (max-height: 860px) {
  .pq-public-alt-wrap {
    padding: 16px 24px 16px;
  }

  .pq-public-alt-card .card-body {
    padding: 12px 14px 8px;
  }

  .pq-public-alt-carousel {
    min-height: 0;
  }

  .pq-public-alt-carousel .carousel-inner,
  .pq-public-alt-carousel .carousel-item {
    height: clamp(64px, 10vh, 90px);
    min-height: clamp(64px, 10vh, 90px);
  }

  .pq-public-alt-form .pq-public-question {
    height: clamp(150px, 22vh, 220px);
    min-height: clamp(150px, 22vh, 220px);
  }

  .pq-public-alt-prompt {
    margin: 0 auto 5px;
  }

  .pq-public-alt-slide {
    padding-top: 4px;
    padding-bottom: 10px;
  }

  .pq-public-alt-quote-wrap {
    padding-top: 0;
  }

  .pq-public-alt-quote {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .pq-public-alt-footerinner {
    min-height: 26px;
  }
}

@media (min-width: 768px) and (max-height: 760px) {
  .pq-public-alt-wrap {
    padding: 10px 16px 14px;
  }

  .pq-public-alt-carousel {
    min-height: 0;
  }

  .pq-public-alt-carousel .carousel-inner,
  .pq-public-alt-carousel .carousel-item {
    height: clamp(58px, 9vh, 78px);
    min-height: clamp(58px, 9vh, 78px);
  }

  .pq-public-alt-form .pq-public-question {
    height: clamp(136px, 20vh, 186px);
    min-height: clamp(136px, 20vh, 186px);
  }

  .pq-public-alt-slide {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .pq-public-alt-quote {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    white-space: normal;
  }

  .pq-public-alt-ts {
    margin-top: 2px;
    margin-bottom: 8px;
  }

  .pq-public-alt-carousel .carousel-indicators {
    margin-bottom: 3px;
  }
}

@media (min-width: 768px) and (max-height: 680px) {
  .pq-public-alt-quote {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .pq-public-alt-ts {
    display: none;
  }
}

.pq-public-alt-carousel .carousel-indicators {
  margin-bottom: 3px;
}

.pq-public-alt-carousel .carousel-indicators [data-bs-target] {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(247, 242, 231, 0.42);
}

.pq-public-alt-carousel .carousel-indicators .active {
  background: #f7f2e7;
}

.pq-public-alt-carousel .carousel-control-prev,
.pq-public-alt-carousel .carousel-control-next {
  width: 44px;
}

.pq-public-alt-carousel .carousel-control-prev-icon,
.pq-public-alt-carousel .carousel-control-next-icon {
  filter: invert(18%);
}

.pq-answer-render {
  border: 1px solid rgba(var(--pq-brand-rgb), 0.16);
  border-radius: 10px;
  background: rgba(var(--pq-brand-rgb), 0.03);
  padding: 12px 14px;
}

.pq-question-answer-card [data-pq-answer-autogen-status] {
  font-size: 0.7rem !important;
  line-height: 1.2;
  opacity: 0.72;
  margin-bottom: 0;
}

.pq-question-edit-stack {
  display: flex;
  flex-direction: column;
}

.pq-question-main-card {
  --pq-question-main-textarea-height: 120px;
}

.pq-question-edit-stack > .pq-card + .pq-card {
  margin-top: 1rem;
}

.pq-question-plan-inline-row {
  --bs-gutter-x: 0.7rem;
  --bs-gutter-y: 0.5rem;
}

.pq-question-top-row {
  margin-bottom: 0.18rem !important;
}

.pq-question-context-row {
  --bs-gutter-y: 0.35rem;
  margin-top: 0.1rem !important;
}

.pq-question-plan-section {
  margin-top: 0.95rem !important;
}

.pq-question-meta-row {
  --pq-question-meta-label-height: 2rem;
  align-items: stretch;
}

.pq-question-meta-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.pq-question-meta-row .form-label {
  min-height: var(--pq-question-meta-label-height);
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem !important;
}

.pq-question-meta-row .pq-source-label-with-action {
  min-height: var(--pq-question-meta-label-height);
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem !important;
}

.pq-question-meta-row .form-control,
.pq-question-meta-row .form-select {
  margin-top: auto;
}

.pq-question-top-left {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.pq-question-top-visibility {
  margin: 0;
}

.pq-question-top-visibility .form-check-input {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(27, 27, 27, 0.22);
  box-shadow: none;
}

.pq-question-top-visibility .form-check-input:focus,
.pq-question-top-visibility .form-check-input:focus-visible {
  border-color: rgba(76, 122, 94, 0.34);
  box-shadow: 0 0 0 0.18rem rgba(76, 122, 94, 0.14);
}

.pq-question-top-visibility .form-check-input:checked {
  background-color: rgba(76, 122, 94, 0.82);
  border-color: rgba(76, 122, 94, 0.82);
}

.pq-question-rating-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 12px 14px;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.20);
  border-radius: var(--bs-border-radius, 0.375rem);
  background: rgba(var(--pq-brand-rgb), 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.pq-question-rating-block {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pq-question-rating-block + .pq-question-rating-block {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--pq-brand-rgb), 0.16);
}

.pq-question-rating-block .form-label {
  margin-bottom: 0.45rem;
}

.pq-question-rating-block .input-group,
.pq-question-rating-block .d-flex.flex-wrap {
  margin-bottom: 0;
}

.pq-question-rating-block .pq-muted.small {
  margin-bottom: 0;
}

.pq-question-mark-answered-form {
  margin: 0;
}

.pq-question-mark-answered-form .btn {
  white-space: nowrap;
}

.pq-question-workflow-inline,
.pq-question-answered-inline {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  flex-wrap: wrap;
  font-weight: 700;
}

.pq-question-plan-inline-row .col-lg-4.d-flex.align-items-center {
  min-height: 42px;
}

.pq-question-workflow-inline--answered,
.pq-question-answered-inline {
  color: #198754;
}

.pq-question-workflow-inline--archived {
  color: #6c757d;
}

.pq-question-workflow-inline-main,
.pq-question-answered-inline-main {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pq-question-workflow-inline-time,
.pq-question-answered-inline-time {
  color: var(--pq-muted);
  font-weight: 600;
  font-size: 0.92rem;
}

@media (min-width: 992px) {
  .pq-question-top-row {
    align-items: flex-start !important;
  }

  .pq-question-top-row > [class*="col-"] {
    display: block;
  }

  .pq-question-top-left,
  .pq-question-rating-stack {
    width: 100%;
    height: auto;
  }

  .pq-question-main-card {
    --pq-question-main-textarea-height: 152px;
  }

  .pq-question-top-left textarea[name="question"] {
    flex: 0 0 auto;
    min-height: var(--pq-question-main-textarea-height);
  }

  .pq-question-top-visibility {
    margin-top: auto;
  }
}

.pq-answer-autogen-status.pq-answer-autogen--done {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pq-answer-autogen-status.pq-answer-autogen--done::before {
  content: "KI";
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.28rem;
  border-radius: 999px;
  color: rgba(var(--pq-brand-rgb), 1);
  background: rgba(var(--pq-brand-rgb), 0.14);
  border: 1px solid rgba(var(--pq-brand-rgb), 0.22);
}

.pq-answer-content-wrap {
  position: relative;
  min-height: 220px;
}

#pqQuestionAnswerModal .modal-dialog.pq-question-answer-modal-dialog {
  max-width: min(1200px, calc(100vw - 48px));
}

#pqQuestionAnswerModal .pq-question-answer-modal-content {
  border: 1px solid rgba(var(--pq-brand-rgb), 0.16);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(27, 27, 27, 0.16);
}

#pqQuestionAnswerModal .pq-question-answer-modal-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(27, 27, 27, 0.08);
  background: rgba(255, 255, 255, 0.96);
  align-items: flex-start;
}

#pqQuestionAnswerModal .pq-question-answer-modal-kicker {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pq-muted);
  margin-bottom: 0.25rem;
}

#pqQuestionAnswerModal .pq-question-answer-modal-question {
  margin-top: 0.35rem;
  line-height: 1.35;
}

#pqQuestionAnswerModal .pq-question-answer-modal-body {
  padding: 18px;
  background: rgba(255, 251, 242, 0.64);
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 760px);
}

#pqQuestionAnswerModal .pq-question-answer-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

#pqQuestionAnswerModal .pq-question-answer-card .card-header {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.74);
  border-bottom: 1px solid rgba(27, 27, 27, 0.08) !important;
}

#pqQuestionAnswerModal .pq-question-answer-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 14px;
  padding: 16px;
}

#pqQuestionAnswerModal .pq-answer-content-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

#pqQuestionAnswerModal [data-pq-answer-preview="1"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#pqQuestionAnswerModal [data-pq-answer-form="1"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#pqQuestionAnswerModal [data-pq-answer-form="1"] textarea[name="answer_text"] {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

#pqQuestionAnswerModal .pq-answer-ai-tools {
  border: 1px dashed rgba(var(--pq-brand-rgb), 0.24);
  border-radius: 14px;
  background: rgba(var(--pq-brand-rgb), 0.05);
  padding: 12px 14px;
}

#pqQuestionAnswerModal .pq-question-answer-header-actions {
  gap: 10px;
}

@media (max-width: 991.98px) {
  #pqQuestionAnswerModal .modal-dialog.pq-question-answer-modal-dialog {
    max-width: calc(100vw - 24px);
    margin: 0.75rem auto;
  }

  #pqQuestionAnswerModal .pq-question-answer-modal-header {
    padding: 16px 16px 12px;
  }

  #pqQuestionAnswerModal .pq-question-answer-modal-body {
    padding: 14px;
    min-height: min(74vh, 640px);
  }

  #pqQuestionAnswerModal .pq-question-answer-card .card-body {
    padding: 14px;
  }

  #pqQuestionAnswerModal .pq-answer-content-wrap {
    min-height: 300px;
  }
}

.pq-answer-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: all;
}

.pq-answer-loading-spinner {
  width: 3.05rem;
  height: 3.05rem;
  border-width: 0.32rem;
}

.pq-answer-loading-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(27, 27, 27, 0.74);
}

.pq-answer-render p {
  margin: 0 0 0.65rem;
  line-height: 1.55;
  white-space: normal;
}

.pq-answer-lead {
  border: 1px solid rgba(var(--pq-brand-rgb), 0.34);
  background: rgba(var(--pq-brand-rgb), 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 0.7rem;
  font-weight: 600;
  line-height: 1.38;
}

.pq-answer-lead-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 5px solid rgba(var(--pq-brand-rgb), 0.78);
  background: linear-gradient(
    95deg,
    rgba(var(--pq-brand-rgb), 0.2),
    rgba(var(--pq-brand-rgb), 0.06)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pq-answer-lead-ribbon-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px 7px 7px 999px;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.36);
  background: rgba(var(--pq-brand-rgb), 0.24);
  color: rgba(19, 24, 27, 0.84);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  line-height: 1;
}

.pq-answer-lead-ribbon-text {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(20, 20, 20, 0.9);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pq-answer-lead-quote {
  position: relative;
  display: block;
  border: none;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(
    160deg,
    rgba(var(--pq-brand-rgb), 0.12),
    rgba(255, 255, 255, 0.99) 58%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 14px rgba(14, 30, 43, 0.06);
  padding: 13px 12px 13px 12px;
  overflow: hidden;
}

.pq-answer-lead-quote-mark,
.pq-answer-lead-quote-close {
  position: static;
  display: inline;
  color: rgb(var(--pq-brand-rgb));
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 0.8;
  margin-left: 0.4rem;
  vertical-align: -0.32em;
  pointer-events: none;
  user-select: none;
}

.pq-answer-lead-quote-mark {
  margin-left: 0;
  margin-right: 0.4rem !important;
}

.pq-answer-lead-quote-body {
  position: relative;
  min-width: 0;
  z-index: 1;

}

.pq-answer-lead-quote-line {
  display: block;
  min-width: 0;
}

.pq-answer-lead-quote-text {
  display: inline;
  color: rgb(var(--pq-brand-rgb));
  font-size: 1.04rem;
  line-height: 1.5;
  font-weight: 600;
  text-wrap: pretty;
  letter-spacing: 0.003em;
}

.pq-answer-lead-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.14rem 0.34rem;
  margin-top: 0.32rem;
}

.pq-answer-lead-keyword {
  display: inline;
  color: rgba(36, 48, 58, 0.62);
  font-size: 0.6rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.pq-answer-lead-keyword:not(:last-child)::after {
  content: " ·";
  color: rgba(36, 48, 58, 0.38);
  margin-left: 0.18rem;
}

@media (max-width: 640px) {
  .pq-answer-lead-quote {
    border-radius: 12px;
    padding: 11px 9px;
  }

  .pq-answer-lead-quote-mark,
  .pq-answer-lead-quote-close {
    font-size: 1.72rem;
  }

  .pq-answer-lead-quote-mark,
  .pq-answer-lead-quote-close {
    vertical-align: -0.28em;
  }

  .pq-answer-lead-quote-body {
    padding: 5px 0.72rem 2px 0.62rem;
  }

  .pq-answer-lead-quote-text {
    font-size: 0.96rem;
    line-height: 1.46;
  }

  .pq-answer-lead-keywords {
    margin-top: 0.28rem;
    gap: 0.12rem 0.26rem;
  }

  .pq-answer-lead-keyword {
    font-size: 0.56rem;
  }
}

.pq-answer-render p:last-child {
  margin-bottom: 0;
}

.pq-answer-render ul {
  margin: 0.2rem 0 0.7rem 1.1rem;
}

.pq-answer-render li {
  margin-bottom: 0.32rem;
  line-height: 1.5;
}

.pq-answer-evidence-title {
  margin: 0.2rem 0 0.45rem;
  font-weight: 700;
}

.pq-answer-evidence-toggle {
  width: 100%;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.38);
  background: linear-gradient(
    180deg,
    rgba(var(--pq-brand-rgb), 0.14),
    rgba(var(--pq-brand-rgb), 0.08)
  );
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0.18rem 0 0.42rem;
  border-radius: 10px;
  font-weight: 700;
  color: rgba(27, 27, 27, 0.94);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.pq-answer-evidence-toggle:hover,
.pq-answer-evidence-toggle:focus-visible {
  color: var(--pq-brand);
  border-color: rgba(var(--pq-brand-rgb), 0.62);
  background: rgba(var(--pq-brand-rgb), 0.18);
}

.pq-answer-evidence-toggle[aria-expanded="true"] {
  border-color: rgba(var(--pq-brand-rgb), 0.58);
  background: rgba(var(--pq-brand-rgb), 0.2);
}

.pq-answer-evidence-toggle-title {
  min-width: 0;
}

.pq-answer-evidence-toggle-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.pq-answer-evidence-toggle-hint {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(27, 27, 27, 0.62);
  text-transform: uppercase;
}

.pq-answer-evidence-toggle i {
  color: rgba(var(--pq-brand-rgb), 0.92);
  font-size: 0.9rem;
  transition: transform 120ms ease;
}

.pq-answer-evidence-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.pq-answer-evidence-panel {
  margin: 0 0 0.15rem;
}

.pq-answer-render .pq-answer-evidence-list {
  list-style: none;
  margin: 0.08rem 0 0.55rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.pq-answer-evidence-list li {
  margin: 0;
  list-style: none;
}

.pq-answer-evidence-list li::before {
  display: none;
}

.pq-answer-evidence-item {
  border: 1px solid rgba(var(--pq-brand-rgb), 0.23);
  background: rgba(var(--pq-brand-rgb), 0.05);
  border-radius: 10px;
  padding: 7px 9px 7px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.pq-answer-evidence-list li.is-playing .pq-answer-evidence-item {
  border-color: rgba(var(--pq-brand-rgb), 0.52);
  background: rgba(var(--pq-brand-rgb), 0.12);
}

.pq-answer-evidence-quote {
  display: block;
  line-height: 1.42;
  font-size: 0.95rem;
  color: rgba(27, 27, 27, 0.92);
}

.pq-answer-evidence-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  align-self: flex-end;
}

.pq-answer-evidence-tail {
  font-size: 0.79rem;
  color: rgba(27, 27, 27, 0.66);
  letter-spacing: 0.01em;
  min-width: 0;
  white-space: nowrap;
}

.pq-answer-evidence-play {
  flex: 0 0 auto;
  border: 0;
  background: rgba(var(--pq-brand-rgb), 0.14);
  color: var(--pq-brand);
  border-radius: 999px;
  width: 1.36rem;
  height: 1.36rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.pq-answer-evidence-play:hover,
.pq-answer-evidence-play:focus-visible {
  background: rgba(var(--pq-brand-rgb), 0.22);
  color: var(--pq-brand);
}

/* Episodes list: transcription status pills */
.pq-qmeta .pq-pill.pq-pill-tx-none {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.78);
}

.pq-qmeta .pq-pill.pq-pill-tx-pending {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(156, 141, 100, 0.20);
  color: rgba(90, 79, 48, 0.82);
}

.pq-qmeta .pq-pill.pq-pill-tx-processing {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.78);
}

.pq-qmeta .pq-pill.pq-pill-tx-awaiting {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 27, 27, 0.16);
  color: rgba(33, 37, 41, 0.78);
}

.pq-qmeta .pq-pill.pq-pill-tx-done {
  background: rgba(76, 122, 94, 0.08);
  border-color: rgba(76, 122, 94, 0.24);
  color: rgba(61, 96, 74, 0.92);
}

.pq-qmeta .pq-pill.pq-pill-tx-error {
  background: rgba(var(--pq-bonus-rgb), 0.10);
  border-color: rgba(var(--pq-bonus-rgb), 0.24);
  color: rgba(111, 72, 58, 0.92);
}

.pq-qmeta .pq-pill.pq-pill-episode-tech {
  color: rgba(95, 72, 56, 0.84) !important;
}

.pq-qmeta .pq-pill.pq-pill-episode-tech i {
  color: inherit !important;
}

@media (min-width: 992px) {
  .pq-question-split-row {
    align-items: stretch;
  }

  .pq-question-split-left,
  .pq-question-split-right {
    display: flex;
  }

  .pq-question-split-left > .pq-card {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .pq-question-main-card .card-body {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    max-height: none;
  }

  #pqQuestionMainForm {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: visible;
    padding-right: 0;
  }

  .pq-question-main-actions {
    flex: 0 0 auto;
  }

  .pq-question-split-right .pq-question-split-sidebar {
    position: static;
    top: auto;
    align-self: flex-start;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
  }

  .pq-question-split-right .pq-question-plan-card {
    flex: 0 0 auto;
  }

  .pq-question-split-right .pq-question-plan-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .form-label.pq-plan-title-label {
    display: inline-flex;
    align-items: center;
    line-height: 1.15;
  }

  .form-label.pq-plan-title-label i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translateY(-0.5px);
  }

  .pq-plan-slot {
    border: 1px solid rgba(var(--pq-brand-rgb), 0.26);
    background: rgba(var(--pq-brand-rgb), 0.07);
    border-radius: 12px;
    padding: 9px 11px;
  }

  .pq-plan-slot-label {
    font-size: 0.76rem;
    color: var(--pq-muted);
    margin-bottom: 1px;
  }

  .pq-plan-slot-link {
    font-weight: 600;
    line-height: 1.25;
  }

  .pq-plan-slot-empty {
    color: var(--pq-muted);
    font-size: 0.88rem;
  }

  .pq-plan-form {
    margin-top: 2px;
  }

  .pq-plan-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }

  .pq-plan-pair .pq-plan-slot,
  .pq-plan-pair .pq-plan-state {
    height: 100%;
  }

  @media (max-width: 575px) {
    .pq-plan-pair {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .pq-plan-state {
    border-radius: 12px;
    padding: 9px 11px;
    border: 1px solid transparent;
  }

  .pq-plan-state-done {
    border-color: rgba(25, 135, 84, 0.32);
    background: rgba(25, 135, 84, 0.09);
  }

  .pq-plan-state-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    color: #0f5132;
    line-height: 1.2;
  }

  .pq-plan-state-title-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .pq-plan-state-detail {
    margin-top: 2px;
    font-size: 0.9rem;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 4px;
    line-height: 1.25;
    min-width: 0;
  }

  .pq-plan-state-prep {
    color: var(--pq-muted);
    line-height: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .pq-plan-state-detail .pq-ep-ref {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: block;
  }

  .pq-plan-state-time {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--pq-muted);
  }

  .pq-plan-state-time-inline {
    margin-top: 0;
    white-space: nowrap;
  }

  .pq-question-split-right .pq-question-answer-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0 !important;
    overflow: visible;
  }

  .pq-question-split-right .pq-question-answer-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .pq-question-split-right .pq-question-answer-card .pq-answer-content-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pq-question-split-right .pq-question-answer-card [data-pq-answer-preview="1"] {
    flex: 1 1 auto;
    overflow: auto;
  }

  .pq-question-split-right .pq-question-answer-card [data-pq-answer-preview-actions="1"] {
    margin-top: auto;
  }

  .pq-question-split-right .pq-question-answer-card [data-pq-answer-form="1"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

.pq-question-split-right .pq-question-answer-card [data-pq-answer-form="1"] textarea[name="answer_text"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .pq-answer-ai-tools {
    border: 1px dashed rgba(var(--pq-brand-rgb), 0.24);
    border-radius: 12px;
    background: rgba(var(--pq-brand-rgb), 0.05);
    padding: 10px 12px;
  }
}

@media (min-width: 1200px) and (max-height: 980px) {
  .pq-episode-edit-layout,
  .pq-question-split-row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  .pq-episode-edit-layout {
    align-items: flex-start;
  }

  .pq-episode-edit-layout .pq-card .card-header,
  .pq-question-split-row .pq-card .card-header {
    padding: 10px 12px;
  }

  .pq-episode-edit-layout .pq-card .card-body,
  .pq-question-split-row .pq-card .card-body {
    padding: 12px;
  }

  .pq-episode-edit-layout .row.g-3,
  .pq-question-split-row .row.g-3 {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.7rem;
  }

  .pq-episode-edit-layout .mt-3,
  .pq-question-split-row .mt-3 {
    margin-top: 0.85rem !important;
  }

  .pq-episode-edit-layout .mt-4,
  .pq-question-split-row .mt-4 {
    margin-top: 1rem !important;
  }

  .pq-episode-edit-layout .form-label,
  .pq-question-split-row .form-label {
    margin-bottom: 0.28rem;
  }

  .pq-episode-edit-layout .form-text,
  .pq-question-split-row .form-text {
    margin-top: 0.28rem;
    font-size: 0.75rem;
    line-height: 1.22;
  }

  .pq-episode-edit-layout textarea[name="notes"] {
    min-height: 110px;
  }

  .pq-question-main-card textarea[name="question"],
  .pq-question-main-card textarea[name="admin_context_notes"],
  .pq-question-main-card textarea[name="admin_idea_notes"] {
    min-height: var(--pq-question-main-textarea-height);
  }

  .pq-question-split-right .pq-question-plan-card .card-body {
    gap: 8px;
  }

  .pq-question-split-right .pq-question-answer-card .card-body {
    padding: 12px;
  }

  .pq-question-split-right .pq-question-answer-card [data-pq-answer-preview="1"],
  .pq-question-split-right .pq-question-answer-card [data-pq-answer-form="1"] textarea[name="answer_text"] {
    min-height: 190px;
  }

  .pq-answer-content-wrap {
    min-height: 190px;
  }

  .pq-episode-edit-layout .pq-empty,
  .pq-question-split-row .pq-empty {
    padding: 14px;
  }
}

.pq-episode-edit-layout {
  --bs-gutter-y: 0;
}

.pq-episode-edit-layout.row > * {
  margin-top: 0;
}

@media (min-width: 1200px) and (max-height: 1100px) {
  .pq-question-split-row {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
  }

  .pq-question-split-row .pq-card .card-header {
    padding: 8px 10px;
  }

  .pq-question-split-row .pq-card .card-body {
    padding: 10px;
  }

  .pq-question-main-card .mb-3 {
    margin-bottom: 0.65rem !important;
  }

  .pq-question-main-card .mt-1 {
    margin-top: 0.35rem !important;
  }

  .pq-question-main-card .mt-4 {
    margin-top: 0.85rem !important;
  }

  .pq-question-main-card .row.g-3,
  .pq-question-split-right .row.g-2 {
    --bs-gutter-x: 0.7rem;
    --bs-gutter-y: 0.55rem;
  }

  .pq-question-main-card .form-label,
  .pq-question-split-right .form-label {
    margin-bottom: 0.22rem;
    font-size: 0.88rem;
  }

  .pq-question-main-card .form-text {
    margin-top: 0.18rem;
    font-size: 0.71rem;
    line-height: 1.16;
  }

  .pq-question-main-card {
    --pq-question-main-textarea-height: 124px;
  }

  .pq-question-main-card input[name="tags"] + .form-text,
  .pq-question-main-card #pqPublicVisibleSwitch ~ .form-text {
    display: none;
  }

  .pq-question-main-actions {
    gap: 0.5rem !important;
  }

  .pq-question-edit-stack > .pq-card + .pq-card {
    margin-top: 0.85rem;
  }

  .pq-question-top-left {
    gap: 0.5rem;
  }

  .pq-question-rating-stack {
    gap: 0.75rem;
  }

  .pq-question-top-left textarea[name="question"] {
    min-height: var(--pq-question-main-textarea-height);
  }

  .pq-question-split-right .pq-question-plan-card .card-body,
  .pq-question-split-right .pq-question-answer-card .card-body {
    padding: 10px;
  }

  .pq-question-split-right .pq-question-plan-card .card-body {
    gap: 6px;
  }

  .pq-question-split-right .pq-plan-slot,
  .pq-question-split-right .pq-plan-state {
    padding: 8px 10px;
  }

  .pq-question-split-right .pq-question-answer-card .d-flex.align-items-center.justify-content-between.gap-2.mb-2 {
    margin-bottom: 0.45rem !important;
  }

  .pq-question-split-right .pq-question-answer-card [data-pq-answer-preview="1"],
  .pq-question-split-right .pq-question-answer-card [data-pq-answer-form="1"] textarea[name="answer_text"],
  .pq-answer-content-wrap {
    min-height: 140px;
  }

  .pq-question-split-right .pq-answer-ai-tools {
    padding: 8px 10px;
  }

  .pq-question-answered-inline {
    min-height: 34px;
    gap: 0.7rem;
    font-size: 0.92rem;
  }

  .pq-question-answered-inline-time {
    font-size: 0.82rem;
  }
}

.pq-source-usage-note {
  font-size: 0.64rem !important;
  line-height: 1.15;
  opacity: 0.72;
}

.pq-source-label-with-action .btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Keep one consistent card shadow across the app. */
.card {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
}


  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.96;
    transform: scale(0.997);
  }
}

/* Calendar create-episode modal: bring it visually closer to the standalone page. */
#pqCreateEpisodeModal .modal-dialog {
  max-width: min(1120px, calc(100vw - 2rem));
}

#pqCreateEpisodeModal .modal-content {
  border: 1px solid var(--pq-episode-border);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(249, 244, 236, 0.98), rgba(243, 237, 226, 0.96));
  box-shadow: 0 28px 80px rgba(27, 27, 27, 0.18);
  overflow: hidden;
  max-height: calc(100vh - var(--pq-topbar-height) - 1.25rem);
  max-height: calc(100dvh - var(--pq-topbar-height) - 1.25rem);
}

#pqCreateEpisodeModal .modal-header {
  align-items: flex-start;
  padding: 22px 22px 8px;
  border-bottom: 1px solid rgba(130, 95, 70, 0.14);
  background: rgba(251, 247, 239, 0.82);
}

#pqCreateEpisodeModal .modal-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.55vw, 1.8rem);
  letter-spacing: -0.02em;
}

#pqCreateEpisodeModal .modal-body {
  padding: 8px 22px 22px;
  overflow-y: auto;
  background: rgba(247, 242, 231, 0.68);
}

#pqCreateEpisodeModal .pq-create-episode-modal-kicker {
  margin-bottom: 4px;
  color: rgba(130, 95, 70, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pqCreateEpisodeModal .pq-create-episode-modal-shell {
  border: 1px solid var(--pq-episode-border);
  border-radius: 18px;
  background: rgba(248, 243, 235, 0.92);
  box-shadow: 0 14px 34px rgba(111, 72, 58, 0.06);
  padding: 18px;
}

#pqCreateEpisodeModal .pq-create-episode-modal-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(130, 95, 70, 0.12);
}

#pqCreateEpisodeModal .pq-create-episode-modal-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(130, 95, 70, 0.16);
  background: rgba(255, 251, 246, 0.95);
  color: rgba(81, 58, 44, 0.82);
  font-size: 0.78rem;
  line-height: 1.2;
}

#pqCreateEpisodeModal .pq-create-episode-modal-form .form-text {
  margin-top: 0.45rem;
}

.pq-pill-public {
  font-weight: 700;
}

.pq-pill-public-visible {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.34);
  color: rgba(25, 135, 84, 0.95);
}

.pq-pill-public-hidden {
  background: rgba(108, 117, 125, 0.12);
  border-color: rgba(108, 117, 125, 0.3);
  color: rgba(52, 58, 64, 0.9);
}

/* ============================================================
   PILLS / TAGS – NEUTRAL HULL
   ------------------------------------------------------------
   All pills share the same quiet shell. Only text + icon color
   vary by status/type.
   ============================================================ */

.pq-pill,
.pq-pill-id,
.pq-pill-order,
.pq-pill-date,
.pq-pill-status,
.pq-pill-source,
.pq-pill-tag,
.pq-pill-episode-kind,
.pq-pill-episode-label,
.pq-pill-public,
.pq-pill-priority[class*="pq-prio-"],
.pq-qmeta .pq-pill[class*="pq-pill-tx-"] {
  background: var(--pq-pill-neutral-bg) !important;
  border-color: var(--pq-pill-neutral-border) !important;
  box-shadow: var(--pq-pill-neutral-shadow) !important;
}

.pq-pill i,
.pq-pill-id i,
.pq-pill-order i,
.pq-pill-date i,
.pq-pill-status i,
.pq-pill-source i,
.pq-pill-tag i,
.pq-pill-episode-kind i,
.pq-pill-episode-label i,
.pq-pill-public i,
.pq-pill-priority i {
  color: inherit;
}

:is(
  .pq-item.pq-item-episode,
  .pq-card.pq-card-episode,
  .pq-card-episode-surface,
  .pq-episodes-panel,
  .pq-episode-edit-layout .pq-card
) :is(
  .pq-pill,
  .pq-pill-id,
  .pq-pill-order,
  .pq-pill-date,
  .pq-pill-status,
  .pq-pill-source,
  .pq-pill-tag,
  .pq-pill-episode-kind,
  .pq-pill-episode-label,
  .pq-pill-public,
  .pq-pill-priority[class*="pq-prio-"]
) {
  background: var(--pq-pill-episode-bg) !important;
  border-color: var(--pq-pill-episode-border) !important;
  box-shadow: var(--pq-pill-episode-shadow) !important;
}

.pq-episode-edit-layout .pq-episode-questions-card :is(
  .pq-pill,
  .pq-pill-id,
  .pq-pill-order,
  .pq-pill-date,
  .pq-pill-status,
  .pq-pill-source,
  .pq-pill-tag,
  .pq-pill-episode-kind,
  .pq-pill-episode-label,
  .pq-pill-public,
  .pq-pill-priority[class*="pq-prio-"]
) {
  background: var(--pq-pill-neutral-bg) !important;
  border-color: var(--pq-pill-neutral-border) !important;
  box-shadow: var(--pq-pill-neutral-shadow) !important;
}

.pq-planner-layout .pq-planner-question-card :is(
  .pq-pill,
  .pq-pill-id,
  .pq-pill-order,
  .pq-pill-date,
  .pq-pill-status,
  .pq-pill-source,
  .pq-pill-tag,
  .pq-pill-episode-kind,
  .pq-pill-episode-label,
  .pq-pill-public,
  .pq-pill-priority[class*="pq-prio-"]
) {
  background: var(--pq-pill-neutral-bg) !important;
  border-color: var(--pq-pill-neutral-border) !important;
  box-shadow: var(--pq-pill-neutral-shadow) !important;
}

.pq-planner-layout .pq-planner-question-card .pq-qorder,
.pq-planner-layout .pq-list-episode .pq-qorder {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(27, 27, 27, 0.14) !important;
  box-shadow: 0 1px 2px rgba(27, 27, 27, 0.04) !important;
  color: rgba(27, 27, 27, 0.82) !important;
}

@media (min-width: 992px) {
  .pq-planner-layout .pq-card-episode .card-body {
    overflow: hidden;
  }

  .pq-planner-layout .pq-card-episode .pq-list-episode {
    max-height: min(58vh, 720px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

body.pq-question-form-page .form-control,
body.pq-question-form-page .form-select {
  background-color: #ffffff !important;
}

body.pq-question-page .form-control,
body.pq-question-page .form-select {
  background-color: #ffffff !important;
}

body.pq-episode-form-page .form-control,
body.pq-episode-form-page .form-select,
body.pq-episode-edit-page .pq-sticky-sidebar .form-control,
body.pq-episode-edit-page .pq-sticky-sidebar .form-select,
#pqCreateEpisodeModal .form-control,
#pqCreateEpisodeModal .form-select {
  border-color: rgba(130, 95, 70, 0.24) !important;
}

body.pq-episode-form-page .form-control:focus,
body.pq-episode-form-page .form-select:focus,
body.pq-episode-edit-page .pq-sticky-sidebar .form-control:focus,
body.pq-episode-edit-page .pq-sticky-sidebar .form-select:focus,
#pqCreateEpisodeModal .form-control:focus,
#pqCreateEpisodeModal .form-select:focus {
  border-color: rgba(130, 95, 70, 0.42) !important;
  box-shadow: 0 0 0 0.25rem rgba(130, 95, 70, 0.14) !important;
}

.pq-episode-title-textarea {
  min-height: 4.9rem;
  resize: vertical;
}

body.pq-admin .form-control:disabled,
body.pq-admin .form-select:disabled,
body.pq-admin .form-control[readonly],
body.pq-admin .form-select[readonly] {
  background: rgba(33, 37, 41, 0.07) !important;
  border-color: rgba(27, 27, 27, 0.24) !important;
  color: rgba(33, 37, 41, 0.62) !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 0 0 1px rgba(27, 27, 27, 0.02) !important;
  opacity: 1 !important;
}

body.pq-admin .form-control:disabled::placeholder,
body.pq-admin .form-control[readonly]::placeholder {
  color: rgba(33, 37, 41, 0.48) !important;
}

@media (max-width: 767.98px) {
  #pqCreateEpisodeModal .modal-header {
    padding: 18px 18px 6px;
  }

  #pqCreateEpisodeModal .modal-body {
    padding: 8px 18px 18px;
  }

  #pqCreateEpisodeModal .pq-create-episode-modal-shell {
    padding: 16px;
  }

  #pqCreateEpisodeModal .pq-create-episode-modal-intro {
    align-items: flex-start;
  }
}

/* Question source-types modal: align with the newer admin modal language. */
#pqManageSourceTypesModal .modal-dialog {
  max-width: min(980px, calc(100vw - 2rem));
}

#pqManageSourceTypesModal .modal-content {
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: 0 28px 80px rgba(27, 27, 27, 0.18);
  overflow: hidden;
  max-height: calc(100vh - var(--pq-topbar-height) - 1.25rem);
  max-height: calc(100dvh - var(--pq-topbar-height) - 1.25rem);
}

#pqManageSourceTypesModal .modal-header {
  align-items: flex-start;
  padding: 22px 22px 8px;
  border-bottom: 0;
}

#pqManageSourceTypesModal .modal-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.55vw, 1.8rem);
  letter-spacing: -0.02em;
}

#pqManageSourceTypesModal .modal-body {
  padding: 8px 22px 22px;
  overflow-y: auto;
}

#pqManageSourceTypesModal .pq-source-types-modal-kicker {
  margin-bottom: 4px;
  color: rgba(var(--pq-brand-rgb), 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#pqManageSourceTypesModal .pq-source-types-modal-shell {
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 18px;
  background: var(--pq-surface);
  box-shadow: 0 14px 34px rgba(27, 27, 27, 0.08);
  padding: 18px;
}

#pqManageSourceTypesModal .pq-source-types-modal-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(27, 27, 27, 0.08);
}

#pqManageSourceTypesModal .pq-source-types-modal-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--pq-brand-rgb), 0.18);
  background: rgba(var(--pq-brand-rgb), 0.08);
  color: rgba(27, 27, 27, 0.7);
  font-size: 0.78rem;
  line-height: 1.2;
}

#pqManageSourceTypesModal .pq-source-type-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

#pqManageSourceTypesModal .pq-source-type-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 16px;
  white-space: nowrap;
}

#pqManageSourceTypesModal .pq-source-types-empty-state {
  margin-top: 4px;
}

#pqManageSourceTypesModal .pq-source-types-manage-list {
  max-height: calc(100vh - var(--pq-topbar-height) - 250px);
  max-height: calc(100dvh - var(--pq-topbar-height) - 250px);
  overflow-y: auto;
  padding-right: 4px;
}

#pqManageSourceTypesModal .pq-source-manage-item {
  border: 1px solid rgba(27, 27, 27, 0.10);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247, 242, 231, 0.62));
  box-shadow: 0 10px 22px rgba(27, 27, 27, 0.06);
  padding: 14px;
}

#pqManageSourceTypesModal .pq-source-manage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

#pqManageSourceTypesModal .pq-source-manage-badge,
#pqManageSourceTypesModal .pq-source-manage-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27, 27, 27, 0.12);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

#pqManageSourceTypesModal .pq-source-manage-badge {
  background: rgba(var(--pq-brand-rgb), 0.10);
  border-color: rgba(var(--pq-brand-rgb), 0.25);
  color: var(--pq-brand-dark);
}

#pqManageSourceTypesModal .pq-source-manage-state-used {
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.40);
  color: rgba(90, 68, 8, 0.96);
}

#pqManageSourceTypesModal .pq-source-manage-state-free {
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.34);
  color: rgba(25, 135, 84, 0.95);
}

#pqManageSourceTypesModal .pq-source-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

#pqManageSourceTypesModal .pq-source-manage-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin: 0;
}

#pqManageSourceTypesModal .pq-source-manage-icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

#pqManageSourceTypesModal .pq-source-manage-icon-btn.disabled,
#pqManageSourceTypesModal .pq-source-manage-icon-btn:disabled {
  opacity: 0.5;
  box-shadow: none !important;
}

#pqManageSourceTypesModal .pq-source-usage-note {
  margin-top: 10px;
  font-size: 0.78rem !important;
  color: rgba(27, 27, 27, 0.58);
}

@media (max-height: 900px) {
  #pqCreateEpisodeModal .modal-dialog,
  #pqManageSourceTypesModal .modal-dialog {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #pqCreateEpisodeModal .modal-content,
  #pqManageSourceTypesModal .modal-content {
    border-radius: 20px;
  }

  #pqCreateEpisodeModal .modal-header,
  #pqManageSourceTypesModal .modal-header {
    padding: 18px 18px 6px;
  }

  #pqCreateEpisodeModal .modal-body,
  #pqManageSourceTypesModal .modal-body {
    padding: 8px 18px 18px;
  }

  #pqCreateEpisodeModal .pq-create-episode-modal-shell,
  #pqManageSourceTypesModal .pq-source-types-modal-shell {
    padding: 15px;
  }

  #pqCreateEpisodeModal .pq-create-episode-modal-intro,
  #pqManageSourceTypesModal .pq-source-types-modal-intro {
    gap: 8px 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  #pqManageSourceTypesModal .pq-source-type-add-form {
    gap: 10px;
    margin-bottom: 14px;
  }

  #pqManageSourceTypesModal .pq-source-manage-item {
    padding: 12px;
  }

  #pqManageSourceTypesModal .pq-source-manage-meta {
    margin-bottom: 10px;
  }

  #pqManageSourceTypesModal .pq-source-manage-icon-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  #pqManageSourceTypesModal .pq-source-types-manage-list {
    max-height: calc(100vh - var(--pq-topbar-height) - 215px);
    max-height: calc(100dvh - var(--pq-topbar-height) - 215px);
  }
}

@media (max-width: 767.98px) {
  #pqManageSourceTypesModal .modal-header {
    padding: 18px 18px 6px;
  }

  #pqManageSourceTypesModal .modal-body {
    padding: 8px 18px 18px;
  }

  #pqManageSourceTypesModal .pq-source-types-modal-shell {
    padding: 16px;
  }

  #pqManageSourceTypesModal .pq-source-types-modal-intro,
  #pqManageSourceTypesModal .pq-source-type-add-form,
  #pqManageSourceTypesModal .pq-source-manage-row,
  #pqManageSourceTypesModal .pq-source-manage-form {
    grid-template-columns: 1fr;
  }

  #pqManageSourceTypesModal .pq-source-manage-icon-btn,
  #pqManageSourceTypesModal .pq-source-type-add-btn {
    width: 100%;
  }
}