:root {
  color-scheme: light;
  --font-sans:
    "Fira Sans", "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-emphasis:
    "Open Sans", "Fira Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-mono: "Fira Code", monospace;
  --bg: #f3f5f7;
  --bg-accent: #e9eef2;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --sidebar: #4d5258;
  --sidebar-active: #63686f;
  --sidebar-line: rgba(255, 255, 255, 0.18);
  --ink: #19242e;
  --muted: #5d6b76;
  --line: #d6dde3;
  --line-strong: #bcc7cf;
  --primary: #f3c22f;
  --primary-ink: #101418;
  --brand: #0e8aa6;
  --brand-deep: #0c7891;
  --success-bg: #e9f6ee;
  --success-line: #29a162;
  --info-bg: #eaf5fb;
  --info-line: #2d7ba6;
  --warning-bg: #fff6dc;
  --warning-line: #e2a61a;
  --chip: #eef3f6;
  --chip-certified: #d9f1f6;
  --shadow-soft: 0 18px 40px rgba(16, 24, 32, 0.08);
  --shadow-card: 0 6px 20px rgba(16, 24, 32, 0.06);
  --radius-panel: 20px;
  --radius-card: 14px;
  --radius-pill: 999px;
}

:root[data-display-theme="dark"] {
  color-scheme: dark;
  --bg: #0f151a;
  --bg-accent: #142028;
  --surface: #17222a;
  --surface-soft: #1d2b35;
  --sidebar: #101920;
  --sidebar-active: #1d2c36;
  --sidebar-line: rgba(255, 255, 255, 0.12);
  --ink: #ecf4f8;
  --muted: #aabdc8;
  --line: #2d3c46;
  --line-strong: #42535f;
  --primary: #e6bb43;
  --primary-ink: #101418;
  --brand: #63c8df;
  --brand-deep: #84d7e8;
  --success-bg: #163426;
  --success-line: #57c27f;
  --info-bg: #163447;
  --info-line: #6db6e0;
  --warning-bg: #423415;
  --warning-line: #e9be59;
  --chip: #22323d;
  --chip-certified: #153844;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body,
.app-root {
  min-height: 100%;
}

/*
 * Hash-link navigation (sidebar links in the user guide and project timeline
 * mini-apps, in-page anchors elsewhere) must land BELOW the fixed 100px app
 * header, otherwise the target heading is hidden under it and the browser
 * appears to have scrolled too far. `scroll-padding-top` on the scroll
 * container is the correct primitive for this — it does not affect layout,
 * it only offsets the browser's scroll-into-view anchor calculation. Falls
 * back to the raw 100px if `--app-header-height` is not defined (e.g. before
 * the `.app-shell` element has mounted).
 */
html {
  scroll-padding-top: calc(var(--app-header-height, 100px) + 0.75rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(
      circle at top right,
      rgba(14, 138, 166, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(243, 194, 47, 0.12),
      transparent 22%
    ),
    linear-gradient(180deg, var(--bg), #f7f8fa 52%, var(--bg-accent));
}

:root[data-display-theme="dark"] body {
  background:
    radial-gradient(
      circle at top right,
      rgba(99, 200, 223, 0.16),
      transparent 26%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(230, 187, 67, 0.18),
      transparent 22%
    ),
    linear-gradient(180deg, var(--bg), #131d24 52%, var(--bg-accent));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root[data-display-motion="reduced"] *,
:root[data-display-motion="reduced"] *::before,
:root[data-display-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
th,
.button,
.tab-link,
.editor-tab,
.page-title,
.header-eyebrow,
.resource-hero-prompt101-mark,
.resource-hero-prompt101-title,
.resource-hero-discovery-mark,
.prompt-card-title,
.metric-label,
.metric-value,
.metrics-section-title,
.metrics-insights-title,
.resource-card-title,
.resource-section-eyebrow,
.resource-section-title,
.notification-title,
.empty-title,
.notice-title,
.tips-title,
.editor-panel-title,
.editor-panel-kicker,
.field-label,
.detail-meta-label,
.notification-item-title,
.status-chip,
.badge-count,
.user-chip,
.boot-eyebrow,
.data-table tbody td::before {
  font-family: var(--font-emphasis);
}

a {
  color: inherit;
}

.app-frame {
  min-height: 0;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
}

.app-shell {
  --app-sidebar-width: 256px;
  --app-header-height: 100px;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  /* Add a small breathing gap below the fixed topbar so inline notification
     banners at the top of a view don't sit flush against it. */
  padding-top: calc(var(--app-header-height) + 0.75rem);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 40;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-sidebar {
  background: linear-gradient(180deg, var(--sidebar), #42464b);
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand-logo {
  display: block;
  width: 100%;
  max-width: 176px;
  height: auto;
  flex: 0 0 auto;
}

.sidebar-nav {
  padding: 0 0 1rem;
  display: grid;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 1rem;
  border-top: 1px solid var(--sidebar-line);
  color: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 120ms ease;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link.is-active {
  background: var(--sidebar-active);
}

.sidebar-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-link span {
  line-height: 1.2;
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--sidebar-line);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  line-height: 1.5;
  display: grid;
  gap: 0.15rem;
}

.sidebar-footer > :first-child {
  color: rgba(255, 255, 255, 0.92);
}

.sidebar-footer > :last-child {
  color: rgba(255, 255, 255, 0.72);
}

.app-main {
  min-width: 0;
}

.app-header {
  min-height: var(--app-header-height);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.header-brand-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.header-brand-mark:focus-visible {
  outline: 2px solid rgba(14, 138, 166, 0.28);
  outline-offset: 3px;
}

.header-brand-mark .brand-logo {
  display: block;
  max-width: 140px;
  width: 100%;
  height: auto;
}

.header-brand-mark .brand-logo-dark {
  display: none;
}

.header-brand-icon {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.25rem 0.35rem;
  margin: -0.25rem -0.35rem;
  cursor: pointer;
}

.header-title-group:focus-visible {
  outline: 2px solid rgba(14, 138, 166, 0.28);
  outline-offset: 2px;
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.header-eyebrow {
  margin: 0;
  font-family: var(--font-emphasis);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
  color: var(--brand-deep);
}

.header-subtitle {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.display-preferences {
  position: relative;
}

.display-preferences > summary {
  list-style: none;
}

.display-preferences > summary::-webkit-details-marker {
  display: none;
}

.display-preferences-toggle {
  min-width: 0;
}

.display-preferences-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-preferences[open] .display-preferences-toggle {
  border-color: rgba(14, 138, 166, 0.34);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.14);
}

.display-preferences-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.95rem;
  z-index: 24;
}

.display-preferences-section {
  display: grid;
  gap: 0.55rem;
}

.display-preferences-label {
  margin: 0;
  font-family: var(--font-emphasis);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.display-preferences-options {
  display: grid;
  gap: 0.55rem;
}

.display-preferences-options-theme {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.display-preferences-options-motion {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.display-preferences-option {
  position: relative;
  display: block;
}

.display-preferences-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.display-preferences-option span {
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.display-preferences-option span:hover {
  transform: translateY(-1px);
}

.display-preferences-option input:focus-visible + span {
  outline: 2px solid rgba(14, 138, 166, 0.32);
  outline-offset: 3px;
}

.display-preferences-option input:checked + span {
  border-color: rgba(14, 138, 166, 0.42);
  background: rgba(14, 138, 166, 0.14);
  color: var(--brand-deep);
  box-shadow: 0 0 0 1px rgba(14, 138, 166, 0.14);
}

.display-preferences-footnote {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.header-action,
.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  /*
   * Kill user-agent styling so a `<button>` and an `<a class="button">`
   * render at pixel-identical dimensions. Without this the native button
   * picks up an intrinsic focus ring / inner padding that offsets its label
   * ~1–2px vs. the anchor, which is what makes rows like the prompt-detail
   * "Edit Prompt / Retire Prompt" pair look misaligned.
   */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}

/* Firefox's inner focus box adds 1px of extra height. Remove it. */
button.button::-moz-focus-inner,
.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.header-action:hover,
.button:hover,
.icon-button:hover,
.header-action:focus-visible,
.button:focus-visible,
.icon-button:focus-visible {
  transform: translateY(-1px);
}

.button {
  min-height: 44px;
  padding: 0 1rem;
  font-weight: 700;
}

.button:disabled,
.button[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.button-primary {
  background: linear-gradient(180deg, #f7ca48, var(--primary));
  color: var(--primary-ink);
  box-shadow: 0 8px 18px rgba(243, 194, 47, 0.28);
}

.button-secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.button-inline {
  min-height: 32px;
  padding: 0 0.75rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

.button-small {
  min-height: 30px;
  padding: 0 0.7rem;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
}

.button-icon {
  width: 18px;
  height: 18px;
}

.icon-button,
.header-action {
  width: 44px;
  height: 44px;
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  position: relative;
}

.icon-button svg,
.header-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #c61d2d;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border: 2px solid var(--surface);
}

.user-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #101418;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Header search — a lightweight "jump to search" input that navigates to the
   dashboard's rich search UI via /?q=<term>. The dashboard reads the `q`
   query param on mount (see views/dashboard/index.js) so we deliberately do
   not duplicate its results here. */
.header-search {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 18rem;
  margin: 0 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-label {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: inline-flex;
  pointer-events: none;
}

.header-search-label svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 2.4rem 0 2.4rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

/* Suppress the browser's native <input type="search"> clear affordance so the
   custom .header-search-clear button below is the single source of truth. */
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.header-search-input::placeholder {
  color: var(--muted);
}

.header-search-input:focus-visible {
  outline: none;
  border-color: rgba(14, 138, 166, 0.42);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.14);
  background: var(--surface);
}

/* Custom clear button. Kept in the DOM at all times and hidden with the
   :placeholder-shown sibling selector so the browser toggles visibility with
   no JS. The delegated click handler in core/app.js clears the input's
   value and re-focuses it so the user can keep typing. */
.header-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.header-search-clear:hover,
.header-search-clear:focus-visible {
  background: var(--line);
  color: var(--ink);
  outline: none;
}

.header-search-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-search-input:placeholder-shown ~ .header-search-clear {
  display: none;
}

/* Suggestions dropdown — rendered inside the .header-search form so the
   :focus-within trick and the relative positioning work without JS. The
   painter in core/app.js populates the panel; the CSS only handles
   layout / theming / show-hide. */
.header-search-suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 0.35rem;
  z-index: 30;
  max-height: min(60vh, 22rem);
  overflow-y: auto;
}

.header-search-suggestions[hidden] {
  display: none;
}

.header-search-suggestion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.header-search-suggestion:hover,
.header-search-suggestion.is-active,
.header-search-suggestion:focus-visible {
  background: var(--surface-soft);
  outline: none;
}

.header-search-suggestion svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  flex: 0 0 auto;
}

.header-search-suggestion-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-search-suggestion-meta {
  color: var(--muted);
  font-size: 0.78rem;
  flex: 0 0 auto;
}

/* Profile menu — collapses Display + Sign out under the user chip.
   Uses the same <details>/<summary> pattern as .display-preferences so it
   works without JS for open/close, then core/app.js only needs to hook the
   [data-shell-logout] click inside the panel (which is already delegated at
   the document level). */
.profile-menu {
  position: relative;
}

.profile-menu > summary {
  list-style: none;
  cursor: pointer;
}

.profile-menu > summary::-webkit-details-marker {
  display: none;
}

.profile-menu-toggle {
  border: 1px solid transparent;
  transition:
    box-shadow 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.profile-menu-toggle:hover,
.profile-menu-toggle:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.profile-menu[open] > .profile-menu-toggle {
  border-color: rgba(14, 138, 166, 0.34);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.14);
}

/* Small chevron badge tucked into the bottom-right of the circular profile
   avatar so the chip reads as a menu opener rather than a static badge. The
   badge sits on its own ring of surface colour so it stays legible on both
   the light and dark headers, and rotates 180° while the menu is open. */
.profile-menu-toggle {
  position: relative;
  overflow: visible;
}

.profile-menu-caret {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  padding: 1px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--surface);
  transition: transform 160ms ease;
  pointer-events: none;
}

.profile-menu[open] > .profile-menu-toggle .profile-menu-caret {
  transform: rotate(180deg);
}

.profile-menu-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.5rem;
  z-index: 25;
}

.profile-menu-identity {
  padding: 0.5rem 0.75rem 0.25rem;
  display: grid;
  gap: 0.15rem;
}

.profile-menu-name {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}

.profile-menu-email {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  word-break: break-word;
}

.profile-menu-roles {
  margin: 0.2rem 0 0;
  color: var(--brand-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 0.15rem 0.25rem;
}

.profile-menu-section {
  padding: 0 0.25rem;
}

.profile-menu-item {
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible {
  background: var(--surface-soft);
  outline: none;
}

.profile-menu-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-menu-item-danger:hover,
.profile-menu-item-danger:focus-visible {
  background: rgba(198, 29, 45, 0.08);
  color: #c61d2d;
}

/* Display preferences shown inline inside the profile menu. Overrides the
   floating-panel positioning inherited from .display-preferences-panel so it
   flows as a normal block inside the profile dropdown. */
.display-preferences-inline {
  position: static;
}

.display-preferences-toggle-inline {
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.display-preferences-toggle-inline:hover,
.display-preferences-toggle-inline:focus-visible {
  background: var(--surface-soft);
  outline: none;
}

.display-preferences-toggle-inline svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-preferences-toggle-inline::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.display-preferences-inline[open] > .display-preferences-toggle-inline::after {
  transform: rotate(45deg);
}

.display-preferences-panel-inline {
  position: static;
  width: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}

/* On narrow viewports the header search collapses to give notifications and
   the primary action room. Users can still reach search from the dashboard
   directly. */
@media (max-width: 900px) {
  .header-search {
    display: none;
  }
}

.content-shell {
  padding: 0 2rem 3rem;
}

.page-section {
  display: grid;
  gap: 1.75rem;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.page-title {
  margin: 0;
  padding: 0.4rem 0.25rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.page-copy {
  margin: 0.45rem 0 0;
  padding: 0.25rem;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.6;
}

.card,
.surface-panel,
.metric-card,
.prompt-card,
.empty-state,
.table-panel,
.boot-screen,
.notice-panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: var(--shadow-card);
}

.surface-panel,
.table-panel,
.notice-panel,
.boot-screen,
.empty-state {
  border-radius: var(--radius-panel);
}

.surface-panel,
.table-panel,
.notice-panel,
.empty-state {
  padding: 1.75rem;
}

.portal-search {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}

/*
 * Scoped variant: rendered inside a table/panel header where the input
 * filters only the rows on that page. Visually flatter than the default
 * pill so users can tell at a glance it is not the global topbar search.
 */
.portal-search-scoped {
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: 32rem;
}

.portal-search-scoped .search-field-shell {
  flex: 1 1 auto;
}

.portal-search-scoped .search-input {
  min-height: 40px;
  border-radius: 10px;
  border-color: var(--line);
  background: var(--surface-muted, var(--surface));
  font-size: 0.92rem;
}

.portal-search-scoped .search-input:focus,
.portal-search-scoped .search-input:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
}

.portal-search-scoped .search-input-wrap svg {
  width: 15px;
  height: 15px;
  left: 0.85rem;
  opacity: 0.7;
}

.portal-search-scoped .search-input {
  padding-left: 2.4rem;
}

.portal-search-scoped .button {
  min-height: 40px;
  border-radius: 10px;
  padding: 0 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.search-field-shell {
  flex: 1 1 24rem;
  min-width: 0;
  position: relative;
}

.search-input-wrap {
  display: block;
  position: relative;
}

.search-input-wrap svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
}

.search-input {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem 0 2.9rem;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.search-assist-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  right: 0;
  z-index: 8;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(16, 24, 32, 0.14);
  overflow: hidden;
}

.search-assist-inner {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem;
}

.search-assist-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.search-assist-list {
  display: grid;
  gap: 0.35rem;
}

.search-assist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.search-assist-item-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.search-assist-item-label {
  display: block;
  font-weight: 700;
}

.search-assist-item-meta {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.search-assist-item:hover,
.search-assist-item.is-active {
  background: #eef5f8;
}

.search-assist-item:focus-visible {
  background: #eef5f8;
  outline: 2px solid rgba(14, 138, 166, 0.48);
  outline-offset: 2px;
}

.search-assist-empty {
  margin: 0;
  padding: 0.15rem 0.2rem 0.2rem;
  color: var(--muted);
  line-height: 1.5;
}

.search-input:focus,
.filter-select:focus,
.filter-checkbox input:focus-visible + span {
  outline: 2px solid rgba(14, 138, 166, 0.28);
  outline-offset: 2px;
}

.tabs {
  display: flex;
  gap: 1.2rem;
  border-bottom: 1px solid rgba(25, 36, 46, 0.08);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-link {
  position: relative;
  padding: 0 0 0.8rem;
  border: 0;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.tab-link.is-active {
  color: var(--brand-deep);
}

.tab-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}

.filter-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-stack {
  display: grid;
  gap: 0.35rem;
  min-width: 220px;
}

.filter-stack-multiselect {
  position: relative;
}

.filter-stack-label {
  padding: 0.4rem 1rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

/* When a CustomSelect is used inside the filter bar, match the visual
 * treatment of the sibling native filter labels (uppercase brand-deep
 * caption above the trigger) so heights and horizontal edges align. */
.filter-bar .custom-select .custom-select-label,
.filter-bar .custom-select .custom-select-label.filter-stack-label {
  padding: 0.4rem 1rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  cursor: default;
}

.filter-bar .filter-stack .custom-select {
  gap: 0.35rem;
}

.filter-select,
.filter-multiselect-trigger {
  width: 100%;
  min-height: 44px;
  padding: 0 2.5rem 0 1rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235d6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  color: var(--ink);
  font: inherit;
}

.filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-multiselect-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.filter-multiselect-trigger-value {
  color: var(--ink);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-multiselect-trigger-icon {
  display: none;
}

.filter-multiselect-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 8;
  width: min(300px, 100vw - 3rem);
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(16, 24, 32, 0.14);
  display: grid;
  gap: 0.55rem;
}

.filter-multiselect-panel[hidden] {
  display: none;
}

.filter-multiselect-options {
  display: grid;
  gap: 0.35rem;
  max-height: 260px;
  overflow: auto;
  padding-right: 0.15rem;
}

.filter-multiselect-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--surface-soft);
  cursor: pointer;
}

.filter-multiselect-option-select-all {
  border: 1px solid rgba(14, 138, 166, 0.16);
  background: rgba(14, 138, 166, 0.08);
}

.filter-multiselect-option input {
  width: 16px;
  height: 16px;
}

.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.filter-checkbox input {
  width: 16px;
  height: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.dashboard-content-stack {
  display: grid;
  gap: 1.25rem;
}

.dashboard-personalization-panel {
  display: grid;
  gap: 1.25rem;
}

.dashboard-personalization-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dashboard-personalization-copy {
  margin: 0.45rem 0 0;
  color: var(--muted);
  max-width: 64ch;
  line-height: 1.6;
}

.dashboard-personalization-signals {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.dashboard-personalization-signal,
.dashboard-personalization-reason {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.08);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-personalization-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.dashboard-personalization-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.55rem;
  height: 100%;
}

.dashboard-personalization-card > .prompt-card {
  height: 100%;
}

.dashboard-personalization-reason {
  margin: 0;
  justify-self: start;
}

.dashboard-grid-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
}

.dashboard-grid-kicker {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.25rem;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-grid-title {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
}

.dashboard-grid-count {
  margin: 0;
  padding: 0.4rem 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.dashboard-card-slot {
  display: flex;
  flex-direction: column;
}

.dashboard-card-slot.is-hidden {
  display: none;
}

.dashboard-load-more-row {
  display: flex;
  justify-content: center;
}

.prompt-card {
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(14, 30, 37, 0.07);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.prompt-card:hover,
.prompt-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(14, 138, 166, 0.28);
  box-shadow: 0 22px 42px rgba(14, 30, 37, 0.1);
}

.prompt-card:focus-visible {
  outline: 3px solid rgba(14, 138, 166, 0.22);
  outline-offset: 3px;
}

.prompt-card-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.prompt-card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: calc(1.05rem * 1.35 * 2);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip-certified {
  background: var(--chip-certified);
  color: var(--brand-deep);
}

.status-chip-pendingcertification,
.status-chip-inreview {
  background: #fff5d8;
  color: #9f6a00;
}

.status-chip-denied {
  background: #fbe7ea;
  color: #a11c31;
}

.status-chip-retired {
  background: #ece7df;
  color: #6c5844;
}

.prompt-card-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: calc(1rem * 1.55 * 3);
}

.prompt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-height: calc((0.76rem * 1.4 + 0.36rem + 2px) * 2 + 0.45rem);
  overflow: hidden;
}

.prompt-engagement {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prompt-engagement-item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(14, 138, 166, 0.08);
  color: var(--brand-deep);
  font-size: 0.76rem;
  font-weight: 600;
}

.prompt-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--muted);
  font-size: 0.76rem;
}

.tag-selector {
  display: grid;
  gap: 0.85rem;
}

.tag-selector-selected,
.tag-selector-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-selector-groups {
  display: grid;
  gap: 1.4rem;
}

.tag-selector-group {
  display: grid;
  gap: 0.55rem;
}

.tag-selector-group-title {
  margin: 0;
  padding-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Calmer, unified tag pills. Removes the mix of blue/green/grey borders
 * that made the tag row feel noisy — every chip now uses a subtle
 * neutral surface, and the selected/standard state gets a single soft
 * brand tint. */
.tag-selector-option,
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(25, 36, 46, 0.05);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
}

.tag-selector-option {
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tag-selector-option:hover {
  background: rgba(14, 138, 166, 0.08);
  color: var(--brand-deep);
}

.tag-selector-option.is-selected,
.tag-chip-standard {
  background: rgba(14, 138, 166, 0.12);
  color: var(--brand-deep);
}

.tag-chip-custom {
  background: rgba(41, 161, 98, 0.12);
  color: #1f6a44;
}

.tag-chip-systemmetadata {
  background: rgba(25, 36, 46, 0.06);
  color: var(--muted);
}

.tag-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.tag-selector-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag-selector-custom .text-input {
  max-width: 280px;
}

/* Drop the default paragraph margin under the custom-tag help text so it
 * doesn't stack with the following section's padding-top and create a
 * visibly large gap before "Instructions". */
.tag-selector > .field-help,
.tag-selector-custom + .field-help,
.tag-selector .field-help:last-child {
  margin: 0;
}

.prompt-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(25, 36, 46, 0.08);
}

.prompt-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.prompt-copy-button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.prompt-favorite-button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.prompt-favorite-button svg {
  fill: none;
}

.prompt-favorite-button[aria-pressed="true"] {
  border-color: rgba(41, 161, 98, 0.45);
  background: var(--success-bg);
  color: var(--success-line);
}

.prompt-favorite-button[aria-pressed="true"] svg {
  fill: currentColor;
}

.prompt-copy-button[data-copy-state="copied"] {
  border-color: rgba(41, 161, 98, 0.45);
  background: var(--success-bg);
  color: var(--success-line);
}

.prompt-author {
  color: var(--muted);
  font-size: 0.88rem;
}

.empty-kicker {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.empty-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.pending-certification-panel {
  display: grid;
  gap: 1rem;
}

.table-kicker {
  margin: 0 0 0.35rem;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.table-title {
  margin: 0;
  font-size: 1.25rem;
}

.pending-certification-list {
  display: grid;
  gap: 0.85rem;
}

.pending-certification-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid rgba(25, 36, 46, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.pending-certification-copy {
  display: grid;
  gap: 0.45rem;
}

.pending-certification-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
}

.pending-certification-title {
  margin: 0;
  font-size: 1rem;
}

.pending-certification-actions {
  justify-content: flex-end;
}

.metric-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(248, 249, 250, 0.92) 100%
  );
  border: 1px solid rgba(25, 36, 46, 0.08);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 38px rgba(17, 24, 32, 0.06);
  min-height: 154px;
  padding: 1.1rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.85rem;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--metric-accent, var(--primary));
}

.metric-card:hover,
.metric-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(25, 36, 46, 0.14);
  box-shadow: 0 22px 42px rgba(17, 24, 32, 0.1);
}

.metric-card-amber {
  --metric-accent: #c88a00;
  --metric-surface: #fff3cf;
}

.metric-card-blue {
  --metric-accent: #0f7ab6;
  --metric-surface: #e8f4fc;
}

.metric-card-green {
  --metric-accent: #5b9812;
  --metric-surface: #ebf6da;
}

.metric-card-plum {
  --metric-accent: #7d3163;
  --metric-surface: #f5e8ef;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.metric-copy,
.metric-body {
  display: grid;
}

.metric-copy {
  gap: 0.18rem;
}

.metric-body {
  gap: 0.35rem;
  align-content: start;
}

.metric-eyebrow {
  margin: 0;
  color: var(--metric-accent, var(--brand-deep));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metric-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-value {
  margin: 0;
  font-size: clamp(2.05rem, 3vw, 2.45rem);
  line-height: 1;
}

.metric-delta {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.metric-delta-positive {
  color: var(--success-line);
}

.metric-delta-warning {
  color: var(--warning-line);
}

.metric-delta-neutral {
  color: var(--muted);
}

.metric-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  align-self: end;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(25, 36, 46, 0.08);
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--metric-accent, var(--brand));
  background: var(--metric-surface, rgba(14, 138, 166, 0.12));
  box-shadow: inset 0 0 0 1px rgba(25, 36, 46, 0.06);
}

.metric-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-panel {
  overflow: hidden;
}

.metrics-range-panel,
.metrics-section-block {
  display: grid;
  gap: 1rem;
}

.metrics-page-header {
  align-items: stretch;
  gap: 1.5rem;
  background:
    radial-gradient(
      circle at top right,
      rgba(14, 138, 166, 0.14),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 249, 250, 0.94)
    );
}

.metrics-page-label {
  margin-bottom: 0.35rem;
}

.metrics-page-title {
  line-height: 0.95;
}

.metrics-page-meta {
  min-width: 220px;
  align-self: center;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.metrics-page-meta-label,
.metrics-page-meta-value {
  margin: 0;
}

.metrics-page-meta-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metrics-page-meta-value {
  margin-top: 0.3rem;
  font-family: var(--font-emphasis);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.metrics-page-build {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.75;
  user-select: all;
}

.metrics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.metrics-range-panel .tab-nav {
  justify-content: flex-start;
}

.metrics-section-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
}

.metrics-section-title,
.metrics-insights-title {
  margin: 0;
  font-size: 1.15rem;
}

.metrics-section-copy,
.metrics-insights-label,
.metrics-bar-note,
.metrics-empty-chart,
.metrics-chart-summary,
.metrics-legend-item {
  color: var(--muted);
}

.metrics-section-copy,
.metrics-insights-label,
.metrics-bar-note,
.metrics-empty-chart {
  margin: 0.35rem 0 0;
  line-height: 1.55;
}

.metrics-section-notice {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.metrics-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.metrics-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.metrics-panel-wide {
  grid-column: 1 / -1;
}

.metrics-chart-shell,
.metrics-insights-panel {
  display: grid;
  gap: 1rem;
}

.metrics-chart-metadata {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.metrics-axis-title,
.metrics-axis-footer,
.metrics-axis-value,
.metrics-legend-note {
  color: var(--muted);
}

/* SVG <text> elements ignore `color`; use `fill` so axis tick labels remain
   readable in both light and dark themes (previously rendered black on
   dark background making the Usage Trends chart unreadable). */
.metrics-axis-value,
.metrics-line-label,
.metrics-donut-total,
.metrics-donut-copy {
  fill: var(--muted);
}

.metrics-donut-total {
  fill: var(--ink);
}

.metrics-axis-title,
.metrics-axis-footer {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.metrics-axis-footer {
  text-align: right;
}

.metrics-axis-value {
  font-size: 0.74rem;
}

.metrics-chart-legend {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}

.metrics-legend-line {
  width: 18px;
  height: 0;
  border-top: 3px solid var(--legend-line, var(--brand));
  border-radius: 999px;
  display: inline-block;
}

.metrics-chart {
  width: 100%;
  height: auto;
}

.metrics-line-chart line,
.metrics-line-path,
.metrics-donut-chart path,
.metrics-donut-base {
  fill: none;
}

.metrics-line-chart line {
  stroke: var(--metrics-gridline, rgba(25, 36, 46, 0.12));
  stroke-width: 1;
}

:root[data-display-theme="dark"] .metrics-line-chart line {
  stroke: rgba(255, 255, 255, 0.14);
}

.metrics-line-path {
  stroke: var(--metrics-line, var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metrics-line-point {
  fill: var(--metrics-line, var(--primary));
  stroke: #ffffff;
  stroke-width: 2;
  transition: r 120ms ease;
}

.metrics-line-point-group:hover .metrics-line-point {
  r: 6;
}

.metrics-line-hit {
  cursor: pointer;
  pointer-events: all;
}

.metrics-line-label {
  font-size: 12px;
  fill: var(--muted);
}

.metrics-chart-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.metrics-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.metrics-chart-summary strong,
.metrics-legend-item strong,
.metrics-bar-header strong,
.metrics-donut-total {
  color: var(--ink);
}

/* SLA tracking list — base styles must live outside the 720px media query
   so the overdue/duesoon backgrounds get proper padding on desktop too. */
.metrics-review-sla-summary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.25rem;
}

.metrics-review-sla-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.metrics-review-sla-pill strong {
  font-weight: 800;
}

.metrics-review-sla-pill-overdue {
  background: rgba(161, 28, 49, 0.14);
  border-color: rgba(161, 28, 49, 0.28);
  color: #a11c31;
}

.metrics-review-sla-pill-duesoon {
  background: rgba(242, 179, 37, 0.18);
  border-color: rgba(242, 179, 37, 0.4);
  color: #8a5a00;
}

.metrics-review-sla-pill-withinsla {
  background: rgba(120, 186, 24, 0.16);
  border-color: rgba(120, 186, 24, 0.32);
  color: #4a7a10;
}

:root[data-display-theme="dark"] .metrics-review-sla-pill-overdue {
  color: #ff9aa8;
}
:root[data-display-theme="dark"] .metrics-review-sla-pill-duesoon {
  color: #ffd97a;
}
:root[data-display-theme="dark"] .metrics-review-sla-pill-withinsla {
  color: #b6e07a;
}

.metrics-review-sla-list {
  display: grid;
  gap: 0.75rem;
}

.metrics-review-sla-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(247, 249, 250, 0.9);
}

.metrics-review-sla-primary,
.metrics-review-sla-timing {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.metrics-review-sla-timing {
  text-align: right;
}

.metrics-review-sla-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metrics-review-sla-item-overdue {
  border-color: rgba(161, 28, 49, 0.24);
  background: rgba(251, 231, 234, 0.94);
}

.metrics-review-sla-item-duesoon {
  border-color: rgba(242, 179, 37, 0.28);
  background: rgba(255, 245, 216, 0.94);
}

.metrics-review-sla-value {
  margin: 0;
  font-weight: 700;
}

.metrics-bar-list,
.metrics-insights-list,
.metrics-legend {
  display: grid;
  gap: 0.9rem;
}

/* Stacked legend rows (e.g. Avg Uses per User) need the swatch+label to sit
   above the small helper note without the paragraph's default margins
   pushing the row out of alignment with the trailing percentage. */
.metrics-legend-item-stack {
  align-items: flex-start;
}

.metrics-legend-item-stack > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.metrics-legend-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.metrics-bar-item,
.metrics-insight-item {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: rgba(247, 249, 250, 0.9);
  border: 1px solid rgba(25, 36, 46, 0.06);
}

.metrics-bar-header,
.metrics-legend-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.metrics-bar-track {
  margin-top: 0.6rem;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(25, 36, 46, 0.08);
  overflow: hidden;
}

.metrics-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e8aa6 0%, #1698e1 100%);
}

.metrics-distribution-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 1rem;
  align-items: center;
}

.metrics-pie-layout {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.75rem;
}

.metrics-pie-layout .metrics-legend {
  width: 100%;
}

.metrics-pie-shell {
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
}

.metrics-pie-chart {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(25, 36, 46, 0.06);
}

.metrics-pie-center {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 10px 24px rgba(17, 24, 32, 0.08);
}

.metrics-pie-center strong,
.metrics-pie-center span {
  display: block;
}

.metrics-pie-center strong {
  color: var(--ink);
  font-family: var(--font-emphasis);
  font-size: 1.3rem;
}

.metrics-pie-center span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metrics-donut-base {
  stroke: rgba(25, 36, 46, 0.08);
  stroke-width: 16;
}

.metrics-donut-chart path {
  stroke-width: 16;
  stroke-linecap: round;
}

.metrics-donut-total {
  font-size: 1.4rem;
  font-weight: 700;
}

.metrics-donut-copy {
  fill: var(--muted);
  font-size: 0.78rem;
}

.metrics-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 0.65rem;
}

.metrics-insights-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
}

.metrics-insight-item {
  line-height: 1.55;
}

.metrics-empty-chart {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 14px;
  background: rgba(247, 249, 250, 0.9);
  border: 1px dashed rgba(25, 36, 46, 0.18);
  padding: 1rem;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: rgba(16, 24, 32, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.onboarding-dialog {
  width: min(760px, 100%);
  border-radius: 28px;
  border: 1px solid rgba(25, 36, 46, 0.12);
  background:
    radial-gradient(
      circle at top right,
      rgba(14, 138, 166, 0.12),
      transparent 26%
    ),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: 0 26px 60px rgba(16, 24, 32, 0.28);
  overflow: hidden;
}

.onboarding-dialog-inner {
  display: grid;
  gap: 1.4rem;
  padding: 1.6rem;
}

.onboarding-copy,
.onboarding-panel,
.resource-entry-panel,
.resource-entry-copy {
  display: grid;
  gap: 0.85rem;
}

.onboarding-eyebrow,
.resource-entry-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand-deep);
}

.onboarding-title,
.resource-entry-title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
}

.onboarding-description,
.resource-entry-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 64ch;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
  gap: 1rem;
}

.onboarding-panel {
  padding: 1.2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(25, 36, 46, 0.08);
}

.onboarding-panel-highlight {
  background: linear-gradient(
    180deg,
    rgba(14, 138, 166, 0.08),
    rgba(243, 194, 47, 0.12)
  );
}

.onboarding-panel-visual {
  align-content: start;
}

.onboarding-tab-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  width: fit-content;
}

.onboarding-tab-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.9rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.onboarding-tab-pill.is-active {
  background: #ffffff;
  color: var(--brand-deep);
  box-shadow: 0 10px 18px rgba(16, 24, 32, 0.08);
}

.onboarding-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.onboarding-panel-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.onboarding-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
  color: var(--ink);
  line-height: 1.55;
}

.onboarding-journey-list {
  display: grid;
  gap: 0.9rem;
}

.onboarding-journey-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.onboarding-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 32, 0.86);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
}

.onboarding-actions,
.resource-entry-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.resource-entry-panel {
  align-items: end;
  grid-template-columns: minmax(0, 1.3fr) auto;
}

.resource-entry-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
  line-height: 1.6;
}

.resource-page-header {
  margin-bottom: 1.25rem;
}

.resource-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.resource-card {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(25, 36, 46, 0.12);
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16, 20, 24, 0.08);
}

.resource-hero {
  min-height: 188px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.resource-hero-library {
  background: linear-gradient(135deg, #f7f1d9 0%, #eef5f1 55%, #dfeef3 100%);
}

.resource-hero-browser {
  width: 250px;
  max-width: 78%;
  height: 148px;
  border-radius: 12px 12px 10px 10px;
  border: 5px solid #101418;
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(16, 20, 24, 0.16);
  position: relative;
  z-index: 1;
}

.resource-hero-browser-bar {
  height: 18px;
  background: linear-gradient(90deg, #f3c22f 0 18%, #dfe5e9 18% 100%);
  border-bottom: 1px solid rgba(25, 36, 46, 0.12);
}

.resource-hero-browser-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.resource-hero-browser-grid span {
  display: block;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(14, 138, 166, 0.18),
    rgba(14, 138, 166, 0.08)
  );
}

.resource-hero-shadow {
  position: absolute;
  width: 286px;
  height: 16px;
  border-radius: 999px;
  background: rgba(16, 20, 24, 0.24);
  filter: blur(8px);
  bottom: 20px;
}

.resource-hero-prompt101 {
  background: #111922;
  color: #ffffff;
  text-align: center;
  gap: 1rem;
}

.resource-hero-prompt101-mark {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.resource-hero-prompt101-title {
  font-family: var(--font-emphasis);
  font-size: 2rem;
  letter-spacing: 0.12em;
}

.resource-hero-discovery {
  background: linear-gradient(180deg, #2f82cb 0%, #1ea1d9 100%);
  color: #ffffff;
  text-align: center;
  gap: 0.35rem;
}

.resource-hero-discovery-mark {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.resource-hero-discovery-copy {
  font-size: 1.1rem;
}

.resource-card-body {
  display: grid;
  gap: 0.85rem;
  padding: 1.2rem 1.25rem 1.35rem;
}

.resource-card-title-row {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
}

.resource-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f74c9;
  text-decoration: none;
}

.resource-card-title:hover {
  text-decoration: underline;
}

.resource-card-launch {
  width: 28px;
  height: 28px;
  color: #1f74c9;
  flex: 0 0 auto;
}

.resource-card-launch svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resource-card-summary {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

.resource-sections-stack {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
}

.user-guide-view {
  gap: 0.75rem;
}

.user-guide-view .resource-sections-stack {
  margin-top: 0;
}

.user-guide-video {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 0.5rem 0 0.25rem;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(242, 179, 37, 0.28),
      transparent 55%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(14, 138, 166, 0.55),
      transparent 60%
    ),
    linear-gradient(135deg, #0c3a48 0%, #103d63 55%, #0e2b3a 100%);
  box-shadow:
    0 24px 60px -20px rgba(9, 24, 34, 0.55),
    0 6px 18px rgba(9, 24, 34, 0.28);
  overflow: hidden;
  isolation: isolate;
}

.user-guide-video::before {
  /* Subtle animated shimmer along the top edge to give the hero a bit of
     life without pulling focus away from the video itself. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(242, 179, 37, 0.9),
    rgba(14, 138, 166, 0.9),
    transparent
  );
  z-index: 1;
}

.user-guide-video-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 42rem;
}

.user-guide-video-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  align-self: flex-start;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.user-guide-video-play-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7ca48, var(--primary, #f2b325));
  color: #19242e;
  box-shadow: 0 4px 10px rgba(242, 179, 37, 0.5);
}

.user-guide-video-play-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.user-guide-video-title {
  margin: 0;
  font-family: var(--font-emphasis, inherit);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.user-guide-video-lede {
  margin: 0;
  color: rgba(236, 244, 248, 0.88);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 40rem;
}

.user-guide-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 22px 48px -16px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.user-guide-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 861px) {
  .user-guide-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: center;
    padding: 2rem;
    gap: 2rem;
  }
}

.resource-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.35fr);
  gap: 1.5rem;
  padding: 1.3rem 1.35rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: 0 10px 24px rgba(16, 20, 24, 0.05);
}

.resource-section-copy,
.resource-section-content {
  display: grid;
  gap: 0.85rem;
}

.resource-section-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.resource-section-title {
  margin: 0;
  font-size: 1.3rem;
}

.resource-section-body {
  margin: 0;
  line-height: 1.65;
  color: var(--muted);
}

.resource-checklist {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
}

.resource-checklist li {
  line-height: 1.55;
}

.resource-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.table-header-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.table-copy {
  margin: 0;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.55;
}

.notifications-page-header {
  margin-bottom: 1.5rem;
}

.notifications-page-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--brand-deep);
}

.notifications-page-title {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notifications-toolbar {
  align-items: flex-start;
}

.notifications-toolbar-actions {
  display: grid;
  gap: 0.85rem;
  justify-items: end;
  min-width: min(28rem, 100%);
}

.notifications-toolbar-actions .portal-search {
  width: 100%;
  justify-content: flex-end;
}

.notifications-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.notifications-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(25, 36, 46, 0.1);
  background: var(--surface-soft);
}

.notifications-summary-pill strong {
  color: var(--brand-deep);
  font-family: var(--font-emphasis);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  padding: 0.95rem 1rem;
  background: var(--brand-deep);
  color: #ffffff;
  font-size: 0.88rem;
}

.data-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid rgba(25, 36, 46, 0.08);
  vertical-align: top;
}

.data-table tbody tr:hover {
  background: rgba(14, 138, 166, 0.03);
}

/*
 * Horizontal scroll wrapper for wide data tables.
 *
 * The parent `.table-panel` uses `overflow: hidden` (line ~1580) to
 * clip the panel to its rounded corners. That clipping used to chop
 * off the rightmost column — for example the "Review" action button
 * on the Manage Prompts pending queue — whenever the natural table
 * width exceeded the panel width. This is common at tablet and
 * half-screen laptop sizes because the mobile stacked layout (which
 * makes every cell a block) only kicks in below 720px.
 *
 * The wrapper here scopes horizontal overflow to the table body only.
 * The panel header (title, tab strip, search bar) stays visually
 * stable while the user can flick or drag the table sideways to reach
 * the action column.
 *
 * The layered background is a scroll-shadow indicator adapted from
 * Lea Verou's canonical technique. Two "cover" gradients travel with
 * the scrolling content (background-attachment: local) so they mask
 * the shadow whenever the user is scrolled to that edge. Two radial
 * "shadow" gradients stay pinned to the viewport so they only appear
 * when there is more content off-screen. Result: no shadow on either
 * side when everything fits, right-edge shadow when initially loaded
 * (hinting "scroll me"), left-edge shadow after scrolling right, and
 * both shadows in the middle of a wide table.
 */
.data-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0)) left /
      20px 100% no-repeat local,
    linear-gradient(to left, var(--surface), rgba(255, 255, 255, 0)) right /
      20px 100% no-repeat local,
    radial-gradient(
        farthest-side at 0% 50%,
        rgba(25, 36, 46, 0.16),
        rgba(25, 36, 46, 0)
      )
      left / 14px 100% no-repeat,
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(25, 36, 46, 0.16),
        rgba(25, 36, 46, 0)
      )
      right / 14px 100% no-repeat;
}

.data-table-scroll > .data-table {
  /*
   * Keep the table at its natural width so columns do not compress
   * into an unreadable form when the panel is narrower than the sum
   * of the column widths. The wrapper handles the overflow via
   * horizontal scroll instead.
   */
  min-width: max-content;
}

.notifications-table thead th {
  background: #edf3f6;
  color: var(--ink);
  border-bottom: 1px solid rgba(25, 36, 46, 0.12);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notifications-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notifications-sort-icon {
  color: var(--muted);
  font-size: 0.9rem;
}

.notifications-sort-icon.is-active {
  color: var(--brand-deep);
}

.notifications-row-unread {
  background: rgba(14, 138, 166, 0.04);
}

.notifications-row-archived {
  opacity: 0.72;
}

.notifications-date-stack,
.notifications-action-stack,
.notifications-message-stack {
  display: grid;
  gap: 0.45rem;
}

.notifications-message-cell {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: flex-start;
}

.notifications-select-box {
  margin-top: 0.2rem;
}

.notifications-unread-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 0.5rem;
  box-shadow: 0 0 0 4px rgba(14, 138, 166, 0.12);
}

.notifications-unread-dot.is-hidden {
  visibility: hidden;
}

.notifications-message-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-emphasis);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(14, 138, 166, 0.25);
  text-underline-offset: 0.14em;
}

.notifications-message-link:hover,
.notifications-message-link:focus-visible {
  color: var(--brand);
  text-decoration-color: currentColor;
}

.notifications-message-link.is-unread,
.notifications-message-body.is-unread {
  font-weight: 700;
}

.notifications-message-body {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

.notifications-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.notifications-action-stack {
  /*
   * Stretch every action button to a single shared column width so the
   * per-row "Open queue / Mark Read / Archive / Delete" stack renders as
   * a tidy vertical group instead of a ragged left-aligned pile.
   */
  justify-items: stretch;
  align-items: stretch;
  min-width: 8.5rem;
}

.notifications-action-stack .button {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.notifications-bulk-actions {
  margin-top: 1rem;
}

.table-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.notification-banner {
  border-radius: 16px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid transparent;
}

.notification-banner-success {
  background: var(--success-bg);
  border-color: rgba(41, 161, 98, 0.4);
}

.notification-banner-info {
  background: var(--info-bg);
  border-color: rgba(45, 123, 166, 0.35);
}

.notification-banner-warning {
  background: var(--warning-bg);
  border-color: rgba(226, 166, 26, 0.4);
}

.notification-content {
  display: grid;
  gap: 0.35rem;
}

.notification-banner-actionable {
  align-items: center;
}

.notification-banner-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}

.notification-title {
  margin: 0;
  font-weight: 700;
}

.notification-message {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.banner-dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}

.empty-state,
.notice-panel {
  display: grid;
  gap: 0.8rem;
}

.notice-panel-compact {
  padding: 1rem;
}

.empty-title,
.notice-title {
  margin: 0;
  font-size: 1.35rem;
}

.empty-copy,
.notice-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 62ch;
}

.notice-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.prompt-preview-host[hidden] {
  display: none;
}

.prompt-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(16, 26, 32, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.prompt-preview-dialog {
  width: min(880px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: 0 28px 60px rgba(17, 24, 32, 0.22);
}

.prompt-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.prompt-preview-header-copy,
.prompt-preview-sections {
  display: grid;
  gap: 0.65rem;
}

.prompt-preview-kicker {
  margin: 0;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prompt-preview-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.prompt-preview-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.prompt-preview-state {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(247, 249, 250, 0.9);
}

.prompt-preview-state-error {
  background: rgba(251, 231, 234, 0.55);
  border-color: rgba(161, 28, 49, 0.12);
}

.prompt-preview-loading-bar {
  width: min(280px, 100%);
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(14, 138, 166, 0.12),
    rgba(14, 138, 166, 0.32),
    rgba(14, 138, 166, 0.12)
  );
  background-size: 200% 100%;
  animation: prompt-preview-loading 1.3s ease-in-out infinite;
}

@keyframes prompt-preview-loading {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.prompt-preview-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.prompt-preview-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.prompt-preview-related-block {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(25, 36, 46, 0.08);
}

.prompt-preview-related-header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.prompt-preview-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.prompt-preview-related-card {
  display: grid;
  gap: 0.45rem;
  text-align: left;
  padding: 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: linear-gradient(
    180deg,
    rgba(248, 251, 252, 0.98),
    rgba(255, 255, 255, 0.96)
  );
  color: inherit;
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.prompt-preview-related-card:hover,
.prompt-preview-related-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(14, 138, 166, 0.3);
  box-shadow: 0 14px 24px rgba(17, 24, 32, 0.08);
  outline: none;
}

.prompt-preview-related-title {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
}

.prompt-preview-related-copy {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.prompt-preview-related-meta {
  color: var(--brand-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mono-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
}

.mono-area {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.editor-page {
  gap: 1.25rem;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem 1.5rem;
  background:
    radial-gradient(
      circle at top right,
      rgba(14, 138, 166, 0.14),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 249, 250, 0.94)
    );
  position: sticky;
  top: calc(var(--app-header-height, 100px) + 0.5rem);
  z-index: 5;
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
}

.editor-header-copy {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.editor-header .page-title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: 0.04em;
  padding: 0;
  line-height: 1.2;
}

.editor-subtitle {
  margin: 0;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.editor-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.15rem;
}

.editor-meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(25, 36, 46, 0.1);
  background: rgba(247, 249, 250, 0.92);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.system-tags-layout {
  display: grid;
  gap: 1rem;
}

.system-tags-form-panel {
  gap: 1rem;
}

/*
 * Shared layout and panel-header treatment for every tab in the Manage
 * Prompts view (System Tags, Prompt Inventory, Certification Workflow,
 * Role Assignments, Pending, Reviewed). Applying the same wrapper and
 * header structure across every workbench keeps padding, gaps, title
 * alignment, and search placement identical so tabs feel like variations
 * of one page instead of separate designs.
 *
 * `.manage-prompts-tab-layout` — vertical stack of panels with a uniform
 *   gap between them. Applied to the outer wrapper of each tab.
 *
 * `.manage-prompts-panel-header` — the panel header row. Title + copy on
 *   the left, optional search on the right. Anchors items to the top so
 *   long descriptions don't push the search out of alignment.
 *
 * `.manage-prompts-panel-intro` — the title-and-copy stack that lives
 *   inside every panel header, with tight vertical spacing between h2 and
 *   description.
 */
.manage-prompts-tab-layout {
  display: grid;
  gap: 1.5rem;
}

.manage-prompts-panel-header {
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.manage-prompts-panel-intro {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.manage-prompts-panel-intro .table-title {
  margin: 0;
  line-height: 1.25;
}

.manage-prompts-panel-intro .table-copy {
  max-width: 68ch;
  line-height: 1.6;
}

/*
 * System Tags admin form.
 *
 * Two-column grid: Taxonomy Group (compact dropdown) on the left, Tag Name
 * (wider text input) on the right. Both cells align to the top of the row
 * so the field labels line up horizontally regardless of whether one field
 * has help text beneath it. The tag value preview line and the submit
 * action row each span the full width beneath the fields with their own
 * spacing so nothing lands in the wrong grid cell or crowds a sibling.
 *
 * `.system-tag-field-wide` is used on fields (like Tag Name) that should
 * take the second column; it also spans both columns when the layout
 * collapses to a single column on narrow viewports.
 */
.system-tag-form {
  display: grid;
  grid-template-columns: minmax(200px, 0.5fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.system-tag-form .field-group {
  min-width: 0;
}

.system-tag-field-wide {
  min-width: 0;
}

.system-tag-preview-line {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(25, 36, 46, 0.04);
  color: var(--muted);
}

.system-tag-preview-line [data-system-tag-preview] {
  color: var(--ink);
  font-weight: 600;
}

.system-tag-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

:root[data-display-theme="dark"] .system-tag-preview-line {
  background: rgba(236, 244, 248, 0.06);
  color: var(--muted);
}

/*
 * Certification Workflow admin form.
 *
 * The workflow form is a vertical stack of stage rows followed by a shared
 * actions bar. Each stage row is its own two-column grid (label + reviewer
 * role) with the per-stage action buttons wrapping onto a full-width row
 * beneath the fields. This keeps the "Move Up / Move Down / Remove" cluster
 * from squeezing the inputs and prevents the outer form's children from
 * being pushed into a cramped 3-column grid (which caused inputs and
 * buttons to overlap).
 */
.certification-workflow-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.certification-stage-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.certification-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: 0.85rem 1rem;
  align-items: end;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(25, 36, 46, 0.1);
  border-radius: var(--radius-panel);
  background: rgba(247, 249, 250, 0.55);
}

.certification-stage-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.certification-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 780px) {
  .certification-stage-row {
    grid-template-columns: 1fr;
  }
}

/*
 * Prompt Inventory admin workbench (Bulk Update + Bulk Import).
 *
 * The Bulk Update form has 5 fields (some full width) plus a selection
 * summary row and a submit action row. The Bulk Import form is a single
 * JSON textarea plus a submit action row. Both forms previously shared the
 * three-column `system-tag-form` grid, which caused fields to land in the
 * wrong cells (the "wide" fields only set `width: 100%`, they did not span
 * grid columns) and made buttons overlap sibling inputs. The dedicated
 * layouts below give each control a predictable slot.
 */
.inventory-bulk-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: end;
}

.inventory-bulk-form .inventory-field-wide {
  grid-column: 1 / -1;
}

.inventory-selection-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.inventory-selection-summary {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.inventory-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.inventory-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: center;
}

.inventory-import-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*
 * `.text-area-input` had dark-mode overrides but no light-mode base rule,
 * which meant the Bulk Import textarea inherited raw user-agent styles
 * (thin border, tiny padding, wrong font). Match the other governed input
 * surfaces so the JSON placeholder renders cleanly.
 */
.text-area-input {
  width: 100%;
  min-height: 220px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.55;
  resize: vertical;
}

.text-area-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.text-area-input::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.inventory-import-textarea {
  min-height: 260px;
  white-space: pre;
  overflow: auto;
}

@media (max-width: 780px) {
  .inventory-bulk-form {
    grid-template-columns: 1fr;
  }

  .inventory-selection-row {
    align-items: stretch;
  }

  .inventory-selection-actions {
    justify-content: flex-start;
  }
}

/*
 * Role Assignments admin workbench.
 *
 * The role assignment create form has four fields plus an action row, so the
 * three-column system-tag-form grid does not fit it cleanly (the wide fields
 * would land in the 220px column and squash the dropdowns). The layout below
 * keeps the User and Assignment Reason fields full width, lets Role and Scope
 * share a row, and right-aligns the submit button onto its own line.
 */
.role-assignments-layout {
  display: grid;
  gap: 1rem;
}

.role-assignment-panel {
  gap: 1rem;
}

.role-assignment-header {
  align-items: flex-start;
}

.role-assignment-intro {
  display: grid;
  gap: 0.4rem;
}

.role-assignment-search {
  flex: 0 1 360px;
  min-width: 240px;
  max-width: 420px;
}

.role-assignment-search .portal-search {
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.role-assignment-search .search-field-shell {
  flex: 1 1 auto;
}

.role-assignment-search .search-input {
  min-height: 46px;
}

/*
 * Shared compact search wrapper for the Manage Prompts view. Every tab
 * (System Tags, Prompt Inventory, Pending, Reviewed, Users) uses the same
 * table header layout, so we reuse the exact size and treatment introduced
 * for the Role Assignments page: a fixed-width, right-aligned search box
 * with a 46px input height and a nowrap `Search` button beside it.
 */
.manage-prompts-header-search {
  flex: 0 1 360px;
  min-width: 240px;
  max-width: 420px;
}

.manage-prompts-header-search .portal-search {
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.manage-prompts-header-search .search-field-shell {
  flex: 1 1 auto;
}

.manage-prompts-header-search .search-input {
  min-height: 46px;
}

.role-assignment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}

.role-assignment-field {
  min-width: 0;
}

.role-assignment-field-wide {
  grid-column: 1 / -1;
}

.role-assignment-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 0.25rem;
}

.role-assignment-actions .button {
  min-height: 40px;
  padding: 0 1.1rem;
}

.role-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/*
 * Single-role dropdown cell used by the redesigned Role Assignments
 * workbench. The select sits inside its own grid cell so it never
 * overflows the table column at narrower widths, and inherits the
 * standard form-input look defined by `.select-input` elsewhere.
 */
.role-dropdown-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

/*
 * Self-lock variant. When the dropdown row belongs to the current caller,
 * we render the same widget but disabled and stack a short explanatory
 * caption below it. The caption prevents "why is my own row greyed out?"
 * confusion and gives an actionable next step (ask another admin).
 */
.role-dropdown-cell-self {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.role-self-lock-caption {
  margin: 0;
  font-style: italic;
  color: var(--muted-text, #6b7280);
  line-height: 1.35;
  /*
   * The caption sits inside a table cell whose intrinsic width would
   * otherwise be driven by this single long sentence, stretching the
   * "Manage Users" table wide enough to force horizontal scrolling.
   * Force the paragraph to wrap normally and cap its width so the
   * column stays a sensible size on all viewports.
   */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 22rem;
}

.role-effective-select {
  min-width: 14rem;
  width: 100%;
}

.role-effective-select:disabled {
  cursor: progress;
  opacity: 0.7;
}

/*
 * The self-lock disabled state is permanent (until the caller signs out
 * and another admin flips their role), so it uses `not-allowed` rather
 * than the `progress` cursor we use for the transient submitting state.
 */
.role-dropdown-cell-self .role-effective-select:disabled {
  cursor: not-allowed;
}

/*
 * Per-user role history disclosure inside the unified user table. We use
 * a native <details>/<summary> pair because it requires zero JS, is
 * keyboard accessible by default, and visually folds away when the admin
 * is not actively auditing a specific user.
 */
.role-history-disclosure summary {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.role-history-disclosure[open] summary {
  margin-bottom: 0.5rem;
}

.role-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
}

.role-history-entry {
  border-left: 2px solid var(--line);
  padding: 0.25rem 0 0.25rem 0.6rem;
  display: grid;
  gap: 0.2rem;
}

.role-history-headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/*
 * Lightweight informational notice variant used by the role-gate banner
 * inside the Role Assignments tab. Falls back to the existing notice
 * palette and only tints the left edge so it does not visually compete
 * with success/error banners that already render in the page.
 */
.notice-panel-info {
  border-left: 3px solid var(--accent, #2563eb);
}

/*
 * Screen-reader-only label class for the role dropdown. Standard
 * "visually hidden" rule used by the accessibility test suite.
 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.table-actions-end {
  justify-content: flex-end;
}

.editor-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/*
 * The action row mixes anchor-buttons (`<a class="button">Edit Prompt</a>`)
 * with real `<button>` elements (`Retire Prompt`, `Publish`, etc.). Anchors
 * and buttons pick up different user-agent metrics (intrinsic line-height,
 * inner focus box) so a shared `min-height` alone leaves them visibly
 * misaligned. Lock down every metric that could differ between the two.
 */
.editor-actions .button {
  height: 40px;
  min-height: 40px;
  padding: 0 1rem;
  line-height: 1;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-emphasis);
  letter-spacing: 0.01em;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 1.25rem;
  align-items: start;
}

/* When no side panel is visible (e.g. the Test panel is temporarily hidden
   on the Create screen), collapse to a single full-width column so the form
   uses the whole editor page. */
.editor-layout:not(:has(> [data-editor-panel-tab]:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.editor-layout > [data-editor-panel-tab] {
  position: sticky;
  top: calc(var(--app-header-height, 100px) + 6rem);
  align-self: start;
  display: grid;
  gap: 1rem;
  max-height: calc(100vh - var(--app-header-height, 100px) - 7rem);
  overflow-y: auto;
}

.editor-layout > [data-editor-panel-tab][hidden] {
  display: none;
}

.editor-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-panel);
  padding: 1.35rem;
}

.editor-form {
  display: grid;
  gap: 1.1rem;
}

.editor-tabs {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.06);
  border: 1px solid rgba(14, 138, 166, 0.12);
}

.editor-tab {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.editor-tab:hover {
  color: var(--brand-deep);
}

.editor-tab.is-active {
  color: var(--brand-deep);
  background: var(--surface);
  border-color: rgba(14, 138, 166, 0.22);
  box-shadow: 0 1px 4px rgba(14, 138, 166, 0.12);
}

.editor-tab.has-error {
  color: #8b5a00;
  background: rgba(226, 166, 26, 0.16);
  border-color: rgba(226, 166, 26, 0.4);
}

.editor-tab-panel {
  display: grid;
  gap: 1rem;
}

.editor-tab-panel[hidden] {
  display: none;
}

.detail-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  margin: 1.25rem auto 1rem;
  width: fit-content;
}

.detail-tabs .editor-tab {
  flex: 1 1 0;
  min-width: 9rem;
  padding: 0.6rem 1.75rem;
  text-align: center;
}

.detail-tab-panel {
  margin-top: 0.25rem;
}

.detail-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.16);
  color: var(--brand-deep);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --- Sidebar tab panel (Comments / Details / History) --------------------- */

.detail-side-tabs-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: sticky;
  top: calc(var(--app-header-height, 100px) + 0.75rem);
  max-height: calc(100vh - var(--app-header-height, 100px) - 1.5rem);
  overflow-y: auto;
}

.detail-side-tabs {
  display: flex;
  gap: 0.35rem;
  width: 100%;
  padding: 0.3rem;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, #fff);
  /* Extend the sticky background over the panel's rounded corners so
     content doesn't peek through as it scrolls under the tab bar. */
  margin: -0.3rem -0.3rem 0;
  padding: 0.6rem 0.55rem;
  border-radius: inherit;
  box-shadow: 0 6px 12px -10px rgba(15, 23, 42, 0.35);
}

.detail-side-tabs .editor-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  text-align: center;
  font-size: 0.85rem;
}

.detail-side-tab-panel {
  margin-top: 0;
}

@media (max-width: 960px) {
  .detail-side-tabs-panel {
    position: static;
    max-height: none;
  }
}

.detail-comments-panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

@media (max-width: 960px) {
  .detail-comments-panel {
    position: static;
    max-height: none;
  }
}

/* --- Details tab: grouped info list --------------------------------------- */

.detail-info-groups {
  display: grid;
  gap: 1.1rem;
}

.detail-info-group {
  display: grid;
  gap: 0.5rem;
}

.detail-info-group-title {
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-info-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.detail-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.detail-info-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.detail-info-value {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text, inherit);
  overflow-wrap: anywhere;
  text-align: right;
}

.detail-info-value.is-email {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 500;
}

/* --- History tab: timeline ----------------------------------------------- */

.detail-empty {
  margin: 0.25rem 0;
  padding: 1rem 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 10px;
}

.detail-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
}

.detail-timeline::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: calc(0.5rem - 1px);
  width: 2px;
  background: rgba(14, 138, 166, 0.18);
  border-radius: 2px;
}

.detail-timeline-item {
  position: relative;
  padding: 0.6rem 0.6rem 0.6rem 0.6rem;
  border-radius: 8px;
  transition: background-color 120ms ease;
}

.detail-timeline-item + .detail-timeline-item {
  margin-top: 0.15rem;
}

.detail-timeline-item:hover,
.detail-timeline-item:focus-within {
  background: rgba(14, 138, 166, 0.04);
}

.detail-timeline-item.is-active {
  background: rgba(14, 138, 166, 0.08);
}

.detail-timeline-dot {
  position: absolute;
  top: 1rem;
  left: -1rem;
  transform: translateX(-50%);
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid rgba(14, 138, 166, 0.55);
  box-sizing: border-box;
}

.detail-timeline-dot.is-current {
  background: var(--brand-deep, #0e8aa6);
  border-color: var(--brand-deep, #0e8aa6);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.18);
}

.detail-timeline-dot.is-draft {
  border-color: rgba(226, 166, 26, 0.7);
  background: rgba(226, 166, 26, 0.18);
}

.detail-timeline-content {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.detail-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.detail-timeline-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.detail-timeline-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text, inherit);
  overflow-wrap: anywhere;
}

.detail-timeline-meta,
.detail-timeline-time {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.detail-timeline-copy {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text, inherit);
  overflow-wrap: anywhere;
}

.detail-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.detail-timeline-item:hover .detail-timeline-actions,
.detail-timeline-item:focus-within .detail-timeline-actions,
.detail-timeline-item.is-active .detail-timeline-actions {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .detail-timeline-actions {
    opacity: 1;
    transition: none;
  }
}

/* --- Sticky launch dock --------------------------------------------------- */

.detail-launch-dock {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.18),
    0 2px 8px rgba(15, 23, 42, 0.08);
  animation: detail-launch-dock-in 180ms ease-out;
  max-width: min(680px, calc(100vw - 2rem));
}

.detail-launch-dock[hidden] {
  display: none;
}

@keyframes detail-launch-dock-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.5rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.detail-launch-dock-target {
  /* When rendered by CustomSelect, .detail-launch-dock-target is applied
   * as a *modifier* on top of .custom-select (which is column-flex). In
   * the dock we want the label sitting inline with the trigger so the
   * whole control stays the same height as the surrounding buttons. */
  flex: 0 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.detail-launch-dock-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.detail-launch-dock-target .custom-select-trigger {
  min-height: 40px;
  min-width: 160px;
  border-radius: 999px;
  padding: 0 2.25rem 0 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: rgba(14, 138, 166, 0.08);
  border-color: transparent;
}

.detail-launch-dock-target .custom-select-trigger:focus-visible {
  outline: 2px solid rgba(14, 138, 166, 0.55);
  outline-offset: 2px;
  border-radius: 999px;
}

.detail-launch-dock-primary {
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}

.detail-launch-dock .button.button-secondary {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}

/* The mobile-style bottom action bar (.header-actions) is fixed at the
 * bottom of the viewport for every width ≤1240px. Lift the dock above
 * it whenever that bar is present so it doesn't get covered. */
@media (max-width: 1240px) {
  .detail-launch-dock {
    bottom: calc(72px + env(safe-area-inset-bottom, 0) + 0.75rem);
  }
}

/* Dock is fixed at the bottom of the viewport, so drop the listbox
 * *upward* from the trigger instead of downward (which would fall
 * off-screen). */
.detail-launch-dock .custom-select-listbox {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.4rem;
  box-shadow: 0 -12px 28px rgba(17, 24, 32, 0.18);
}

/* --- Medium screens (641–1023px): compact the dock so nothing wraps or
 * overlaps between the small pill hit-targets and the wider desktop
 * spacing. */
@media (min-width: 720px) and (max-width: 1023px) {
  .detail-launch-dock {
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    max-width: min(560px, calc(100vw - 1.5rem));
  }

  .detail-launch-dock-target {
    gap: 0.4rem;
  }

  .detail-launch-dock-label {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }

  .detail-launch-dock-target .custom-select-trigger {
    min-height: 36px;
    min-width: 140px;
    padding: 0 2rem 0 0.75rem;
    font-size: 0.85rem;
  }

  .detail-launch-dock-primary {
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
  }

  .detail-launch-dock .button.button-secondary {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 719px) {
  .detail-launch-dock {
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    max-width: none;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 14px;
  }

  @keyframes detail-launch-dock-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .detail-launch-dock-target {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .detail-launch-dock-target .custom-select-trigger {
    min-width: 0;
    width: 100%;
  }

  .detail-launch-dock-label {
    display: none;
  }
}

/* --- Comment section ------------------------------------------------------ */

.comment-section {
  display: grid;
  gap: 1rem;
}

.comment-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.comment-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.35rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.14);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.comment-composer {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: 12px;
  background: var(--surface, #fff);
}

.comment-composer:focus-within {
  border-color: rgba(14, 138, 166, 0.45);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.12);
}

.comment-composer-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-composer-input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}

.comment-composer-input:focus {
  outline: none;
  background: rgba(14, 138, 166, 0.04);
}

.comment-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.comment-composer-feedback {
  margin: 0;
  min-height: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-composer-feedback:empty {
  display: none;
}

.comment-list {
  display: grid;
  gap: 0.4rem;
}

.comment-empty {
  margin: 0.5rem 0;
  padding: 1.25rem 0.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  border-radius: 10px;
}

.comment-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.7rem;
  padding: 0.75rem 0.35rem;
  border-radius: 10px;
  transition: background-color 120ms ease;
}

.comment-item + .comment-item {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.comment-item:hover,
.comment-item:focus-within {
  background: rgba(14, 138, 166, 0.04);
}

.comment-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(14, 138, 166, 0.85),
    rgba(14, 138, 166, 0.55)
  );
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

.comment-item-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.comment-item-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.comment-item-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text, inherit);
}

.comment-item-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.comment-item-copy {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text, inherit);
  overflow-wrap: anywhere;
}

.comment-item-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.15rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.comment-item:hover .comment-item-actions,
.comment-item:focus-within .comment-item-actions {
  opacity: 1;
}

.comment-item-action {
  padding: 0.15rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.comment-item-action:hover,
.comment-item-action:focus-visible {
  background: rgba(14, 138, 166, 0.12);
  color: var(--brand-deep);
  outline: none;
}

.comment-item-action-danger:hover,
.comment-item-action-danger:focus-visible {
  background: rgba(200, 40, 40, 0.12);
  color: #b42318;
}

.comment-replies {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.35rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(14, 138, 166, 0.18);
}

.comment-replies .comment-item {
  padding: 0.55rem 0.25rem;
}

.comment-replies .comment-item-avatar {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.68rem;
}

.comment-replies .comment-item {
  grid-template-columns: 1.65rem 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .comment-item-actions {
    opacity: 1;
    transition: none;
  }
}

.editor-section-block {
  display: grid;
  gap: 0.85rem;
}

.editor-optional-field-block {
  gap: 0.85rem;
}

.editor-optional-field-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px dashed rgba(25, 36, 46, 0.18);
  background: rgba(247, 249, 250, 0.92);
}

.editor-optional-field-copy {
  display: grid;
  gap: 0.18rem;
}

.editor-optional-field-label,
.editor-optional-field-description {
  margin: 0;
}

.editor-optional-field-label {
  font-weight: 700;
}

.editor-optional-field-description {
  color: var(--muted);
  line-height: 1.55;
}

.editor-subpanel {
  padding: 1.15rem 1.2rem;
  border-radius: 18px;
  background: rgba(247, 249, 250, 0.7);
  border: 1px solid rgba(25, 36, 46, 0.08);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.editor-subpanel:focus-within {
  border-color: rgba(14, 138, 166, 0.32);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.1);
}

.editor-step-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.95rem;
  align-items: start;
  margin-bottom: 0.25rem;
}

.editor-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(14, 138, 166, 0.22);
  flex-shrink: 0;
}

.editor-step-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.editor-step-copy .field-label,
.editor-step-copy .editor-section-title {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

.editor-step-copy .editor-section-copy {
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.92rem;
}

.editor-step-copy code {
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  background: rgba(14, 138, 166, 0.1);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.editor-step-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.editor-section-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.editor-section-title,
.editor-section-copy {
  margin: 0;
}

.editor-section-title {
  font-size: 1rem;
}

.editor-section-copy {
  color: var(--muted);
  line-height: 1.55;
}

.editor-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.editor-textarea-shell {
  gap: 0.5rem;
}

.editor-textarea-heading {
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/*
 * The Template Source textarea holds a prompt template with `{{placeholder}}`
 * tokens. Style it as a lightweight code editor so it visually matches the
 * read-only "Prompt Template" preview that sits directly below it — same
 * monospaced font, same tab handling, same measured line-height. Without
 * this the editable field looks like a stray comment box next to a proper
 * code panel.
 */
.editor-textarea-shell .text-area {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.04);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.6;
  tab-size: 2;
  -moz-tab-size: 2;
  color: var(--ink);
}

.editor-textarea-shell .text-area::placeholder {
  font-family: var(--font-body, inherit);
  font-style: italic;
  color: var(--muted);
  opacity: 0.85;
}

.editor-textarea-shell .text-area:hover {
  border-color: rgba(14, 138, 166, 0.35);
}

.editor-textarea-shell .text-area:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.16);
}

.editor-raw-preview {
  margin-top: 0.25rem;
  border-radius: 14px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.editor-raw-preview[open] {
  border-color: rgba(14, 138, 166, 0.18);
}

.editor-raw-preview-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 0.95rem;
}

.editor-raw-preview-summary::-webkit-details-marker {
  display: none;
}

.editor-raw-preview-label {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.editor-raw-preview-kicker {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
}

.editor-raw-preview-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 138, 166, 0.2);
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.editor-raw-preview[open] .editor-raw-preview-toggle {
  background: var(--brand-deep);
  color: #ffffff;
  border-color: var(--brand-deep);
}

.editor-raw-preview .builder-template-shell {
  margin: 0 0.6rem 0.6rem;
  border-radius: 12px;
}

/*
 * Builder launch panel (Create Prompt → Customize section).
 *
 * Renders as a vertically stacked group on every viewport:
 *   [AI App label]
 *   [dropdown select]
 *   [Copy Prompt]
 *   [Download]
 *   [Launch App]
 *
 * Uses a real <label for>/<select id> pair (not a wrapping <label>) so
 * tapping the label focuses the select and tapping the select opens the
 * native picker at the correct anchored position on mobile. Wrapping
 * <label> around a full-width <select> caused Android/Chrome to open
 * the picker overlay from the label's tap coordinates instead of the
 * select's own rectangle.
 */
.builder-launch-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(14, 138, 166, 0.05);
  border: 1px solid rgba(14, 138, 166, 0.12);
}

.builder-launch-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.builder-launch-label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-emphasis);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
}

.builder-launch-select {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 2.5rem 0 0.9rem;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235d6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.builder-launch-select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.builder-launch-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom listbox anchored directly below the trigger. Positioned inside
 * the field wrapper so it always appears in the correct spot regardless
 * of viewport size or scroll position. */
.builder-launch-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0.35rem 0 0;
  padding: 0.3rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.18);
  max-height: 260px;
  overflow-y: auto;
}

.builder-launch-listbox[hidden] {
  display: none;
}

.builder-launch-option {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.builder-launch-option:hover,
.builder-launch-option:focus {
  background: rgba(14, 138, 166, 0.1);
  outline: none;
}

.builder-launch-option[aria-selected="true"] {
  background: rgba(14, 138, 166, 0.14);
  font-weight: 600;
}

:root[data-display-theme="dark"] .builder-launch-listbox {
  background: var(--surface);
  border-color: rgba(236, 244, 248, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.builder-launch-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.builder-launch-actions .button {
  width: 100%;
  justify-content: center;
}

/* On medium/large screens lay the three action buttons out in a single
 * row and give the panel a bit more padding. The dropdown still sits
 * above the button row. */
@media (min-width: 720px) {
  .builder-launch-panel {
    padding: 1.15rem 1.2rem;
    gap: 0.9rem;
  }

  .builder-launch-field {
    gap: 0.5rem;
  }

  .builder-launch-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
  }

  .builder-launch-actions .button {
    width: auto;
  }
}

.builder-action-note {
  margin: 0.25rem 0 0;
}

/*
 * Custom accessible select (button + listbox) rendered by
 * components/forms/CustomSelect.js. Used wherever the native <select>
 * picker positioning was unreliable on mobile.
 *
 * The wrapper is relatively positioned so the absolutely-anchored
 * listbox always drops directly under the trigger regardless of
 * viewport size or scroll position.
 */
.custom-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.custom-select-label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-emphasis);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 2.5rem 0 0.9rem;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235d6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.custom-select-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.custom-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0.35rem 0 0;
  padding: 0.3rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.18);
  max-height: 260px;
  overflow-y: auto;
  /* Guard against the listbox pushing horizontal scroll when the trigger
   * sits near the viewport edge. */
  max-width: calc(100vw - 1.5rem);
  box-sizing: border-box;
}

.custom-select-listbox .custom-select-option {
  white-space: normal;
  overflow-wrap: anywhere;
}

.custom-select-listbox[hidden] {
  display: none;
}

.custom-select-option {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option:focus {
  background: rgba(14, 138, 166, 0.1);
  outline: none;
}

.custom-select-option[aria-selected="true"] {
  background: rgba(14, 138, 166, 0.14);
  font-weight: 600;
}

:root[data-display-theme="dark"] .custom-select-listbox {
  background: var(--surface);
  border-color: rgba(236, 244, 248, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.builder-template-shell {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #161d24;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.builder-template-output {
  margin: 0;
  min-height: 120px;
  max-height: 240px;
  color: #d7f5de;
  white-space: pre-wrap;
  line-height: 1.65;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.editor-empty-state {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(25, 36, 46, 0.16);
  background: rgba(255, 255, 255, 0.5);
}

.editor-empty-state-subtle {
  background: rgba(247, 249, 250, 0.9);
}

.editor-empty-title,
.editor-empty-copy {
  margin: 0;
}

.editor-empty-title {
  font-size: 0.98rem;
}

.editor-empty-copy {
  color: var(--muted);
  line-height: 1.55;
}

.variable-definition-list,
.variable-value-list {
  display: grid;
  gap: 0.85rem;
}

.variable-row {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(25, 36, 46, 0.08);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.variable-row:focus-within {
  border-color: rgba(14, 138, 166, 0.32);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.08);
}

.variable-row-main {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variable-row-secondary {
  align-items: end;
}

.variable-row-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(25, 36, 46, 0.1);
}

.variable-token {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.1);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  font-weight: 600;
}

.variable-input-card {
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(25, 36, 46, 0.08);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.variable-input-card:focus-within {
  border-color: rgba(14, 138, 166, 0.32);
  box-shadow: 0 0 0 3px rgba(14, 138, 166, 0.08);
}

.editor-preview-shell {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(19, 32, 44, 0.04);
  border: 1px solid rgba(25, 36, 46, 0.08);
}

.editor-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}

.editor-preview-title {
  margin: 0;
  font-size: 0.98rem;
}

.editor-preview-output {
  margin: 0;
  min-height: 200px;
  max-height: 360px;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #182230, #131c26);
  color: #f5f9fc;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field-group {
  display: grid;
  gap: 0.45rem;
}

.field-group-invalid {
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(226, 166, 26, 0.36);
  background: rgba(255, 246, 220, 0.72);
}

.editor-subpanel.field-group-invalid {
  padding: 1.15rem 1.2rem;
  border-color: rgba(226, 166, 26, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 246, 220, 0.72),
    rgba(247, 249, 250, 0.6)
  );
  box-shadow: 0 0 0 3px rgba(226, 166, 26, 0.08);
}

.field-group-wide {
  width: 100%;
}

.field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.field-label {
  font-weight: 700;
}

.field-help {
  color: var(--muted);
  font-size: 0.88rem;
}

.field-counter {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.text-input,
.text-area {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.text-input {
  min-height: 46px;
  padding: 0 0.9rem;
}

/*
 * `.select-input` is referenced from multiple admin forms but historically
 * had no base style (only dark-theme overrides). Match the text input height
 * and add a custom dropdown caret so selects line up with sibling text fields
 * inside `.field-group` containers.
 */
.select-input {
  width: 100%;
  min-height: 46px;
  padding: 0 2.5rem 0 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235d6b76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  color: var(--ink);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.text-area {
  resize: vertical;
  padding: 0.9rem;
  line-height: 1.6;
}

.field-group-invalid .text-input,
.field-group-invalid .text-area {
  border-color: rgba(226, 166, 26, 0.85);
  box-shadow: 0 0 0 3px rgba(226, 166, 26, 0.12);
}

.text-area-medium {
  min-height: 112px;
}

.text-area-large {
  min-height: 240px;
}

.tips-panel {
  border-radius: 16px;
  border: 1px solid rgba(41, 161, 98, 0.24);
  background: #eef8f2;
  padding: 1rem;
}

.tips-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.tips-summary::-webkit-details-marker {
  display: none;
}

.tips-title {
  margin: 0;
  font-size: 1rem;
}

.tips-copy {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.tips-summary-action {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.tips-body {
  margin-top: 0.75rem;
}

.tips-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

.editor-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.editor-panel-title {
  margin: 0;
  font-size: 1.2rem;
}

.editor-panel-kicker {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.editor-test-panel,
.editor-comments-panel {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97),
    rgba(247, 249, 250, 0.95)
  );
}

.editor-test-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 1.15rem;
  background: rgba(14, 138, 166, 0.06);
  border-bottom: 1px solid rgba(25, 36, 46, 0.08);
}

.editor-test-summary::-webkit-details-marker {
  display: none;
}

.editor-disclosure-copy {
  display: grid;
  gap: 0.2rem;
}

.editor-test-summary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 138, 166, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.editor-test-body {
  display: grid;
  gap: 1rem;
  margin-top: 0;
  padding: 1.15rem;
}

.editor-comments-body {
  gap: 1.15rem;
}

.editor-test-actions {
  display: flex;
  gap: 0.75rem;
}

.detail-engagement-feedback[data-tone="warning"] {
  color: #8b5e00;
}

.detail-engagement-feedback[data-tone="success"] {
  color: var(--success-line);
}

.editor-test-output {
  min-height: 200px;
  max-height: 320px;
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #182230, #131c26);
  color: #d7f5de;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: pre-wrap;
  line-height: 1.65;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
}

.editor-comments-panel .notice-panel-compact {
  margin: 0;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(14, 138, 166, 0.12);
  background: rgba(248, 251, 252, 0.92);
}

.editor-comments-panel .editor-form {
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.editor-comments-panel .detail-stack-list {
  gap: 0.85rem;
}

.collaborator-roster {
  display: grid;
  gap: 0.85rem;
}

.collaborator-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid rgba(25, 36, 46, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.collaborator-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.12);
  color: var(--brand-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.collaborator-copy {
  display: grid;
  gap: 0.18rem;
}

.collaborator-preview {
  margin: 0.2rem 0 0;
}

.detail-layout {
  display: grid;
  gap: 1rem;
}

.detail-layout-two-column {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
  align-items: start;
}

.detail-layout-review {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  align-items: start;
}

/* --- Review Detail page: header, progress tracker, decision panel --- */

.review-detail-page {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.review-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.review-detail-header-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 320px;
}

.review-detail-header-meta,
.review-detail-header-stage {
  margin: 0;
  color: var(--muted);
}

.review-detail-header-stage {
  font-size: 0.95rem;
}

.review-detail-header-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Simplified Prompt Overview meta list — 2x2 definition list, tighter than
 * the shared .detail-meta-grid and always visually calm next to the
 * Certification Tags editor. */
.review-overview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0.6rem 0 0.2rem;
}

.review-overview-meta-item {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.review-overview-meta-item dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-overview-meta-item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--body, #1a2b38);
}

/* Even vertical rhythm between sections inside the main review panel.
 * Adds a hairline separator + consistent spacing so Instructions doesn't
 * appear crammed between the tag-editor-heavy Overview and the mono
 * Prompt Template block. */
.detail-main-panel > .detail-section-block + .detail-section-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Tighten Instructions specifically: it lives directly under the tag
 * selector section and doesn't need extra breathing room above its
 * heading. */
.detail-main-panel
  > .detail-section-block
  + .detail-section-block
  > .editor-panel-title:first-child {
  margin-top: 0.25rem;
}

/* Give the Certification Tags editor room to breathe above its label
 * so it doesn't collide with the Overview meta grid sitting directly
 * above it. */
.review-tags-field {
  margin-top: 1rem;
}

.review-progress-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.25rem;
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: var(--surface, #ffffff);
  box-shadow: 0 4px 18px rgba(25, 36, 46, 0.04);
  align-items: center;
}

.review-progress-panel-success {
  border-color: rgba(41, 161, 98, 0.28);
  background: rgba(41, 161, 98, 0.07);
}

.review-progress-panel-warning {
  border-color: rgba(196, 120, 22, 0.28);
  background: rgba(196, 120, 22, 0.07);
}

.review-progress-copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.review-progress-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-progress-headline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-deep, #0e2a3f);
}

.review-progress-caption {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.review-progress-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

.review-progress-step {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.85rem 0.75rem 2.55rem;
  border-radius: 12px;
  background: rgba(25, 36, 46, 0.04);
  border: 1px solid rgba(25, 36, 46, 0.06);
  min-width: 0;
}

.review-progress-step + .review-progress-step::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  width: 0.5rem;
  height: 2px;
  background: rgba(25, 36, 46, 0.15);
  transform: translateY(-50%);
}

.review-progress-step-badge {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(25, 36, 46, 0.1);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.review-progress-step-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--body, #1a2b38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-progress-step-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-progress-step-completed {
  background: rgba(41, 161, 98, 0.1);
  border-color: rgba(41, 161, 98, 0.28);
}

.review-progress-step-completed .review-progress-step-badge {
  background: var(--success-line, #29a162);
  color: #ffffff;
}

.review-progress-step-completed .review-progress-step-status {
  color: var(--success-line, #29a162);
}

.review-progress-step-current {
  background: rgba(14, 138, 166, 0.08);
  border-color: rgba(14, 138, 166, 0.35);
  box-shadow: 0 0 0 2px rgba(14, 138, 166, 0.14);
}

.review-progress-step-current .review-progress-step-badge {
  background: var(--brand-deep, #0e2a3f);
  color: #ffffff;
}

.review-progress-step-current .review-progress-step-status {
  color: var(--brand-deep, #0e2a3f);
}

.review-progress-step-denied,
.review-progress-step-canceled {
  background: rgba(196, 120, 22, 0.1);
  border-color: rgba(196, 120, 22, 0.32);
}

.review-progress-step-denied .review-progress-step-badge,
.review-progress-step-canceled .review-progress-step-badge {
  background: #c47816;
  color: #ffffff;
}

.review-progress-step-denied .review-progress-step-status,
.review-progress-step-canceled .review-progress-step-status {
  color: #c47816;
}

/* Sidebar Decision panel — the reviewer's single action module. */

.review-side-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.review-decision-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem;
  border: 1px solid rgba(14, 138, 166, 0.22);
  background: linear-gradient(
    180deg,
    rgba(14, 138, 166, 0.06),
    rgba(14, 138, 166, 0.01) 40%,
    var(--surface, #ffffff) 40%
  );
}

.review-decision-header {
  display: grid;
  gap: 0.1rem;
}

.review-decision-header .editor-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-decision-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.review-decision-actions .button {
  flex: 1 1 auto;
  min-width: 8rem;
}

/* Read-only completion summary shown in place of the Decision panel once
 * the review reaches a terminal state (Approved, Denied, or Canceled).
 * Replaces the misleading "Publish Decision" affordance with a clear
 * outcome + next-step link. */
.review-completion-panel {
  display: grid;
  gap: 0.65rem;
  padding: 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(25, 36, 46, 0.12);
  background: var(--surface, #ffffff);
}

.review-completion-panel .editor-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.review-completion-panel .editor-panel-title {
  margin: 0;
}

.review-completion-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.review-completion-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.review-completion-actions .button {
  flex: 1 1 auto;
  min-width: 8rem;
}

.review-completion-panel-success {
  border-color: rgba(41, 161, 98, 0.32);
  background: linear-gradient(
    180deg,
    rgba(41, 161, 98, 0.08),
    var(--surface, #ffffff) 60%
  );
}

.review-completion-panel-warning {
  border-color: rgba(196, 120, 22, 0.34);
  background: linear-gradient(
    180deg,
    rgba(196, 120, 22, 0.08),
    var(--surface, #ffffff) 60%
  );
}

:root[data-display-theme="dark"] .review-completion-panel {
  background: rgba(29, 43, 53, 0.85);
}

:root[data-display-theme="dark"] .review-completion-panel .editor-panel-title,
:root[data-display-theme="dark"] .review-completion-panel .detail-copy {
  color: #eaf3f7;
}

/* Certification Stages list (below the main content) — clean vertical list. */

.review-stage-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.review-stage-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: var(--surface-soft, #f7f9fa);
}

.review-stage-marker {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(25, 36, 46, 0.08);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.review-stage-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.review-stage-label {
  margin: 0;
  font-weight: 700;
  color: var(--body, #1a2b38);
}

.review-stage-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.review-stage-item-completed {
  background: rgba(41, 161, 98, 0.07);
  border-color: rgba(41, 161, 98, 0.24);
}

.review-stage-item-completed .review-stage-marker {
  background: var(--success-line, #29a162);
  color: #ffffff;
}

.review-stage-item-current {
  background: rgba(14, 138, 166, 0.07);
  border-color: rgba(14, 138, 166, 0.28);
}

.review-stage-item-current .review-stage-marker {
  background: var(--brand-deep, #0e2a3f);
  color: #ffffff;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/*
 * Used when the detail grid contains a single card (e.g. Overview only,
 * after the redundant Description panel was removed since the header
 * already shows description + tags). Overview stretches full-width and
 * its inner meta-grid opens up to more columns so the tiles stay compact.
 */
.detail-grid-single {
  grid-template-columns: 1fr;
}

.detail-grid-single .detail-meta-grid {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.detail-heading-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-header-eyebrow {
  margin-bottom: 0.55rem;
}

.detail-header-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.detail-certified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(41, 161, 98, 0.12);
  color: var(--success-line);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.detail-header-meta-item {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.7rem;
  border-radius: 999px;
  background: rgba(25, 36, 46, 0.06);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.detail-summary-copy {
  margin-top: 0.9rem;
  max-width: 70ch;
}

.detail-header-tags {
  margin-top: 0.9rem;
}

.detail-main-panel,
.detail-side-panel {
  display: grid;
  gap: 1rem;
}

.detail-test-panel-column {
  display: grid;
  align-content: start;
}

.review-comments-panel {
  align-content: start;
}

.detail-section-block {
  display: grid;
  gap: 0.75rem;
}

.review-decision-select {
  width: 100%;
}

.review-header-row {
  align-items: center;
}

.review-header-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-header-status-field {
  min-width: 260px;
  max-width: 320px;
}

.review-header-status-field .field-help {
  max-width: 28ch;
}

/* Responsive: stack the progress tracker on narrow viewports. */
@media (max-width: 960px) {
  .review-progress-panel {
    grid-template-columns: 1fr;
  }

  .review-progress-track {
    grid-auto-flow: row;
    grid-auto-columns: initial;
  }

  .review-progress-step + .review-progress-step::before {
    display: none;
  }
}

.detail-customize-block {
  padding: 0.95rem;
  border-radius: 16px;
  background: rgba(247, 249, 250, 0.95);
  border: 1px solid rgba(25, 36, 46, 0.08);
}

.editor-modal-host[hidden] {
  display: none;
}

.editor-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(16, 26, 32, 0.48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.editor-review-dialog {
  width: min(640px, 100%);
  display: grid;
  gap: 1.15rem;
  padding: 1.6rem;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(14, 138, 166, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.99),
      rgba(247, 249, 250, 0.97)
    );
  border: 1px solid rgba(25, 36, 46, 0.08);
  box-shadow: 0 32px 72px rgba(17, 24, 32, 0.24);
}

.editor-review-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(25, 36, 46, 0.08);
}

.editor-review-close {
  flex: 0 0 auto;
}

.editor-review-kicker {
  margin: 0 0 0.35rem;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.editor-review-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.editor-review-copy {
  margin: 0.65rem 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.editor-review-dialog .notice-actions {
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.dashboard-copy-field-grid {
  display: grid;
  gap: 0.85rem;
}

.detail-subsection-title {
  margin: 0;
  font-size: 0.98rem;
}

.detail-variable-value-list {
  display: grid;
  gap: 0.85rem;
}

.detail-engagement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.detail-launch-preferences {
  display: grid;
  gap: 0.35rem;
}

.detail-action-select {
  max-width: 260px;
}

.detail-launch-note {
  margin: 0;
}

.detail-rating-panel {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(25, 36, 46, 0.1);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255, 248, 230, 0.8),
    rgba(255, 255, 255, 0.95)
  );
}

.detail-rating-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.detail-rating-summary-copy {
  display: grid;
  gap: 0.35rem;
}

.detail-rating-rollup {
  display: grid;
  gap: 0.15rem;
  min-width: 6rem;
}

.detail-rating-average {
  font-size: 1.7rem;
  line-height: 1;
  color: #7c5200;
}

.detail-rating-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-rating-stars {
  display: flex;
  gap: 0.45rem;
}

.detail-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 14px;
}

.detail-rating-star svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.detail-rating-star.is-active {
  border-color: rgba(214, 144, 0, 0.45);
  background: rgba(255, 197, 61, 0.18);
  color: #9b6500;
}

.detail-rating-star.is-active svg {
  fill: currentColor;
}

.detail-like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.detail-like-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.detail-like-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(25, 36, 46, 0.08);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-engagement-feedback {
  min-height: 1.4rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(25, 36, 46, 0.04);
}

.detail-engagement-feedback[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-line);
}

.detail-engagement-feedback[data-tone="warning"] {
  background: var(--warning-bg);
  color: #7c5b00;
}

.detail-engagement-actions .button[aria-pressed="true"] {
  border-color: rgba(41, 161, 98, 0.45);
  background: var(--success-bg);
  color: var(--success-line);
}

.detail-engagement-actions .button[aria-pressed="true"] .detail-like-count {
  background: rgba(41, 161, 98, 0.14);
}

.detail-engagement-actions .button[aria-pressed="true"] svg {
  fill: currentColor;
}

.detail-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.detail-meta-grid {
  display: grid;
  /*
   * Two-column layout keeps the Overview panel compact so it sits well
   * next to the Description panel. `minmax(0, 1fr)` lets long values
   * (emails, review stages) wrap cleanly instead of pushing the column
   * wider. On narrow viewports the media query below collapses to one
   * column.
   */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.7rem;
  margin-top: 0.35rem;
}

.detail-meta-item {
  display: grid;
  gap: 0.25rem;
  padding: 0.15rem 0;
  min-width: 0; /* allow child text to shrink & wrap inside the grid cell */
}

/*
 * Dark mode inherits the same borderless treatment as light mode — no
 * per-tile background needed since the surrounding editor panel already
 * provides the visual container.
 */

.detail-meta-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.detail-meta-value {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.4;
  /*
   * Owner / Certified By / Active Review Stage frequently hold long email
   * addresses. Force wrapping at any character so a single long token can
   * never blow out its cell or overlap the next column.
   */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/*
 * Emails are recognisable at a glance in a monospaced face. Applied only
 * when the value contains an "@" via a helper class the view can opt into
 * — see renderMetadata() in src/views/prompt-detail/index.js.
 */
.detail-meta-value.is-email {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
}

.detail-code-block {
  margin: 0;
  padding: 1rem;
  border-radius: 16px;
  background: #161d24;
  color: #d7f5de;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: pre-wrap;
  overflow: auto;
  line-height: 1.65;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.detail-stack-list {
  display: grid;
  gap: 0.85rem;
}

.detail-stack-item {
  border: 1px solid rgba(25, 36, 46, 0.08);
  border-radius: 14px;
  padding: 0.95rem;
  background: var(--surface-soft);
}

.detail-stack-item.is-active {
  border-color: rgba(14, 138, 166, 0.28);
  background: #eef8fb;
}

.detail-stack-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.detail-stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.detail-compare-panel,
.detail-compare-list,
.detail-compare-column {
  display: grid;
  gap: 0.9rem;
}

.detail-compare-item {
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(242, 179, 37, 0.28);
  background: linear-gradient(
    180deg,
    rgba(255, 249, 232, 0.96),
    rgba(255, 255, 255, 0.98)
  );
}

.detail-compare-item-header,
.detail-compare-columns {
  display: grid;
  gap: 0.8rem;
}

.detail-compare-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-compare-column {
  padding: 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(25, 36, 46, 0.08);
}

.detail-compare-code {
  min-height: 8rem;
}

.detail-comment-author {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.notification-item {
  display: grid;
  gap: 0.75rem;
}

.notification-item.is-unread {
  border-left: 4px solid var(--brand);
}

.notification-item.is-archived {
  opacity: 0.78;
}

.notification-item-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.notification-select-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.notification-item-title {
  margin: 0;
  font-size: 1rem;
}

.notification-item-meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.boot-screen {
  width: min(42rem, calc(100vw - 2rem));
  margin: 6rem auto;
  padding: 2rem;
}

.boot-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-emphasis);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.boot-copy {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

/*
 * Activity loader for the boot screen. The spinner conveys ongoing work
 * visually while role="status" + aria-live="polite" on the boot-screen
 * container announces the heading + copy to assistive tech. The indeterminate
 * progress bar is decorative (aria-hidden) and is reduced to a static state
 * for users who prefer reduced motion via the global rules in this stylesheet.
 */
.boot-activity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.boot-activity-text {
  flex: 1 1 auto;
  min-width: 0;
}

.boot-activity-text h1,
.boot-activity-text .boot-heading {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
}

.boot-activity-text .boot-copy {
  margin: 0.4rem 0 0;
}

.boot-spinner {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 3px solid rgba(14, 138, 166, 0.18);
  border-top-color: var(--brand);
  border-right-color: var(--brand-deep);
  animation: boot-spinner-rotate 0.9s linear infinite;
}

.boot-progress {
  position: relative;
  width: 100%;
  height: 0.4rem;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: rgba(14, 138, 166, 0.14);
  overflow: hidden;
}

.boot-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(14, 138, 166, 0.55),
    var(--brand-deep)
  );
  animation: boot-progress-slide 1.6s ease-in-out infinite;
}

@keyframes boot-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes boot-progress-slide {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(260%);
  }
}

:root[data-display-theme="dark"] .boot-spinner {
  border-color: rgba(99, 200, 223, 0.22);
  border-top-color: var(--brand);
  border-right-color: var(--brand-deep);
}

:root[data-display-theme="dark"] .boot-progress {
  background: rgba(99, 200, 223, 0.18);
}

:root[data-display-theme="dark"] .boot-progress-bar {
  background: linear-gradient(
    90deg,
    rgba(99, 200, 223, 0.55),
    var(--brand-deep)
  );
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root[data-display-theme="dark"] .button-secondary,
:root[data-display-theme="dark"] .header-action,
:root[data-display-theme="dark"] .icon-button,
:root[data-display-theme="dark"] .display-preferences-panel,
:root[data-display-theme="dark"] .profile-menu-panel,
:root[data-display-theme="dark"] .search-assist-panel,
:root[data-display-theme="dark"] .filter-bar,
:root[data-display-theme="dark"] .filter-multiselect-panel,
:root[data-display-theme="dark"] .prompt-preview-dialog,
:root[data-display-theme="dark"] .prompt-preview-related-card,
:root[data-display-theme="dark"] .editor-panel,
:root[data-display-theme="dark"] .resource-card,
:root[data-display-theme="dark"] .resource-section,
:root[data-display-theme="dark"] .notification-item,
:root[data-display-theme="dark"] .review-summary,
:root[data-display-theme="dark"] .resource-entry-panel,
:root[data-display-theme="dark"] .dashboard-personalization-card,
:root[data-display-theme="dark"] .tips-panel,
:root[data-display-theme="dark"] .editor-subpanel,
:root[data-display-theme="dark"] .editor-meta-item,
:root[data-display-theme="dark"] .variable-row,
:root[data-display-theme="dark"] .variable-input-card,
:root[data-display-theme="dark"] .editor-comments-panel .notice-panel-compact,
:root[data-display-theme="dark"] .editor-comments-panel .editor-form,
:root[data-display-theme="dark"] .collaborator-card,
:root[data-display-theme="dark"] .certification-stage-row,
:root[data-display-theme="dark"] .notifications-table thead th,
:root[data-display-theme="dark"] .search-input,
:root[data-display-theme="dark"] .field-input,
:root[data-display-theme="dark"] .field-textarea,
:root[data-display-theme="dark"] .field-select {
  background: rgba(23, 34, 42, 0.98) !important;
  border-color: rgba(236, 244, 248, 0.12) !important;
}

/*
 * Dashboard-scoped opt-out: the dashboard filter bar and the wrapper stack
 * around the prompt catalog grid should sit flush against the page surface
 * in dark mode rather than carry the shared elevated panel background that
 * is applied to filter bars on admin/review pages. The filter controls
 * themselves (selects, multiselects, chips) keep their own dark styling.
 */
:root[data-display-theme="dark"]
  .filter-bar[data-filter-form="dashboard-filters"],
:root[data-display-theme="dark"] .dashboard-content-stack,
:root[data-display-theme="dark"] .dashboard-grid-summary {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/*
 * Dashboard filter bar — compact variant.
 *
 * The shared .filter-bar sizing (44px controls, 220px stacks, 0.76rem labels)
 * is tuned for admin/review pages. On the dashboard the bar is above the
 * catalog grid and should read as a lightweight refinement strip rather than
 * a dense form, so we shrink every part of it here without touching the
 * shared component.
 */
.filter-bar[data-filter-form="dashboard-filters"] {
  gap: 0.65rem 0.75rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-stack {
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 0;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-stack-label,
.filter-bar[data-filter-form="dashboard-filters"]
  .custom-select
  .custom-select-label {
  padding: 0.2rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-select,
.filter-bar[data-filter-form="dashboard-filters"] .filter-multiselect-trigger,
.filter-bar[data-filter-form="dashboard-filters"] .custom-select-trigger {
  min-height: 34px;
  min-width: 0;
  max-width: 100%;
  padding: 0 2rem 0 0.7rem;
  border-radius: 9px;
  font-size: 0.85rem;
  background-position: right 0.6rem center;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-checkbox {
  min-height: 34px;
  font-size: 0.82rem;
  gap: 0.4rem;
  flex: 1 0 100%;
  max-width: max-content;
  white-space: nowrap;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-checkbox input {
  width: 14px;
  height: 14px;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-multiselect-panel {
  padding: 0.65rem;
  border-radius: 12px;
  gap: 0.35rem;
  width: min(260px, 100vw - 3rem);
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-multiselect-option {
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  font-size: 0.82rem;
  gap: 0.45rem;
}

.filter-bar[data-filter-form="dashboard-filters"]
  .filter-multiselect-option
  input {
  width: 14px;
  height: 14px;
}

.filter-bar[data-filter-form="dashboard-filters"] .filter-actions,
.filter-bar[data-filter-form="dashboard-filters"] .button {
  min-height: 34px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

:root[data-display-theme="dark"] .card,
:root[data-display-theme="dark"] .surface-panel,
:root[data-display-theme="dark"] .metric-card,
:root[data-display-theme="dark"] .prompt-card,
:root[data-display-theme="dark"] .empty-state,
:root[data-display-theme="dark"] .table-panel,
:root[data-display-theme="dark"] .boot-screen,
:root[data-display-theme="dark"] .notice-panel,
:root[data-display-theme="dark"] .table-shell,
:root[data-display-theme="dark"] .prompt-preview-state,
:root[data-display-theme="dark"] .prompt-preview-state-error,
:root[data-display-theme="dark"] .dashboard-personalization-panel,
:root[data-display-theme="dark"] .detail-section,
:root[data-display-theme="dark"] .detail-card,
:root[data-display-theme="dark"] .detail-grid-card,
:root[data-display-theme="dark"] .metrics-page-meta,
:root[data-display-theme="dark"] .metrics-insight-item,
:root[data-display-theme="dark"] .metrics-bar-item,
:root[data-display-theme="dark"] .metrics-pie-center,
:root[data-display-theme="dark"] .metrics-empty-chart,
:root[data-display-theme="dark"] .metrics-review-sla-item,
:root[data-display-theme="dark"] .onboarding-panel,
:root[data-display-theme="dark"] .onboarding-tab-preview,
:root[data-display-theme="dark"] .pending-certification-item,
:root[data-display-theme="dark"] .editor-optional-field-empty,
:root[data-display-theme="dark"] .editor-empty-state,
:root[data-display-theme="dark"] .editor-empty-state-subtle,
:root[data-display-theme="dark"] .editor-test-summary-action,
:root[data-display-theme="dark"] .detail-compare-column,
:root[data-display-theme="dark"] .tag-chip,
:root[data-display-theme="dark"] .data-table tbody tr {
  background: rgba(23, 34, 42, 0.94) !important;
  border-color: rgba(236, 244, 248, 0.12) !important;
}

/*
 * Tag selector options (e.g., "Asset Management", "Construction", "Analysis").
 *
 * The shared base rule paints these pills with a near-white background and
 * `color: var(--ink)`, which becomes light-on-light (unreadable) in dark
 * mode. Re-tone the unselected and selected variants against the dark
 * surface variables so the labels remain legible and the active state is
 * still visually distinct.
 */
:root[data-display-theme="dark"] .tag-selector-option,
:root[data-display-theme="dark"] .tag-chip {
  background: rgba(236, 244, 248, 0.08);
  border-color: transparent;
  color: var(--ink);
}

:root[data-display-theme="dark"] .tag-selector-option:hover {
  background: rgba(99, 200, 223, 0.14);
  color: #eaf3f7;
}

:root[data-display-theme="dark"] .tag-selector-option.is-selected,
:root[data-display-theme="dark"] .tag-chip-standard {
  background: rgba(99, 200, 223, 0.18);
  color: #cfeaf3;
}

/* Ensure every status chip stays legible in dark mode. The base rule
 * uses `color: var(--muted)` which resolves to a dim slate in dark
 * theme and disappears against the dark chip surface — so labels like
 * "Published", "Governance Review", and "Operating Unit" were invisible.
 * Force a bright foreground and a slightly stronger surface for the
 * default variant, then let the specialized variants override below. */
:root[data-display-theme="dark"] .status-chip {
  background: rgba(236, 244, 248, 0.12);
  color: #eaf3f7;
}

/* Review Overview meta values (Publication, Certification, Visibility,
 * Current Stage) hard-code a dark ink color via var(--body, #1a2b38),
 * which stays dark in dark mode and becomes unreadable. Force a bright
 * foreground here. */
:root[data-display-theme="dark"] .review-overview-meta-item dd {
  color: #eaf3f7;
}

/* Certification Progress step labels ("Governance Review", "Final
 * Certification") and the Certification Stages timeline labels also
 * hard-code `color: var(--body, #1a2b38)`, so they render as near-black
 * text against the dark step surface. Force a bright foreground in dark
 * theme so both stage names remain readable. */
:root[data-display-theme="dark"] .review-progress-step-label,
:root[data-display-theme="dark"] .review-stage-label {
  color: #eaf3f7;
}

:root[data-display-theme="dark"] .status-chip-pendingcertification,
:root[data-display-theme="dark"] .status-chip-inreview {
  background: var(--warning-bg);
  color: var(--warning-line);
}

:root[data-display-theme="dark"] .status-chip-denied {
  background: rgba(161, 28, 49, 0.28);
  color: #ff9aaa;
}

:root[data-display-theme="dark"] .status-chip-retired {
  background: var(--chip);
  color: var(--muted);
}

:root[data-display-theme="dark"] .onboarding-tab-pill.is-active {
  background: var(--surface-soft);
  color: var(--brand-deep);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.32);
}

:root[data-display-theme="dark"] .detail-stack-item.is-active {
  background: rgba(99, 200, 223, 0.16);
  border-color: rgba(99, 200, 223, 0.34);
}

:root[data-display-theme="dark"] .metrics-review-sla-item-overdue {
  background: rgba(161, 28, 49, 0.22) !important;
  border-color: rgba(161, 28, 49, 0.4) !important;
}

:root[data-display-theme="dark"] .metrics-review-sla-item-duesoon {
  background: var(--warning-bg) !important;
  border-color: rgba(230, 187, 67, 0.36) !important;
}

:root[data-display-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, var(--sidebar), #0d151a);
}

:root[data-display-theme="dark"] .header-brand-mark .brand-logo-default {
  display: none;
}

:root[data-display-theme="dark"] .header-brand-mark .brand-logo-dark {
  display: block;
}

:root[data-display-theme="dark"] .header-brand-icon {
  filter: invert(1) brightness(1.05);
}

:root[data-display-theme="dark"] .button-primary {
  box-shadow: 0 10px 20px rgba(230, 187, 67, 0.18);
}

:root[data-display-theme="dark"] .detail-customize-block {
  background: linear-gradient(
    180deg,
    rgba(29, 43, 53, 0.96),
    rgba(23, 34, 42, 0.96)
  );
  border-color: rgba(132, 215, 232, 0.18);
}

:root[data-display-theme="dark"] .detail-rating-panel {
  background: linear-gradient(
    135deg,
    rgba(60, 43, 11, 0.94),
    rgba(23, 34, 42, 0.98)
  );
  border-color: rgba(230, 187, 67, 0.24);
}

:root[data-display-theme="dark"] .detail-rating-average {
  color: #ffd978;
}

:root[data-display-theme="dark"] .detail-rating-star.is-active {
  border-color: rgba(255, 217, 120, 0.44);
  background: rgba(255, 197, 61, 0.2);
  color: #ffd978;
}

:root[data-display-theme="dark"] .data-table thead th {
  background: rgba(29, 43, 53, 0.98);
  color: var(--ink);
  border-bottom-color: rgba(236, 244, 248, 0.12);
}

:root[data-display-theme="dark"]
  .display-preferences-option
  input:checked
  + span {
  background: rgba(99, 200, 223, 0.18);
  border-color: rgba(99, 200, 223, 0.46);
}

:root[data-display-theme="dark"] .search-assist-item:hover,
:root[data-display-theme="dark"] .search-assist-item.is-active {
  background: rgba(99, 200, 223, 0.18);
  color: var(--ink);
}

:root[data-display-theme="dark"] .search-assist-item:focus-visible {
  background: rgba(99, 200, 223, 0.18);
  color: var(--ink);
  outline: 2px solid rgba(132, 215, 232, 0.92);
}

:root[data-display-theme="dark"] .search-input::placeholder,
:root[data-display-theme="dark"] .text-input::placeholder,
:root[data-display-theme="dark"] .text-area::placeholder,
:root[data-display-theme="dark"] .text-area-input::placeholder,
:root[data-display-theme="dark"] .field-input::placeholder,
:root[data-display-theme="dark"] .field-textarea::placeholder {
  color: rgba(236, 244, 248, 0.72);
  opacity: 1;
}

:root[data-display-theme="dark"]
  .display-preferences-option
  input:focus-visible
  + span,
:root[data-display-theme="dark"] .header-brand-mark:focus-visible,
:root[data-display-theme="dark"] .search-input:focus,
:root[data-display-theme="dark"] .filter-select:focus,
:root[data-display-theme="dark"] .filter-checkbox input:focus-visible + span,
:root[data-display-theme="dark"] .prompt-card:focus-visible {
  outline-color: rgba(132, 215, 232, 0.92);
}

/* Native select dropdown options - some browsers ignore color-scheme for these */
:root[data-display-theme="dark"] .filter-select option,
:root[data-display-theme="dark"] .field-select option,
:root[data-display-theme="dark"] select option {
  background-color: #17222a;
  color: #ecf4f8;
}

/* Recolor the shared chevron icon for dark theme */
:root[data-display-theme="dark"] .filter-select,
:root[data-display-theme="dark"] .filter-multiselect-trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23aabdc8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Multiselect popup panel option rows - ensure contrast against the now-dark panel */
:root[data-display-theme="dark"] .filter-multiselect-option {
  background: rgba(236, 244, 248, 0.04);
  color: var(--ink);
}

:root[data-display-theme="dark"] .filter-multiselect-option:hover {
  background: rgba(132, 215, 232, 0.14);
}

:root[data-display-theme="dark"] .filter-multiselect-option-select-all {
  background: rgba(132, 215, 232, 0.12);
  border-color: rgba(132, 215, 232, 0.32);
  color: var(--ink);
}

@media (min-width: 1241px) {
  .app-header {
    display: grid;
    /* 4 columns: sidebar-aligned brand mark | title (soaks up slack so it
       never collides with the search) | compact header search | actions.
       The search column is auto-sized to a fixed max so it stays right-
       aligned and never dominates the topbar. */
    grid-template-columns: 256px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 1rem;
  }

  .header-brand {
    display: contents;
  }

  .header-brand-mark {
    grid-column: 1;
    justify-self: start;
  }

  .header-title-group {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
  }

  .header-title {
    grid-column: auto;
    padding-left: 0;
    /* Prevent long taglines from pushing the search field off the row. */
    min-width: 0;
    overflow: hidden;
  }

  /* Subtitle now uses a short pipe-separated tagline that fits comfortably
     alongside the brand mark and header search, so it stays visible at
     every breakpoint rather than being hidden on desktop. */
  .header-title .header-subtitle {
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-search {
    grid-column: 3;
    justify-self: end;
    /* Compact, right-aligned width that never crowds the title column. */
    margin: 0;
    width: clamp(12rem, 22vw, 18rem);
    max-width: none;
    flex: initial;
  }

  .header-actions {
    grid-column: 4;
    justify-self: end;
  }

  .app-frame {
    align-items: start;
    min-height: calc(100vh - var(--app-header-height));
  }

  .app-sidebar {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    width: var(--app-sidebar-width);
    height: calc(100vh - var(--app-header-height));
    align-self: start;
  }

  .app-main {
    grid-column: 2;
  }
}

@media (max-width: 1240px) {
  .card-grid,
  .dashboard-personalization-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .metrics-panel-wide {
    grid-column: auto;
  }

  .metrics-distribution-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .metrics-chart-metadata {
    align-items: flex-start;
  }

  .resource-section {
    grid-template-columns: 1fr;
  }

  .onboarding-grid,
  .resource-entry-panel {
    grid-template-columns: 1fr;
  }

  /*
   * Welcome / onboarding modal on phones and small tablets.
   *
   * The base dialog is 760px wide, uses 1.6rem inner padding, and
   * renders a two-column grid plus a large clamp() title. On mobile
   * that produced a dialog taller than the viewport, with content
   * clipped at the top and bottom and the "Get Started" action row
   * pushed off-screen. Constrain the overlay, make the dialog fill
   * the viewport width, cap its height to the visible area, and let
   * it scroll internally so every panel and action button is reachable.
   */
  .onboarding-overlay {
    padding: 0.75rem;
    place-items: start center;
  }

  .onboarding-dialog {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    border-radius: 20px;
    overflow-y: auto;
  }

  .onboarding-dialog-inner {
    padding: 1.15rem;
    gap: 1.1rem;
  }

  .onboarding-title {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    line-height: 1.15;
  }

  .onboarding-description {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .onboarding-panel {
    padding: 1rem;
    border-radius: 16px;
  }

  .onboarding-panel-visual {
    order: -1;
  }

  .onboarding-tab-preview {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .onboarding-tab-pill {
    flex: 0 1 auto;
  }

  .onboarding-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .onboarding-actions .button {
    width: 100%;
    justify-content: center;
  }

  .detail-layout-two-column,
  .detail-layout-review,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-compare-columns {
    grid-template-columns: 1fr;
  }

  .editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-layout > [data-editor-panel-tab] {
    position: static;
  }

  .system-tag-form {
    grid-template-columns: 1fr;
  }

  .role-assignment-form {
    grid-template-columns: 1fr;
  }

  .role-assignment-field-wide,
  .role-assignment-actions {
    grid-column: 1 / -1;
  }

  .role-assignment-header {
    flex-direction: column;
    align-items: stretch;
  }

  .manage-prompts-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .role-assignment-search {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }

  .manage-prompts-header-search {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }

  /*
   * Manage Prompts mobile hardening.
   *
   * Once the data-table collapses to the stacked block layout (each cell
   * becomes a full-width block with its data-label pseudo-element), a
   * handful of desktop-only rules keep clipping content or forcing
   * unusable widths. The overrides below neutralize them.
   */
  .data-table .table-tag-list {
    max-width: none;
  }

  .data-table td:last-child:has(.table-row-cta) {
    text-align: left;
    width: auto;
    white-space: normal;
  }

  /*
   * Row-level buttons inside stacked data tables (e.g. the "Review →"
   * primary CTA on the Pending queue, or the Open / Retire secondary
   * actions in the Inventory tab) should stay intrinsically sized. The
   * global mobile rule `.button { width: 100% }` otherwise stretches
   * every row action into a full-width yellow bar under each cell,
   * which looks broken and takes an unusable amount of vertical space.
   */
  .data-table .button,
  .data-table .button-inline,
  .data-table .button-small,
  .data-table .table-row-cta {
    width: auto;
    min-height: 34px;
    padding: 0 0.85rem;
    font-size: 0.85rem;
  }

  .data-table .table-actions,
  .data-table td:last-child:has(.table-row-cta) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-start;
  }

  .table-cell-secondary {
    white-space: normal;
  }

  .table-actions,
  .table-actions-end {
    justify-content: stretch;
  }

  .pending-queue-table .data-table th:first-child,
  .pending-queue-table .data-table td:first-child {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .certification-stage-row {
    padding: 0.85rem 0.9rem;
  }

  .certification-stage-actions,
  .system-tag-form-actions,
  .inventory-form-actions,
  .inventory-selection-actions,
  .certification-workflow-actions {
    justify-content: stretch;
  }

  .system-tag-preview-line {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .inventory-import-textarea {
    min-height: 200px;
    font-size: 0.82rem;
  }

  /*
   * Editor review / confirmation dialogs (used for retire / bulk-update
   * confirmations and prompt-editor review handoffs). On phones the
   * default 1.6rem padding plus 1.5rem overlay padding leaves almost no
   * room for content; make the dialog nearly full-width with a scrollable
   * body and stretched action buttons so nothing gets cut off.
   */
  .editor-review-overlay {
    padding: 0.75rem;
    align-items: flex-start;
  }

  .editor-review-dialog {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    padding: 1.1rem;
    border-radius: 20px;
    gap: 0.9rem;
  }

  .editor-review-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .editor-review-close {
    align-self: flex-end;
  }

  .editor-review-title {
    font-size: 1.15rem;
  }

  .editor-review-dialog .notice-actions,
  .editor-review-dialog .editor-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
  }

  .editor-review-dialog .notice-actions .button,
  .editor-review-dialog .editor-actions .button {
    width: 100%;
  }

  /* Prompt Preview modal (opened from prompt cards): tighten overlay
     padding and clamp the dialog to the viewport height so the close
     button and scroll region stay reachable. */
  .editor-review-overlay,
  .editor-modal-host .editor-review-overlay {
    padding: 0.75rem;
  }

  .prompt-preview-dialog {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    border-radius: 20px;
  }

  .prompt-preview-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
}

@media (max-width: 1240px) {
  .app-frame {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    border-right: 0;
  }

  .sidebar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--sidebar-line);
  }

  .sidebar-link {
    min-height: 64px;
    padding: 0.9rem 1rem;
    border-top: 0;
    border-right: 1px solid var(--sidebar-line);
  }

  .sidebar-link:nth-child(3n) {
    border-right: 0;
  }

  .sidebar-footer {
    display: none;
  }

  .app-header {
    padding: 1rem;
  }

  .header-brand {
    flex: 1 1 auto;
  }

  .page-header,
  .table-header-copy,
  .editor-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .metrics-page-meta {
    width: 100%;
  }

  .header-actions,
  .editor-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .display-preferences-panel {
    right: auto;
    left: 0;
  }

  .editor-header {
    padding: 1.2rem;
    position: static;
  }

  .header-actions .button,
  .editor-actions .button,
  .editor-actions a.button {
    flex: 1 1 220px;
    width: auto;
  }

  .editor-step-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .editor-step-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .content-shell {
    padding: 0 1rem 2rem;
  }
}

@media (max-width: 720px) {
  .app-shell {
    --app-header-height: 152px;
  }

  .content-shell,
  .app-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-grid,
  .dashboard-personalization-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metrics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .resource-cards-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-link {
    min-height: 60px;
    padding: 0.8rem 0.85rem;
    gap: 0.6rem;
  }

  .sidebar-link:nth-child(3n) {
    border-right: 1px solid var(--sidebar-line);
  }

  .sidebar-link:nth-child(2n) {
    border-right: 0;
  }

  .portal-search,
  .filter-bar,
  .notice-actions,
  .onboarding-actions,
  .resource-links-row,
  .resource-entry-actions,
  .prompt-card-actions,
  .table-actions,
  .notification-banner-actions,
  .header-actions,
  .editor-actions,
  .editor-test-actions {
    width: 100%;
  }

  .button,
  .button-inline,
  .icon-button {
    width: 100%;
  }

  .prompt-copy-button {
    width: 44px;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
  }

  .header-brand {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .header-brand-mark {
    width: 100%;
    max-width: 222px;
  }

  .header-brand-mark .brand-logo {
    max-width: 154px;
  }

  .header-actions .button,
  .editor-actions .button,
  .editor-actions a.button {
    flex: 1 1 100%;
  }

  .portal-search,
  .table-header-copy,
  .editor-panel-header,
  .notification-item-header,
  .notification-select-row,
  .detail-stack-header,
  .editor-review-header,
  .prompt-preview-header,
  .metrics-section-header,
  .metrics-bar-header,
  .metrics-legend-item,
  .metrics-chart-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .metrics-review-sla-list {
    gap: 0.85rem;
  }

  .metrics-review-sla-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
    align-items: stretch;
  }

  .metrics-review-sla-primary,
  .metrics-review-sla-timing {
    text-align: left;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .metrics-review-sla-timing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(25, 36, 46, 0.12);
  }

  .metrics-review-sla-timing .metrics-review-sla-value {
    font-size: 0.95rem;
  }

  .metrics-review-sla-actions {
    justify-content: stretch;
    gap: 0.5rem;
  }

  .metrics-review-sla-actions .button {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  :root[data-display-theme="dark"] .metrics-review-sla-timing {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
  .editor-test-summary {
    align-items: flex-start;
  }

  .notifications-toolbar-actions {
    justify-items: stretch;
    width: 100%;
  }

  .notifications-message-cell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notifications-unread-dot {
    display: none;
  }

  .search-field-shell,
  .search-input-wrap,
  .filter-select,
  .detail-meta-grid,
  .prompt-preview-meta-grid {
    width: 100%;
  }

  .detail-meta-grid,
  .prompt-preview-meta-grid {
    grid-template-columns: 1fr;
  }

  .prompt-preview-related-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
    letter-spacing: 0.04em;
  }

  .header-subtitle {
    font-size: 0.88rem;
  }

  .editor-panel,
  .surface-panel,
  .table-panel,
  .notice-panel,
  .empty-state,
  .prompt-preview-dialog {
    padding: 1rem;
  }

  .pending-certification-item,
  .notification-banner-actionable {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-action-select {
    min-width: 100%;
    max-width: none;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .icon-button,
  .user-chip,
  .header-action {
    width: 44px;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }

  .data-table-scroll {
    /*
     * At the mobile stacked breakpoint the .data-table itself becomes
     * a block layout (each cell stacks vertically with its data-label
     * pseudo-element), so a horizontal scroll on the wrapper would be
     * both useless and visually incorrect. Reset the wrapper so it
     * participates in the block layout too and strip the scroll-shadow
     * background since there is nothing horizontal to hint at.
     */
    overflow-x: visible;
    background: none;
  }

  .data-table-scroll > .data-table {
    min-width: 0;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody tr {
    padding: 0.5rem 0;
  }

  .data-table tbody td {
    padding: 0.45rem 0;
    border-bottom: 0;
  }

  .data-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/*
 * Global activity indicator (removed).
 *
 * The portal previously rendered a thin top progress bar driven by
 * `portal:navigate-start` / `portal:network-activity-start|end` events.
 * Users found the bar distracting on every page transition, so it was
 * removed in favor of the per-button circular spinners (.button.is-busy)
 * and the view-skeleton spinner that appears in the main content area
 * during route data fetches. The router and API client still dispatch
 * the same events so future visualizations can opt back in without
 * rewiring the producer side.
 */

/*
 * View transition skeleton.
 *
 * Paint between route clicks and view data resolution so users see the
 * destination is actively loading rather than the previous view sitting
 * frozen on screen.
 */
.view-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 280px;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}

.view-skeleton-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(14, 138, 166, 0.18);
  border-top-color: var(--brand);
  border-right-color: var(--brand-deep);
  animation: portal-spinner-rotate 0.85s linear infinite;
}

.view-skeleton-copy {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes portal-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Inline busy state for buttons that fire async work.
 *
 * Adding the `is-busy` class flips the button label to slightly dimmed,
 * disables interaction, and renders a tiny CSS-only spinner before the
 * label. The button retains its existing width so nothing in the
 * surrounding layout jumps.
 */
.button.is-busy,
.button[data-busy="true"],
.header-action.is-busy,
.icon-button.is-busy {
  position: relative;
  cursor: progress;
}

.button.is-busy > *,
.button[data-busy="true"] > * {
  opacity: 0.6;
}

.button.is-busy::before,
.button[data-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: portal-spinner-rotate 0.7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}

.button-inline.is-busy::before,
.button-inline[data-busy="true"]::before {
  width: 11px;
  height: 11px;
  border-width: 2px;
  margin-right: 0.35rem;
}

.header-action.is-busy::after,
.icon-button.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  border-top-color: var(--brand);
  border-right-color: var(--brand-deep);
  animation: portal-spinner-rotate 0.75s linear infinite;
  pointer-events: none;
}

/*
 * Dark theme overrides for the view skeleton spinner — it paints on top
 * of the dark background and needs higher contrast to remain visible.
 */
:root[data-display-theme="dark"] .view-skeleton-spinner {
  border-color: rgba(132, 215, 232, 0.18);
  border-top-color: var(--brand);
  border-right-color: var(--brand-deep);
}

/*
 * Dark theme contrast remediation.
 *
 * Many surfaces hard-code a near-white background (rgba(255, 255, 255, x))
 * or a dark text color (#9f6a00, #8b5e00, #7c5200 …) that was designed
 * against a light surface. When the theme switches, the surface variables
 * change but those hard-coded values do not — which produces the
 * unreadable grey-on-grey panels users were seeing. The block below patches
 * the gaps so every panel, card, dropdown, status chip, and helper text
 * keeps its contrast in dark mode without rewriting every callsite.
 *
 * The rules below intentionally use `!important` on background and color so
 * they win over the original light-theme declarations regardless of where
 * the original declaration appears in the cascade.
 */
:root[data-display-theme="dark"] .display-preferences-panel,
:root[data-display-theme="dark"] .profile-menu-panel,
:root[data-display-theme="dark"] .header-search-suggestions,
:root[data-display-theme="dark"] .search-assist-panel,
:root[data-display-theme="dark"] .resource-section,
:root[data-display-theme="dark"] .resource-entry-panel,
:root[data-display-theme="dark"] .notification-item,
:root[data-display-theme="dark"] .review-summary,
:root[data-display-theme="dark"] .dashboard-personalization-card,
:root[data-display-theme="dark"] .tips-panel,
:root[data-display-theme="dark"] .editor-meta-item,
:root[data-display-theme="dark"] .variable-row,
:root[data-display-theme="dark"] .variable-input-card,
:root[data-display-theme="dark"] .collaborator-card,
:root[data-display-theme="dark"] .notifications-table thead th,
:root[data-display-theme="dark"] .card,
:root[data-display-theme="dark"] .surface-panel,
:root[data-display-theme="dark"] .metric-card,
:root[data-display-theme="dark"] .prompt-card,
:root[data-display-theme="dark"] .empty-state,
:root[data-display-theme="dark"] .table-panel,
:root[data-display-theme="dark"] .boot-screen,
:root[data-display-theme="dark"] .notice-panel,
:root[data-display-theme="dark"] .table-shell,
:root[data-display-theme="dark"] .dashboard-personalization-panel,
:root[data-display-theme="dark"] .detail-section,
:root[data-display-theme="dark"] .detail-card,
:root[data-display-theme="dark"] .detail-grid-card,
:root[data-display-theme="dark"] .metrics-page-meta,
:root[data-display-theme="dark"] .metrics-insight-item,
:root[data-display-theme="dark"] .metrics-bar-item,
:root[data-display-theme="dark"] .metrics-pie-center,
:root[data-display-theme="dark"] .metrics-empty-chart,
:root[data-display-theme="dark"] .metrics-review-sla-item,
:root[data-display-theme="dark"] .onboarding-panel,
:root[data-display-theme="dark"] .onboarding-tab-preview,
:root[data-display-theme="dark"] .pending-certification-item,
:root[data-display-theme="dark"] .detail-compare-column,
:root[data-display-theme="dark"] .tag-chip,
:root[data-display-theme="dark"] .data-table tbody tr {
  color: var(--ink);
}

/*
 * Profile submenu — extra dark-mode polish.
 *
 * The panel background/border are patched by the shared surface list above,
 * but several inner elements (divider, item hover, sign-out danger hover,
 * caret badge sitting on the avatar) have palette-specific values that need
 * their own dark overrides to keep contrast and legibility.
 */
:root[data-display-theme="dark"] .profile-menu-panel {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important;
}

:root[data-display-theme="dark"] .profile-menu-divider {
  background: rgba(236, 244, 248, 0.12);
}

:root[data-display-theme="dark"] .profile-menu-item {
  color: var(--ink);
}

:root[data-display-theme="dark"] .profile-menu-item:hover,
:root[data-display-theme="dark"] .profile-menu-item:focus-visible {
  background: rgba(236, 244, 248, 0.08);
}

:root[data-display-theme="dark"] .profile-menu-item-danger:hover,
:root[data-display-theme="dark"] .profile-menu-item-danger:focus-visible {
  background: rgba(232, 90, 106, 0.18);
  color: #ff7a88;
}

:root[data-display-theme="dark"] .profile-menu-email {
  color: rgba(236, 244, 248, 0.72);
}

:root[data-display-theme="dark"] .profile-menu-roles {
  color: #7ecfe6;
}

/* The caret badge sits on its own ring of surface colour so it stays legible
   on both light and dark headers. In dark mode the base rule's
   `background: var(--surface)` already resolves to a dark tone, but the
   default ink colour is a low-contrast dark grey — force it to the light
   dark-mode ink so the chevron is visible against the badge. */
:root[data-display-theme="dark"] .profile-menu-caret {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--surface);
}

/*
 * Status chips and tonal text colors.
 *
 * The pending/in-review/denied/retired chips hard-code a dark on light
 * palette that turns into low-contrast dark-on-dark in the new theme.
 * Re-map their colors against the dark surface variables so the labels
 * remain readable.
 */
:root[data-display-theme="dark"] .status-chip-certified {
  background: rgba(99, 200, 223, 0.18);
  color: #84d7e8;
}

:root[data-display-theme="dark"] .editor-tab.has-error {
  color: #ffd978 !important;
  background: rgba(230, 187, 67, 0.22) !important;
  border-color: rgba(230, 187, 67, 0.4) !important;
}

:root[data-display-theme="dark"]
  .detail-engagement-feedback[data-tone="warning"] {
  color: #ffd978;
}

:root[data-display-theme="dark"] .detail-rating-average {
  color: #ffd978;
}

:root[data-display-theme="dark"]
  .detail-engagement-feedback[data-tone="success"] {
  color: var(--success-line);
}

/*
 * Notification banner backgrounds — the success/info/warning variants paint
 * pastel light backgrounds that swallow text in dark mode. Re-tone them so
 * the message and title use the high-contrast `--*-line` variables that
 * already shift correctly between themes.
 */
:root[data-display-theme="dark"] .notification-banner-success {
  background: var(--success-bg) !important;
  border-color: var(--success-line) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .notification-banner-info {
  background: var(--info-bg) !important;
  border-color: var(--info-line) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .notification-banner-warning {
  background: var(--warning-bg) !important;
  border-color: var(--warning-line) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .notification-banner .notification-title,
:root[data-display-theme="dark"] .notification-banner .notification-message {
  color: var(--ink) !important;
}

/*
 * Inputs and form fields — make sure all text-entry surfaces inherit the
 * dark surface and dark ink colors rather than the light-mode defaults.
 */
:root[data-display-theme="dark"] .text-input,
:root[data-display-theme="dark"] .text-area,
:root[data-display-theme="dark"] .text-area-input,
:root[data-display-theme="dark"] .select-input,
:root[data-display-theme="dark"] .filter-select,
:root[data-display-theme="dark"] .filter-multiselect-trigger,
:root[data-display-theme="dark"] .field-input,
:root[data-display-theme="dark"] .field-textarea,
:root[data-display-theme="dark"] .field-select,
:root[data-display-theme="dark"] .search-input {
  background-color: rgba(23, 34, 42, 0.96) !important;
  color: var(--ink) !important;
  border-color: rgba(236, 244, 248, 0.16) !important;
}

:root[data-display-theme="dark"] .text-input:focus,
:root[data-display-theme="dark"] .text-area:focus,
:root[data-display-theme="dark"] .text-area-input:focus,
:root[data-display-theme="dark"] .select-input:focus,
:root[data-display-theme="dark"] .field-input:focus,
:root[data-display-theme="dark"] .field-textarea:focus,
:root[data-display-theme="dark"] .field-select:focus {
  border-color: rgba(132, 215, 232, 0.6) !important;
  outline-color: rgba(132, 215, 232, 0.6) !important;
}

/*
 * Code blocks and monospaced output — these traditionally render against a
 * very dark background to highlight syntax. Ensure they stay readable when
 * the surrounding light-theme contrast assumption is reversed.
 *
 * `.detail-code-block` (used by the "Prompt Template" pre on the prompt
 * detail page) and the editor preview/output siblings all ship a `#161d24`
 * light-mode background that is visually indistinguishable from the dark
 * `--surface` (~`#17222a`). The near-black background, brand-tinted border,
 * and outer drop shadow below force each pre to read as its own clearly
 * separated "terminal" surface so the prompt template body stops looking
 * like unreadable grey-on-grey text floating on the panel.
 */
:root[data-display-theme="dark"] .editor-test-output,
:root[data-display-theme="dark"] .editor-preview-output,
:root[data-display-theme="dark"] .builder-template-output,
:root[data-display-theme="dark"] .detail-code-block {
  background: #05090d !important;
  color: #e8fbef !important;
  border: 1px solid rgba(132, 215, 232, 0.32) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(132, 215, 232, 0.06) !important;
}

/*
 * The `.builder-template-shell` wraps `.builder-template-output` and ships
 * its own near-black background + faint white border. Re-tone the shell so
 * its edges remain visible against the dark editor panel.
 *
 * Both selectors (bare `.builder-template-shell` and the descendant
 * `.editor-raw-preview .builder-template-shell` at line 3271) need to be
 * overridden because the descendant version has higher specificity than
 * the bare one.
 */
:root[data-display-theme="dark"] .builder-template-shell,
:root[data-display-theme="dark"] .editor-raw-preview .builder-template-shell {
  background: #05090d !important;
  border: 1px solid rgba(132, 215, 232, 0.32) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/*
 * Collapsible "Prompt Template" raw-preview panel on the create-new-prompt
 * page. The `<details class="editor-raw-preview">` ships a near-white
 * background (`rgba(255, 255, 255, 0.6)`) and a near-white "Show or hide"
 * toggle pill (`rgba(255, 255, 255, 0.92)`), both of which read as washed
 * out grey rectangles against the dark editor panel. Force them onto the
 * dark surface palette with a clearly visible brand-tinted border so the
 * panel is unmistakable but doesn't dissolve into the page.
 */
:root[data-display-theme="dark"] .editor-raw-preview {
  background: rgba(11, 18, 24, 0.96) !important;
  border-color: rgba(132, 215, 232, 0.22) !important;
}

:root[data-display-theme="dark"] .editor-raw-preview[open] {
  border-color: rgba(132, 215, 232, 0.4) !important;
}

:root[data-display-theme="dark"] .editor-raw-preview-summary {
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .editor-raw-preview-kicker {
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .editor-raw-preview-toggle {
  background: rgba(132, 215, 232, 0.12) !important;
  border-color: rgba(132, 215, 232, 0.32) !important;
  color: var(--brand-deep) !important;
}

:root[data-display-theme="dark"]
  .editor-raw-preview[open]
  .editor-raw-preview-toggle {
  background: var(--brand-deep) !important;
  color: #0f151a !important;
  border-color: var(--brand-deep) !important;
}

/*
 * The editor "Template Source" textarea (and its sibling text inputs) uses
 * `var(--surface)` for its background in light mode. In dark mode that
 * resolves to the same `#17222a` as the surrounding `.editor-panel`, so
 * the editable field has no visible boundary against the panel. Give it a
 * darker inset surface so it reads as a clearly editable area.
 */
:root[data-display-theme="dark"] .editor-textarea-shell .text-area,
:root[data-display-theme="dark"] .text-area.text-area-large {
  background: #0b1218 !important;
  color: #ecf4f8 !important;
  border-color: rgba(132, 215, 232, 0.28) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

:root[data-display-theme="dark"] .editor-textarea-shell .text-area:focus,
:root[data-display-theme="dark"] .text-area.text-area-large:focus {
  border-color: rgba(132, 215, 232, 0.7) !important;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(132, 215, 232, 0.22) !important;
}

/*
 * Default table backgrounds — many tables paint white rows directly.
 */
:root[data-display-theme="dark"] .data-table,
:root[data-display-theme="dark"] .data-table tbody td,
:root[data-display-theme="dark"] .data-table tbody tr,
:root[data-display-theme="dark"] .data-table thead {
  background-color: transparent !important;
  color: var(--ink);
}

:root[data-display-theme="dark"] .data-table tbody tr:hover {
  background-color: rgba(132, 215, 232, 0.08) !important;
}

/*
 * Modal overlays — ensure the dim layer is dark enough to read overlay
 * dialog text against and the dialog itself uses a dark surface.
 */
:root[data-display-theme="dark"] .prompt-preview-overlay,
:root[data-display-theme="dark"] .editor-review-overlay,
:root[data-display-theme="dark"] .editor-modal-overlay {
  background: rgba(0, 0, 0, 0.68) !important;
}

/*
 * Welcome / onboarding modal. The `.onboarding-dialog` hard-codes a
 * `linear-gradient(180deg, #ffffff, #f7fafc)` background regardless of
 * theme, so in dark mode the dialog renders as a white sheet with
 * `var(--ink)` (`#ecf4f8` — near-white) text on top — completely
 * unreadable. Re-tone every onboarding surface against the dark palette
 * and force the title / copy / panel text onto explicit dark-mode ink so
 * the "discover prompts first" headline is legible.
 */
:root[data-display-theme="dark"] .onboarding-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
}

:root[data-display-theme="dark"] .onboarding-dialog {
  background:
    radial-gradient(
      circle at top right,
      rgba(99, 200, 223, 0.16),
      transparent 30%
    ),
    linear-gradient(180deg, #1b2832 0%, #14202a 100%) !important;
  border: 1px solid rgba(132, 215, 232, 0.22) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .onboarding-title,
:root[data-display-theme="dark"] .onboarding-panel-title {
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .onboarding-description,
:root[data-display-theme="dark"] .onboarding-panel-copy,
:root[data-display-theme="dark"] .onboarding-list {
  color: var(--ink) !important;
  opacity: 0.92;
}

:root[data-display-theme="dark"] .onboarding-eyebrow {
  color: var(--brand-deep) !important;
}

:root[data-display-theme="dark"] .onboarding-panel {
  background: rgba(23, 34, 42, 0.88) !important;
  border-color: rgba(236, 244, 248, 0.12) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .onboarding-panel-highlight {
  background: linear-gradient(
    180deg,
    rgba(99, 200, 223, 0.16),
    rgba(230, 187, 67, 0.14)
  ) !important;
  border-color: rgba(132, 215, 232, 0.24) !important;
}

:root[data-display-theme="dark"] .onboarding-tab-preview {
  background: rgba(11, 18, 24, 0.72) !important;
}

:root[data-display-theme="dark"] .onboarding-tab-pill {
  color: var(--muted) !important;
}

:root[data-display-theme="dark"] .onboarding-step {
  background: rgba(132, 215, 232, 0.22) !important;
  color: var(--ink) !important;
}

:root[data-display-theme="dark"] .prompt-preview-dialog,
:root[data-display-theme="dark"] .editor-review-dialog,
:root[data-display-theme="dark"] .editor-modal-dialog {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(236, 244, 248, 0.12) !important;
}

/*
 * Sidebar nav active state and hover — the original active state uses a
 * lighter rgba(255,255,255,0.06) which is invisible against the dark
 * sidebar. Replace it with a more pronounced accent so the active route
 * is unmistakable.
 */
:root[data-display-theme="dark"] .sidebar-link.is-active,
:root[data-display-theme="dark"] .sidebar-link:hover {
  background: rgba(132, 215, 232, 0.16);
  color: #ffffff;
}

/*
 * Catch-all softener for any element that defaulted to a white-ish surface
 * but was not enumerated above. The selector targets the common
 * "rgba(255, 255, 255, x)" containers via their utility class names so we
 * don't accidentally darken buttons or chips that rely on the white
 * background as part of their identity.
 */
:root[data-display-theme="dark"] .surface-panel,
:root[data-display-theme="dark"] .editor-panel,
:root[data-display-theme="dark"] .table-panel,
:root[data-display-theme="dark"] .notice-panel,
:root[data-display-theme="dark"] .empty-state,
:root[data-display-theme="dark"] .prompt-card,
:root[data-display-theme="dark"] .metric-card,
:root[data-display-theme="dark"] .detail-card,
:root[data-display-theme="dark"] .detail-section,
:root[data-display-theme="dark"] .detail-grid-card {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: rgba(236, 244, 248, 0.12) !important;
}

/* =========================================================================
 * Mobile responsiveness hardening.
 *
 * The desktop layout pins .app-header with `position: fixed` and reserves
 * space for it with a static `--app-header-height` (100px). That assumption
 * breaks on tablets/phones where the header contents (brand mark, subtitle,
 * grid of action buttons) stack vertically and grow taller than 100px —
 * causing the fixed header to overlap the top of the main content.
 *
 * The rules below unpin the header at ≤980px so the header participates in
 * normal document flow and pushes content down naturally, then tighten
 * spacing / prevent horizontal overflow for phone-sized viewports.
 * ========================================================================= */

/* Global safety net: never allow the page to scroll horizontally on mobile,
   and make sure long words / URLs inside cards wrap instead of pushing the
   layout wider than the viewport. */
@media (max-width: 1240px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell,
  .app-frame,
  .app-main,
  .content-shell {
    max-width: 100vw;
    min-width: 0;
  }

  /* Unpin the header so its natural (stacked) height pushes .app-main down
     instead of overlapping it. Reset the reserved padding-top so we don't
     get a dead band above the header. */
  .app-header {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    min-height: 0;
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .app-shell {
    padding-top: 0;
  }

  /* Give long copy inside cards a chance to wrap on narrow viewports. */
  .prompt-card,
  .detail-card,
  .metric-card,
  .surface-panel,
  .table-panel,
  .notice-panel {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep the profile menu panel from spilling off the right edge when the
     header wraps into a column layout. */
  .profile-menu-panel,
  .display-preferences-panel {
    right: 0;
    left: auto;
    max-width: calc(100vw - 1.5rem);
  }
}

/* Phone-sized viewports (≤720px): rebuild the topbar as an icon-only app
   bar and swap the sidebar for a modern off-canvas drawer opened via the
   hamburger button in the header.

   Interaction is CSS-only: the hidden checkbox #app-sidebar-toggle in
   AppShell.js drives the drawer's open state via `:checked ~ .app-frame`.
   The scrim label and hamburger label both point at the same checkbox, so
   tapping either toggles it. Because the router re-renders the shell on
   every navigation, the checkbox naturally resets to unchecked after any
   nav-link tap, closing the drawer without a JS handler. */

/* Always visually hide the toggle checkbox — it exists only to drive the
   :checked sibling combinator for the mobile drawer. Kept in the a11y tree
   with an explicit aria-hidden on the element itself. */
.app-sidebar-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1240px) {
  /* --- Topbar: [☰] [icon] [search] -------------------------------------- */

  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.55rem 0.75rem;
    gap: 0.55rem;
    row-gap: 0;
    flex-wrap: nowrap;
    min-height: 56px;
    box-shadow: 0 1px 0 var(--line);
  }

  .app-shell {
    /* Top: fixed header height plus a small breathing gap so inline
       notification banners at the top of a view don't visually kiss the
       bottom edge of the topbar. Bottom: fixed action bar (see
       .header-actions rules below) plus iOS home-indicator safe area.
       Content gets equivalent padding via .content-shell so nothing is
       hidden behind either bar. */
    padding-top: calc(56px + 0.75rem);
  }

  /* Hamburger button (a <label> so the CSS-only checkbox toggle works). */
  .app-sidebar-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition:
      background-color 120ms ease,
      border-color 120ms ease;
  }

  .app-sidebar-toggle-button:hover,
  .app-sidebar-toggle-button:focus-within {
    background: var(--surface-soft);
    outline: none;
  }

  .app-sidebar-toggle-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Brand: just the square app icon — no wordmark, no title text. */
  .header-brand {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 0;
    width: auto;
    justify-content: flex-start;
  }

  .header-brand-mark {
    display: none;
  }

  /* Keep the title-group anchor rendered (it wraps the home-linked icon)
     but strip its padding/hover treatment so it reads as a bare icon. */
  .header-title-group {
    display: inline-flex;
    padding: 0;
    margin: 0;
    gap: 0.55rem;
    border-radius: 8px;
  }

  .header-brand-icon {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  /* Phones: hide the wordmark next to the icon, keep only the tappable icon. */
  .header-title {
    display: none;
  }

  /* Search bar: shown in the mobile topbar. The 900px rule hides it, so we
     re-enable it here and let it flex to consume the remaining row width. */
  .header-search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    max-width: none;
  }

  .header-search-input {
    min-height: 40px;
    padding: 0 2.2rem 0 2.2rem;
    font-size: 0.9rem;
  }

  /* --- Bottom action bar: [🔔] [+] [avatar] ----------------------------- */

  /* Take the desktop `.header-actions` cluster out of the topbar and pin it
     to the bottom of the viewport as a native-style action bar. All three
     children (notifications link, primary "Create Prompt" button, profile
     menu) are already inside .header-actions, so no markup change is
     required — we just relocate the whole cluster with position:fixed. */
  .header-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    width: auto;
    flex: 0 0 auto;
    justify-content: space-around;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem calc(0.55rem + env(safe-area-inset-bottom, 0));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(15, 20, 25, 0.08);
  }

  /* Notifications & profile avatar: circular 48px hit targets. */
  .header-actions .header-action,
  .header-actions .user-chip,
  .header-actions .profile-menu-toggle {
    width: 48px;
    height: 48px;
    min-height: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Primary "+" FAB: icon-only yellow circle sized to match the other bar
     items so the row reads as a balanced trio of circles. The base .button
     rule sets min-height:44px and horizontal padding — we reset both here
     and re-declare the flex centering explicitly so the "+" glyph is
     perfectly centred regardless of ambient line-height. */
  .header-actions .button-primary {
    position: relative;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    color: var(--primary-ink);
    box-shadow: 0 6px 18px rgba(243, 194, 47, 0.42);
    flex: 0 0 auto;
    /* Kill the anchor's "Create Prompt" text node entirely so only the
       ::before glyph paints. font-size:0 collapses the width; the ::before
       re-establishes its own font-size below. */
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    overflow: hidden;
  }

  .header-actions .button-primary::before {
    content: "+";
    /* Absolute-positioned overlay that fills the button and paints the
       glyph via flex-centering. Using inset:0 instead of participating in
       the parent's flex layout means the "Create Prompt" text node (which
       is still a flex child, even at font-size:0) cannot shift the "+" off
       the geometric centre of the circle. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-emphasis, inherit);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: inherit;
  }

  /* Profile / display-preferences dropdowns: pin to the viewport instead of
     to the toggle so they never render off-screen. On a phone the toggle
     sits near the right edge and the panel (22rem) would otherwise extend
     past the left edge of the viewport. */
  .header-actions .profile-menu-panel,
  .header-actions .display-preferences-panel {
    position: fixed;
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    width: auto;
    max-width: none;
    max-height: calc(100vh - 88px - env(safe-area-inset-bottom, 0));
    overflow-y: auto;
  }

  /* --- Off-canvas drawer sidebar ---------------------------------------- */

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(78vw, 300px);
    z-index: 30;
    background: linear-gradient(180deg, var(--sidebar), #42464b);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.32);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateX(-100%);
    transition: transform 220ms ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  /* Drawer branded header — icon + full "Enterprise Prompt Library" title.
     Only shown at mobile widths (hidden at ≥721px in the rule further down). */
  .app-sidebar-drawer-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem 0.9rem;
    border-bottom: 1px solid var(--sidebar-line);
    color: #ffffff;
  }

  .app-sidebar-drawer-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    padding: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .app-sidebar-drawer-title {
    font-family: var(--font-emphasis, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #ffffff;
  }

  /* Restore the vertical list layout for links inside the drawer. */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    padding: 0.5rem 0 1rem;
    margin: 0;
    overflow: visible;
  }

  .sidebar-link {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.75rem 1.1rem;
    border: 0;
    border-top: 1px solid var(--sidebar-line);
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
  }

  .sidebar-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .sidebar-link span {
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }

  .sidebar-link.is-active {
    background: var(--sidebar-active);
    border-top-color: var(--sidebar-line);
    color: #ffffff;
  }

  .sidebar-footer {
    display: grid;
    margin-top: auto;
  }

  /* Backdrop scrim. */
  .app-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(15, 20, 25, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    cursor: pointer;
  }

  .app-sidebar-checkbox:checked ~ .app-frame .app-sidebar {
    transform: translateX(0);
  }

  .app-sidebar-checkbox:checked ~ .app-frame .app-sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Content padding — leave room above the fixed bottom action bar.
     ~72px = 56px FAB + 16px vertical padding; add safe-area for iOS. */
  .content-shell {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0));
  }

  /* --- General left alignment for page content on mobile ---------------- */
  /* Previously this block force-centered every page-level container on
     narrow viewports. That looked unbalanced with long copy and mixed
     component types, so revert to left-aligned content which matches the
     desktop layout and the tablet (980px) rule. */
  .content-shell {
    text-align: left;
  }

  .page-header,
  .table-header-copy,
  .editor-header,
  .table-header,
  .empty-state,
  .notice-panel,
  .onboarding-actions,
  .notice-actions,
  .notification-banner-actions,
  .prompt-card-actions,
  .resource-links-row,
  .filter-bar {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .page-title,
  .page-copy,
  .header-subtitle,
  .empty-title,
  .empty-copy,
  .notice-title,
  .notice-copy {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .page-header > * {
    width: 100%;
    justify-content: flex-start;
  }

  /* Reset text-align inside form fields and tables — those elements read
     better left-aligned even on mobile (labels above their inputs, tabular
     data aligned to a common gutter). */
  .field-group,
  .field,
  .field-heading,
  .data-table,
  .data-table tbody td,
  .prompt-card,
  .detail-card,
  .metric-card,
  .surface-panel,
  .table-panel {
    text-align: left;
  }

  /* Cards laid out in a grid stretch full-width instead of centering. */
  .card-grid,
  .metric-grid,
  .metrics-kpi-grid,
  .resource-cards-grid {
    justify-items: stretch;
  }

  /* --- Filter bar (dashboard / library) --------------------------------- */
  /* Base rules use `flex-wrap` + `min-width: 220px` per stack + `flex-end`
     alignment, which on phone viewports produces a cramped, uneven grid
     where the "SCE Certified" checkbox pins itself next to a squeezed
     select. Rebuild as a clean vertical stack so each control gets its own
     row at full width. */
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
  }

  .filter-bar .filter-stack {
    min-width: 0;
    width: 100%;
    gap: 0.25rem;
  }

  .filter-bar .filter-stack-label {
    padding: 0 0.15rem;
    text-align: left;
    font-size: 0.72rem;
  }

  .filter-bar .filter-select,
  .filter-bar .filter-multiselect-trigger {
    width: 100%;
    min-height: 46px;
    font-size: 0.95rem;
  }

  /* Checkbox row: give it space of its own with a subtle top divider so it
     doesn't visually collide with the select above. */
  .filter-bar .filter-checkbox {
    width: 100%;
    justify-content: flex-start;
    padding: 0.35rem 0.15rem 0;
    margin-top: 0.15rem;
    border-top: 1px dashed var(--line);
    font-size: 0.95rem;
  }

  /* Multiselect popover panel: constrain to the viewport width, not the
     trigger's width, so the option list stays readable on narrow phones
     and never overhangs off the right edge. */
  .filter-bar .filter-multiselect-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: calc(100vw - 1.5rem);
    padding: 0.85rem;
  }

  .filter-bar .filter-multiselect-options {
    max-height: 260px;
  }
}

/* Very small phones (≤480px): tighten the topbar and bottom bar. */
@media (max-width: 480px) {
  .content-shell,
  .app-header {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .app-header {
    gap: 0.4rem;
  }

  .header-actions {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }

  .page-title {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .page-header {
    gap: 0.75rem;
  }
}

/* --- Hide the mobile-only chrome at desktop widths ---------------------- */
@media (min-width: 1241px) {
  .app-sidebar-toggle-button,
  .app-sidebar-scrim,
  .app-sidebar-checkbox,
  .app-sidebar-drawer-header {
    display: none !important;
  }
}

/* Medium devices (721-1240px): keep the mobile drawer/topbar/bottom-bar
   layout but restore the full "Enterprise Prompt Library" title next to
   the app icon, and constrain the search to a compact right-aligned pill
   so it never overlaps the title as the viewport shrinks. */
@media (min-width: 721px) and (max-width: 1240px) {
  .header-title {
    display: flex;
  }

  /* Bring the SCE wordmark back on medium widths and cap its size so it
     sits comfortably to the right of the hamburger and left of the
     absolutely-centered title. */
  .header-brand-mark {
    display: inline-flex;
    min-height: 40px;
  }

  .header-brand-mark .brand-logo {
    max-width: 110px;
  }

  .header-title-group {
    /* Icon + title pair, absolutely centered in the topbar so it sits
       between the hamburger (left) and the search pill (right) regardless
       of how much slack is on either side. */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    min-width: 0;
    max-width: calc(100vw - 20rem);
    z-index: 1;
    pointer-events: auto;
  }

  .app-header {
    position: fixed;
    /* Ensure the absolutely-positioned title-group centers against the
       header itself. */
  }

  .header-title {
    text-align: left;
  }

  .header-brand-icon {
    width: 52px;
    height: 52px;
  }

  .header-eyebrow {
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-subtitle {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Compact right-aligned search on medium widths. Uses margin-left:auto
     to soak up all slack between the title and the search, and a clamp()
     width so the field never balloons or overlaps the title. */
  .header-search {
    flex: 0 0 auto;
    width: clamp(11rem, 24vw, 16rem);
    max-width: none;
    margin-left: auto;
  }
}

/* Modern list-row link used in the Pending Certification Queue.
 * The prompt title becomes a clickable link that also carries the
 * creator + submitted date as secondary meta, collapsing what used
 * to be three columns into one. */
.table-row-link {
  display: grid;
  gap: 0.15rem;
  padding: 0.1rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  min-width: 0;
}

.table-row-link:hover .table-row-link-title,
.table-row-link:focus-visible .table-row-link-title {
  color: var(--brand-deep);
  text-decoration: underline;
}

.table-row-link-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.table-row-link-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

:root[data-display-theme="dark"] .table-row-link-title {
  color: #eaf3f7;
}

/* Compact primary CTA anchored on the right edge of each row so
 * approvers never have to scroll horizontally to reach "Review". */
.table-row-cta {
  white-space: nowrap;
}

.data-table td:last-child:has(.table-row-cta) {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* Tag pills inside data-table rows: cap the visible width and allow
 * chips to wrap so a prompt with 6+ tags doesn't stretch the whole
 * row past the viewport. */
.data-table .table-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 260px;
}

/* Scope the Pending / Reviewed queue table so it fits the viewport
 * instead of forcing horizontal scroll. Overrides the global
 * `.data-table-scroll > .data-table { min-width: max-content }` rule
 * that was designed for wide data grids. */
.pending-queue-table .data-table-scroll {
  overflow-x: hidden;
  background: none;
}

.pending-queue-table .data-table-scroll > .data-table {
  min-width: 0;
  width: 100%;
  table-layout: auto;
}

.pending-queue-table .data-table td,
.pending-queue-table .data-table th {
  overflow-wrap: normal;
  word-break: normal;
}

/* Prompt column: narrow, wraps title text on spaces. */
.pending-queue-table .data-table th:first-child,
.pending-queue-table .data-table td:first-child {
  width: 24%;
  min-width: 180px;
  max-width: 280px;
  white-space: normal;
}

.pending-queue-table .table-row-link-title {
  display: inline;
  white-space: normal;
}

.table-cell-secondary {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}