@charset "UTF-8";
:root {
  --bg-primary: #fff;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f5f5f5;
  --bg-hover: #fafafa;
  --text-primary: #333;
  --text-secondary: #888;
  --text-tertiary: #999;
  --text-muted: #aaa;
  --border-color: #e0e0e0;
  --border-light: #e8e8e8;
  --border-hover: #bbb;
  --accent-color: #3b82f6;
  --accent-bg: rgba(59, 130, 246, 0.06);
  --accent-shadow: rgba(59, 130, 246, 0.12);
  --brand-primary: #09f;
  --brand-bg: rgba(0, 153, 255, 0.06);
  --brand-shadow: rgba(0, 153, 255, 0.18);
  --status-error: #d32f2f;
  --status-error-light: #fdecea;
  --status-success: #2e7d32;
  --status-success-light:#e8f5e9;
  --status-warning: #f90;
  --status-warning-light:#fff3e0;
  --status-info: #1976d2;
  --status-info-light: #e3f2fd;
  --shadow-sm: rgba(0, 0, 0, 0.08);
  --shadow-md: rgba(0, 0, 0, 0.12);
  --font-body: 'Open Sans', sans-serif;
  --font-display: 'Lora', 'Open Sans', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  color-scheme: light;
}

/* ─── Dark mode palette ─── */
/* Apply when the user has explicitly opted in (data-theme="dark") OR the
   system prefers dark and the user hasn't overridden to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg-primary: #15171a;
    --bg-secondary: #1c1f24;
    --bg-tertiary: #23272d;
    --bg-hover: #1f2329;
    --text-primary: #e8e8e8;
    --text-secondary: #9aa0a6;
    --text-tertiary: #757a82;
    --text-muted: #5b6068;
    --border-color: #2d3137;
    --border-light: #23272d;
    --border-hover: #4a4f57;
    --brand-bg: rgba(0, 153, 255, 0.14);
    --brand-shadow: rgba(0, 153, 255, 0.3);
    --accent-bg: rgba(59, 130, 246, 0.14);
    --accent-shadow: rgba(59, 130, 246, 0.3);
    --status-error-light: rgba(211, 47, 47, 0.16);
    --status-success-light: rgba(46, 125, 50, 0.16);
    --status-warning-light: rgba(255, 153, 0, 0.16);
    --status-info-light: rgba(25, 118, 210, 0.16);
    --shadow-sm: rgba(0, 0, 0, 0.4);
    --shadow-md: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --bg-primary: #15171a;
  --bg-secondary: #1c1f24;
  --bg-tertiary: #23272d;
  --bg-hover: #1f2329;
  --text-primary: #e8e8e8;
  --text-secondary: #9aa0a6;
  --text-tertiary: #757a82;
  --text-muted: #5b6068;
  --border-color: #2d3137;
  --border-light: #23272d;
  --border-hover: #4a4f57;
  --brand-bg: rgba(0, 153, 255, 0.14);
  --brand-shadow: rgba(0, 153, 255, 0.3);
  --accent-bg: rgba(59, 130, 246, 0.14);
  --accent-shadow: rgba(59, 130, 246, 0.3);
  --status-error-light: rgba(211, 47, 47, 0.16);
  --status-success-light: rgba(46, 125, 50, 0.16);
  --status-warning-light: rgba(255, 153, 0, 0.16);
  --status-info-light: rgba(25, 118, 210, 0.16);
  --shadow-sm: rgba(0, 0, 0, 0.4);
  --shadow-md: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 0;
}

/* Page frame */
.page {
  /* Full viewport width. Pages that need narrow content (login forms,
     landing copy, admin invite forms) constrain their inner blocks via
     their own max-width — they don't rely on .page to cap them. */
  width: 100%;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  /* Brand accent stripe on the topbar bottom edge. Replaces the previous
     neutral 1px border — pulls the page's BOSS-blue accent into the
     chrome so the header anchors visually. */
  border-bottom: 2px solid #09c;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Switched from the display serif (Lora) to the body sans-serif so the
     wordmark reads as part of the product chrome rather than editorial. */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.brand-mark .logo {
  height: 22px;
  width: auto;
  max-width: 154px;
  display: block;
}

.brand-mark .divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  position: relative;
}

.user-meta .name {
  color: var(--text-primary);
  font-weight: 600;
}

.user-meta .sep {
  width: 1px;
  height: 14px;
  background: var(--border-color);
}

.user-meta .signout,
.user-meta .topbar-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}

.user-meta .signout:hover,
.user-meta .topbar-link:hover {
  color: var(--accent-color);
}

/* ─── User menu (topbar avatar dropdown) ─── */
.user-menu-trigger {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.user-menu-trigger:hover {
  border-color: var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.user-menu-trigger[aria-expanded=true] {
  border-color: var(--border-hover);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.user-menu-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-bg);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.user-menu-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-menu-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-caret {
  font-size: 9px;
  line-height: 1;
  opacity: 0.6;
}

.user-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 140;
  min-width: 240px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}

.user-menu-popover[hidden] {
  display: none;
}

.user-menu-header {
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu-header .user-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-header .user-menu-email-full {
  font-size: 11.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.user-menu-item {
  appearance: none;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--bg-secondary);
  outline: none;
}

.user-menu-item[aria-disabled=true] {
  color: var(--text-tertiary);
  cursor: default;
  opacity: 0.6;
}

.user-menu-item[aria-disabled=true]:hover {
  background: transparent;
}

.user-menu-item.user-menu-signout {
  color: var(--status-error, #b91c1c);
}

.user-menu-item .user-menu-item-icon {
  width: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}

.user-menu-item.user-menu-signout .user-menu-item-icon {
  color: inherit;
}

/* ─── Account modal (mounted lazily by user-menu.js) ───
   Hosts the BOSS Identity account widget — one modal, two sections
   ('profile' | 'change-password') driven by the widget's `section`
   option. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 22, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(480px, 100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 20px 60px rgba(0, 0, 0, 0.28);
  padding: 24px;
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease;
}

.modal.is-open .modal-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 1px solid var(--border-color, transparent);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.modal-state {
  font-size: 13px;
  color: var(--text-secondary, #666);
  padding: 24px 4px 8px;
  line-height: 1.5;
}

.modal-state.is-error {
  color: var(--status-error, #b91c1c);
}

#account-modal-mount[hidden] {
  display: none;
}

.modal-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.modal-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.modal-btn-primary,
.modal-btn-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.modal-btn-primary {
  background: var(--brand-primary);
  color: #fff;
}

.modal-btn-primary:hover {
  background: #0a8de6;
}

.modal-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.modal-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

@media (max-width: 480px) {
  .modal-dialog {
    width: calc(100vw - 24px);
    padding: 20px 18px;
  }
}
/* ─── Preferences modal (workload-owned, distinct from account modal) ───
   Mounted lazily by public/preferences.js. Reuses .modal / .modal-backdrop /
   .modal-dialog / .modal-close / .modal-state; everything below is the
   modal's own content chrome. */
.wl-prefs-dialog {
  width: min(560px, 100vw - 32px);
  padding: 28px 30px 24px;
}

.wl-prefs-head {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}

.wl-prefs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.wl-prefs-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.wl-prefs-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.wl-prefs-section {
  display: flex;
  flex-direction: column;
}

.wl-prefs-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}

.wl-prefs-helper {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.wl-prefs-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wl-prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
  position: relative;
}

.wl-prefs-row:first-child {
  border-top: none;
}

/* Stacked variant for radio/checkbox groups under a label. */
.wl-prefs-row-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.wl-prefs-row-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
}

/* "Saved" hint that fades in next to a row after a successful POST.
   Always position:absolute so showing/hiding the hint never reflows
   the row's flex children. Without this the segmented control jumps
   sideways the moment "Saved" appears, and the next row's vertical
   spacing shifts. The row already declares position:relative as the
   positioning context. */
.wl-prefs-saved {
  position: absolute;
  top: 4px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--status-success, #2e7d32);
  margin: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.wl-prefs-row-block > .wl-prefs-saved {
  top: 14px;
}

.wl-prefs-saved.is-show {
  opacity: 1;
}

.wl-prefs-saved.is-fade {
  opacity: 0;
}

/* Segmented control (Bulk | Individual). The active half flips to the
   foreground color so the contrast adapts to dark mode without an extra
   variable. */
.wl-prefs-seg {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-primary);
}

.wl-prefs-seg-btn {
  appearance: none;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease;
  border-left: 1px solid var(--border-light);
}

.wl-prefs-seg-btn:first-child {
  border-left: none;
}

.wl-prefs-seg-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.wl-prefs-seg-btn.is-active,
.wl-prefs-seg-btn.is-active:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* Radio + checkbox pills. Same visual chassis; the input keeps its native
   widget so accent-color picks up the brand. */
.wl-prefs-radio-group,
.wl-prefs-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.wl-prefs-radio,
.wl-prefs-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: 6px;
  padding: 7px 12px 7px 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.wl-prefs-radio:hover,
.wl-prefs-check:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.wl-prefs-radio:has(input:checked),
.wl-prefs-check:has(input:checked) {
  border-color: var(--accent-color);
  background: var(--accent-bg);
}

.wl-prefs-radio input,
.wl-prefs-check input {
  accent-color: var(--accent-color);
  margin: 0;
}

.wl-prefs-radio-pills .wl-prefs-radio {
  padding: 8px 16px;
}

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

@media (max-width: 520px) {
  .wl-prefs-dialog {
    padding: 22px 18px 20px;
  }
  .wl-prefs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .wl-prefs-row > .wl-prefs-seg {
    align-self: flex-start;
  }
}
/* Page header */
.page-header {
  padding: 32px 40px 22px;
  border-bottom: 1px solid var(--border-light);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.eyebrow .divider {
  width: 24px;
  height: 1px;
  background: var(--border-hover);
}

.epic-key {
  color: var(--brand-primary);
  font-weight: 600;
}

h1.page-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

/* Workspace */
main.workspace[hidden] {
  display: none !important;
}

main.workspace {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
  min-height: 540px;
}

.form-col {
  padding: 28px 40px 36px;
  border-right: 1px solid var(--border-light);
}

.sidebar-col {
  padding: 28px 28px 36px;
  background: var(--bg-secondary);
}

/* ============================================================
   STEP HEADER (above each phase)
   ============================================================ */
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-number {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-bg);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}

.step-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}

.step-title small {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-secondary);
  font-style: italic;
  margin-left: 8px;
  font-weight: 400;
}

.step-block {
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.step-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ============================================================
   TYPE PICKER (the new opener)
   ============================================================ */
.type-picker {
  display: grid;
  /* 2×2 with four feedback types — a lone card wrapping under a 3-col row
     reads as an afterthought. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms, transform 100ms;
}

.type-card input {
  display: none;
}

.type-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.type-card.is-selected {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
  box-shadow: 0 1px 2px var(--brand-shadow);
}

.type-card .glyph {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  transition: background 150ms;
}

.type-card.is-selected .glyph {
  background: var(--brand-primary);
}

.type-card .glyph::before {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color 150ms;
}

.type-card.is-selected .glyph::before {
  color: #fff;
}

.type-card[data-kind=bug] .glyph::before {
  content: "!";
}

.type-card[data-kind=suggestion] .glyph::before {
  content: "+";
  font-style: normal;
  font-weight: 600;
}

.type-card[data-kind=question] .glyph::before {
  content: "?";
}

.type-card[data-kind=Bug] .glyph::before {
  content: "!";
}

.type-card[data-kind=Suggestion] .glyph::before {
  content: "+";
  font-style: normal;
  font-weight: 600;
}

.type-card[data-kind=Question] .glyph::before {
  content: "?";
}

.type-card[data-kind="Preview Feature"] .glyph::before {
  content: "✦";
  font-style: normal;
}

.type-card .label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.type-card.is-selected .label {
  color: var(--brand-primary);
}

.type-card .desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.type-card .check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  transition: background 150ms, border-color 150ms;
}

.type-card.is-selected .check {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.type-card.is-selected .check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: translate(-50%, -65%) rotate(-45deg);
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
form.feedback {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 30px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-label .req {
  color: var(--brand-primary);
  margin-left: -2px;
}

.field-label .req-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: var(--brand-bg);
  color: var(--brand-primary);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
}

.field-label .opt-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
}

.field-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}

input[type=text], input[type=url], textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 11px 13px;
  transition: border-color 150ms, box-shadow 150ms;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

.field-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 11px 36px 11px 13px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}

.field-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

/* Field marked invalid (after warn) */
.field.is-warn input, .field.is-warn .dropzone {
  border-color: var(--status-warning);
  background: var(--status-warning-light);
}

.field.is-warn .field-warning {
  font-size: 11.5px;
  color: var(--status-warning);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.field.is-warn .field-warning::before {
  content: "!";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--status-warning);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* Dropzone */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}

.dropzone:hover {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
}

.dropzone-shell.is-dragover .dropzone,
.dropzone-shell.is-dragover .dropzone-preview {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
}

.dropzone .icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-hover);
  position: relative;
}

.dropzone .icon::before, .dropzone .icon::after {
  content: "";
  position: absolute;
  background: var(--text-tertiary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropzone .icon::before {
  width: 10px;
  height: 1.5px;
}

.dropzone .icon::after {
  width: 1.5px;
  height: 10px;
}

/* Console log details */
details.console-log {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-secondary);
}

details.console-log summary {
  padding: 9px 13px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

details.console-log summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-tertiary);
}

details.console-log[open] summary::after {
  content: "−";
}

details.console-log textarea {
  border: none;
  border-top: 1px solid var(--border-light);
  border-radius: 0 0 6px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-secondary);
}

/* Submit area */
.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-color);
}

.submit-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

button.submit {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--brand-primary);
  border: 0;
  border-radius: 6px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms, transform 100ms;
  box-shadow: 0 1px 2px var(--brand-shadow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: center;
}

button.submit:hover {
  background: #0a8de6;
  box-shadow: 0 4px 16px var(--brand-shadow);
}

button.submit:active {
  transform: translateY(1px);
}

button.submit .arrow {
  font-family: var(--font-mono);
  opacity: 0.85;
}

button.submit.is-dup {
  background: var(--accent-color);
  box-shadow: 0 1px 2px var(--accent-shadow);
}

button.submit.is-dup:hover {
  background: #2563eb;
  box-shadow: 0 4px 16px var(--accent-shadow);
}

/* Warn banner */
.warn-banner[hidden] {
  display: none !important;
}

.warn-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--status-warning-light);
  border: 1px solid rgba(255, 153, 0, 0.3);
  border-left: 3px solid var(--status-warning);
  border-radius: 8px;
  margin-bottom: 6px;
}

.warn-banner .icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--status-warning);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.warn-banner .icon-wrap::before {
  content: "!";
}

.warn-banner .copy {
  font-size: 13px;
  line-height: 1.5;
  color: #6e4500;
}

.warn-banner .copy strong {
  color: #5a3700;
  font-weight: 700;
}

.warn-banner .copy small {
  display: block;
  font-size: 11.5px;
  color: #8a5a10;
  margin-top: 4px;
}

/* Sidebar dedup */
.sidebar-col h2 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-col h2 .divider {
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.sidebar-locked {
  padding: 20px 16px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  text-align: center;
}

.sidebar-locked .lock-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  position: relative;
}

.sidebar-locked .lock-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 1.5px;
  background: var(--text-tertiary);
}

.sidebar-locked .lock-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.45;
}

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

.match-empty {
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
}

.match-empty .em-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  position: relative;
}

.match-empty .em-icon::after {
  content: "?";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--text-tertiary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

.match-empty .em-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.match-card {
  position: relative;
  padding: 14px 14px 12px 18px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}

.match-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: transparent;
  border-radius: 0 2px 2px 0;
}

.match-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 2px 8px var(--shadow-sm);
}

.match-card.is-auto {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
  box-shadow: 0 1px 2px var(--brand-shadow);
}

.match-card.is-auto::before {
  background: var(--brand-primary);
}

.match-pill {
  position: absolute;
  top: -8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px var(--brand-shadow);
}

.match-card.is-selected {
  border-color: var(--accent-color);
  background: var(--accent-bg);
  box-shadow: 0 1px 2px var(--accent-shadow);
}

.match-card.is-selected::before {
  background: var(--accent-color);
}

.match-card.is-selected .check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-card.is-selected .check::after {
  content: "";
  width: 8px;
  height: 4px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.match-key {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.match-card.is-selected .match-key {
  color: var(--accent-color);
}

.status-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 2px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
}

.status-tag.is-open {
  color: var(--status-info);
  border-color: rgba(25, 118, 210, 0.3);
  background: var(--status-info-light);
}

.status-tag.is-progress {
  color: #f57c00;
  border-color: rgba(245, 124, 0, 0.35);
  background: #fff3e0;
}

.status-tag.is-review {
  color: #6a1b9a;
  border-color: rgba(106, 27, 154, 0.3);
  background: #f3e5f5;
}

.status-tag.is-resolved, .status-tag.is-done {
  color: var(--status-success);
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--status-success-light);
}

.status-tag.is-blocked {
  color: var(--status-error);
  border-color: rgba(211, 47, 47, 0.3);
  background: var(--status-error-light);
}

/* Priority pill */
.priority-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid;
}

.priority-tag .arrow {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  margin-right: -1px;
}

.priority-tag.priority-highest {
  color: #b71c1c;
  background: #ffebee;
  border-color: #ffcdd2;
}

.priority-tag.priority-high {
  color: #d32f2f;
  background: #fdecea;
  border-color: rgba(211, 47, 47, 0.3);
}

.priority-tag.priority-medium {
  color: #f57c00;
  background: #fff3e0;
  border-color: rgba(245, 124, 0, 0.3);
}

.priority-tag.priority-low {
  color: #1976d2;
  background: #e3f2fd;
  border-color: rgba(25, 118, 210, 0.3);
}

.priority-tag.priority-lowest {
  color: #616161;
  background: #f5f5f5;
  border-color: #e0e0e0;
}

.match-summary {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.match-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.match-meta .similarity {
  font-weight: 600;
  color: var(--text-secondary);
}

.match-card.is-auto .match-meta .similarity {
  color: var(--brand-primary);
}

.match-card.is-selected .match-meta .similarity {
  color: var(--accent-color);
}

.match-bar {
  height: 2px;
  background: var(--border-light);
  border-radius: 1px;
  overflow: hidden;
  margin: 0 0 10px;
}

.match-bar .fill {
  height: 100%;
  background: var(--text-muted);
  transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.match-card.is-auto .match-bar .fill {
  background: var(--brand-primary);
}

.match-card.is-selected .match-bar .fill {
  background: var(--accent-color);
}

.match-action {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.match-action:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.match-card.is-auto .match-action {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.match-card.is-auto .match-action:hover {
  background: #0a8de6;
}

.match-card.is-selected .match-action {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.sidebar-footnote {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-color);
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-tertiary);
  font-family: var(--font-display);
  line-height: 1.5;
}

/* Result states */
.result {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.result::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.result.is-success::before {
  background: var(--status-success);
}

.result.is-commented::before {
  background: var(--accent-color);
}

.result.is-error::before {
  background: var(--status-error);
}

.result-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-eyebrow .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.result.is-success .result-eyebrow .pulse {
  background: var(--status-success);
  box-shadow: 0 0 0 4px var(--status-success-light);
}

.result.is-commented .result-eyebrow .pulse {
  background: var(--accent-color);
  box-shadow: 0 0 0 4px var(--accent-bg);
}

.result.is-error .result-eyebrow .pulse {
  background: var(--status-error);
  box-shadow: 0 0 0 4px var(--status-error-light);
}

.result-eyebrow .label-success {
  color: var(--status-success);
}

.result-eyebrow .label-commented {
  color: var(--accent-color);
}

.result-eyebrow .label-error {
  color: var(--status-error);
}

.result-headline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--text-primary);
}

.result-headline .key {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--brand-primary);
  background: var(--brand-bg);
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.result-detail {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: 520px;
}

.result-detail code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 3px;
}

.result-error-detail {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--status-error);
  background: var(--status-error-light);
  border-left: 3px solid var(--status-error);
  padding: 10px 12px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.result-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.btn-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.btn-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.match-card {
  animation: fadeInUp 280ms ease both;
}

.match-card:nth-child(2) {
  animation-delay: 60ms;
}

.match-card:nth-child(3) {
  animation-delay: 120ms;
}

@keyframes growBar {
  from {
    width: 0;
  }
}
.match-bar .fill {
  animation: growBar 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.dropzone input[type=file] {
  display: none;
}

/* Hide form stage until type picked */
.form-stage[hidden] {
  display: none;
}

.fields-for[hidden] {
  display: none;
}

.match-list[hidden] {
  display: none;
}

.sidebar-locked[hidden] {
  display: none;
}

/* ─── Error & Landing pages ─── */
.error-page, .landing-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.error-card, .landing-card {
  width: min(560px, 100%);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 48px 44px;
  box-shadow: 0 1px 2px var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.error-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--status-warning);
}

.error-card.is-expired::before {
  background: var(--status-warning);
}

.error-card.is-invalid::before {
  background: var(--status-error);
}

.landing-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-primary);
}

.error-eyebrow, .landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.error-title, .landing-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: var(--text-primary);
}

.error-message, .landing-message {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.error-message:last-child, .landing-message:last-child {
  margin-bottom: 0;
}

.error-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.error-actions a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms;
}

.error-actions a:hover {
  background: #0a8de6;
}

.error-actions a.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.error-actions a.btn-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.user-meta[data-empty="1"] {
  visibility: hidden;
}

/* ─── Admin page ─── */
.admin-page {
  padding: 0 0 60px;
}

.admin-header {
  padding: 32px 40px 22px;
  border-bottom: 1px solid var(--border-light);
}

.admin-grid {
  display: grid;
  /* Active epics gets a bit more room than Add an epic; full-width row continues */
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  padding: 28px 40px;
}

.admin-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.admin-card-wide {
  grid-column: 1/-1;
}

.admin-card-active-epics {
  grid-column: 1/2;
}

/* Epic key link in the active-epics table */
.epic-key-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  padding: 4px 0;
  border-radius: 4px;
}

.epic-key-link .key {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
  transition: color 150ms;
}

.epic-key-link .name {
  color: var(--text-primary);
  font-weight: 600;
  transition: color 150ms;
}

.epic-key-arrow {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-left: 2px;
  transition: color 150ms, transform 150ms;
  display: inline-block;
}

.epic-key-link:hover .epic-key-arrow {
  color: var(--brand-primary);
  transform: translateX(2px);
}

.epic-key-link:hover .name {
  color: var(--brand-primary);
}

.admin-card-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border-light);
}

.admin-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-card-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  transition: color 150ms, border-color 150ms, background 150ms;
}

.admin-card-cta:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.admin-card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

button.admin-card-cta {
  cursor: pointer;
  font-family: inherit;
  background: transparent;
}

button.admin-card-cta-primary,
.admin-card-cta-primary {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

button.admin-card-cta-primary:hover,
.admin-card-cta-primary:hover {
  color: #fff;
  background: #0a8de6;
  border-color: #0a8de6;
}

.admin-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.admin-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.admin-section-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  max-width: 560px;
}

.admin-card-body {
  padding: 18px 24px 22px;
}

.admin-table-wrap {
  width: 100%;
}

/* Tables */
.epic-table, .invite-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.epic-table th, .invite-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.epic-table th.num, .epic-table td.num,
.invite-table th.num, .invite-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.epic-table th.actions, .epic-table td.actions {
  text-align: right;
}

.epic-table td, .invite-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.epic-table tr:last-child td, .invite-table tr:last-child td {
  border-bottom: 0;
}

.epic-table tr:hover td, .invite-table tr:hover td {
  background: var(--bg-hover);
}

.epic-table .loading, .invite-table .loading {
  text-align: center;
  font-style: italic;
  color: var(--text-tertiary);
  padding: 28px 0;
}

.epic-table .ticket-count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

.epic-key-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.epic-key-cell .key {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
}

.epic-key-cell .name {
  color: var(--text-primary);
  font-weight: 600;
}

.last-synced {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Active toggle */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .track {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border-radius: 999px;
  border: 1px solid var(--border-color);
  transition: background 150ms, border-color 150ms;
}

.toggle .track::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 150ms;
}

.toggle input:checked + .track {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.toggle input:checked + .track::before {
  transform: translateX(16px);
}

.btn-resync {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 10px;
  margin-left: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.btn-resync:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-resync.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.btn-resync:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-archive,
.btn-unarchive,
.btn-edit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 10px;
  margin-left: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.btn-archive:hover {
  background: var(--bg-secondary);
  color: var(--status-danger, #c53030);
  border-color: var(--status-danger, #c53030);
}

.btn-unarchive:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-edit:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-archive:disabled, .btn-unarchive:disabled, .btn-edit:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.epic-deadline-cell {
  color: var(--text-secondary);
  font-size: 13px;
}

.epic-deadline-empty {
  color: var(--text-tertiary);
}

.epic-deadline-value {
  color: var(--text-primary);
  font-weight: 500;
}

.epic-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 0 12px;
}

.epic-table-archived-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.epic-table tr.is-archived td {
  opacity: 0.65;
}

.epic-table tr.is-archived:hover td {
  opacity: 0.85;
}

.epic-archived-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  vertical-align: middle;
}

/* Forms */
.admin-inline-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 480px;
}

.admin-inline-form input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.admin-inline-form input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.admin-inline-form button, .invite-submit {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 150ms;
}

.admin-inline-form button:hover, .invite-submit:hover {
  background: #0a8de6;
}

.admin-inline-form button:disabled, .invite-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-grid-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr auto;
  gap: 14px;
  align-items: start;
}

/* Two-up: a single labeled input + a right-aligned action button. Used by
   Section 3 ("Notification owners") where there isn't a 3-up row to fill. */
.admin-grid-form-narrow {
  grid-template-columns: minmax(220px, 380px) auto;
}

/* Single-column stack used inside modal dialogs. */
.admin-grid-form-stack {
  grid-template-columns: 1fr;
  gap: 16px;
}

.admin-grid-form-submit {
  align-self: end;
}

.admin-grid-form .field {
  gap: 6px;
}

.admin-grid-form input, .admin-grid-form select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 100%;
  background: var(--bg-primary);
}

.admin-grid-form input:focus, .admin-grid-form select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.admin-form-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  border-left: 3px solid;
}

.admin-form-status.is-success {
  background: var(--status-success-light);
  color: var(--status-success);
  border-color: var(--status-success);
}

.admin-form-status.is-error {
  background: var(--status-error-light);
  color: var(--status-error);
  border-color: var(--status-error);
}

.admin-form-status.is-warning {
  background: var(--status-warning-light);
  color: var(--status-warning);
  border-color: var(--status-warning);
}

.admin-subheading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 28px 0 12px;
}

.admin-subsection {
  margin-top: 24px;
}

.admin-subsection-bordered {
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.admin-subsection .admin-subheading {
  margin-top: 0;
}

.admin-subsection-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.admin-inline-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.admin-inline-button:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.admin-inline-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Notification-owners list — Section 4. Chips with an inline remove. */
.subs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}

.subs-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

.subs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--brand-bg, #eef6ff);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
}

.subs-chip-name {
  font-weight: 500;
}

.subs-chip-email {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.subs-chip-remove {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
}

.subs-chip-remove:hover:not(:disabled) {
  background: var(--status-error-light, #fdeaea);
  color: var(--status-error, #c33);
}

.subs-chip-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.subs-chip-threshold {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary, #fff);
  color: var(--text-secondary);
  cursor: pointer;
}

.subs-chip-threshold:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Tab strip for Section 2 "Add an epic" — segmented control sitting just
   below the card header. Active tab carries the visual weight; inactives
   stay quiet so the active form is what the eye lands on. */
.admin-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 18px;
}

.admin-tab {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}

.admin-tab:hover {
  color: var(--text-secondary);
}

.admin-tab.is-active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.is-active {
  display: block;
}

.admin-tab-hint {
  margin: 0 0 14px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.5;
}

.admin-tab-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.admin-tab-actions button {
  padding: 8px 16px;
  border: 0;
  background: var(--status-info);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.admin-tab-actions button:hover {
  background: #0a8de6;
}

.admin-tab-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-grid-form-row {
  grid-column: 1/-1;
}

.admin-grid-form-row textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

/* Invite status pill */
.invite-status-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
}

.invite-status-tag.accepted {
  color: var(--status-success);
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--status-success-light);
}

.invite-status-tag.pending {
  color: var(--status-info);
  border-color: rgba(25, 118, 210, 0.3);
  background: var(--status-info-light);
}

.invite-status-tag.expired {
  color: var(--text-tertiary);
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

/* Stack the two top cards until there's enough room for the active-epics
   table not to crowd. Below ~1400px the 3fr/2fr split forces the epic
   name column to wrap heavily, so each card gets its own full-width row. */
@media (max-width: 1400px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-card-active-epics {
    grid-column: 1/-1;
  }
}
/* Collapse the invite form's 3-up row before things get cramped — at
   ~960px the email/name/epic fields stop fitting comfortably side by side. */
@media (max-width: 960px) {
  .admin-grid-form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .admin-grid {
    padding: 20px;
  }
  .admin-grid-form {
    grid-template-columns: 1fr;
  }
  /* Page header: was locked to desktop's 32×40px padding, eating ~80px of
     horizontal space on a 400px viewport. */
  .admin-header {
    padding: 22px 20px 16px;
  }
  /* Card chrome: same story — 20×24 → 14×16. */
  .admin-card-header {
    padding: 16px 18px 12px;
  }
  .admin-card-body {
    padding: 14px 18px 18px;
  }
  /* Active-epics header: stack the title block above the CTAs so "+ New
     epic" / "View all boards" don't squeeze the section title into 2-3 wraps. */
  .admin-card-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-card-header-actions {
    flex-wrap: wrap;
  }
  /* Tables: scroll horizontally inside the card body instead of letting
     the action column collapse and stack Edit/Archive vertically. The
     negative margin / padding pair keeps the scroll area flush with the
     card edge so the scrollbar isn't visually inset. */
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -18px;
    padding: 0 18px;
  }
  .admin-table-wrap .epic-table,
  .admin-table-wrap .invite-table {
    min-width: 560px;
  }
}
/* ─── API tokens — Section 4 ─────────────────────────────────────────── */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.token-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.token-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.token-table th.actions, .token-table td.actions {
  text-align: right;
}

.token-table tr:last-child td {
  border-bottom: 0;
}

.token-table tr:hover td {
  background: var(--bg-hover);
}

.token-table tr.is-archived td {
  opacity: 0.55;
}

.token-table .loading {
  text-align: center;
  font-style: italic;
  color: var(--text-tertiary);
  padding: 28px 0;
}

.token-prefix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Scope + status pills */
.token-scopes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.token-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--brand-bg, #eef6ff);
  color: var(--brand-primary, #2563eb);
}

.token-pill-muted {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.token-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.token-status-active {
  background: var(--status-success-light, #e6f5ec);
  color: var(--status-success, #1a7f43);
}

.token-status-expired {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.token-status-revoked {
  background: var(--status-error-light, #fdeaea);
  color: var(--status-error, #c33);
}

/* Revoke button — mirrors .btn-archive's destructive affordance. */
.btn-revoke {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-revoke:hover {
  background: var(--bg-secondary);
  color: var(--status-danger, #c53030);
  border-color: var(--status-danger, #c53030);
}

.btn-revoke:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Create-form bits */
.token-form-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
}

.token-form-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: 3px;
}

.token-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.token-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}

/* One-time secret reveal */
.token-secret {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0 4px;
}

.token-secret-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  user-select: all;
}

.token-secret-copy {
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.token-secret-copy:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.token-secret-copy.is-copied {
  color: var(--status-success, #1a7f43);
  border-color: var(--status-success, #1a7f43);
}

@media (max-width: 720px) {
  .admin-table-wrap .token-table {
    min-width: 680px;
  }
}
/* ─── Submissions section ─── */
.submissions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.view-tabs {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.view-tab {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}

.view-tab:hover {
  color: var(--text-primary);
}

.view-tab.is-active {
  background: var(--bg-primary);
  color: var(--brand-primary);
  box-shadow: 0 1px 2px var(--shadow-sm);
}

.view-tab-icon {
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
}

.view-tab-icon.icon-grid::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(to right, currentColor 0 1px, transparent 1px) 0 0/100% 33%, linear-gradient(to right, currentColor 0 1px, transparent 1px) 0 50%/100% 33%, linear-gradient(to right, currentColor 0 1px, transparent 1px) 0 100%/100% 33%, linear-gradient(to bottom, currentColor 0 1px, transparent 1px) 0 0/33% 100%, linear-gradient(to bottom, currentColor 0 1px, transparent 1px) 50% 0/33% 100%, linear-gradient(to bottom, currentColor 0 1px, transparent 1px) 100% 0/33% 100%;
  background-repeat: no-repeat;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.view-tab-icon.icon-board::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(currentColor, currentColor) 0 0/3px 100% no-repeat, linear-gradient(currentColor, currentColor) 50% 0/3px 70% no-repeat, linear-gradient(currentColor, currentColor) 100% 0/3px 50% no-repeat;
  border-left: 0;
}

.submissions-filter select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  cursor: pointer;
}

.submissions-body {
  padding-top: 0;
}

.view-pane {
  display: none;
}

.view-pane.is-active {
  display: block;
}

/* Spreadsheet view */
.submissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 16px;
}

.submissions-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
}

.submissions-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.submissions-table tr:hover td {
  background: var(--bg-hover);
}

.submissions-table tr:last-child td {
  border-bottom: 0;
}

/* Hide spreadsheet columns the user has toggled off via the Preferences
   modal. data-col-hide is a space-separated list of column ids set by
   applySheetCols() in app.js; ~= matches a single id within that list. */
.submissions-table[data-col-hide~=title] th[data-col=title],
.submissions-table[data-col-hide~=title] td[data-col=title],
.submissions-table[data-col-hide~=type] th[data-col=type],
.submissions-table[data-col-hide~=type] td[data-col=type],
.submissions-table[data-col-hide~=status] th[data-col=status],
.submissions-table[data-col-hide~=status] td[data-col=status],
.submissions-table[data-col-hide~=priority] th[data-col=priority],
.submissions-table[data-col-hide~=priority] td[data-col=priority],
.submissions-table[data-col-hide~=reporter] th[data-col=reporter],
.submissions-table[data-col-hide~=reporter] td[data-col=reporter],
.submissions-table[data-col-hide~=account] th[data-col=account],
.submissions-table[data-col-hide~=account] td[data-col=account],
.submissions-table[data-col-hide~=customer] th[data-col=customer],
.submissions-table[data-col-hide~=customer] td[data-col=customer],
.submissions-table[data-col-hide~=time] th[data-col=time],
.submissions-table[data-col-hide~=time] td[data-col=time] {
  display: none;
}

.submissions-table .request-cell {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.submissions-table .request-title {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.submissions-table .request-url {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

/* Ticket ID chip under the row title (e.g. "WL-1234"). Same colour as the
   detail-panel-eyebrow .key so the identifier reads consistently between
   sheet, kanban and details. */
.submissions-table .request-key {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--brand-primary);
}

.submissions-table .reporter-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.submissions-table .reporter-name {
  color: var(--text-primary);
  font-weight: 600;
}

.submissions-table .reporter-email {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.submissions-table .reporter-internal {
  display: inline-block;
  margin-left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  vertical-align: middle;
}

.submissions-table .submitted-cell {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

.type-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  display: inline-block;
}

.type-pill.type-bug {
  color: var(--status-error);
  border-color: rgba(211, 47, 47, 0.3);
  background: var(--status-error-light);
}

.type-pill.type-suggestion {
  color: var(--accent-color);
  border-color: rgba(59, 130, 246, 0.3);
  background: var(--accent-bg);
}

.type-pill.type-question {
  color: #6a1b9a;
  border-color: rgba(106, 27, 154, 0.3);
  background: #f3e5f5;
}

.type-pill.type-dev {
  color: #00695c;
  border-color: rgba(0, 105, 92, 0.3);
  background: #e0f2f1;
}

.type-pill.type-preview {
  color: #b25e09;
  border-color: rgba(217, 119, 6, 0.3);
  background: #fff7ed;
}

.resolution-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  display: inline-block;
}

.resolution-pill.res-created {
  color: var(--status-success);
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--status-success-light);
}

.resolution-pill.res-commented {
  color: var(--accent-color);
  border-color: rgba(59, 130, 246, 0.3);
  background: var(--accent-bg);
}

.resolution-pill.res-pending {
  color: var(--status-warning);
  border-color: rgba(255, 153, 0, 0.3);
  background: var(--status-warning-light);
}

.resolution-pill.res-abandoned {
  color: var(--text-tertiary);
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

/* Kanban view */
.kanban-board {
  /* Flex (not grid) so individual columns can have their own width — the
     minimize toggle below shrinks a single column to ~160px while siblings
     keep their normal flex basis. Wide-viewport sharing happens via
     flex: 1 on the column rule. */
  display: flex;
  gap: 14px;
  margin-top: 28px;
  overflow-x: auto;
}

/* ── Swimlanes (Group by wave) ──────────────────────────────────────────
   When grouped, the board stacks swimlane sections vertically; each
   section's .kanban-swimlane-cols is the horizontal column row that the
   .kanban-board normally is. Each lane = one Phase/wave (plus a trailing
   "Unscheduled" lane). data-phase on .kanban-column-list carries the lane
   key for cross-lane drag-drop. */
.kanban-board.is-grouped {
  flex-direction: column;
  gap: 22px;
  overflow-x: hidden;
}

.kanban-swimlane {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-primary);
  padding: 10px 12px 14px;
}

.kanban-swimlane-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 4px 12px;
}

.kanban-swimlane-title {
  font-weight: 650;
  font-size: 15px;
}

.kanban-swimlane-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.kanban-swimlane-due {
  color: var(--status-warn, #b26a00);
}

.kanban-swimlane-cols {
  display: flex;
  gap: 14px;
  overflow-x: auto;
}

/* Lanes provide their own framing, so columns inside one don't need to
   stretch to viewport height the way the ungrouped board's do. */
.kanban-swimlane .kanban-column {
  min-height: 140px;
}

.kanban-column {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 350px;
  min-width: 350px;
  /* Stretch columns so a sparse board still feels like a board, but keep the
     bottoms inside the fold. 480px ≈ topbar + page header + toolbar + filters
     + board margin above the kanban; max() floors at 280px so short viewports
     still get a usable drop target. */
  min-height: max(280px, 100vh - 480px);
}

.kanban-column-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  border-radius: 10px 10px 0 0;
}

.kanban-column-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.kanban-column-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-primary);
  color: var(--text-tertiary);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.kanban-done-window {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px 18px 2px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Tiny chevron — keeps the pill compact without losing the dropdown hint. */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(-45deg, transparent 50%, var(--text-tertiary) 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

.kanban-done-window:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.kanban-done-window:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-bg);
}

.kanban-column[data-col=backlog] .kanban-column-title {
  color: var(--status-info);
}

.kanban-column[data-col=selected] .kanban-column-title {
  color: var(--status-info);
}

.kanban-column[data-col=progress] .kanban-column-title {
  color: #f57c00;
}

.kanban-column[data-col=code] .kanban-column-title {
  color: #4527a0;
}

.kanban-column[data-col=review] .kanban-column-title {
  color: #6a1b9a;
}

.kanban-column[data-col=done] .kanban-column-title {
  color: var(--status-success);
}

.kanban-column[data-col=void] .kanban-column-title {
  color: var(--text-tertiary);
}

.kanban-column[data-col=other] .kanban-column-title {
  color: var(--text-tertiary);
}

.kanban-column-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.kanban-column-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 16px 8px;
}

.kanban-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 150ms, box-shadow 150ms;
}

.kanban-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 2px 6px var(--shadow-sm);
}

.kanban-card[draggable=true] {
  cursor: grab;
}

.kanban-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.kanban-card.is-error {
  border-color: var(--status-error, #d33);
  box-shadow: 0 0 0 2px rgba(211, 51, 51, 0.2);
}

.kanban-drop-indicator {
  height: 3px;
  background: var(--accent-color, #09f);
  border-radius: 2px;
  margin: 2px 0;
  pointer-events: none;
}

/* Spreadsheet drag handles. */
#board-tbody tr[draggable=true] {
  cursor: grab;
}

#board-tbody tr.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

#board-tbody tr.sheet-drop-row {
  height: 3px;
  pointer-events: none;
}

#board-tbody tr.sheet-drop-row td {
  padding: 0;
  background: var(--accent-color, #09f);
  border: none;
}

.kanban-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* Internal-only ticket: amber accent on the card + a pill in the top row.
   Internal moderators see this; externals never get the row. */
.kanban-card.is-internal {
  border-left: 3px solid var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 4%, var(--card-bg, #fff));
}

.kanban-card-internal,
.detail-title-internal {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning, #92400e);
  background: color-mix(in srgb, var(--color-warning, #d97706) 18%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}

.detail-title-internal {
  font-size: 11px;
  margin-left: 10px;
  vertical-align: middle;
}

.detail-title-internal-btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-subtle, #e2e8f0);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

.detail-title-internal-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Ticket ID chip under the kanban card title (e.g. "WL-1234"). Quietly
   monospaced so it reads as an identifier without competing with the
   title. Hidden via JS guard when the row isn't a ticket. */
.kanban-card-key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
  align-self: flex-start;
}

/* Cross-epic landing only — single-board cards don't render this. */
.kanban-card-epic {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-epic.is-unassigned {
  color: var(--text-tertiary);
  background: transparent;
  border: 1px dashed var(--border-subtle, rgba(127, 127, 127, 0.4));
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.kanban-card-reporter {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 4px;
}

.kanban-card-reporter::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.kanban-card-reporter.is-internal::before {
  background: var(--brand-primary);
}

@media (max-width: 1100px) {
  .kanban-column {
    flex: 1 1 200px;
    min-width: 200px;
  }
}
@media (max-width: 720px) {
  /* On phones the kanban is unusable as a stack — convert to a horizontal
     scroll-snap row, one column per swipe. Each column ~ 88vw so the next
     one peeks in to indicate scrollability. The header / detail panel /
     toolbar still stack so the rest of the page reads correctly. */
  .kanban-board {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .kanban-column {
    scroll-snap-align: start;
    flex: 0 0 88vw;
    min-width: 88vw;
    min-height: max(280px, 100vh - 360px);
  }
  /* Focused-mode takes the whole viewport on phones — drop the snap. */
  .kanban-board.is-focused {
    display: block;
    overflow-x: hidden;
    scroll-snap-type: none;
  }
  .kanban-board.is-focused .kanban-column.is-focused .kanban-column-list {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  /* Cards slightly tighter on small screens. */
  .kanban-card {
    font-size: 13px;
  }
  /* Filter pills wrap onto multiple rows — already do, but make sure the
     bar doesn't become a horizontal scroller. */
  .board-filters {
    flex-wrap: wrap;
  }
  .submissions-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  /* Bulk actions bar is sticky bottom; on mobile keep it inset from edges. */
  .bulk-actions-bar {
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    justify-content: center;
  }
}
/* Spreadsheet on narrow viewports — let the table scroll horizontally
   inside its container so the page itself doesn't do an awkward shift. */
@media (max-width: 900px) {
  .page-pane[data-pane=board] .submissions-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .page-pane[data-pane=board] .submissions-table thead,
  .page-pane[data-pane=board] .submissions-table tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }
}
/* ─── Page-level tabs on /epic/:id ─── */
.page-tabs {
  display: flex;
  gap: 0;
  padding: 0 40px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
}

.page-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 18px;
  margin-bottom: -1px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-tab:hover {
  color: var(--text-primary);
}

.page-tab.is-active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.page-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.page-tab.is-active .page-tab-count {
  background: var(--brand-bg);
  color: var(--brand-primary);
  border-color: rgba(0, 153, 255, 0.3);
}

.page-pane {
  display: none;
}

.page-pane.is-active {
  display: block;
}

.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.board-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 18px;
}

.board-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.board-toggle input {
  margin: 0;
  cursor: pointer;
}

.board-toggle:hover span {
  color: var(--text-secondary);
}

/* Board filters row — search + quick-toggle pills under the main toolbar */
/* ─── Inline search actions: clear, voice (mic), AI (brain) ─── */
/* Sit inside the search field on the right; the input reserves padding so its
   text never runs under them (see .board-search-wrap input below). */
.board-search-actions {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.board-ai-mic,
.board-ai-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  transition: background 150ms, color 150ms, box-shadow 150ms;
}

.board-ai-mic:hover,
.board-ai-go:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.board-ai-mic.is-recording {
  color: #fff;
  background: var(--status-error);
  animation: board-ai-pulse 1.2s ease-in-out infinite;
}

@keyframes board-ai-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0);
  }
}
/* AI filter applied: the brain lights up filled-accent with a soft halo, so
   the active state is unmistakable even though it's just an icon. */
.board-ai-go.is-active {
  color: #fff;
  background: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-shadow);
}

.board-ai-go.is-active:hover {
  background: var(--accent-color);
  color: #fff;
  filter: brightness(1.08);
}

.board-ai-go:disabled {
  cursor: default;
  opacity: 0.6;
}

.board-ai-go.is-loading {
  position: relative;
}

.board-ai-go.is-loading svg {
  visibility: hidden;
}

.board-ai-go.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-shadow);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: board-ai-spin 0.6s linear infinite;
}

@keyframes board-ai-spin {
  to {
    transform: rotate(360deg);
  }
}
/* AI result chip — its own row below the filters. */
.board-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 40px 12px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--accent-color);
  border-radius: 999px;
  background: var(--accent-bg);
  font-size: 12px;
  color: var(--text-secondary);
  max-width: calc(100% - 80px);
}

.board-ai-chip[hidden] {
  display: none;
}

.board-ai-chip.is-error {
  border-color: var(--status-error);
  background: transparent;
  color: var(--status-error);
}

.board-ai-chip-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.board-ai-chip.is-error .board-ai-chip-icon {
  display: none;
}

.board-ai-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-ai-chip-clear {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
}

.board-ai-chip-clear:hover {
  opacity: 1;
}

.board-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 40px 14px;
  flex-wrap: wrap;
}

.board-search-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 280px;
}

.board-search-wrap input[type=search] {
  width: 100%;
  /* Right padding reserves room for the inline actions (clear + mic + brain). */
  padding: 6px 92px 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.board-search-wrap input[type=search]:focus {
  outline: none;
  border-color: var(--status-info);
}

/* AI filter active: tint the whole field + accent placeholder so the state is
   unmistakable (a second cue alongside the lit brain icon and the chip). */
.board-search-wrap.ai-active input[type=search] {
  border-color: var(--accent-color);
  background: var(--accent-bg);
}

.board-search-wrap.ai-active input[type=search]::placeholder {
  color: var(--accent-color);
  opacity: 0.85;
}

/* Now an inline flex item within .board-search-actions (no longer absolute). */
.board-search-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.board-search-clear:hover {
  color: var(--text-primary);
}

.board-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.board-pill:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.board-pill.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}

.board-pill .pill-count {
  font-size: 10px;
  opacity: 0.7;
}

.board-pill.is-active .pill-count {
  opacity: 0.85;
}

.board-pill-dd .dd-caret {
  font-size: 9px;
  opacity: 0.7;
  margin-left: 2px;
}

.board-pill-dd .dd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 10px;
  line-height: 1;
}

.board-pill-dd.is-active .dd-count {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.board-pill-dd .dd-count[hidden] {
  display: none;
}

.board-filters-clear {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: auto;
}

.board-filters-clear:hover {
  color: var(--status-error);
}

.page-pane[data-pane=board] .submissions-table {
  width: calc(100% - 80px);
  margin: 0 40px;
}

.page-pane[data-pane=board] .kanban-board {
  margin: 0 40px;
  padding-bottom: 36px;
}

.page-pane[data-pane=board] .view-pane {
  padding: 0;
}

/* ─── "Mine" accent — tickets assigned to or created by the viewer ─── */
.kanban-card.is-mine {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-bg);
}

/* Sheet/list rows: faint tint + a left edge bar on the first cell. */
#board-tbody tr.is-mine {
  background: var(--brand-bg);
}

#board-tbody tr.is-mine td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

.kanban-card-reports {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--brand-bg);
  border-radius: 6px;
  margin-top: 2px;
}

.reports-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--brand-primary);
  background: var(--bg-primary);
}

.reports-recent {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.kanban-card-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

/* ─── Detail sidebar ─── */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity 200ms ease;
}

.detail-overlay.is-open {
  opacity: 1;
}

.detail-overlay[hidden] {
  display: block;
  pointer-events: none;
  opacity: 0;
}

.detail-overlay.is-open[hidden] {
  display: block;
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Scale with the viewport: ~3/4 of very large screens, never below the
     old 1400px cap on mid-size desktops, 92vw once the screen is smaller
     than that. */
  width: min(92vw, max(1400px, 74vw));
  max-width: calc(100vw - 80px);
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-panel.is-open {
  transform: translateX(0);
}

.detail-panel[hidden] {
  display: flex;
  pointer-events: none;
}

.detail-panel.is-open[hidden] {
  display: flex;
  pointer-events: auto;
}

.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.detail-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-panel-eyebrow .key {
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.06em;
  font-size: 11.5px;
  text-decoration: none;
}

.detail-panel-eyebrow a.key:hover {
  text-decoration: underline;
}

.detail-panel-eyebrow .key.is-pending {
  color: var(--status-error);
}

.detail-panel-eyebrow .detail-eyebrow-reporter {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  color: var(--text-secondary);
}

.detail-panel-eyebrow .detail-eyebrow-reporter strong {
  color: var(--text-primary);
  font-weight: 600;
}

.detail-panel-eyebrow .detail-eyebrow-created {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.detail-close {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.detail-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.detail-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.detail-action:hover {
  background: #f0f7ff;
  color: #0a66c2;
  border-color: #b6d4f3;
}

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

.detail-action--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}

.detail-action.is-watching {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.detail-action.is-watching:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  opacity: 0.9;
}

/* ─── Detail header: consolidated "Actions" (kebab) dropdown ─── */
.detail-actions-wrap {
  position: relative;
  display: inline-flex;
}

.detail-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
}

.detail-actions-menu[hidden] {
  display: none;
}

.detail-actions-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.detail-actions-menu button:hover {
  background: var(--bg-secondary);
}

.detail-actions-menu button i {
  color: var(--text-tertiary);
  width: 15px;
  text-align: center;
}

/* ─── Comment reactions ─── */
.detail-comment-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f5f7;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}

.reaction-pill:hover {
  background: #eaeef2;
}

.reaction-pill.is-mine {
  background: #e8f1fb;
  border-color: #b6d4f3;
  color: #0a66c2;
}

.reaction-emoji {
  font-size: 13px;
}

.reaction-count {
  font-weight: 600;
  color: inherit;
  font-size: 11px;
}

.reaction-add {
  position: relative;
}

.reaction-add-btn {
  background: transparent;
  border: 1px dashed #d0d4d9;
  color: #888;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  cursor: pointer;
}

.reaction-add-btn:hover {
  background: #f3f5f7;
  color: #444;
  border-color: #b6b9be;
}

.reaction-palette {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.reaction-palette[hidden] {
  display: none;
}

.reaction-pick {
  background: transparent;
  border: none;
  font-size: 18px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.reaction-pick:hover {
  background: #f0f7ff;
}

.detail-preview-popover {
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 32, 0.12);
  padding: 12px;
  width: 320px;
}

.detail-preview-popover label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.detail-preview-row {
  display: flex;
  gap: 6px;
}

.detail-preview-row input {
  flex: 1;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
}

.detail-preview-row input:focus {
  border-color: var(--accent-color, #09f);
}

.detail-preview-row button {
  padding: 6px 12px;
  background: var(--accent-color, #09f);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.detail-preview-row button:disabled {
  opacity: 0.6;
  cursor: default;
}

.detail-preview-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.detail-preview-status.is-success {
  color: #2a7d2a;
}

.detail-preview-status.is-error {
  color: var(--status-error, #d33);
}

.detail-preview-status.is-warning {
  color: var(--status-warning);
}

.detail-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 32px;
}

.detail-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--text-primary);
}

.detail-title.is-editable {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-title.is-editable .ticket-edit-icon,
.detail-prose.is-editable .ticket-edit-icon {
  opacity: 0.55;
  transition: opacity 120ms, background 120ms, color 120ms;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-title.is-editable:hover .ticket-edit-icon,
.detail-prose.is-editable:hover .ticket-edit-icon {
  opacity: 1;
}

.detail-title.is-editable .ticket-edit-icon:hover,
.detail-prose.is-editable .ticket-edit-icon:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  opacity: 1;
}

.detail-prose.is-editable {
  position: relative;
  padding-right: 28px;
}

.detail-prose.is-editable .ticket-edit-icon {
  position: absolute;
  top: 0;
  right: 0;
}

.detail-title-input {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.detail-description-input,
.detail-comment-edit-textarea {
  width: 100%;
  min-height: 120px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 8px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: vertical;
  box-sizing: border-box;
}

.detail-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.detail-edit-actions button {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}

.detail-edit-actions .detail-edit-save,
.detail-edit-actions .detail-comment-edit-save {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.detail-edit-error {
  color: var(--status-error);
  font-size: 12px;
  margin-top: 6px;
}

.detail-comment-edited {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.detail-comment-edit-btn,
.detail-comment-delete-btn,
.detail-comment-internal-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-comment-edit-btn:hover,
.detail-comment-internal-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.detail-comment-delete-btn:hover {
  background: var(--bg-secondary);
  color: var(--color-danger, #c92a2a);
}

/* Internal-only comment: amber left rail + faint amber tint so internal
   moderators can scan a thread and spot which rows externals don't see. */
.detail-comment.is-internal {
  border-left: 3px solid var(--color-warning, #d97706);
  background: color-mix(in srgb, var(--color-warning, #d97706) 6%, transparent);
  padding-left: 10px;
}

.detail-comment-internal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning, #92400e);
  background: color-mix(in srgb, var(--color-warning, #d97706) 18%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

.detail-compose-internal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
}

.detail-compose-internal input {
  margin: 0;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.detail-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-color);
}

.detail-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.detail-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.detail-prose {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-prose.is-empty {
  color: var(--text-muted);
  font-style: italic;
}

.detail-url {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--brand-primary);
  text-decoration: none;
  word-break: break-all;
  background: var(--brand-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

.detail-url:hover {
  text-decoration: underline;
}

/* Reproduce affordance — replaces the bare URL anchor. Same data, just
   framed as an action so testers know what it's for. */
.detail-repro {
  display: inline-grid;
  grid-template-columns: 16px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-primary);
  max-width: 100%;
  transition: border-color 120ms, background 120ms;
}

.detail-repro:hover {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
}

.detail-repro svg {
  grid-row: 1/span 2;
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
}

.detail-repro-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-repro-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  word-break: break-all;
  max-width: 520px;
}

/* Linked-Zendesk badge — sibling of .detail-repro, same affordance shape. */
.detail-zendesk {
  display: inline-grid;
  grid-template-columns: 16px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid rgba(3, 131, 166, 0.25);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  background: #f4fafc;
  max-width: 100%;
  transition: border-color 120ms, background 120ms;
}

.detail-zendesk:hover {
  border-color: #03839a;
  background: #eaf6f9;
}

.detail-zendesk svg {
  grid-row: 1/span 2;
  width: 14px;
  height: 14px;
  color: #03839a;
}

.detail-zendesk-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-zendesk-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.detail-console {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-secondary);
}

/* Reports list inside detail */
.detail-reports {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-report {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-primary);
  container-type: inline-size;
}

.detail-report-main {
  min-width: 0;
}

.detail-report-media {
  min-width: 0;
}

/* Wide card layout: when the report has room for two columns, split text
   and media side-by-side and let the screenshot show uncropped. Foldable
   sections (console / network / sentry / tech) drop below, spanning both
   columns. Activated by container width — not viewport width — so the
   layout adapts whenever the detail panel itself is wide. */
@container (min-width: 720px) {
  .detail-report.has-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 20px;
    row-gap: 0;
  }
  .detail-report.has-media > .detail-report-main {
    grid-column: 1;
    grid-row: 1;
  }
  .detail-report.has-media > .detail-report-media {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .detail-report.has-media > .detail-report-foldable {
    grid-column: 1/-1;
  }
  .detail-report-media .detail-report-shot {
    margin-top: 0;
  }
  .detail-report-media .detail-report-shot img {
    max-height: 480px;
    object-fit: contain;
    background: var(--bg-secondary);
  }
  .detail-report-media .detail-report-video {
    margin-top: 0;
    max-width: 100%;
    max-height: 480px;
  }
  .detail-report-media .detail-report-attachments {
    margin-top: 12px;
  }
}
.detail-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.detail-report-reporter {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.detail-report-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.detail-report-name .reporter-internal {
  display: inline-block;
  margin-left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  vertical-align: middle;
}

.detail-report-email {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.detail-report-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Click affordance on list rows / kanban cards */
.submissions-table tbody tr {
  cursor: pointer;
}

.submissions-table tbody tr:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.kanban-card {
  cursor: pointer;
}

@media (max-width: 720px) {
  .detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
}
/* ─── Detail panel: resolutions ───
   Renders Ticket_Resolution rows as their own section above Comments. The
   section hides itself entirely when the ticket has no resolution history. */
.detail-resolutions-loading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 12px 0;
}

.detail-resolutions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-resolution {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent, #09f);
  border-radius: 8px;
  padding: 12px 14px;
}

.detail-resolution.is-reopen {
  border-left-color: #d97706;
}

.detail-resolution-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.detail-resolution-kind {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.detail-resolution-source {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.detail-resolution-transition {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.detail-resolution-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 6px;
}

.detail-resolution-tests-label {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: 8px;
  margin-bottom: 4px;
}

.detail-resolution-tests {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.mr-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(252, 109, 38, 0.1);
  color: #c1440e;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 120ms, border-color 120ms;
}

.mr-ref::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.5 1a3.5 3.5 0 0 0-1.215 6.783c-.052 1.094-.331 1.756-.83 2.246-.5.491-1.234.748-2.231.948-.732.147-1.591.272-2.514.413a1.5 1.5 0 0 1-.21-2.945 3.5 3.5 0 1 0-.6.085 3 3 0 0 0 .415 5.93c.954-.145 1.83-.272 2.59-.424 1.06-.213 1.99-.5 2.674-1.172.685-.673 1.005-1.557 1.06-2.66A3.5 3.5 0 0 0 11.5 1Zm-9 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.5 1a3.5 3.5 0 0 0-1.215 6.783c-.052 1.094-.331 1.756-.83 2.246-.5.491-1.234.748-2.231.948-.732.147-1.591.272-2.514.413a1.5 1.5 0 0 1-.21-2.945 3.5 3.5 0 1 0-.6.085 3 3 0 0 0 .415 5.93c.954-.145 1.83-.272 2.59-.424 1.06-.213 1.99-.5 2.674-1.172.685-.673 1.005-1.557 1.06-2.66A3.5 3.5 0 0 0 11.5 1Zm-9 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/></svg>") center/contain no-repeat;
  transform: translateY(0.08em);
}

.mr-ref:hover,
.mr-ref:focus-visible {
  background: rgba(252, 109, 38, 0.18);
  border-color: #fc6d26;
  text-decoration: none;
}

.zd-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(3, 54, 60, 0.08);
  color: #03363d;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 120ms, border-color 120ms;
}

.zd-ref::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h5L2 7.5V2zm12 0v5.5L9 2h5zM2 14V8.5L7 14H2zm12 0H9l5-5.5V14z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h5L2 7.5V2zm12 0v5.5L9 2h5zM2 14V8.5L7 14H2zm12 0H9l5-5.5V14z'/></svg>") center/contain no-repeat;
  transform: translateY(0.08em);
}

.zd-ref:hover,
.zd-ref:focus-visible {
  background: rgba(3, 54, 60, 0.16);
  border-color: #03363d;
  text-decoration: none;
}

.auto-link {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.auto-link:hover,
.auto-link:focus-visible {
  text-decoration-thickness: 2px;
}

.detail-resolution-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.detail-resolution-author {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}

.detail-resolution-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

/* ─── Detail panel: comments ─── */
.detail-comments-loading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 12px 0;
}

.detail-comments {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-comment {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 14px;
}

.detail-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.detail-comment-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.detail-comment-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.detail-comment-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-no-comments {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Threaded replies — indent under their parent with a soft thread line. */
.detail-comment-replies {
  margin-top: 8px;
  margin-left: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-comment.is-reply {
  background: var(--bg-primary);
  padding: 10px 12px;
}

.detail-comment-actions {
  margin-top: 8px;
}

.detail-comment-reply-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
}

.detail-comment-reply-btn:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.detail-comment-reply-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.detail-reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.detail-reply-cancel,
.detail-reply-submit {
  font-family: var(--font-display);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.detail-reply-cancel {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.detail-reply-submit {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.detail-reply-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.detail-reply-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger, #d93025);
}

.detail-compose {
  margin-top: 16px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-compose textarea {
  font-family: var(--font-body);
  font-size: 13px;
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  resize: vertical;
}

.detail-compose textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.detail-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-compose-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.detail-compose button {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 150ms;
}

.detail-compose button:hover {
  background: #0a8de6;
}

.detail-compose button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.detail-compose-error {
  font-size: 12px;
  color: var(--status-error);
  background: var(--status-error-light);
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--status-error);
}

/* ─── Comment composer attachments ─── */
/* Secondary "Attach" affordance — a label wrapping a hidden file input, so it
   sits beside the primary "Post comment" button without inheriting its
   brand-primary fill (that rule targets `button`, not `label`). */
.detail-compose-attach-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.detail-compose-attach-btn:hover {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}

.detail-compose-attach-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-compose-attach-items:not(:empty) {
  margin-top: 4px;
}

.detail-compose-attach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
}

.detail-compose-attach-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-compose-attach-size {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.detail-compose-attach-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.detail-compose-attach-remove:hover {
  color: var(--status-error);
}

/* Attachments rendered under a posted comment reuse the report-attach grid. */
.detail-comment-attachments {
  margin-top: 8px;
}

/* ─── Rich-text editor ─── */
.rt-editor {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.rt-editor .rt-toolbar {
  display: flex;
  gap: 1px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 6px 6px 0 0;
  /* Collapsed by default — only reveal when the editor has focus or content
   * (or in fullscreen, where the toolbar is the primary chrome). */
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  overflow: hidden;
  transition: max-height 160ms ease, padding 160ms ease, border-bottom-width 160ms ease;
}

.rt-editor:focus-within .rt-toolbar,
.rt-editor.is-fullscreen .rt-toolbar,
.rt-editor:has(.rt-surface:not(:empty)) .rt-toolbar {
  max-height: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom-width: 1px;
}

/* High-specificity reset to outweigh global `.detail-compose button` rule. */
.rt-editor .rt-toolbar .rt-tool {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.rt-editor .rt-toolbar .rt-tool:hover {
  background: var(--bg-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.rt-editor .rt-toolbar .rt-tool:active {
  background: var(--bg-tertiary);
}

.rt-editor .rt-toolbar .rt-tool i {
  font-size: 12px;
}

.rt-editor .rt-surface {
  min-height: 80px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
  line-height: 1.45;
  transition: min-height 160ms ease;
}

/* Grow the surface when focused or when it has any content — easier to
 * compose a longer comment without the cramped two-line feel. */
.rt-editor:focus-within .rt-surface,
.rt-editor .rt-surface:not(:empty) {
  min-height: 200px;
}

.rt-editor .rt-surface[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
}

.rt-editor .rt-surface img {
  max-width: 360px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 32, 0.04);
  cursor: zoom-in;
  display: inline-block;
  vertical-align: top;
}

.rt-editor.is-fullscreen .rt-surface img {
  max-width: 100%;
  max-height: 70vh;
}

/* Same constraints + click-to-lightbox cursor on rendered bodies. */
.detail-comment-body img {
  max-width: 360px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: zoom-in;
  display: inline-block;
  vertical-align: top;
}

.rt-editor .rt-surface ul, .rt-editor .rt-surface ol {
  padding-left: 24px;
  margin: 4px 0;
}

.rt-editor .rt-surface p {
  margin: 4px 0;
}

.rt-editor .rt-toolbar .rt-spacer {
  flex: 1;
}

.rt-editor .rt-toolbar .rt-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border-color);
  margin: 4px 4px;
}

/* Fullscreen mode — shell is moved into a fixed overlay and grown. */
.rt-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.rt-fullscreen-card {
  width: min(1100px, 100%);
  height: min(85vh, 100%);
  background: var(--bg-primary);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  overflow: hidden;
}

.rt-editor.is-fullscreen {
  border: none;
  border-radius: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rt-editor.is-fullscreen .rt-toolbar {
  border-radius: 0;
}

.rt-editor.is-fullscreen .rt-surface {
  flex: 1;
  overflow-y: auto;
  font-size: 15px;
  padding: 24px 32px;
}

/* ─── @-mention autocomplete + rendered mentions ─── */
.detail-compose {
  position: relative;
}

.mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
  margin-top: 4px;
}

.mention-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

.mention-item:hover, .mention-item.is-active {
  background: #f0f7ff;
}

.mention-name {
  font-weight: 600;
  color: #222;
}

.mention-email {
  color: #888;
  font-size: 12px;
}

/* Synthetic "Mention <email>" row — separated from name matches by a top
 * border + envelope icon so it reads as a distinct action.
 * Originally landed in !213; restored here after d36e4f1's epic-edit merge
 * silently dropped these three rules. */
.mention-item--email {
  border-top: 1px solid var(--border, #e0e0e0);
  color: #444;
  font-weight: 500;
}

.mention-item--email .fa-envelope {
  margin-right: 4px;
  opacity: 0.7;
}

.mention-item--email strong {
  font-weight: 600;
  color: #0a66c2;
}

/* Non-interactive hint footer at the bottom of the dropdown — surfaces the
 * "you can type a full email" affordance, which isn't obvious from the
 * name-only matches that show when the dropdown first opens. */
.mention-hint {
  border-top: 1px solid var(--border, #e0e0e0);
  padding: 6px 10px;
  font-size: 11px;
  color: #888;
  font-style: italic;
  cursor: default;
  user-select: none;
}

.mention {
  display: inline-block;
  background: #e8f1fb;
  color: #0a66c2;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}

/* ─── Capture handoff picker ─── */
.picker-page {
  padding: 32px 40px 60px;
  max-width: 720px;
  margin: 0 auto;
}

.picker-head {
  margin-bottom: 24px;
}

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

.picker-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 150ms, background 150ms, transform 100ms;
}

.picker-card:hover {
  border-color: var(--brand-primary);
  background: var(--brand-bg);
  transform: translateX(2px);
}

.picker-card-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
}

.picker-card-name {
  font-weight: 600;
}

.picker-card-arrow {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  transition: color 150ms;
}

.picker-card:hover .picker-card-arrow {
  color: var(--brand-primary);
}

/* ============================================================
   PREFILL BANNER
   ============================================================ */
.prefill-banner {
  position: relative;
  margin: 0 0 28px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-shadow);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

/* Recording-handoff hint — shown when the user arrives at the bug-file
   form via the extension's record-video flow. Tells them where to find
   the .webm and how to attach it. Three-column layout from the start
   so the box shape stays consistent across upload-in-flight and ready
   states. The preview cell shows a loading skeleton during upload, swaps
   to the playable thumb when wireBannerVideoPreview fires. */
.recording-handoff {
  display: grid;
  grid-template-columns: 28px 1fr 120px;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(255, 191, 0, 0.08);
  border: 1px solid rgba(255, 191, 0, 0.35);
  border-radius: 10px;
}

.recording-handoff-icon {
  color: var(--status-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recording-handoff-icon svg {
  width: 18px;
  height: 18px;
}

.recording-handoff-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.recording-handoff-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.recording-handoff-sub code {
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Banner state after the upload lands and the file is attached. Same
   layout, but recolored to green so it visually acks completion. */
.recording-handoff.is-attached {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}

.recording-handoff.is-attached .recording-handoff-icon {
  color: var(--status-success);
}

.recording-handoff-preview {
  position: relative;
  width: 120px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* Loading skeleton while the upload is still in flight. */
.recording-handoff-preview.is-loading {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-hover));
  border-color: var(--border-color);
}

.recording-handoff-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-color);
  border-top-color: var(--text-secondary);
  border-radius: 50%;
  animation: handoff-spin 700ms linear infinite;
}

@keyframes handoff-spin {
  to {
    transform: rotate(360deg);
  }
}
/* When wired to a file, the preview becomes interactive. */
.recording-handoff-preview[role=button] {
  cursor: pointer;
}

.recording-handoff-preview[role=button]:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.recording-handoff-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the thumb area; no letterboxing */
  display: block;
  background: #000;
}

.recording-handoff-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  transition: background 120ms;
}

.recording-handoff-play svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.recording-handoff-preview[role=button]:hover .recording-handoff-play {
  background: rgba(0, 0, 0, 0.08);
}

/* sr-only for the loading-state label */
.recording-handoff .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Additional attachments list ─── */
.attach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attach-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attach-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 13px;
}

/* Thumb cell — fixed 56×40 so the row height stays consistent across
   image/video/generic. Images and videos render cover-cropped previews;
   generic types get a centered paper icon on a tinted background. */
.attach-thumb {
  position: relative;
  width: 56px;
  height: 40px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  background: var(--bg-tertiary, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.attach-thumb.is-generic {
  cursor: default;
  color: var(--text-tertiary);
}

.attach-thumb.is-generic svg {
  width: 18px;
  height: 18px;
}

.attach-thumb img, .attach-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.attach-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  transition: background 120ms;
  pointer-events: none;
}

.attach-thumb-play svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.attach-thumb:hover {
  border-color: var(--border-color);
}

.attach-thumb:hover .attach-thumb-play {
  background: rgba(0, 0, 0, 0.08);
}

.attach-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.attach-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-size {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.attach-remove {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.attach-remove:hover {
  color: var(--status-error, #b91c1c);
  background: rgba(0, 0, 0, 0.05);
}

.attach-add {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.attach-add:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.attach-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--status-error, #b91c1c);
}

/* ─── Video lightbox ─── */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px;
}

.video-lightbox.is-open {
  display: flex;
}

.video-lightbox-video {
  max-width: 100%;
  max-height: 90vh;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-lightbox-bar {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-lightbox-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 7px 12px;
  border-radius: 6px;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 120ms;
}

.video-lightbox-download:hover {
  background: rgba(255, 255, 255, 0.22);
}

.video-lightbox-download svg {
  width: 14px;
  height: 14px;
}

.video-lightbox-close {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}

.video-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.prefill-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-primary);
}

.prefill-banner-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 22px;
  cursor: pointer;
  user-select: none;
}

.prefill-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.4);
  animation: prefill-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 2;
  flex-shrink: 0;
}

@keyframes prefill-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 153, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 153, 255, 0);
  }
}
.prefill-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.prefill-eyebrow .when {
  color: var(--text-tertiary);
  font-weight: 500;
}

.prefill-summary {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.prefill-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--bg-primary);
  border: 1px solid rgba(0, 153, 255, 0.2);
  color: var(--text-secondary);
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.prefill-chip .glyph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--status-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.prefill-chip .glyph::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 2.5px;
  border: 1.2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.prefill-chip.has-info .glyph {
  background: var(--status-info);
}

.prefill-chip.has-info .glyph::after {
  content: "i";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  border: 0;
  position: static;
  transform: none;
  width: auto;
  height: auto;
  line-height: 1;
}

.prefill-chip.has-warn .glyph {
  background: var(--status-warning);
}

.prefill-chip.has-warn .glyph::after {
  content: "!";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border: 0;
  position: static;
  transform: none;
  width: auto;
  height: auto;
  line-height: 1;
}

.prefill-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-primary);
  border: 1px solid rgba(0, 153, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--brand-primary);
  font-size: 12px;
  transition: background 150ms, border-color 150ms;
}

.prefill-banner-head:hover .prefill-toggle {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}

.prefill-banner.is-open .prefill-toggle {
  transform: rotate(180deg);
}

.prefill-body {
  border-top: 1px solid rgba(0, 153, 255, 0.2);
  background: var(--bg-primary);
  padding: 16px 22px 20px;
  display: none;
}

.prefill-banner.is-open .prefill-body {
  display: block;
}

.prefill-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-light);
}

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

.prefill-detail-row:first-child {
  padding-top: 0;
}

.prefill-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 2px;
}

.prefill-detail-value {
  font-size: 13px;
  line-height: 1.5;
}

.prefill-url {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--brand-primary);
  background: var(--brand-bg);
  padding: 3px 8px;
  border-radius: 4px;
  word-break: break-all;
  text-decoration: none;
}

.prefill-url:hover {
  text-decoration: underline;
}

.prefill-thumb {
  width: 72px;
  height: 48px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background: #ddd;
  background-image: linear-gradient(135deg, #d8e6f4 0%, #c5d8ed 50%, #b8cee3 100%);
  background-size: cover;
  background-position: center;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.prefill-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25));
}

.prefill-thumb-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: top;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

.prefill-thumb-meta strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prefill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
}

.prefill-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  border-left: 2px solid var(--text-muted);
  word-break: break-word;
}

.prefill-list li.is-error {
  border-left-color: var(--status-error);
  color: var(--status-error);
  background: var(--status-error-light);
}

.prefill-list li.is-warn {
  border-left-color: var(--status-warning);
  color: var(--status-warning);
  background: var(--status-warning-light);
}

.prefill-list li code {
  color: var(--brand-primary);
  font-family: inherit;
  font-weight: 600;
}

.prefill-context {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 12.5px;
}

.prefill-context dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.prefill-context dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11.5px;
  word-break: break-all;
}

.prefill-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.prefill-discard {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}

.prefill-discard:hover {
  color: var(--status-error);
  border-color: var(--status-error);
}

.prefill-expires {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* ============================================================
   IMAGE-PREVIEW DROPZONE
   ============================================================ */
.dropzone-preview {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px;
  border: 1.5px solid var(--status-success);
  border-radius: 10px;
  background: var(--bg-primary);
  position: relative;
  transition: border-color 150ms, box-shadow 150ms;
}

.dropzone-preview:hover {
  box-shadow: 0 2px 8px var(--shadow-sm);
}

.dropzone-preview .thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-tertiary);
  cursor: zoom-in;
  border: 1px solid var(--border-light);
}

.dropzone-preview .thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease;
}

.dropzone-preview .thumb-wrap:hover img {
  transform: scale(1.04);
}

.dropzone-preview .thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  /* The thumb is narrow (120px) and the label wraps to two lines; flex
     centers the block but text-align centers each wrapped line within it. */
  text-align: center;
  padding: 0 8px;
  opacity: 0;
  transition: opacity 150ms;
}

.dropzone-preview .thumb-wrap:hover .thumb-overlay {
  opacity: 1;
}

/* Video attachments: render the inline <video> as a static-frame
   thumbnail that fills the slot (cover, no letterbox), suppress the
   annotate overlay, and replace it with a play-glyph overlay. Click
   the thumb to open the fullscreen video lightbox. */
.dropzone-shell.is-video .thumb-wrap {
  cursor: pointer;
  background: #000;
}

.dropzone-shell.is-video .thumb-img {
  display: none;
}

.dropzone-shell.is-video .thumb-overlay {
  display: none;
}

.dropzone-preview .thumb-wrap .thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dropzone-preview .thumb-wrap .thumb-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  transition: background 120ms;
  pointer-events: none; /* clicks fall through to thumb-wrap */
}

.dropzone-preview .thumb-wrap .thumb-play-overlay svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.dropzone-preview .thumb-wrap:hover .thumb-play-overlay {
  background: rgba(0, 0, 0, 0.08);
}

.dropzone-preview .meta-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.dropzone-preview .meta-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone-preview .meta-name .check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--status-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dropzone-preview .meta-name .check::after {
  content: "";
  width: 6px;
  height: 3px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.dropzone-preview .meta-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.dropzone-preview .meta-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-bg);
  padding: 2px 7px;
  border-radius: 999px;
  width: max-content;
  margin-top: 2px;
}

.dropzone-preview .preview-actions {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.dropzone-preview .replace-btn,
.dropzone-preview .copy-btn {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms;
}

.dropzone-preview .replace-btn:hover,
.dropzone-preview .copy-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.dropzone-preview .copy-btn.is-copied {
  color: var(--status-success);
  border-color: var(--status-success);
}

/* Copy only makes sense for images — videos can't be put on the clipboard as bitmaps. */
.dropzone-shell.is-video .copy-btn {
  display: none;
}

/* Dropzone shell swap: has-file hides the dropzone label, shows the preview */
.dropzone-shell.has-file .dropzone {
  display: none;
}

.dropzone-shell:not(.has-file) .dropzone-preview {
  display: none;
}

/* ─── Annotation lightbox ─── */
.annotate-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 18, 22, 0.85);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text-primary);
}

.annotate-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.annotate-tools,
.annotate-colors,
.annotate-widths,
.annotate-history {
  display: flex;
  gap: 4px;
  align-items: center;
}

.annotate-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  margin: 0 6px;
}

.annotate-spacer {
  flex: 1;
}

.annotate-tool,
.annotate-history button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.annotate-tool:hover,
.annotate-history button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.annotate-tool.is-active {
  background: var(--brand-bg);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.annotate-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.annotate-color.is-active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

.annotate-width {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.annotate-width span {
  display: block;
  width: 18px;
  background: currentColor;
  border-radius: 999px;
}

.annotate-width.is-active {
  background: var(--brand-bg);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.annotate-cancel,
.annotate-save {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
}

.annotate-cancel:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.annotate-save {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.annotate-save:hover {
  background: #0a8de6;
}

.annotate-canvas-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.annotate-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  position: absolute;
  inset: 0;
  margin: auto;
}

.annotate-canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  cursor: crosshair;
  touch-action: none;
}

.annotate-text-input {
  position: absolute;
  background: transparent;
  border: 1px dashed var(--brand-primary);
  outline: none;
  padding: 2px 4px;
  font-weight: 600;
  font-family: var(--font-body);
  pointer-events: auto;
  z-index: 1;
}

button.submit[data-busy="1"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

button.submit[data-busy="1"] .arrow {
  display: inline-block;
  animation: submit-spin 800ms linear infinite;
}

@keyframes submit-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Field label row with action button on the right */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.field-label-row .field-label {
  margin-bottom: 0;
}

/* ─── Zendesk linker (per-fields-for type) ──────────────────────────────
   Combobox + pill row used to attach Zendesk tickets to a submission. */
.zendesk-linker .zd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.zendesk-linker .zd-pills:empty {
  display: none;
}

.zd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--status-info-light);
  border: 1px solid rgba(25, 118, 210, 0.25);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-primary);
  max-width: 100%;
}

.zd-pill-id {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--status-info);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.zd-pill-id:hover {
  text-decoration: underline;
}

.zd-pill-sep {
  color: var(--text-tertiary);
}

.zd-pill-subject {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.zd-pill-remove {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 999px;
}

.zd-pill-remove:hover {
  background: rgba(211, 47, 47, 0.1);
  color: var(--status-error);
}

.zd-combobox-wrap {
  position: relative;
}

.zd-combobox-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.zd-combobox-input:focus {
  outline: none;
  border-color: var(--status-info);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.zd-combobox-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 24px var(--shadow-md);
}

.zd-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}

.zd-result:last-child {
  border-bottom: 0;
}

.zd-result:hover {
  background: var(--bg-hover);
}

.zd-result-id {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--status-info);
  letter-spacing: 0.02em;
}

.zd-result-subject {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zd-result-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.zd-result-hint, .zd-result-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.zd-result-hint {
  color: var(--status-info);
  font-style: normal;
}

/* ─── Account + Reporter linker on the submit form ───────────────────── */
.account-reporter-linker .ar-platform-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.account-reporter-linker .ar-platform-row .field-label {
  margin: 0;
}

.ar-platform-chips {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 7px;
  background: var(--bg-muted, #f3f4f6);
}

.ar-platform-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, var(--text-tertiary));
  border-radius: 5px;
  cursor: pointer;
}

.ar-platform-chip:hover {
  color: var(--text-primary);
}

.ar-platform-chip.is-active {
  background: var(--bg, #fff);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ar-email-only {
  margin-top: 4px;
}

.ar-email-only-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e6e8eb);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.ar-email-only-input:focus {
  outline: none;
  border-color: var(--status-info);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.account-reporter-linker .ar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ar-combobox-wrap {
  position: relative;
}

.ar-combobox-input {
  width: 100%;
  padding: 8px 12px;
  padding-right: 28px;
  border: 1px solid var(--border-color, #e6e8eb);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg, #fff);
  color: var(--text-primary);
}

.ar-combobox-input:focus {
  outline: none;
  border-color: var(--status-info);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.ar-combobox-input:disabled {
  background: var(--bg-muted, #f7f8fa);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.ar-combobox-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}

.ar-combobox-clear:hover {
  color: var(--text-primary);
}

.ar-combobox-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg, #fff);
  border: 1px solid var(--border-color, #e6e8eb);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.ar-result {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f3f4f6;
}

.ar-result:last-child {
  border-bottom: 0;
}

.ar-result:hover {
  background: #f5f9fd;
}

.ar-result-name {
  color: var(--text-primary);
  display: block;
  font-weight: 500;
}

.ar-result-email {
  color: var(--text-secondary, var(--text-tertiary));
  font-size: 12px;
  display: block;
  margin-top: 1px;
}

/* Name + email stack vertically in the first grid column. */
.ar-result > .ar-result-name + .ar-result-email {
  grid-column: 1;
}

.ar-result-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  grid-row: 1/span 2;
  grid-column: 2;
  align-self: start;
}

.ar-result-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.ar-dev-id {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

.ar-manual {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-muted, #f7f8fa);
}

.ar-manual .ar-row > input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color, #e6e8eb);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
}

/* ─── Sheet cells: account + customer-reporter ───────────────────────── */
.account-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.account-name {
  color: var(--text-primary);
}

.platform-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-muted, #eef0f2);
  color: var(--text-secondary, var(--text-tertiary));
}

.platform-badge.platform-live {
  background: #e8f1fb;
  color: #1565c0;
}

.platform-badge.platform-catalog {
  background: #ecf6ee;
  color: #2e7d32;
}

.platform-badge.platform-boss {
  background: #fff4e6;
  color: #b25e09;
}

.platform-badge.platform-microsite {
  background: #f5ecfa;
  color: #7b1fa2;
}

.account-id, .customer-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.customer-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-name {
  color: var(--text-primary);
}

.customer-email {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* AI rewrite button */
.rewrite-btn {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-primary);
  color: var(--brand-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 9px 4px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 150ms, border-color 150ms, color 150ms;
}

.rewrite-btn:hover {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}

.rewrite-btn[disabled],
.rewrite-btn[data-busy="1"] {
  opacity: 0.6;
  pointer-events: none;
}

.rewrite-btn[data-busy="1"] .rewrite-btn-icon {
  animation: rewrite-spin 700ms linear infinite;
}

/* Sparkle / wand icon for the button */
.rewrite-btn-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
}

.rewrite-btn-icon::before,
.rewrite-btn-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.rewrite-btn-icon::before {
  /* main 4-point sparkle */
  width: 2px;
  height: 12px;
  left: 5px;
  top: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: currentColor;
}

.rewrite-btn-icon::after {
  /* small accent sparkle, top-right */
  width: 4px;
  height: 4px;
  right: -1px;
  top: -1px;
  border-radius: 1px;
  transform: rotate(45deg);
}

@keyframes rewrite-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Brief banner shown after a rewrite, with "undo" affordance */
.rewrite-toast {
  font-size: 11.5px;
  color: var(--brand-primary);
  background: var(--brand-bg);
  border: 1px solid rgba(0, 153, 255, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rewrite-toast button {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: var(--brand-primary);
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.rewrite-toast button:hover {
  color: #0a8de6;
}

.rewrite-toast.is-error {
  color: var(--status-error);
  background: var(--status-error-light);
  border-color: rgba(211, 47, 47, 0.25);
}

/* Per-report screenshot thumbnail */
.detail-report-shot {
  display: block;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  cursor: zoom-in;
  background: var(--bg-secondary);
}

.detail-report-shot img {
  display: block;
  max-width: 160px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 200ms ease;
}

.detail-report-shot:hover img {
  transform: scale(1.02);
}

.detail-report-shot-label {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 7px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 150ms;
}

.detail-report-shot:hover .detail-report-shot-label {
  opacity: 1;
}

.detail-report-video {
  display: block;
  margin-top: 16px;
  max-width: 240px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: #000;
}

/* Per-report additional attachments — grid of image/video thumbs + file rows */
.detail-report-attachments {
  margin-top: 16px;
}

.detail-report-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.detail-report-attach {
  display: block;
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.detail-report-attach.is-image,
.detail-report-attach.is-video {
  cursor: zoom-in;
  aspect-ratio: 4/3;
}

.detail-report-attach.is-image img,
.detail-report-attach.is-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.detail-report-attach.is-image:hover img,
.detail-report-attach.is-video:hover video {
  transform: scale(1.03);
}

.detail-report-attach-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Generic (non-image/video) file chip: a colored type icon, a friendly type
   label + "EXT · size" meta, and a download glyph that fades in on hover. We
   only persist a hashed filename, so the chip leans on the icon + label rather
   than ever showing `attach-<hash>.xlsx`. */
.detail-report-attach.is-file {
  padding: 9px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  min-height: 56px;
}

.detail-report-attach.is-file:hover {
  background: var(--bg-tertiary, var(--bg-secondary));
}

.detail-report-attach-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 15px;
  background: var(--bg-tertiary, var(--bg-secondary));
  color: var(--text-secondary);
}

/* Type tints — picked to read in both light and dark themes. */
.detail-report-attach-icon[data-filecat=spreadsheet] {
  color: #1d7044;
  background: rgba(33, 160, 90, 0.12);
}

.detail-report-attach-icon[data-filecat=pdf] {
  color: #c5392f;
  background: rgba(214, 69, 56, 0.12);
}

.detail-report-attach-icon[data-filecat=document] {
  color: #2563c9;
  background: rgba(43, 110, 217, 0.12);
}

.detail-report-attach-icon[data-filecat=slides] {
  color: #c2611f;
  background: rgba(214, 110, 40, 0.12);
}

.detail-report-attach-icon[data-filecat=archive] {
  color: #8a6d1f;
  background: rgba(176, 138, 40, 0.14);
}

.detail-report-attach-icon[data-filecat=code] {
  color: #7a3fc9;
  background: rgba(130, 80, 210, 0.12);
}

.detail-report-attach-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-report-attach-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-report-attach-size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.detail-report-attach-dl {
  flex: 0 0 auto;
  color: var(--text-tertiary, var(--text-secondary));
  font-size: 12px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.detail-report-attach.is-file:hover .detail-report-attach-dl {
  opacity: 1;
}

/* Foldable network/tech sections inside a report */
.detail-report-foldable {
  margin-top: 18px;
  border-top: 1px dashed var(--border-light);
  padding-top: 12px;
}

.detail-report-foldable + .detail-report-foldable {
  margin-top: 12px;
}

.detail-report-foldable summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-report-foldable summary::-webkit-details-marker {
  display: none;
}

.detail-report-foldable summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.detail-report-foldable[open] summary::after {
  content: "−";
}

.detail-report-foldable summary:hover {
  color: var(--text-primary);
}

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

.detail-report-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  border-left: 2px solid var(--status-error);
  word-break: break-word;
}

.detail-report-list li code {
  color: var(--brand-primary);
  font-family: inherit;
  font-weight: 600;
}

.detail-report-tech {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  padding: 8px 0 0;
  margin: 0;
}

.detail-report-tech dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.detail-report-tech dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-all;
}

/* Fallback success flash (shown when board item can't be found post-submit) */
.submit-flash {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--status-success);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.3);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}

.submit-flash.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.submit-flash a {
  color: #fff;
  text-decoration: underline;
}

/* ─── Markdown-lite output ─── */
.md-heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-primary);
  margin: 14px 0 6px;
  padding: 0;
}

.md-heading:first-child {
  margin-top: 0;
}

.detail-prose .md-heading {
  /* tighter inside narrow panels */
  margin: 12px 0 4px;
}

.md-list {
  margin: 4px 0 8px;
  padding-left: 22px;
}

.md-list li {
  margin: 2px 0;
  line-height: 1.55;
}

.detail-prose p {
  margin: 0 0 8px;
  line-height: 1.6;
}

.detail-prose p:last-child {
  margin-bottom: 0;
}

.detail-prose strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Foldable body wrapper inside a report ─── */
.detail-report-foldable-body {
  padding-top: 8px;
}

.detail-report-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

.detail-report-pre {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  color: var(--text-secondary);
}

/* List item severity classes */
.detail-report-list li.is-err {
  border-left-color: var(--status-error);
  color: #6e2222;
  background: #fdf3f3;
}

.detail-report-list li.is-warn {
  border-left-color: var(--status-warning);
  color: #6e4500;
  background: #fff8eb;
}

.detail-report-list li code {
  color: var(--brand-primary);
  font-family: inherit;
  font-weight: 600;
}

.detail-report-list li .t {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin: 0 6px 0 4px;
  letter-spacing: 0.04em;
}

/* ─── Void / cancelled / won't-fix tickets — dim + strikethrough ─── */
.submissions-table tbody tr.is-void {
  opacity: 0.55;
}

.submissions-table tbody tr.is-void .request-title {
  text-decoration: line-through;
  text-decoration-color: var(--text-tertiary);
}

.kanban-card.is-void {
  opacity: 0.55;
}

.kanban-card.is-void .kanban-card-title {
  text-decoration: line-through;
  text-decoration-color: var(--text-tertiary);
}

/* ─── Sortable / filterable column header ─── */
.th-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.th-btn:hover {
  color: var(--text-primary);
}

.th-btn.is-active {
  color: var(--brand-primary);
}

.th-btn .th-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  margin-bottom: 1px;
  visibility: hidden;
}

.th-btn.is-active .th-arrow {
  visibility: visible;
}

.th-btn[data-dir=asc] .th-arrow {
  border-bottom: 5px solid currentColor;
}

.th-btn[data-dir=desc] .th-arrow {
  border-top: 5px solid currentColor;
}

.th-btn .th-filter-dot {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-primary);
  margin-left: 3px;
}

.th-btn.has-filter .th-filter-dot {
  display: inline-block;
}

/* ─── Popover ─── */
.th-popover {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  max-width: 280px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  font-family: var(--font-body);
}

.th-popover[hidden] {
  display: none;
}

.th-popover .th-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.th-popover .th-pop-item:hover {
  background: var(--bg-secondary);
}

.th-popover .th-pop-item .key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-left: auto;
}

.th-popover .th-pop-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 6px;
}

.th-popover .th-pop-section {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 10px 4px;
}

.th-popover .th-pop-checks {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.th-popover .th-pop-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
}

.th-popover .th-pop-check:hover {
  background: var(--bg-secondary);
}

.th-popover .th-pop-check input {
  margin: 0;
}

.th-popover .th-pop-check .label {
  flex: 1;
}

.th-popover .th-pop-check .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

.th-popover .th-pop-clear {
  width: 100%;
  padding: 6px 10px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 5px;
  text-align: left;
}

.th-popover .th-pop-clear:hover {
  background: var(--bg-secondary);
  color: var(--status-error);
}

/* ─── Primary "Submit ticket" button on the board toolbar ─── */
.submit-ticket-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 150ms, box-shadow 150ms, transform 100ms;
  box-shadow: 0 1px 2px var(--brand-shadow);
}

.submit-ticket-btn:hover {
  background: #0a8de6;
  box-shadow: 0 4px 12px var(--brand-shadow);
}

.submit-ticket-btn:active {
  transform: translateY(1px);
}

.submit-ticket-btn .btn-plus {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

/* Reorder the toolbar: submit button first, view tabs in middle, meta on right */
.board-toolbar .view-tabs {
  margin-left: auto;
}

.board-toolbar .board-meta {
  margin-left: 0;
}

@media (min-width: 900px) {
  .board-toolbar .view-tabs {
    margin-left: 0;
  }
  .board-toolbar .board-meta {
    margin-left: auto;
  }
}
/* ─── Submit modal ─── */
.submit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.55);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity 200ms ease;
}

.submit-modal-overlay.is-open {
  opacity: 1;
}

.submit-modal-overlay[hidden] {
  display: block;
  pointer-events: none;
  opacity: 0;
}

.submit-modal-overlay.is-open[hidden] {
  display: block;
}

.submit-modal {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: min(1180px, 100vw - 32px);
  height: min(900px, 100vh - 32px);
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 28px 80px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -48%) scale(0.97);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.submit-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.submit-modal[hidden] {
  display: flex;
  pointer-events: none;
}

.submit-modal.is-open[hidden] {
  display: flex;
  pointer-events: auto;
}

.submit-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.submit-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}

.submit-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.submit-modal-close {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.submit-modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.submit-modal-body {
  flex: 1;
  overflow-y: auto;
}

.submit-modal-body .workspace {
  min-height: 0;
}

/* Compact the inside of the modal a touch */
.submit-modal-body .form-col {
  padding: 24px 32px 28px;
}

.submit-modal-body .sidebar-col {
  padding: 24px 24px 28px;
}

@media (max-width: 800px) {
  .submit-modal {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    transform: translateY(20px);
  }
  .submit-modal.is-open {
    transform: translateY(0);
  }
  .submit-modal-body .workspace {
    grid-template-columns: 1fr;
  }
  /* Sidebar ("Possibly already reported") is desktop-only — on phone it
     pushes the form below the fold and is mostly noise pre-typing. */
  .submit-modal-body .sidebar-col {
    display: none;
  }
  .submit-modal-body .form-col {
    padding: 18px 18px 28px;
    border-right: 0;
  }
  .submit-modal-head {
    padding: 14px 16px 12px;
  }
  .submit-modal-title {
    font-size: 17px;
  }
  .submit-modal-eyebrow {
    margin-bottom: 2px;
  }
  /* Type picker drops to a single column with horizontal cards so each row
     stays a comfortable tap target. */
  .type-picker {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .type-card {
    flex-direction: row;
    align-items: center;
    padding: 14px;
    gap: 14px;
  }
  /* Step header tightens up. */
  .step-header {
    margin-bottom: 12px;
    gap: 10px;
  }
  .step-title {
    font-size: 16px;
  }
  form.feedback {
    gap: 20px;
  }
  .step-block {
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  /* Dropzone is the primary mobile interaction — keep it tall and tappable. */
  .dropzone {
    padding: 28px 16px;
    min-height: 96px;
  }
  /* QR handoff is a desktop affordance — no reason to ship the button to
     phones that are already on the form. */
  .submit-modal-qr-btn {
    display: none;
  }
}
/* ─── Compose-only landing (/r/:id or ?compose=1) ────────────────────────
   The submit modal IS the page — hide the board chrome behind it so the
   form fills the viewport cleanly on phones and from the QR handoff. */
body.is-report-only .page,
body.is-report-only .topbar .user-meta .topbar-link,
body.is-report-only #admin-sep {
  display: none;
}

body.is-report-only .submit-modal,
body.is-report-only .submit-modal-overlay {
  /* Skip the modal entrance animation when the modal is the whole page. */
  transition: none;
}

body.is-report-only .submit-modal-close,
body.is-report-only .submit-modal-qr-btn {
  /* No board to return to and no second device to hand off to from here. */
  display: none;
}

/* In compose-only mode the modal IS the page — make it full-bleed at every
   width so the user doesn't see an empty viewport around a floating dialog. */
body.is-report-only .submit-modal {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}

body.is-report-only .submit-modal-overlay {
  display: none;
}

/* ─── Report-only success card ─── */
.report-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 40px 24px;
  max-width: 460px;
  margin: 0 auto;
}

.report-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand-primary);
  font-size: 28px;
  line-height: 56px;
  font-weight: 700;
}

.report-success-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 4px 0 0;
  color: var(--text-primary);
}

.report-success-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.report-success-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── "Use my phone" QR handoff button + popover ─── */
.submit-modal-head {
  position: relative;
}

.submit-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.submit-modal-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.submit-modal-qr-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.submit-modal-qr-btn i {
  font-size: 14px;
}

.submit-modal-qr-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  z-index: 110;
  width: 280px;
  padding: 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Author `display:flex` above beats the UA `[hidden]` rule, so the attribute
   is inert without this — the popover would show empty on modal open and
   never close. Mirror the .user-menu-popover[hidden] pattern. */
.submit-modal-qr-popover[hidden] {
  display: none;
}

.qr-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.qr-popover-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.qr-popover-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  /* leave room for the close button anchored top-right */
  padding-right: 24px;
}

.qr-canvas {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-canvas svg {
  width: 100%;
  height: auto;
  display: block;
}

.qr-popover-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qr-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-primary);
  word-break: break-all;
  text-decoration: none;
}

.qr-link:hover {
  text-decoration: underline;
}

.qr-popover-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.qr-fallback {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ─── Image lightbox ─── */
button.detail-report-shot {
  /* button reset for the lightbox trigger */
  font: inherit;
  color: inherit;
  display: inline-block;
  text-align: left;
  padding: 0;
  margin: 16px 12px;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.92);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}

.image-lightbox.is-open {
  display: flex;
}

.image-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms;
}

/* Clickable status pill in the detail header */
.status-tag.is-clickable,
.priority-tag.is-clickable {
  cursor: pointer;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 5px;
  font-family: var(--font-mono);
}

.status-tag.is-clickable:hover {
  filter: brightness(0.95);
}

.status-tag.is-clickable .status-chev,
.priority-tag.is-clickable .status-chev {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
}

.status-tag.is-clickable:hover .status-chev,
.priority-tag.is-clickable:hover .status-chev {
  opacity: 1;
}

/* Transition popover */
.status-popover {
  position: absolute;
  z-index: 250;
  min-width: 220px;
  max-width: 320px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 6px;
  font-family: var(--font-body);
}

.status-popover-head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 10px 4px;
}

.status-popover-loading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding: 12px 14px;
}

.status-popover-loading.is-error {
  color: var(--status-error);
  font-style: normal;
}

.status-popover-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-popover-item:hover {
  background: var(--brand-bg);
  color: var(--brand-primary);
}

.status-popover-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Void/cancelled status pill — gray + strikethrough text */
.status-tag.is-void-status {
  color: var(--text-tertiary);
  border-color: var(--border-color);
  background: var(--bg-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

/* ─── Due date pill ─── */
.duedate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

button.duedate-pill {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
}

.duedate-pill:hover {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}

.duedate-pill.is-overdue {
  color: var(--status-error);
  border-color: rgba(211, 47, 47, 0.3);
  background: var(--status-error-light);
}

.duedate-pill.is-soon {
  color: #a05c00;
  border-color: rgba(245, 124, 0, 0.35);
  background: #fff3e0;
}

.duedate-pill.is-ok {
  color: var(--text-primary);
}

.duedate-edit-icon {
  font-size: 11px;
  opacity: 0.5;
  margin-left: 2px;
}

.duedate-pill:hover .duedate-edit-icon {
  opacity: 1;
}

.duedate-popover, .assignee-popover {
  position: absolute;
  z-index: 250;
  min-width: 240px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 10px;
}

.duedate-popover-head, .assignee-popover-head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 4px 6px;
}

.duedate-input {
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.duedate-popover-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  gap: 6px;
}

.duedate-clear, .assignee-clear {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-secondary);
}

.duedate-clear:hover, .assignee-clear:hover {
  color: var(--status-error);
  border-color: var(--status-error);
}

.duedate-save {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
}

/* ─── Assignee ─── */
.assignee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms;
}

button.assignee-pill {
  font: inherit;
  font-weight: 600;
  font-size: 12.5px;
}

.assignee-pill:hover {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}

.unassigned-avatar {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.assignee-search {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.assignee-list {
  max-height: 280px;
  overflow-y: auto;
}

.assignee-list-loading {
  padding: 16px;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
}

.assignee-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.assignee-list-item:hover {
  background: var(--brand-bg);
}

.assignee-list-item .assignee-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.assignee-list-item .assignee-email {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

/* ─── Epic deadline pill ─── */
.epic-deadline-pill {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-color);
}

.epic-deadline-pill:empty {
  display: none;
}

.epic-deadline-pill.is-ok {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.epic-deadline-pill.is-soon {
  color: #a05c00;
  background: #fff3e0;
  border-color: rgba(245, 124, 0, 0.35);
}

.epic-deadline-pill.is-overdue {
  color: var(--status-error);
  background: var(--status-error-light);
  border-color: rgba(211, 47, 47, 0.3);
}

/* ─── Watch feature ─── */
.detail-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: flex-start;
  gap: 16px 20px;
}

.detail-meta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.detail-meta-field .detail-section-eyebrow {
  margin-bottom: 0;
}

/* Normalize all pills inside the meta row so they're a uniform size */
.detail-meta-field > .status-tag,
.detail-meta-field > .priority-tag,
.detail-meta-field > .duedate-pill,
.detail-meta-field > .assignee-pill,
.detail-meta-field .watch-toggle {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border-radius: 999px;
}

.detail-meta-field > .assignee-pill {
  padding-left: 5px;
}

.detail-meta-field .watch-toggle {
  border-radius: 999px;
  justify-content: center;
}

.detail-meta-field > .status-tag .status-chev,
.detail-meta-field > .priority-tag .status-chev {
  margin-left: auto;
}

.detail-meta-field > .duedate-pill .duedate-edit-icon,
.detail-meta-field > .assignee-pill .duedate-edit-icon {
  margin-left: auto;
}

.detail-meta-field .epic-pill-name,
.detail-meta-field .pill-label,
.detail-meta-field .assignee-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.watch-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.watch-avatars .avatar {
  margin-left: -4px;
  border: 2px solid var(--bg-primary);
}

.watch-avatars .avatar:first-child {
  margin-left: 0;
}

.watch-more {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 6px;
}

.watch-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.watch-toggle {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.watch-toggle:hover {
  background: var(--brand-bg);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.watch-toggle.is-watching {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.watch-loading {
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ─── Audit log ─── */
.detail-audit {
  padding: 0;
}

.detail-audit > summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

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

.detail-audit > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.detail-audit[open] > summary::after {
  content: "−";
}

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

.audit-list li {
  display: grid;
  grid-template-columns: 80px auto 1fr;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  align-items: baseline;
}

.audit-list .audit-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.audit-list .audit-actor {
  font-weight: 600;
  color: var(--text-primary);
}

.audit-list .audit-action {
  color: var(--text-secondary);
}

.audit-list .audit-action strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ─── Resolution + Reopen modals (kanban → Review transitions) ───
   Both share the same overlay/dialog skeleton — the submit-modal pattern,
   sized smaller for these focused single-form dialogs. */
.resolve-modal-overlay,
.reopen-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.55);
  backdrop-filter: blur(2px);
  z-index: 110;
  opacity: 0;
  transition: opacity 200ms ease;
}

.resolve-modal-overlay.is-open,
.reopen-modal-overlay.is-open {
  opacity: 1;
}

.resolve-modal-overlay[hidden],
.reopen-modal-overlay[hidden] {
  display: block;
  pointer-events: none;
  opacity: 0;
}

.resolve-modal-overlay.is-open[hidden],
.reopen-modal-overlay.is-open[hidden] {
  display: block;
}

.resolve-modal,
.reopen-modal {
  position: fixed;
  z-index: 120;
  top: 50%;
  left: 50%;
  width: min(620px, 100vw - 32px);
  max-height: calc(100vh - 32px);
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 28px 80px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -48%) scale(0.97);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.resolve-modal.is-open,
.reopen-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.resolve-modal[hidden],
.reopen-modal[hidden] {
  display: flex;
  pointer-events: none;
}

.resolve-modal.is-open[hidden],
.reopen-modal.is-open[hidden] {
  display: flex;
  pointer-events: auto;
}

.resolve-modal-head,
.reopen-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.resolve-modal-eyebrow span,
.reopen-modal-eyebrow span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.reopen-modal-eyebrow span {
  color: var(--status-warning);
}

.resolve-modal-title,
.reopen-modal-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
  color: var(--text-primary);
}

.resolve-modal-sub,
.reopen-modal-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.resolve-modal-close,
.reopen-modal-close {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.resolve-modal-close:hover,
.reopen-modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.resolve-modal-body,
.reopen-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.resolve-field,
.reopen-field {
  display: block;
  margin-bottom: 18px;
}

.resolve-field-label,
.reopen-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.reopen-required {
  color: var(--status-error);
}

.resolve-field textarea,
.reopen-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}

.resolve-field textarea:focus,
.reopen-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.resolve-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

.resolve-field-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-secondary, rgba(15, 23, 42, 0.06));
  color: var(--text-secondary);
}

.resolve-source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.resolve-source-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.resolve-source-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.resolve-source-card:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.resolve-source-card.is-selected {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.resolve-source-card.is-exclusive {
  grid-column: 1/-1;
  font-style: italic;
}

.resolve-source-card.is-exclusive::after {
  content: "(exclusive)";
  margin-left: 8px;
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.resolve-source-card.is-exclusive.is-selected::after {
  color: inherit;
  opacity: 0.7;
}

.resolve-field-label-aside {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-tertiary);
}

@media (max-width: 480px) {
  .resolve-source-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.resolve-modal-foot,
.reopen-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.resolve-skip,
.reopen-cancel {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.resolve-skip:hover,
.reopen-cancel:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.resolve-submit,
.reopen-submit {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms, opacity 120ms;
}

.resolve-submit:hover,
.reopen-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

.reopen-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   MOBILE OVERRIDES
   Two breakpoints:
     • 720px — tablet / large phone: collapse two-column workspace, ease padding
     • 480px — phone: aggressive compaction, full-width buttons, 1-col grids
   Source-ordered last so they win specificity ties against earlier desktop
   rules at matching widths. Touch targets aim for ≥44px on primary controls.
   ============================================================================ */
@media (max-width: 720px) {
  /* Collapse the form/sidebar split earlier than the 800px modal rule does,
     so the in-page /epic workspace stops trying to render a 360px sidebar
     next to a squeezed form on tablets and large phones. */
  main.workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .form-col {
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
  }
  /* Kanban: prevent the multi-col layout between 480–720px from overflowing
     horizontally — collapse straight to 1-col at this size. */
  .kanban-board {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
  }
  /* Page chrome padding */
  .topbar {
    padding: 14px 20px;
  }
  .page-header {
    padding: 22px 20px 18px;
  }
  .page-tabs {
    padding: 0 20px;
  }
  .board-toolbar {
    padding: 16px 20px 10px;
  }
  .board-filters {
    padding: 0 20px 12px;
  }
  .page-pane[data-pane=board] .submissions-table {
    margin: 0 20px;
    width: calc(100% - 40px);
  }
  .page-pane[data-pane=board] .kanban-board {
    margin: 0 20px;
  }
  /* The captured-page search input was hard-locked to 240px min, eating
     the whole filter row on phones. Let it stretch instead. */
  .board-search-wrap {
    min-width: 0;
    flex: 1 1 200px;
  }
}
@media (max-width: 480px) {
  /* Topbar — collapse user-meta separators, compact the right-side block.
     User name often overflows next to email + sign out on phones. */
  .topbar {
    padding: 12px 14px;
  }
  .user-meta {
    gap: 8px;
    font-size: 12px;
  }
  .user-meta .sep {
    display: none;
  }
  .user-meta #user-email {
    display: none;
  }
  .user-meta .signout,
  .user-meta .topbar-link {
    font-size: 13px;
  }
  .user-menu-trigger {
    padding: 3px 6px 3px 3px;
    gap: 6px;
  }
  .user-menu-trigger .user-menu-email {
    display: none;
  }
  .user-menu-trigger .user-menu-caret {
    display: none;
  }
  .user-menu-avatar {
    width: 26px;
    height: 26px;
    font-size: 10.5px;
  }
  .brand-mark {
    font-size: 12px;
    gap: 8px;
  }
  .brand-mark .logo {
    height: 20px;
    max-width: 120px;
  }
  /* Page header — eyebrow + title + subtitle compaction */
  .page-header {
    padding: 18px 16px 14px;
  }
  .eyebrow {
    font-size: 11px;
  }
  h1.page-title {
    font-size: 22px;
    line-height: 1.2;
  }
  .page-subtitle {
    font-size: 13px;
  }
  /* Form column padding — was 28px 40px; cuts ~48px of dead horizontal
     space on a 360px viewport. */
  .form-col {
    padding: 20px 16px 24px;
  }
  .sidebar-col {
    padding: 20px 16px 24px;
  }
  .submit-modal-head {
    padding: 16px 16px 14px;
  }
  .submit-modal-body .form-col {
    padding: 18px 16px 22px;
  }
  .submit-modal-body .sidebar-col {
    padding: 18px 16px 22px;
  }
  .submit-modal-title {
    font-size: 18px;
  }
  /* Type picker — three pill cards become an unreadable wrap at 360px;
     stack instead. Still scannable as a vertical list. */
  .type-picker {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .type-card {
    padding: 14px 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .type-card .glyph {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  /* Submit button — the 200px min-width was tolerable on a 360px screen
     but starved the meta text next to it. Go full-width on phone. */
  .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  button.submit {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 12px 18px;
  }
  .submit-meta {
    text-align: center;
  }
  /* Page tabs — let the tab row scroll horizontally rather than wrap; the
     tap targets stay full-height instead of squashing onto two lines. */
  .page-tabs {
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-tabs::-webkit-scrollbar {
    display: none;
  }
  .page-tab {
    padding: 12px 14px;
    flex-shrink: 0;
  }
  /* Board toolbar / filters — already wrap, just need tighter padding */
  .board-toolbar {
    padding: 14px 16px 8px;
    gap: 10px;
  }
  .board-filters {
    padding: 0 16px 10px;
  }
  .board-filters-clear {
    margin-left: 0;
  }
  .submit-ticket-btn {
    min-height: 44px;
  }
  /* Spreadsheet table — the request-cell + request-url max-widths (340/360px)
     were forcing overflow on a 360px viewport. Drop them and let the table
     scroll horizontally as a fallback for very dense rows. */
  .page-pane[data-pane=board] .submissions-table,
  .page-pane[data-pane=board] .kanban-board {
    margin: 0 12px;
  }
  .page-pane[data-pane=board] .submissions-table {
    width: calc(100% - 24px);
  }
  .submissions-table {
    font-size: 12px;
  }
  .submissions-table th, .submissions-table td {
    padding: 10px 8px;
  }
  .submissions-table .request-cell {
    max-width: none;
  }
  .submissions-table .request-url {
    max-width: none;
    white-space: normal;
    word-break: break-all;
  }
  .view-pane:has(.submissions-table) {
    overflow-x: auto;
  }
  /* Detail panel — the existing 720px rule already sets width:100vw; ensure
     close button is touch-sized. (Detail-panel-close size set in earlier rules.) */
  .detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
  /* Landing / error cards — they share layout; the 48×44px padding eats
     ~88px of horizontal space at 360px viewport. */
  .error-page, .landing-page {
    padding: 28px 14px;
    min-height: 50vh;
  }
  .error-card, .landing-card {
    padding: 28px 22px;
  }
  .error-title, .landing-title {
    font-size: 22px;
  }
  /* Admin */
  .admin-grid {
    padding: 16px;
    gap: 14px;
  }
  .admin-grid-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-header {
    padding: 18px 16px 14px;
  }
  .admin-card-header {
    padding: 14px 14px 10px;
  }
  .admin-card-body {
    padding: 12px 14px 16px;
  }
  .admin-section-title {
    font-size: 17px;
  }
  /* CTAs become full-width row buttons when stacked under the title, with
     a comfortable tap target. */
  .admin-card-header-actions {
    gap: 8px;
  }
  .admin-card-cta {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
  }
  /* Re-flush the table scroll to the tighter card padding. */
  .admin-table-wrap {
    margin: 0 -14px;
    padding: 0 14px;
  }
  /* Modal action row: stack full-width so primary/secondary buttons get
     real tap targets instead of competing for ~150px each. column-reverse
     keeps the primary action on top, matching iOS/Android conventions. */
  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .modal-btn-primary,
  .modal-btn-secondary {
    width: 100%;
    min-height: 44px;
  }
  /* Topbar nav: allow the brand-mark to truncate so the user-menu + topbar
     links on the right never get pushed off-screen. */
  .brand-mark {
    min-width: 0;
  }
  .brand-mark > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-menu-trigger {
    min-height: 36px;
  }
  /* Submissions toolbar already stacks at 720px; just tighten gap */
  .submissions-toolbar {
    gap: 10px;
  }
  .view-tabs {
    width: 100%;
  }
  .view-tab {
    flex: 1;
    justify-content: center;
  }
  /* Modal close button — bump touch target */
  .submit-modal-close,
  .resolve-modal-close,
  .reopen-modal-close {
    width: 40px;
    height: 40px;
  }
  /* Resolve / reopen modal footers — stack action buttons */
  .resolve-modal-foot,
  .reopen-modal-foot {
    flex-direction: column-reverse;
    padding: 14px 16px 16px;
  }
  .resolve-skip, .reopen-cancel,
  .resolve-submit, .reopen-submit {
    width: 100%;
    min-height: 44px;
  }
  /* Step header on stacked workspace */
  .step-title {
    font-size: 16px;
  }
}
/* ─── Epic switcher (popover off the page-title) ─── */
.page-title.is-switcher {
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 8px;
  margin-left: -8px;
  border-radius: 6px;
  transition: background 120ms;
}

.page-title.is-switcher:hover,
.page-title.is-switcher:focus-visible,
.page-title.is-switcher.is-open {
  background: var(--brand-bg);
  outline: none;
}

.page-title.is-switcher.is-flash {
  /* Brief acknowledgement when the user has only one epic so the click
     doesn't feel like nothing happened. */
  background: var(--brand-bg);
}

.epic-key-caret {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
  transition: transform 150ms ease, color 120ms;
}

.page-title.is-switcher:hover .epic-key-caret,
.page-title.is-switcher.is-open .epic-key-caret {
  color: var(--brand-primary);
}

.page-title.is-switcher.is-open .epic-key-caret {
  transform: rotate(180deg);
}

.epic-switcher-pop {
  position: absolute;
  z-index: 130;
  min-width: 280px;
  max-width: 420px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), 0 1px 2px var(--shadow-sm);
  animation: epic-switcher-in 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes epic-switcher-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.epic-switcher-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.epic-switcher-search {
  width: 100%;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.epic-switcher-search:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

.epic-switcher-list {
  overflow-y: auto;
  padding: 4px 0;
}

.epic-switcher-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 100ms;
}

.epic-switcher-item:hover {
  background: var(--bg-secondary);
}

.epic-switcher-item.is-current {
  background: var(--brand-bg);
}

.epic-switcher-name {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epic-switcher-check {
  color: var(--brand-primary);
  font-size: 9px;
}

.epic-switcher-empty {
  padding: 16px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary);
  text-align: center;
}

/* ─── Toast notifications ─── */
.toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(420px, 100vw - 40px);
}

.toast {
  pointer-events: auto;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.toast--success {
  background: var(--status-success);
  color: #fff;
}

.toast--error {
  background: var(--status-error);
  color: #fff;
}

/* ─── Empty-state banner above the board (no tickets at all) ─── */
.board-empty-banner {
  margin: 16px 40px 0;
  padding: 14px 18px;
  background: var(--brand-bg);
  border: 1px solid rgba(0, 153, 255, 0.25);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ─── Loading skeletons ─── */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 12px;
  margin: 6px 12px 6px 0;
  vertical-align: middle;
}

.skeleton-pill {
  width: 22px;
  height: 18px;
  border-radius: 999px;
}

.skeleton-card {
  display: block;
  height: 84px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.skeleton-row td {
  padding: 10px 12px !important;
}

/* Skeleton columns participate directly in the parent flex row — without
   `display: contents` the shell becomes a single flex item and its children
   collapse into a vertical stack on first paint. */
.kanban-skeleton-shell {
  display: contents;
}

.kanban-skeleton-col .kanban-column-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── Keyboard-highlighted card (j/k cursor) ─── */
.is-key-highlighted {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── Shortcut cheatsheet ─── */
.shortcut-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.55);
  backdrop-filter: blur(2px);
  z-index: 220;
  animation: epic-switcher-in 140ms ease;
}

.shortcut-help-modal {
  position: fixed;
  z-index: 230;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 100vw - 32px);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  animation: epic-switcher-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shortcut-help-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}

.shortcut-help-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.shortcut-help-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
}

.shortcut-help-row dt {
  margin: 0;
}

.shortcut-help-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.shortcut-help-row kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text-primary);
}

.shortcut-help-close {
  margin-top: 18px;
  width: 100%;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.shortcut-help-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ─── Card hover preview ─── */
.card-hover-preview {
  position: absolute;
  z-index: 140;
  width: 320px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.card-hover-preview.is-in {
  opacity: 1;
  transform: translateY(0);
}

.card-hover-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.card-hover-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.card-hover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.card-hover-meta strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.card-hover-muted {
  font-style: italic;
  opacity: 0.7;
}

/* ─── Avatar baseline (explicit so the profile-picture img overlay sits
       cleanly on top of the colored initial when available) ─── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  flex-shrink: 0;
}

.avatar.size-22 {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}

.avatar.size-28 {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.avatar.size-36 {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.avatar.is-internal {
  background: var(--brand-bg);
  color: var(--brand-primary);
}

.avatar.color-1 {
  background: #fde2e2;
  color: #b91c1c;
}

.avatar.color-2 {
  background: #fef3c7;
  color: #92400e;
}

.avatar.color-3 {
  background: #d1fae5;
  color: #065f46;
}

.avatar.color-4 {
  background: #dbeafe;
  color: #1e40af;
}

.avatar.color-5 {
  background: #ede9fe;
  color: #6d28d9;
}

.avatar.color-6 {
  background: #fce7f3;
  color: #be185d;
}

.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: epic-switcher-in 200ms ease; /* fade in once loaded */
}

/* ─── Bulk actions ─── */
.bulk-cell {
  width: 36px;
  padding: 0 4px 0 14px !important;
  text-align: center;
}

td.bulk-cell {
  padding-top: 14px !important;
  vertical-align: top;
}

.bulk-cell input[type=checkbox] {
  cursor: pointer;
  margin: 0;
  display: block;
}

.page[data-viewer-internal="0"] .bulk-cell {
  display: none;
}

tr.is-bulk-selected td {
  background: var(--brand-bg);
}

.bulk-actions-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 18px;
  background: var(--text-primary);
  color: var(--bg-primary);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.1);
  animation: epic-switcher-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bulk-actions-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bulk-actions-btn {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}

.bulk-actions-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.bulk-actions-bar[hidden] {
  display: none;
}

body:has(.submit-modal.is-open, .detail-panel.is-open, .resolve-modal.is-open, .reopen-modal.is-open) .bulk-actions-bar {
  display: none;
}

.bulk-actions-clear {
  background: transparent;
  color: var(--bg-primary);
  border: none;
  font-size: 11.5px;
  opacity: 0.7;
  cursor: pointer;
  margin-left: 4px;
}

.bulk-actions-clear:hover {
  opacity: 1;
}

.bulk-popover {
  position: absolute;
  z-index: 130;
  min-width: 240px;
  max-width: 320px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.bulk-popover-head {
  padding: 10px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bulk-popover-search {
  margin: 4px 8px 6px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
}

.bulk-popover-list {
  overflow-y: auto;
  flex: 1;
}

.bulk-popover-loading {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

.bulk-popover-loading.is-error {
  color: var(--status-error);
}

.bulk-popover-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}

.bulk-popover-item:hover {
  background: var(--bg-secondary);
}

.bulk-popover-clear {
  border-top: 1px solid var(--border-light);
  color: var(--status-error);
  font-size: 12px;
}

.bulk-popover-user {
  display: grid;
  grid-template-columns: 1fr;
}

.bulk-popover-user-name {
  font-size: 13px;
  color: var(--text-primary);
}

.bulk-popover-user-email {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* ─── Theme toggle button (topbar) ─── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-secondary);
}

/* ─── Onboarding tour ─── */
.tour-card {
  position: absolute;
  z-index: 240;
  width: 320px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tour-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

.tour-step {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}

.tour-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.tour-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.tour-body kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
}

.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-skip {
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
}

.tour-skip:hover {
  color: var(--text-primary);
}

.tour-next {
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms;
}

.tour-next:hover {
  filter: brightness(1.05);
}

.tour-arrow {
  position: absolute;
  top: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}

/* Collapsed Done column when user picks "Hide column" — header + dropdown
   stay visible so they can switch back; body becomes a thin placeholder. */
.kanban-column.is-collapsed {
  min-height: 0;
}

.kanban-column.is-collapsed .kanban-column-list {
  flex: 0;
  min-height: 0;
}

.kanban-column-hidden {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  padding: 8px 8px;
}

/* ─── Kanban focus mode (single-column tiled view) ─── */
.kanban-column-title-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  transition: background 120ms;
}

.kanban-column-title-btn:hover .kanban-column-title {
  color: var(--text-primary);
}

.kanban-column-title-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.kanban-focus-exit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms;
}

.kanban-focus-exit:hover {
  background: var(--status-error);
  color: #fff;
}

/* Board collapses to a single full-width column with tiled cards. */
.kanban-board.is-focused {
  display: block;
}

.kanban-board.is-focused .kanban-column.is-focused {
  width: 100%;
  min-height: calc(100vh - 320px);
}

.kanban-board.is-focused .kanban-column.is-focused .kanban-column-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  padding: 16px;
}

/* Cards in tiled mode get a slight breathing room — they sit in a grid
   cell so they auto-stretch to its width. */
.kanban-board.is-focused .kanban-card {
  margin: 0;
}

/* ─── Pulse (per-epic dashboard) ─── */
.pulse-board {
  padding: 16px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pulse-empty {
  padding: 48px 16px;
  text-align: center;
  font-style: italic;
  color: var(--text-tertiary);
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pulse-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .pulse-row {
    grid-template-columns: 1fr;
  }
}
.pulse-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 18px;
}

.pulse-card--wide {
  grid-column: span 1;
}

.pulse-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.pulse-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}

.pulse-stat-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.pulse-stat-sub.is-up {
  color: var(--status-success);
}

.pulse-stat-sub.is-down {
  color: var(--status-error);
}

.pulse-arrow {
  font-weight: 700;
}

.pulse-card-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.pulse-stack {
  display: grid;
  gap: 10px;
}

.pulse-stack-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 10px;
}

.pulse-stack-label {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.pulse-stack-bar {
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}

.pulse-stack-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 999px;
  transition: width 320ms ease;
}

.pulse-stack-fill[data-col=todo] {
  background: var(--status-info);
}

.pulse-stack-fill[data-col=progress] {
  background: #f57c00;
}

.pulse-stack-fill[data-col=review] {
  background: #6a1b9a;
}

.pulse-stack-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}

.pulse-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pulse-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

.pulse-list li:last-child {
  border-bottom: none;
}

.pulse-list-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 1px 8px;
  border-radius: 999px;
}

.pulse-empty-sm {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12px;
}

.pulse-stale-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pulse-stale-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

.pulse-stale-list li:last-child .pulse-stale-link {
  border-bottom: none;
}

.pulse-stale-link:hover .pulse-stale-title {
  color: var(--brand-primary);
}

.pulse-stale-title {
  font-size: 13px;
  flex: 1;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-stale-age {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--status-warning);
  font-weight: 600;
}

/* ─── Snooze popover ─── */
.snooze-popover {
  position: absolute;
  z-index: 130;
  width: 220px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  padding: 6px 0;
}

.snooze-popover-head {
  padding: 8px 14px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.snooze-popover-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}

.snooze-popover-item:hover {
  background: var(--bg-secondary);
}

.snooze-popover-clear {
  color: var(--status-error);
  border-top: 1px solid var(--border-light);
}

.snooze-popover-sep {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.snooze-popover-custom {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

.snooze-popover-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ─── Polish: card right-click context menu ─── */
.card-context-menu {
  position: absolute;
  z-index: 200;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
}

.card-context-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.card-context-menu button:hover {
  background: var(--bg-secondary);
}

.card-context-menu button i {
  color: var(--text-tertiary);
  width: 14px;
  text-align: center;
}

.card-context-sep {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

/* ─── Polish: detail panel resize handle ─── */
.detail-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
  background: transparent;
}

.detail-resize-handle:hover {
  background: var(--brand-bg);
}

/* ─── Saved views ─── */
.board-saved-views {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 40px 0;
  align-items: center;
}

.board-saved-views:empty {
  display: none;
}

.saved-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: var(--brand-bg);
  border: 1px solid transparent;
  color: var(--brand-primary);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms;
}

.saved-view-chip:hover, .saved-view-chip:focus-visible {
  border-color: var(--brand-primary);
  outline: none;
}

.saved-view-label {
  line-height: 1;
}

.saved-view-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-primary);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms;
}

.saved-view-chip:hover .saved-view-del,
.saved-view-chip:focus-within .saved-view-del {
  opacity: 0.8;
}

.saved-view-del:hover {
  background: rgba(0, 153, 255, 0.18);
  opacity: 1;
}

.saved-view-add {
  background: transparent;
  border: 1px dashed var(--border-hover);
  color: var(--text-tertiary);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.saved-view-add:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ─── Sticky chrome ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-primary);
}

.page-tabs {
  position: sticky;
  top: 60px;
  z-index: 49;
  background: var(--bg-primary);
}

.board-toolbar {
  position: sticky;
  top: 108px;
  z-index: 48;
  background: var(--bg-primary);
}

.board-saved-views {
  position: sticky;
  top: 156px;
  z-index: 47;
  background: var(--bg-primary);
}

.board-filters {
  position: sticky;
  top: 156px;
  z-index: 46;
  background: var(--bg-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.board-saved-views:not(:empty) ~ .board-filters {
  top: 196px;
}

@media (max-width: 720px) {
  .topbar, .page-tabs, .board-toolbar, .board-filters, .board-saved-views {
    position: static;
  }
}
.submissions-table th {
  top: 220px !important;
}

@media (max-width: 720px) {
  .submissions-table th {
    top: 0 !important;
  }
}
/* ─── Aging visual ─── */
.kanban-card {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
}

.kanban-card.is-aged-1 {
  border-left-color: #f0c244;
}

.kanban-card.is-aged-2 {
  border-left-color: #f08a44;
}

.kanban-card.is-aged-3 {
  border-left-color: #d33;
}

tr[data-item-key].is-aged-1 td:first-child {
  box-shadow: inset 3px 0 0 #f0c244;
}

tr[data-item-key].is-aged-2 td:first-child {
  box-shadow: inset 3px 0 0 #f08a44;
}

tr[data-item-key].is-aged-3 td:first-child {
  box-shadow: inset 3px 0 0 #d33;
}

/* ─── Kanban multi-select ─── */
.kanban-card.is-bulk-selected {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  background: var(--brand-bg);
}

/* ─── Toast action button (Undo) ─── */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-msg {
  flex: 1;
}

.toast-action {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
  flex-shrink: 0;
}

.toast-action:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* (.priority-tag.is-clickable styling already exists earlier in this file —
   used on the detail panel popover trigger. Don't redefine here; doing so
   with `font: inherit` blew the font size up to the card body's 13px.) */
/* ─── Inline assignee chip on kanban cards ─── */
.avatar.size-18 {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

.kanban-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.kanban-card-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: default;
  max-width: 65%;
  overflow: hidden;
}

.kanban-card-assignee.is-clickable {
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.kanban-card-assignee.is-clickable:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.kanban-card-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Pulse leaderboard ─── */
.pulse-leaderboard-card {
  min-height: 0;
}

.pulse-leaderboard-window {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 6px;
  letter-spacing: 0.06em;
}

.pulse-leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pulse-leaderboard-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.pulse-leaderboard-row:last-child {
  border-bottom: none;
}

.pulse-leaderboard-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}

.pulse-leaderboard-row.is-podium .pulse-leaderboard-rank {
  color: var(--brand-primary);
}

.pulse-leaderboard-row[data-rank="1"] .pulse-leaderboard-rank {
  color: #d4a017;
} /* gold */
.pulse-leaderboard-row[data-rank="2"] .pulse-leaderboard-rank {
  color: #909090;
} /* silver */
.pulse-leaderboard-row[data-rank="3"] .pulse-leaderboard-rank {
  color: #b87333;
} /* bronze */
.pulse-leaderboard-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-leaderboard-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 8px;
  border-radius: 999px;
}

/* ─── Columns picker (toolbar button + popover) ─────────────────────────── */
.board-columns-wrap {
  position: relative;
  display: inline-flex;
}

.board-columns-wrap[hidden] {
  display: none;
}

.board-columns-btn {
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 10px 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 120ms, color 120ms;
}

.board-columns-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.board-columns-btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
}

.board-columns-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 240px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow-md);
  padding: 6px;
}

.board-cols-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
}

.board-cols-row:hover {
  background: var(--bg-secondary);
}

.board-cols-show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}

.board-cols-show input {
  margin: 0;
  cursor: pointer;
}

.board-cols-min {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
}

.board-cols-min:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.board-cols-min[aria-pressed=true] {
  background: var(--brand-bg);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.board-cols-min:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.board-cols-actions {
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  padding: 6px 4px 2px;
  display: flex;
  justify-content: flex-end;
}

.board-cols-reset {
  font: inherit;
  font-size: 11px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.board-cols-reset:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* ─── Per-column minimize toggle in the kanban header ───────────────────── */
.kanban-column-min {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.kanban-column-min:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* Minimized column: collapse to a slim strip showing just header + count.
   The column-list stays in the DOM so cards can still be dropped onto it,
   but it shrinks to zero height. Card content is omitted in the template. */
.kanban-column.is-minimized {
  min-height: 0;
}

.kanban-column.is-minimized .kanban-column-list {
  min-height: 28px;
  padding: 4px;
  flex: 0;
}

.kanban-column.is-minimized .kanban-column-title {
  /* Slight visual cue that this column is collapsed. */
  opacity: 0.7;
}

/* Slim the minimized column in the flex row — siblings absorb the freed
   space. The dedicated min-width override beats the .kanban-column rule. */
.kanban-board > .kanban-column.is-minimized {
  flex: 0 0 160px;
  min-width: 160px;
  max-width: 180px;
}