: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;
  /* Left padding aligns the SCE mark with the EPL header logo's left edge. */
  padding: 1rem 1.25rem 1.25rem 2rem;
  border-top: 1px solid var(--sidebar-line);
  display: flex;
  justify-content: flex-start;
}

/*
 * The keyline logo is the brand's dark-surface variant (white wordmark), so it
 * sits directly on the sidebar gradient with no backing panel.
 */
.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  background: transparent;
  text-decoration: none;
}

.sidebar-brand-mark:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

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

.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;
  /* Must sit above the sticky prompt editor header (.editor-header, z:20)
     so the profile dropdown menu is not clipped by it on the edit-prompt
     page. */
  z-index: 30;
}

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

.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: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.15;
  color: var(--ink);
}

.header-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

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

.header-action,
.button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: var(--radius-control, 8px);
  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:focus-visible,
.button:focus-visible,
.icon-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.button {
  min-height: 38px;
  padding: 0 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

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

.button-primary {
  background: var(--primary);
  color: var(--primary-ink);
}

.button-primary:hover {
  background: var(--primary-hover, var(--primary));
}

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

.button-secondary:hover {
  border-color: var(--line-input, var(--line-strong));
  background: var(--surface-muted, var(--surface-soft));
}

/* Destructive action button (e.g., DEV-only Delete Prompt). Red border and
 * red ink over the neutral surface so it stands apart from the primary
 * gold-gradient CTA without introducing a new brand color. */
.button-danger {
  border-color: var(--color-danger, #b91c1c);
  background: var(--surface);
  color: var(--color-danger, #b91c1c);
}

.button-danger:hover,
.button-danger:focus-visible {
  background: var(--color-danger, #b91c1c);
  color: #fff;
}

.button-inline {
  min-height: 32px;
  padding: 0 0.7rem;
  border-radius: 7px;
  font-size: 0.84rem;
}

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

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

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

.header-action {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}

.header-action:hover,
.header-action:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}

.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: 40px;
  padding: 0 4.5rem 0 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-muted);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

.header-search-input:hover {
  border-color: var(--line-input);
}

/* 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: var(--brand);
  box-shadow: var(--focus-ring);
  background: var(--surface);
}

.header-search-shortcut {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: 600 0.72rem/1.5 var(--font-sans);
  pointer-events: none;
}

.header-search-input:focus ~ .header-search-shortcut,
.header-search-input:not(:placeholder-shown) ~ .header-search-shortcut {
  display: none;
}

@media (max-width: 720px) {
  .header-search-shortcut {
    display: none;
  }
}

/* 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;
}

/* Suggestions are grouped: Recent searches / Suggested keywords / Related. */
.header-search-group + .header-search-group {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
}

.header-search-group-label {
  margin: 0;
  padding: 0.35rem 0.75rem 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Profile menu — a button-driven popover under the user chip. The
   container's `open` attribute drives visibility (see the UI refresh layer)
   and src/components/shell/profileMenuBehavior.js owns open/close. */
.profile-menu {
  position: relative;
}

.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-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;
}

/* 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.25rem;
}

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

.page-title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.4rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.page-copy {
  margin: 0.35rem 0 0;
  padding: 0;
  color: var(--muted);
  max-width: 72ch;
  font-size: 0.95rem;
  line-height: 1.55;
}

.card,
.surface-panel,
.metric-card,
.prompt-card,
.empty-state,
.table-panel,
.boot-screen,
.notice-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  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.5rem;
}

.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: 40px;
  padding: 0 1rem 0 2.6rem;
  border-radius: var(--radius-control, 8px);
  border: 1px solid var(--line-input, 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.5rem;
  border-bottom: 1px solid var(--line);
  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.7rem;
  border: 0;
  background: transparent;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.tab-link:hover {
  color: var(--ink);
}

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

.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: 40px;
  padding: 0 2.5rem 0 0.85rem;
  border-radius: var(--radius-control, 8px);
  border: 1px solid var(--line-input, 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(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

/*
 * "Tile" (list) layout of the prompt catalog: one dense row per prompt with
 * the title/description on the left, stats in the middle and actions on the
 * right. Cards render identical markup in both layouts; only this grid
 * placement changes.
 */
.card-grid.is-list {
  /* Every row shares these columns, so stats and actions line up but are only as wide as the widest row needs. */
  grid-template-columns: minmax(0, 1fr) fit-content(16rem) auto;
  gap: 0.6rem 1.5rem;
}

/* The card slots step aside so each card can sit on the list's columns. */
.card-grid.is-list > :not(.prompt-card, [hidden]) {
  display: contents;
}

.card-grid.is-list .prompt-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas:
    "header meta footer"
    "copy   meta footer"
    "tags   meta footer";
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.3rem;
  padding: 0.8rem 1.1rem;
}

/* The status chip follows the title instead of sitting at the far end of the row. */
.card-grid.is-list .prompt-card-header {
  grid-area: header;
  justify-content: flex-start;
  align-items: center;
}

.card-grid.is-list .prompt-summary-meta {
  grid-area: meta;
  gap: 0.2rem;
}

.card-grid.is-list .prompt-card-copy {
  grid-area: copy;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.card-grid.is-list .prompt-meta {
  grid-area: tags;
}

.card-grid.is-list .prompt-footer {
  grid-area: footer;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
}

.card-grid.is-list .prompt-card-actions {
  margin-left: 0;
}

.card-grid.is-list .prompt-card-title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

@media (max-width: 1100px) {
  .card-grid.is-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-grid.is-list .prompt-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "header footer"
      "meta   meta"
      "copy   copy"
      "tags   tags";
  }
}

@media (max-width: 720px) {
  .card-grid.is-list .prompt-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .card-grid.is-list .prompt-footer {
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
  }
}

/* Layout toggle used on Home and My Prompts. */
.layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted);
}

.layout-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.layout-toggle-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.layout-toggle-button:hover {
  color: var(--ink, #0f172a);
}

.layout-toggle-button:focus-visible {
  outline: 2px solid var(--brand-deep, #0e8aa6);
  outline-offset: 2px;
}

.layout-toggle-button.is-active {
  background: var(--segment-active);
  color: var(--ink);
  box-shadow:
    var(--shadow-xs),
    0 0 0 1px var(--line-strong);
}

.dashboard-grid-summary-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/*
 * My Prompts panel header: the description copy sits on the left and the
 * search form + layout toggle sit on the right. The shared
 * `.table-header-copy` rule uses `align-items: flex-end`, which drops the
 * short description text down to the baseline of the (often taller /
 * wrapped) controls column and leaves a visible empty band above the copy.
 * Anchor this panel's header to the top instead so the description hugs
 * the start of its cell while the controls still hug the right edge.
 */
.table-panel[data-my-prompts-panel] > .table-header-copy {
  align-items: flex-start;
}

.table-panel[data-my-prompts-panel] > .table-header-copy > .table-copy {
  margin-top: 0.25rem;
}

.my-prompts-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}

.my-prompts-header-controls .portal-search-scoped {
  flex: 1 1 20rem;
  min-width: 0;
}

.my-prompts-content[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .layout-toggle-label {
    display: none;
  }
  .layout-toggle-button {
    padding: 0.4rem 0.55rem;
  }
  .my-prompts-header-controls {
    width: 100%;
    justify-content: space-between;
  }
}

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

.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;
  font-size: 1.15rem;
}

.dashboard-grid-count {
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.85rem;
  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;
}

.dashboard-load-more-row[hidden],
.dashboard-load-more-row > .button[hidden] {
  display: none;
}

.prompt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1rem 1rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.prompt-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
}

.prompt-card:focus-within {
  border-color: var(--brand);
}

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

.prompt-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Break mid-word only when a single word cannot fit on its own line. */
  overflow-wrap: break-word;
  hyphens: none;
}

.prompt-card-title-link {
  color: inherit;
  text-decoration: none;
}

.prompt-card-title-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.prompt-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  flex: 0 0 auto;
  max-width: 55%;
}

.status-chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--status-neutral-line);
  border-radius: var(--radius-pill);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-ink);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  /*
   * Status labels are pre-formatted through `formatCodeLabel` in Title Case
   * (e.g. "Pending Certification", "Draft"). Do not force-uppercase here or
   * the chips will disagree with the surrounding tab labels, notifications,
   * and metric card eyebrows (Issue 6: inconsistent capitalization).
   */
  text-transform: none;
  white-space: nowrap;
}

.status-chip-certified {
  border-color: var(--status-certified-line);
  background: var(--status-certified-bg);
  color: var(--status-certified-ink);
}

.status-chip-published {
  border-color: var(--status-published-line);
  background: var(--status-published-bg);
  color: var(--status-published-ink);
}

.status-chip-pendingcertification,
.status-chip-inreview {
  border-color: var(--status-review-line);
  background: var(--status-review-bg);
  color: var(--status-review-ink);
}

.status-chip-denied {
  border-color: var(--status-denied-line);
  background: var(--status-denied-bg);
  color: var(--status-denied-ink);
}

.status-chip-restricted {
  border-color: var(--status-restricted-line);
  background: var(--status-restricted-bg);
  color: var(--status-restricted-ink);
}

.prompt-summary-meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

/* Grid cards: the stats line sits midway between the owner and the description. */
.prompt-card .prompt-summary-meta {
  gap: 0.7rem;
}

.prompt-summary-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.prompt-summary-stats.is-date-first {
  column-gap: 0.45rem;
}

.prompt-summary-separator {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.prompt-summary-byline {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Detail header, under the title: "by Owner · approved by Approver". */
.prompt-byline {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.prompt-byline .prompt-summary-separator {
  margin-inline: 0.45rem;
}

.prompt-byline-name {
  color: var(--ink);
  font-weight: 600;
}

/* Cards name only the owner, in the title's color. */
.prompt-summary-owner {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-card-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* Search result found only in the instructions/template. */
.prompt-card-match-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

.prompt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.prompt-engagement {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
}

.prompt-engagement-item,
.prompt-card-published {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.prompt-engagement-item svg,
.prompt-card-published svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prompt-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.prompt-tag-more {
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--muted);
}

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

.prompt-meta .prompt-meta-empty {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.75rem;
}

.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.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.prompt-card-quick-actions {
  display: flex;
  gap: 0.2rem;
}

.prompt-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* Beats the phone rules that stretch buttons and action rows to 100%. */
.prompt-card .button,
.prompt-card .prompt-card-actions {
  width: auto;
}

.prompt-card .icon-button {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.prompt-card .icon-button:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

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

.prompt-favorite-button[aria-pressed="true"] {
  color: var(--warning-line);
}

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

.prompt-copy-button[data-copy-state="copied"] {
  color: var(--success-line);
}

.prompt-author {
  color: inherit;
  font-size: inherit;
}

.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;
}

/*
 * The `hidden` HTML attribute's default `display: none` is defeated by the
 * `display: grid` above (author-specified rules beat user-agent rules). We
 * re-assert the hidden behaviour so the My Prompts metrics toggle actually
 * hides the metric grid.
 */
.metric-grid[hidden] {
  display: none;
}

.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;
}

.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-faq {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.user-guide-faq-header {
  align-items: flex-start;
  gap: 1rem;
}

.user-guide-faq-title {
  margin: 0.15rem 0 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.faq-count-note {
  margin: 0;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.faq-section .resource-section-title {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 0.5rem;
}

.faq-item {
  border: 1px solid rgba(25, 36, 46, 0.1);
  border-radius: 14px;
  background: rgba(25, 36, 46, 0.03);
  padding: 0.7rem 0.9rem;
}

.faq-item[open] {
  border-color: rgba(14, 138, 166, 0.35);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.4;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid rgba(14, 138, 166, 0.4);
  outline-offset: 3px;
  border-radius: 8px;
}

.faq-marker {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq-item[open] .faq-marker {
  transform: rotate(-135deg);
}

.faq-answer {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.6rem;
}

.faq-answer-copy {
  margin: 0;
  line-height: 1.65;
  color: var(--muted);
}

.faq-answer-list {
  padding-left: 1.1rem;
}

:root[data-display-motion="reduced"] .faq-marker {
  transition: none;
}

:root[data-display-theme="dark"] .faq-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  .user-guide-faq-header {
    flex-direction: column;
  }
}

.user-guide-faq {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.user-guide-faq-header {
  align-items: flex-start;
  gap: 1rem;
}

.user-guide-faq-title {
  margin: 0.15rem 0 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.faq-count-note {
  margin: 0;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.faq-section .resource-section-title {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 0.5rem;
}

.faq-item {
  border: 1px solid rgba(25, 36, 46, 0.1);
  border-radius: 14px;
  background: var(--surface-soft, rgba(25, 36, 46, 0.03));
  padding: 0.7rem 0.9rem;
}

.faq-item[open] {
  border-color: rgba(14, 138, 166, 0.35);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.4;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid rgba(14, 138, 166, 0.4);
  outline-offset: 3px;
  border-radius: 8px;
}

.faq-marker {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--brand-deep, #0e8aa6);
  border-bottom: 2px solid var(--brand-deep, #0e8aa6);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq-item[open] .faq-marker {
  transform: rotate(-135deg);
}

.faq-answer {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.6rem;
}

.faq-answer-copy {
  margin: 0;
  line-height: 1.65;
  color: var(--muted);
}

.faq-answer-list {
  padding-left: 1.1rem;
}

:root[data-display-motion="reduced"] .faq-marker {
  transition: none;
}

:root[data-display-theme="dark"] .faq-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  .user-guide-faq-header {
    flex-direction: column;
  }
}

.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;
}

.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;
}

.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, 24, 32, 0.5);
}

/* Header and footer stay put; only the body scrolls. */
.prompt-preview-dialog {
  width: min(820px, 100%);
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.prompt-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
}

.prompt-preview-header-copy {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.prompt-preview-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.prompt-preview-header .prompt-preview-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
}

.prompt-preview-header .prompt-preview-close:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.prompt-preview-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.prompt-preview-body {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.5rem 1.4rem;
}

.prompt-preview-body .editor-panel-title {
  font-size: 1rem;
}

.prompt-preview-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.prompt-preview-footer .button {
  width: auto;
}

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

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

.prompt-preview-copy {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.prompt-summary-extra {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.prompt-preview-state {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.prompt-preview-state-error {
  background: var(--danger-bg);
  border-color: var(--status-denied-line);
}

.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-related-block {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

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

.prompt-preview-related-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

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

.prompt-preview-related-card {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  text-align: left;
  padding: 0.85rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.prompt-preview-related-card:hover,
.prompt-preview-related-card:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
  outline: none;
}

.prompt-preview-related-card:focus-visible {
  box-shadow: var(--focus-ring);
}

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

.prompt-preview-related-copy {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prompt-preview-related-meta {
  color: var(--brand-deep);
  font-size: 0.75rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  .prompt-preview-overlay {
    padding: 0.75rem;
  }

  .prompt-preview-header,
  .prompt-preview-body,
  .prompt-preview-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .prompt-preview-related-grid {
    grid-template-columns: 1fr;
  }
}

.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;
  /* Opaque base surface first, then the decorative radial highlight on top.
     Without the opaque base the sticky header let scrolled content (notably
     the Team comments card) bleed through — see prompt-editor sticky header
     bug fix. */
  background: var(--surface);
  position: sticky;
  top: calc(var(--app-header-height, 100px) + 0.5rem);
  z-index: 20;
}

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

.editor-header .page-title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  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;
}

/*
 * Save-status pill surfaced by the prompt editor's data-loss protection
 * (autosave + navigation guards). Colors follow the app's semantic tokens
 * so it fits both light and dark themes without extra overrides.
 */
.editor-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.6rem;
  margin-right: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  border-radius: 999px;
  background: transparent;
  transition:
    color 120ms ease,
    background 120ms ease;
}
.editor-save-status:empty {
  display: none;
}
.editor-save-status[data-state="saving"] {
  color: var(--color-text-muted, #6b7280);
}
.editor-save-status[data-state="saved"] {
  color: var(--color-success, #15803d);
}
.editor-save-status[data-state="dirty"] {
  color: var(--color-warning, #b45309);
}
.editor-save-status[data-state="error"] {
  color: var(--color-danger, #b91c1c);
  background: rgba(185, 28, 28, 0.08);
}

/*
 * Crash-recovery banner shown when a localStorage shadow copy is detected
 * on editor mount. Rendered at the very top of `.editor-page`.
 */
.editor-recovery-banner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-warning, #b45309);
  background: rgba(180, 83, 9, 0.08);
  border-radius: 8px;
}
.editor-recovery-banner-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 260px;
  flex: 1 1 260px;
}
.editor-recovery-banner-body strong {
  font-size: 0.95rem;
  color: var(--color-warning, #b45309);
}
.editor-recovery-banner-body span {
  font-size: 0.85rem;
  color: var(--color-text, #1f2937);
}
.editor-recovery-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/*
 * Conflict banner shown when another tab / collaborator saved the same
 * draft while the current editor was open. Sticky (never auto-dismisses)
 * so the user can't accidentally overwrite someone else's work.
 */
.editor-conflict-banner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-danger, #b91c1c);
  background: rgba(185, 28, 28, 0.08);
  border-radius: 8px;
}
.editor-conflict-banner-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 260px;
  flex: 1 1 260px;
}
.editor-conflict-banner-body strong {
  font-size: 0.95rem;
  color: var(--color-danger, #b91c1c);
}
.editor-conflict-banner-body span {
  font-size: 0.85rem;
  color: var(--color-text, #1f2937);
}
.editor-conflict-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/*
 * On desktop the editor header only ever renders 2–3 short buttons in the
 * action row (Back + Save Changes / Save & Resubmit / Submit for Approval).
 * They comfortably fit alongside the header copy, so keep them on a single
 * line and let the whole action group ellipsize/shrink together instead of
 * wrapping the primary action onto a new line.
 */
@media (min-width: 900px) {
  .editor-actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/*
 * 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;
}

.editor-layout-readonly {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.44fr);
}

/* 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;
  /* Stick the side panel flush against the bottom edge of the sticky editor
     header. The previous 6rem gap was larger than the header's actual
     rendered height, so the panel would drift up a small amount before
     locking in place as the user scrolled. --editor-header-offset is
     tuned to the sticky editor header (app-header + 0.5rem gap + ~5rem
     header content). */
  top: calc(var(--app-header-height, 100px) + 5.25rem);
  align-self: start;
  display: grid;
  gap: 1rem;
  max-height: calc(100vh - var(--app-header-height, 100px) - 6rem);
  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-readonly-panel {
  display: grid;
  gap: 1rem;
}

.editor-readonly-grid {
  display: grid;
  gap: 0.6rem;
}

.editor-readonly-row {
  display: grid;
  gap: 0.18rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(25, 36, 46, 0.08);
  background: rgba(247, 249, 250, 0.7);
}

.editor-readonly-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.editor-readonly-value {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.editor-readonly-block {
  display: grid;
  gap: 0.6rem;
}

.editor-readonly-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.editor-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
}

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

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

.editor-tab.is-active {
  color: var(--ink);
  background: var(--segment-active);
  border-color: transparent;
  box-shadow:
    var(--shadow-xs),
    0 0 0 1px var(--line-strong);
}

.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;
}

/* --- Prompt detail side panel (Details / Comments / History) -------------- */

/* Below the prompt; collapsed, it is just its tab bar. */
.detail-workspace > .detail-side-panel {
  container: detail-side / inline-size;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
}

.detail-side-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.75rem -0.75rem 0;
  padding: 0.75rem 0.75rem 0.5rem;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.detail-workspace.is-side-collapsed .detail-side-header {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-side-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-muted);
}

.detail-side-tabs .detail-side-tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: max-content;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.detail-side-tab svg,
.detail-side-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-side-header .detail-side-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.detail-side-header .detail-side-toggle:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

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

/* A narrow open panel drops the tab icons so labels and counts fit. */
@container detail-side (max-width: 22.5rem) {
  .detail-side-tab svg {
    display: 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;
}

/* The stacked panel is wide enough for two groups per row. */
@container detail-side (min-width: 40rem) {
  .detail-info-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

.detail-info-group {
  display: grid;
  align-content: start;
  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;
  }
}

/* --- Prompt detail use bar ------------------------------------------------ */

/* The app picker and the actions, straight on the page with no box around them. Six tracks: two
   controls per row, three in the Save / Like / Share row. */
.detail-use-bar {
  --app-tag-height: 1.2rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  --use-gap: 0.5rem;
  gap: var(--use-gap);
}

/* Room above the dropdown for its app tab. */
.detail-use-bar:has(.detail-app-fit) {
  margin-top: var(--app-tag-height);
}

.detail-use-bar .detail-use-actions {
  display: contents;
}

.detail-use-bar .detail-use-actions > * {
  grid-column: span 3;
}

.detail-use-bar .button {
  justify-content: center;
  width: auto;
  min-height: 36px;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.84rem;
  white-space: nowrap;
}

.detail-use-bar .detail-use-actions-secondary > * {
  grid-column: span 2;
  padding-inline: 0.3rem;
}

.detail-use-bar .button svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Copy and Download: tinted, one step below the yellow Copy and Launch. */
.detail-use-bar .detail-use-tonal {
  background: var(--accent-soft);
  color: var(--brand-deep);
}

.detail-use-bar .detail-use-tonal:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

/* Save, Like and Share: plain icon and label, so the use actions lead. */
.detail-use-bar .detail-use-subtle {
  background: transparent;
  color: var(--ink-soft);
}

.detail-use-bar .detail-use-subtle:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

/* Owner and admin actions close the card under a divider, filling its thirds from the right. */
.detail-use-bar .detail-use-manage {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--use-gap);
  padding-top: var(--use-gap);
  border-top: 1px solid var(--line);
}

.detail-use-bar .detail-use-manage > * {
  flex: 0 0 calc((100% - 2 * var(--use-gap)) / 3);
  min-width: max-content;
  padding-inline: 0.3rem;
}

/* As wide as its longest label, so swapping labels never shifts the bar. */
.detail-use-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.detail-use-label::after {
  content: attr(data-label-sizer);
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* The grid track sets the width, so switching apps never moves the buttons beside it. */
.detail-use-target .custom-select-trigger {
  min-width: 0;
  min-height: 36px;
  font-size: 0.84rem;
}

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

.detail-use-bar [data-detail-favorite][aria-pressed="true"] {
  color: var(--warning-ink);
}

.detail-use-bar .detail-like-button[aria-pressed="true"] {
  color: var(--danger);
}

/* Messages float under the bar so they never push the prompt down. */
.detail-use-bar .detail-engagement-feedback {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 5;
}

.detail-use-bar .detail-engagement-feedback:not(:empty) {
  box-shadow: 0 12px 28px rgba(17, 24, 32, 0.18);
}

.detail-app-picker {
  position: relative;
  display: grid;
  min-width: 0;
}

/* A tab on top of the dropdown; both badges share it, so switching moves nothing. */
.detail-app-fit {
  position: absolute;
  /* Overlaps the dropdown's top border, so the tab merges into it. */
  bottom: calc(100% - 1px);
  left: 0;
  z-index: 1;
  display: grid;
  margin: 0;
}

.detail-app-fit > * {
  grid-area: 1 / 1;
  justify-self: start;
}

.detail-app-picker[data-app-fit="match"] .detail-app-fit-badge.is-other,
.detail-app-picker[data-app-fit="other"] .detail-app-fit-badge.is-match {
  visibility: hidden;
}

/* Square under the tab, so the tab's left edge runs straight into the dropdown's. */
.detail-app-picker[data-app-fit] .custom-select-trigger {
  border-top-left-radius: 0;
}

.detail-app-picker[data-app-fit="match"] .custom-select-trigger {
  border-color: var(--status-certified-ink);
}

.detail-app-picker[data-app-fit="other"] .custom-select-trigger {
  border-color: var(--danger);
}

.detail-app-fit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--app-tag-height);
  margin: 0;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: var(--status-certified-ink);
  color: var(--surface);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.detail-app-fit-badge.is-other {
  background: var(--danger);
  cursor: pointer;
}

.detail-app-fit-badge.is-other:hover {
  text-decoration: underline;
}

.detail-app-fit-badge.is-other:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.detail-app-fit-badge svg {
  flex: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Prompt detail layout ------------------------------------------------- */

/* A flex column, so the pinned top section is held by the whole shell, not one grid row. */
.detail-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.detail-top,
.detail-shell-main {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.detail-workspace {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

/*
 * From medium screens up: the header beside the use card (top right) and the
 * description across the full width under both. The header's lines spread
 * to the card's height when the card is taller.
 */
@media (min-width: 721px) {
  .detail-shell.has-use-card > .detail-top {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    /* Two description lines (0.95rem at 1.55). */
    grid-template-rows: auto calc(2 * 1.55 * 0.95rem);
    grid-template-areas:
      "header card"
      "description description";
    gap: 0.75rem 2rem;
  }

  .detail-shell.has-use-card .detail-page-header {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "status"
      "byline"
      "dates"
      "tags";
    align-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
    /* Keeps focus rings inside the clip. */
    margin: -4px;
    padding: 4px;
  }

  .detail-shell.has-use-card .detail-header-main {
    display: contents;
  }

  /* As tall as the header, rows spread top to bottom, so no gap opens under it (e.g. without owner actions). */
  .detail-shell.has-use-card .detail-use-bar {
    grid-area: card;
    align-self: stretch;
    align-content: space-between;
    /* Tab room even without a recommended app, so every prompt gets the same height. */
    margin-top: var(--app-tag-height);
  }

  .detail-shell.has-use-card .detail-description {
    grid-area: description;
  }

  .detail-shell.has-use-card .detail-description-text {
    max-width: none;
  }

  /* Expanded, the description floats over the prompt instead of growing the section. */
  .detail-shell.has-use-card .detail-description.is-expanded {
    position: absolute;
    inset: -0.5rem -0.75rem auto;
    z-index: 2;
    max-height: min(20rem, 50vh);
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(17, 24, 32, 0.18);
  }

  /* A title of up to two lines, then one line each. */
  .detail-shell.has-use-card .detail-page-header .page-title {
    grid-area: heading;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .detail-shell.has-use-card .detail-header-status {
    grid-area: status;
  }

  .detail-shell.has-use-card .detail-header-dates {
    grid-area: dates;
  }

  .detail-shell.has-use-card .detail-header-status,
  .detail-shell.has-use-card .prompt-summary-stats,
  .detail-shell.has-use-card .prompt-engagement,
  .detail-shell.has-use-card .detail-page-header .prompt-meta {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .detail-shell.has-use-card .detail-page-header .prompt-tag {
    flex: none;
  }

  .detail-shell.has-use-card .detail-page-header .prompt-meta {
    grid-area: tags;
  }

  /* Clip at the end rather than squeeze the counts away. */
  .detail-shell.has-use-card .detail-header-status > *,
  .detail-shell.has-use-card .prompt-summary-stats > * {
    flex: none;
  }

  .detail-shell.has-use-card .prompt-byline {
    grid-area: byline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The shell's own width (not the window's) decides when the description fits beside the header lines. */
.detail-shell.has-use-card {
  container: detail-shell / inline-size;
}

/*
 * Wide: the description sits beside the status, people, date and tag lines.
 * Five description lines fit the four 1.5rem rows, so it never grows them and
 * expanding it shifts nothing; the four rows share any extra height of the card.
 */
@container detail-shell (min-width: 65rem) {
  .detail-shell.has-use-card > .detail-top {
    grid-template-columns:
      fit-content(24rem) minmax(18rem, 1fr)
      minmax(19rem, 22rem);
    grid-template-rows: auto repeat(4, minmax(1.5rem, 1fr));
    grid-template-areas:
      "heading heading card"
      "status description card"
      "byline description card"
      "dates description card"
      "tags description card";
    gap: 0.5rem 2rem;
  }

  .detail-shell.has-use-card .detail-page-header {
    display: contents;
  }

  .detail-shell.has-use-card .detail-page-header .page-title {
    margin-bottom: 0.25rem;
  }

  .detail-shell.has-use-card .detail-header-status,
  .detail-shell.has-use-card .detail-header-dates,
  .detail-shell.has-use-card .detail-page-header .prompt-meta,
  .detail-shell.has-use-card .prompt-byline {
    align-self: center;
  }

  .detail-shell.has-use-card .detail-description {
    align-self: start;
  }

  .detail-shell.has-use-card .detail-description-text {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

/* Smaller screens: a narrower use card with compact buttons and a smaller title, so the header text has room. */
@media (min-width: 721px) and (max-width: 1024px) {
  .detail-shell.has-use-card > .detail-top {
    grid-template-columns: minmax(0, 1fr) 18.5rem;
    column-gap: 1.5rem;
  }

  .detail-shell.has-use-card .detail-page-header .page-title {
    font-size: 1.4rem;
  }

  .detail-use-bar {
    --use-gap: 0.4rem;
  }

  .detail-use-bar .button {
    min-height: 32px;
    gap: 0.3rem;
    padding-inline: 0.5rem;
    font-size: 0.8rem;
  }

  .detail-use-bar .button svg {
    width: 14px;
    height: 14px;
  }

  .detail-use-bar .detail-use-actions-secondary > *,
  .detail-use-bar .detail-use-manage > * {
    padding-inline: 0.25rem;
  }

  .detail-use-target .custom-select-trigger {
    min-height: 32px;
    padding: 0 1.9rem 0 0.7rem;
    background-position: right 0.7rem center;
    font-size: 0.8rem;
  }
}

/* Pinned under the app header, so only the prompt scrolls. Short windows scroll it all. */
@media (min-width: 721px) and (min-height: 600px) {
  .detail-shell.has-use-card > .detail-top {
    position: sticky;
    top: var(--app-header-height);
    z-index: 20;
    /* Room around it when pinned; the negative margins keep the page spacing. */
    margin-block: -1rem;
    padding-block: 1rem;
    background: var(--bg);
  }

  .detail-shell.has-use-card > .detail-top[data-stuck] {
    box-shadow:
      0 1px 0 var(--line),
      0 12px 18px -14px rgba(17, 24, 32, 0.4);
  }

  /* Focused fields scroll clear of the app header and the pinned section. */
  html:has(.detail-shell.has-use-card) {
    scroll-padding-top: calc(
      var(--app-header-height) + var(--detail-top-height, 0px) + 0.75rem
    );
  }
}

/* The ≤1240px `overflow-x: hidden` makes body a scroll container, which stops sticky; clip doesn't. */
@media (min-width: 721px) and (max-width: 1240px) and (min-height: 600px) {
  html:has(.detail-shell.has-use-card),
  html:has(.detail-shell.has-use-card) body {
    overflow-x: clip;
  }
}

/* --- Prompt detail workspace: inputs + live preview ------------------------ */

.detail-workspace > .detail-main-panel {
  container-type: inline-size;
  align-content: start;
}

.detail-prompt-workspace {
  gap: 0.9rem;
}

.detail-prompt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.detail-prompt-header .editor-panel-title {
  margin-right: auto;
}

.detail-prompt-header .button {
  width: auto;
}

.detail-variable-progress {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.detail-prompt-layout {
  display: grid;
  gap: 1rem;
}

@container (min-width: 640px) {
  .detail-prompt-layout {
    grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
    align-items: start;
  }
}

.detail-variable-fields {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.prompt-variable-field {
  display: grid;
  gap: 0.3rem;
}

.prompt-variable-field-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
}

.prompt-variable-field .field-label {
  font-size: 0.86rem;
}

.prompt-variable-field .variable-token {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
}

.prompt-variable-field .text-input[aria-invalid="true"] {
  border-color: var(--warning-line);
  box-shadow: 0 0 0 3px rgba(217, 154, 14, 0.18);
}

.detail-prompt-preview {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.detail-preview-kicker {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.detail-preview-kicker span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.prompt-text-section {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

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

/* Prompt text reads as code, in the same dark block as `.detail-code-block`. */
.prompt-text-block {
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  background: #161d24;
  color: #d7f5de;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-text-empty {
  font-style: italic;
  opacity: 0.75;
}

.prompt-variable {
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.prompt-variable.is-empty {
  border: 1px dashed rgba(132, 215, 232, 0.55);
  background: rgba(99, 200, 223, 0.12);
  color: #84d7e8;
}

.prompt-variable.is-filled {
  background: rgba(243, 194, 47, 0.18);
  color: #fde68a;
  box-shadow: inset 0 -2px 0 #f3c22f;
}

/* --- Prompt detail rating (compact row) ------------------------------------ */

.detail-rating-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.detail-rating-stars {
  display: flex;
  gap: 0.2rem;
}

.detail-rating-panel .detail-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.detail-rating-star svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.detail-rating-panel .detail-rating-star.is-active {
  color: var(--warning-line);
}

.detail-rating-star.is-active svg {
  fill: currentColor;
}

.detail-rating-panel .detail-rating-clear {
  width: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.detail-rating-panel .detail-rating-clear[hidden] {
  display: none;
}

/* --- Prompt detail header owner actions ----------------------------------- */

.detail-page-header .detail-owner-actions {
  flex: 0 0 auto;
  width: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.detail-page-header .detail-owner-actions .button {
  flex: 0 0 auto;
  width: auto;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.88rem;
}

.detail-page-header .detail-owner-actions .button svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Beside the title, stacked actions leave the title more room. */
@media (min-width: 1241px) {
  .detail-page-header .detail-owner-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Smaller screens: compact, so they don't crowd the title. */
@media (max-width: 1024px) {
  .detail-page-header .detail-owner-actions {
    gap: 0.35rem;
  }

  .detail-page-header .detail-owner-actions .button {
    height: 30px;
    min-height: 30px;
    padding: 0 0.65rem;
    font-size: 0.8rem;
  }
}

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

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

/* Bordered variant used on the review detail page so the Comments panel
   reads as its own card alongside the Reviewer Action panel. Uses the
   theme-aware --surface / --line tokens so it adapts to dark mode instead
   of forcing a white background. */
.comment-section-bordered {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-panel);
  padding: 1rem 1.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.45rem;
  padding: 0.7rem 0.8rem;
  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: 6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(25, 36, 46, 0.18);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}

.comment-composer-input:focus {
  outline: none;
  border-color: rgba(14, 138, 166, 0.55);
  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);
}

/* System-authored comment attribution (e.g. "EPL Systems"). Renders as a
 * subtle pill that adapts to both light and dark themes by leaning on
 * theme tokens plus a translucent overlay rather than a hard-coded grey. */
.comment-item-author-system {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--muted, #6b7280) 12%, transparent);
  color: var(--muted, #4b5563);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comment-item-author-system::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.comment-item.is-system {
  background: color-mix(in srgb, var(--muted, #6b7280) 6%, transparent);
  border-radius: 12px;
}

.comment-item.is-system .comment-item-avatar {
  background: color-mix(in srgb, var(--muted, #6b7280) 18%, transparent);
  color: var(--muted, #4b5563);
}

.comment-item-avatar-system {
  /* Ensure the inline SVG glyph is centered and sized consistently with the
   * text-based initial avatars used for human authors. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comment-item-avatar-system svg {
  width: 60%;
  height: 60%;
}

.comment-item.is-system .comment-item-copy {
  color: var(--muted, #4b5563);
  font-style: italic;
}

.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;
}

/* Inline edit-in-place form injected into a comment article when the
 * user clicks Edit. Uses the same theme tokens as the composer so the
 * two surfaces feel consistent. */
.comment-item-inline-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.comment-item-inline-input {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, transparent);
  color: var(--text, inherit);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
}

.comment-item-inline-input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #0e8aa6) 60%, transparent);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--accent, #0e8aa6) 20%, transparent);
}

.comment-item-inline-feedback {
  margin: 0;
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--muted);
}

.comment-item-inline-feedback[data-tone="error"] {
  color: #b91c1c;
}

.comment-item-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.comment-item.is-editing {
  /* Subtle emphasis so the user knows which comment is being edited. */
  outline: 1px solid color-mix(in srgb, var(--accent, #0e8aa6) 35%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}

.comment-item-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.15rem;
  align-items: center;
}

/* Edit action is only revealed on hover to keep the thread clean; vote
 * controls (rendered inside `.comment-item-votes`) stay visible at all
 * times so counts are always readable. */
.comment-item-actions > .comment-item-action {
  opacity: 0;
  transition: opacity 120ms ease;
}

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

.comment-item-votes {
  display: inline-flex;
  gap: 0.25rem;
  margin-right: auto;
}

.comment-item-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

.comment-item-vote:hover,
.comment-item-vote:focus-visible {
  color: var(--text, inherit);
  background: color-mix(in srgb, var(--muted, #6b7280) 10%, transparent);
}

.comment-item-vote.is-active {
  color: var(--accent, #0e8aa6);
  border-color: color-mix(in srgb, var(--accent, #0e8aa6) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #0e8aa6) 12%, transparent);
}

.comment-item-vote[data-prompt-comment-vote="down"].is-active {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 55%, transparent);
  background: color-mix(in srgb, #b45309 12%, transparent);
}

.comment-item-vote-count {
  font-variant-numeric: tabular-nums;
}

.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;
  }
}

/* Explains the clipboard handoff next to every Launch App button. */
.launch-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.launch-hint svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.builder-launch-panel + .launch-hint {
  margin-top: 0.25rem;
}

/*
 * 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;
}

/* Search row is sticky so the filter field stays reachable while the
 * option list below it scrolls. */
.custom-select-search {
  position: sticky;
  top: -0.3rem;
  z-index: 1;
  margin: -0.3rem -0.3rem 0.3rem;
  padding: 0.3rem;
  background: var(--surface);
  list-style: none;
}

.custom-select-search-input {
  width: 100%;
  min-height: 38px;
}

.custom-select-empty {
  padding: 0.55rem 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
  list-style: none;
}

.custom-select-option[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-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.variable-row-header .checkbox-inline {
  min-height: 0;
  margin-left: auto;
}

.variable-row-unused {
  color: var(--warning-ink);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Only a variable missing from the prompt text says so and can be removed. */
.variable-row:not([data-variable-unused]) .variable-row-unused,
.variable-row:not([data-variable-unused]) [data-remove-variable] {
  display: none;
}

.variable-row[data-variable-unused] {
  border-color: var(--warning-line);
}

.variable-invalid-note {
  margin: 0;
  color: var(--warning-ink);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.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);
}

/* Inline example inside the Instructions Help disclosure. Reuses the dark
 * preview treatment but sizes to its content instead of reserving the full
 * preview pane height. */
.editor-preview-output.editor-preview-inline {
  min-height: 0;
  max-height: none;
}

.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;
}

/*
 * Small red asterisk next to labels of mandatory fields (prompt name,
 * description, template body, tags). Marked with aria-hidden in the DOM so
 * assistive technology reads the field's required state via the underlying
 * form control rather than the decorative glyph.
 */
.field-required-marker {
  color: var(--danger, #d93025);
  margin-left: 0.2rem;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
}

.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;
}

/* Read-only stand-in for a form control, used where a value is displayed in
 * the editor but is owned by another role (e.g. approver-managed expiration
 * dates). Matches the vertical rhythm of .text-input without looking
 * editable. */
.field-static-value {
  margin: 0;
  padding: 0.55rem 0;
  color: var(--muted);
  font-weight: 600;
}

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

.text-input {
  min-height: 40px;
  padding: 0 0.85rem;
}

.text-input:focus-visible,
.text-area:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/*
 * `.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: 40px;
  padding: 0 2.5rem 0 0.85rem;
  border-radius: var(--radius-control, 8px);
  border: 1px solid var(--line-input, 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;
}

.editor-comments-panel-readonly .editor-test-summary {
  cursor: default;
}

.editor-comments-panel-readonly .editor-test-body {
  gap: 0.9rem;
}

/* Option B: the in-flight read-only workspace hosts two audience-scoped
   comment threads. Stack the readonly content over the comments row on the
   outer layout, then split the two threads into an equal-width grid so
   owners/collaborators can see the certification conversation and the
   private team notes side by side without having to scroll between them. */
.editor-layout-readonly {
  grid-template-columns: minmax(0, 1fr);
}

.editor-comments-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  /* Only the INITIAL dimensions of the two panels are matched (equal grid
     columns + a shared min-height). After that, each panel grows
     independently based on the length of its own comment thread. */
  align-items: start;
}

.editor-comments-split > .editor-comments-panel-readonly {
  margin: 0;
  min-height: 22rem;
}

.editor-comments-panel-shared {
  border-top: 3px solid rgba(14, 138, 166, 0.55);
}

.editor-comments-panel-team {
  border-top: 3px solid rgba(120, 91, 175, 0.55);
}

@media (max-width: 900px) {
  .editor-comments-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.editor-approver-trail {
  gap: 0.75rem;
}

/* Reviewer detail: the "Comments" panel reuses the shared prompt comment
   thread markup so it looks identical to the rest of the app. No extra
   styling is needed beyond the base .comment-* rules. */

.review-feedback-panel {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 20px;
  border: 1px solid rgba(14, 138, 166, 0.22);
  background: rgba(248, 251, 252, 0.95);
  box-shadow: 0 12px 30px rgba(15, 32, 43, 0.06);
}

.review-feedback-panel-action {
  border-color: rgba(202, 92, 30, 0.45);
  background: rgba(255, 246, 238, 0.96);
}

.review-feedback-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review-feedback-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0e6b80;
  white-space: nowrap;
}

.review-feedback-panel-action .review-feedback-count {
  color: #b4531a;
}

.review-feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.review-feedback-item {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(25, 36, 46, 0.1);
  background: rgba(255, 255, 255, 0.92);
}

.review-feedback-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-feedback-author {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.review-feedback-author-copy {
  display: grid;
  line-height: 1.3;
}

.review-feedback-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.review-feedback-tag-denial {
  color: #a8410f;
  background: rgba(202, 92, 30, 0.14);
}

.review-feedback-tag-approval {
  color: #1d6b3f;
  background: rgba(35, 150, 90, 0.14);
}

.review-feedback-tag-note {
  color: #0e6b80;
  background: rgba(14, 138, 166, 0.14);
}

.review-feedback-body {
  margin: 0;
}

:root[data-display-theme="dark"] .review-feedback-panel {
  border-color: rgba(78, 190, 214, 0.28);
  background: rgba(24, 33, 41, 0.9);
}

:root[data-display-theme="dark"] .review-feedback-panel-action {
  border-color: rgba(226, 130, 68, 0.5);
  background: rgba(46, 33, 24, 0.92);
}

:root[data-display-theme="dark"] .review-feedback-item {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 40, 48, 0.85);
}

/*
 * Dark-theme surface for the read-only certification-queue detail rows.
 * Their base rule uses a hardcoded light fill (rgba near-white) which reads
 * as a flat grey block in dark mode, so mirror the elevated card treatment
 * used by the review-feedback items.
 */
:root[data-display-theme="dark"] .editor-readonly-row {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 40, 48, 0.7);
}

.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-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.5rem 0.75rem;
  flex-wrap: wrap;
}

.detail-header-eyebrow {
  margin-bottom: 0.55rem;
}

.detail-header-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.detail-page-header {
  align-items: flex-start;
}

.detail-header-main {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

/* Under the title: version, status chip and the rating. */
.detail-header-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
}

.detail-header-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.detail-header-rating svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.detail-header-rating.is-rated svg {
  color: var(--warning-line);
  fill: currentColor;
}

/* Under the header: two lines, with Expand at the end of the text when it runs longer. */
.detail-description {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.detail-description-text {
  display: -webkit-box;
  max-width: 80ch;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.detail-description.is-expanded .detail-description-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

/* Same font and line height as the text, so it sits on the last line. */
.detail-description-toggle {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.detail-description-toggle:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.detail-description-toggle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.detail-description-toggle[hidden] {
  display: none;
}

.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;
  }
}

.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;
}

/* Long templates scroll inside the dialog instead of overflowing the viewport. */
.dashboard-copy-dialog {
  width: min(720px, 100%);
  max-height: min(90vh, 880px);
  overflow: auto;
}

.dashboard-copy-preview {
  display: grid;
  gap: 0.6rem;
}

.dashboard-copy-preview .prompt-text-block {
  max-height: 16rem;
  overflow: auto;
}

.detail-subsection-title {
  margin: 0;
  font-size: 0.98rem;
}

.detail-like-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--chip);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}

.detail-engagement-feedback {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: var(--surface-muted);
  font-size: 0.88rem;
}

/* Collapsed but kept in the accessibility tree so later messages announce. */
.detail-engagement-feedback:empty {
  padding: 0;
  background: none;
}

.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: var(--warning-ink);
}

.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"] .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"] .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"] .search-input,
:root[data-display-theme="dark"] .field-input,
:root[data-display-theme="dark"] .field-textarea,
:root[data-display-theme="dark"] .field-select {
  background: var(--surface) !important;
  border-color: var(--line) !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"] .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"] .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: var(--surface) !important;
  border-color: var(--line) !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;
}

/* 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"] .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"] .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"] .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"] .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;
    /* 3 columns: title (soaks up slack so it never collides with the search)
       | compact header search | actions. The corporate logo used to occupy a
       leading 256px column here; it now lives in the sidebar footer, so the
       title starts flush at the top-left instead of leaving that gap. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 1rem;
  }

  .header-brand {
    display: contents;
  }

  .header-title-group {
    grid-column: 1;
    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,
  .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-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);
  }
}

@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;
  }

  .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,
  .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-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,
  .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;
  }

  .search-field-shell,
  .search-input-wrap,
  .filter-select,
  .detail-meta-grid {
    width: 100%;
  }

  .detail-meta-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 {
    padding: 1rem;
  }

  .notification-banner-actionable {
    flex-direction: column;
    align-items: flex-start;
  }

  .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"] .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"] .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"] .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"] .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"] .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 are token-driven in the UI refresh
 * layer at the end of this file.
 */

: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-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,
:root[data-display-theme="dark"] .prompt-text-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: var(--line) !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 {
    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;
  }

  /* 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 dropdown: pin to the viewport instead of to the toggle so it
     never renders 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. The display-preferences panel is intentionally NOT included:
     it is nested inside this panel and must keep flowing in-place, otherwise
     the two viewport-anchored scroll containers overlap each other. */
  .header-actions .profile-menu-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 "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;
  }

  /* The title pair sits flush left next to the hamburger. It used to be
     absolutely centered so it could sit between the hamburger and the SCE
     wordmark; with the corporate logo moved to the sidebar there is nothing
     to balance against, so left alignment matches the desktop layout. */
  .header-title-group {
    position: static;
    transform: none;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100vw - 20rem);
    margin-right: 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. On wide viewports the
 * table fits the panel width so no horizontal scroll is needed. On
 * narrower viewports, we restore the natural table width and enable
 * horizontal scrolling (with the standard edge-shadow affordances
 * inherited from `.data-table-scroll`) so no columns are clipped. */
.pending-queue-table .data-table-scroll {
  /* Inherit `overflow-x: auto` + scroll shadows from the base
   * `.data-table-scroll` rule so users always get a scrollbar when
   * the table cannot fit. */
  overscroll-behavior-x: contain;
}

.pending-queue-table .data-table-scroll > .data-table {
  /* At wide widths the table can relax to fill the panel; at narrow
   * widths the min-width below forces horizontal scroll instead of
   * squeezing columns into an unreadable state. */
  width: 100%;
  min-width: 720px;
  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;
}

/* On small screens, let the table expand to its natural width so
 * every column stays readable and the wrapper handles scrolling. */
@media (max-width: 720px) {
  .pending-queue-table .data-table-scroll > .data-table {
    width: auto;
    min-width: max-content;
  }

  .pending-queue-table .data-table th:first-child,
  .pending-queue-table .data-table td:first-child {
    width: auto;
    min-width: 200px;
    max-width: 260px;
  }
}

.table-cell-secondary {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Review queue (Pending Certification)
 * ------------------------------------------------------------------ *
 * Modern list-based replacement for the legacy multi-column table.
 * Each row is a single clickable card modelled on GitHub PR lists,
 * Linear inbox, and Vercel deployments: two-line layout with title +
 * status pill on line 1, and creator / stage / tags / timing on
 * line 2. Reflows to a stacked layout on narrow viewports so no
 * horizontal scroll is required. */
.review-queue {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  /* Neutralise the UA default `padding-inline-start` on <ul>, which
   * otherwise pushes every row ~40px in from the panel edge. */
  padding: 0;
  list-style: none;
}

.review-queue-empty {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
  padding: 1.25rem 0.25rem;
}

.review-queue-item-wrapper {
  list-style: none;
}

.review-queue-item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease,
    background-color 120ms ease;
}

.review-queue-item:hover,
.review-queue-item:focus-visible {
  border-color: var(--brand);
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
  outline: none;
  transform: translateY(-1px);
}

.review-queue-item:focus-visible {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--brand);
}

.review-queue-item-primary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review-queue-item-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
}

.review-queue-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

.review-queue-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--chip);
  border-radius: 999px;
  white-space: nowrap;
}

.review-queue-stage-progress {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.review-queue-item-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.review-queue-item-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.review-queue-item-chevron {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.review-queue-item:hover .review-queue-item-chevron,
.review-queue-item:focus-visible .review-queue-item-chevron {
  color: var(--brand);
  transform: translateX(3px);
}

.review-queue-item-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.review-queue-item:hover .review-queue-item-action,
.review-queue-item:focus-visible .review-queue-item-action {
  transform: translateX(3px);
}

.review-queue-item-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.review-queue-item-creator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
}

.review-queue-item-creator-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--chip-certified);
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.review-queue-item-separator {
  color: var(--line-strong);
}

.review-queue-item-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.review-queue-item-tags .prompt-tag {
  font-size: 0.72rem;
}

/*
 * Static variant of the review-queue row used by the My Prompts tabs. These
 * rows are not a single navigable link (they carry multiple discrete action
 * buttons), so the whole-card hover-lift / pointer affordance of the
 * clickable pending-review rows would be misleading. Neutralise the hover
 * transform while keeping the shared surface, border, and spacing so the two
 * lists read as the same component.
 */
.review-queue-item-static {
  cursor: default;
}

.review-queue-item-static:hover,
.review-queue-item-static:focus-within {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transform: none;
}

.review-queue-facet {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.review-queue-facet-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.review-queue-facet-value {
  color: var(--ink);
  min-width: 0;
}

.review-queue-facet-inline {
  gap: 0.4rem;
}

.review-queue-item-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

/* Narrow viewports: stack primary + secondary rows more compactly and
 * keep the timestamp/chevron aligned to the right of the headline
 * rather than wrapping into a new row on their own. */
@media (max-width: 640px) {
  .review-queue-item {
    padding: 0.85rem 0.9rem;
  }

  .review-queue-item-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .review-queue-item-meta {
    justify-content: space-between;
    width: 100%;
  }

  .review-queue-item-title {
    font-size: 0.95rem;
  }
}

/* =========================================================================
 * UI refresh (2026-10): design tokens + component layer.
 *
 * Appended last so it wins the cascade at equal specificity. Legacy rules it
 * supersedes are deleted as each component migrates (see UI_REFRESH_PLAN.md).
 * ========================================================================= */

:root {
  --app-header-height: 64px;
  --bg: #f4f6f8;
  --bg-accent: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --surface-muted: #f1f4f7;
  --ink: #17212b;
  --ink-soft: #3a4955;
  --muted: #5b6875;
  --line: #e0e5ea;
  --line-strong: #c9d1d8;
  /* >= 3:1 against white for form-control boundaries (WCAG 1.4.11). */
  --line-input: #85929e;
  --primary: #f3c22f;
  --primary-hover: #e8b41c;
  --primary-ink: #101418;
  --primary-soft: #fdf4d3;
  --brand: #0e8aa6;
  --brand-deep: #0b6f86;
  --brand-gradient: linear-gradient(135deg, #0e8aa6, #0b5f73);
  --accent-soft: #e6f3f6;
  --focus-ring: 0 0 0 3px rgba(14, 138, 166, 0.28);
  --success-bg: #e8f5ee;
  --success-line: #2e9d62;
  --info-bg: #e8f1fb;
  --info-line: #2f6fb3;
  --warning-bg: #fff5de;
  --warning-line: #d99a0e;
  --warning-ink: #8a5a00;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --chip: #eef2f5;
  --chip-certified: #e3f4ea;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-card:
    0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-soft: 0 12px 32px rgba(16, 24, 40, 0.14);
  --radius-panel: 12px;
  --radius-card: 12px;
  --radius-control: 8px;
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-ink: #33424e;
  --sidebar-muted: #6b7885;
  --sidebar-hover: #f1f4f7;
  --sidebar-active-bg: #fdf4d3;
  --sidebar-active-ink: #17212b;
  --segment-active: #ffffff;
  --status-neutral-bg: #eef2f5;
  --status-neutral-ink: #475866;
  --status-neutral-line: #d9e0e6;
  --status-certified-bg: #e7f6ee;
  --status-certified-ink: #146c43;
  --status-certified-line: #b8e0c9;
  --status-published-bg: #e8f1fb;
  --status-published-ink: #1c5fa8;
  --status-published-line: #bfd5ee;
  --status-review-bg: #fff4de;
  --status-review-ink: #8a5a00;
  --status-review-line: #f1d49a;
  --status-denied-bg: #fdecea;
  --status-denied-ink: #b42318;
  --status-denied-line: #f4c3be;
  --status-restricted-bg: #f3eefc;
  --status-restricted-ink: #5b3db8;
  --status-restricted-line: #dacdf6;
}

:root[data-display-theme="dark"] {
  --bg: #0f151a;
  --bg-accent: #0f151a;
  --surface: #161f26;
  --surface-soft: #1b262e;
  --surface-muted: #1f2b34;
  --ink: #e9eff3;
  --ink-soft: #c8d3da;
  --muted: #9aabb7;
  --line: #2a3843;
  --line-strong: #3a4a56;
  --line-input: #5d707e;
  --primary: #f3c22f;
  --primary-hover: #f6cf57;
  --primary-soft: rgba(243, 194, 47, 0.14);
  --brand: #63c8df;
  --brand-deep: #84d7e8;
  --accent-soft: rgba(99, 200, 223, 0.14);
  --focus-ring: 0 0 0 3px rgba(99, 200, 223, 0.35);
  --warning-ink: #f1c76b;
  --danger: #ff8a80;
  --danger-bg: rgba(255, 138, 128, 0.14);
  --chip: #22303a;
  --chip-certified: rgba(87, 194, 127, 0.16);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.5);
  --header-bg: #121a20;
  --sidebar-bg: #121a20;
  --sidebar-ink: #c8d3da;
  --sidebar-muted: #8fa1ad;
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(243, 194, 47, 0.14);
  --sidebar-active-ink: #ffffff;
  --segment-active: #2b3a45;
  --status-neutral-bg: rgba(236, 244, 248, 0.1);
  --status-neutral-ink: #d5dee4;
  --status-neutral-line: rgba(236, 244, 248, 0.16);
  --status-certified-bg: rgba(87, 194, 127, 0.16);
  --status-certified-ink: #8fdcaf;
  --status-certified-line: rgba(87, 194, 127, 0.34);
  --status-published-bg: rgba(110, 168, 238, 0.16);
  --status-published-ink: #a9cbf5;
  --status-published-line: rgba(110, 168, 238, 0.34);
  --status-review-bg: rgba(241, 199, 107, 0.16);
  --status-review-ink: #f1c76b;
  --status-review-line: rgba(241, 199, 107, 0.34);
  --status-denied-bg: rgba(255, 138, 128, 0.16);
  --status-denied-ink: #ffaaa2;
  --status-denied-line: rgba(255, 138, 128, 0.34);
  --status-restricted-bg: rgba(170, 146, 240, 0.16);
  --status-restricted-ink: #c7b6f7;
  --status-restricted-line: rgba(170, 146, 240, 0.34);
}

.app-shell {
  --app-header-height: 64px;
}

@media (max-width: 1240px) {
  :root,
  .app-shell {
    --app-header-height: 56px;
  }
}

body,
:root[data-display-theme="dark"] body {
  background: var(--bg);
}

/* --- Shell: header ------------------------------------------------------ */

.app-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.header-title-group {
  gap: 0.7rem;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 10px;
}

.header-title-group:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.header-brand-icon,
.app-sidebar-drawer-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
}

/* The icon file is black on transparent; dark surfaces need it white. */
:root[data-display-theme="dark"] .header-brand-icon,
:root[data-display-theme="dark"] .app-sidebar-drawer-icon {
  filter: invert(1);
}

@media (max-width: 1240px) {
  .header-brand-icon,
  .app-sidebar-drawer-icon {
    width: 40px;
    height: 40px;
  }
}

:root[data-display-theme="dark"] .header-action {
  background: transparent !important;
  border-color: transparent !important;
}

.badge-count {
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  font-size: 0.66rem;
  background: var(--danger);
  border-color: var(--header-bg);
}

:root[data-display-theme="dark"] .badge-count {
  background: #e5484d;
}

@media (min-width: 1241px) {
  .app-shell {
    padding-top: var(--app-header-height);
  }

  .app-header {
    height: var(--app-header-height);
    min-height: 0;
    padding: 0 1.25rem;
    /* Equal outer tracks keep the search centered on the whole topbar. */
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 38rem) minmax(0, 1fr);
    column-gap: 2rem;
  }

  .header-title-group {
    grid-column: 1;
  }

  .header-eyebrow,
  .header-title .header-subtitle {
    white-space: nowrap;
  }

  .header-search {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
  }

  .header-actions .button-primary {
    min-height: 38px;
  }

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

/* --- Shell: profile menu (button-driven popover) ------------------------ */

.user-chip,
.profile-menu-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.profile-menu-toggle:hover {
  transform: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.profile-menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.profile-menu[open] > .profile-menu-toggle {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.profile-menu:not([open]) > .profile-menu-panel {
  display: none;
}

.profile-menu-panel {
  top: calc(100% + 8px);
  width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.4rem;
  gap: 0.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  z-index: 40;
}

.profile-menu-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.5rem;
}

.profile-menu-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}

.profile-menu-identity-copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.profile-menu-name {
  font-size: 0.95rem;
}

.profile-menu-email {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-roles {
  margin: 0.3rem 0 0;
  letter-spacing: normal;
  text-transform: none;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}

.profile-menu-divider {
  margin: 0.2rem 0.1rem;
}

.profile-menu-item {
  min-height: 38px;
  padding: 0 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}

.profile-menu-item svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

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

.profile-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand);
}

.profile-menu-item-danger,
.profile-menu-item-danger svg {
  color: var(--danger);
}

/* --- Shell: sidebar ----------------------------------------------------- */

.app-sidebar,
:root[data-display-theme="dark"] .app-sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  border-right: 1px solid var(--line);
}

.sidebar-nav {
  padding: 0.75rem;
  gap: 2px;
}

.sidebar-link {
  position: relative;
  min-height: 40px;
  padding: 0 0.75rem;
  gap: 0.75rem;
  border: 0;
  border-radius: 8px;
  color: var(--sidebar-ink);
  font-size: 0.93rem;
  font-weight: 500;
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  color: var(--sidebar-muted);
}

.sidebar-link:hover,
.sidebar-link:focus-visible,
:root[data-display-theme="dark"] .sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--ink);
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.sidebar-link.is-active,
:root[data-display-theme="dark"] .sidebar-link.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
  font-weight: 600;
}

.sidebar-link.is-active svg {
  color: var(--sidebar-active-ink);
}

.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.sidebar-footer {
  padding: 1rem 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
}

.sidebar-footer .brand-logo {
  width: 120px;
}

.sidebar-footer .brand-logo-on-dark,
:root[data-display-theme="dark"] .sidebar-footer .brand-logo-on-light {
  display: none;
}

:root[data-display-theme="dark"] .sidebar-footer .brand-logo-on-dark {
  display: block;
}

.sidebar-brand-mark:focus-visible {
  outline: 2px solid var(--brand);
}

.app-sidebar-drawer-header {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.app-sidebar-drawer-title {
  color: var(--ink);
}

/* Grid tracks must not grow to a card's min-content (phones overflowed). */
.card-grid > *,
.page-section > * {
  min-width: 0;
}

/* Metric icon tiles use light pastel surfaces; derive a dim tint instead. */
:root[data-display-theme="dark"] .metric-icon {
  background: color-mix(
    in srgb,
    var(--metric-accent, var(--brand)) 18%,
    transparent
  );
  box-shadow: none;
}

/* Form-control borders need >= 3:1 contrast in dark mode too. */
: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 {
  border-color: var(--line-input) !important;
}

/* Borderless card and dialog icon buttons, as in light mode. */
:root[data-display-theme="dark"] .prompt-card .icon-button,
:root[data-display-theme="dark"] .recs-card .icon-button,
:root[data-display-theme="dark"] .prompt-preview-close,
:root[data-display-theme="dark"] .detail-side-header .detail-side-toggle,
:root[data-display-theme="dark"] .detail-rating-panel .detail-rating-star {
  background: transparent !important;
  border-color: transparent !important;
}

:root[data-display-theme="dark"] .prompt-card .icon-button:hover,
:root[data-display-theme="dark"] .recs-card .icon-button:hover,
:root[data-display-theme="dark"] .prompt-preview-close:hover,
:root[data-display-theme="dark"] .detail-side-header .detail-side-toggle:hover,
:root[data-display-theme="dark"]
  .detail-rating-panel
  .detail-rating-star:hover {
  background: var(--surface-muted) !important;
}

/* --- Reduced motion: no frozen spinners --------------------------------- */

:root[data-display-motion="reduced"] .view-skeleton-spinner,
:root[data-display-motion="reduced"] .boot-spinner,
:root[data-display-motion="reduced"] .button.is-busy::before,
:root[data-display-motion="reduced"] .button[data-busy="true"]::before,
:root[data-display-motion="reduced"] .header-action.is-busy::after,
:root[data-display-motion="reduced"] .icon-button.is-busy::after {
  display: none;
}

:root[data-display-motion="reduced"] .boot-progress-bar {
  width: 100%;
  transform: none;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .view-skeleton-spinner,
  .boot-spinner,
  .button.is-busy::before,
  .button[data-busy="true"]::before,
  .header-action.is-busy::after,
  .icon-button.is-busy::after {
    display: none;
  }

  .boot-progress-bar {
    width: 100%;
    transform: none;
    opacity: 0.45;
  }
}

/* --- Route error boundary ---------------------------------------------- */

.route-error {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: min(34rem, 100%);
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.route-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warning-bg);
  color: var(--warning-ink);
}

.route-error-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-error-title {
  margin: 0;
  font-size: 1.35rem;
}

.route-error-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.route-error-reference {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.route-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* --- Profile page ------------------------------------------------------- */

.profile-page {
  max-width: 64rem;
}

.profile-layout,
.profile-main,
.profile-aside {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}

/* Large screens: settings fill the right-hand side instead of leaving it empty. */
@media (min-width: 1400px) {
  .profile-page {
    max-width: none;
  }

  .profile-layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    align-items: start;
  }

  .profile-aside .profile-choice-grid-3,
  .profile-aside .profile-choice-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-aside .profile-choice-theme .profile-choice-body {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
  }

  .profile-aside .profile-theme-swatch {
    grid-row: span 2;
    height: 2.5rem;
    margin: 0;
  }
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.profile-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
}

.profile-hero-copy {
  min-width: 0;
}

.profile-name {
  margin: 0;
  font-size: 1.3rem;
}

.profile-email {
  margin: 0.15rem 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.profile-hero-meta {
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  color: var(--muted);
  font-size: 0.88rem;
}

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

.profile-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.profile-card-title {
  margin: 0;
  font-size: 1.05rem;
}

.profile-card-copy,
.profile-card-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.profile-detail-list {
  margin: 0;
  display: grid;
}

.profile-detail-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.profile-detail-row:last-child {
  border-bottom: 0;
}

.profile-detail-row dt {
  color: var(--muted);
  font-size: 0.86rem;
}

.profile-detail-row dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.profile-role-line {
  margin: 0;
}

.profile-capability-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.profile-capability-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
}

.profile-capability-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.3em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--success-line);
  border-bottom: 2px solid var(--success-line);
  transform: rotate(-45deg);
}

.profile-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.6rem;
}

.profile-fieldset-legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.profile-choice-grid {
  display: grid;
  gap: 0.75rem;
}

.profile-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-choice-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-choice {
  position: relative;
  display: block;
}

.profile-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.profile-choice-body {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.profile-choice input:hover + .profile-choice-body {
  border-color: var(--line-input);
}

.profile-choice input:checked + .profile-choice-body {
  border-color: var(--brand);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--brand);
}

.profile-choice input:focus-visible + .profile-choice-body {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.profile-choice-label {
  font-weight: 600;
}

.profile-choice-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.profile-theme-swatch {
  display: block;
  height: 52px;
  margin-bottom: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profile-theme-swatch-light {
  background: linear-gradient(180deg, #ffffff 0 32%, #f4f6f8 32% 100%);
}

.profile-theme-swatch-dark {
  border-color: #2a3843;
  background: linear-gradient(180deg, #121a20 0 32%, #0f151a 32% 100%);
}

.profile-theme-swatch-system {
  background: linear-gradient(135deg, #f4f6f8 0 50%, #0f151a 50% 100%);
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.profile-sign-out {
  margin-left: auto;
  color: var(--danger);
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .profile-hero {
    align-items: flex-start;
  }

  .profile-choice-grid-3,
  .profile-choice-grid-2 {
    grid-template-columns: 1fr;
  }

  .profile-detail-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .profile-sign-out {
    margin-left: 0;
  }
}

/* Profile impact: stat tiles and milestones */

.profile-impact-summary {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.profile-stat-grid,
.profile-milestone-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.profile-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-stat-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.profile-stat {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-content: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.profile-stat-icon,
.profile-milestone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.profile-stat-icon {
  grid-row: 1 / span 3;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--accent-soft);
  color: var(--brand);
}

.profile-stat-icon svg,
.profile-milestone-icon svg,
.profile-card-heading .profile-card-title svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-stat-value {
  grid-column: 2;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.profile-stat-label {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.profile-stat-hint {
  grid-column: 2;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.profile-stat-grid-compact .profile-stat {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  row-gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface);
}

.profile-stat-grid-compact .profile-stat-icon {
  grid-row: auto;
  width: 1.9rem;
  height: 1.9rem;
}

.profile-stat-grid-compact .profile-stat-icon svg {
  width: 1rem;
  height: 1rem;
}

.profile-stat-grid-compact .profile-stat-value {
  grid-column: 2;
  font-size: 1.2rem;
}

.profile-stat-grid-compact .profile-stat-label,
.profile-stat-grid-compact .profile-stat-hint {
  grid-column: 1 / -1;
}

.profile-subheading {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.profile-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.profile-card-heading .profile-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.profile-card-heading .profile-card-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--warning-ink);
}

.profile-milestone-count {
  margin: 0;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.profile-milestone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-milestone {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.profile-milestone-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--chip);
  color: var(--muted);
}

.profile-milestone-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-milestone-body {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.profile-milestone-title {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.profile-milestone-copy,
.profile-milestone-status {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.profile-milestone-copy {
  font-size: 0.82rem;
}

.profile-milestone-status {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.profile-milestone-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--chip);
  color: var(--brand);
}

.profile-milestone-progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--chip);
}

.profile-milestone-progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--brand);
}

.profile-milestone-progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--brand);
}

.profile-milestone.is-earned {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-soft);
}

.profile-milestone.is-earned .profile-milestone-icon {
  background: var(--primary);
  color: var(--primary-ink);
}

.profile-milestone.is-earned .profile-milestone-status {
  color: var(--ink);
  font-weight: 600;
}

.profile-milestone.is-earned .profile-milestone-progress {
  color: var(--success-line);
}

.profile-milestone.is-earned
  .profile-milestone-progress::-webkit-progress-value {
  background: var(--success-line);
}

.profile-milestone.is-earned .profile-milestone-progress::-moz-progress-bar {
  background: var(--success-line);
}

@media (max-width: 900px) {
  .profile-milestone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-milestone-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .profile-stat {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }

  .profile-stat-icon {
    grid-row: auto;
    margin-bottom: 0.4rem;
  }

  .profile-stat-value,
  .profile-stat-label,
  .profile-stat-hint {
    grid-column: 1;
  }
}

/* -------------------------------------------------------------------------
 * Search results (Phase 4)
 * ------------------------------------------------------------------------- */

.search-hit {
  padding: 0 0.08em;
  border-radius: 3px;
  background: var(--primary-soft);
  box-shadow: inset 0 -2px 0 var(--primary);
  color: inherit;
}

.dashboard-search-summary {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.dashboard-search-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.dashboard-search-count {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.dashboard-search-query {
  overflow-wrap: anywhere;
}

.dashboard-search-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.dashboard-search-related-label {
  margin-right: 0.15rem;
}

.dashboard-search-related-chip {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

.dashboard-search-related-more,
.dashboard-search-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-search-note {
  margin: 0;
}

.dashboard-search-exact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.875rem;
  cursor: pointer;
}

.dashboard-search-exact:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.dashboard-search-exact:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.dashboard-search-exact-track {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 1.125rem;
  border-radius: 999px;
  background: var(--line-input);
  transition: background-color 120ms ease;
}

.dashboard-search-exact-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.125rem - 4px);
  height: calc(1.125rem - 4px);
  border-radius: 50%;
  background: #ffffff;
  transition: transform 120ms ease;
}

.dashboard-search-exact[aria-checked="true"] .dashboard-search-exact-track {
  background: var(--brand);
}

.dashboard-search-exact[aria-checked="true"]
  .dashboard-search-exact-track::after {
  transform: translateX(0.875rem);
}

.dashboard-search-empty {
  text-align: left;
}

.dashboard-search-empty-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--ink-soft);
}

.dashboard-search-empty-list a,
.button-link {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.button-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.dashboard-search-empty-list a:hover,
.button-link:hover {
  color: var(--brand);
}

.button-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Home: "Recommended for you" shelf
 * ------------------------------------------------------------------------- */

.recs {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--accent-soft), transparent 55%),
    var(--surface);
}

/* Without this the rail's full width leaks up the grids and widens the page. */
.recs-body {
  min-width: 0;
}

.recs-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recs-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #ffffff;
}

.recs-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.recs-heading {
  min-width: 0;
  margin-right: auto;
}

.recs-title {
  margin: 0;
  font-size: 1.05rem;
}

.recs-subtitle {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.recs-controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}

.recs-nav {
  width: 34px;
  height: 34px;
  padding: 0;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.recs-nav:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-muted);
}

.recs-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.recs-nav[hidden] {
  display: none;
}

.recs-reason svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One row; cards snap into place and the next one peeks when it overflows. */
.recs-rail {
  /* Contains the cards' absolutely positioned screen-reader text, which would
     otherwise escape the scroll clip and widen the page. */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(17rem, 82%), 21rem);
  gap: 0.85rem;
  margin: 0;
  padding: 0.15rem 0.15rem 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.15rem;
  scrollbar-width: thin;
}

.recs-item {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

.recs-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.recs-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.1);
}

.recs-card:focus-within {
  border-color: var(--brand);
}

.recs-reason {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  max-width: 100%;
  margin: 0;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.recs-reason span[aria-hidden="true"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recs-reason svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.recs-reason-match,
.recs-reason-search {
  background: var(--accent-soft);
  color: var(--brand-deep);
}

.recs-reason-trending {
  background: var(--primary-soft);
  color: var(--warning-ink);
}

.recs-card-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
}

.recs-card-title a,
.recs-card-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.recs-card-title a {
  color: var(--ink);
  text-decoration: none;
}

.recs-card-title a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.recs-card-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.recs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.recs-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}

.recs-card .icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.recs-card .icon-button:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

:root[data-display-theme="dark"] .recs-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

:root[data-display-theme="dark"] .recs-nav:hover:not(:disabled) {
  background: var(--surface-muted) !important;
}

@media (max-width: 720px) {
  .recs {
    padding: 0.85rem;
  }

  .recs-subtitle {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Home: hero (date, greeting, figures and the recommendations)
 * ------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.6rem 1.75rem;
  overflow: hidden;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(
      60% 130% at 100% 0%,
      rgba(243, 194, 47, 0.16),
      transparent 60%
    ),
    radial-gradient(
      55% 110% at 0% 100%,
      rgba(99, 200, 223, 0.22),
      transparent 62%
    ),
    linear-gradient(135deg, #0b6176 0%, #094a5b 52%, #07323f 100%);
  box-shadow: 0 20px 44px -28px rgba(7, 50, 63, 0.75);
}

/* A faint dot grid, strongest in the top-right corner. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1.4px
  );
  background-size: 18px 18px;
  mask-image: linear-gradient(225deg, #000 0%, transparent 55%);
  pointer-events: none;
}

.home-hero-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* Wraps its copy before the figures drop below it. */
.home-hero-text {
  display: grid;
  flex: 1 1 18rem;
  gap: 0.35rem;
  max-width: 40rem;
}

.home-hero-eyebrow {
  margin: 0;
  color: #f6d365;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.home-hero-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.5;
}

.home-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-hero-stat {
  display: grid;
  gap: 0.1rem;
  min-width: 6.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.home-hero-stat strong {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.home-hero-stat span {
  font-size: 0.78rem;
  font-weight: 500;
}

/* On the hero the shelf has no box of its own: light text and white cards. */
.home-hero .recs {
  padding: 1.1rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: none;
}

.home-hero .recs-title {
  color: #ffffff;
}

.home-hero .recs-subtitle {
  color: rgba(255, 255, 255, 0.86);
}

.home-hero .recs-icon {
  background: var(--primary);
  color: var(--primary-ink);
}

.home-hero .recs-nav,
.home-hero .collapsible-section-toggle,
:root[data-display-theme="dark"] .home-hero .recs-nav,
:root[data-display-theme="dark"] .home-hero .collapsible-section-toggle {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff;
}

.home-hero .recs-nav:hover:not(:disabled),
.home-hero .collapsible-section-toggle:hover,
:root[data-display-theme="dark"] .home-hero .recs-nav:hover:not(:disabled),
:root[data-display-theme="dark"] .home-hero .collapsible-section-toggle:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.home-hero .recs-rail {
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.home-hero .recs-card {
  border-color: transparent;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  .home-hero {
    padding: 1.15rem;
    border-radius: 14px;
  }

  .home-hero-stats {
    gap: 0.45rem;
  }

  .home-hero-stat {
    min-width: 5.5rem;
    padding: 0.55rem 0.75rem;
  }

  .home-hero-stat strong {
    font-size: 1.25rem;
  }

  .home-hero .recs {
    padding: 0.9rem 0 0;
  }
}

/* --- Prompt sharing: audience picker, request dialog, owner Access panel -- */

/* The audience is a deliberate choice, so the picker sits in its own panel and
   the selected card takes the colors of the library's audience chips. */
.audience-block {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.audience-fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.audience-fieldset > legend {
  padding: 0;
}

.audience-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.audience-choice {
  position: relative;
  display: block;
}

.audience-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.audience-choice-body {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.audience-choice input:hover + .audience-choice-body {
  border-color: var(--line-input);
}

.audience-choice input:checked + .audience-choice-body {
  border-color: var(--brand);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--brand);
}

.audience-choice-restricted input:checked + .audience-choice-body {
  border-color: var(--status-restricted-ink);
  background: var(--status-restricted-bg);
  box-shadow: 0 0 0 1px var(--status-restricted-ink);
}

.audience-choice-published input:checked + .audience-choice-body {
  border-color: var(--status-published-ink);
  background: var(--status-published-bg);
  box-shadow: 0 0 0 1px var(--status-published-ink);
}

.audience-choice-restricted
  input:checked
  + .audience-choice-body
  .audience-choice-title {
  color: var(--status-restricted-ink);
}

.audience-choice-published
  input:checked
  + .audience-choice-body
  .audience-choice-title {
  color: var(--status-published-ink);
}

.audience-choice input:focus-visible + .audience-choice-body {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.audience-choice-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.audience-choice-default {
  margin-left: auto;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.editor-audience-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.editor-audience-badge {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.editor-audience-badge:hover {
  filter: brightness(0.97);
}

.editor-audience-badge:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.audience-choice-title svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audience-choice-hint {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.access-request-dialog,
.become-owner-dialog {
  width: min(520px, 100%);
}

.access-request-form,
.become-owner-form {
  display: grid;
  gap: 0.85rem;
}

.access-request-input,
.become-owner-input {
  min-height: 6.5rem;
  resize: vertical;
}

.access-request-count,
.become-owner-count {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.field-optional {
  color: var(--muted);
  font-weight: 400;
}

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

.access-panel-summary {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.access-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.access-request {
  grid-template-columns: minmax(0, 1fr);
}

.access-person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.access-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand-deep);
  font-size: 0.74rem;
  font-weight: 700;
}

.access-person-text {
  display: grid;
  min-width: 0;
}

.access-person-name,
.access-person-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-person-meta,
.access-role {
  color: var(--muted);
  font-size: 0.78rem;
}

.access-role {
  white-space: nowrap;
}

.access-request-message {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.access-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.access-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand-deep);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.access-count[hidden],
.access-empty[hidden] {
  display: none;
}

.access-empty {
  font-size: 0.86rem;
}

.prompt-access-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.prompt-access-pending::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d99a00;
}

.access-share {
  justify-self: start;
}

/* Share with people: chips + combobox in one field, suggestions below it. */
.share-dialog {
  width: min(560px, 100%);
}

.share-form {
  display: grid;
  gap: 0.85rem;
}

.share-people-box {
  position: relative;
}

.share-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.4rem 0.3rem 0.55rem;
  border: 1px solid var(--line-input, var(--line-strong));
  border-radius: var(--radius-control);
  background: var(--surface);
}

.share-people:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-chips:empty {
  display: none;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.15rem 0.2rem 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--brand-deep);
  font-size: 0.84rem;
  font-weight: 600;
}

.share-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-chip-remove {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.share-chip-remove:hover,
.share-chip-remove:focus-visible {
  background: color-mix(in srgb, currentColor 16%, transparent);
  outline: none;
}

.share-people-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  height: 2rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.share-permission {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.share-options {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.15rem;
  max-height: min(40vh, 18rem);
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.share-options[hidden] {
  display: none;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.share-option.is-active,
.share-option:hover {
  background: var(--surface-soft);
}

.share-option[aria-disabled="true"] {
  cursor: default;
  opacity: 0.7;
}

.share-option-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.share-option-name,
.share-option-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-option-meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.share-option-tag {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.share-option-empty {
  padding: 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.share-message {
  min-height: 5rem;
  resize: vertical;
}

@media (max-width: 720px) {
  .audience-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Notifications: header bell panel, rows, inbox page, toasts --------- */

.notif-menu {
  position: relative;
  display: inline-flex;
}

.header-action[aria-expanded="true"],
:root[data-display-theme="dark"] .header-action[aria-expanded="true"] {
  background: var(--surface-muted) !important;
  color: var(--ink);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100vw - 1rem));
  max-height: min(36rem, calc(100vh - var(--app-header-height) - 1.5rem));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

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

.notif-panel:focus {
  outline: none;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.55rem;
}

.notif-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.notif-text-button {
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--brand-deep);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.notif-text-button:hover {
  background: var(--accent-soft);
}

.notif-text-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.notif-text-button[aria-disabled="true"] {
  background: transparent;
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}

.notif-filters {
  display: flex;
  gap: 0.4rem;
  padding: 0 1rem 0.7rem;
  border-bottom: 1px solid var(--line);
}

.notif-filter,
.inbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.notif-filter:hover,
.inbox-chip:hover {
  background: var(--surface-muted);
}

.notif-filter:focus-visible,
.inbox-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.notif-filter.is-active,
.inbox-chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.notif-filter-count,
.inbox-chip-count {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.75;
}

.notif-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notif-panel-footer {
  padding: 0.45rem;
  border-top: 1px solid var(--line);
}

.notif-view-all {
  display: block;
  padding: 0.5rem;
  border-radius: 8px;
  color: var(--brand-deep);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.notif-view-all:hover {
  background: var(--surface-muted);
}

.notif-view-all:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.notif-empty,
.inbox-empty {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 2.25rem 1.5rem;
  text-align: center;
}

.notif-empty-icon,
.inbox-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand-deep);
}

.notif-empty-icon svg,
.inbox-empty-icon svg {
  width: 22px;
  height: 22px;
}

.notif-empty-title,
.inbox-empty-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.notif-empty-copy,
.inbox-empty-copy {
  max-width: 34ch;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Rows: the title link stretches over the row; controls sit above it. */
.notif-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notif-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}

.notif-list > .notif-item:last-child {
  border-bottom: 0;
}

.notif-item-inbox {
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 0.9rem 1.15rem;
}

.notif-item.is-unread {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.notif-item.is-unread::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  bottom: 0.65rem;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.notif-item.has-link:hover {
  background: var(--surface-muted);
}

.notif-item.is-selected,
.notif-item.is-selected:hover {
  background: var(--accent-soft);
}

.notif-select {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: 0.6rem 0 0;
  accent-color: var(--brand-deep);
  cursor: pointer;
}

.notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-ink);
}

.notif-icon svg,
.notif-action svg,
.notif-meta-prompt svg,
.notif-empty-icon svg,
.inbox-empty-icon svg,
.inbox-search svg,
.inbox-header .button svg,
.inbox-bulk-actions .button svg,
.toast svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-icon svg {
  width: 18px;
  height: 18px;
}

.notif-tone-neutral {
  --tone-bg: var(--status-neutral-bg);
  --tone-ink: var(--status-neutral-ink);
}

.notif-tone-certified {
  --tone-bg: var(--status-certified-bg);
  --tone-ink: var(--status-certified-ink);
}

.notif-tone-published {
  --tone-bg: var(--status-published-bg);
  --tone-ink: var(--status-published-ink);
}

.notif-tone-review {
  --tone-bg: var(--status-review-bg);
  --tone-ink: var(--status-review-ink);
}

.notif-tone-denied {
  --tone-bg: var(--status-denied-bg);
  --tone-ink: var(--status-denied-ink);
}

.notif-tone-restricted {
  --tone-bg: var(--status-restricted-bg);
  --tone-ink: var(--status-restricted-ink);
}

.notif-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.notif-headline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.notif-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-item.is-unread .notif-title {
  font-weight: 700;
}

a.notif-title::after {
  content: "";
  position: absolute;
  inset: 0;
}

a.notif-title:focus-visible {
  outline: none;
}

a.notif-title:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--brand);
}

.notif-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.notif-item.is-unread .notif-time {
  color: var(--brand-deep);
  font-weight: 600;
}

.notif-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notif-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.45rem;
  min-width: 0;
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.notif-meta-prompt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}

.notif-meta-prompt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-meta-prompt svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.notif-cta {
  color: var(--brand-deep);
  font-weight: 600;
}

/* Hover and keyboard focus reveal the row actions over the timestamp. */
.notif-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.notif-item:hover .notif-actions,
.notif-item:focus-within .notif-actions {
  opacity: 1;
  pointer-events: auto;
}

.notif-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.notif-action:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.notif-action[data-notification-action="delete"]:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.notif-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.notif-action svg {
  width: 16px;
  height: 16px;
}

/* Touch screens: actions stay visible, tucked beside the meta line. */
@media (hover: none) {
  .notif-actions {
    top: auto;
    bottom: 0.45rem;
    right: 0.6rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }

  .notif-item-panel .notif-meta {
    padding-right: 2.25rem;
  }

  .notif-item-inbox .notif-meta {
    padding-right: 6rem;
  }
}

:root[data-display-motion="reduced"] .notif-actions {
  transition: none;
}

/* Inbox page */
.inbox-header .button svg,
.inbox-bulk-actions .button svg {
  width: 16px;
  height: 16px;
}

.inbox-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.inbox-toolbar .tabs {
  border-bottom: 0;
}

.inbox-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--brand-deep);
  color: var(--surface);
  font-size: 0.7rem;
  font-weight: 700;
}

.inbox-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(20rem, 100%);
  margin-bottom: 0.55rem;
}

.inbox-search svg {
  position: absolute;
  left: 0.7rem;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.inbox-search-input {
  width: 100%;
  min-height: 36px;
  padding: 0 0.75rem 0 2.1rem;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
}

.inbox-search-input:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: var(--focus-ring);
}

.inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.inbox-chips:empty {
  display: none;
}

.inbox-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.inbox-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-height: 3rem;
  padding: 0.45rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.inbox-list-head:empty {
  display: none;
}

.inbox-list-head .notif-select {
  margin: 0;
}

.inbox-list-count {
  color: var(--muted);
  font-size: 0.85rem;
}

.inbox-list-count strong {
  color: var(--ink);
}

.inbox-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.inbox-group + .inbox-group {
  border-top: 1px solid var(--line);
}

.inbox-group-label {
  margin: 0;
  padding: 0.75rem 1.15rem 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* At <=1240px the bell sits in the bottom action bar, so the panel opens
   upward from it, like the profile menu. */
@media (max-width: 1240px) {
  .notif-panel {
    position: fixed;
    top: auto;
    right: auto;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 0.75rem;
    width: min(26rem, calc(100vw - 1.5rem));
    max-height: min(
      36rem,
      calc(
        100vh - var(--app-header-height) - 88px -
          env(safe-area-inset-bottom, 0px)
      )
    );
  }
}

@media (max-width: 720px) {
  .inbox-toolbar {
    flex-wrap: wrap;
  }

  .inbox-search {
    order: -1;
    width: 100%;
  }

  .notif-item-inbox {
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
  }

  .notif-item-inbox .notif-icon {
    width: 2rem;
    height: 2rem;
  }

  .inbox-bulk-actions {
    margin-left: 0;
  }
}

/* Toasts: inverse surface in both themes. */
.toast-region {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  z-index: 90;
  display: grid;
  gap: 0.5rem;
  width: min(30rem, calc(100vw - 1.5rem));
  transform: translateX(-50%);
  pointer-events: none;
}

/* Clear the bottom action bar at <=1240px. */
@media (max-width: 1240px) {
  .toast-region {
    bottom: calc(72px + 0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.5rem 0.5rem 0.95rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.28);
  font-size: 0.9rem;
  pointer-events: auto;
  animation: toast-in 160ms ease-out;
}

.toast-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.toast-icon svg {
  width: 18px;
  height: 18px;
}

.toast-success .toast-icon {
  color: #57c27f;
}

.toast-error .toast-icon {
  color: #ff8a80;
}

.toast-notification .toast-icon {
  color: var(--primary);
}

/* Two-line toasts: the icon sits on the title line. */
.toast:has(.toast-title + .toast-message) .toast-icon {
  align-self: flex-start;
  margin-top: 0.1rem;
}

.toast-text {
  display: grid;
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
}

.toast-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}

.toast-message {
  margin: 0;
  line-height: 1.4;
}

.toast-title + .toast-message {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.85rem;
  opacity: 0.85;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.toast-action,
.toast-close {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.toast-action {
  padding: 0.4rem 0.65rem;
  color: var(--primary);
  font-weight: 700;
}

.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  opacity: 0.75;
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

.toast-action:hover,
.toast-close:hover {
  background: color-mix(in srgb, var(--surface) 14%, transparent);
  opacity: 1;
}

.toast-action:focus-visible,
.toast-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

:root[data-display-theme="dark"] .toast {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* The yellow accent is unreadable on the light dark-mode toast. */
:root[data-display-theme="dark"] .toast-action,
:root[data-display-theme="dark"] .toast-notification .toast-icon {
  color: #0b6f86;
}

:root[data-display-theme="dark"] .toast-success .toast-icon {
  color: #146c43;
}

:root[data-display-theme="dark"] .toast-error .toast-icon {
  color: #b42318;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

:root[data-display-motion="reduced"] .toast {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}