/* ============================================================
   Aircraft Tracker — unified design system
   ------------------------------------------------------------
   Design tokens drive color, spacing, typography, radii and
   shadows. Component classes (cards, buttons, inputs, tables,
   tabs, status pills, chips) all draw from the same tokens
   so every page reads consistently.
   ============================================================ */

:root {
  /* Color — neutrals (light theme) */
  --c-bg:        #f3f5f8;
  --c-surface:   #ffffff;
  --c-surface-2: #f7f9fc;
  --c-border:    #d9e0e9;
  --c-border-2:  #e3e8ef;
  --c-text:      #1c2a35;
  --c-text-2:    #4a5663;
  --c-muted:     #7a8794;
  --c-faint:     #9aa6b2;

  /* Color — brand / state */
  --c-brand:        #1f3a55;
  --c-brand-hover:  #2a4f72;
  --c-brand-soft:   #e9eef4;
  --c-accent:       #2563eb;
  --c-accent-hover: #1d4fc4;
  --c-on-brand:     #ffffff; /* text/icons on brand/accent/dark fills */
  --c-brand-text:   #1f3a55; /* brand color for headings/labels/links on light surfaces */

  /* Solid danger fill — deeper than --c-bad so light text stays legible on it */
  --c-danger-fill:       #b00020;
  --c-danger-fill-hover: #92001a;

  --c-ok:        #1e7a3a;
  --c-ok-bg:     #e6f4ec;
  --c-ok-border: #b9dec7;

  --c-warn:        #c47b00;
  --c-warn-bg:     #fdf3df;
  --c-warn-border: #f0c98a;

  --c-bad:        #b00020;
  --c-bad-bg:     #fde8eb;
  --c-bad-border: #f0a8b0;

  --c-na-bg:     #ecf0f4;
  --c-na-border: #d6dde6;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono",
               Menlo, monospace;
  --fs-xs:  14px;
  --fs-sm:  15px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* Spacing scale — tightened for a denser layout (less wasted whitespace) */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --sp-7: 22px;
  --sp-8: 30px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --sh-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-lg: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* Layout */
  --topbar-h: 56px;   /* legacy top-nav row height (kept as a fallback) */
  --chrome-h: 48px;   /* legacy chrome row height (kept as a fallback) */
  --sidebar-w: 248px; /* persistent left sidebar width */
  --subnav-w: 212px;  /* secondary flyout panel (airframe-class filter) width */
  --app-header-h: 0px; /* height of any sticky bar above main (0 on desktop) */
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  font: var(--fs-md)/1.5 var(--font-sans);
  margin: 0;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

code {
  font: var(--fs-sm) var(--font-mono);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ============================================================
   App bar — two rows:
     1) chrome  (workspace + account)   navy,  not sticky
     2) primary product nav             white, sticky
   ============================================================ */
.appbar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
}

.appbar-chrome {
  background: var(--c-brand);
  color: var(--c-on-brand);
  height: var(--chrome-h);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.appbar-brand {
  font-weight: 700;
  color: var(--c-on-brand);
  text-decoration: none;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.appbar-brand:hover { text-decoration: none; opacity: 0.9; }

.appbar-spacer { flex: 1; min-width: var(--sp-3); }

/* Dropdown menus on the chrome row (workspace + account) */
.appbar-menu { position: relative; display: inline-block; }
.appbar-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-on-brand);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  user-select: none;
  transition: background .12s ease;
}
.appbar-menu > summary::-webkit-details-marker { display: none; }
.appbar-menu > summary::marker { content: ''; }
.appbar-menu > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.75;
  margin-left: 2px;
}
.appbar-menu > summary:hover,
.appbar-menu[open] > summary { background: rgba(255, 255, 255, 0.22); }
.appbar-chip-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.appbar-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-2) 0;
  margin: 0;
  list-style: none;
  z-index: 100;
}
.appbar-menu-panel.left { right: auto; left: 0; }
.appbar-menu-panel li { margin: 0; padding: 0; }
.appbar-menu-panel a,
.appbar-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px var(--sp-4);
  background: none;
  border: none;
  border-radius: 0;
  color: var(--c-text);
  font: 500 var(--fs-sm)/1.3 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.appbar-menu-panel a:hover,
.appbar-menu-panel button:hover {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  text-decoration: none;
}
.appbar-menu-panel form { margin: 0; display: block; }
.appbar-menu-panel hr {
  border: none;
  border-top: 1px solid var(--c-border-2);
  margin: var(--sp-2) 0;
}
.appbar-menu-panel .menu-meta {
  padding: 4px var(--sp-4) var(--sp-1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}
/* Current-workspace row — read-only marker, not a button. */
.appbar-menu-panel .menu-current {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  font: 600 var(--fs-sm)/1.3 var(--font-sans);
  color: var(--c-brand-text);
  background: var(--c-brand-soft);
}
.appbar-menu-panel .menu-current-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
  flex-shrink: 0;
}

/* Primary product navigation — sticky white row */
.appbar-nav {
  background: var(--c-surface);
  height: var(--topbar-h);
  display: flex;
  align-items: stretch;
  padding: 0 var(--sp-6);
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}
.appbar-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.appbar-nav a:hover { color: var(--c-brand-text); text-decoration: none; }
.appbar-nav a.active {
  color: var(--c-brand-text);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}

/* Secondary nav row — appears under the primary nav for the active section
   (e.g. "Engines" appears under "Aircraft"). Slimmer + indented so it reads
   as a sub-level of the primary nav above it. */
.appbar-subnav {
  background: var(--c-surface);
  display: flex;
  align-items: stretch;
  padding: 0 var(--sp-6) 0 calc(var(--sp-6) + var(--sp-5));
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  height: 34px;
}
.appbar-subnav[hidden] { display: none; }
.appbar-subnav::before {
  content: '└';
  align-self: center;
  margin-right: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1;
}
.appbar-subnav a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.appbar-subnav a:hover { color: var(--c-brand-text); text-decoration: none; }
.appbar-subnav a.active {
  color: var(--c-brand-text);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}

/* ============================================================
   App shell — persistent full-height left sidebar + content
   ------------------------------------------------------------
   Desktop: body is a flex row; the sidebar is a sticky 100vh
   navy rail and <main> fills the remaining width. On narrow
   screens the sidebar becomes an off-canvas drawer behind a
   hamburger in a slim mobile top bar.
   ============================================================ */
.app-shell {
  display: flex;
  align-items: flex-start;
}
.app-shell > main { flex: 1; min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--c-brand);
  color: var(--c-on-brand);
  overflow-y: auto;
  z-index: 40;
}

.sidebar-brand {
  display: block;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  color: var(--c-on-brand);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-brand:hover { text-decoration: none; opacity: 0.92; }

/* Workspace switcher chip — sits inside the navy rail. */
.sidebar-workspace { display: block; }
.sidebar-workspace > summary { width: 100%; justify-content: space-between; }
.sidebar-workspace .appbar-menu-panel {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: var(--sp-1);
  box-shadow: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--c-on-brand);
  text-decoration: none;
}
.sidebar-nav a.active {
  background: rgba(255, 255, 255, 0.16);
  border-left-color: var(--c-on-brand);
  color: var(--c-on-brand);
  font-weight: 600;
}
.sidebar-nav hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: var(--sp-2) var(--sp-1);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
}
.sidebar-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.sidebar-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
}
/* Account flyout — pops out to the right of the sidebar footer. */
.sidebar-account { display: block; position: relative; }
.sidebar-account > summary {
  width: 100%;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.sidebar-account[open] > summary,
.sidebar-account > summary:hover { background: rgba(255, 255, 255, 0.14); }
.sidebar-account-id {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  overflow: hidden;
}
/* Fixed (not absolute) so the panel escapes the sidebar's overflow-y clip
   and floats out over the page content to the right of the rail. */
.sidebar-account-panel {
  position: fixed;
  left: calc(var(--sidebar-w) + var(--sp-2));
  bottom: var(--sp-3);
  right: auto;
  top: auto;
  min-width: 200px;
}

/* Mobile viewing warning — hidden on desktop, revealed by JS on narrow
   screens. Display is gated on the breakpoint so it never shows on wide
   viewports even when the [hidden] attribute is removed. */
.mobile-warning { display: none; }
@media (max-width: 900px) {
  .mobile-warning:not([hidden]) {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    /* Pin to the bottom of the viewport so it stays visible instead of
       scrolling away above the sticky top bar. Sits below the nav drawer
       (z 70) / backdrop (z 65) so an open menu still dims it. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: var(--sp-2) var(--sp-3);
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
    background: var(--c-warn-bg);
    color: var(--c-text);
    border-top: 1px solid var(--c-warn-border);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.12);
    font-size: var(--fs-xs);
    line-height: 1.35;
  }
  .mobile-warning-icon {
    color: var(--c-warn);
    flex: none;
    font-size: var(--fs-md);
    line-height: 1.2;
  }
  .mobile-warning-text { flex: 1 1 auto; }
  .mobile-warning-close {
    flex: none;
    background: none;
    border: 0;
    color: var(--c-text-2);
    font-size: var(--fs-xl);
    line-height: 1;
    padding: 0 var(--sp-1);
    cursor: pointer;
  }
  .mobile-warning-close:hover { color: var(--c-text); }
}

/* Mobile top bar + hamburger — hidden on desktop. */
.mobile-bar { display: none; }
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
}
.sidebar-toggle-bars,
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-surface);
  border-radius: 2px;
}
.sidebar-toggle-bars { position: relative; }
.sidebar-toggle-bars::before { position: absolute; top: -6px; }
.sidebar-toggle-bars::after { position: absolute; top: 6px; }

.sidebar-backdrop { display: none; }

/* ------------------------------------------------------------
   Secondary flyout panel — the airframe-class filter pops out
   beside the navy rail as a lighter second column. Rendered only
   on the Aircraft list page; can be collapsed to a slim handle.
   ------------------------------------------------------------ */
.subnav {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 var(--subnav-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  overflow-y: auto;
  z-index: 35;
}
.subnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.subnav-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.subnav-collapse,
.subnav-reopen {
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.subnav-collapse { display: inline-flex; }
.subnav-reopen:not([hidden]) { display: inline-flex; }
.subnav-collapse:hover,
.subnav-reopen:hover { background: var(--c-brand-soft); color: var(--c-brand-text); }
.subnav-collapse:focus-visible,
.subnav-reopen:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.subnav-list { display: flex; flex-direction: column; gap: 2px; }
.subnav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.subnav-item:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}
.subnav-item.active {
  background: var(--c-brand-soft);
  border-left-color: var(--c-brand);
  color: var(--c-brand-text);
  font-weight: 700;
}
.subnav-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 0 var(--sp-2);
  text-align: center;
  border-radius: var(--r-pill);
  background: var(--c-na-bg);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.subnav-item.active .subnav-count { background: var(--c-brand); color: var(--c-on-brand); }

/* Nested sub-filter (airworthiness category / installation status) shown
   beneath the active class/type item. Indented with a guide rail and lighter
   type so it reads as a child of the item above it. */
.subnav-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 var(--sp-2) var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-border);
}
.subnav-subitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.subnav-subitem:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}
.subnav-subitem.active {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font-weight: 700;
}
.subnav-subitem.active .subnav-count { background: var(--c-brand); color: var(--c-on-brand); }

/* Collapsed — panel hides, a slim reopen handle clings to the rail edge. */
.subnav-collapsed .subnav { display: none; }
.subnav-reopen {
  position: fixed;
  top: var(--sp-5);
  left: calc(var(--sidebar-w) - 13px);
  z-index: 45;
  width: 26px;
  height: 44px;
  box-shadow: var(--sh-sm);
}

@media (max-width: 900px) {
  .app-shell {
    display: block;
    --app-header-h: 52px;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 60;
    height: 52px;
    padding: 0 var(--sp-4);
    background: var(--c-brand);
    color: var(--c-on-brand);
  }
  .mobile-bar .appbar-brand {
    font-weight: 700;
    color: var(--c-on-brand);
    text-decoration: none;
    font-size: var(--fs-md);
  }

  .sidebar {
    position: fixed;
    /* Anchor top and bottom so the drawer matches the visible viewport
       height (not the taller 100vh that hides items behind the browser
       chrome), and let it scroll internally when the nav overflows. */
    inset: 0 auto 0 0;
    width: min(82vw, var(--sidebar-w));
    height: auto;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 70;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--sh-lg); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(15, 23, 42, 0.45);
  }
  .sidebar-backdrop[hidden] { display: none; }

  /* No second column on narrow screens — the class filter flows in as a
     horizontal bar above the list, and collapse is disabled. */
  .subnav {
    position: static;
    height: auto;
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    box-shadow: none;
  }
  .subnav-list { flex-direction: row; flex-wrap: wrap; }
  .subnav-item { flex: 1 1 auto; }
  /* The nested sub-filter breaks onto its own full-width row and lays its
     options out horizontally to match the class/type strip above it. */
  .subnav-sublist {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 var(--sp-1);
    padding-left: 0;
    border-left: none;
  }
  .subnav-subitem { flex: 1 1 auto; }
  .subnav-collapse { display: none; }
  .subnav-reopen { display: none !important; }
  .subnav-collapsed .subnav { display: flex; }

  /* Section flyout drops in-flow above the page content on narrow screens —
     no fixed column, no collapse, content reclaims full width. */
  .section-nav {
    position: static;
    height: auto;
    width: 100%;
    margin-bottom: var(--sp-4);
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    box-shadow: none;
  }
  .section-nav-list { flex-direction: row; flex-wrap: wrap; }
  .section-nav-item { flex: 0 1 auto; }
  .section-nav-group {
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
  }
  .section-nav-danger { margin-top: 0; }
  .section-nav-toggle { display: none !important; }
  .section-nav-collapsed .section-nav { display: flex; }
  .app-shell > main:has(.section-nav),
  .section-nav-collapsed.app-shell > main:has(.section-nav) { padding-left: 0; }

  .app-shell > main { margin-left: 0; }

  /* No room for a right flyout inside the drawer — drop it in-flow. */
  .sidebar-account-panel {
    position: static;
    left: auto;
    width: 100%;
    min-width: 0;
    margin-top: var(--sp-1);
    box-shadow: none;
  }
}

/* ============================================================
   Layout — main / page header
   ============================================================ */
main {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-text);
}
h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
}

section { margin: var(--sp-4) 0; }

/* ============================================================
   Page header — H1 on the left, primary CTA(s) on the right.
   Used at the top of list pages (fleet, engines, AD list).
   ============================================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
}
.page-header h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.page-header-actions .action-link { margin-right: 0; }
.page-header-actions .muted-link {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.page-header-actions .muted-link:hover { color: var(--c-brand-text); text-decoration: underline; }
@media (max-width: 600px) {
  .page-header-actions { width: 100%; }
  .page-header-actions .action-link { flex: 1; justify-content: center; }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-3);
  padding: 5px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.back-link:hover { background: var(--c-brand-soft); color: var(--c-brand-text); text-decoration: none; }
.back-link[hidden] { display: none; }

/* ============================================================
   Inline message / status text
   ============================================================ */
.muted, p.muted, span.muted { color: var(--c-muted); font-size: var(--fs-xs); }
.hint { color: var(--c-muted); font-size: var(--fs-xs); }
.empty {
  color: var(--c-muted);
  font-style: italic;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

ul.errors,
.errors,
p.errors {
  background: var(--c-bad-bg);
  border: 1px solid var(--c-bad-border);
  color: var(--c-bad);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  list-style: none;
  font-size: var(--fs-sm);
}
ul.errors li { margin: 2px 0; }

p.notice,
.notice {
  background: var(--c-ok-bg);
  border: 1px solid var(--c-ok-border);
  color: var(--c-ok);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
}

.result {
  background: var(--c-ok-bg);
  border: 1px solid var(--c-ok-border);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
}
.result h2 { margin-top: 0; color: var(--c-ok); }

/* ============================================================
   Buttons
   ============================================================ */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-md);
  cursor: pointer;
  font: 600 var(--fs-sm)/1.2 var(--font-sans);
  letter-spacing: 0.01em;
  transition: background .12s, border-color .12s, transform .04s;
}
button:hover,
.btn:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
button:active,
.btn:active { transform: translateY(1px); }
button:disabled,
button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* link-style button (text-only, danger color, used for inline "remove" actions) */
.link-button {
  background: none;
  border: none;
  color: var(--c-bad);
  cursor: pointer;
  padding: 0;
  font: 500 var(--fs-xs) var(--font-sans);
  text-decoration: underline;
}
.link-button:hover { color: var(--c-bad); background: none; text-decoration: underline; }

.link-button-dark {
  background: none;
  border: none;
  color: var(--c-bad);
  cursor: pointer;
  padding: 0 0 0 var(--sp-2);
  font: 500 var(--fs-xs) var(--font-sans);
  text-decoration: underline;
}
.link-button-dark:hover { color: var(--c-bad); }

/* "action-link" — primary link styled as a button */
.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-brand);
  color: var(--c-on-brand);
  padding: 7px var(--sp-4);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-right: var(--sp-3);
}
.action-link:hover { background: var(--c-brand-hover); color: var(--c-on-brand); text-decoration: none; }

/* ============================================================
   Forms
   ============================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input:not([type]),
select,
textarea {
  font: var(--fs-sm) var(--font-sans);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-2);
  line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
input[disabled], select[disabled], textarea[disabled] {
  background: var(--c-surface-2);
  color: var(--c-faint);
  cursor: not-allowed;
}
/* Hide the native number-input spinners (up/down arrows) everywhere */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
textarea { resize: vertical; min-height: 64px; }

/* "card" form treatment used for new/edit forms */
.header-form,
.add-component,
.add-limit {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.header-form fieldset,
.add-component fieldset,
.add-limit fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.header-form legend,
.add-component legend,
.add-limit legend {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-brand-text);
  padding: 0;
  margin-bottom: var(--sp-2);
}
.header-form > button,
.add-component > button,
.add-limit > button { margin-top: var(--sp-2); }

/* details/summary collapsible add forms */
.add-component > summary,
.add-limit > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-brand-text);
  padding: var(--sp-1) 0;
  user-select: none;
}
.add-component > summary::-webkit-details-marker,
.add-limit > summary::-webkit-details-marker { display: none; }
.add-component > summary:hover,
.add-limit > summary:hover { color: var(--c-brand-hover); }
.add-component[open] > summary,
.add-limit[open] > summary { margin-bottom: var(--sp-3); }

/* generic grid for label/input pairs */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
}
.grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  font-weight: 500;
}
.grid input,
.grid select,
.grid textarea {
  font-size: var(--fs-md);
  padding: 7px var(--sp-2);
}
/* compact inline checkbox label inside grid */
.grid label > input[type="checkbox"] {
  align-self: flex-start;
  margin-top: 4px;
}

/* Auth pages (login / signup / setup / first-time) — centered card */
.auth-card {
  max-width: 480px;
  margin: var(--sp-7) auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6);
  box-shadow: var(--sh-md);
}
.auth-card h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); }
.auth-card form { margin: 0; }
.auth-card .grid { grid-template-columns: 1fr; }
.auth-card button[type="submit"] { width: 100%; margin-top: var(--sp-4); padding: 10px var(--sp-4); }
.auth-card fieldset { border: none; padding: 0; margin: 0 0 var(--sp-4); }
.auth-card legend {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-brand-text);
  padding: 0;
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* image / photo upload form */
.image-form {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.image-form fieldset { border: none; padding: 0; margin: 0; }
.image-form legend {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-brand-text);
  padding: 0;
  margin-bottom: var(--sp-2);
}
.image-form label { display: block; margin: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.image-form img.aircraft-photo {
  display: block;
  max-width: 320px;
  max-height: 220px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-2);
  object-fit: cover;
}

/* ============================================================
   Info-form (aircraft / engine Info pages)
   Card-style sections, generous spacing, paired hint text.
   Use .form-section for each logical group; .form-grid for the
   labelled-input grid; .form-grid-num for right-aligned numeric.
   ============================================================ */
.form-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--sh-sm);
}
.form-section > h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.form-section > h2 + .form-hint,
.form-section > .form-hint {
  color: var(--c-text-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
}
.form-section > h2:last-child,
.form-section > h2 + .form-grid,
.form-section > h2 + textarea {
  margin-bottom: 0;
}
.form-section > h2 + .form-grid { margin-top: var(--sp-2); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}
.form-grid > label > .field-unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted);
  margin-left: var(--sp-1);
  letter-spacing: 0;
}
/* Keep a field's label text + its unit/optional tag on ONE line, so inputs
   across a .form-grid row line up even when some fields have a unit and
   others don't. Without this the unit drops to its own flex row and shifts
   that column's input down. */
.form-grid > label > .field-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.form-grid > label > .field-head > .field-unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: 0;
}
.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea {
  font-size: var(--fs-md);
  padding: 10px var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-weight: 400;
  letter-spacing: 0;
}
.form-grid > label > input:focus,
.form-grid > label > select:focus,
.form-grid > label > textarea:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-grid > label > .field-hint {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-muted);
  margin-top: 2px;
  letter-spacing: 0;
}
/* Numeric baselines are short read-only values — don't waste a stacked,
   full-width column on each. Lay them out as one compact wrapping row of
   inline "label  [input]" fields packed to the left. */
.form-grid-num {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: start;
}
.form-grid-num > label {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-2);
  font-size: var(--fs-sm);
}
.form-grid-num > label > input,
.form-grid-num > label > select {
  width: 96px;
  padding: 6px var(--sp-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.form-grid-num > label > input[type="date"] { width: auto; text-align: left; }
.form-grid-num > label > select { width: auto; text-align: left; }
/* Per-field hint (engine Times) drops to its own line under the input
   instead of crowding the inline label · input pair. */
.form-grid-num > label > .field-hint { flex-basis: 100%; margin-top: 0; }
.form-grid > label.field-full { grid-column: 1 / -1; }

/* Compact variant: for forms with a handful of short fields, cap the column
   width and pack them left rather than stretching each across a full 1fr
   track (which spreads 4 fields edge-to-edge on a wide screen). */
.form-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
  justify-content: start;
}

.form-section > textarea {
  width: 100%;
  padding: 12px var(--sp-3);
  font-size: var(--fs-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-sans);
  line-height: 1.5;
}
.form-section > textarea:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.form-actions .cancel-link {
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.form-actions .cancel-link:hover {
  color: var(--c-brand-text);
  text-decoration: underline;
}
.form-actions button[type="submit"],
.form-actions .btn-primary {
  padding: 10px var(--sp-5);
  font-size: var(--fs-sm);
}

/* ---- Sticky "unsaved changes" action bar -------------------------------
   Site-wide. JS (layout.ejs) tags every form that has a .form-actions and at
   least one editable field: the form gets .js-dirty-form and its .form-actions
   gets .js-action-bar. The bar stays hidden until the form is dirty, then flies
   up fixed to the bottom of the viewport with large Save + Cancel buttons.
   No-JS / unmanaged forms (e.g. the error page) keep the plain in-flow row. */
.js-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-3);
  justify-content: center;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(110%);
  transition: transform 180ms ease, visibility 180ms;
  visibility: hidden;
}
.js-dirty-form.is-dirty .js-action-bar {
  transform: translateY(0);
  visibility: visible;
}
/* Large buttons in the flyout. */
.js-action-bar button[type="submit"],
.js-action-bar .btn-primary,
.js-action-bar .btn-danger,
.js-action-bar .cancel-link,
.js-action-bar .btn-cancel {
  font-size: var(--fs-md);
  padding: 13px var(--sp-6);
  min-height: 48px;
  border-radius: var(--radius-2, 8px);
}
.js-action-bar .cancel-link,
.js-action-bar .btn-cancel {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
}
.js-action-bar .cancel-link:hover,
.js-action-bar .btn-cancel:hover {
  text-decoration: none;
  border-color: var(--c-border-2, var(--c-border));
  color: var(--c-text);
}
/* Align the bar with the main content area, clearing the persistent sidebar
   on desktop; full-width once the sidebar goes off-canvas. */
.app-shell .js-action-bar { left: var(--sidebar-w); }
@media (max-width: 900px) {
  .app-shell .js-action-bar { left: 0; }
}
/* Reserve space so the fixed bar never covers the last fields while open. */
body.action-bar-open #main { padding-bottom: 96px; }

/* Photo section — preview on the left, upload actions on the right */
.photo-section-body {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 600px) {
  .photo-section-body { grid-template-columns: 1fr; }
}
.photo-preview {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-2);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview .photo-placeholder { font-size: 56px; color: var(--c-faint); line-height: 1; }
.photo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.photo-actions form { margin: 0; }
.photo-actions input[type="file"] {
  width: 100%;
  font-size: var(--fs-sm);
  padding: 6px 0;
}
.photo-actions .photo-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.photo-source-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Section header bar — H2 on the left, optional control on the right.
   Used by lockable sections so the lock toggle sits aligned with the title. */
.form-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.form-section-header > h2 { margin: 0; }

/* Lockable section — protect against accidental edits of baseline values.
   Default state is locked: inputs are readonly + muted. Clicking the
   toggle releases them and the section grows a warm halo as a reminder. */
.lock-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  background: var(--c-surface);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.lock-toggle:hover {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-color: var(--c-brand-soft);
}
.lock-toggle::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%237a8794' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='6' width='9' height='7' rx='1.5'/%3E%3Cpath d='M3.5 6V4a2.5 2.5 0 1 1 5 0v2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.lock-toggle:hover::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%231f3a55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='6' width='9' height='7' rx='1.5'/%3E%3Cpath d='M3.5 6V4a2.5 2.5 0 1 1 5 0v2'/%3E%3C/svg%3E");
}

/* Locked: inputs visually subdued, no focus glow */
.locked-section[data-locked="1"] .form-grid > label {
  color: var(--c-text-2);
}
.locked-section[data-locked="1"] .form-grid > label > input,
.locked-section[data-locked="1"] .form-grid > label > select,
.locked-section[data-locked="1"] .form-grid > label > textarea {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border-color: var(--c-border-2);
  cursor: default;
}
.locked-section[data-locked="1"] .form-grid > label > input:focus,
.locked-section[data-locked="1"] .form-grid > label > select:focus,
.locked-section[data-locked="1"] .form-grid > label > textarea:focus {
  box-shadow: none;
  border-color: var(--c-border-2);
}

/* Unlocked: warm halo around the section + amber lock-toggle to remind
   the user they're editing values that don't auto-advance. */
.locked-section:not([data-locked="1"]) {
  border-color: var(--c-warn-border);
  box-shadow: 0 0 0 3px var(--c-warn-bg), var(--sh-sm);
}
.locked-section:not([data-locked="1"]) .lock-toggle {
  background: var(--c-warn-bg);
  color: var(--c-warn);
  border-color: var(--c-warn-border);
}
.locked-section:not([data-locked="1"]) .lock-toggle:hover {
  background: var(--c-warn-bg);
  color: var(--c-warn);
  border-color: var(--c-warn-border);
}
.locked-section:not([data-locked="1"]) .lock-toggle::before,
.locked-section:not([data-locked="1"]) .lock-toggle:hover::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23c47b00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='9' height='7' rx='1.5'/%3E%3Cpath d='M4 6V4a2.5 2.5 0 0 1 5 0'/%3E%3C/svg%3E");
}

/* ============================================================
   Tables
   ============================================================ */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  font-size: var(--fs-sm);
}
th, td {
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--c-border-2);
  vertical-align: top;
  text-align: left;
}
tbody tr:last-child td { border-bottom: none; }
th {
  background: var(--c-surface-2);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--c-border);
}
tbody tr:hover { background: var(--c-surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Subtle "grid" table variant used on member/company lists */
.grid-table { font-size: var(--fs-md); }
.grid-table th,
.grid-table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-2);
}

/* Row severity — colored 3px left stripe via inset shadow on the first cell.
   No full-row tint; the bold colored numeric cells carry the per-cell signal. */
.row-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--c-bad); }
.row-due-soon > td:first-child { box-shadow: inset 3px 0 0 var(--c-warn); }

/* Per-cell severity for numeric remaining-time columns — bold colored text. */
td.num.overdue { color: var(--c-bad); font-weight: 700; }
td.num.due-soon { color: var(--c-warn); font-weight: 700; }
td.num.ok { color: var(--c-ok); font-weight: 700; }

/* ============================================================
   Status pill
   ============================================================ */
.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.6;
}
.status-all-ok, .status-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.status-due-soon { background: var(--c-warn-bg); color: var(--c-warn); }
.status-overdue { background: var(--c-bad-bg); color: var(--c-bad); }
.status-na, .status-n\/a { background: var(--c-na-bg); color: var(--c-text-2); }
.status-complete { background: var(--c-ok-bg); color: var(--c-ok); }
.status-open { background: var(--c-na-bg); color: var(--c-text-2); }

/* status used in a table cell — keep cell readable */
td.status { padding: 8px var(--sp-3); }

/* ============================================================
   Breadcrumb context — lives in the head of the section flyout on
   aircraft/engine pages, telling the user "where am I".
   ============================================================ */
.page-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  padding: 0 0 var(--sp-1);
}
.page-context .crumb {
  color: var(--c-text-2);
  text-decoration: none;
  font-weight: 500;
}
.page-context .crumb:hover {
  color: var(--c-brand-text);
  text-decoration: underline;
}
.page-context .crumb-sep {
  color: var(--c-faint);
  font-weight: 400;
  user-select: none;
}
.page-context .crumb-current {
  color: var(--c-text);
  font-weight: 600;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide the generic JS back-link wherever the section flyout's breadcrumb
   already provides "back" context. */
main:has(.section-nav) .back-link { display: none !important; }

/* ============================================================
   Section flyout — aircraft / engine sub-navigation. Pops out as a
   light second column beside the navy rail (same chrome as the
   airframe-class .subnav on list pages) listing the sections of the
   current aircraft or engine. Collapses to a slim handle.
   ============================================================ */
.section-nav {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  width: var(--subnav-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  overflow-y: auto;
  z-index: 35;
}
/* Push page content clear of the fixed flyout. Left-align rather than
   centre so the gutter beside the panel stays consistent. */
.app-shell > main:has(.section-nav) {
  max-width: none;
  margin: 0;
  padding-left: calc(var(--subnav-w) + var(--sp-7));
}

.section-nav-head {
  padding: 0 var(--sp-1) var(--sp-2);
}
/* Breadcrumb wraps freely inside the narrow panel instead of clipping. */
.section-nav .page-context { padding: 0; }
.section-nav .page-context .crumb-current {
  max-width: none;
  white-space: normal;
}

/* Single toggle handle — clings to the panel's outer edge when open and
   slides back to the rail edge when collapsed. The arrow (set in JS) flips
   between ‹ and › to mirror which way it will move the panel. */
.section-nav-toggle {
  position: fixed;
  top: var(--sp-5);
  left: calc(var(--sidebar-w) + var(--subnav-w) - 13px);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background .12s ease, color .12s ease, left .15s ease;
}
.section-nav-toggle:hover { background: var(--c-brand-soft); color: var(--c-brand-text); }
.section-nav-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.section-nav-list { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.section-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.section-nav-item:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}
.section-nav-item.active {
  background: var(--c-brand-soft);
  border-left-color: var(--c-brand);
  color: var(--c-brand-text);
  font-weight: 700;
}

/* Grouped sub-links (installed engines, parent aircraft) — a labelled
   cluster set off from the primary sections. */
.section-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}
.section-nav-group-label {
  padding: 0 var(--sp-3) 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.section-nav-sub { flex-direction: column; align-items: flex-start; gap: 0; }
.section-nav-sub-label { font-weight: 600; }
.section-nav-sub-detail {
  margin-top: 1px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Destructive "Delete" — sinks to the bottom of the panel, clear of the
   normal navigation, and tinted red so it reads as dangerous. */
.section-nav-danger {
  margin-top: auto;
  color: var(--c-bad);
}
.section-nav-danger:hover {
  color: var(--c-on-brand);
  background: var(--c-danger-fill);
}
.section-nav-danger.active {
  color: var(--c-on-brand);
  background: var(--c-danger-fill);
  border-left-color: var(--c-danger-fill);
}

/* Collapsed — panel hides, content reclaims the space, and the toggle
   handle slides back to cling to the rail edge. */
.section-nav-collapsed .section-nav { display: none; }
.section-nav-collapsed.app-shell > main:has(.section-nav) {
  padding-left: var(--sp-7);
}
.section-nav-collapsed .section-nav-toggle {
  left: calc(var(--sidebar-w) - 13px);
}

/* Delete-aircraft confirmation page. */
.delete-panel {
  max-width: 640px;
  margin-top: var(--sp-4);
}
.delete-panel .delete-lede {
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 var(--sp-4);
}
.delete-panel .delete-warning {
  background: var(--c-bad-bg);
  border: 1px solid var(--c-bad-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.delete-panel .delete-warning h2,
.delete-panel .delete-precautions h2 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--sp-2);
}
.delete-panel .delete-warning h2 { color: var(--c-bad); }
.delete-panel .delete-warning ul,
.delete-panel .delete-precautions ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
}
.delete-panel .delete-warning li,
.delete-panel .delete-precautions li { margin: 2px 0; }
.delete-panel .delete-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.delete-panel .delete-precautions { margin: 0 0 var(--sp-4); }
.delete-panel .delete-confirm-label {
  display: block;
  margin: 0 0 var(--sp-3);
  font-weight: 500;
}
.delete-panel .delete-confirm-label input {
  display: block;
  margin-top: var(--sp-2);
  max-width: 260px;
}

/* ============================================================
   Stats bar (summary numbers above tables)
   ============================================================ */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.stats > div { display: flex; align-items: baseline; gap: var(--sp-1); }
.stats strong { color: var(--c-text); font-size: var(--fs-md); }
.stats .overdue { color: var(--c-bad); }
.stats .due-soon { color: var(--c-warn); }

/* ============================================================
   Filter bar (text links) — used on components page
   ============================================================ */
.filters { margin: var(--sp-3) 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.filters > * { margin: 0; }
.filters a {
  display: inline-block;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
}
.filters a:hover { background: var(--c-brand-soft); color: var(--c-brand-text); text-decoration: none; }
.filters a.active {
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-color: var(--c-brand);
  font-weight: 600;
  text-decoration: none;
}
/* Right-aligned view control inside .filters — currently used for "Collapse all". */
.filters .collapse-all-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  padding: 4px var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.filters .collapse-all-btn:hover {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-color: var(--c-brand-soft);
}
.filters .collapse-all-btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  margin-bottom: 2px;
}
.filters .collapse-all-btn[aria-pressed="true"]::before {
  transform: rotate(-135deg);
  margin-bottom: 0;
  margin-top: 2px;
}

/* ============================================================
   Search bar
   ============================================================ */
.search { margin: var(--sp-2) 0 var(--sp-4); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.search input {
  padding: 7px var(--sp-3);
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 480px;
}

/* ============================================================
   Bulk action toolbar
   ============================================================ */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.bulk-toolbar button { padding: 5px var(--sp-3); }
.bulk-toolbar #bulk-count { margin-left: auto; }

/* ============================================================
   Inline editable inputs (in tables)
   ============================================================ */
input.inline {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 3px 6px;
  font: var(--fs-sm) var(--font-sans);
  color: var(--c-text);
  border-radius: var(--r-sm);
  text-overflow: ellipsis;
}
input.inline:hover { background: var(--c-surface); border-color: var(--c-border); }
input.inline:focus {
  background: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}
input.inline.num { text-align: right; font-variant-numeric: tabular-nums; }
input.inline.date { font-family: inherit; }
input.inline[disabled] { background: var(--c-surface-2); color: var(--c-faint); }
input.inline.on-cond { color: var(--c-warn); font-style: italic; background: var(--c-warn-bg); }
input.inline.on-cond:hover, input.inline.on-cond:focus { background: var(--c-surface); }

/* ============================================================
   Fleet / Engine card grid
   ============================================================ */
.fleet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.fleet-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--sh-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.fleet-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--c-border-2);
}
.fleet-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.fleet-card-link:hover { text-decoration: none; color: inherit; }
.fleet-card-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fleet-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-card-placeholder {
  font-size: 56px;
  color: var(--c-faint);
  line-height: 1;
}
.fleet-card-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.fleet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.fleet-card-tail {
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-brand-text);
  letter-spacing: 0.01em;
}
.fleet-card-meta {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.fleet-card-tt {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 500;
}
.fleet-card-engines {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.fleet-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border-2);
}
.fleet-card-counts .overdue { color: var(--c-bad); font-weight: 700; }
.fleet-card-counts .due-soon { color: var(--c-warn); font-weight: 700; }
.fleet-card-counts .ok { color: var(--c-ok); font-weight: 700; }

.fleet-card-hobbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border-2);
  background: var(--c-surface-2);
}
.fleet-card-hobbs label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  text-transform: uppercase;
}
.fleet-card-hobbs input {
  flex: 1;
  min-width: 0;
  padding: 5px var(--sp-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fleet-card-hobbs button { padding: 5px var(--sp-3); }

/* ============================================================
   Dealer card grid — business-card style tiles
   ============================================================ */
.dealer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.dealer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
/* Accent stripe along the top edge — the business-card flourish. */
.dealer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
}
.dealer-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--c-border-2);
}
.dealer-card.is-selected {
  border-color: var(--c-brand-text);
  box-shadow: 0 0 0 2px var(--c-brand-text) inset, var(--sh-sm);
}
.dealer-card-select {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  padding: 5px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.dealer-card-select input { width: 17px; height: 17px; cursor: pointer; }
.dealer-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.dealer-card-link:hover { text-decoration: none; color: inherit; }
/* Hero logo banner — the prominent feature of the card. */
.dealer-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  border-bottom: 1px solid var(--c-border-2);
  overflow: hidden;
}
.dealer-card-logo.has-logo { background: #fff; }
.dealer-card-logo img {
  max-width: 82%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.dealer-card-logo-fallback {
  font-weight: 800;
  font-size: 52px;
  letter-spacing: 0.02em;
  color: var(--c-brand-text);
  opacity: 0.85;
  line-height: 1;
}
.dealer-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-4);
}
.dealer-card-headings {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dealer-card-name {
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-brand-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-card-contact {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.dealer-card-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  font-size: var(--fs-sm);
}
.dealer-card-details div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--sp-2);
  align-items: baseline;
}
.dealer-card-details dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.dealer-card-details dd {
  margin: 0;
  color: var(--c-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-card-details dd.dealer-card-loc {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dealer-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dealer-card-web { color: var(--c-text-2); }
.dealer-card-open { color: var(--c-brand-text); }

/* ============================================================
   Supplier profile — inline-editable page with logo upload
   ============================================================ */
.dealer-profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  align-items: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.dealer-profile-logo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}
.dealer-logo-preview {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dealer-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.dealer-logo-placeholder {
  font-size: 64px;
  font-weight: 700;
  color: var(--c-faint);
  line-height: 1;
}
.dealer-logo-form { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Single-click logo: the preview is a label wrapping a hidden file input. */
.dealer-logo-pick { position: relative; cursor: pointer; }
.dealer-logo-pick:hover { border-color: var(--c-accent); }
.dealer-logo-pick:focus-within {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.dealer-logo-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.66);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity .12s ease;
}
.dealer-logo-pick:hover .dealer-logo-overlay,
.dealer-logo-pick:focus-within .dealer-logo-overlay { opacity: 1; }
.dealer-profile-form { min-width: 0; }
.dealer-profile-form fieldset + fieldset { margin-top: var(--sp-4); }
/* Full-width stacked field (Notes) sitting outside the .grid row. */
.dealer-field-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-text-2);
}
.dealer-field-stack textarea {
  width: 100%;
  font-size: var(--fs-md);
  padding: 7px var(--sp-2);
  resize: vertical;
}

/* ============================================================
   Engines list — split by install state, grouped by engine type,
   rendered as wide horizontal cards (one per row on desktop).
   ============================================================ */
/* Page-level tab rows (engines page, aircraft fleet page) sit between the
   page header and the content grid. Same base look as the in-aircraft tabs
   (.aircraft-tabs) — these helpers just add page-level spacing since they're
   not wrapped in a .page-spine. */
.engine-type-tabs { margin: var(--sp-2) 0 0; }
.aircraft-category-tabs { margin: 0 0 var(--sp-2); }

/* ------------------------------------------------------------
   Secondary sub-filter — a labelled segmented control that sits
   directly under the primary class/type tabs (e.g. airworthiness
   category on the fleet page, installation status on the engines
   page). Styled deliberately *unlike* the folder tabs so it reads
   as a filter applied *within* the active tab, not another peer
   row of tabs — which was the source of the old confusion.
   ------------------------------------------------------------ */
.subfilter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4);
}
.subfilter-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.subfilter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}
.subfilter .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--sp-3);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-2);
  font: 500 var(--fs-sm)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.subfilter .seg:hover {
  color: var(--c-brand-text);
  background: var(--c-brand-soft);
  text-decoration: none;
}
.subfilter .seg.active {
  background: var(--c-accent);
  color: var(--c-bg);
  font-weight: 600;
}
.subfilter .seg .seg-count {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--c-muted);
}
.subfilter .seg:hover .seg-count { color: inherit; }
.subfilter .seg.active .seg-count { color: inherit; opacity: .7; }

/* Engine list — Installed / Uninstalled stacked as sections, each a grid of
   hero cards that navigate to the engine. */
.engine-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.engine-list-heading {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.engine-list-count {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.engine-list-empty { margin: var(--sp-2) 0 0; }

/* Engine hero cards — photo on top, details below, mirroring the fleet cards
   on the aircraft list. Clicking a card navigates to the engine; the
   last-opened card is marked .is-active when the user returns to this list. */
.engine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
  /* No top margin: the parent .engine-list already supplies the gap (and a
     section heading, when shown, carries its own). Keeps the first row of
     engine cards aligned with the aircraft grid's first row. */
  margin-top: 0;
}
.engine-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--sh-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.engine-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--c-border-2);
}
.engine-card.is-active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}
.engine-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.engine-card-link:hover { text-decoration: none; color: inherit; }
.engine-card-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.engine-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.engine-card-placeholder {
  font-size: 56px;
  color: var(--c-faint);
  line-height: 1;
}
.engine-card-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.engine-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.engine-card-sn {
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-brand-text);
  letter-spacing: 0.01em;
}
.engine-card-meta {
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.engine-card-tt {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 500;
}
.engine-card-install {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.engine-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border-2);
}
.engine-card-counts .overdue { color: var(--c-bad); font-weight: 700; }
.engine-card-counts .due-soon { color: var(--c-warn); font-weight: 700; }
.engine-card-counts .ok { color: var(--c-ok); font-weight: 700; }

/* Aircraft and engine cards share one footprint. Their image, body and counts
   are identical; only the aircraft card's HOBBS editor footer adds height, so a
   shared min-height squares them into equal tiles. Desktop only — on phones the
   cards stack and a fixed floor would just add dead space. */
@media (min-width: 601px) {
  .fleet-card,
  .engine-card { min-height: 410px; }
}

/* ============================================================
   Company / workspace cards (Your Companies page)
   ============================================================ */
.company-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.company-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.company-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--c-border-2);
}
.company-card-static,
.company-card-static:hover {
  transform: none;
  box-shadow: var(--sh-sm);
  border-color: var(--c-border);
  cursor: default;
}
.company-card-static.company-card-current,
.company-card-static.company-card-current:hover {
  border-color: var(--c-accent);
  box-shadow: inset 4px 0 0 var(--c-accent), var(--sh-sm);
}
.company-card-current {
  border-color: var(--c-accent);
  box-shadow: inset 4px 0 0 var(--c-accent), var(--sh-sm);
}
.company-card-current:hover {
  box-shadow: inset 4px 0 0 var(--c-accent), var(--sh-lg);
}
.company-card-top {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.company-card-avatar {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
}
.company-card-current .company-card-avatar {
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.company-card-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.company-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}
.company-card-name {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-brand-text);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-card-current-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.company-card-current-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand);
}
.company-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
}
.role-owner {
  background: var(--c-warn-bg);
  color: var(--c-warn);
  border: 1px solid var(--c-warn-border);
}
.role-member {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.company-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-2);
}
.company-card-switch { margin: 0; }
.company-card-switch-btn {
  width: 100%;
  padding: 8px var(--sp-3);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-sm);
  font: 600 var(--fs-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.company-card-switch-btn:hover {
  background: var(--c-brand-hover, #1d3a6d);
  border-color: var(--c-brand-hover, #1d3a6d);
}
.company-card-active-note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  padding: 6px 0;
  font-style: italic;
}
.company-card-links {
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--c-text-2);
}
.company-card-links a {
  color: var(--c-accent);
  text-decoration: none;
}
.company-card-links a:hover { text-decoration: underline; }
.company-card-link-sep { color: var(--c-faint); margin: 0 2px; }
.company-card-avatar-logo {
  background: var(--c-surface);
  padding: 6px;
  border: 1px solid var(--c-border);
}
.company-card-current .company-card-avatar-logo {
  background: var(--c-surface);
  border-color: var(--c-accent);
}
.company-card-avatar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   Company edit page — sections + logo card
   ============================================================ */
.company-edit-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-4);
}
.company-edit-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.company-edit-section {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-brand-text);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border-2);
}
.company-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}
.company-edit-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.company-edit-fields label.span-2 { grid-column: 1 / -1; }
.company-edit-fields input {
  padding: 7px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font: var(--fs-sm) var(--font-sans);
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
  background: var(--c-surface);
}
.company-edit-fields input:focus {
  outline: 2px solid var(--c-accent);
  border-color: var(--c-accent);
}
.company-edit-logo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: stretch;
}
.company-edit-logo-preview {
  aspect-ratio: 1;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--sp-3);
}
.company-edit-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.company-edit-logo-placeholder {
  color: var(--c-faint);
  font-size: var(--fs-sm);
  font-style: italic;
}
.company-edit-logo-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* Single-click logo: the preview is a label wrapping a hidden file input. */
.company-edit-logo-pick { position: relative; cursor: pointer; }
.company-edit-logo-pick:hover { border-color: var(--c-accent); }
.company-edit-logo-pick:focus-within {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.company-edit-logo-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.66);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity .12s ease;
}
.company-edit-logo-pick:hover .company-edit-logo-overlay,
.company-edit-logo-pick:focus-within .company-edit-logo-overlay { opacity: 1; }
@media (max-width: 760px) {
  .company-edit-grid { grid-template-columns: 1fr; }
  .company-edit-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   Aircraft / Engine OVERVIEW page
   ============================================================ */
.overview-hero {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-sm);
}
/* When there's no photo (e.g. component-move) collapse to single column. */
.overview-hero:not(:has(.overview-photo)) {
  grid-template-columns: 1fr;
}
.overview-photo {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-photo-placeholder { font-size: 56px; color: var(--c-faint); }

.overview-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  align-content: start;
}
.overview-facts > div { display: flex; flex-direction: column; gap: 2px; }
.overview-facts dt {
  color: var(--c-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.overview-facts dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text);
}

/* Profile section dividers — separate the major bands of the unified Aircraft Profile */
.profile-divider {
  margin: var(--sp-4) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.profile-divider .profile-divider-sub {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-2);
  margin-top: 2px;
}

/* Engine spec cards — read-only engine Overview + Info inside the Aircraft Profile */
.engine-spec-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.engine-spec-head {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.engine-spec-photo {
  flex: 0 0 auto;
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.engine-spec-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.engine-spec-head-body { flex: 1 1 220px; min-width: 0; }
.engine-spec-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.engine-spec-sub { margin: 2px 0 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.engine-spec-livett {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 0;
}
.engine-spec-livett .metric-value { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); }
.engine-spec-notes .overview-facts-label {
  display: block;
  color: var(--c-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.engine-spec-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin: 0; font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .engine-spec-photo { width: 100%; aspect-ratio: 16 / 9; }
}

.overview-list { background: var(--c-surface); }
.overview-notes {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  white-space: pre-wrap;
  margin: 0;
}

/* ============================================================
   Aircraft identity card — top-of-overview hero.
   Photo on the left, identity + key metrics on the right.
   ============================================================ */
.aircraft-identity {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
  align-items: stretch;
}
.aircraft-identity-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, #eef2f7 0%, #e3eaf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-2);
}
.aircraft-identity-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aircraft-identity-placeholder {
  font-size: 64px;
  color: var(--c-faint);
  line-height: 1;
}
/* Clickable identity photo — a label wrapping a hidden file input so a single
   click on the photo opens the file picker. Hover/focus shows an overlay hint. */
.aircraft-identity-photo-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.aircraft-identity-photo-col .aircraft-identity-photo { width: 100%; }
.aircraft-identity-photo-btn {
  position: relative;
  padding: 0;
  width: 100%;
  cursor: pointer;
  box-shadow: none;
  font: inherit;
}
.aircraft-identity-photo-btn:hover { border-color: var(--c-accent); }
.aircraft-identity-photo-btn:focus-within {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.aircraft-identity-photo-remove { display: flex; }
.aircraft-identity-photo-remove .link-button-dark,
.aircraft-identity-photo-actions .link-button-dark { font-size: var(--fs-xs); }
.aircraft-identity-photo-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.aircraft-identity-photo-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.66);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity .12s ease;
}
.aircraft-identity-photo-btn:hover .aircraft-identity-photo-overlay,
.aircraft-identity-photo-btn:focus-within .aircraft-identity-photo-overlay { opacity: 1; }

.aircraft-identity-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-1) 0;
}
.aircraft-identity-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.aircraft-identity-tail {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.aircraft-identity-type {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-text-2);
  letter-spacing: -0.005em;
}
.aircraft-identity-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  margin-top: auto;
  border-top: 1px solid var(--c-border-2);
}
.aircraft-identity-metrics .metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aircraft-identity-metrics .metric-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}
.aircraft-identity-metrics .metric-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.aircraft-identity-metrics .metric-unit {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-left: 2px;
  font-weight: 500;
}
/* Inline-editable identification + live times in the identity card —
   consolidates the old read-only chips and the "Identification" /
   "Current times" form sections into one place at the top. */
.aircraft-identity-form {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.aircraft-identity-form .aircraft-identity-metrics {
  margin-top: 0;
}
.identity-fields {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.identity-fields > label {
  gap: 4px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}
.identity-fields > label > input,
.identity-fields > label > select {
  font-size: var(--fs-sm);
  padding: 6px var(--sp-3);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
}
.aircraft-identity-metrics .metric-edit {
  cursor: text;
}
.aircraft-identity-metrics .metric-input {
  width: 100%;
  min-width: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding: 4px 8px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.aircraft-identity-metrics .metric-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.aircraft-identity-footer {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.aircraft-identity-footer .sep {
  color: var(--c-faint);
  margin: 0 var(--sp-1);
}

@media (max-width: 760px) {
  .aircraft-identity {
    grid-template-columns: 1fr;
    padding: var(--sp-4);
    gap: var(--sp-4);
  }
  .aircraft-identity-photo { aspect-ratio: 16 / 10; max-height: 320px; }
  .aircraft-identity-tail { font-size: var(--fs-3xl); }
  .aircraft-identity-metrics { gap: var(--sp-3); }
}

/* ============================================================
   Status bar  —  single compact "what-needs-my-attention" row.
   Status dot + title on the left, inline count chips, optional
   CTA on the right. Replaces the old oversized hero + stats.
   ============================================================ */
.status-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.status-bar-state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.status-bar-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-text-2);
  flex: 0 0 auto;
}
.status-bar-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.status-bar-sub {
  font-weight: 500;
  color: var(--c-warn);
  font-size: var(--fs-sm);
}
/* Inline count chips — push to the right, stay clickable */
.status-bar-counts {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}
.status-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  text-decoration: none;
  color: var(--c-text-2);
  transition: border-color .12s ease, background .12s ease;
}
.status-count:hover {
  border-color: var(--c-border);
  background: var(--c-brand-soft);
  color: var(--c-text);
  text-decoration: none;
}
.status-count-value {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.status-count-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-count.overdue .status-count-value { color: var(--c-bad); }
.status-count.due-soon .status-count-value { color: var(--c-warn); }
.status-count.ok .status-count-value { color: var(--c-ok); }
.status-count.na .status-count-value { color: var(--c-muted); }

.status-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background .12s ease;
}
.status-bar-cta:hover { background: var(--c-brand-hover); color: var(--c-on-brand); text-decoration: none; }
.status-bar-cta.secondary {
  background: var(--c-surface);
  color: var(--c-brand-text);
  border: 1px solid var(--c-border);
}
.status-bar-cta.secondary:hover { background: var(--c-brand-soft); color: var(--c-brand-text); }

/* Status color — driven by the dot + left accent */
.status-bar.is-bad  { border-left: 4px solid var(--c-bad); }
.status-bar.is-bad  .status-bar-dot { background: var(--c-bad); }
.status-bar.is-warn { border-left: 4px solid var(--c-warn); }
.status-bar.is-warn .status-bar-dot { background: var(--c-warn); }
.status-bar.is-ok   { border-left: 4px solid var(--c-ok); }
.status-bar.is-ok   .status-bar-dot { background: var(--c-ok); }

@media (max-width: 720px) {
  .status-bar-counts { margin-left: 0; width: 100%; }
  .status-bar-cta { width: 100%; justify-content: center; }
}

/* Status stats strip — compact secondary cards under the hero */
.status-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.status-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.status-stat:hover {
  border-color: var(--c-border-2);
  background: var(--c-surface-2);
  color: inherit;
  text-decoration: none;
}
.status-stat-label {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-stat-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.status-stat.overdue .status-stat-value { color: var(--c-bad); }
.status-stat.due-soon .status-stat-value { color: var(--c-warn); }
.status-stat.ok .status-stat-value { color: var(--c-ok); }
.status-stat.na .status-stat-value { color: var(--c-muted); }

/* ============================================================
   Section-collapse — neutral collapsible reference section
   for any block of reference data that doesn't need to be
   open by default.
   ============================================================ */
details.section-collapse {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
details.section-collapse > summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  user-select: none;
}
details.section-collapse > summary::-webkit-details-marker { display: none; }
details.section-collapse > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--c-muted);
  border-bottom: 1.5px solid var(--c-muted);
  transform: rotate(45deg);
  transition: transform .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
details.section-collapse:not([open]) > summary::before { transform: rotate(-45deg); }
details.section-collapse > summary:hover { color: var(--c-brand-text); }
details.section-collapse > summary:hover::before { border-color: var(--c-accent); }
details.section-collapse > summary .collapse-meta {
  margin-left: auto;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
}
details.section-collapse > .collapse-body {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-border-2);
}

/* ============================================================
   AD library / list status cards
   ============================================================ */
.ad-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
.ad-status-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
}
.ad-status-label {
  color: var(--c-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.ad-status-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-brand-text);
  margin: var(--sp-1) 0 var(--sp-2);
  line-height: 1.1;
}
.ad-sources { margin: var(--sp-4) 0; }
.ad-sources summary {
  cursor: pointer;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ============================================================
   AD compliance card (per-AD on aircraft AD page)
   ============================================================ */
.ad-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--sh-sm);
}
.ad-card.alt { background: var(--c-surface-2); }
/* AD card severity — colored 4px inset left stripe, flat background.
   Replaces the older gradient + tinted-border treatment. */
.ad-card.row-overdue { box-shadow: inset 4px 0 0 var(--c-bad), var(--sh-sm); }
.ad-card.row-due-soon { box-shadow: inset 4px 0 0 var(--c-warn), var(--sh-sm); }
.ad-card-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.ad-card-col .field-label {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.ad-card-col .field-value {
  font-size: var(--fs-sm);
}
.ad-card-col .field-value-inline {
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.ad-card-col .field-value input,
.ad-card-col .field-value textarea {
  width: 100%;
  padding: 6px var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font: var(--fs-sm) var(--font-sans);
  background: var(--c-surface);
}
.ad-card-col .field-value textarea { min-height: 72px; resize: vertical; }
.ad-card-col .field-value-pair {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.ad-card-col .field-value-pair input { flex: 1; min-width: 0; }
.ad-card-col .field-value-pair input.num {
  max-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ad-card-col .field-value-pair .completed-flag { white-space: nowrap; }
.ad-card .checkbox-row { display: flex; gap: var(--sp-5); align-items: center; }
.ad-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--c-accent);
  vertical-align: middle;
  margin: 0;
}
.ad-card .cb-label { font-size: var(--fs-sm); }
.ad-card .ad-link {
  color: var(--c-accent);
  font-weight: 700;
  text-decoration: none;
}
.ad-card .ad-link:hover { color: var(--c-accent-hover); text-decoration: underline; }

.ad-card-col.left .field-label,
.ad-card-col.left .field-value-inline { display: inline; }
.ad-card-col.left > div { line-height: 1.6; }

/* Footer action row at the bottom of the AD card (e.g. Remove from list). */
.ad-card-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  margin-top: var(--sp-1);
  border-top: 1px dashed var(--c-border);
}

/* Move-to-engine dropdown inside the AD card footer (multi-engine case). */
.card-move-menu { position: relative; }
.card-move-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.card-move-menu > summary::-webkit-details-marker { display: none; }
.card-move-menu > ul {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin: 0 0 var(--sp-1) 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  z-index: 10;
  min-width: 240px;
}
.card-move-menu > ul li { margin: 0; padding: 0; }
.card-move-menu > ul li form { margin: 0; }
.card-move-menu > ul li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.card-move-menu > ul li button:hover { background: var(--c-brand-soft); }

/* Engine-sourced AD card (read-only on the aircraft AD page). The compliance
   data lives with the engine — use the banner + accent stripe to make that
   clear and the "Edit on engine" link to send the user to the right page. */
.ad-card-engine {
  grid-template-areas:
    "banner banner banner"
    "left middle right";
  grid-template-columns: 1.1fr 1fr 1.2fr;
  border-color: var(--c-accent);
  box-shadow: inset 4px 0 0 var(--c-accent), var(--sh-sm);
}
.ad-card-engine.row-overdue { box-shadow: inset 4px 0 0 var(--c-bad), var(--sh-sm); }
.ad-card-engine.row-due-soon { box-shadow: inset 4px 0 0 var(--c-warn), var(--sh-sm); }
.ad-card-engine .ad-engine-banner {
  grid-area: banner;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--c-border);
  margin-bottom: var(--sp-1);
}
.ad-card-engine .ad-card-col.left { grid-area: left; }
.ad-card-engine .ad-card-col.middle { grid-area: middle; }
.ad-card-engine .ad-card-col.right { grid-area: right; }
.ad-engine-badge {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
}
.ad-engine-edit-link {
  margin-left: auto;
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: none;
}
.ad-engine-edit-link:hover { color: var(--c-accent-hover); text-decoration: underline; }

.recur-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}

.signoff-block {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.signoff-block select {
  width: 100%;
  padding: 6px var(--sp-2);
  font: var(--fs-sm) var(--font-sans);
  background: var(--c-surface);
}

/* ============================================================
   AD toolbar (search/sort row above AD lists)
   ============================================================ */
.ad-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  box-shadow: var(--sh-sm);
}
.ad-toolbar .toolbar-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  font-weight: 500;
}
.ad-toolbar .toolbar-field select {
  padding: 5px var(--sp-2);
  font-size: var(--fs-sm);
}
.ad-toolbar .toolbar-search {
  padding: 6px var(--sp-3);
  min-width: 240px;
  flex: 1;
}
.cb-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  cursor: pointer;
  font-weight: 500;
}

/* Overflow menu (was "Action ▾") — icon-only "⋯" affordance.
   Used in toolbars and page-header rows for genuine long-tail actions
   that aren't primary enough to deserve their own button. */
.action-menu { position: relative; margin-left: auto; }
.action-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--c-surface);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary:hover,
.action-menu[open] > summary {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-color: var(--c-brand-soft);
}
.action-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  min-width: 220px;
  z-index: 10;
}
.action-menu ul li a {
  display: block;
  padding: 6px var(--sp-4);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.action-menu ul li a:hover { background: var(--c-brand-soft); color: var(--c-brand-text); text-decoration: none; }

/* ============================================================
   AD library table
   ============================================================ */
.ad-library-table { margin-top: var(--sp-2); }
.ad-library-table th,
.ad-library-table td { padding: 8px var(--sp-3); font-size: var(--fs-sm); vertical-align: middle; }
.ad-library-table td.muted-cell { color: var(--c-muted); font-size: var(--fs-xs); }
.ad-library-table tr.lib-assigned { background: #f1faf3; }
.ad-library-table tr.lib-assigned td:first-child { box-shadow: inset 3px 0 0 var(--c-ok); }
.ad-library-table td.library-action { text-align: right; white-space: nowrap; min-width: 180px; }
.ad-library-table .add-btn,
.ad-library-table .add-list-btn {
  padding: 6px var(--sp-4);
  background: var(--c-ok);
  color: var(--c-bg);
  border: 1px solid var(--c-ok);
  border-radius: var(--r-md);
  font: 600 var(--fs-sm) var(--font-sans);
  cursor: pointer;
}
.ad-library-table .add-btn:hover,
.ad-library-table .add-list-btn:hover { background: #185d2c; border-color: #185d2c; }
.ad-library-table .completed-btn {
  display: inline-block;
  padding: 4px var(--sp-3);
  background: var(--c-ok-bg);
  color: var(--c-ok);
  border: 1px solid var(--c-ok-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* AD library search + assign (on /ads/list) */
.ad-library-search {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.ad-library-search h2 {
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-1);
}
.ad-library-table .ad-assign-form {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: flex-end;
}
.ad-library-table .ad-assign-select {
  padding: 5px var(--sp-2);
  font-size: var(--fs-sm);
  max-width: 220px;
}
.ad-library-table .assign-ok {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-ok);
}

/* AD section heading (per-category) */
.ad-group-heading {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-brand-text);
  margin: var(--sp-6) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--c-accent);
  background: var(--c-brand-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ad-group-heading .ad-group-count {
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-size: 11px;
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  margin-left: auto;
}
.ad-group-heading.ad-group-engine {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface));
}
.ad-group-heading.ad-group-engine .ad-group-count {
  background: var(--c-accent);
  color: var(--c-bg);
}
.ad-group-heading .ad-group-link {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
}
.ad-group-heading .ad-group-link:hover { text-decoration: underline; }
.ad-group-heading .ad-group-link + .ad-group-count { margin-left: var(--sp-3); }
.muted-thin { color: var(--c-muted); font-weight: 400; font-size: var(--fs-xs); }
/* Count badge appearing inside an h1 (e.g. "Aircraft 3") */
h1 .muted-thin {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-brand-soft);
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   History sections (collapsible)
   ============================================================ */
.history-section { margin: var(--sp-4) 0; }
.history-section > summary {
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-brand-text);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--sh-sm);
}
.history-section > summary::-webkit-details-marker { display: none; }
.history-section > summary::before {
  content: '▾';
  font-size: var(--fs-xs);
  display: inline-block;
  transition: transform .15s;
  color: var(--c-muted);
}
.history-section:not([open]) > summary::before { transform: rotate(-90deg); }
.history-section > summary:hover { background: var(--c-brand-soft); }
.history-section .history-count {
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  margin-left: auto;
}
.history-section > .history,
.history-section > .muted { margin-top: var(--sp-2); }

.history-clear-form {
  display: flex;
  justify-content: flex-end;
  margin: var(--sp-3) 0 0;
}

/* ============================================================
   Profile header (account page)
   ============================================================ */
.profile-header {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.profile-header h1 { margin: 0 0 var(--sp-2); display: block; }
.profile-sub {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.profile-sub strong { color: var(--c-brand-text); }
.profile-meta {
  margin: var(--sp-2) 0 0;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.profile-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  box-shadow: var(--sh-sm);
}
.profile-card > h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--c-brand-text);
}
.profile-card > h2 .muted-thin {
  font-weight: 400;
  color: var(--c-muted);
  margin-left: var(--sp-2);
}
.profile-card > .hint {
  margin-top: 0;
}
.profile-card .company-cards {
  margin-top: 0;
}

/* ---- Two-factor setup page ---- */
.twofa-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: start;
  margin: var(--sp-4) 0 var(--sp-5);
}
.twofa-steps {
  margin: 0;
  padding-left: 1.25em;
  line-height: 1.9;
  color: var(--c-text);
}
.twofa-key {
  margin-top: var(--sp-4);
}
.twofa-key-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.twofa-key-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.twofa-key-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  user-select: all;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 7px 10px;
}
.copy-btn.copied { color: #15803d; border-color: #15803d; }
.twofa-qr {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  text-align: center;
}
.twofa-qr img { display: block; width: 180px; height: 180px; }
.twofa-qr figcaption { margin-top: 6px; }
.twofa-confirm {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
}
.twofa-confirm-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.twofa-confirm-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.code-input {
  width: 8.5rem;
  text-align: center;
  letter-spacing: .4em;
  font-size: 1.2em;
  font-variant-numeric: tabular-nums;
  padding-right: calc(0.6rem - 0.4em);
}
@media (max-width: 640px) {
  .twofa-grid { grid-template-columns: 1fr; }
  .twofa-qr { justify-self: start; }
}

/* (Legacy) perm-list — kept for the invite-form fallback. */
.perm-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0;
  columns: 2;
  column-gap: var(--sp-5);
}
.perm-list li { margin: 4px 0; font-size: var(--fs-sm); break-inside: avoid; }

/* ============================================================
   Members & roles — Discord-style card layout
   ============================================================ */
.page-head {
  margin: 0 0 var(--sp-5);
}
.page-head h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-brand-text);
}
.page-head-sub {
  color: var(--c-text-2);
  font-weight: 500;
}
.page-head-sep {
  color: var(--c-faint);
  margin: 0 var(--sp-2);
}
.page-head-meta {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.page-head-meta a { color: var(--c-accent); }

.hint-inline { color: var(--c-muted); font-weight: 400; font-size: var(--fs-xs); }

/* Button variants (used by members + roles pages) */
.btn-primary { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); }
.btn-ghost {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); }
.btn-danger { background: var(--c-danger-fill); color: var(--c-on-brand); border-color: var(--c-danger-fill); }
.btn-danger:hover { background: var(--c-danger-fill-hover); border-color: var(--c-danger-fill-hover); }
.btn-sm { padding: 4px var(--sp-3); font-size: var(--fs-xs); }

/* Member cards */
.members-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}
.member-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
}
.member-card-id { display: flex; align-items: flex-start; }
.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font: 600 var(--fs-md)/44px var(--font-sans);
  text-align: center;
  letter-spacing: 0.02em;
}
.member-card-main { min-width: 0; }
.member-card-head { margin-bottom: var(--sp-2); }
.member-card-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.member-card-name h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
}
.member-card-sub {
  margin: 2px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.member-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font: 600 11px/1.4 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.member-badge.owner {
  background: var(--c-warn-bg);
  color: var(--c-warn);
  border: 1px solid var(--c-warn-border);
}
.member-badge.self {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border: 1px solid var(--c-border);
}

.member-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.member-no-roles {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-style: italic;
}

/* Role pills */
.role-pill {
  --role-color: #7a8794;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: color-mix(in srgb, var(--role-color) 12%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--role-color) 35%, var(--c-border));
  color: color-mix(in srgb, var(--role-color) 70%, var(--c-text));
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font: 600 var(--fs-xs) var(--font-sans);
  line-height: 1.4;
}
.role-pill-dot {
  --role-color: #7a8794;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--role-color);
  flex-shrink: 0;
  display: inline-block;
}
.role-pill-remove-form {
  display: inline-flex;
  margin: 0;
}
.role-pill-remove {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.55;
  padding: 0 2px;
  font: 700 var(--fs-md)/1 var(--font-sans);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.role-pill-remove:hover { opacity: 1; background: rgba(0,0,0,0.06); }

.role-pill-add {
  cursor: pointer;
  background: var(--c-surface-2);
  border-color: var(--c-border-2);
  color: var(--c-text-2);
  list-style: none;
}
.role-pill-add::-webkit-details-marker { display: none; }
.role-pill-add:hover { background: var(--c-brand-soft); color: var(--c-brand-text); }

.role-add { position: relative; }
.role-add[open] .role-pill-add { background: var(--c-brand-soft); color: var(--c-brand-text); }
.role-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.role-add-menu li { margin: 0; }
.role-add-menu form { margin: 0; display: block; }
.role-add-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  color: var(--c-text);
  border: none;
  border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  font: 500 var(--fs-sm) var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.role-add-item:hover { background: var(--c-brand-soft); color: var(--c-brand-text); }

/* Permission breakdown disclosure */
.member-perm-detail summary {
  cursor: pointer;
  list-style: none;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.member-perm-detail summary::-webkit-details-marker { display: none; }
.member-perm-detail summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform .15s;
}
.member-perm-detail[open] summary::before { transform: rotate(90deg); }
.member-perm-grid {
  list-style: none;
  padding: var(--sp-3) 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-5);
}
.member-perm-grid > li > strong {
  display: block;
  color: var(--c-brand-text);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.member-perm-grid > li > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.member-perm-grid > li > ul > li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  padding: 1px 0;
}
.member-perm-grid li.on { color: var(--c-text); }
.member-perm-grid li.off { color: var(--c-faint); text-decoration: line-through; }
.member-perm-grid .perm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-faint);
  flex-shrink: 0;
}
.member-perm-grid li.on .perm-dot { background: var(--c-ok); }

.member-card-actions { display: flex; align-items: flex-start; }

/* "Add member" form */
.member-add {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
}
.member-add h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--c-brand-text);
}
.member-add-roles {
  border: none;
  padding: 0;
  margin: var(--sp-4) 0;
}
.member-add-roles legend {
  font-weight: 600;
  color: var(--c-brand-text);
  margin-bottom: var(--sp-2);
  padding: 0;
}
.role-picker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2);
}
.role-picker-item {
  --role-color: #7a8794;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--c-surface);
  transition: background .12s, border-color .12s;
}
.role-picker-item:hover { background: var(--c-surface-2); }
.role-picker-item input[type="checkbox"] { margin: 0; }
.role-picker-item:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--role-color) 8%, var(--c-surface));
  border-color: var(--role-color);
}
.role-picker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--role-color);
}
.role-picker-name {
  font-weight: 600;
  color: var(--c-text);
  margin-right: var(--sp-2);
}
.role-picker-desc {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  grid-column: 3 / 4;
}

/* ============================================================
   Roles management page
   ============================================================ */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
}
.role-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}
.role-card.is-editing {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
  grid-column: 1 / -1;
}
.role-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.role-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.role-card-title { flex: 1; min-width: 0; }
.role-card-title h2 {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--c-text);
}
.role-card-meta {
  margin: 2px 0 0;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.role-card-edit {
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.role-card-desc {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.role-perm-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.role-perm-summary > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-perm-summary > li > strong {
  color: var(--c-brand-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-perm-summary > li.empty {
  color: var(--c-muted);
  font-style: italic;
  font-size: var(--fs-sm);
}
.role-perm-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.role-perm-tag {
  display: inline-block;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  color: var(--c-text-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.role-card-delete {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-2);
}

.role-new {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm);
  margin-top: var(--sp-5);
}
.role-new h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--c-brand-text);
}

/* Role edit form (inline within card and standalone "new role" form) */
.role-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.role-form-head {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
}
.role-form-color { display: flex; align-items: center; gap: var(--sp-2); }
.role-form-color input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
}
.role-form-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.role-form-name { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.role-form-desc { display: flex; flex-direction: column; gap: 4px; }
.role-form-label {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--c-brand-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-form-perms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.perm-group {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: 0;
  background: var(--c-surface-2);
}
.perm-group legend {
  padding: 0 var(--sp-2);
  margin: 0 0 var(--sp-2);
}
.perm-group-title {
  font-weight: 600;
  color: var(--c-brand-text);
  font-size: var(--fs-sm);
}
.perm-group-desc {
  display: block;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  margin-top: 2px;
}
.perm-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.perm-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
}
.perm-toggle:hover { background: var(--c-surface); }
.perm-toggle input[type="checkbox"] { margin: 0; }
.perm-toggle-label { line-height: 1.3; }

.role-form-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* ============================================================
   Filter chips (limits / ADs)
   ============================================================ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--c-brand-soft); color: var(--c-brand-text); text-decoration: none; }
.chip.active { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); }
.chip.active .chip-count { background: rgba(255, 255, 255, 0.18); color: var(--c-on-brand); }
.chip-count {
  background: var(--c-brand-soft);
  color: var(--c-text-2);
  border-radius: var(--r-pill);
  padding: 0 var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip-clear { color: var(--c-bad); border-color: var(--c-bad-border); }
.chip-clear:hover { background: var(--c-bad-bg); color: var(--c-bad); }

/* ============================================================
   Limit groups (collapsible per source)
   ============================================================ */
.limit-group {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.limit-group > summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: var(--fs-md);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  color: var(--c-brand-text);
}
.limit-group > summary::-webkit-details-marker { display: none; }
.limit-group > summary::before {
  content: '▾';
  font-size: var(--fs-xs);
  color: var(--c-muted);
  transition: transform .15s;
}
.limit-group:not([open]) > summary::before { transform: rotate(-90deg); }
.limit-group:not([open]) > summary { border-bottom-color: transparent; }
.limit-group-count {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 0 var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.limit-group > table {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.limit-group > table th,
.limit-group > table td { border-left: none; border-right: none; }
.limit-group > table th { position: static; }

/* ============================================================
   Source / badge column (limits)
   ============================================================ */
td.src { white-space: normal; line-height: 1.7; min-width: 180px; }
td.src .src-badges { margin-top: 3px; line-height: 1.6; }
td.src .src-badges:empty { display: none; }
.src-badge {
  display: inline-block;
  padding: 1px var(--sp-2);
  margin: 1px 4px 1px 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.src-badge-h13we   { background: #dbe9f7; color: var(--c-brand); border-color: #b6cde6; }
.src-badge-h15nm   { background: var(--c-ok-bg); color: var(--c-ok); border-color: var(--c-ok-border); }
.src-badge-tms     { background: var(--c-surface-2); color: var(--c-text-2); border-color: var(--c-border); }
.src-badge-ad      { background: var(--c-bad-bg); color: var(--c-bad); border-color: var(--c-bad-border); }
.src-badge-stc     { background: #e6d9f0; color: #4a1f6a; border-color: #c8b0e0; }
.src-badge-company { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.src-badge-cond    { background: #f0e5c8; color: #5a4a14; border-color: #d8c896; }
.src-badge-van-horn { background: #cce7e7; color: #0e4a4a; border-color: #9cc8c8; }
.src-raw { font-style: italic; color: var(--c-muted); font-size: var(--fs-xs); }


/* ============================================================
   Component-limits — flat spreadsheet table. Excel-style: full gridlines
   on every cell, tight padding, plain-text-looking cells that reveal as
   editable inputs on focus, sticky header + first column (row numbers),
   row-number column auto-numbered via CSS counters so PATCH re-renders
   stay correct without server help.
   ============================================================ */
.limits-table-wrap {
  margin-top: var(--sp-4);
  overflow: auto;
  max-height: calc(100vh - 220px);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.limits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--c-surface);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  counter-reset: row;
}
.limits-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--c-text);
  background: var(--c-surface-2);
  padding: 4px 6px;
  border: 1px solid var(--c-border);
  white-space: nowrap;
  line-height: 1.2;
}
.limits-table thead th.num { text-align: right; }
.limits-table thead th.row-num-cell {
  background: var(--c-border);
  text-align: center;
  width: 44px;
  min-width: 44px;
  padding: 4px 4px;
}
.limits-table tbody tr { counter-increment: row; }
.limits-table tbody tr.limit-row > .row-num-cell::before {
  content: counter(row);
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  padding: 0;
}
.limits-table tbody td {
  padding: 0;
  border: 1px solid var(--c-border);
  vertical-align: middle;
  background: transparent;
  white-space: nowrap;
  height: 22px;
}
.limits-table tbody td.row-num-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-surface-2);
  width: 44px;
  min-width: 44px;
  padding: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--c-border);
}
.limits-table tbody tr:hover td.row-num-cell { background: var(--c-surface-2); }
.limits-table tbody tr:hover { background: rgba(79, 179, 168, 0.08); }
.limits-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.limits-table .base-pn-cell {
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  color: var(--c-text-2);
}
.limits-table .part-number-cell { font-variant-numeric: tabular-nums; }
.limits-table .limit-cell-kind { width: 70px; min-width: 70px; }
.limits-table .limit-row-actions {
  text-align: center;
  padding: 0 4px;
}
.limits-table .limit-row-actions form { margin: 0; }
.limits-table .limit-row-actions button { padding: 0; }

/* Inline cell editors: read like flat text, reveal as inputs on focus. */
.limits-table input.inline,
.limits-table select.inline {
  width: 100%;
  height: 22px;
  min-width: 50px;
  padding: 0 5px;
  border: none;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  color: var(--c-text);
  box-sizing: border-box;
}
.limits-table input.inline.num { text-align: right; font-variant-numeric: tabular-nums; }
.limits-table input.inline:hover,
.limits-table select.inline:hover {
  background: rgba(79, 179, 168, 0.10);
}
.limits-table input.inline:focus,
.limits-table select.inline:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  background: var(--c-surface);
  position: relative;
  z-index: 1;
}
.limits-table input.inline.on-cond {
  color: var(--c-warn);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Source-kind row tint. Light so it's a hint, not a wall of color. */
.limits-table .limit-row.limit-kind-ad   { background: rgba(226, 128, 140, 0.07); }
.limits-table .limit-row.limit-kind-tcds { background: rgba(79, 179, 168, 0.06); }
.limits-table .limit-row.limit-kind-tm   { background: transparent; }
.limit-kind-select {
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.limit-kind-ad   .limit-kind-select { color: var(--c-bad); }
.limit-kind-tcds .limit-kind-select { color: var(--c-brand-text); }
.limit-kind-tm   .limit-kind-select { color: var(--c-text-2); }

/* ============================================================
   Component Limits page
   ------------------------------------------------------------
   Inspired by Linear / Stripe / Vercel: heavy whitespace,
   tokens-only color, one accent, small chips for state,
   thin separators, mono numerals.
   ============================================================ */

.limits-pageheader {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.limits-pageheader-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.limits-pageheader-title {
  margin: 0 0 4px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.limits-pageheader-sub {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.limits-kpis {
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.limits-kpis .status-stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
}
.limits-kpis .status-stat-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
}
.limits-kpis .status-stat-trail {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  margin-left: 4px;
}
.limits-kpis .status-stat.warn .status-stat-value { color: var(--c-warn); }

/* Toolbar: filter tabs + search. Sticks to the top of the content column. */
.limits-toolbar {
  position: sticky;
  top: var(--app-header-h);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  margin: 0 0 var(--sp-3);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-2);
  flex-wrap: wrap;
}
.limits-tabs {
  display: inline-flex;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--sh-sm);
}
.limits-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.limits-tab:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
}
.limits-tab.is-active {
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.limits-tab.is-active:hover { background: var(--c-brand-hover); color: var(--c-on-brand); }
.limits-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--c-surface-2);
  color: var(--c-muted);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.limits-tab.is-active .limits-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

.limits-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 480px;
}
.limits-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
  display: inline-flex;
}
.limits-search input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 32px 7px 30px;
  font: inherit;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.limits-search input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.limits-search input.htmx-request {
  background-image: linear-gradient(90deg,
    rgba(37, 99, 235, 0) 0%,
    rgba(37, 99, 235, 0.12) 50%,
    rgba(37, 99, 235, 0) 100%);
  background-size: 200% 100%;
  animation: limits-search-progress 1.1s linear infinite;
}
@keyframes limits-search-progress {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.limits-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-border);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}
.limits-search-clear:hover { background: var(--c-muted); color: var(--c-on-brand); }

/* Results meta row */
.limit-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2);
  flex-wrap: wrap;
}
.limit-results-counts {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.limit-results-counts strong { color: var(--c-text); font-weight: 600; }
.limit-results-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
}
.limit-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.limit-page-size select {
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--c-surface);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
}

/* Card grid: single column, comfortable spacing. */
.limit-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* Limit-set landing: a filterable list (one row per Make/Model/TCDS set). */
.limit-set-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
}
.limit-set-table thead th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-2);
}
.limit-set-table th.num, .limit-set-table td.num { text-align: right; }
.limit-set-row {
  cursor: pointer;
  transition: background-color .1s ease;
}
.limit-set-row > td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.limit-set-row:hover { background: var(--c-surface-2, rgba(0,0,0,0.03)); }
.limit-set-link { font-weight: 600; color: inherit; text-decoration: none; }
.limit-set-row:hover .limit-set-link { text-decoration: underline; }
.limit-set-row-actions {
  white-space: nowrap;
  text-align: right;
}
.limit-set-row-actions .inline-form { display: inline; }
.limit-set-back {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: none;
}
.limit-set-back:hover { color: var(--c-text); }

/* Per-set components: bulk toolbar + flat sortable table. */
.limit-bulk-toolbar { flex-wrap: wrap; }
.limit-bulk-toolbar #bulk-count { margin-left: var(--sp-2); }
.limit-bulk-toolbar .bulk-toolbar-spacer { flex: 1 1 auto; }
.limit-bulk-toolbar .bulk-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.limit-bulk-toolbar .bulk-copy select { max-width: 220px; }

.limit-comp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2);
}
.limit-comp-table thead th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-2);
  white-space: nowrap;
}
.limit-comp-table th.num, .limit-comp-table td.num { text-align: right; }
.limit-comp-table th.comp-sel, .limit-comp-table td.comp-sel { width: 1%; text-align: center; }
.limit-comp-table th.sortable { cursor: pointer; user-select: none; }
.limit-comp-table th.sortable:hover { color: var(--c-text); }
.limit-comp-table th.sortable::after { content: ' \2195'; opacity: 0.35; font-size: 10px; }
.limit-comp-table th.sortable[aria-sort="ascending"]::after { content: ' \2191'; opacity: 1; }
.limit-comp-table th.sortable[aria-sort="descending"]::after { content: ' \2193'; opacity: 1; }
.limit-comp-row > td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.limit-comp-row:hover { background: var(--c-surface-2, rgba(0,0,0,0.03)); }
.limit-comp-table td.mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.limit-comp-table td.is-oncond { color: var(--c-warn, #b8860b); font-weight: 600; }
.limit-comp-actions { white-space: nowrap; text-align: right; }
.limit-comp-actions .inline-form { display: inline; }

/* Category section heading — divides cards into the spreadsheet's original
   sections (STAB BAR ASSY, MAIN ROTOR BLADES, …). */
.limit-section {
  margin: var(--sp-5) 0 0;
  padding: 0 0 var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-2);
}
.limit-section:first-child { margin-top: var(--sp-2); }

.limit-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.limit-card:hover { border-color: var(--c-border-2); }
.limit-card[open] { box-shadow: var(--sh-sm); }

.limit-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-bottom: 1px solid transparent;
}
.limit-card-header::-webkit-details-marker { display: none; }
.limit-card[open] > .limit-card-header {
  border-bottom-color: var(--c-border-2);
  background: var(--c-surface-2);
}
.limit-card-header:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.limit-card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--c-muted);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.limit-card[open] > .limit-card-header .limit-card-chevron {
  transform: rotate(90deg);
}
.limit-card-pn {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  min-width: 110px;
}
.limit-card-title {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 500;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.limit-card-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.limit-card-body {
  display: flex;
  flex-direction: column;
}
.limit-card-orphan .limit-card-title { font-style: italic; }
.limit-card-orphan .limit-card-pn { color: var(--c-muted); }

/* Chip primitive — small status pills used in card headers, variants, and
   results meta. Designed to be neutral by default with semantic variants. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.chip-muted { background: var(--c-surface-2); color: var(--c-text-2); border-color: var(--c-border); }
.chip-info  { background: var(--c-brand-soft); color: var(--c-brand-text); border-color: rgba(31, 58, 85, 0.18); }
.chip-warn  { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.chip-ok    { background: var(--c-ok-bg); color: var(--c-ok); border-color: var(--c-ok-border); }

/* Variant block — restrained: a thin top border to separate from siblings,
   subtle hover. No left rail, no zebra striping, no pastel field boxes. */
.limit-variant {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border-2);
}
.limit-variant:first-child { border-top: none; }
.limit-variant:hover { background: rgba(31, 58, 85, 0.015); }

.limit-variant-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.limit-variant-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.variant-suffix-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}
.limit-variant-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.limit-variant-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.limit-variant-actions .inline-form { margin: 0; }

/* Ghost button — used for variant action row (override toggle, delete) so
   the controls stay restrained until hovered. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-ghost:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.btn-ghost[aria-expanded="true"] {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-color: rgba(31, 58, 85, 0.2);
}
.btn-ghost-danger:hover {
  background: var(--c-bad-bg);
  color: var(--c-bad);
  border-color: var(--c-bad-border);
}

/* Variant fields: a responsive row of label/value pairs. No pastel boxes;
   the inline-edit input itself carries the visual weight. */
.limit-variant-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: 0;
}
.limit-variant-fields .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.limit-variant-fields .field-wide { grid-column: 1 / -1; }
.limit-variant-fields dt {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.limit-variant-fields dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.field-unit {
  font-size: 11px;
  color: var(--c-muted);
  text-transform: lowercase;
}

/* Inline editable field: looks like text until hovered, focus reveals
   editability. No big colored background — the affordance is a soft
   underline on hover. */
.inline-field {
  width: 100%;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  border-radius: 0;
  transition: border-color .12s ease, background .12s ease;
}
.inline-field::placeholder { color: var(--c-faint); }
.inline-field:hover {
  border-bottom-color: var(--c-border);
}
.inline-field:focus {
  outline: none;
  border-bottom-color: var(--c-accent);
  background: rgba(37, 99, 235, 0.04);
}
.inline-field.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.inline-field.on-cond {
  color: var(--c-warn);
  font-weight: 600;
  font-style: italic;
}
.inline-field.part-number {
  font-family: var(--font-mono);
  font-weight: 600;
  max-width: 180px;
  font-size: var(--fs-sm);
}
.inline-field.component-name {
  flex: 1;
  min-width: 120px;
  font-weight: 500;
}

/* Override panel: a quiet inset below the variant. Slightly recessed so it
   reads as a child of the variant above. */
.limit-overrides-panel {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
}
.limit-overrides-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.limit-overrides-heading .muted-thin {
  font-weight: 400;
  font-size: 12px;
}
.limit-overrides-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.limit-overrides-table thead th {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-align: left;
  border-bottom: 1px solid var(--c-border-2);
  background: var(--c-surface-2);
}
.limit-overrides-table thead th.num { text-align: right; }
.limit-overrides-table tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--c-border-2);
  vertical-align: middle;
}
.limit-overrides-table tbody tr:last-child td { border-bottom: none; }
.limit-overrides-table tbody tr:hover { background: var(--c-surface-2); }
.limit-overrides-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.limit-overrides-table .inline-field { padding: 4px 6px; border-radius: var(--r-sm); }
.limit-overrides-table .inline-field:hover {
  background: var(--c-brand-soft);
  border-bottom-color: transparent;
}
.limit-overrides-table .limit-row-actions { padding: 2px; text-align: center; width: 32px; }
.limit-overrides-table .limit-row-actions form { margin: 0; }
.limit-overrides-table .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--c-muted);
  cursor: pointer;
  padding: 0;
}
.limit-overrides-table .icon-button:hover {
  background: var(--c-bad-bg);
  color: var(--c-bad);
  border-color: var(--c-bad-border);
}
.limit-overrides-table .icon-button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* Add-override form: a quiet block, button stays brand-blue to draw the eye. */
.add-override-form {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
}
.add-override-header {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}
.add-override-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2) var(--sp-3);
  align-items: end;
}
.add-override-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
.add-override-fields input {
  padding: 6px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.add-override-fields input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.add-override-fields button {
  align-self: end;
}

/* Pagination — restrained Linear-style numbers row. */
.limit-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: var(--sp-5) 0;
  flex-wrap: wrap;
}
.limit-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.limit-pagination .page-link:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border-2);
  text-decoration: none;
  color: var(--c-text);
}
.limit-pagination .page-link.is-current {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: 600;
  cursor: default;
}
.limit-pagination .page-link.is-current:hover { background: var(--c-brand); }
.limit-pagination .page-link.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.limit-pagination .page-ellipsis {
  padding: 0 4px;
  color: var(--c-muted);
}

/* Orphan section — minimal collapsible at the bottom. */
.orphan-limits {
  margin-top: var(--sp-6);
}
.orphan-limits > summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orphan-limits > summary:hover { background: var(--c-surface-2); }
.orphan-limits[open] > summary { margin-bottom: var(--sp-3); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-2);
}
.empty-state h3 {
  margin: 0 0 4px;
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.empty-state p { margin: 0; font-size: var(--fs-sm); }

/* Card-level override badge in the header (carried over from earlier — kept
   for the case where the chip group already exists). */
.limit-card-overrides-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
}

/* Responsive: stack the toolbar on narrow screens, reduce padding. */
@media (max-width: 720px) {
  .limits-pageheader-row { flex-direction: column; align-items: stretch; }
  .limits-toolbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .limits-tabs { overflow-x: auto; }
  .limits-search { max-width: none; }
  .limit-card-pn { min-width: 0; }
  .limit-card-title { white-space: normal; }
  .limit-variant { padding: var(--sp-3); }
  .limit-variant-head { gap: var(--sp-2); }
  .limit-variant-fields { grid-template-columns: 1fr 1fr; }
  .add-override-fields { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   Print
   ============================================================ */
@page {
  margin: 0.5in 0.5in 0.6in;
}
@media print {
  /* --- Hide every interactive chrome element. The user printed a
         report; they don't need the app shell or the controls that
         only make sense on screen. --- */
  .appbar, .section-nav, .section-nav-toggle, .subfilter-bar, .ad-toolbar, .chips, .action-menu, .back-link,
  .bulk-toolbar, .add-component, .add-limit,
  .toast-stack, .page-header-actions,
  .search, .filters, .stats, .lock-toggle,
  .form-actions, .form-section .form-section-header > button,
  .history-clear-form, .role-pill-remove, .role-pill-remove-form,
  .member-card-actions, .ad-card-footer,
  .empty-cta, .empty-ctas,
  details.role-add, details.action-menu, details.appbar-menu,
  .servicing-edit, .servicing-actions,
  .req-mark {
    display: none !important;
  }

  /* --- Force reference disclosures open so their contents print.
         Surgical: only the read-only sections, not add-form details. --- */
  details.section-collapse > *:not(summary),
  details.history-section > *:not(summary),
  details.member-perm-detail > *:not(summary) {
    display: block !important;
  }
  details.section-collapse > summary::before,
  details.history-section > summary::before { display: none; }

  /* --- Surface destination URLs after links. Internal links are kept
         short (just the path) so they aren't visual clutter. --- */
  a[href^="http://"]::after,
  a[href^="https://"]::after {
    content: " \2192  " attr(href);
    font-size: 0.82em;
    color: #555;
    word-break: break-all;
  }

  /* --- Form widgets render as plain text values, not boxed inputs.
         Crucial for AD compliance reports and component lists, where
         the data is what matters, not the editable affordance. --- */
  input, select, textarea {
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
  }
  input[type="checkbox"] { width: 12px; height: 12px; }

  /* --- Headings, page-spine, status pills, cards: flatten visuals,
         enforce avoid-breaks, keep ink minimal. --- */
  body { background: #ffffff; color: #000; font-size: 10pt; }
  main, .app-shell > main:has(.section-nav) { padding: 0; max-width: none; }
  h1 { font-size: 18pt; margin: 0 0 8pt; page-break-after: avoid; }
  h2 { font-size: 13pt; margin: 12pt 0 6pt; page-break-after: avoid; }
  h3 { font-size: 11pt; page-break-after: avoid; }

  table { box-shadow: none; border: 1px solid #888; font-size: 9pt; }
  th, td { border-bottom: 1px solid #ccc !important; padding: 4pt 6pt !important; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }

  .ad-card, .servicing-item, .fleet-card, .engine-card,
  .company-card, .member-card, .role-card,
  .form-section, .profile-card, .ad-status-card,
  .header-form, .member-add, .role-new, .overview-hero {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }

  .status, .status-pill, .role-pill, .role-badge, .member-badge {
    border: 1px solid #888 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 1pt 4pt;
  }
  /* Keep the severity stripe as visible left-border ink */
  .row-overdue > td:first-child,
  .ad-card.row-overdue,
  .srv-strip-item.is-bad,
  .servicing-item.is-bad { border-left: 3pt solid #000 !important; }

  /* No hover lifts on paper. */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  h1 { font-size: var(--fs-2xl); }
  .ad-card { grid-template-columns: 1fr; }
  .overview-hero { grid-template-columns: 1fr; }
  .appbar-chrome { padding: 0 var(--sp-4); }
  .appbar-nav { padding: 0 var(--sp-4); }
  .appbar-nav a { padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  .appbar-subnav { padding-left: calc(var(--sp-4) + var(--sp-4)); padding-right: var(--sp-4); }
}
@media (max-width: 720px) {
  .appbar-brand { display: none; }
  .appbar-chrome { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .appbar-nav { padding: 0 var(--sp-2); overflow-x: auto; }
  .appbar-nav a { padding: 0 var(--sp-3); white-space: nowrap; }
  .appbar-subnav { padding-left: calc(var(--sp-2) + var(--sp-4)); padding-right: var(--sp-2); overflow-x: auto; }
  .appbar-subnav a { white-space: nowrap; }
  .appbar-chip-label { max-width: 140px; }
  /* Sub-tabs (aircraft / engine) scroll instead of wrapping at narrow widths */
  .section-nav-item { white-space: nowrap; }
}
@media (max-width: 600px) {
  main { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
  /* Inline-editable inputs grow for finger-friendly tap targets (WCAG 24px+) */
  input.inline { padding: 6px var(--sp-2); }
  /* Fleet/engine card grid tightens on phones so cards aren't oversized */
  .fleet-cards,
  .engine-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
  .dealer-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .dealer-profile { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  .dealer-profile-logo { max-width: 200px; }
  /* Stats bar wraps and stays readable */
  .stats { gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
  /* Hide reference columns in the AD library table on phones (Effective date) */
  .ad-library-table th:nth-child(4),
  .ad-library-table td:nth-child(4) { display: none; }
}

/* ============================================================
   Components table — grouped, dense rows.
   Rows are grouped by `c.system` via a header row (.comp-group).
   Within each row, the Install cell is subdued (reference data
   set once) and the Remaining cell is prominent (the actionable
   numbers users actually scan for).
   ============================================================ */
table.components { width: 100%; }
table.components th,
table.components td {
  vertical-align: top;
  padding: 14px var(--sp-3);
}

/* --- Group header rows, rendered between system groups --- */
tr.comp-group {
  cursor: pointer;
  user-select: none;
}
tr.comp-group > td {
  background: var(--c-brand-soft);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 8px var(--sp-4);
  transition: background .12s ease;
}
tr.comp-group:hover > td,
tr.comp-group:focus > td { background: var(--c-brand-soft); }
tr.comp-group:focus { outline: none; }
tr.comp-group:focus > td {
  box-shadow: inset 0 0 0 2px var(--c-accent);
}
.comp-group-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-brand-text);
}
/* Caret: a small arrow rotated 45° (closed = right ▸, open = down ▾) */
.comp-group-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex-shrink: 0;
  margin-right: 2px;
  margin-bottom: 3px;  /* optical centering — caret sits a hair high */
}
.comp-group-body.is-collapsed .comp-group-caret {
  transform: rotate(-45deg);
  margin-bottom: 0;
  margin-top: 3px;
}
.comp-group-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brand-text);
}
.comp-group-count {
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-size: 11px;
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Hide all rows in a collapsed group body except the header row itself */
.comp-group-body.is-collapsed > tr:not(.comp-group) { display: none; }
.comp-group-body.is-collapsed > tr.comp-group > td {
  border-bottom-color: transparent;
}

/* --- Col 1: select --- */
table.components th.comp-sel,
table.components td.comp-sel {
  width: 36px;
  padding-left: var(--sp-3);
  padding-right: var(--sp-2);
}

/* --- Col 2: Component — name input on top, P/N · S/N below --- */
table.components .comp-name { min-width: 220px; }
table.components .comp-input-name {
  width: 100%;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  padding: 5px var(--sp-2);
}
table.components .comp-ids {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
table.components .comp-input-id {
  flex: 1;
  min-width: 0;
  width: auto;
  font-size: var(--fs-xs);
  padding: 3px var(--sp-2);
  color: var(--c-text-2);
}
table.components .comp-sep {
  color: var(--c-faint);
  font-size: var(--fs-sm);
  user-select: none;
}

/* --- Col 3: Installed — subdued "reference data" card-in-cell --- */
table.components .comp-install { min-width: 220px; }
.comp-install-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding: 6px 8px;
}
.comp-install-card .comp-input-date {
  width: 100%;
  font-size: var(--fs-xs);
  padding: 3px var(--sp-2);
  margin: 0 0 5px;
  background: var(--c-surface);
}
.comp-install-grid {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
}
.comp-install-grid .comp-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  text-transform: uppercase;
  line-height: 1.2;
}
.comp-install-grid .comp-input-num {
  width: 100%;
  font-size: var(--fs-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 2px var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-text);
  border-radius: var(--r-sm);
}
.comp-install-grid .comp-input-num:hover {
  background: var(--c-surface);
  border-color: var(--c-border-2);
}
.comp-install-grid .comp-input-num:focus {
  background: var(--c-surface);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

/* --- Col 4: CTT — single derived number, display only --- */
table.components .comp-ctt {
  min-width: 76px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  line-height: 1.4;
  color: var(--c-text-2);
}

/* --- Col 5: Remaining — prominent actionable grid --- */
table.components .comp-remaining { min-width: 150px; }
.comp-remaining-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  row-gap: 6px;
  align-items: baseline;
}
.comp-rem-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.comp-rem-value {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  text-align: right;
  line-height: 1.1;
}
.comp-rem-value.empty { color: var(--c-faint); font-weight: 400; }
.comp-rem-value.overdue { color: var(--c-bad); }
.comp-rem-value.due-soon { color: var(--c-warn); }

/* --- Cols 6 + 7: status pill, source badges --- */
table.components .comp-status { white-space: nowrap; }
table.components .comp-source {
  font-size: var(--fs-xs);
  line-height: 1.5;
  min-width: 130px;
  color: var(--c-text-2);
}

/* ============================================================
   Wide-table horizontal scroll wrapper
   Apply .table-scroll around any table that may exceed phone width.
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--sp-4);
}
.table-scroll > table { margin-bottom: 0; }

/* ============================================================
   General Servicing — user-defined recurring servicing items
   (oil changes, phase inspections, etc.) on the aircraft profile.
   ============================================================ */
.servicing-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.servicing-item {
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}
.servicing-item.is-bad   { border-left-color: var(--c-bad); }
.servicing-item.is-warn  { border-left-color: var(--c-warn); }
.servicing-item.is-ok    { border-left-color: var(--c-ok); }
.servicing-item.is-na    { border-left-color: var(--c-na-border); }

.servicing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.servicing-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.servicing-title h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
}
.servicing-meta {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.servicing-meta strong { color: var(--c-text); }

.status-pill {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-na-bg);
  color: var(--c-text-2);
}
.status-pill.is-bad  { background: var(--c-bad-bg);  color: var(--c-bad);  border-color: var(--c-bad-border); }
.status-pill.is-warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.status-pill.is-ok   { background: var(--c-ok-bg);   color: var(--c-ok);   border-color: var(--c-ok-border); }

.servicing-bar {
  position: relative;
  height: 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.servicing-bar-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--c-ok);
  transition: width .2s ease;
}
.servicing-bar-fill.is-warn { background: var(--c-warn); }
.servicing-bar-fill.is-bad  { background: var(--c-bad); }
.servicing-bar-fill.is-na   { background: var(--c-faint); }

.servicing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.servicing-stats > div { display: flex; flex-direction: column; gap: 2px; }
.servicing-stats dt {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.servicing-stats dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.servicing-stats dd.is-bad-text { color: var(--c-bad); font-weight: 600; }

.servicing-notes {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
}

.servicing-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.servicing-actions form { margin: 0; }

.servicing-edit > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 500;
  padding: 6px var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  list-style: none;
  user-select: none;
}
.servicing-edit > summary::-webkit-details-marker { display: none; }
.servicing-edit > summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.servicing-edit[open] > summary {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
  border-color: var(--c-brand-soft);
  align-self: flex-start;
  margin-bottom: var(--sp-3);
}
/* When opened, break out of the flex actions row onto a full-width line so the
   form-grid inside can lay out in multiple columns. */
.servicing-edit[open] {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.servicing-edit-form {
  padding: var(--sp-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-3);
}
.servicing-edit-form .form-actions { margin: var(--sp-3) 0 0; }
/* Bottom-align inputs across each grid row so labels of differing heights
   (Name = 1 line, "Interval / hrs" = 2 lines) all line their inputs up. */
.servicing-form .form-grid > label {
  justify-content: flex-end;
}
.servicing-form .form-grid > label > input,
.servicing-form .form-grid > label > select {
  margin-top: auto;
}
.servicing-edit > form:not(.servicing-edit-form) { margin: 0; }

/* Overview-tab compact servicing strip — one slim row per item. */
.srv-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}
.srv-strip-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-left: var(--sp-2);
}
.srv-strip-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-3);
  font-size: var(--fs-xs);
}
.srv-strip-item.is-bad  { border-left-color: var(--c-bad); }
.srv-strip-item.is-warn { border-left-color: var(--c-warn); }
.srv-strip-item.is-ok   { border-left-color: var(--c-ok); }
.srv-strip-item.is-na   { border-left-color: var(--c-na-border); }
/* Two-row item: name on its own line, then status + remaining, then bar */
.srv-strip-name {
  font-weight: 600;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.25;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}
.srv-strip-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.srv-strip-rem {
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.srv-strip-bar {
  height: 4px;
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.srv-strip-bar-fill {
  height: 100%;
  background: var(--c-ok);
  transition: width .2s ease;
}
.srv-strip-bar-fill.is-warn { background: var(--c-warn); }
.srv-strip-bar-fill.is-bad  { background: var(--c-bad); }
.srv-strip-bar-fill.is-na   { background: var(--c-faint); }

/* Hint that content extends right on touch viewports */
@media (max-width: 720px) {
  .table-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .table-scroll::-webkit-scrollbar { height: 6px; }
  .table-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--r-pill);
  }
}

/* ============================================================
   Accessibility, feedback & mobile polish (additive layer)
   ------------------------------------------------------------
   Layered at the end so every rule cascades over the matching
   component above without rewriting it. Touches four areas:
     1. Keyboard focus ring (WCAG 2.4.7)
     2. Reduced-motion honouring (WCAG 2.3.3)
     3. htmx in-flight + just-saved visual feedback
     4. Mobile chrome (nav overflow, touch targets, toast)
   ============================================================ */

/* 1) Visible focus ring — applies to every keyboard-focusable
      element and only on keyboard focus (mouse clicks stay quiet). */
*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
/* For elements sitting inside overflow:hidden parents (cards, sections)
   the outline would clip — draw it inset instead. */
.fleet-card-link:focus-visible,
.engine-card-link:focus-visible,
.company-card:focus-visible,
.fleet-card:focus-visible,
.appbar-menu-panel a:focus-visible,
.appbar-menu-panel button:focus-visible,
details.section-collapse > summary:focus-visible,
details.history-section > summary:focus-visible {
  outline-offset: -2px;
}
/* Inline inputs in tables: existing :focus already paints a halo; the
   focus-visible ring would double up. Reuse the halo instead. */
input.inline:focus-visible { outline: none; }

/* 2) Honour user motion preference. Functional motion (scroll, layout)
      is preserved; decorative transitions and animations collapse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fleet-card:hover,
  .company-card:hover,
  .status-stat:hover { transform: none; }
}

/* 3a) htmx in-flight feedback on the element issuing the request.
       Inline inputs reuse the search-bar shimmer pattern so the user
       always sees that "yes, it's saving". */
input.htmx-request,
input.inline.htmx-request,
select.htmx-request,
textarea.htmx-request {
  background-image: linear-gradient(90deg,
    rgba(37, 99, 235, 0.04) 0%,
    rgba(37, 99, 235, 0.18) 50%,
    rgba(37, 99, 235, 0.04) 100%) !important;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: app-input-saving 1.1s linear infinite;
  border-color: var(--c-accent);
}
@keyframes app-input-saving {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Button spinner — works on any <button>/.btn issuing an htmx request
   or a regular form submit. Disable click while in flight. */
button.htmx-request,
.btn.htmx-request,
button.is-submitting,
.btn.is-submitting {
  cursor: progress;
  pointer-events: none;
}
button.htmx-request::after,
.btn.htmx-request::after,
button.is-submitting::after,
.btn.is-submitting::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: var(--sp-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-spin .7s linear infinite;
  vertical-align: -1px;
  opacity: 0.85;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* 3b) "Just saved" pulse — JS adds .just-saved to the swapped row for
       ~1.3s after a successful htmx swap. CSS animation does the rest. */
@keyframes app-row-saved {
  0%   { background-color: rgba(30, 122, 58, 0.18); }
  100% { background-color: transparent; }
}
.just-saved {
  animation: app-row-saved 1.3s ease-out;
}
tr.just-saved > td { animation: app-row-saved 1.3s ease-out; }

/* 3c) Toast container — lives at the bottom-right of the viewport.
       layout.ejs ships toasts into .toast-stack; CSS handles look. */
.toast-stack {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(420px, calc(100vw - var(--sp-6)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-text-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: toast-in .18s ease-out;
}
.toast.is-ok   { border-left-color: var(--c-ok); }
.toast.is-warn { border-left-color: var(--c-warn); }
.toast.is-bad  { border-left-color: var(--c-bad); }
.toast-body    { flex: 1; min-width: 0; }
.toast-title   { font-weight: 600; color: var(--c-text); }
.toast-detail  { color: var(--c-text-2); margin-top: 2px; font-size: var(--fs-xs); }
.toast-close {
  background: none;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  font: 700 var(--fs-md)/1 var(--font-sans);
  padding: 0 4px;
  border-radius: var(--r-sm);
}
.toast-close:hover { color: var(--c-text); background: var(--c-surface-2); }
.toast.is-leaving { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* 4) Mobile chrome — primary nav scrolls horizontally instead of
      wrapping into multiple rows that push content down. */
@media (max-width: 720px) {
  .appbar-nav {
    padding: 0 var(--sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .appbar-nav::-webkit-scrollbar { display: none; }
  .appbar-nav a {
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .appbar-subnav {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .appbar-subnav::-webkit-scrollbar { display: none; }
  .appbar-subnav::before { display: none; }
  .appbar-subnav a { flex-shrink: 0; white-space: nowrap; }

  .appbar-chrome { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .appbar-chip-label { max-width: 140px; }

  main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }

  /* Touch-target floor — 40px high for tap-only affordances */
  .action-menu > summary { width: 40px; height: 40px; }
  .lock-toggle { padding: 8px var(--sp-3); }
  .filters a { padding: 6px var(--sp-3); }
  .back-link { padding: 8px var(--sp-3); }

  /* Toast fills width on tight viewports */
  .toast-stack {
    right: var(--sp-3);
    left: var(--sp-3);
    bottom: var(--sp-3);
    max-width: none;
  }
}

/* 5) Required-field marker — injected by layout.ejs as the first
      child of any label containing a [required] input. Inline so it
      sits before the label text on the same baseline; tabular-nums
      keeps form-grid columns from shifting. */
.req-mark {
  display: inline-block;
  color: var(--c-bad);
  font-weight: 700;
  margin-right: 4px;
  font-size: 1em;
  line-height: 1;
}
/* These labels are column flexboxes, so the injected first-child marker
   would take its own flex row above the text — making only the required
   field taller and knocking it out of line with its neighbours. Float is
   ignored on flex items, so pull the marker out of flow entirely and pin
   it to the label's top-right corner; the field keeps the same height as
   non-required fields and the grid columns stay aligned. */
.form-grid > label,
.grid > label,
.comp-form-grid > label {
  position: relative;
}
.form-grid > label > .req-mark,
.grid > label > .req-mark,
.comp-form-grid > label > .req-mark {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

/* 6) Empty-state CTA promotion — when an .empty paragraph contains
      an .empty-cta link, give it button styling so the action reads
      as the obvious next step instead of being lost in the prose. */
.empty .empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  background: var(--c-brand);
  color: var(--c-on-brand);
  padding: 8px var(--sp-4);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  font-style: normal;
}
.empty .empty-cta:hover {
  background: var(--c-brand-hover);
  color: var(--c-on-brand);
  text-decoration: none;
}
.empty .empty-cta.secondary {
  background: var(--c-surface);
  color: var(--c-brand-text);
  border: 1px solid var(--c-border);
}
.empty .empty-cta.secondary:hover {
  background: var(--c-brand-soft);
  color: var(--c-brand-text);
}
.empty .empty-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.empty .empty-ctas .empty-cta { margin-top: 0; }

/* 7) Disabled-input visibility fix for AD cards.
      .ad-card-col .field-value input/textarea unconditionally paints
      background:#fff above, which masks the global disabled state.
      Re-assert disabled visuals here so users can tell at a glance
      that "Recurring Notes" / signoff name / cert # are inactive
      until the relevant checkbox flips them on. */
.ad-card-col .field-value input[disabled],
.ad-card-col .field-value textarea[disabled],
.ad-card-col .field-value select[disabled],
.signoff-block input[disabled],
.signoff-block select[disabled] {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  cursor: not-allowed;
  opacity: 0.7;
  border-style: dashed;
}
/* Make the "Recurring" / "Manually enter" parent checkbox labels visually
   tied to the fields they unlock: when the section is disabled, soften the
   companion label. Driven by :has() so it's drift-free. */
.ad-card-col:has(input[name="recurring_notes"][disabled]) .cb-label:first-child {
  /* keep checkboxes themselves readable; this is just a hint */
  color: var(--c-text-2);
}

/* 9) Skip-to-main-content link — visually hidden until focused with
      the keyboard, then slides into view as a prominent CTA. Lets
      keyboard users jump past the app shell straight to page content
      without tabbing through every nav item. */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 300;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: var(--r-md);
  font: 600 var(--fs-sm) var(--font-sans);
  text-decoration: none;
  box-shadow: var(--sh-md);
  /* Off-screen by default — clip-path keeps it accessible to AT */
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--c-on-brand);
  text-decoration: none;
  outline: 2px solid var(--c-on-brand);
  outline-offset: -4px;
}

/* Main landmark is focusable so the skip link can transfer focus
   into it; suppress the outline so it doesn't paint a ring around
   the entire page content. */
main:focus { outline: none; }

/* ============================================================
   Components dashboard — redesigned tab.
   Two sections (Life Limited / Non-Life Limited), read-only rows
   with per-row Edit / Remove, and a shared Add/Edit <dialog>.
   Builds on the existing table.components rules above.
   ============================================================ */

/* Header row: parent-TT line on the left, Add button on the right */
.comp-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-2);
}
.comp-toolbar-row .comp-tt-line { margin: 0; }
.comp-add-open { white-space: nowrap; }

/* --- Sections ------------------------------------------------ */
.comp-section {
  margin: var(--sp-5) 0;
}
.comp-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 2px;
}
.comp-section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-brand-text);
  margin: 0;
}
.comp-section-count {
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-size: 12px;
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}
.comp-empty {
  padding: var(--sp-4);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  margin: 0;
}

/* --- Read-only row pieces (replace the old inline inputs) ----- */
.comp-name-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  display: block;
}
table.components .comp-id-chip {
  display: inline-block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  margin-right: 4px;
}
.comp-install-ro .comp-install-date {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-bottom: 5px;
}
.comp-install-grid .comp-install-val {
  font-size: var(--fs-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

/* --- Actions column ------------------------------------------ */
table.components th:last-child,
table.components .comp-actions { min-width: 92px; white-space: nowrap; }
.comp-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: stretch;
}
.comp-actions .comp-remove-form { margin: 0; }
.comp-actions .btn { width: 100%; }
.comp-actions .comp-remove-btn { color: var(--c-bad); }
.comp-actions .comp-remove-btn:hover {
  background: var(--c-bad-bg);
  border-color: var(--c-bad-border);
  color: var(--c-bad);
}

/* --- Add / Edit slideout drawer ----------------------------- */
/* Docks to the right edge of the sidebar and slides in from the left, so it
   reads as a panel pulled out of the sidebar. Stays a native <dialog>, so the
   focus trap, Escape-to-close and backdrop all come for free. */
dialog.comp-modal {
  width: min(760px, calc(100vw - var(--sidebar-w)));
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  inset: 0 auto 0 var(--sidebar-w);
  padding: 0;
  border: none;
  border-right: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: var(--sh-lg);
  color: var(--c-text);
  background: var(--c-surface);
  overflow: hidden;
}
dialog.comp-modal[open] {
  animation: comp-drawer-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes comp-drawer-in {
  from { transform: translateX(-100%); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}
dialog.comp-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.comp-modal-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  margin: 0;
}
.comp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border-2);
}
.comp-modal-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.comp-modal-x {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--c-muted);
  cursor: pointer;
  padding: 0 var(--sp-1);
  box-shadow: none;
}
.comp-modal-x:hover { color: var(--c-text); background: none; }
.comp-modal-body {
  flex: 1 1 auto;
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  overflow-x: hidden;
}
.comp-form-grid {
  display: grid;
  /* minmax(0, 1fr) lets columns shrink below their content's intrinsic width
     so inline number+checkbox fields never force a horizontal scrollbar. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
}
.comp-form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-2);
}
.comp-form-grid > label.span-2 { grid-column: 1 / -1; }
.comp-form-grid input[type="text"],
.comp-form-grid input[type="number"],
.comp-form-grid input[type="date"],
.comp-form-grid input:not([type]) {
  font-weight: 400;
  color: var(--c-text);
}
/* Input + its Unknown/New/On-condition checkbox. Stack the checkbox beneath the
   input so every input box fills its grid cell to the same right edge as the
   plain fields — keeps the two columns cleanly aligned. */
.comp-field-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.comp-field-inline input[type="number"] { width: 100%; min-width: 0; }
.comp-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-text-2);
  white-space: nowrap;
}
.comp-check input { margin: 0; }
.comp-modal-hint { margin: var(--sp-3) 0 0; }
.comp-limit-fields {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-2, 6px);
  background: var(--c-surface-2);
}
.comp-limit-fields > legend {
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-2);
}
.comp-master-check { margin-top: var(--sp-3); }
.comp-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-border-2);
  background: var(--c-surface-2);
}

/* Below the sidebar breakpoint the rail goes off-canvas, so the drawer takes
   the full width from the left edge. */
@media (max-width: 900px) {
  dialog.comp-modal {
    width: min(760px, 100vw);
    inset: 0 auto 0 0;
  }
}

/* --- Global confirmation bar -------------------------------------------------
   Destructive confirmations (delete, unlink, etc.) slide up from the bottom of
   the viewport as an action bar — the same affordance as the unsaved-changes
   bar — instead of a modal dialog. Triggered by any [data-confirm] button; see
   partials/confirm-modal.ejs. */
.confirm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.16);
  transform: translateY(110%);
  transition: transform 180ms ease, visibility 180ms;
  visibility: hidden;
}
.confirm-bar.is-open { transform: translateY(0); visibility: visible; }
.confirm-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
}
.confirm-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.confirm-bar-text strong { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); }
.confirm-bar-text span { font-size: var(--fs-sm); color: var(--c-text-2); }
.confirm-bar-actions { display: flex; gap: var(--sp-3); margin: 0; flex: 0 0 auto; }
.confirm-bar-actions .btn,
.confirm-bar-actions .btn-cancel {
  min-height: 44px;
  padding: 11px var(--sp-5);
  border-radius: var(--radius-2, 8px);
  font-weight: 600;
  font-size: var(--fs-md);
}
.confirm-bar .btn-cancel {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
}
.confirm-bar .btn-cancel:hover { color: var(--c-text); border-color: var(--c-border-2, var(--c-border)); }
/* Align with the main content area, clearing the persistent sidebar on desktop;
   full-width once the sidebar goes off-canvas. */
.app-shell .confirm-bar { left: var(--sidebar-w); }
@media (max-width: 900px) { .app-shell .confirm-bar { left: 0; } }
/* Reserve space so the fixed bar never covers the last row while open. */
body.confirm-bar-open #main { padding-bottom: 96px; }

@media (max-width: 560px) {
  .comp-form-grid { grid-template-columns: 1fr; }
  .comp-form-grid > label.span-2 { grid-column: auto; }
}

/* Repeatable single-input field groups (e.g. dealer phones / emails).
   Presents like a labelled field but each value sits on its own row with a
   remove button, and an "+ Add" link below adds another. */
.multi-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-2);
}
.multi-field-label { font-weight: 600; }
.multi-field-rows { display: flex; flex-direction: column; gap: 6px; }
.multi-row { display: flex; align-items: center; gap: 6px; }
.multi-row input { flex: 1; min-width: 0; font-weight: 400; color: var(--c-text); }
.multi-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: var(--fs-lg);
  color: var(--c-text-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.multi-remove:hover { color: var(--c-on-brand); background: var(--c-danger-fill); border-color: var(--c-danger-fill); }
.multi-add {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.multi-add:hover { color: var(--c-accent-hover); text-decoration: underline; }

/* ============================================================
   Component Limits — read-only variant/override rows after the
   modal redesign. The inline-edit inputs are gone; values now
   render as plain text and editing happens in #limit-modal /
   #override-modal.
   ============================================================ */
.limit-variant-pn {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.limit-variant-cn { color: var(--c-text-2); font-size: var(--fs-sm); }
.limit-variant-fields dd { font-size: var(--fs-sm); color: var(--c-text); }
.limit-variant-fields dd.is-oncond,
.limit-overrides-table td.is-oncond {
  color: var(--c-warn);
  font-weight: 600;
  font-size: var(--fs-xs);
}
.limit-overrides-table td { font-size: var(--fs-xs); color: var(--c-text); padding: 6px 8px; }
.limit-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.limit-row-actions form { margin: 0; }
.override-add-btn { margin-top: var(--sp-2); }
.limit-edit-btn { color: var(--c-accent); }

/* ============================================================
   Parts inventory — list toolbar, summary cards, badges.
   Built on the shared tokens so it matches the rest of the app.
   ============================================================ */
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4);
  /* Pin the search/filter bar so it stays reachable while the list scrolls.
     No top bar on desktop (sidebar nav) so the offset is 0; below 900px the
     app sets --app-header-h on .app-shell for the sticky mobile bar (52px),
     which this inherits and parks under. */
  position: sticky;
  top: var(--app-header-h, 0px);
  z-index: 5;
  background: var(--c-bg);
  padding: var(--sp-2) 0;
}
.inv-toolbar input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 7px var(--sp-3);
}
.inv-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}
.inv-check input { margin: 0; }

/* Surface cards used on the detail pages */
.inv-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.inv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.inv-card-head h2 { margin: 0; font-size: var(--fs-lg); }
.inv-card .table-scroll { margin: 0; }

/* Read-only key/value summary */
.inv-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
  margin: 0;
}
.inv-summary > div { display: flex; flex-direction: column; gap: 2px; }
.inv-summary dt {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-summary dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text);
}
.inv-summary dd.is-warn { color: var(--c-warn); font-weight: 700; }

.inv-notes {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-2);
}
.inv-notes-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.inv-notes p { margin: 0; color: var(--c-text); white-space: pre-wrap; }

/* Small status pill */
.inv-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.inv-badge-warn {
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
  color: var(--c-warn);
}
.inv-row-warn td { background: var(--c-warn-bg); }
.inv-row-warn:hover td { background: var(--c-warn-bg); }

/* Stock status badge — its own column, so it stands alone (no left margin). */
.inv-status-cell { white-space: nowrap; }
.inv-badge.inv-status { margin-left: 0; }
.inv-status-in  { background: var(--c-ok-bg);   border: 1px solid var(--c-ok-border);   color: var(--c-ok); }
.inv-status-low { background: var(--c-warn-bg);  border: 1px solid var(--c-warn-border); color: var(--c-warn); }
.inv-status-out { background: var(--c-bad-bg);   border: 1px solid var(--c-bad-border);  color: var(--c-bad); }

/* Out-of-stock row — red left stripe + tint, mirroring the low-stock warn row. */
.inv-row-out > td:first-child { box-shadow: inset 3px 0 0 var(--c-bad); }
.inv-row-out td { background: var(--c-bad-bg); }
.inv-row-out:hover td { background: var(--c-bad-bg); }

/* Delete action sits apart from the content */
.inv-danger {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-2);
}

/* Quick stock-adjust control on the part page */
.inv-adjust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border-2);
  flex-wrap: wrap;
}
.inv-adjust-label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }

/* Inline +/- buttons on each parts-list row */
.inv-row-adjust { display: inline-flex; gap: var(--sp-1); justify-content: flex-end; }
.inv-row-adjust .btn {
  min-width: 30px;
  padding: 2px 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* ---- Parts list interactive table ---------------------------------------
   Sortable headers, prominent quantity steppers, and the category filter that
   make the inventory list a quick-edit data table. */

/* Sortable column headers — the whole header is a click target. */
.inv-table th { white-space: nowrap; }
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.th-sort:hover { color: var(--c-accent); }
.th-sort:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.sort-arrow {
  font-size: 0.7em;
  line-height: 1;
  color: var(--c-faint);
  transition: color 0.12s ease;
}
.sort-arrow.is-active { color: var(--c-accent); }
.th-sort:hover .sort-arrow { color: var(--c-accent); }

/* Name cell: inline input flush-left, "open part" link tucked to the right. */
.inv-cell-name { min-width: 180px; }
.inv-name-edit { display: flex; align-items: center; gap: var(--sp-1); }
.inv-name-edit input.inline { flex: 1; min-width: 0; }
.inv-open-link {
  flex: 0 0 auto;
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.inv-cell-name:hover .inv-open-link,
.inv-open-link:focus-visible { opacity: 1; }
.inv-open-link:hover { color: var(--c-accent); background: var(--c-surface-2); }

/* Big, prominent quantity stepper sitting next to the number. */
.inv-qty-cell { white-space: nowrap; }
.inv-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.inv-qty-num {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-md);
}
/* Type an absolute quantity inline (Enter commits, Esc reverts — global UX).
   Sits between the +/- steppers; keeps the bold tabular look of inv-qty-num. */
.inv-qty-set.inline {
  width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-md);
}

/* Inline quick-add row: compact labelled number fields + tidy action cell. */
.inv-add-row input.inline { width: 100%; }
.inv-add-row .inv-qty-set.inline { width: 64px; }
.inv-add-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
}
.inv-add-num + .inv-add-num { margin-left: var(--sp-2); }
.inv-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md, 8px);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.inv-qty-btn:hover:not([disabled]) {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.inv-qty-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.inv-qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* "Type an amount to add" box — looks like a real (small) input even at rest,
   unlike the transparent .inline cells, so it reads as a fillable field. Type a
   number and press Enter to add it to stock (negative subtracts). */
.inv-qty-add.inline {
  width: 64px;
  flex: 0 0 auto;
  margin-left: var(--sp-1);
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px dashed var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-sm);
}
.inv-qty-add.inline::placeholder { color: var(--c-faint); font-style: italic; }
.inv-qty-add.inline:hover { border-style: solid; border-color: var(--c-border); }
.inv-qty-add.inline:focus {
  border-style: solid;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(79, 179, 168, 0.18);
}

/* Category filter in the toolbar. */
.inv-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}
.inv-filter-label { font-weight: 600; }
.inv-filter select { padding: 6px var(--sp-2); }

/* Per-row actions (Edit / Open) on the parts list. */
.inv-row-actions { white-space: nowrap; }
.inv-row-actions .btn { margin-left: var(--sp-1); }
/* Small how-to hint above the parts table. */
.inv-edit-hint { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); }

/* ---- Serialized units + certification documents -------------------------- */

/* Extra badge variants: amber "expiring", red "expired", neutral "serialized". */
.inv-badge-soon {
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
  color: var(--c-warn);
}
.inv-badge-bad {
  background: var(--c-bad-bg);
  border: 1px solid var(--c-bad-border);
  color: var(--c-bad);
}
.inv-badge-info {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
}

/* Derived unit count shown in a serialized part's list row. */
.inv-qty-units {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
}
.inv-qty-units:hover { color: var(--c-accent); }

/* Small grey hint line inside modal forms. */
.comp-form-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Units rendered as a responsive grid of cards. */
.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.unit-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.unit-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.unit-card-serial {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}
.unit-card-serial input.inline { font-weight: 700; }
.unit-card-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.unit-status { max-width: 130px; }
.unit-status-badge {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.unit-del { margin-left: auto; }
.unit-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.unit-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
}
.unit-card-docs {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-2);
}
.unit-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
/* Faint, non-blocking "no certs" hint (certs are optional). */
.unit-docs-empty {
  margin: 0;
  font-size: var(--fs-xs);
  font-style: italic;
}
.unit-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.unit-docs-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.unit-docs-list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Small "×" delete affordance on a document line. */
.doc-del {
  border: none;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0 4px;
  border-radius: var(--r-sm);
}
.doc-del:hover { color: var(--c-bad); background: var(--c-surface); }

/* ============================================================
   Mobile responsiveness pass
   Targeted phone-width fixes. Every rule below is scoped to a mobile
   media query (or is purely additive on touch widths), so desktop
   layout, spacing, and density are intentionally left unchanged.
   ============================================================ */
@media (max-width: 600px) {
  /* Toolbar search inputs: their hard min-width (220–240px) forces the
     whole page to scroll sideways on a phone. Let them go full-width. */
  .ad-toolbar .toolbar-search,
  .inv-toolbar input[type="search"] {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }

  /* Inventory summary cards: relax the 150px column floor so cards don't
     get clipped at ~360px. */
  .inv-summary {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-3);
  }

  /* Modal footers and form-action rows keep their buttons in a single
     non-wrapping row that squashes on narrow screens. Stack them
     full-width instead. column-reverse keeps the primary action (last
     in source order) on top, nearest the thumb. */
  .comp-modal-foot,
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .comp-modal-foot { padding: var(--sp-3); }
  .comp-modal-foot > button,
  .comp-modal-foot > .btn,
  .form-actions > button,
  .form-actions > .btn,
  .form-actions > a.btn {
    width: 100%;
  }

  }

/* Tap targets — enlarge the controls the audit flagged as too small for
   touch (~22–28px). Applied at touch widths only; desktop pointer
   density is untouched. */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 40px; padding: 6px var(--sp-3); }
  .comp-modal-x {
    padding: var(--sp-1) var(--sp-2);
    min-width: 40px;
    min-height: 40px;
  }
  .limit-overrides-table .icon-button { width: 36px; height: 36px; }
}

/* ============================================================
   PARTS GRID — light-themed, dense, inline-editable data grid
   (the Parts inventory list page). Scoped under .parts-page,
   which redefines the colour tokens to a light palette so the
   shared components inside it (inputs, badges) flip to light
   without touching the rest of the dark app shell.
   ============================================================ */
.parts-page {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f3f5f7;
  --c-border: #d7dce1;
  --c-border-2: #e8ebee;
  --c-text: #1f2733;
  --c-text-2: #4a5560;
  --c-muted: #8a949e;
  --c-accent: #2f6feb;
  --c-ok: #1c7c3f;   --c-ok-bg: #e9f7ee;   --c-ok-border: #b7e2c4;
  --c-warn: #9a6a00; --c-warn-bg: #fdf3df; --c-warn-border: #f0dcaa;
  --c-bad: #b42330;  --c-bad-bg: #fdecec;  --c-bad-border: #f3c5c5;

  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
}
.parts-page .page-header h1 { color: var(--c-text); }
.parts-page .muted-thin { color: var(--c-muted); }

/* --- toolbar: search + filters on the left, bulk bar on the right --- */
.pg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.pg-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 420px;
  position: relative;
}
.pg-search-icon { color: var(--c-muted); font-size: var(--fs-sm); }
.pg-search input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: 7px var(--sp-3);
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.pg-search select {
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 6px var(--sp-2);
}
.pg-search-clear {
  text-decoration: none;
  color: var(--c-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 0 4px;
}
.pg-search-clear:hover { color: var(--c-bad); }
.pg-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}
.pg-bulkbar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  padding: 4px var(--sp-3);
  background: var(--c-bad-bg);
  border: 1px solid var(--c-bad-border);
  border-radius: var(--r-md);
}
.pg-bulk-count { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }

/* --- add-a-part panel (above the grid) --- */
.part-add-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.part-add-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.part-add-head h2 { margin: 0; font-size: var(--fs-lg); color: var(--c-text); }
.part-add-head .muted { font-size: var(--fs-sm); }
.part-add-actions { margin-top: var(--sp-3); }

/* --- grid + panel layout --- */
.pg-wrap { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pg-main { flex: 1 1 auto; min-width: 0; }
.pg-grid-scroll { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); }

.pg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-bg);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.pg-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-surface-2);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.pg-table th.num, .pg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table tbody td {
  padding: 2px var(--sp-2);
  border-bottom: 1px solid var(--c-border-2);
  vertical-align: middle;
}
.pg-table tbody tr:hover td { background: #eef4fe; }
.pg-sort { color: var(--c-text-2); text-decoration: none; }
.pg-sort:hover { color: var(--c-accent); }

/* selection / status row colours (mirrors the screenshot) */
.pg-row.is-low td  { background: var(--c-warn-bg); }
.pg-row.is-out td  { background: var(--c-bad-bg); }
.pg-row.is-selected td,
.pg-row.is-selected:hover td { background: #d9e7ff; }
.pg-qty.is-flag, td.num.is-flag { color: var(--c-bad); font-weight: 700; }

.pg-check { width: 34px; text-align: center; padding: 0 4px; }
.pg-check input { cursor: pointer; }
.pg-partno { white-space: nowrap; }
.pg-open {
  background: none;
  border: none;
  padding: 3px 2px;
  color: var(--c-accent);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.pg-open:hover { text-decoration: underline; }
.pg-units { color: var(--c-accent); text-decoration: none; }
.pg-units:hover { text-decoration: underline; }

/* inline cell editors: borderless until hover/focus */
.pg-table input.inline {
  width: 100%;
  background: transparent;
  color: var(--c-text);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 4px 6px;
}
.pg-table input.inline:hover { border-color: var(--c-border); background: var(--c-bg); }
.pg-table input.inline:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-bg);
  box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15);
}

/* the always-visible quick-add row */
.pg-add-row td { background: #f0f6ff; border-bottom: 2px solid var(--c-border); }
.pg-add-row:hover td { background: #f0f6ff; }
.pg-add-btn {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff;
  border: none; border-radius: var(--r-sm);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1; cursor: pointer;
}
.pg-add-btn:hover { filter: brightness(1.05); }

.pg-empty { padding: var(--sp-4); color: var(--c-muted); text-align: center; }

/* --- slide-in detail panel --- */
.pg-panel {
  flex: 0 0 320px;
  align-self: stretch;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  max-height: calc(100vh - 120px);
  position: sticky;
  top: var(--app-header-h, 12px);
  overflow-y: auto;
}
.pg-panel[hidden] { display: none; }
.pg-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border-2);
}
.pg-panel-title h2 { margin: 0; font-size: var(--fs-lg); color: var(--c-text); }
.pg-panel-sub { color: var(--c-text-2); font-size: var(--fs-sm); }
.pg-panel-x {
  background: none; border: none; cursor: pointer;
  color: var(--c-muted); font-size: 22px; line-height: 1; padding: 0 4px;
}
.pg-panel-x:hover { color: var(--c-text); }
.pg-panel-body { padding: var(--sp-3); }
.pg-panel-img {
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.pg-panel-fields {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 4px 8px;
  margin: var(--sp-3) 0;
}
.pg-panel-fields dt { color: var(--c-muted); font-size: var(--fs-xs); font-weight: 600; }
.pg-panel-fields dd { margin: 0; color: var(--c-text); font-size: var(--fs-sm); }
.pg-panel-track {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600;
  margin-bottom: var(--sp-3);
}
.pg-panel-track select {
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 5px var(--sp-2);
}
.pg-panel-units, .pg-panel-vendors { margin-bottom: var(--sp-3); }
.pg-panel-units-head { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--c-text-2); margin-bottom: 4px; }
.pg-panel-units ul, .pg-panel-vendors ul { list-style: none; margin: 0; padding: 0; }
.pg-panel-units li, .pg-panel-vendors li {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: 3px 0; border-bottom: 1px solid var(--c-border-2); font-size: var(--fs-sm);
}
.pg-unit-st { color: var(--c-muted); font-size: var(--fs-xs); }
.pg-count { color: var(--c-muted); font-weight: 600; }
.pg-more, .pg-empty-mini { color: var(--c-muted); font-size: var(--fs-xs); padding-top: 4px; }
.pg-panel-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* whole-row click target */
.pg-clickable { cursor: pointer; }

/* click-to-upload product photo */
.pg-panel-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-img-edit { position: relative; cursor: pointer; overflow: hidden; padding: 0; }
.pg-img-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px; font-size: var(--fs-xs); text-align: center;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  opacity: 0; transition: opacity 0.12s ease;
}
.pg-img-edit:hover { border-color: var(--c-accent); }
.pg-img-edit:hover .pg-img-overlay { opacity: 1; }
.pg-img-remove {
  display: block;
  background: none; border: none; cursor: pointer;
  color: var(--c-bad); font-size: var(--fs-xs);
  padding: 0; margin: -6px 0 var(--sp-3);
}
.pg-img-remove:hover { text-decoration: underline; }

/* editable panel fields */
.pg-pf-list { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-3) 0; }
.pg-pf {
  display: grid; grid-template-columns: 40% 60%; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600;
}
.pg-pf input.inline, .pg-pf select {
  width: 100%; font-weight: 400; color: var(--c-text); font-size: var(--fs-sm);
  border: 1px solid var(--c-border); background: var(--c-bg);
  border-radius: var(--r-sm); padding: 5px 6px;
}
.pg-pf input.inline:focus, .pg-pf select:focus {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.15); outline: none;
}
.pg-pf-static { font-weight: 400; color: var(--c-text); font-size: var(--fs-sm); }

.pg-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: 0 6px 6px 0;
}
.pg-badge-in  { background: var(--c-ok-bg);   border: 1px solid var(--c-ok-border);   color: var(--c-ok); }
.pg-badge-low { background: var(--c-warn-bg);  border: 1px solid var(--c-warn-border); color: var(--c-warn); }
.pg-badge-out { background: var(--c-bad-bg);   border: 1px solid var(--c-bad-border);  color: var(--c-bad); }

/* danger button used by bulk delete + panel delete */
.btn-danger {
  background: var(--c-bad, #b42330);
  border-color: var(--c-bad, #b42330);
  color: #fff;
}
.btn-danger:hover { filter: brightness(1.05); }

@media (max-width: 860px) {
  .pg-wrap { flex-direction: column; }
  .pg-panel { flex-basis: auto; width: 100%; position: static; max-height: none; }
}

/* ============================================================
   Native-app mobile shell  (phones / narrow touch viewports)
   ------------------------------------------------------------
   At <=768px the whole UI behaves like an installed app:
     • a fixed app shell sized to the *dynamic* viewport (100dvh)
       so nothing reflows when the browser address bar collapses;
     • the header (and the class/section strips) stay pinned while
       <main> is the single element that scrolls;
     • no rubber-band / pull-to-refresh bounce, no visible
       scrollbars, content kept clear of notches + home indicator;
     • generous tap targets, tactile :active feedback, and no
       accidental text-selection / long-press callouts on chrome.
   All of this is scoped inside the breakpoint, so the desktop
   pointer experience above 768px is completely untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* --- 1. Viewport & scrolling ------------------------------------ */

  /* Kill the browser's overscroll bounce / pull-to-refresh at the root. */
  html { overscroll-behavior: none; }

  /* The shell fills the dynamic viewport and never scrolls itself —
     100dvh tracks the visible area as the address bar shows/hides, so
     the layout doesn't jump. Overriding the global `min-height:100vh`
     (which would otherwise force the body taller than the screen). */
  body.app-shell,
  body.app-anon {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent; /* inherited by all children */
  }

  /* Fixed chrome: the header bar and any in-flow filter/section strips
     keep their natural height and stay pinned above the scroll area. */
  .app-shell > .mobile-bar,
  .app-anon > .appbar,
  .app-shell > .subnav,
  .app-shell > .section-nav { flex: 0 0 auto; }

  /* <main> is the ONE scroll container. min-height:0 lets this flex
     child shrink below its content height so it can actually scroll;
     overscroll-behavior:contain keeps any bounce inside main instead
     of chaining to the page. */
  .app-shell > main,
  .app-anon > main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
    overscroll-behavior: contain;
  }

  /* Hide scrollbars everywhere for a clean app surface — scrolling still
     works via touch. (Scoped to the breakpoint, so desktop keeps its
     scrollbars.) */
  * { scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* --- 2. Layout & safe areas ------------------------------------ */

  /* Keep header content out from under a notch / status bar and away
     from the rounded corners on landscape. */
  .app-shell > .mobile-bar,
  .app-anon > .appbar-chrome {
    padding-top: env(safe-area-inset-top);
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    height: auto;
    min-height: 52px;
  }

  /* Scrollable content respects the side insets and leaves room past the
     home-indicator bar at the bottom so the last row is never clipped. */
  .app-shell > main,
  .app-anon > main {
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom));
    scroll-padding-bottom: env(safe-area-inset-bottom);
  }

  /* The off-canvas drawer is full-height & fixed — inset its own padding
     so its nav clears the notch, side and home-indicator too. */
  .app-shell > .sidebar {
    padding-top: max(var(--sp-4), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
  }

  /* --- 3. Touch & interaction ------------------------------------ */

  /* Minimum 48x48 tap targets on every control the thumb can hit. */
  .app-shell button, .app-shell .btn, .app-shell .btn-sm,
  .app-anon button, .app-anon .btn,
  .action-link, .back-link, .lock-toggle,
  .appbar-menu > summary,
  .sidebar-nav a, .subnav-item, .subnav-subitem, .section-nav-item,
  .appbar-nav a, .appbar-subnav a, .chip {
    min-height: 48px;
  }
  /* Icon-only square controls get a full 48x48 box. */
  .sidebar-toggle,
  .subnav-collapse, .subnav-reopen, .section-nav-toggle,
  .mobile-warning-close, .toast-close, .comp-modal-x,
  .icon-button {
    min-width: 48px;
    min-height: 48px;
  }

  /* Tactile feedback: controls visibly depress on touch. */
  .app-shell button:active, .app-shell .btn:active,
  .app-anon button:active, .app-anon .btn:active,
  .action-link:active, .back-link:active,
  .sidebar-toggle:active, .lock-toggle:active,
  .chip:active {
    transform: scale(0.96);
  }
  /* Nav/list items flash a soft brand wash instead of scaling. */
  .sidebar-nav a:active, .subnav-item:active, .subnav-subitem:active,
  .section-nav-item:active, .appbar-nav a:active, .appbar-subnav a:active {
    background: var(--c-brand-soft);
  }

  /* Suppress native text selection + long-press callout on UI chrome so a
     stray long-press doesn't pop the magnifier or a copy/define menu. */
  .mobile-bar, .appbar, .appbar-nav, .appbar-subnav,
  .sidebar, .subnav, .section-nav, .page-context,
  button, .btn, .btn-sm, .action-link, .back-link, .chip, .status,
  .sidebar-nav a, .subnav-item, .subnav-subitem, .section-nav-item,
  .appbar-nav a, .appbar-subnav a, .sidebar-toggle, .lock-toggle,
  .appbar-menu > summary, .field-head, .crumb-sep {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* ...but keep selection ON for the things people actually read or copy
     (body text, table data, and every form field). */
  main p, main li, main h1, main h2, main h3,
  main td, main th, main code, main pre, main dd, main dt,
  .toast-detail, .crumb-current,
  input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

/* Respect reduced-motion: drop the tactile scale so it never animates. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .app-shell button:active, .app-shell .btn:active,
  .app-anon button:active, .app-anon .btn:active,
  .action-link:active, .back-link:active,
  .sidebar-toggle:active, .lock-toggle:active,
  .chip:active { transform: none; }
}

/* ============================================================
   Cascade fix — section flyout on narrow screens
   ------------------------------------------------------------
   The `.section-nav` mobile overrides live in the @media(max-width:900px)
   block near the top of the file, but the desktop `.section-nav`
   definitions (position:fixed, vertical list, 234px main gutter) appear
   LATER in the source. With equal specificity the later (desktop) rule
   wins, so on phones the flyout stayed a fixed vertical rail and <main>
   kept its desktop left-gutter — squashing content into a thin column.
   Re-asserting the mobile layout here (after the desktop block) makes it
   win the cascade. Mirrors the intent of the original @900 overrides.
   ============================================================ */
@media (max-width: 900px) {
  /* Flyout drops in-flow above the content as a full-width strip. */
  .section-nav {
    position: static;
    height: auto;
    width: 100%;
    margin-bottom: var(--sp-4);
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    box-shadow: none;
  }
  .section-nav-list { flex-direction: row; flex-wrap: wrap; }
  .section-nav-item { flex: 0 1 auto; }
  .section-nav-group {
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
  }
  .section-nav-danger { margin-top: 0; }
  .section-nav-toggle { display: none !important; }
  .section-nav-collapsed .section-nav { display: flex; }

  /* Content reclaims full width — drop the desktop 234px left gutter and
     give it symmetric, safe-area-aware side padding instead. */
  .app-shell > main:has(.section-nav),
  .section-nav-collapsed.app-shell > main:has(.section-nav) {
    max-width: none;
    margin: 0;
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
  }
}