/* ============================================================
 * Linear design system — opt-in via _base_linear.html
 *
 * Tokens come from app/static/css/design-system/variables.css
 * (the section under "LINEAR DESIGN SYSTEM"). This file owns the
 * components that render against those tokens.
 *
 * Loaded ONLY by _base_linear.html — does not affect templates
 * still on base.html / Tabler.
 * ============================================================ */

/* ---------- RESET & BASE ---------- */
.linear-app *,
.linear-app *::before,
.linear-app *::after {
  box-sizing: border-box;
}

.linear-app {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Pages that prefer a flat background opt out via .linear-app--flat. */
.linear-app--flat { background-image: none; }

/* Body-level element resets — wrapped in :where() so they have zero
 * specificity (0,0,0). This means any single-class component rule
 * (.linear-card-title, .linear-btn--primary, etc.) wins cleanly. The
 * :where() lesson learned the hard way after the empty-state-button bug. */
:where(.linear-app h1, .linear-app h2, .linear-app h3, .linear-app h4) {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--fg);
}

:where(.linear-app h1) { font-size: var(--text-xl); font-weight: 600; }
:where(.linear-app h2) { font-size: var(--text-md); font-weight: 600; }
:where(.linear-app h3) { font-size: 13px; font-weight: 500; }
:where(.linear-app h4) { font-size: 12px; font-weight: 500; }

:where(.linear-app p) { margin: 0; }

:where(.linear-app a) {
  text-decoration: none;
  cursor: pointer;
  color: inherit;            /* default to surrounding fg — was browser blue (#0000EE) on links lacking a .linear-* color class, invisible on dark. Components that need a coloured link (.linear-link, .linear-pill, .linear-btn) override this. */
  transition: color var(--transition-fast);
}

/* Tabler-token aliases — components like the mini-calendar were
 * authored against the legacy Tabler token namespace. When loaded
 * inside a Linear page the Tabler stylesheet isn't present, so the
 * tokens fall back to hardcoded values (e.g. #1d273b dark blue text)
 * that go invisible on dark mode. Aliasing them to Linear tokens
 * here keeps those components themed in both modes without editing
 * each component's source. */
.linear-app {
  --tblr-body-color: var(--fg);
  --tblr-body-bg: var(--bg);
  --tblr-muted: var(--fg-muted);
  --tblr-secondary: var(--fg-muted);
  --tblr-bg-surface-secondary: var(--surface-2);
  --tblr-border-color: var(--border);
}

.linear-app .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}

/* ---------- LAYOUT SHELL ---------- */
.linear-shell {
  display: grid;
  grid-template-columns: var(--linear-sidebar-width) 1fr;
  min-height: 100vh;
}

.linear-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow content to shrink below sidebar's 232px */
}

.linear-content {
  flex: 1;
  max-width: var(--linear-content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--linear-content-padding);
}

/* ---------- SIDEBAR ---------- */
.linear-sidebar {
  background: var(--bg-subtle);
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- MOBILE TOP BAR + DRAWER ----------
 * The shell hides the sidebar off-screen via transform on phones
 * (the old `display: none` rule sat BEFORE the base `display: flex`
 * in source order and was never applied — fixed by re-ordering and
 * by switching to a transform-based drawer pattern).
 * `sidebar-drawer.js` toggles `.linear-shell--drawer-open` on the
 * shell to slide the sidebar back in. */
.linear-shell__mobile-bar { display: none; }

@media (max-width: 760px) {
  .linear-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .linear-shell__mobile-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-row: 1;
    grid-column: 1;
    height: 52px;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .linear-shell__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--fg);
    cursor: pointer;
  }
  .linear-shell__mobile-toggle:hover,
  .linear-shell__mobile-toggle:focus-visible {
    background: var(--surface-hover);
    border-color: var(--border);
  }
  .linear-shell__mobile-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .linear-shell__mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
    text-decoration: none;
  }
  .linear-shell__drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.45);
    z-index: 40;
  }
  /* The sidebar floats over content on mobile, behind any modal
   * (modals own z-index 1050+). Transform-based hide keeps it in
   * the DOM so focus management + screen-reader semantics work. */
  .linear-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(280px, 86vw);
    grid-row: auto;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
  }
  .linear-shell--drawer-open .linear-sidebar {
    transform: translateX(0);
  }
  /* Push main content into row 2 so the sticky mobile bar can claim
   * row 1 cleanly. */
  .linear-main {
    grid-row: 2;
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .linear-sidebar { transition: none; }
}

.linear-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.linear-sidebar-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clickable search bar that opens the ⌘K command palette. id="searchTriggerDesktop"
   is wired to togglePalette() by command-palette.js — no extra JS needed here. */
.linear-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.linear-sidebar-search:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.linear-sidebar-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.linear-sidebar-search-label {
  flex: 1;
}

.linear-sidebar-search-kbd {
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
}

.linear-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.linear-sidebar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
  padding: 6px 8px 2px;
}

.linear-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.linear-nav-item:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.linear-nav-item.active {
  background: var(--surface-active);
  color: var(--fg);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent);
}
.linear-nav-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
  /* Make this class self-sufficient as a stroke icon style — the
     contextual sidebars (settings, admin) hand-roll their nav items
     and only pass ``cls='linear-nav-item-icon'`` to the icon macro,
     so without these the SVG falls back to the browser default of
     ``fill: black; stroke: none`` and the glyph disappears against
     a dark background. Mirrors the ``.linear-icon`` block above. */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linear-nav-item-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  font-weight: 500;
}

/* Muted modifier — used when a module flag is off but the viewer is an
   admin (non-admins never see the item). Lets the admin see at a glance
   what's currently turned off without it competing visually with live
   items. */
.linear-nav-item--muted {
  opacity: 0.55;
}
.linear-nav-item-off {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-subtle);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- TOP NAV ---------- */
.linear-topnav {
  height: var(--linear-topnav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.linear-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.linear-breadcrumb a { color: var(--fg-muted); }
.linear-breadcrumb a:hover { color: var(--fg); }
.linear-breadcrumb .sep { color: var(--fg-subtle); }
.linear-breadcrumb .current { color: var(--fg); font-weight: 500; }

.linear-topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- PAGE HEADER ---------- */
.linear-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.linear-page-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.linear-page-meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  margin-top: 4px;
}

.linear-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- BUTTONS ---------- */
.linear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.linear-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}
.linear-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.linear-btn[disabled],
.linear-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.linear-btn--primary {
  background: var(--fg);
  color: var(--surface);
  border-color: var(--fg);
}
.linear-btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--surface);
}

/* In dark mode the inverted-fg primary becomes a stark white pill that
 * shouts on every page (most visible on modal Create / Save buttons).
 * Switch to the brand accent so it reads as "primary action" without
 * blowing out the rest of the dark UI. Light mode keeps the
 * inverted-fg style above. */
[data-theme="dark"] .linear-btn--primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
[data-theme="dark"] .linear-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}

.linear-btn--accent {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.linear-btn--accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--surface);
}

.linear-btn--danger {
  background: var(--danger);
  color: var(--surface);
  border-color: var(--danger);
}
.linear-btn--danger:hover { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); color: var(--surface); }

.linear-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-muted);
}
.linear-btn--ghost:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--fg);
}

.linear-btn--sm { height: 26px; padding: 0 9px; font-size: 12px; }
.linear-btn--lg { height: 34px; padding: 0 14px; font-size: 14px; }

.linear-btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- FORMS ---------- */
.linear-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.linear-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
}
.linear-label-required::after {
  content: '*';
  color: var(--accent);
  font-weight: 600;
}
.linear-label-optional {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-left: auto;
}

.linear-input,
.linear-select,
.linear-textarea {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.linear-input::placeholder,
.linear-textarea::placeholder { color: var(--fg-subtle); }
.linear-input:focus,
.linear-select:focus,
.linear-textarea:focus {
  border-color: var(--fg);
  outline: none;
  box-shadow: var(--focus-ring);
}

.linear-textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}

.linear-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='1.8'><polyline points='3,5 6,8 9,5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  padding-right: 28px;
  cursor: pointer;
}

.linear-input--mono { font-family: var(--font-mono); }

.linear-help {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.linear-help--error { color: var(--danger); }

.linear-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .linear-field-row { grid-template-columns: 1fr; }
}

/* ---------- CARDS ---------- */
.linear-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.linear-card:hover { border-color: var(--border-strong); }

.linear-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}

.linear-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

.linear-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}

.linear-card-body { padding: 16px; }

.linear-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.linear-card--flush .linear-card-body { padding: 0; }
.linear-card--accent { border-color: var(--accent); }

/* ---------- TABLES ---------- */
.linear-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fg);
}
.linear-table thead th {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.linear-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.linear-table tbody tr:last-child td { border-bottom: 0; }
.linear-table tbody tr:hover td { background: var(--bg); }
.linear-table .mono { font-family: var(--font-mono); font-size: 12.5px; }

.linear-table--dense thead th { padding: 6px 12px; }
.linear-table--dense tbody td { padding: 7px 12px; }

/* ---------- PILLS / STATUS BADGES ---------- */
.linear-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.linear-pill--good   { color: var(--good);   background: var(--good-soft); }
.linear-pill--warn   { color: var(--warn);   background: var(--warn-soft); }
.linear-pill--danger { color: var(--danger); background: var(--danger-soft); }
.linear-pill--info   { color: var(--info);   background: var(--info-soft); }
.linear-pill--purple { color: var(--purple); background: var(--purple-soft); }
.linear-pill--accent { color: var(--accent); background: var(--accent-soft); }
.linear-pill--neutral {
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
}

.linear-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- ICONS (inline SVG via class) ---------- */
.linear-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.linear-icon--sm { width: 14px; height: 14px; }
.linear-icon--lg { width: 20px; height: 20px; }
/* Extra-large icon (empty-state hero, sign-in error pages). Sets
   `font-size` too so it works on Tabler font icons (`<i class="ti">`)
   the same way it works on Linear SVG icons. */
.linear-icon--xl { width: 48px; height: 48px; font-size: 48px; }

/* ---------- METRIC CARDS (dashboard) ---------- */
.linear-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.linear-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.linear-metric-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.linear-metric-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.linear-metric-trend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: 6px;
}
.linear-metric-trend--up   { color: var(--good); }
.linear-metric-trend--down { color: var(--danger); }

/* ---------- FLASH MESSAGES ---------- */
.linear-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  margin-bottom: 12px;
}
/* The class selector above outranks the UA stylesheet's [hidden] rule,
   so `<div class="linear-flash" hidden>` rendered visibly — the bug that
   made the dormant "Too many attempts" banner appear on every /register
   load. Respect the hidden attribute explicitly. */
.linear-flash[hidden] { display: none; }
.linear-flash--success { border-color: var(--good);   background: var(--good-soft);   color: var(--good); }
.linear-flash--warning { border-color: var(--warn);   background: var(--warn-soft);   color: var(--warn); }
.linear-flash--error,
.linear-flash--danger  { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.linear-flash--info    { border-color: var(--info);   background: var(--info-soft);   color: var(--info); }

/* ---------- WIZARD STEPPER ----------
   Used by the ``stepper(...)`` macro in macros/linear.html (consumed by
   the onboarding wizard). Suffixed ``--wizard`` so the bare
   ``.linear-stepper`` namespace is reserved for the auth-style numbered
   stepper at the bottom of this file. */
.linear-stepper--wizard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.linear-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-subtle);
}
.linear-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--surface);
}
.linear-step--active .linear-step-num {
  background: var(--fg);
  color: var(--surface);
  border-color: var(--fg);
}
.linear-step--active { color: var(--fg); font-weight: 500; }
.linear-step--done .linear-step-num {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.linear-step--done { color: var(--fg-muted); }
.linear-step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------- AVATAR ---------- */
.linear-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.linear-avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.linear-avatar--lg { width: 36px; height: 36px; font-size: 13px; }
.linear-avatar--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.linear-avatar-group { display: inline-flex; }
.linear-avatar-group .linear-avatar + .linear-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }

/* ---------- SEARCH INPUT (icon inside) ---------- */
.linear-search {
  position: relative;
  display: inline-flex;
  width: 100%;
  max-width: 320px;
}
.linear-search > svg {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  stroke: var(--fg-subtle);
  stroke-width: 1.8;
  fill: none;
  pointer-events: none;
}
.linear-search > input {
  height: 30px;
  width: 100%;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.linear-search > input::placeholder { color: var(--fg-subtle); }
.linear-search > input:focus {
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
}

/* ---------- CHECKBOX & RADIO ---------- */
.linear-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.linear-check input[type="checkbox"],
.linear-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.linear-check input[type="checkbox"] { border-radius: 4px; }
.linear-check input[type="radio"]    { border-radius: 50%; }
.linear-check input[type="checkbox"]:checked,
.linear-check input[type="radio"]:checked {
  background: var(--fg);
  border-color: var(--fg);
}
.linear-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid var(--surface);
  border-bottom: 1.5px solid var(--surface);
  transform: rotate(45deg);
}
.linear-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
}
.linear-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- SWITCH / TOGGLE ---------- */
.linear-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.linear-switch input { display: none; }
.linear-switch-track {
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.linear-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-thumb);
  transition: transform var(--transition-fast);
}
.linear-switch input:checked + .linear-switch-track { background: var(--fg); }
.linear-switch input:checked + .linear-switch-track::after { transform: translateX(12px); }

/* ---------- RADIO CARD (large clickable choice tile) ---------- */
.linear-radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.linear-radio-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linear-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.linear-radio-card:hover { border-color: var(--border-strong); }
.linear-radio-card:has(input:checked) {
  border-color: var(--fg);
  background: var(--bg);
}
.linear-radio-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.linear-radio-card-desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.linear-radio-card-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.linear-radio-card:has(input:checked) .linear-radio-card-mark {
  background: var(--fg);
  border-color: var(--fg);
}
.linear-radio-card:has(input:checked) .linear-radio-card-mark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
}

/* ---------- TABS / SEGMENTED CONTROL ---------- */
.linear-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 2px;
  gap: 0;
}
.linear-tab {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.linear-tab:hover { color: var(--fg); }
.linear-tab.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-tab-active);
}

/* Underline-style tabs (alternative) */
.linear-tabs--underline {
  display: flex;
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 0;
}
.linear-tabs--underline .linear-tab {
  padding: 8px 14px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.linear-tabs--underline .linear-tab.active {
  background: transparent;
  box-shadow: none;
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* ---------- EMPTY STATE ---------- */
.linear-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg-muted);
}
.linear-empty-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  color: var(--fg-subtle);
}
.linear-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.linear-empty-desc {
  font-size: 13px;
  color: var(--fg-muted);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ---------- FULL-PAGE ERROR (404 / 500 / etc.) ---------- */
.linear-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 48px 24px;
  gap: 12px;
}
.linear-error-page .linear-error-icon {
  font-size: 64px;
  line-height: 1;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.linear-error-page .linear-error-code {
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.02em;
}
.linear-error-page .linear-error-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px 0;
}
.linear-error-page .linear-error-message {
  font-size: 14px;
  color: var(--fg-muted);
  max-width: 480px;
  line-height: 1.5;
  margin: 0 0 16px 0;
}
.linear-error-page .linear-error-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}
.linear-error-page .linear-error-meta code {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
}
.linear-error-page .linear-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ---------- NCR-500 (the 500 error rendered as a self-filed NCR) ----------
   The 500 page IS a nonconformance report. Field labels, severity pill, meta
   strip, and section structure all mirror the real NCR view at
   app/features/ncr/templates/ncr/view.html so the joke (such as it is) lands
   without explanation. No new visual primitives — composes existing
   linear-card, linear-meta-strip, linear-pill, linear-dl, linear-form-
   section-label. This block only adds the document-stage width constraint,
   the title block, body paragraph width/leading, and the bottom action row. */
.linear-ncr-500-stage {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 16px;
}
.linear-ncr-500-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.linear-ncr-500-alert-code {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.linear-ncr-500-alert-body {
  font-size: 13px;
  line-height: 1.5;
}
.linear-ncr-500-alert-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.linear-ncr-500-prelude {
  font-size: 12.5px;
  margin: 24px 0 8px;
}
.linear-ncr-500-head {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
}
.linear-ncr-500-ref {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.linear-ncr-500-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.linear-ncr-500-meta {
  margin-bottom: 4px;
}
.linear-ncr-500-section {
  margin-top: 24px;
}
.linear-ncr-500-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
  max-width: 60ch;
}
.linear-ncr-500-dl {
  row-gap: 12px;
}
.linear-ncr-500-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .linear-ncr-500-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- DESCRIPTION LIST (key / value) ---------- */
.linear-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 13px;
}
.linear-dl dt {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  align-self: center;
}
.linear-dl dd { margin: 0; color: var(--fg); }

/* ---------- BANNER (dismissible larger notice; alt to flash) ---------- */
.linear-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 13px;
}
.linear-banner-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--fg-muted); }
.linear-banner-body { flex: 1; min-width: 0; }
.linear-banner-title { font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.linear-banner-desc { color: var(--fg-muted); line-height: 1.5; }
.linear-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.linear-banner--accent {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.linear-banner--accent .linear-banner-icon { color: var(--accent); }
.linear-banner--info    { border-color: var(--info);   background: var(--info-soft); }
.linear-banner--info    .linear-banner-icon { color: var(--info); }
.linear-banner--warn    { border-color: var(--warn);   background: var(--warn-soft); }
.linear-banner--warn    .linear-banner-icon { color: var(--warn); }
.linear-banner--success { border-color: var(--good);   background: var(--good-soft); }
.linear-banner--success .linear-banner-icon { color: var(--good); }
.linear-banner--danger  { border-color: var(--danger); background: var(--danger-soft); }
.linear-banner--danger  .linear-banner-icon { color: var(--danger); }

/* ---------- RESULT BANNER ----------
   Compact callout for inline form-result feedback (import/cleanup
   results in admin/data-management). Smaller than .linear-banner —
   12.5px text, 6px radius — and uses the var(--*-line) border tones
   we already ship. Apply one of the three modifiers per call. */
.linear-result-banner {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  border: 1px solid transparent;
}
.linear-result-banner--good   { background: var(--good-soft);   color: var(--good);   border-color: var(--good-line); }
.linear-result-banner--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.linear-result-banner--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

/* ---------- ICON BUTTON (square, icon-only) ---------- */
.linear-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.linear-icon-btn:hover { color: var(--fg); border-color: var(--border-strong); }
.linear-icon-btn--ghost { border-color: transparent; }
.linear-icon-btn--ghost:hover { background: var(--surface-hover); border-color: transparent; }

/* ---------- TREND DELTA ---------- */
.linear-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-muted);
}
.linear-delta--up   { color: var(--good); }
.linear-delta--down { color: var(--danger); }
.linear-delta--warn { color: var(--warn); }
.linear-delta::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.linear-delta--up::before   { border-bottom: 5px solid var(--good); }
.linear-delta--down::before { border-top: 5px solid var(--danger); }
.linear-delta--warn::before { border-top: 5px solid var(--warn); }
.linear-delta--flat::before { border-top: 5px solid currentColor; opacity: 0.4; }

/* ---------- PROGRESS BAR ---------- */
.linear-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-subtle);
  overflow: hidden;
  position: relative;
}
.linear-progress-fill {
  height: 100%;
  background: var(--fg);
  border-radius: inherit;
  transition: width var(--transition-base);
}
.linear-progress-fill--good   { background: var(--good); }
.linear-progress-fill--warn   { background: var(--warn); }
.linear-progress-fill--danger { background: var(--danger); }
.linear-progress-fill--accent { background: var(--accent); }

/* ---------- ACTIVITY FEED ---------- */
.linear-feed { display: flex; flex-direction: column; gap: 0; }
.linear-feed-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--divider);
  font-size: 13px;
  align-items: start;
}
.linear-feed-item:last-child { border-bottom: 0; }
.linear-feed-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.linear-feed-icon--good   { background: var(--good-soft);   color: var(--good); }
.linear-feed-icon--warn   { background: var(--warn-soft);   color: var(--warn); }
.linear-feed-icon--danger { background: var(--danger-soft); color: var(--danger); }
.linear-feed-icon--accent { background: var(--accent-soft); color: var(--accent); }
.linear-feed-body b { font-weight: 500; color: var(--fg); }
.linear-feed-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  margin-top: 2px;
}

/* ---------- PAGINATION ---------- */
.linear-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.linear-pagination .linear-icon-btn { width: 28px; height: 28px; }
.linear-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.linear-page-num:hover { background: var(--bg); color: var(--fg); }
.linear-page-num.active {
  border-color: var(--border);
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
}
.linear-page-ellipsis { color: var(--fg-subtle); padding: 0 2px; }
.linear-pagination-summary {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-left: 12px;
}

/* ---------- DROPDOWN MENU ---------- */
.linear-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: 4px;
  min-width: 180px;
  font-size: 13px;
}
.linear-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.linear-menu-item:hover { background: var(--bg-subtle); color: var(--fg); }
.linear-menu-item--danger { color: var(--danger); }
.linear-menu-divider { height: 1px; background: var(--divider); margin: 4px 2px; }
.linear-menu-label {
  padding: 6px 10px 2px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 600;
}

/* ---------- KEYBOARD SHORTCUT ---------- */
.linear-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  line-height: 1;
}

/* ---------- SAVE STATE INDICATOR ---------- */
.linear-save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}
.linear-save-state--saving { color: var(--fg-muted); }
.linear-save-state--saved  { color: var(--good); }
.linear-save-state--error  { color: var(--danger); }
.linear-save-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: linear-pulse 1.6s ease-in-out infinite;
}
.linear-save-state--saved .linear-save-state-dot,
.linear-save-state--error .linear-save-state-dot { animation: none; }
@keyframes linear-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ---------- BREADCRUMB (helper for breadcrumb top-bar block) ---------- */
.linear-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}
.linear-crumb a { color: var(--fg-muted); }
.linear-crumb a:hover { color: var(--fg); }
.linear-crumb .sep { color: var(--fg-subtle); font-size: 11px; }
.linear-crumb .current { color: var(--fg); font-weight: 500; }

/* ============================================================
 * INLINE-EDIT FIELD (linear_inline_edit.html macros)
 * Click-to-edit field cells used by detail pages.
 *
 * Pattern (matches Linear's own inline-edit):
 *   - No border/card chrome — plain text by default
 *   - Compact grey label, normal case
 *   - Click anywhere on the value to edit; pencil shows only on
 *     hover as a discoverability hint
 *   - Subtle hover tint for editable rows
 *   - Edit input matches the surrounding type scale, no stack shift
 * ============================================================ */
.linear-inline-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  margin: 0 -8px; /* negative margin lets the hover tint hug the column edge */
  border-radius: var(--radius);
  background: transparent;
  transition: background var(--transition-fast);
}
.linear-inline-field:hover { background: var(--surface-2); }

.linear-inline-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 16px;
}

.linear-inline-field-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.linear-inline-field-value {
  font-size: 13px;
  color: var(--fg);
  min-height: 22px;
  word-break: break-word;
  cursor: text;
  padding: 1px 0;
}
.linear-inline-field-value:empty::before {
  content: '—';
  color: var(--fg-subtle);
}
.linear-inline-field-value--strong { font-weight: 500; color: var(--fg); }

/* Read-only variant — same compact form, no hover tint, no cursor cue */
.linear-inline-field--readonly:hover { background: transparent; }
.linear-inline-field--readonly .linear-inline-field-value { cursor: default; }

/* Hide editor inputs until Alpine flips isEditing — works alongside x-cloak */
.linear-inline-field [x-cloak] { display: none !important; }

/* Pencil hidden by default; revealed on hover/focus-within. Sits in the
   field-head row aligned with the label. */
.linear-inline-field .linear-icon-btn {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.linear-inline-field:hover .linear-icon-btn,
.linear-inline-field:focus-within .linear-icon-btn {
  opacity: 1;
}
/* Don't reveal the pencil on read-only fields — there's nothing to click */
.linear-inline-field--readonly:hover .linear-icon-btn { opacity: 0; }

/* When entering edit mode, show inputs in-place at the same type scale */
.linear-inline-field .linear-input,
.linear-inline-field .linear-select,
.linear-inline-field .linear-textarea {
  font-size: 13px;
}

/* ============================================================
 * BOOTSTRAP-COMPAT SHIMS (.linear-app scoped)
 * ============================================================
 * Templates extending _base_linear.html may still contain Tabler /
 * Bootstrap markup (.card, .row, .col-*, .badge bg-*, utility classes)
 * via shared macros that haven't been migrated yet (card_header,
 * assignee_list, render_timeline, linked_items_panel, etc.).
 *
 * These shims style that legacy markup in Linear style ONLY when it
 * appears inside a .linear-app body. Legacy /legacy/* pages never
 * carry .linear-app, so they're unaffected — they keep the proper
 * Bootstrap rules from tabler.min.css.
 *
 * Drop scope-by-scope as macros get migrated. This is intentionally
 * a transitional layer.
 * ============================================================ */

/* Cards */
.linear-app .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  margin-bottom: 0;
}
.linear-app .card-header {
  background: transparent;
  border-bottom: 1px solid var(--divider);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.linear-app .card-header h1, .linear-app .card-header h2,
.linear-app .card-header h3, .linear-app .card-header h4,
.linear-app .card-header h5, .linear-app .card-header h6,
.linear-app .card-title { margin: 0; font-size: 13px; font-weight: 500; }
.linear-app .card-body  { padding: 16px; color: var(--fg); }
.linear-app .card-footer { background: transparent; border-top: 1px solid var(--divider); padding: 12px 16px; }
.linear-app .shadow, .linear-app .shadow-sm,
.linear-app .shadow-lg, .linear-app .shadow-xl { box-shadow: none !important; }

/* Bootstrap grid */
.linear-app .container, .linear-app .container-fluid {
  width: 100%; padding-right: 12px; padding-left: 12px; margin-right: auto; margin-left: auto;
}
.linear-app .row {
  display: flex; flex-wrap: wrap; margin-right: -8px; margin-left: -8px;
}
.linear-app .row > * {
  padding-right: 8px; padding-left: 8px; box-sizing: border-box;
}
.linear-app .row.g-1 { margin: -2px; } .linear-app .row.g-1 > * { padding: 2px; }
.linear-app .row.g-2 { margin: -4px; } .linear-app .row.g-2 > * { padding: 4px; }
.linear-app .row.g-3 { margin: -8px; } .linear-app .row.g-3 > * { padding: 8px; }
.linear-app .row.g-4 { margin: -12px; } .linear-app .row.g-4 > * { padding: 12px; }

.linear-app .col,
.linear-app .col-auto       { flex: 0 0 auto; width: auto; }
.linear-app .col-12         { flex: 0 0 100%; width: 100%; }
.linear-app .col-1          { flex: 0 0 8.333%;  width: 8.333%; }
.linear-app .col-2          { flex: 0 0 16.666%; width: 16.666%; }
.linear-app .col-3          { flex: 0 0 25%;     width: 25%; }
.linear-app .col-4          { flex: 0 0 33.333%; width: 33.333%; }
.linear-app .col-5          { flex: 0 0 41.666%; width: 41.666%; }
.linear-app .col-6          { flex: 0 0 50%;     width: 50%; }
.linear-app .col-8          { flex: 0 0 66.666%; width: 66.666%; }
.linear-app .col-9          { flex: 0 0 75%;     width: 75%; }
@media (min-width: 768px) {
  .linear-app .col-md-1     { flex: 0 0 8.333%;  width: 8.333%; }
  .linear-app .col-md-2     { flex: 0 0 16.666%; width: 16.666%; }
  .linear-app .col-md-3     { flex: 0 0 25%;     width: 25%; }
  .linear-app .col-md-4     { flex: 0 0 33.333%; width: 33.333%; }
  .linear-app .col-md-5     { flex: 0 0 41.666%; width: 41.666%; }
  .linear-app .col-md-6     { flex: 0 0 50%;     width: 50%; }
  .linear-app .col-md-7     { flex: 0 0 58.333%; width: 58.333%; }
  .linear-app .col-md-8     { flex: 0 0 66.666%; width: 66.666%; }
  .linear-app .col-md-9     { flex: 0 0 75%;     width: 75%; }
  .linear-app .col-md-10    { flex: 0 0 83.333%; width: 83.333%; }
  .linear-app .col-md-12    { flex: 0 0 100%;    width: 100%; }
}
@media (min-width: 992px) {
  .linear-app .col-lg-3     { flex: 0 0 25%;     width: 25%; }
  .linear-app .col-lg-4     { flex: 0 0 33.333%; width: 33.333%; }
  .linear-app .col-lg-6     { flex: 0 0 50%;     width: 50%; }
  .linear-app .col-lg-8     { flex: 0 0 66.666%; width: 66.666%; }
  .linear-app .col-lg-9     { flex: 0 0 75%;     width: 75%; }
}

/* Bootstrap utility classes — minimal subset that legacy macros use */
.linear-app .d-flex          { display: flex; }
.linear-app .d-inline        { display: inline; }
.linear-app .d-inline-block  { display: inline-block; }
.linear-app .d-block         { display: block; }
.linear-app .d-none          { display: none; }

/* Responsive display utilities — Bootstrap-compat. Without these,
   templates pairing `.collapse` with `.d-lg-block` (admin sidebar,
   settings sidebar, mobile sidebar) stay collapsed on every viewport
   because nothing overrides `.collapse { display: none }`. */
@media (min-width: 768px) {
  .linear-app .d-md-block  { display: block !important; }
  .linear-app .d-md-none   { display: none !important; }
  .linear-app .d-md-flex   { display: flex !important; }
  .linear-app .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
  .linear-app .d-lg-block  { display: block !important; }
  .linear-app .d-lg-none   { display: none !important; }
  .linear-app .d-lg-flex   { display: flex !important; }
  .linear-app .d-lg-inline-block { display: inline-block !important; }
}
.linear-app .flex-grow-1     { flex-grow: 1; }
.linear-app .flex-shrink-0   { flex-shrink: 0; }
.linear-app .justify-content-between { justify-content: space-between; }
.linear-app .justify-content-end     { justify-content: flex-end; }
.linear-app .justify-content-center  { justify-content: center; }
.linear-app .align-items-center      { align-items: center; }
.linear-app .text-center     { text-align: center; }
.linear-app .text-end        { text-align: right; }
.linear-app .text-decoration-none { text-decoration: none; }
.linear-app .text-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linear-app .gap-1 { gap: 4px; } .linear-app .gap-2 { gap: 8px; }
.linear-app .gap-3 { gap: 12px; } .linear-app .gap-4 { gap: 16px; }
.linear-app .mb-0 { margin-bottom: 0; } .linear-app .mb-1 { margin-bottom: 4px; }
.linear-app .mb-2 { margin-bottom: 8px; } .linear-app .mb-3 { margin-bottom: 12px; }
.linear-app .mb-4 { margin-bottom: 16px; }
.linear-app .mt-0 { margin-top: 0; } .linear-app .mt-1 { margin-top: 4px; }
.linear-app .mt-2 { margin-top: 8px; } .linear-app .mt-3 { margin-top: 12px; }
.linear-app .mt-4 { margin-top: 16px; }
.linear-app .me-1 { margin-right: 4px; } .linear-app .me-2 { margin-right: 8px; }
.linear-app .me-3 { margin-right: 12px; }
.linear-app .ms-1 { margin-left: 4px; } .linear-app .ms-2 { margin-left: 8px; }
.linear-app .ms-3 { margin-left: 12px; } .linear-app .ms-auto { margin-left: auto; }
.linear-app .p-0 { padding: 0; } .linear-app .p-1 { padding: 4px; }
.linear-app .p-2 { padding: 8px; } .linear-app .p-3 { padding: 12px; }
.linear-app .p-4 { padding: 16px; }
.linear-app .py-2 { padding-top: 8px; padding-bottom: 8px; }
.linear-app .py-3 { padding-top: 12px; padding-bottom: 12px; }
.linear-app .py-4 { padding-top: 16px; padding-bottom: 16px; }
.linear-app .px-2 { padding-right: 8px; padding-left: 8px; }
.linear-app .px-3 { padding-right: 12px; padding-left: 12px; }
.linear-app .pt-2 { padding-top: 8px; } .linear-app .pt-3 { padding-top: 12px; }
.linear-app .border  { border: 1px solid var(--border); }
.linear-app .border-top { border-top: 1px solid var(--border); }
.linear-app .rounded { border-radius: var(--radius); }
.linear-app .rounded-circle { border-radius: 50%; }
.linear-app .small  { font-size: 12px; }
.linear-app .fw-bold { font-weight: 600; }
.linear-app .fw-semibold { font-weight: 500; }
.linear-app .fst-italic { font-style: italic; }
.linear-app .fs-1 { font-size: 32px; }
.linear-app .fs-2 { font-size: 26px; }
.linear-app .fs-3 { font-size: 22px; }
.linear-app .fs-4 { font-size: 18px; }
.linear-app .fs-5 { font-size: 16px; }
.linear-app .fs-6 { font-size: 14px; }
.linear-app .text-muted, .linear-app .text-secondary { color: var(--fg-muted); }
.linear-app .text-danger   { color: var(--danger); }
.linear-app .text-success  { color: var(--good); }
.linear-app .text-warning  { color: var(--warn); }
.linear-app .text-info     { color: var(--info); }
.linear-app .text-primary  { color: var(--accent); }
.linear-app .text-white    { color: var(--surface); }
.linear-app .text-dark     { color: var(--fg); }
.linear-app .opacity-25 { opacity: 0.25; }
.linear-app .opacity-50 { opacity: 0.5; }
.linear-app hr { border: 0; border-top: 1px solid var(--divider); margin: 12px 0; opacity: 1; }

/* Bootstrap badges */
.linear-app .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.linear-app .bg-primary,   .linear-app .badge-primary   { background: var(--accent);     color: var(--surface); }
.linear-app .bg-success,   .linear-app .badge-success   { background: var(--good);       color: var(--surface); }
.linear-app .bg-warning,   .linear-app .badge-warning   { background: var(--warn);       color: var(--surface); }
.linear-app .bg-danger,    .linear-app .badge-danger    { background: var(--danger);     color: var(--surface); }
.linear-app .bg-info,      .linear-app .badge-info      { background: var(--info);       color: var(--surface); }
.linear-app .bg-secondary, .linear-app .badge-secondary { background: var(--bg-subtle);  color: var(--fg-muted); }
.linear-app .bg-light,     .linear-app .badge-light     { background: var(--bg-subtle);  color: var(--fg); }
.linear-app .badge.bg-light { color: var(--fg); }

/* Bootstrap buttons inside Linear pages — copy of bulk-bar override
 * but generic now (any .btn rendered by a legacy macro looks Linear). */
.linear-app .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.linear-app .btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--fg); }
.linear-app .btn-primary,
.linear-app .btn-dark { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.linear-app .btn-primary:hover,
.linear-app .btn-dark:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--surface); }
.linear-app .btn-warning { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.linear-app .btn-warning:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
.linear-app .btn-success { background: var(--good); color: var(--surface); border-color: var(--good); }
.linear-app .btn-danger  { background: var(--danger); color: var(--surface); border-color: var(--danger); }
.linear-app .btn-outline-primary,
.linear-app .btn-outline-secondary,
.linear-app .btn-outline-success,
.linear-app .btn-outline-warning,
.linear-app .btn-outline-danger {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
}
.linear-app .btn-outline-primary:hover { background: var(--fg);    color: var(--surface); border-color: var(--fg); }
.linear-app .btn-outline-success:hover { background: var(--good);  color: var(--surface); border-color: var(--good); }
.linear-app .btn-outline-warning:hover { background: var(--warn);  color: var(--surface); border-color: var(--warn); }
.linear-app .btn-outline-danger:hover  { background: var(--danger);color: var(--surface); border-color: var(--danger); }
.linear-app .btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.linear-app .btn-lg { height: 34px; padding: 0 14px; font-size: 14px; }
.linear-app .btn-group { display: inline-flex; gap: 4px; }
.linear-app .btn-group-sm > .btn { height: 26px; padding: 0 9px; font-size: 12px; }

/* List groups (used by quick-actions sidebar in NCR view) */
.linear-app .list-group {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.linear-app .list-group-flush {
  border: 0;
  border-radius: 0;
}
.linear-app .list-group-item {
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--divider);
  color: var(--fg);
  font-size: 13px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.linear-app .list-group-item:last-child { border-bottom: 0; }
.linear-app .list-group-item-action:hover { background: var(--bg); color: var(--fg); }

/* Bootstrap form controls — match linear-input chrome */
.linear-app .form-control,
.linear-app .form-select,
.linear-app input[type="text"]:not(.linear-input),
.linear-app input[type="email"]:not(.linear-input),
.linear-app input[type="password"]:not(.linear-input),
.linear-app input[type="number"]:not(.linear-input),
.linear-app input[type="search"]:not(.linear-input),
.linear-app input[type="tel"]:not(.linear-input),
.linear-app input[type="url"]:not(.linear-input),
.linear-app input[type="date"]:not(.linear-input),
.linear-app input[type="datetime-local"]:not(.linear-input),
.linear-app input[type="time"]:not(.linear-input),
.linear-app textarea:not(.linear-textarea):not(.linear-input),
.linear-app select:not(.linear-select) {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.linear-app textarea:not(.linear-textarea):not(.linear-input),
.linear-app .form-control[rows] {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}
.linear-app .form-control::placeholder,
.linear-app input::placeholder,
.linear-app textarea::placeholder { color: var(--fg-subtle); }
.linear-app .form-control:focus,
.linear-app .form-select:focus,
.linear-app input:not(.linear-input):focus,
.linear-app textarea:not(.linear-textarea):not(.linear-input):focus,
.linear-app select:not(.linear-select):focus {
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
  outline: none;
}
.linear-app .form-select,
.linear-app select:not(.linear-select) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='1.8'><polyline points='3,5 6,8 9,5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  padding-right: 28px;
  cursor: pointer;
}
.linear-app .form-control-sm,
.linear-app .form-select-sm { height: 28px; padding: 0 8px; font-size: 12px; }
.linear-app .form-control-lg,
.linear-app .form-select-lg { height: 36px; padding: 0 12px; font-size: 14px; }

.linear-app .form-label,
.linear-app .col-form-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.linear-app .form-label.small,
.linear-app .form-label .small,
.linear-app .col-form-label-sm {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.linear-app .form-text,
.linear-app .form-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
}

.linear-app .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 4px;
  min-height: auto;
}
.linear-app .form-check-inline {
  display: inline-flex;
  margin-right: 16px;
}
.linear-app .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  accent-color: var(--fg);
}
.linear-app .form-check-input[type="radio"] { border-radius: 50%; }
.linear-app .form-check-input:checked {
  background: var(--fg);
  border-color: var(--fg);
}
.linear-app .form-check-input:checked[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid var(--surface);
  border-bottom: 1.5px solid var(--surface);
  transform: rotate(45deg);
}
.linear-app .form-check-input:checked[type="radio"]::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
}
.linear-app .form-check-input:focus {
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
  outline: none;
}
.linear-app .form-check-label { color: var(--fg); font-size: 13px; padding: 0; }

.linear-app .input-group {
  display: flex;
  position: relative;
  width: 100%;
}
.linear-app .input-group > .form-control,
.linear-app .input-group > .form-select { flex: 1 1 auto; }
.linear-app .input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.linear-app .invalid-feedback,
.linear-app .form-control.is-invalid + .invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}
.linear-app .form-control.is-invalid,
.linear-app .form-select.is-invalid { border-color: var(--danger); }
.linear-app .form-control.is-invalid:focus,
.linear-app .form-select.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Tables */
.linear-app .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fg);
}
.linear-app .table thead th {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.linear-app .table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
}
.linear-app .table tbody tr:hover td { background: var(--bg); }
.linear-app .table-responsive { overflow-x: auto; }

/* ============================================================
 * BULK-ACTION BAR — Linear override
 * The bulk-actions.js script injects its own <style> block hardcoding
 * a navy gradient and Bootstrap .btn-light / .btn-danger inside the
 * bar. On Linear pages, override with surface + Linear button styling.
 * Scoped under .linear-app so legacy pages keep the original look.
 * ============================================================ */
.linear-app .bulk-action-bar {
  background: var(--surface);
  color: var(--fg);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-menu);
  padding: 12px 0;
}
.linear-app .bulk-action-bar .selected-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
/* Buttons inside the bar — re-style the Bootstrap variants in Linear */
.linear-app .bulk-action-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  opacity: 1;
}
.linear-app .bulk-action-bar .btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}
.linear-app .bulk-action-bar .btn-light {
  background: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}
.linear-app .bulk-action-bar .btn-light:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}
.linear-app .bulk-action-bar .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
  opacity: 1;
}
.linear-app .bulk-action-bar .btn-danger:hover {
  background: var(--btn-danger-hover);
  border-color: var(--btn-danger-hover);
  color: var(--surface);
  opacity: 1;
}

/* Checkbox sizing — bulk-actions.js styles them at 18px globally;
   inside Linear pages, scale down to match form-check sizing. */
.linear-app .row-checkbox,
.linear-app #select-all {
  width: 16px;
  height: 16px;
  accent-color: var(--fg);
}

/* Bootstrap utility shims used by the JS-injected bar markup
   (d-flex / justify-content-between / gap / p-0 / text-white).
   Scoped to the bar so the shims don't leak elsewhere. */
.linear-app .bulk-action-bar .container-fluid {
  max-width: var(--linear-content-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.linear-app .bulk-action-bar .container-fluid > div { display: flex; align-items: center; }
.linear-app .bulk-action-bar .gap-3 { gap: 14px; }
.linear-app .bulk-action-bar .gap-2 { gap: 8px; }
.linear-app .bulk-action-bar .p-0  { padding: 0; }
.linear-app .bulk-action-bar .fw-bold { font-weight: 600; }
.linear-app .bulk-action-bar .text-white { color: var(--fg-muted); }

.linear-app .bulk-action-bar .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--fg-muted);
  padding: 0;
  height: auto;
  min-height: 0;
  font-size: 13px;
  text-decoration: underline;
}
.linear-app .bulk-action-bar .btn-link:hover {
  background: transparent;
  color: var(--fg);
}

/* Dropdown — Bootstrap CSS rules replicated minimally so the
   "Change Status" menu sits and toggles correctly on Linear pages. */
.linear-app .dropdown { position: relative; }
.linear-app .dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  z-index: 1100;
}
.linear-app .dropdown-menu.show { display: block; }
.linear-app .dropdown-menu li > a,
.linear-app .dropdown-menu li > button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 13px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.linear-app .dropdown-menu li > a:hover,
.linear-app .dropdown-menu li > button:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}
.linear-app .dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom: 0;
  vertical-align: middle;
}

/* ============================================================
 * BOOTSTRAP-MODAL COMPAT
 * ============================================================
 * Templates extending _base_linear.html may include legacy Bootstrap
 * modal markup (e.g. components/draft_recovery_modal.html) via
 * {% include %}. The new base doesn't load Tabler/Bootstrap CSS, so
 * `.modal` would render visible by default. These rules replicate the
 * minimum behaviour Bootstrap provides — hidden until .show is added.
 *
 * Drop these once every legacy modal include is replaced with a
 * Linear-native equivalent.
 * ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.45);
  outline: 0;
}
.modal.show { display: block; }
.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 500px;
  pointer-events: none;
}
.modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: 800px; }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 3.5rem);
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  outline: 0;
  box-shadow: var(--shadow-menu);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
}
.modal-title { font-size: 15px; font-weight: 600; margin: 0; }
.modal-body  { padding: 18px; font-size: 13px; color: var(--fg); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--divider);
}
.modal .btn-close {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--fg-subtle);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;                /* override Bootstrap's .btn-close { opacity: .5 } */
}
.modal .btn-close::before { content: "×"; }
.modal .btn-close:hover { color: var(--fg); }

/* ============================================================
 * LINEAR QUICK-MODAL — overlay used by the quick-create flows
 * (NCR / CAPA / supplier / customer / parts / ECO / 8D / etc.).
 * Driven by the Alpine.js `linearQuickModal()` component in
 * app/static/js/linear-quick-modal.js — Alpine toggles `.active`
 * on the backdrop, which is the on/off switch for the whole stack.
 * The inner panel reuses the Bootstrap-style modal classes already
 * styled above so we don't duplicate header/body/footer/btn-close
 * rules. Replaces the old `.linear-quick-modal*` family with a flat
 * Linear look while keeping the macro API + Alpine behaviour
 * identical.
 * ============================================================ */
.linear-app .linear-quick-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  background: rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  padding: 1.75rem 1rem;
}
.linear-app .linear-quick-modal-backdrop.active { display: block; }

/* Shake animation: triggered by the Alpine component on validation
 * error. Adds a 4-keyframe horizontal nudge that fires once. */
@keyframes linear-quick-modal-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.linear-app .linear-quick-modal-panel--shake {
  animation: linear-quick-modal-shake 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .linear-app .linear-quick-modal-panel--shake { animation: none; }
}

/* Form-grid column-count modifiers used by the quick-modal
 * ``modal_grid`` macro. Override the default 12-column track so
 * children placed via ``modal_field`` (which doesn't set a span)
 * land naturally in two or three equal columns. */
.linear-app .linear-form-grid--2col { grid-template-columns: repeat(2, 1fr); }
.linear-app .linear-form-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* ``--full`` marker — used by quick-modal field macros to flag
 * "spans the entire row" regardless of which grid track we're in. */
.linear-app .linear-form-grid > .linear-field--full,
.linear-app .linear-form-grid--2col > .linear-field--full,
.linear-app .linear-form-grid--3col > .linear-field--full {
  grid-column: 1 / -1;
}

/* Section heading spacing inside a quick-modal body. */
.linear-app .linear-quick-modal-section {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* ---------- AUTH PAGES (centered single card) ---------- */
.linear-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.linear-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.linear-auth-card--wide  { max-width: 640px; }
.linear-auth-card--wider { max-width: 720px; }

/* Mobile: modals and auth cards fill the viewport with a small gutter
 * instead of clipping against their hardcoded max-widths. */
@media (max-width: 600px) {
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: 100vw;
    margin: 8px;
  }
  .modal-body   { padding: 14px; }
  .modal-header,
  .modal-footer { padding: 12px 14px; }
}

@media (max-width: 480px) {
  .linear-auth {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
  }
  .linear-auth-card,
  .linear-auth-card--wide,
  .linear-auth-card--wider {
    max-width: 100vw;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 24px 16px;
  }
}

/* Wizard step copy (eyebrow / title / sub) */
.linear-step-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.linear-step-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 8px;
  line-height: 1.25;
}
.linear-step-sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: 24px;
}
.linear-step-sub b { color: var(--fg); font-weight: 600; }

/* Form section (a labelled group inside a step) */
.linear-form-section {
  border-top: 1px solid var(--divider);
  padding-top: 18px;
  margin-top: 18px;
}
.linear-form-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}

/* Wizard navigation footer (Back / Next on opposite ends) */
.linear-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.linear-wizard-nav--right { justify-content: flex-end; }

/* Invite row pattern (email + role side-by-side) */
.linear-invite-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.linear-invite-row + .linear-invite-row { margin-top: 8px; }
@media (max-width: 600px) {
  .linear-invite-row { grid-template-columns: 1fr; }
}
.linear-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.linear-auth-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
.linear-auth-sub {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}
.linear-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  margin: 4px 0;
}
.linear-auth-btn-full {
  width: 100%;
  justify-content: center;
  height: 34px;
}
.linear-auth-divider::before,
.linear-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.linear-auth-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}
.linear-auth-footer a { color: var(--fg-muted); }
.linear-auth-footer a:hover { color: var(--fg); }
.linear-auth-footer .sep { color: var(--fg-subtle); }
.linear-auth-link {
  font-size: 13px;
  color: var(--fg-muted);
  align-self: center;
}
.linear-auth-link:hover { color: var(--fg); }

/* Password field with reveal-button on the right */
.linear-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.linear-input-group .linear-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  flex: 1;
}
.linear-input-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.linear-input-group-btn:hover { color: var(--fg); border-color: var(--border-strong); }
.linear-input-group:focus-within .linear-input,
.linear-input-group:focus-within .linear-input-group-btn {
  border-color: var(--fg);
}

/* ---------- UTILITIES ---------- */
.linear-divider {
  height: 1px;
  background: var(--divider);
  margin: 16px 0;
}
.linear-stack { display: flex; flex-direction: column; gap: 12px; }
.linear-stack--lg { gap: 24px; }
.linear-row { display: flex; align-items: center; gap: 8px; }
.linear-row--between { justify-content: space-between; }
.linear-text-muted { color: var(--fg-muted); }
.linear-text-subtle { color: var(--fg-subtle); }
.linear-text-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.linear-spacer { flex: 1; }
.linear-hidden-mobile { }
@media (max-width: 760px) {
  .linear-hidden-mobile { display: none !important; }
}

/* ---------- ASSIGNEE AVATAR CIRCLE (initials chip) ----------
   Used by the shared assignee_modal component to show the existing
   assignees' initials. Tinted with the accent-soft token so the
   circle reads as decoration rather than competing with the rest of
   the Linear palette. Scope: ``.linear-app`` only — Tabler chrome is
   unaffected. */
.linear-app .avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* ---------- KPI CARDS (used by supplier detail KPI grid) ---------- */
.linear-app .kpi-card { text-align: center; padding: 1rem; border-radius: 0.5rem; }
.linear-app .kpi-card .kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.linear-app .kpi-card .kpi-label { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.25rem; }
.linear-app .tab-count { font-size: 0.7rem; }
.linear-app .hover-opacity-100 { transition: opacity 0.2s ease; }

/* Translucent backdrop tint when a Bootstrap modal / offcanvas opens. */
.linear-app .modal-backdrop.show,
.linear-app .offcanvas-backdrop.show {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.2);
}

/* ---------- ACTIVITY TIMELINE (Linear styling) ----------
   Used by the shared `components/timeline.html` component on NCR /
   CAPA / Audit detail pages. Vertical list of events with a 24px
   round icon node and a 1px guide line connecting them. Mirrors the
   Linear convention of left-anchored timelines with a continuous rail
   instead of separate cards. */
.linear-app .timeline-container { font-family: var(--font-sans); font-size: 13px; }
.linear-app .timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.linear-app .timeline-filters .btn-check { display: none; }
.linear-app .timeline-filters .btn {
  padding: 5px 10px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.linear-app .timeline-filters .btn:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.linear-app .timeline-filters .btn-check:checked + .btn {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--border-strong);
}
.linear-app .timeline-filters .btn .ti { margin-right: 4px; }

.linear-app .timeline {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}
/* Vertical guide line down the left, behind the icon nodes */
.linear-app .timeline::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 1px;
  background: var(--border);
}
.linear-app .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 0 0 18px 0;
}
.linear-app .timeline-item:last-child { padding-bottom: 0; }
.linear-app .timeline-marker {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.linear-app .timeline-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.linear-app .timeline-icon .ti { font-size: 13px; }
/* Icon-color modifier classes (text-success, text-info etc. emitted by
   the timeline_service) → tint the icon node */
.linear-app .timeline-icon.text-success { color: var(--good); border-color: var(--good); }
.linear-app .timeline-icon.text-danger  { color: var(--danger); border-color: var(--danger); }
.linear-app .timeline-icon.text-warning { color: var(--warn); border-color: var(--warn); }
.linear-app .timeline-icon.text-info,
.linear-app .timeline-icon.text-primary { color: var(--accent); border-color: var(--accent); }
.linear-app .timeline-icon.text-secondary { color: var(--fg-muted); }

.linear-app .timeline-content { min-width: 0; }
.linear-app .timeline-card {
  background: transparent;
  padding: 2px 0 0;
}
.linear-app .timeline-header { margin-bottom: 4px; }
.linear-app .timeline-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 2px;
  line-height: 1.4;
}
.linear-app .timeline-title .ti { margin-right: 4px; }
.linear-app .timeline-meta {
  font-size: 11px;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.linear-app .timeline-meta .ti { margin-right: 3px; }
.linear-app .timeline-body p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.linear-app .timeline-body .btn-link {
  background: none;
  border: 0;
  color: var(--accent);
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
}
.linear-app .timeline-body pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 11px;
  margin-top: 4px;
}
/* Per-field diff for expanded timeline events. Replaces the raw
   JSON `<pre>` dumps with a row-per-field "old → new" layout. */
.linear-app .timeline-diff {
  margin: 6px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linear-app .timeline-diff-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 12px;
  align-items: baseline;
}
.linear-app .timeline-diff-key {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.linear-app .timeline-diff-vals {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.linear-app .timeline-diff-old {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-color: var(--fg-subtle);
  text-decoration-thickness: 1px;
}
.linear-app .timeline-diff-arrow {
  color: var(--fg-subtle);
  font-size: 11px;
  font-family: var(--font-mono);
}
.linear-app .timeline-diff-new {
  color: var(--fg);
  font-weight: 500;
}
.linear-app .timeline-diff-empty {
  color: var(--fg-subtle);
  font-style: italic;
  font-size: 11px;
}
.linear-app .timeline-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}
.linear-app .timeline-empty .display-1 { font-size: 32px; opacity: 0.4; }

/* Bootstrap collapse compat: panes are hidden by default; the JS shim in
   _base_linear.html toggles `.show` on click of the trigger. Mirrors the
   modal/dropdown/tab pattern. */
.linear-app .collapse:not(.show) { display: none; }
.linear-app .collapse.show { display: block; }

/* ---------- 8D WORKFLOW STEPPER (Linear styling) ----------
   Earmarked for `capa/_8d_stepper.html` once the CAPA feature is
   migrated off Bootstrap. Renders the D0-D8 progression at the top of
   the CAPA detail page: 32px round node per step, step name underneath,
   1px connector line between adjacent nodes. States: completed (green
   check), current (accent ring), future (muted). Suffixed `--8d` so the
   bare `.linear-stepper` namespace stays available for the auth-style
   numbered stepper. */
.linear-stepper--8d {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  /* Vertical padding gives the current-step halo (3px box-shadow) breathing
     room. Without it, `overflow-x: auto` implicitly clips the y-axis and the
     top of the halo gets shaved off. */
  padding: 6px 0;
  gap: 0;
  overflow-x: auto;
}
.linear-stepper--8d-item {
  position: relative;
  flex: 1 1 0;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}
.linear-stepper--8d-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  font-feature-settings: 'tnum' 1;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  position: relative;
  z-index: 1;
}
.linear-stepper--8d-label {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-muted);
  letter-spacing: var(--tracking-tight);
}
/* connector line — sits behind the node, fills space to the next node */
.linear-stepper--8d-connector {
  position: absolute;
  top: 16px; /* node centre */
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
/* completed: filled green, white check, green connector to next */
.linear-stepper--8d-item.is-completed .linear-stepper--8d-node {
  background: var(--good);
  border-color: var(--good);
  color: var(--surface);
}
.linear-stepper--8d-item.is-completed .linear-stepper--8d-label {
  color: var(--good);
  font-weight: 500;
}
.linear-stepper--8d-item.is-completed .linear-stepper--8d-connector {
  background: var(--good);
}
/* current: accent ring, accent label */
.linear-stepper--8d-item.is-current .linear-stepper--8d-node {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216, 84, 26, 0.12);
}
.linear-stepper--8d-item.is-current .linear-stepper--8d-label {
  color: var(--fg);
  font-weight: 600;
}
/* future: subtle, muted (default styles already cover) */

/* mobile: shrink labels but keep nodes legible */
@media (max-width: 760px) {
  .linear-stepper--8d {
    gap: 4px;
  }
  .linear-stepper--8d-item {
    min-width: 52px;
  }
  .linear-stepper--8d-label {
    font-size: 10px;
  }
}

/* ---------- STATE-TRANSITION BUTTONS (Linear styling) ----------
   The shared `components/state_transition_buttons.html` macro emits
   buttons with class `transition-btn transition-btn-{primary|danger|
   success|warning}`. The legacy CSS for those classes lived in a
   page-specific stylesheet that isn't loaded under `_base_linear.html`.
   We re-style them here scoped to .linear-app so NCR / CAPA / Audit
   detail pages all get the same Linear treatment without touching the
   shared macro. */
.linear-app .state-transition-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.linear-app .transition-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  text-align: left;
}
.linear-app .transition-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong, #d4d4d4);
}
.linear-app .transition-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.linear-app .transition-btn .transition-icon {
  color: var(--fg-muted);
  flex-shrink: 0;
}
.linear-app .transition-btn .transition-label {
  flex: 1;
}
/* Primary (forward workflow progression) — accent border + accent label */
.linear-app .transition-btn-primary {
  border-color: var(--accent);
  color: var(--accent);
}
.linear-app .transition-btn-primary:hover {
  background: rgba(216, 84, 26, 0.06);
  border-color: var(--accent);
}
.linear-app .transition-btn-primary .transition-icon {
  color: var(--accent);
}
/* Danger (cancel) — red */
.linear-app .transition-btn-danger {
  color: var(--danger);
  border-color: var(--border);
}
.linear-app .transition-btn-danger:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: var(--danger);
}
.linear-app .transition-btn-danger .transition-icon {
  color: var(--danger);
}
/* Success (close) — green */
.linear-app .transition-btn-success {
  color: var(--good);
  border-color: var(--border);
}
.linear-app .transition-btn-success:hover {
  background: rgba(22, 163, 74, 0.06);
  border-color: var(--good);
}
.linear-app .transition-btn-success .transition-icon {
  color: var(--good);
}
/* Warning (other terminal) — amber */
.linear-app .transition-btn-warning {
  color: var(--warn);
  border-color: var(--border);
}
.linear-app .transition-btn-warning:hover {
  background: rgba(180, 83, 9, 0.06);
  border-color: var(--warn);
}
.linear-app .transition-btn-warning .transition-icon {
  color: var(--warn);
}

/* "No transitions available" notice */
.linear-app .state-transition-buttons + p,
.linear-app .alert.alert-info {
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0;
}

/* ---------- BOOTSTRAP NAV-TABS / TAB-CONTENT COMPAT (Linear styling) ----------
   Bootstrap's `.nav .nav-tabs` + `.tab-pane fade show active` pattern,
   restyled to match Linear and made functional via the JS shim in
   _base_linear.html. Scoped under .linear-app so unmigrated pages with
   real Bootstrap loaded keep their behavior. */
.linear-app .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  gap: 4px;
}
.linear-app .nav-tabs .nav-item {
  margin: 0;
}
.linear-app .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
  white-space: nowrap;
}
.linear-app .nav-tabs .nav-link:hover {
  color: var(--fg);
}
.linear-app .nav-tabs .nav-link.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  background: transparent;
}
.linear-app .nav-tabs .nav-link .badge {
  font-size: 11px;
  padding: 2px 6px;
}
/* card-header-tabs sits flush inside a card-header — negate the header padding
   so the tab underline aligns with the card border. */
.linear-app .card-header-tabs {
  margin: -12px -16px -13px -16px;
  border-bottom: 0;
}
.linear-app .card-header-tabs .nav-link {
  padding: 12px 14px;
}

/* tab-content / tab-pane: hidden by default, shown when both .show + .active.
   Bootstrap's `.fade` adds opacity transitions which we keep cosmetically. */
.linear-app .tab-content > .tab-pane {
  display: none;
}
.linear-app .tab-content > .tab-pane.active {
  display: block;
}
.linear-app .tab-pane.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.linear-app .tab-pane.fade.show {
  opacity: 1;
}

/* ==========================================================================
   Section labels — small mono caps used to group fields inside a card
   ========================================================================== */
.linear-section-label {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.linear-section-help {
  font-size: 12px;
  color: var(--fg-muted);
  margin: -4px 0 10px;
}
.linear-section + .linear-section { margin-top: 16px; }

/* ==========================================================================
   Stepper — numbered horizontal progress (1 → 2 → 3) for wizards/onboarding
   ========================================================================== */
.linear-stepper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.linear-stepper-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.linear-stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--border);
  transition: background 150ms, color 150ms, border-color 150ms;
}
.linear-stepper-num.active {
  background: var(--fg);
  color: var(--surface);
  border-color: var(--fg);
}
.linear-stepper-num.complete,
.linear-stepper-num.completed {
  background: var(--good, var(--success, #16a34a));
  color: var(--surface);
  border-color: var(--good, var(--success, #16a34a));
}
.linear-stepper-label {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
}
.linear-stepper-step:has(.linear-stepper-num.active) .linear-stepper-label {
  color: var(--fg);
  font-weight: 600;
}
.linear-stepper-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 12px;
}
.linear-stepper-rule.complete,
.linear-stepper-rule.completed {
  background: var(--good, var(--success, #16a34a));
}

/* ==========================================================================
   Strength meter — password strength + any 0–100 % bar
   ========================================================================== */
.linear-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.linear-strength-track {
  flex: 1;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.linear-strength-bar {
  height: 100%;
  width: 0;
  transition: width 200ms ease, background 200ms ease;
  background: var(--danger);
}
.linear-strength-label {
  font-size: 11px;
  color: var(--fg-muted);
  font-family: var(--font-mono, "Geist Mono", monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 56px;
  text-align: right;
}

/* ==========================================================================
   Checklist — two-state list items (.met / .unmet) for password rules,
   onboarding tasks, completion lists, etc.
   ========================================================================== */
.linear-checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.linear-checklist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
}
.linear-checklist-item .linear-checklist-on  { display: none;   color: var(--good, var(--success, #16a34a)); }
.linear-checklist-item .linear-checklist-off { display: inline; color: var(--fg-subtle); }
.linear-checklist-item.met { color: var(--fg); }
.linear-checklist-item.met .linear-checklist-on  { display: inline; }
.linear-checklist-item.met .linear-checklist-off { display: none;   }
@media (max-width: 480px) {
  .linear-checklist { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Check tile grid — multi-select "tap to toggle" tiles
   ========================================================================== */
.linear-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.linear-check-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 100ms, background 100ms;
  background: var(--surface);
}
.linear-check-tile:hover { border-color: var(--border-strong); }
.linear-check-tile input[type="checkbox"],
.linear-check-tile input[type="radio"] { accent-color: var(--accent); }
.linear-check-tile:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
@media (max-width: 480px) {
  .linear-check-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Checkbox row — single inline checkbox + label (e.g. Terms & Conditions)
   ========================================================================== */
.linear-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}
.linear-checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
}
.linear-checkbox-row label {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
  cursor: pointer;
}
.linear-checkbox-row label a { color: var(--fg); text-decoration: underline; }
.linear-checkbox-row.is-invalid input[type="checkbox"] {
  outline: 2px solid var(--danger);
}

/* ==========================================================================
   Input with suffix — ``yourcompany.example.com`` pattern
   ========================================================================== */
.linear-input-suffix-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.linear-input-suffix-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.linear-input-suffix-group .linear-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.linear-input-suffix-group .linear-input:focus { box-shadow: none; }
.linear-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 13px;
  border-left: 1px solid var(--border);
}

/* ==========================================================================
   Meta strip — labelled summary tiles at the top of an info card
   (accept-invitation: Email + Role; report header: Period + Owner; etc.)
   ========================================================================== */
.linear-meta-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.linear-meta-strip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.linear-meta-strip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-weight: 600;
}
.linear-meta-strip-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-meta-strip-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
}
@media (max-width: 480px) {
  .linear-meta-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .linear-meta-strip-sep { display: none; }
}

/* ==========================================================================
   Empty-state badge — large circular badge that holds an icon for marketing
   pages, "we're closed", "all caught up", etc. Distinct from
   ``.linear-empty-icon`` (the small inline-icon variant used inside a
   ``.linear-empty`` block — see top of file).
   ========================================================================== */
.linear-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.linear-empty-badge .linear-icon--lg { width: 28px; height: 28px; }

/* ==========================================================================
   Wizard step container — show/hide controlled by JS adding ``.active``
   ========================================================================== */
.linear-wizard-step { display: none; }
.linear-wizard-step.active { display: block; }
.linear-wizard-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .linear-stepper { gap: 4px; }
  .linear-stepper-step .linear-stepper-label { display: none; }
}

/* ==========================================================================
   Generic helpers introduced for the Audits migration.
   These are intentionally *neutral* — no feature prefix — so other features
   can reuse them.
   ========================================================================== */

/* Hide an element entirely (used in JS-toggled fields). Wins over inline display. */
.linear-app .linear-hidden { display: none !important; }

/* Block-width buttons inside narrow sidebars. */
.linear-btn--block { display: inline-flex; width: 100%; justify-content: center; }

/* Card variants */
.linear-card--inset {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.linear-card--filter-strip {
  margin-bottom: 16px;
  background: var(--surface);
}

/* Filter row — auto-fit grid for filter selects on list pages. */
.linear-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Form layout — 12-column grid usable across all forms. */
.linear-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 16px;
}
.linear-form-grid > .linear-field--span-12 { grid-column: span 12; }
.linear-form-grid > .linear-field--span-8  { grid-column: span 8; }
.linear-form-grid > .linear-field--span-6  { grid-column: span 6; }
.linear-form-grid > .linear-field--span-4  { grid-column: span 4; }
.linear-form-grid > .linear-field--span-3  { grid-column: span 3; }
@media (max-width: 760px) {
  .linear-form-grid > .linear-field--span-8,
  .linear-form-grid > .linear-field--span-6,
  .linear-form-grid > .linear-field--span-4,
  .linear-form-grid > .linear-field--span-3 { grid-column: span 12; }
}

/* Inline radio cards (audit category, similar). */
.linear-radio-cards--inline {
  flex-direction: row;
  flex-wrap: wrap;
}
.linear-radio-cards--inline > .linear-radio-card { flex: 1 1 240px; }

/* Two-column detail/sidebar layout used by view, calendar, checklist,
   reports, supplier_history. Stacks on small viewports. */
.linear-grid {
  display: grid;
  gap: 16px;
}
.linear-grid--detail {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}
.linear-grid--two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 960px) {
  .linear-grid--detail,
  .linear-grid--two { grid-template-columns: 1fr; }
}

/* Horizontal scroll wrapper for wide tables — replaces ``.table-responsive``. */
.linear-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Phones: every ``.linear-table`` keeps a sensible inner width and its
 * direct parent scrolls horizontally. Most consuming templates render
 * tables inside ``.linear-card--flush`` or call the table_open macro
 * which wraps in a ``.linear-card``. The ``:has()`` selector promotes
 * whichever direct ancestor is in the DOM to a scroll container without
 * needing each template to remember the ``.linear-table-scroll``
 * wrapper. */
@media (max-width: 760px) {
  .linear-table { min-width: 600px; }
  .linear-app *:has(> table.linear-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Metric-grid variants — caps the auto-fit min so the numbers stay legible. */
.linear-metric-grid--audits          { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.linear-metric-grid--audit-findings  { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.linear-metric-grid--reports         { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Severity picker (audit finding form, can be reused by NCR/CAPA later). */
.linear-severity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.linear-severity-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
  outline: none;
}
.linear-severity-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.linear-severity-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.linear-severity-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Linkable feed item (calendar upcoming list). */
.linear-feed-item--link {
  text-decoration: none;
  color: inherit;
  display: flex;
}
.linear-feed-item--link:hover { background: var(--surface-hover); }

/* ==========================================================================
   Calendar grid (audits calendar page; reusable as a generic month grid).
   ========================================================================== */
.linear-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}
.linear-calendar thead th {
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.linear-calendar tbody td {
  border: 1px solid var(--border);
  vertical-align: top;
  padding: 8px;
  height: 110px;
  width: calc(100% / 7);
  background: var(--surface);
}
.linear-calendar-cell--today { background: var(--accent-soft); }
.linear-calendar-cell--out   { background: var(--bg); color: var(--fg-subtle); }

.linear-calendar-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.linear-calendar-day { font-weight: 600; font-size: 12px; }
.linear-calendar-cell--today .linear-calendar-day { color: var(--accent); }
.linear-calendar-cell--out   .linear-calendar-day { color: var(--fg-subtle); font-weight: 400; }

.linear-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70px;
  overflow-y: auto;
}
.linear-calendar-event {
  display: block;
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 11px;
  line-height: 1.3;
  border-left: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linear-calendar-event:hover { background: var(--surface-hover); }
.linear-calendar-event--good   { border-left-color: var(--good);   background: var(--good-soft); }
.linear-calendar-event--info   { border-left-color: var(--info);   background: var(--info-soft); }
.linear-calendar-event--warn   { border-left-color: var(--warn);   background: var(--warn-soft); }
.linear-calendar-event--danger { border-left-color: var(--danger); background: var(--danger-soft); }

@media (max-width: 760px) {
  .linear-calendar tbody td { height: auto; min-height: 80px; }
}

/* ==========================================================================
   Mobile checklist (audits/mobile_checklist.html).
   Targets phones — touch targets ≥44px, sticky progress, soft cards.
   The class names .checklist-item-card, .result-btn, .selected, .completed,
   .notes-field, .photo-capture-btn, .photo-preview-container,
   .photo-preview-list, .photo-preview-item, .progress-bar, .progress-text,
   .section-header, .recently-updated, .item-question, .item-number,
   .item-clause, .current-result-display, .team-members-container,
   .sticky-progress are preserved as-is — `mobile_audit.js` queries them.
   ========================================================================== */
.linear-mobile-checklist { padding: 4px; }
.linear-mobile-checklist__header {
  background: linear-gradient(135deg, var(--bg-elev), var(--accent-soft));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.linear-mobile-checklist__progress {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.linear-mobile-checklist__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.linear-mobile-checklist__stat {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
}
.linear-mobile-checklist__stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.linear-mobile-checklist__stat-label {
  display: block;
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.linear-mobile-checklist__section + .linear-mobile-checklist__section { margin-top: 12px; }
.linear-mobile-checklist .section-header {
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 12px 0 8px;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
}
.linear-mobile-checklist .section-header:active { background: var(--surface-hover); }
.linear-mobile-checklist__item.checklist-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  position: relative;
  transition: border-color 0.15s ease;
}
.linear-mobile-checklist__item.checklist-item-card.completed {
  border-left: 3px solid var(--good);
}
.linear-mobile-checklist__item.checklist-item-card.recently-updated {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}
.linear-mobile-checklist__item.checklist-item-card.recently-updated::after {
  content: 'Recently updated';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--warn);
  color: var(--surface);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.linear-mobile-checklist .item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  background: var(--surface-2);
  border-radius: 50%;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-mono);
}
.linear-mobile-checklist .item-clause {
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.linear-mobile-checklist .item-question {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  margin: 6px 0;
  color: var(--fg);
}
.linear-mobile-checklist__result-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.linear-mobile-checklist__result-btn {
  flex: 1 1 calc(33% - 6px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.linear-mobile-checklist__result-btn:active { transform: scale(0.97); }
.linear-mobile-checklist__result-btn.selected {
  border-width: 3px;
  font-weight: 600;
}
.linear-mobile-checklist__result-btn--good.selected   { border-color: var(--good);   background: var(--good-soft);   color: var(--good); }
.linear-mobile-checklist__result-btn--warn.selected   { border-color: var(--warn);   background: var(--warn-soft);   color: var(--warn); }
.linear-mobile-checklist__result-btn--danger.selected { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.linear-mobile-checklist__result-btn--info.selected   { border-color: var(--info);   background: var(--info-soft);   color: var(--info); }

.linear-mobile-checklist .photo-capture-btn {
  border: 2px dashed var(--border);
  background: var(--surface-2);
  min-height: 44px;
}
.linear-mobile-checklist .photo-capture-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.linear-mobile-checklist .hidden-file-input { display: none; }
.linear-mobile-checklist__photos {
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.linear-mobile-checklist__photos .photo-preview-item {
  position: relative;
  display: inline-block;
  margin: 4px;
}
.linear-mobile-checklist__photos .photo-preview-img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.linear-mobile-checklist__photos .photo-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  padding: 0;
  background: var(--danger);
  color: var(--surface);
  border: 2px solid var(--surface);
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.linear-mobile-checklist__bottom-spacer { height: 80px; }

/* Floating action button — used by the mobile checklist. */
.linear-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  text-decoration: none;
}
.linear-fab:hover { transform: scale(1.04); }

/* ==========================================================================
   Side list — flush list of items inside a card sidebar (used by dashboards
   for "expiring soon", "training gaps", "quick links" panels). Replaces the
   Bootstrap `.list-group .list-group-flush` pattern.
   ========================================================================== */
.linear-side-list {
  display: flex;
  flex-direction: column;
}
.linear-side-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: background var(--transition-fast);
  min-height: 44px;
}
.linear-side-list-item:last-child { border-bottom: 0; }
a.linear-side-list-item:hover { background: var(--bg); color: var(--fg); }
.linear-side-list-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.linear-side-list-item-title {
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-side-list-item-sub {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.linear-side-list-item-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.linear-side-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}

/* ==========================================================================
   Matrix table — 2-D data grid with sticky first column and bold gridlines.
   Used for qualification matrices, role x permission grids, week x slot
   schedules. Lives inside a .linear-card--flush wrapper for the rounded
   border + scroll containment.
   ========================================================================== */
.linear-matrix-wrap {
  overflow-x: auto;
}
.linear-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.linear-matrix thead th {
  background: var(--surface-2);
  color: var(--fg-muted);
  font-weight: 500;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.linear-matrix thead th:last-child { border-right: 0; }
.linear-matrix tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  vertical-align: middle;
}
.linear-matrix tbody td:last-child { border-right: 0; }
.linear-matrix tbody tr:last-child td { border-bottom: 0; }
.linear-matrix tbody tr:hover td { background: var(--bg); }
.linear-matrix-rowhead {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 500;
  color: var(--fg);
  z-index: 1;
}
.linear-matrix tbody tr:hover .linear-matrix-rowhead { background: var(--bg); }
.linear-matrix-cell-center { text-align: center; }
.linear-matrix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ==========================================================================
   Key-value table — vertical list of label/value rows. Use inside a
   .linear-card for compact "Overview" / "Record info" style summaries.
   Replaces ad-hoc <table class="table table-sm"> usage in legacy templates.
   ========================================================================== */
.linear-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.linear-kv tr + tr th,
.linear-kv tr + tr td {
  border-top: 1px solid var(--divider);
}
.linear-kv th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 8px 12px;
  width: 50%;
}
.linear-kv td {
  padding: 8px 12px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Metric value tints — tint the .linear-metric-value to surface emphasis
   (e.g. red for gaps, green for completed). Used by small-stat dashboards.
   ========================================================================== */
.linear-metric--good   .linear-metric-value { color: var(--good); }
.linear-metric--warn   .linear-metric-value { color: var(--warn); }
.linear-metric--danger .linear-metric-value { color: var(--danger); }
.linear-metric--info   .linear-metric-value { color: var(--info); }
.linear-metric--accent .linear-metric-value { color: var(--accent); }

/* ==========================================================================
   Filter row — generic horizontal arrangement of filters above a list.
   Used by notifications list page; reusable for any list filter strip.
   ========================================================================== */
.linear-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Notification list rows — used by /notifications. A linear-table row
   variant didn't fit because each row needs a stacked title/message/meta
   block plus action buttons; this is a flex-row card-list pattern.
   ========================================================================== */
.linear-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linear-notif-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--transition-fast);
}
.linear-notif-row:last-child { border-bottom: 0; }
.linear-notif-row:hover { background: var(--bg); }
.linear-notif-row-marker {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.linear-notif-row--unread .linear-notif-row-marker { background: var(--accent); }
.linear-notif-row--unread .linear-notif-row-title { color: var(--fg); font-weight: 600; }

.linear-notif-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linear-notif-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.linear-notif-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.4;
}
.linear-notif-row-message {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.linear-notif-row-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 4px;
}
.linear-notif-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .linear-notif-row { flex-direction: column; align-items: stretch; }
  .linear-notif-row-actions { justify-content: flex-end; }
}

.linear-notif-pagination {
  margin-top: 16px;
  justify-content: center;
}

/* ==========================================================================
   Pill — icon-only variant. Square-ish chip used on the preferences page
   to show "active / off" status. Reusable wherever a pill needs to render
   only an icon at the same size as text pills.
   ========================================================================== */
.linear-pill--icon-only {
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Preference matrix — table layout for the notification preferences page.
   The base linear-table styles work; these tweaks just adjust density and
   hint text rendering.
   ========================================================================== */
.linear-pref-help {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.55;
}
.linear-pref-help strong { color: var(--fg); font-weight: 600; }

.linear-pref-tabs {
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
}

.linear-pref-pane { display: none; }
.linear-pref-pane.active { display: block; }

.linear-pref-matrix { width: 100%; }
.linear-pref-type-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.linear-pref-type-desc {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  line-height: 1.45;
}

.linear-pref-quiet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: end;
}
@media (max-width: 720px) {
  .linear-pref-quiet-grid { grid-template-columns: 1fr; }
}

.linear-pref-actions {
  margin-top: 8px;
}

/* ==========================================================================
   Digest preview — a centered, email-like preview of a digest message.
   ========================================================================== */
.linear-digest {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.linear-digest-header {
  margin-bottom: 16px;
}
.linear-digest-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.linear-digest-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 12px;
  line-height: 1.25;
}
.linear-digest-greeting {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
}
.linear-digest-intro {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 24px;
}
.linear-digest-intro strong { color: var(--fg); font-weight: 600; }

.linear-digest-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.linear-digest-summary-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.linear-digest-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.linear-digest-category {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 28px 0;
}
.linear-digest-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
}
.linear-digest-category-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}

.linear-digest-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.linear-digest-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.linear-digest-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.linear-digest-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.linear-digest-item-message {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}
.linear-digest-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.linear-digest-item-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.linear-digest-item-link:hover { color: var(--accent); text-decoration: underline; }

.linear-digest-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.linear-digest-footer-text {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.55;
}

/* ==========================================================================
   Heatmap — N x M coloured cell grid for risk matrices, severity matrices,
   priority matrices, etc. The wrapping ``.linear-heatmap`` is a CSS-grid
   container; cells come in five intensity tones (low, info, warn, danger,
   plus a neutral fallback) plus optional axis-label cells. Used by Risk
   Register matrix.html. Reusable for any score-banded NxM grid.
   ========================================================================== */
.linear-heatmap {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}
.linear-heatmap-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  padding: 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.linear-heatmap-cell--low    { background: var(--good-soft);   border-color: color-mix(in srgb, var(--good)   20%, transparent); }
.linear-heatmap-cell--info   { background: var(--info-soft);   border-color: color-mix(in srgb, var(--info)   20%, transparent); }
.linear-heatmap-cell--warn   { background: var(--warn-soft);   border-color: color-mix(in srgb, var(--warn)   20%, transparent); }
.linear-heatmap-cell--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.linear-heatmap-cell--empty  { opacity: 0.55; }
.linear-heatmap-cell-count {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.linear-heatmap-cell-list { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.linear-heatmap-cell-list a {
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}
.linear-heatmap-cell-list a:hover { text-decoration: underline; }
.linear-heatmap-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px;
  text-align: center;
}
.linear-heatmap-axis--corner { background: transparent; }
.linear-heatmap-axis--row    { writing-mode: horizontal-tb; }
.linear-heatmap-axis-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}

/* ==========================================================================
   Quadrant — 2x2 grid of cards, each themed (good/warn/danger/info).
   Used for SWOT analysis, prioritisation matrices, etc.
   Compose with .linear-card inside each quadrant cell.
   ========================================================================== */
.linear-quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.linear-quadrant-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.linear-quadrant-cell--good   { border-top: 3px solid var(--good); }
.linear-quadrant-cell--warn   { border-top: 3px solid var(--warn); }
.linear-quadrant-cell--danger { border-top: 3px solid var(--danger); }
.linear-quadrant-cell--info   { border-top: 3px solid var(--info); }
.linear-quadrant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.linear-quadrant-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.linear-quadrant-title-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-muted);
}
.linear-quadrant-body { padding: 8px 14px; flex: 1; }
@media (max-width: 720px) {
  .linear-quadrant { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Item list — vertical stack of compact list rows used inside a card body.
   Each row has a leading title, optional subtitle, and a trailing meta
   slot (badge, count). Used by SWOT card bodies, related-item lists, etc.
   ========================================================================== */
.linear-item-list { display: flex; flex-direction: column; }
.linear-item-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.linear-item-list-row:last-child { border-bottom: 0; }
.linear-item-list-main { flex: 1; min-width: 0; }
.linear-item-list-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.linear-item-list-title a { color: inherit; text-decoration: none; font-weight: 600; }
.linear-item-list-title a:hover { color: var(--accent); }
.linear-item-list-subtitle {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-item-list-trail { flex-shrink: 0; }

/* ==========================================================================
   Score block — large numeric value + label, used for risk scores,
   counts, KPIs that need to dominate the visual.
   ========================================================================== */
.linear-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
}
.linear-score-value {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--fg);
}
.linear-score-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.linear-score-sub {
  font-size: 12px;
  color: var(--fg-muted);
}
.linear-score--good   .linear-score-value { color: var(--good); }
.linear-score--warn   .linear-score-value { color: var(--warn); }
.linear-score--danger .linear-score-value { color: var(--danger); }
.linear-score--info   .linear-score-value { color: var(--info); }

/* ==========================================================================
   Utility classes — extracted from inline style="..." attributes shipped by
   the Audits / Training / Notifications / Risk-Register migrations. Keeps
   templates declarative ("what is this thing") and pushes presentation
   ("how does it look") into CSS. No feature prefixes; reusable everywhere
   inside .linear-app.
   ========================================================================== */

/* Spacing — gap (use on any flex/grid container) */
.linear-app .linear-gap-4  { gap: 4px; }
.linear-app .linear-gap-6  { gap: 6px; }
.linear-app .linear-gap-8  { gap: 8px; }
.linear-app .linear-gap-12 { gap: 12px; }
.linear-app .linear-gap-16 { gap: 16px; }

/* Spacing — margin */
.linear-app .linear-m-0   { margin: 0; }
.linear-app .linear-mt-0  { margin-top: 0; }
.linear-app .linear-mt-4  { margin-top: 4px; }
.linear-app .linear-mt-8  { margin-top: 8px; }
.linear-app .linear-mt-12 { margin-top: 12px; }
.linear-app .linear-mt-16 { margin-top: 16px; }
.linear-app .linear-mt-24 { margin-top: 24px; }
.linear-app .linear-mb-0  { margin-bottom: 0; }
.linear-app .linear-mb-2  { margin-bottom: 2px; }
.linear-app .linear-mb-4  { margin-bottom: 4px; }
.linear-app .linear-mb-6  { margin-bottom: 6px; }
.linear-app .linear-mb-8  { margin-bottom: 8px; }
.linear-app .linear-mb-12 { margin-bottom: 12px; }
.linear-app .linear-mb-16 { margin-bottom: 16px; }
.linear-app .linear-mb-24 { margin-bottom: 24px; }
.linear-app .linear-ml-6  { margin-left: 6px; }
.linear-app .linear-ml-8  { margin-left: 8px; }

/* Spacing — padding */
.linear-app .linear-p-0          { padding: 0; }
.linear-app .linear-py-16        { padding-top: 16px; padding-bottom: 16px; }
.linear-app .linear-pl-18        { padding-left: 18px; }
/* "Pill-large" padding — used by oversized risk-score pills. */
.linear-app .linear-pad-pill-lg  { padding: 4px 10px; }

/* Vertical-axis margin shortcuts (top + bottom). */
.linear-app .linear-my-6  { margin-top: 6px; margin-bottom: 6px; }
.linear-app .linear-mt-6  { margin-top: 6px; }

/* Typography — font size */
.linear-app .linear-text-10 { font-size: 10px; }
.linear-app .linear-text-11 { font-size: 11px; }
.linear-app .linear-text-12 { font-size: 12px; }
.linear-app .linear-text-13 { font-size: 13px; }
.linear-app .linear-text-14 { font-size: 14px; }
.linear-app .linear-text-15 { font-size: 15px; }
.linear-app .linear-text-16 { font-size: 16px; }
.linear-app .linear-text-18 { font-size: 18px; }

/* Typography — weight */
.linear-app .linear-fw-500 { font-weight: 500; }
.linear-app .linear-fw-600 { font-weight: 600; }

/* Typography — alignment */
.linear-app .linear-text-center { text-align: center; }
.linear-app .linear-text-right  { text-align: right; }

/* Typography — colour */
.linear-app .linear-text-good    { color: var(--good); }
.linear-app .linear-text-warn    { color: var(--warn); }
.linear-app .linear-text-danger  { color: var(--danger); }
.linear-app .linear-text-info    { color: var(--info); }
.linear-app .linear-text-accent  { color: var(--accent); }
.linear-app .linear-text-inherit { color: inherit; }
.linear-app .linear-text-faint   { color: var(--fg-faint); }
.linear-app .linear-text-subtle  { color: var(--fg-subtle); }
.linear-app .linear-italic       { font-style: italic; }

/* Typography — wrapping */
.linear-app .linear-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-app .linear-text-nowrap    { white-space: nowrap; }
.linear-app .linear-text-preline   { white-space: pre-line; }
.linear-app .linear-text-underline { text-decoration: underline; }

/* Display */
.linear-app .linear-display-none         { display: none; }
.linear-app .linear-display-inline       { display: inline; }
.linear-app .linear-display-block        { display: block; }
.linear-app .linear-display-inline-block { display: inline-block; }
.linear-app .linear-display-inline-flex  { display: inline-flex; }

/* Grid layouts used by Risk-Register one-offs. The auto-* variants take a
   ``min-col`` and let the browser wrap. The 5-col-heatmap variant pins a
   110px label column then 5 equal-width data cells. */
.linear-app .linear-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.linear-app .linear-grid-auto-160 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.linear-app .linear-grid-cols-auto-160 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.linear-app .linear-grid-cols-auto-180 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.linear-app .linear-grid-cols-heatmap-5 {
  grid-template-columns: 110px repeat(5, minmax(0, 1fr));
}
/* FMEA 10-column heatmap variant: 1 row-axis + 10 data columns. Used by
   FMEA view.html for the severity × detection matrix. The data cells
   shrink-to-fit so the matrix scales without overflow inside the
   .linear-table-scroll wrapper. */
.linear-app .linear-heatmap-grid-11col {
  grid-template-columns: 56px repeat(10, minmax(0, 1fr));
}

/* Card with a coloured left accent strip (used by risk-register/view). */
.linear-app .linear-card--accent-info { border-left: 3px solid var(--info); }

/* Progress fill driven by a CSS custom property (--pct) set inline by the
   template — keeps the dynamic value out of style="width:..." form. */
.linear-app .linear-progress-fill--pct { width: var(--pct, 0%); }

/* Flex helpers */
.linear-app .linear-flex-1          { flex: 1; }
.linear-app .linear-flex-wrap       { flex-wrap: wrap; }
.linear-app .linear-justify-center  { justify-content: center; }
.linear-app .linear-justify-between { justify-content: space-between; }
.linear-app .linear-justify-end     { justify-content: flex-end; }
.linear-app .linear-align-start     { align-items: flex-start; }
.linear-app .linear-stack-tight {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linear-app .linear-stack-loose {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sizing — full width helper (100%). Distinct from `.linear-w-100` which is
   a fixed 100px width. */
.linear-app .linear-w-full { width: 100%; }

/* Sizing — fixed widths (px) */
.linear-app .linear-w-40  { width: 40px; }
.linear-app .linear-w-60  { width: 60px; }
.linear-app .linear-w-80  { width: 80px; }
.linear-app .linear-w-90  { width: 90px; }
.linear-app .linear-w-100 { width: 100px; }
.linear-app .linear-w-110 { width: 110px; }
.linear-app .linear-w-120 { width: 120px; }
.linear-app .linear-w-130 { width: 130px; }
.linear-app .linear-w-150 { width: 150px; }
.linear-app .linear-w-200 { width: 200px; }

/* Sizing — fixed widths (%) */
.linear-app .linear-w-pct-16 { width: 16%; }

/* Sizing — min/max widths */
.linear-app .linear-mw-200    { max-width: 200px; }
.linear-app .linear-mw-240    { max-width: 240px; }
.linear-app .linear-mw-300    { max-width: 300px; }
.linear-app .linear-mw-320    { max-width: 320px; }
.linear-app .linear-mw-880    { max-width: 880px; }
.linear-app .linear-mw-1080   { max-width: 1080px; }
.linear-app .linear-min-w-200 { min-width: 200px; }

/* Borders */
.linear-app .linear-no-border { border: 0; }
.linear-app .linear-no-radius { border-radius: 0; }
.linear-app .linear-divider-top {
  border-top: 1px solid var(--divider);
  border-bottom: 0;
}

/* Misc */
.linear-app .linear-cursor-grab   { cursor: grab; }
.linear-app .linear-overflow-x    { overflow-x: auto; }
.linear-app .linear-opacity-50    { opacity: 0.5; }
.linear-app .linear-h-80          { height: 80px; }
.linear-app .linear-h-250         { height: 250px; }
.linear-app .linear-h-300         { height: 300px; }
.linear-app .linear-h-400         { height: 400px; }

/* Chart container — wraps a Chart.js <canvas> so the chart can grow to fit
   the parent while Chart.js handles its own responsive sizing. */
.linear-app .linear-chart {
  position: relative;
  width: 100%;
}
.linear-app .linear-chart--sm  { height: 250px; }
.linear-app .linear-chart--md  { height: 300px; }
.linear-app .linear-chart--lg  { height: 400px; }
.linear-app .linear-valign-middle { vertical-align: middle; }

/* Rule line — replaces inline-styled <hr> with a flush divider */
.linear-app .linear-rule {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Compound: a card header that sits at the *bottom* of a card needs a top
   divider replacing its default bottom border (used in training/dashboard). */
.linear-app .linear-card-header--bottom {
  border-top: 1px solid var(--divider);
  border-bottom: 0;
}

/* ==========================================================================
   Additional utilities contributed by the Scorecards migration (second
   batch). Neutral; reusable across features. The bulk of Scorecards' utility
   block was duplicate of the existing utility block above and was discarded
   on merge — these are the genuinely new ones.
   ========================================================================== */

/* Uppercase eyebrow / overline text. */
.linear-app .linear-text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
}

/* Column-span helpers for `.linear-form-grid` (12-col internal grid). Lets a
   field opt out of the auto layout. Mobile collapses everything to full width. */
.linear-app .linear-form-grid > .linear-field--col-3  { grid-column: span 3; }
.linear-app .linear-form-grid > .linear-field--col-4  { grid-column: span 4; }
.linear-app .linear-form-grid > .linear-field--col-6  { grid-column: span 6; }
.linear-app .linear-form-grid > .linear-field--col-8  { grid-column: span 8; }
.linear-app .linear-form-grid > .linear-field--col-12 { grid-column: span 12; }
@media (max-width: 720px) {
  .linear-app .linear-form-grid > [class*="linear-field--col"] { grid-column: span 12; }
}

/* Card footer — block-level companion to .linear-card-header. */
.linear-app .linear-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Larger pill (used by scorecards summary score pills). */
.linear-app .linear-pill--lg {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Side-list extensions — eyebrow label + value for KV-style rows. */
.linear-app .linear-side-list-item-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.linear-app .linear-side-list-item-value {
  font-size: 13px;
  color: var(--fg);
}

/* Chart-canvas wrapper — caps height so Chart.js doesn't over-stretch on
   wide viewports. Pair with `<canvas class="linear-chart-canvas">`. */
.linear-app .linear-chart-canvas { max-height: 400px; width: 100%; }

/* Score modifiers — large size for hero numbers; inline form for strips. */
.linear-app .linear-score--lg .linear-score-value { font-size: 48px; }
.linear-app .linear-score--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 0;
}

/* ==========================================================================
   Drop zone — drag-drop file upload target. Click to browse, drop files
   to upload. JS toggles `.linear-dropzone--active` class while user
   drags files over the target. The original `#dropzone` ID is preserved
   so the existing DocumentUploadManager + Playwright tests keep working.
   ========================================================================== */
.linear-dropzone {
  min-height: 200px;
  padding: 32px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}
.linear-dropzone:hover {
  border-color: var(--fg-muted);
  background: var(--surface);
}
.linear-dropzone--active,
.linear-dropzone.dropzone-active {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}
.linear-dropzone-icon {
  width: 36px;
  height: 36px;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}
.linear-dropzone--active .linear-dropzone-icon,
.linear-dropzone.dropzone-active .linear-dropzone-icon {
  color: var(--accent);
}
.linear-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.linear-dropzone-sub {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.linear-dropzone-hint {
  font-size: 12px;
  color: var(--fg-subtle);
  line-height: 1.5;
  max-width: 420px;
}

/* Density helpers used inside dropzone copy */
.linear-app .linear-stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   Quick-view document modal — full-screen overlay with iframe/image viewer.
   Consumed by openQuickView() in app/static/js/documents/quick-view.js.
   Lives outside .linear-app scope so it works wherever the JS is loaded.
   ========================================================================== */
.quick-view-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.quick-view-modal.is-open { display: flex; }
.quick-view-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(960px, 100%);
  height: min(860px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-menu);
}
.quick-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}
.quick-view-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.quick-view-body {
  flex: 1;
  overflow: auto;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-view-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface);
}
.quick-view-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.quick-view-fallback {
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--fg-muted);
  font-size: 13px;
}

/* ==========================================================================
   STAT CARD — richer dashboard tile component, distinct from `.linear-metric`.

   When to use which:
   - `.linear-metric`        : simple KPI tile. Label on top (uppercase eyebrow),
                               big value below. Use inside `.linear-metric-grid`
                               for headline KPIs on every list / detail page.
   - `.linear-stat-card`     : the dashboard hero tile. Adds: top icon row,
                               trend delta pill (up/down/warn/flat), value
                               fraction suffix (`/100`, `%`, `ms`), footer
                               caption, optional sparkline canvas. Use on the
                               main dashboard, admin dashboard, scheduler,
                               login-attempts, reminders pages.

   Both fill the same niche; pick by feature need, not by feature area.
   ========================================================================== */

/* Row container — flex by default, --auto for grid auto-fit. */
.linear-app .linear-stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.linear-app .linear-stat-row > .linear-stat-card { flex: 1 1 200px; }
.linear-app .linear-stat-row--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.linear-app .linear-stat-row--auto > .linear-stat-card { flex: unset; }

/* Card container. */
.linear-app .linear-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* Anchor variant — clickable card. */
.linear-app a.linear-stat-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

/* Top — icon + label row. */
.linear-app .linear-stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* Eyebrow label (icon optional inline). */
.linear-app .linear-stat-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.linear-app .linear-stat-card-label .linear-icon { width: 14px; height: 14px; }

/* Value + optional trailing delta. */
.linear-app .linear-stat-card-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Big number. */
.linear-app .linear-stat-card-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Smaller suffix glued to the right of the value: "/100", "%", "ms". */
.linear-app .linear-stat-card-value-frac {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-left: 2px;
}

/* Trend delta pill. */
.linear-app .linear-stat-card-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.linear-app .linear-stat-card-delta--up   { color: var(--good);   background: var(--good-soft); }
.linear-app .linear-stat-card-delta--down { color: var(--danger); background: var(--danger-soft); }
.linear-app .linear-stat-card-delta--warn { color: var(--warn);   background: var(--warn-soft); }
.linear-app .linear-stat-card-delta--flat { color: var(--fg-muted); background: var(--surface-2); }

/* Footer caption. */
.linear-app .linear-stat-card-foot {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: -2px;
}

/* Sparkline canvas slot. */
.linear-app .linear-stat-card-spark {
  height: 32px;
  margin: 2px -4px 0;
}
.linear-app .linear-stat-card-spark canvas { width: 100% !important; height: 100% !important; }

/* Variant for cards that include a sparkline — small layout tweak. */
.linear-app .linear-stat-card--with-sparkline { padding-bottom: 14px; }


/* =========================================================================
 * HELP CENTER (/help/*)
 *
 * Sticky TOC sidebar item, content sections, prose blocks, and inline
 * callout banners used by the help and getting-started guides.
 * ========================================================================= */

/* Sticky table-of-contents (left rail) */
.linear-app .linear-toc {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 6px;
}
.linear-app .linear-toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.linear-app .linear-toc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.linear-app .linear-toc-item:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.linear-app .linear-toc-item i {
  flex: 0 0 16px;
  font-size: 14px;
  color: var(--fg-muted);
}
.linear-app .linear-toc-item:hover i { color: var(--fg); }
.linear-app .linear-toc-item--guide {
  background: var(--surface-2);
}
.linear-app .linear-toc-item--guide:hover {
  background: var(--surface-3, var(--surface-2));
}

/* Help section spacing */
.linear-app .linear-help-section {
  margin-bottom: 24px;
}

/* Long-form prose inside .linear-card-body — applies sane defaults to
   raw <h*>, <p>, <ul>, <ol>, <a>, <code>, <pre>, <table> children so
   marketing-style content reads correctly without per-element classes. */
.linear-app .linear-prose { color: var(--fg); font-size: 14px; line-height: 1.6; }
.linear-app .linear-prose > *:first-child { margin-top: 0; }
.linear-app .linear-prose > *:last-child  { margin-bottom: 0; }
.linear-app .linear-prose p { margin: 0 0 12px; }
.linear-app .linear-prose .lead {
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 14px;
}
.linear-app .linear-prose h2,
.linear-app .linear-prose h3,
.linear-app .linear-prose h4,
.linear-app .linear-prose h5,
.linear-app .linear-prose h6 {
  color: var(--fg);
  font-weight: 600;
  margin: 20px 0 8px;
}
.linear-app .linear-prose h2 { font-size: 18px; }
.linear-app .linear-prose h3 { font-size: 16px; }
.linear-app .linear-prose h4 { font-size: 14px; }
.linear-app .linear-prose h5 { font-size: 13px; }
.linear-app .linear-prose h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
.linear-app .linear-prose ul,
.linear-app .linear-prose ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.linear-app .linear-prose li { margin-bottom: 4px; }
.linear-app .linear-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.linear-app .linear-prose a:hover { border-bottom-color: var(--accent); }
.linear-app .linear-prose code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--fg);
}
.linear-app .linear-prose pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.linear-app .linear-prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.linear-app .linear-prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.linear-app .linear-prose strong { color: var(--fg); font-weight: 600; }

/* Inline callout / advisory banner used inside prose ("Tip:", "Note:",
   "Warning:", etc.). Mirrors Bootstrap .alert-* roles in the legacy
   templates. Use as: <div class="linear-callout linear-callout--info">. */
.linear-app .linear-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 12px 0;
}
.linear-app .linear-callout > i {
  flex: 0 0 16px;
  margin-top: 2px;
  font-size: 16px;
}
.linear-app .linear-callout > div { flex: 1 1 auto; min-width: 0; }
.linear-app .linear-callout strong { color: var(--fg); }
.linear-app .linear-callout a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.linear-app .linear-callout a:hover { border-bottom-color: var(--accent); }

.linear-app .linear-callout--info    { border-left-color: var(--info);    background: var(--info-soft, var(--surface-2)); }
.linear-app .linear-callout--info > i    { color: var(--info); }
.linear-app .linear-callout--success { border-left-color: var(--good);    background: var(--good-soft, var(--surface-2)); }
.linear-app .linear-callout--success > i { color: var(--good); }
.linear-app .linear-callout--warning { border-left-color: var(--warn);    background: var(--warn-soft, var(--surface-2)); }
.linear-app .linear-callout--warning > i { color: var(--warn); }
.linear-app .linear-callout--danger  { border-left-color: var(--danger);  background: var(--danger-soft, var(--surface-2)); }
.linear-app .linear-callout--danger > i  { color: var(--danger); }
.linear-app .linear-callout--neutral { border-left-color: var(--border-strong); }

/* Card accent left-strip variants (mirror linear-card--accent-info pattern). */
.linear-app .linear-card--accent-good   { border-left: 3px solid var(--good); }
.linear-app .linear-card--accent-warn   { border-left: 3px solid var(--warn); }
.linear-app .linear-card--accent-danger { border-left: 3px solid var(--danger); }
.linear-app .linear-card--accent-accent { border-left: 3px solid var(--accent); }

/* Row alignment helpers (linear-row is display:flex with default flex-start). */
.linear-app .linear-row--end   { justify-content: flex-end; }
.linear-app .linear-row--between { justify-content: space-between; }
.linear-app .linear-row--center { justify-content: center; }


/* =========================================================================
 * ERP field-mappings drag-and-drop
 *
 * Used by app/features/erp/templates/erp_admin/field_mappings.html. Each
 * mapping is rendered as `.mapping-row.linear-card` and HTML5 drag-and-drop
 * is wired up in-page; the JS toggles `.dragging` on the source row and
 * `.drag-over` on the target. These rules supply the visual feedback that
 * was lost when the original inline <style> block was dropped during the
 * Linear-style migration.
 * ========================================================================= */
.linear-app .mapping-row {
  transition: box-shadow 0.2s ease, opacity 0.2s ease, border-top-color 0.2s ease;
  cursor: move;
}
.linear-app .mapping-row:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.linear-app .mapping-row.dragging { opacity: 0.5; }
.linear-app .mapping-row.drag-over { border-top: 3px solid var(--accent); }
.linear-app .drag-handle { font-size: 1.5rem; color: var(--fg-muted); }


/* ==========================================================================
   Detail-page widgets — neutral, reusable classes contributed by the
   RMA detail migration. Each is small enough to live in this catch-all
   block rather than its own section; pick the one closest to your use
   case and reuse before adding a feature-prefixed variant.
   ========================================================================== */

/* Stepper sub-line — small mono date stamp under each stage label.
   Lives next to `.linear-stepper--8d-label` and inherits the muted tone. */
.linear-app .linear-stepper--8d-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--fg-subtle);
  letter-spacing: 0;
}

/* Stage description list — used by RMA Processing Details + any other
   detail card that needs vertically-grouped "Approval / Shipment /
   Receipt" sub-sections, each with its own heading + key/value rows. */
.linear-app .linear-stage-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.linear-app .linear-stage-block {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 4px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.linear-app .linear-stage-block:first-child {
  padding-top: 0;
  border-top: 0;
}
.linear-app .linear-stage-block .linear-stage-heading {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: var(--tracking-tight);
}
.linear-app .linear-stage-block dt {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
  align-self: center;
}
.linear-app .linear-stage-block dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg);
  align-self: center;
}

/* Attachment list — vertical list of compact rows inside a sidebar card.
   Each row is filename (truncated) + a type pill, separated by a hairline. */
.linear-app .linear-attach-list {
  display: flex;
  flex-direction: column;
}
.linear-app .linear-attach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  color: var(--fg);
  min-width: 0;
}
.linear-app .linear-attach-row:last-child { border-bottom: 0; }

/* Comment-list wrapper — flat vertical stack of comment rows. Pairs with
   the canonical `.linear-comment` / `--internal` / `--last` family below.
   The comment classes themselves are defined once, in the next block. */
.linear-app .linear-comment-list {
  display: flex;
  flex-direction: column;
}
.linear-app #mappings-container { min-height: 200px; }

/* ==========================================================================
   USER AVATAR — small initials-circle for table cells. Tinted with the
   accent-soft token so the avatar reads as quiet decoration on the
   Linear palette. Pairs visually with ``.linear-app .avatar-circle``
   and ``.linear-sidebar-foot-avatar`` — keep the three in sync if any
   one changes. Replaces the saturated accent→warn gradient that used
   to compete with the rest of the page.
   ========================================================================== */
.linear-app .linear-user-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

/* Empty-state cell for tables — centered "no rows yet" message inside a
   <td colspan="N">. Replaces the inline padding/colour pair. */
.linear-app .linear-empty-row {
  text-align: center;
  padding: 32px;
  color: var(--fg-subtle);
}

/* Small caption row beneath a primary link/title in tables — secondary
   description or schedule string. Sits at 11.5px (between the 11 and 12
   utilities) to match the existing scheduler-dashboard density. */
.linear-app .linear-job-caption {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 2px;
}

/* ==========================================================================
   Comment row component.

   Stacked discussion thread item used inside .linear-card-body. The base
   `.linear-comment` is a row separated by a bottom divider; the `--last`
   modifier removes the divider on the final entry. The `--internal`
   modifier surfaces internal (private / supplier-hidden) comments with a
   surface-2 background, padding, and rounded corners so they read as a
   distinct block — replaces the legacy inline `style="background:
   var(--surface-2)..."` block.
   ========================================================================== */
.linear-app .linear-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.linear-app .linear-comment--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.linear-app .linear-comment--internal {
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--radius-md);
  border-bottom: 0;
  margin-bottom: 12px;
}
.linear-app .linear-comment-body { flex: 1; min-width: 0; }
.linear-app .linear-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.linear-app .linear-comment-text {
  font-size: 13px;
  color: var(--fg);
  white-space: pre-wrap;
}
/* The delete form sits inside the comment-head row and is pushed to the
   right edge so the trash icon aligns with the comment block. */
.linear-app .linear-comment-delete-form {
  margin: 0;
  margin-left: auto;
}

/* Inline empty-state — single-line "Nothing here yet" block. Lighter than
   `.linear-empty` (no icon, no title), used when a card body only needs a
   muted single-line note. */
.linear-app .linear-empty-inline {
  padding: 16px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Attachment card — a single uploaded-document tile inside an attachments
   grid. Mirror of the legacy Bootstrap `.border.rounded.p-2.d-flex` block
   so each attachment renders as a self-contained, bordered row with the
   filename, version/size/date, and download/view/delete actions on the
   right. */
.linear-app .linear-attach-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.linear-app .linear-attach-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.linear-app .linear-attach-body  { flex: 1; min-width: 0; }
.linear-app .linear-attach-name  {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-app .linear-attach-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
}
.linear-app .linear-attach-desc {
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linear-app .linear-attach-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Grid for attachment cards — auto-fits 2 columns at desktop, 1 column on
   narrow viewports. */
.linear-app .linear-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

/* Card-header right-aligned actions group — used when a header carries
   one or more inline action buttons (Link / Create CAPA, Manage
   Assignees). Sits next to the card title and groups buttons with a
   small gap. */
.linear-app .linear-card-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Section / field label — uppercase eyebrow above a value block in a
   sidebar card ("Current Status", "Due Date", "Age"). Distinct from
   `.linear-text-uppercase` which is a generic utility — this one carries
   a small bottom margin so the value sits cleanly underneath. */
.linear-app .linear-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
  display: block;
}

/* Icon-only button variant (icon-only delete on a comment row, icon-only
   download/view/delete on an attachment row). 26x26 square so it visually
   pairs with `.linear-btn--sm`. */
.linear-app .linear-btn--icon {
  width: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Entity-locked banner — strip shown at the top of a detail page when the
   record is in a terminal state (Closed / Cancelled) and the user cannot
   edit. Was previously inline-styled.
   ========================================================================== */
.linear-app .linear-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.linear-app .linear-locked-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--fg-muted);
}
.linear-app .linear-locked-banner-text strong { color: var(--fg); }

/* ==========================================================================
   Cost summary row — "Total Cost £xxx" line inside a sidebar card. Bold
   label, danger value, justified.
   ========================================================================== */
.linear-app .linear-cost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.linear-app .linear-cost-total-value { color: var(--danger); }

/* ==========================================================================
   INLINE-EDIT macros — replaces the inline-style chunks the shared
   `macros/linear_inline_edit.html` shipped with. Every sidebar field-row
   on every detail page (NCR / CAPA / supplier / customer) renders through
   those macros, so this CSS reaches the whole app at once.
   ========================================================================== */

/* 22×22 pencil button — sized to fit .linear-icon--sm flush, smaller than
   the default .linear-icon-btn (28×28). */
.linear-app .linear-inline-edit-btn { width: 22px; height: 22px; }

/* Multi-line readonly preview used by textarea_field — preserves user
   line breaks via pre-wrap, no margin so it sits flush in the value
   column. */
.linear-app .linear-inline-edit-text { white-space: pre-wrap; margin: 0; }

/* Compact one-liner row used by .currency_field — label left, editable
   value pushed right. Smaller vertical rhythm than the standard field. */
.linear-app .linear-inline-edit-row {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Right-aligned editable value column inside a compact row. */
.linear-app .linear-inline-edit-value {
  min-width: 100px;
  text-align: right;
}

/* Dashed-underline readonly span that flips to an input on click. Used
   by currency_field's display state and readonly_field_link's anchor. */
.linear-app .linear-inline-edit-trigger {
  cursor: pointer;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-strong);
}

/* Small numeric input that pairs with .linear-inline-edit-trigger. */
.linear-app .linear-inline-edit-input { width: 100px; height: 26px; }

/* Label margin reset — .linear-inline-field-label inherits a small bottom
   margin from the standard field; the compact row variant doesn't want it. */
.linear-app .linear-inline-edit-row .linear-inline-field-label { margin: 0; }

/* Generic pointer cursor utility — collapses the inline `cursor:pointer`
   pattern used by the version-history panel's collapsible header. */
.linear-app .linear-cursor-pointer { cursor: pointer; }

/* Modal backdrop — semi-transparent darken layer behind a Bootstrap-shim
   modal (linked-items panel's "Link Existing" modal). */
.linear-app .linear-modal-backdrop { background: rgba(0, 0, 0, 0.5); }

/* ==========================================================================
   Additional helpers contributed by the customer detail migration.
   ========================================================================== */

/* Stat-cells grid — 2x2 grid of small numeric cells in a sidebar
   "Statistics" card. Each cell is centered, with a big number above a
   small uppercase label. Distinct from `.linear-metric-grid`, which uses
   wider 220px-min cells with surface backgrounds — these are flat and
   sit inside the card body. */
.linear-app .linear-stat-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.linear-app .linear-stat-cell {
  text-align: center;
}
.linear-app .linear-stat-cell-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.linear-app .linear-stat-cell-label {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
}

/* Pre-formatted (newline-preserving) text — used by the inline-edit Notes
   block so saved newlines render verbatim without leaking inline style. */
.linear-app .linear-prewrap { white-space: pre-wrap; }

/* Minimum-height placeholder for an inline-edit display area, so the
   "click to edit" target stays clickable even when the value is empty. */
.linear-app .linear-notes-display { min-height: 24px; }

/* ==========================================================================
   ICON CHIP — circular icon-on-soft-bg avatar. Used by the feedback-prompt
   modal (and reusable for any "hero icon" header inside a small dialog
   or empty-state card). Pair with the `--accent` / `--info` / `--warn` /
   `--danger` colour modifiers.
   ========================================================================== */
.linear-app .linear-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.linear-app .linear-icon-chip--accent { background: var(--accent-soft); color: var(--accent); }
.linear-app .linear-icon-chip--info   { background: var(--info-soft);   color: var(--info); }
.linear-app .linear-icon-chip--warn   { background: var(--warn-soft);   color: var(--warn); }
.linear-app .linear-icon-chip--danger { background: var(--danger-soft); color: var(--danger); }
.linear-app .linear-icon-chip--good   { background: var(--good-soft);   color: var(--good); }

/* ==========================================================================
   FEEDBACK PROMPT modal — Bootstrap-modal-shimmed chrome (the `modal fade`
   wrapper stays for the Bootstrap-JS show/hide animation), but the inner
   header / body / footer padding picks up Linear rhythm.
   ========================================================================== */
.linear-app .modal-content .linear-feedback-head { padding: 16px 16px 0; }
.linear-app .modal-content .linear-feedback-body { padding: 16px; }
.linear-app .modal-content .linear-feedback-foot { padding: 0 16px 16px; }

/* ==========================================================================
   MOBILE COMPONENT REFLOW (<=480px small phones)
   Components that look fine on desktop but get squashed at iPhone-mini
   widths. Targets recently-added classes; the older base components
   already collapse via the 760px and 600px breakpoints elsewhere.
   ========================================================================== */
@media (max-width: 480px) {
  /* KPI / hero stat cards: one card per row on small phones. */
  .linear-app .linear-stat-row,
  .linear-app .linear-stat-row--auto {
    grid-template-columns: 1fr;
  }
  .linear-app .linear-stat-row > .linear-stat-card {
    flex: 1 1 100%;
  }

  /* Inline form-result banners: stack icon + text + action vertically
   * so the action button isn't shoved off-screen. */
  .linear-app .linear-result-banner,
  .linear-app .linear-feedback-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Hero icon avatars shrink so they don't dwarf the body copy. */
  .linear-app .linear-icon-chip {
    width: 32px;
    height: 32px;
  }
  .linear-app .linear-icon-chip .linear-icon {
    width: 18px;
    height: 18px;
  }

  /* Feedback modal: tighter inner padding inside the bootstrap-shimmed
   * .modal-content so the textarea has room to breathe. */
  .linear-app .modal-content .linear-feedback-body { padding: 12px; }
  .linear-app .modal-content .linear-feedback-head { padding: 12px 12px 0; }
  .linear-app .modal-content .linear-feedback-foot { padding: 0 12px 12px; }

  /* Pill rows wrap when they're inside a flex container — explicit
   * row-gap stops them from sticking together when they wrap. */
  .linear-app .linear-pill { row-gap: 4px; }
}

/* ==========================================================================
   MOBILE TOUCH-TARGET FLOOR (<=760px)
   WCAG 2.5.5 recommends 44x44 CSS px minimum for any interactive
   target. Desktop densities are deliberate; mobile inherits the
   floor automatically. The padding-block: 0 + min-height combo keeps
   the visible chrome the same height (just centres the content)
   so the visual rhythm doesn't shift on tablets where the desktop
   density still feels right.
   ========================================================================== */
@media (max-width: 760px) {
  .linear-app .linear-btn,
  .linear-app .linear-btn--primary,
  .linear-app .linear-btn--ghost {
    min-height: 44px;
    padding-block: 0;
  }
  .linear-app .linear-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .linear-app .linear-nav-item {
    min-height: 44px;
    padding-block: 8px;
  }
  /* Make the focus ring more visible on mobile — the larger hit
   * target can otherwise dwarf the default outline. */
  .linear-app .linear-btn:focus-visible,
  .linear-app .linear-icon-btn:focus-visible,
  .linear-app .linear-nav-item:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
  }
}

/* =========================================================================
 * Supplier-detail migration additions
 *
 * Neutral helpers introduced when migrating the supplier detail page from
 * Bootstrap to Linear. Each class is reusable from any feature — no
 * `linear-supplier-*` prefixes.
 *
 * - .linear-card-link        : turns a `.linear-metric` (or `.linear-card`)
 *                              into a clickable anchor with hover affordance.
 * - .linear-section-eyebrow  : eyebrow row above a form section (icon + label),
 *                              replaces ad-hoc `<h6 class="text-muted">`.
 * - .linear-tab-toolbar      : toolbar strip at the top of a tab pane —
 *                              left summary text, right action button(s).
 * - .linear-link             : underline-on-hover inline anchor (mailto links,
 *                              entity-number cells in tables).
 * - .linear-doc-list/row/...  : simple vertical document/attachment list.
 * - .linear-history-list/row : two-column history entry list (badge swap +
 *                              meta on the right).
 * - .linear-qr-image         : caps QR-code image width inside a card body.
 * - .linear-meta-footer      : muted bottom-of-sidebar "created/updated"
 *                              metadata block (borderless, monospace).
 * - .linear-notes-view/text  : container + body styles for the read view of
 *                              an inline-edited free-text notes field.
 * - .linear-field-label      : eyebrow label above a sidebar field (uppercase,
 *                              small, mono-feel) — matches existing
 *                              `.linear-inline-field-label` visual weight.
 * - .linear-spinner          : 12px circular loading spinner aligned with
 *                              `.linear-btn--sm` content.
 * - .linear-italic           : font-style: italic utility.
 * - .linear-align-center     : align-items: center utility for flex/inline-flex.
 * - .linear-mr-6             : 6px right margin utility (completes the
 *                              existing linear-ml-6).
 * ========================================================================= */

/* Clickable metric / card */
.linear-app .linear-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.linear-app .linear-card-link:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: inherit;
}

/* Section eyebrow inside a card body */
.linear-app .linear-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.linear-app .linear-section-eyebrow .linear-icon { width: 14px; height: 14px; }

/* Toolbar strip at the top of a tab pane */
.linear-app .linear-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}

/* Inline text link — underline grows on hover */
.linear-app .linear-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.linear-app .linear-link:hover { border-bottom-color: var(--border-strong); color: var(--fg); }

/* Document / attachment list */
.linear-app .linear-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linear-app .linear-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}
.linear-app .linear-doc-row:last-child { border-bottom: 0; }
.linear-app .linear-doc-row:hover { background: var(--bg); }
.linear-app .linear-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  color: var(--fg-muted);
}
.linear-app .linear-doc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.linear-app .linear-doc-name {
  font-size: 13px;
  color: var(--fg);
}
.linear-app .linear-doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}

/* History entry list (status transitions, audit-log style) */
.linear-app .linear-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linear-app .linear-history-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
}
.linear-app .linear-history-row:last-child { border-bottom: 0; }

/* QR image cap — keeps the bitmap from blowing past 200px inside a card */
.linear-app .linear-qr-image {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  width: 100%;
  height: auto;
}

/* Borderless "created / updated" footer block at the bottom of a sidebar */
.linear-app .linear-meta-footer {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Read view for an inline-edited notes field */
.linear-app .linear-notes-view {
  min-height: 24px;
}
.linear-app .linear-notes-text {
  white-space: pre-wrap;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}

/* (.linear-field-label is defined above with the detail-page helpers —
   single canonical definition; supplier templates pick it up unchanged.) */

/* 12px circular spinner. Sized to match .linear-btn--sm content. */
.linear-app .linear-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: linear-spin 0.8s linear infinite;
}
@keyframes linear-spin {
  to { transform: rotate(360deg); }
}

/* Align-center + 6px right-margin utilities. (.linear-italic is defined
   above in the typography utility block — single canonical definition.) */
.linear-app .linear-align-center { align-items: center; }
.linear-app .linear-mr-6         { margin-right: 6px; }

/* Lightweight in-tab empty state — borderless variant of `.linear-empty`,
   sized for inside-card use (tab panes, sidebar cards) rather than full
   page emptiness. */
.linear-app .linear-tab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--fg-muted);
  font-size: 13px;
}
.linear-app .linear-tab-empty .linear-icon {
  color: var(--fg-subtle);
  margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
 * Admin · Notices page
 *
 * Used only by app/features/admin/templates/admin/banner_settings.html.
 * Reuses ``.notice-bell__item`` from components/notice-bell.css for the
 * preview so the admin sees exactly what the user will see in the bell.
 * ---------------------------------------------------------------------------*/

.linear-app .linear-notice-row {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.linear-app .linear-notice-row:last-child { border-bottom: none; }

.linear-app .linear-notice-preview {
  margin-bottom: 10px;
}
.linear-app .linear-notice-preview-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
/* The bell list is normally only rendered inside the bell panel
   (absolutely positioned, fixed width). The preview drops those
   constraints so the same DOM renders inline at the row width. */
.linear-app .notice-bell__list--preview {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
}
.linear-app .notice-bell__list--preview .notice-bell__item {
  border-bottom: none;
}

.linear-app .linear-notice-row-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.linear-app .linear-notice-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.linear-app .linear-notice-meta {
  margin-top: 8px;
}
.linear-app .linear-notice-meta .linear-def-row {
  padding: 4px 0;
  border: 0;
  grid-template-columns: 80px 1fr;
}

/* Severity radio row used on the create form. The site-wide
   ``.linear-severity-grid`` uses auto-fit 220px columns which is too
   wide for four single-pill chips; this compact variant lets them
   wrap naturally inline. */
.linear-app .linear-severity-grid--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  grid-template-columns: none;
}
.linear-app .linear-severity-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  background: var(--surface);
}
.linear-app .linear-severity-option:hover {
  border-color: var(--border-strong);
}
.linear-app .linear-severity-option input[type="radio"]:checked + .linear-pill {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Vertical-stack form layout used inside .linear-card-body on settings
   pages. Re-used by other Linear settings screens — keep generic. */
.linear-app .linear-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -----------------------------------------------------------------------------
 * Version Details modal — Previous / New value panels
 *
 * The Bootstrap utility ``bg-{success,danger} bg-opacity-10`` that the
 * panel originally used renders fully saturated on the Linear chrome
 * (Bootstrap opacity utilities aren't bundled). Replacing that with
 * token-driven panels keeps the muted label legible.
 * ---------------------------------------------------------------------------*/
.version-detail-values {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 12px;
  background: var(--surface);
}
.version-detail-values--old {
  border-left-color: var(--danger);
}
.version-detail-values--new {
  border-left-color: var(--good, #16a34a);
}
.version-detail-key {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

/* ===== Bug reporter — floating button + modal ===== */
.linear-bugfab {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 64px); /* 64px ≈ one toast height — keep the FAB clear of the toast stack */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2xl);
  cursor: pointer;
  z-index: var(--z-modal);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.linear-bugfab:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--fg); }
.linear-bugfab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bug-reporter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.bug-reporter-overlay.active { opacity: 1; visibility: visible; }

.bug-reporter {
  width: 100%;
  max-width: 520px;
  max-height: 76vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
}
.bug-reporter-head,
.bug-reporter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.bug-reporter-head { border-bottom: 1px solid var(--border); }
.bug-reporter-foot { border-top: 1px solid var(--border); }
.bug-reporter-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.bug-reporter-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bug-reporter-group legend {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle); text-transform: uppercase; padding: 0 0 4px;
}
.bug-reporter-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg); font-size: 13px; cursor: pointer;
}
.bug-reporter-opt:hover { background: var(--surface-2); }
.bug-reporter-note { font-size: 12px; color: var(--fg-muted); margin: 0; }