/* ==========================================================================
   mobile.css: phone and tablet layer (foundation)

   Loaded right after styles.css with
     <link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 1024px)">
   The media attribute on the <link> is the desktop and print guarantee: no
   rule in this file can match above 1024px or on paper, even an unscoped one.
   Area sections (invoices, editor, admin, finance, nelson) follow the
   foundation sections at the end of this file.

   Tiers inside the file (never repeat "screen"; the link already does):
     base            (the file gate, <=1024)  drawer shell, app bar, gutters,
                                              overflow fixes, centred dialogs
     legacy-replace  @media (max-width: 768px)  only to replace legacy 768 rules
     phone           @media (max-width: 640px)  cards, sheets, docks, 1 column
     compact         @media (max-width: 380px)  12px gutters, tighter type
     short           @media (max-height: 500px) landscape phones: 48px bar,
                                              full-height sheets
     touch           @media (hover: none)      no sticky hover lifts, :active

   House rules
   - Overrides restate the legacy selector (same weight, later file wins), so
     grepping a styles.css selector finds its override here.
   - !important only against inline styles or JS-written positions, each one
     tagged "inline: file:line".
   - Banned: @layer, @container, CSS nesting, @media print, min-width queries
     above 1024. Never give an ancestor of a fixed/sticky element a transform,
     filter, contain or overflow:hidden (use overflow:clip).
   - Template hook elements ship with the `hidden` attribute; this layer shows
     them with an explicit display value.
   - CSS-generated copy (keep this list short): 'Project Tracker' (Nelson bar).

   Sections
     0. Tokens
     1. Global safety net
     2. App shell: bar, menu toggle, drawer, content frame, banner, page
        headers, stats strip
     3. Primitives: buttons, forms, segmented tabs, badges, empty states
     4. Feedback layers: toasts, tooltips, date picker
     5. Dialogs: centred cards, phone sheets
     6. Tables: generic card pattern (registry lives in /js/mobile.js)
     7. Grids collapse to one shrinkable column
     8. Login and module chooser
     9. Touch and motion
   ========================================================================== */

/* 0. TOKENS ---------------------------------------------------------------- */
:root {
  --m-gutter: 24px;                 /* 16px at <=640, 12px at <=380 */
  --m-bar-h: 56px;                  /* 48px on short (landscape) screens */
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-r: env(safe-area-inset-right, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px);
  --m-top: calc(var(--m-bar-h) + var(--m-safe-t));
  --m-gutter-l: calc(var(--m-gutter) + var(--m-safe-l));
  --m-gutter-r: calc(var(--m-gutter) + var(--m-safe-r));

  /* touch targets */
  --m-tap: 44px;
  --m-tap-lg: 48px;
  --m-tap-sm: 40px;
  --m-fab-h: 56px;

  /* type: inputs never below 16px (iOS focus zoom) */
  --m-fs-input: 16px;
  --m-fs-title: 1.375rem;           /* page title, 700 */
  --m-fs-section: 1.0625rem;        /* section title, 600 */
  --m-fs-body: 1rem;
  --m-fs-secondary: 0.875rem;
  --m-fs-meta: 0.8125rem;
  --m-fs-micro: 0.6875rem;          /* uppercase, .06em: "ITEM 1", stat labels */
  --m-font-num: 'Inter', var(--font-family);   /* money and counts, with tabular-nums */

  /* shape */
  --m-radius-ctl: 10px;
  --m-radius-card: 14px;
  --m-radius-sheet: 20px;
  --m-radius-pill: 999px;
  --m-card-border: 1px solid rgba(38, 125, 183, 0.12);

  /* elevation, navy-tinted */
  --m-shadow-card: 0 1px 2px rgba(14, 46, 67, 0.05), 0 2px 8px rgba(14, 46, 67, 0.06);
  --m-shadow-raise: 0 -6px 20px rgba(14, 46, 67, 0.12);        /* bottom docks */
  --m-shadow-sheet: 0 -12px 40px rgba(14, 46, 67, 0.28);
  --m-shadow-fab: 0 8px 24px rgba(26, 86, 126, 0.40);
  --m-shadow-bar: 0 2px 12px rgba(14, 46, 67, 0.25);
  --m-scrim: rgba(14, 46, 67, 0.5);
  --m-scrim-picker: rgba(14, 46, 67, 0.45);
  --m-bar-bg: #0E2E43;              /* = --primary-darkest = drawer = theme-color */

  /* motion */
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-dur-sheet: 260ms;

  /* z-index map
     in-card sticky 4-6 | docks 50 | FAB/bulk bar 90 | app bar 98 | bar items 99
     (existing) overlay 101, drawer 102, toggle 103, modal 1000, toast 2000
     tooltip card 3000 | (existing) reconnect banner, date picker 10000 */
  --m-z-sticky: 50;
  --m-z-fab: 90;
  --m-z-bar: 98;
  --m-z-bar-item: 99;
  --m-z-tooltip: 3000;
}
@media (max-width: 640px) { :root { --m-gutter: 16px; } }
@media (max-width: 380px) { :root { --m-gutter: 12px; } }
@media (max-height: 500px) { :root { --m-bar-h: 48px; } }

/* 1. GLOBAL SAFETY NET ------------------------------------------------------ */
html { scroll-padding-top: calc(var(--m-top) + 16px); -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(38, 125, 183, 0.12); }
/* background scroll lock while the drawer or a dialog is open */
body:has(.sidebar.open),
body:has(.modal.active) { overflow: hidden; }
/* net only: the real overflow sources are fixed below and in the area files.
   clip (not hidden) keeps sticky children working. QA runs with it disabled. */
.main-content { overflow-x: clip; min-width: 0; }
/* Nelson main is a flex child with min-width:auto: it grew to the widest table */
#nelson-dashboard-page .nelson-main { min-width: 0; flex: 1 1 0; }
/* hidden tooltip bubbles (min-width:200px) still add scroll width */
.tooltip-trigger::after { display: none; }
/* the global .form-select{min-width:180px} blocks every 2-up layout */
.form-select { min-width: 0; }
/* never shrink checkboxes in wrapping labels */
.checkbox-label input[type="checkbox"] { flex-shrink: 0; }
/* iOS focus-zoom floor: the only controls below 16px (styles.css:4526, 4724, 4747) */
.nelson-status-select,
.nelson-task-filters .form-input,
.nelson-task-filters .form-select,
.nelson-bulk-bar .form-select { font-size: var(--m-fs-input); }

/* 2. APP SHELL -------------------------------------------------------------- */
/* 2a. Top app bar. Every page shell that owns a drawer gets one; inactive
   pages are display:none, so only one bar exists at a time. The title stays
   in the content as a large title. */
.page:has(> .sidebar)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--m-z-bar);
  height: var(--m-top);
  padding-top: var(--m-safe-t);
  box-sizing: border-box;
  background: var(--m-bar-bg) url(/images/gotquestions_logo.svg) center calc(50% + var(--m-safe-t) / 2) / auto 26px no-repeat;
  box-shadow: var(--m-shadow-bar);
}
#nelson-dashboard-page::before {
  content: 'Project Tracker';
  background-image: none;
  color: var(--white);
  font: 600 1.05rem/var(--m-bar-h) var(--font-family);
  letter-spacing: 0.01em;
  text-align: center;
}
/* the editor bar carries Back + Saved instead of the logo (editor.css moves
   .draft-editor-header-top into the bar at the same tier) */
@media (max-width: 768px) {
  #draft-editor-page::before { background-image: none; }
}

/* 2b. Menu toggle: a transparent 44px icon button in the bar. It stays above
   the drawer (z 103), so it doubles as the close button and shows an X. */
.sidebar-toggle,
.nelson-sidebar-toggle {
  top: calc((var(--m-bar-h) - var(--m-tap)) / 2 + var(--m-safe-t));
  left: calc(6px + var(--m-safe-l));
  width: var(--m-tap);
  height: var(--m-tap);
  background: transparent;
  border-color: transparent;
  border-radius: var(--m-radius-ctl);
  box-shadow: none;
  font-size: 1.25rem;
}
.sidebar-toggle:hover,
.nelson-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.sidebar-toggle:focus-visible,
.nelson-sidebar-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
.page:has(.sidebar.open) :is(.sidebar-toggle, .nelson-sidebar-toggle) i::before { content: "\f00d"; }

/* 2c. Drawer */
.sidebar {
  width: min(304px, 86vw);
  padding-left: var(--m-safe-l);
  box-shadow: none;                 /* the closed drawer cast a strip along the left edge */
}
.sidebar.open { box-shadow: 12px 0 40px rgba(14, 46, 67, 0.35); }
.sidebar-overlay { background: var(--m-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sidebar-header {
  display: flex;
  align-items: center;
  height: var(--m-top);
  padding: var(--m-safe-t) 16px 0 64px;
  box-sizing: border-box;
}
.sidebar-header .nav-brand { justify-content: flex-start; min-width: 0; }
.sidebar-header .nav-brand img { height: 26px; }
.sidebar-header .project-tracker-title { font-size: 1.05rem; white-space: nowrap; }
.nav-menu { padding: 8px 10px; gap: 2px; overscroll-behavior: contain; }
.nav-item {
  min-height: var(--m-tap-lg);
  padding: 0 14px;
  gap: 14px;
  font-size: 0.95rem;
  border-radius: var(--m-radius-ctl);
}
.nav-item > i { width: 20px; flex-shrink: 0; text-align: center; }
.nav-item > span:not(.badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .badge { position: static; flex-shrink: 0; margin-left: auto; }
.sidebar-footer { padding: 12px 16px max(16px, var(--m-safe-b)); }
.sidebar-footer .dropdown-toggle { min-width: var(--m-tap); min-height: var(--m-tap); justify-content: center; }
.dropdown-menu button { min-height: var(--m-tap-lg); font-size: 0.95rem; }

/* 2d. Content frame */
.main-content,
.nelson-main {
  padding: calc(var(--m-top) + 16px) var(--m-gutter-r) calc(32px + var(--m-safe-b)) var(--m-gutter-l);
}

/* 2e. Reconnect banner: one line under the bar. Moving a fixed box changes what
   its hide transform hides, so the hidden state translates past the bar too. */
.reconnect-banner {
  top: var(--m-top);
  padding: 8px calc(12px + var(--m-safe-r)) 8px calc(12px + var(--m-safe-l));
  font-size: var(--m-fs-meta);
}
.reconnect-banner:not(.active) { transform: translateY(calc(-100% - var(--m-top))); }
.reconnect-banner-content { min-width: 0; }
.reconnect-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pages without a bar (login, chooser): back to the top edge */
body:has(#login-page.active, #module-chooser-page.active) .reconnect-banner { top: 0; padding-top: calc(8px + var(--m-safe-t)); }
body:has(#login-page.active, #module-chooser-page.active) .reconnect-banner:not(.active) { transform: translateY(-100%); }

/* 2f. Page headers: large title in the content, actions wrap at full width */
.view-header { gap: 12px; margin-bottom: 16px; }
.view-header h2 { font-size: var(--m-fs-title); line-height: 1.25; min-width: 0; }
.view-header h2 i { font-size: 1.15rem; }
.section-header h2 { font-size: var(--m-fs-section); font-weight: 600; }
.view-actions { flex-wrap: wrap; min-width: 0; gap: 8px; }
.view-actions:has(> .filter-group) { width: 100%; }
.filter-group { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 768px) {
  /* legacy 768 rule sets column + flex-start, which let the actions overflow */
  .view-header { align-items: stretch; }
  .view-header > .btn { align-self: stretch; }        /* a lone header button is full width */
  .view-actions { width: 100%; }
  .view-actions > .form-select { flex: 1 1 140px; width: auto; }
  .view-actions > .btn { flex: 1 1 auto; }
}

/* 2g. Admin stats: one compact strip, on the Invoices view only. Hidden cards
   generate no column, so robin's three cards share the row automatically. */
#admin-stats {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
#admin-stats .stat-card { gap: 12px; padding: 12px 14px; border-radius: var(--m-radius-card); min-width: 0; box-shadow: var(--m-shadow-card); }
#admin-stats .stat-icon { width: 36px; height: 36px; flex-shrink: 0; font-size: 1rem; border-radius: var(--m-radius-ctl); }
#admin-stats .stat-info { min-width: 0; }
#admin-stats .stat-value { font: 700 1.25rem/1.15 var(--m-font-num); font-variant-numeric: tabular-nums; }
#admin-stats .stat-label { font-size: var(--m-fs-meta); line-height: 1.25; }
.main-content:has(#invoices-view:not(.active)) > #admin-stats { display: none; }
@media (max-width: 640px) {
  #admin-stats { gap: 6px; margin-bottom: 12px; }
  #admin-stats .stat-card {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    min-height: 64px;
    padding: 9px 10px;
    border-radius: 12px;
    text-align: left;
  }
  #admin-stats .stat-icon { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; font-size: 0.65rem; border-radius: 6px; }
  #admin-stats .stat-info { width: 100%; }
  #admin-stats .stat-value { font-size: 1.2rem; padding-right: 22px; }
  #admin-stats .stat-label {
    font-size: var(--m-fs-micro);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    overflow-wrap: anywhere;
  }
}

/* 3. PRIMITIVES ------------------------------------------------------------- */
/* 3a. Buttons: one height scale. Containers opt in to stretching; there is no
   global flex or min-width rule. .btn-primary.btn-sm fixes the legacy ordering
   bug (styles.css:489 .btn-primary declares its size after .btn-sm). */
.btn { min-height: var(--m-tap); }
.btn-primary { min-height: var(--m-tap-lg); padding: 0.75rem 1.25rem; font-size: 1rem; }
.btn-sm,
.btn-primary.btn-sm { min-height: var(--m-tap-sm); padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.btn-icon { width: var(--m-tap); height: var(--m-tap); }
/* .btn-info ("Return to Robin") is undefined in styles.css; styled here only */
.btn-info { background: var(--info-color); color: var(--white); border: 0; }
.btn-info:hover:not(:disabled) { background: #2563eb; }

/* 3b. Forms */
.form-input,
.form-select,
.form-textarea,
.date-picker-wrapper input[type="text"].date-picker-input {
  font-size: var(--m-fs-input);
  border-radius: var(--m-radius-ctl);
}
.form-input,
.form-select,
.date-picker-wrapper input[type="text"].date-picker-input { min-height: var(--m-tap-lg); padding: 0.75rem 0.875rem; }
.form-textarea { padding: 0.75rem 0.875rem; }
.date-picker-wrapper input[type="text"].date-picker-input { padding-right: 2.5rem; }
.date-picker-icon { right: 0.875rem; }
/* iOS dims disabled fields to unreadable; keep read-only values legible
   (the filter date inputs keep their deliberate inline dimming) */
:is(.form-input, .form-select, .form-textarea):disabled:not(.date-picker-input) {
  opacity: 1;
  color: var(--gray-800);
  -webkit-text-fill-color: var(--gray-800);
}
@media (max-width: 640px) {
  .form-group { gap: 6px; }
  .form-group label { font-size: var(--m-fs-secondary); }
  .form-row,
  .form-section .form-row,
  .invoice-expanded-form .form-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .form-section { padding: 16px; }
  .form-section .form-row { margin-bottom: 16px; }
  .modal-body .alert + .form-group,
  .modal-body .form-row + .form-row { margin-top: 12px; }
  .checkbox-label { min-height: var(--m-tap); }
  .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; }
  .password-generate .btn { flex: 0 0 auto; min-width: 0; padding: 0 14px; }
  .info-message:not(:has(> i)) { display: block; }
}

/* 3c. Status tabs: a segmented control that fills the width, every status
   visible. Five or more visible tabs wrap to rows of three on phones. */
.filter-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  padding: 3px;
  border-radius: var(--m-radius-ctl);
}
.filter-btn {
  min-width: 0;
  min-height: var(--m-tap-sm);
  padding: 0.375rem 0.25rem;
  font-size: var(--m-fs-meta);
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  border-radius: 8px;
}
@media (max-width: 640px) {
  .filter-buttons:has(> .filter-btn:not(.hidden) ~ .filter-btn:not(.hidden) ~ .filter-btn:not(.hidden) ~ .filter-btn:not(.hidden) ~ .filter-btn:not(.hidden)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Budget Reports tabs: the same segmented look, plus the missing active style */
.br-tabs {
  display: grid !important;         /* inline: index.html:558 display:flex */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px !important;              /* inline: index.html:558 gap:8px */
  padding: 3px;
  background: var(--white);
  border-radius: var(--m-radius-ctl);
  box-shadow: 0 2px 8px rgba(14, 46, 67, 0.08);
}
.br-tab-btn {
  min-width: 0;
  min-height: var(--m-tap-sm);
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-600);
  font-size: var(--m-fs-meta);
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  box-shadow: none;
}
.br-tab-btn.active,
.br-tab-btn.active:hover:not(:disabled) {
  background: var(--primary-gradient);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(38, 125, 183, 0.25);
}

/* 3d. Badges and empty states */
@media (max-width: 640px) {
  .status-badge { white-space: nowrap; padding: 3px 9px; font-size: var(--m-fs-micro); letter-spacing: 0.04em; }
  .empty-state { padding: 32px 16px; }
  .empty-state i { font-size: 2.75rem; margin-bottom: 16px; }
  .empty-state h3 { font-size: var(--m-fs-section); }
}

/* 4. FEEDBACK LAYERS -------------------------------------------------------- */
/* 4a. Toasts: drop from under the bar at full width, so they never collide
   with a FAB, a dock or a sheet footer */
@media (max-width: 640px) {
  #toast-container {
    top: calc(var(--m-top) + 8px);
    bottom: auto;
    left: calc(12px + var(--m-safe-l));
    right: calc(12px + var(--m-safe-r));
    gap: 8px;
  }
  .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 12px;
    padding: 10px 6px 10px 14px;
    border-radius: var(--m-radius-card);
    animation: m-toast-in 200ms var(--m-ease);
  }
  .toast-content { min-width: 0; overflow-wrap: anywhere; }
  .toast-icon { flex-shrink: 0; }
  .toast-close { flex-shrink: 0; min-width: var(--m-tap-sm); min-height: var(--m-tap-sm); display: flex; align-items: center; justify-content: center; }
}
@keyframes m-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* 4b. Tooltips: tap (focus, via the tabindex mobile.js adds) or hover shows the
   bubble as a fixed card under the bar. transform:none on the trigger keeps it
   from becoming the card's containing block. */
.tooltip-trigger { cursor: pointer; }
.tooltip-trigger::before { content: ''; position: absolute; inset: -10px; }     /* 32px+ hit area */
.tooltip-trigger:hover,
.tooltip-trigger:focus { transform: none; }
.tooltip-trigger:focus { outline: none; }
.tooltip-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(38, 125, 183, 0.35); }
.tooltip-trigger:is(:hover, :focus)::after {
  display: block;
  position: fixed;
  top: calc(var(--m-top) + 8px);
  right: calc(16px + var(--m-safe-r));
  bottom: auto;
  left: calc(16px + var(--m-safe-l));
  z-index: var(--m-z-tooltip);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: var(--m-fs-secondary);
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: 0 12px 32px rgba(14, 46, 67, 0.3);
}

/* 4c. Date picker. Phones: a bottom sheet with its own scrim (datepicker.js
   writes top/left/bottom inline). Tablets: clamped to the gutter. Relies on
   the init guard in app.js setupSearchFilters (hook H3), otherwise leaked
   instances would stack their scrims. */
@media (max-width: 640px) {
  .date-picker-calendar {
    top: auto !important;           /* inline: datepicker.js:207-211 positionCalendar */
    right: 0 !important;            /* inline: datepicker.js:213 */
    bottom: 0 !important;           /* inline: datepicker.js:208-210 */
    left: 0 !important;             /* inline: datepicker.js:213 */
    min-width: 0;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px - var(--m-safe-t));
    overflow-y: auto;
    padding: 16px calc(16px + var(--m-safe-r)) calc(16px + var(--m-safe-b)) calc(16px + var(--m-safe-l));
    border: 0;
    border-radius: var(--m-radius-sheet) var(--m-radius-sheet) 0 0;
    box-shadow: 0 -8px 30px rgba(14, 46, 67, 0.25), 0 0 0 100vmax var(--m-scrim-picker);
  }
  .date-picker-calendar.active { animation: m-sheet-in var(--m-dur-sheet) var(--m-ease); }
  .date-picker-month-year { font-size: var(--m-fs-section); }
  .date-picker-days { gap: 4px; }
  .date-picker-day { min-height: var(--m-tap); aspect-ratio: auto; font-size: 1rem; }
  .date-picker-nav { gap: 4px; }
  .date-picker-nav-btn { width: var(--m-tap); height: var(--m-tap); font-size: 1rem; }
  .date-picker-footer button { min-width: var(--m-tap); min-height: var(--m-tap); font-size: 0.95rem; }
}
@media (min-width: 641px) {
  .date-picker-calendar { left: 16px !important; max-width: 380px; }   /* inline: datepicker.js:213 */
}

/* 5. DIALOGS ---------------------------------------------------------------- */
/* <=1024: a centred card with dvh height; undoes the legacy 768 radius:0/100vh.
   The blur on .glass-card is dropped: it costs frames on phones and turns the
   dialog into the containing block of the fixed tooltip card. */
.modal-content {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: var(--m-radius-sheet);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--white);
}
.modal-footer { border-radius: 0 0 var(--m-radius-sheet) var(--m-radius-sheet); }
.modal-header { gap: 12px; }
.modal-header h2 { min-width: 0; }
.modal-close { flex-shrink: 0; width: var(--m-tap); height: var(--m-tap); border-radius: var(--m-radius-ctl); }
.modal-body { overscroll-behavior: contain; }

/* Phones and landscape phones: sheets. .small-modal is a bottom sheet sized to
   its content; default and large dialogs go full screen. No grab handle: there
   is no drag-to-dismiss. The content is already a flex column, so the header
   and footer stay put and only the body scrolls. */
@media (max-width: 640px), (max-height: 500px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-overlay { background: var(--m-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-content,
  .modal-content.small-modal,
  .modal-content.large-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px - var(--m-safe-t));
    border: 0;
    border-radius: var(--m-radius-sheet) var(--m-radius-sheet) 0 0;
    box-shadow: var(--m-shadow-sheet);
    animation: m-sheet-in var(--m-dur-sheet) var(--m-ease);
  }
  #nelson-modal .modal-content { max-width: 100% !important; }     /* inline: index.html:2030 max-width:560px */
  .modal-content:not(.small-modal) {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .modal-header {
    min-height: 56px;
    padding: 6px calc(6px + var(--m-safe-r)) 6px calc(16px + var(--m-safe-l));
  }
  .modal-content:not(.small-modal) .modal-header { padding-top: calc(6px + var(--m-safe-t)); }
  .modal-header h2 { font-size: 1.1rem; line-height: 1.3; }
  .modal-header h2 i { font-size: 1.05rem; }
  .modal-close { background: transparent; font-size: 1.1rem; }
  .modal-body { padding: 16px calc(16px + var(--m-safe-r)) 20px calc(16px + var(--m-safe-l)); }
  .modal-body .form-section { padding: 14px; }
  /* footer: one row; secondary 1 part, the primary 2 parts on the right (thumb) */
  .modal-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px calc(16px + var(--m-safe-r)) calc(12px + var(--m-safe-b)) calc(16px + var(--m-safe-l));
    border-radius: 0;
    background: var(--white);
  }
  .modal-footer > div:empty { display: none; }
  .footer-left,
  .footer-right { flex: 1 1 100%; width: auto; flex-wrap: nowrap; justify-content: stretch; gap: 8px; }
  .footer-left:empty { display: none; }
  .modal-footer > .btn,
  .footer-left > .btn,
  .footer-right > .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--m-tap-lg);
    padding: 0.625rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: normal;
  }
  .modal-footer :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info) { flex-grow: 2; order: 1; }
  /* destructive extras ("Remove from Team") get their own full-width row */
  #nelson-modal-footer > .btn-danger.btn-sm { flex-basis: 100%; order: -1; }
}
/* landscape phones: full-height sheets, centred at a readable width */
@media (max-height: 500px) and (min-width: 641px) {
  .modal-content,
  .modal-content.small-modal,
  .modal-content.large-modal,
  #nelson-modal .modal-content { max-width: 680px !important; }   /* inline: index.html:2030 max-width:560px */
  .modal-content:not(.small-modal) {
    height: calc(100vh - 8px);
    height: calc(100dvh - 8px);
    border-radius: var(--m-radius-sheet) var(--m-radius-sheet) 0 0;
  }
  .modal-content:not(.small-modal) .modal-header { padding-top: 6px; }
}
@keyframes m-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* 6. TABLES ------------------------------------------------------------------
   mobile.js tags registered tables .m-cards (phone cards) or .m-scroll (sticky
   first column) and copies each <th> into td[data-label]. Untagged tables
   keep scrolling inside their wrapper. Tablet: every table scrolls inside its
   wrapper (also fixes the users table clipping its Actions column).
   Area files refine single tables; the generic recipe lives here. */
.users-table-container { overflow-x: auto; }
@media (max-width: 640px) {
  .m-cards { min-width: 0 !important; width: 100% !important; }  /* inline: budget-reports.js:116 min-width:640px, contractor-payments.js:224 width:100% */
  .m-cards,
  .m-cards > tbody,
  .m-cards > tfoot,
  .m-cards > tbody > tr,
  .m-cards > tfoot > tr,
  .m-cards > tbody > tr > td,
  .m-cards > tfoot > tr > td { display: block; }
  /* the header is visually hidden, not display:none (screen readers keep it) */
  .m-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .m-cards > tbody { display: flex; flex-direction: column; gap: 10px; }
  .m-cards > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--white);
    border: var(--m-card-border);
    border-radius: var(--m-radius-card);
    box-shadow: var(--m-shadow-card);
  }
  .m-cards > tbody > tr > td { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  /* title cell: the first cell, or the second when the first only holds a row checkbox */
  .m-cards > tbody > tr > td:first-child:not(:has(> input[type="checkbox"]:only-child)),
  .m-cards > tbody > tr > td:first-child:has(> input[type="checkbox"]:only-child) + td {
    display: block;
    font-size: var(--m-fs-body);
    font-weight: 600;
    color: var(--gray-900);
  }
  .m-cards > tbody > tr > td:first-child:has(> input[type="checkbox"]:only-child) + td::before { display: none; }
  /* key/value rows */
  .m-cards > tbody > tr > td[data-label]:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9rem; }
  .m-cards > tbody > tr > td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 50%;
    font-size: var(--m-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--gray-500);
  }
  /* cells holding form controls: label on top, control full width */
  .m-cards > tbody > tr > td:has(select, input:not([type="checkbox"]), textarea) { display: block; }
  .m-cards > tbody > tr > td:has(select, input:not([type="checkbox"]), textarea)::before { display: block; margin: 6px 0 4px; }
  .m-cards td :is(.form-select, .form-input) { width: 100%; max-width: 100% !important; }  /* inline: app.js:4625 max-width:160px */
  /* action cells, detected by content (only buttons inside), not by column position */
  .m-cards > tbody > tr > td:has(> :is(button, .action-buttons)):not(:has(> :not(button, .action-buttons))) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
  }
  .m-cards > tbody > tr > td:has(> :is(button, .action-buttons)):not(:has(> :not(button, .action-buttons)))::before { display: none; }
  .m-cards :is(.btn-sm, .btn-ghost, .btn-icon) { min-width: var(--m-tap); min-height: var(--m-tap); }
  /* totals rows */
  .m-cards > tfoot { margin-top: 10px; padding: 4px 14px; background: var(--gray-50); border-radius: var(--m-radius-card); }
  .m-cards > tfoot > tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
  .m-cards > tfoot > tr + tr { border-top: 1px solid var(--gray-200); }
  .m-cards > tfoot > tr > td { padding: 0; border: 0; }
  .m-cards > tfoot > tr > td:last-child { font-weight: 700; font-family: var(--m-font-num); font-variant-numeric: tabular-nums; }
  /* legacy table rules that out-rank the generic ones (mirrored selectors) */
  .users-table tr:not(:last-child) td,
  .admins-table tr:not(:last-child) td,
  .nelson-table tbody tr:last-child td { border-bottom: 0; }
  /* wrappers lose their chrome only when the table inside really became cards (mobile.js ran) */
  :is(.users-table-container, .admins-table-container, .nelson-table-wrap, .projections-table-container):has(> .m-cards) {
    margin: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* scroll tables: sticky first column + nowrap */
  .m-scroll { min-width: max-content !important; }   /* inline: budget-reports.js:116 min-width:640px */
  .m-scroll :is(th, td) { padding: 10px 12px; font-size: 0.85rem; white-space: nowrap; }
  .m-scroll :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    box-shadow: 6px 0 8px -6px rgba(14, 46, 67, 0.18);
  }
}

/* 7. GRIDS: COLLAPSE TO ONE SHRINKABLE COLUMN -------------------------------- */
.invoices-grid,
.budget-summary-cards,
.projections-budget-sections,
.projects-grid,
.impact-projects-grid,
.report-summary .summary-cards,
.report-details,
.projections-charts-grid,
.nelson-budget-charts,
.nelson-sites-grid { grid-template-columns: minmax(0, 1fr); }
.budget-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projections-chart-card,
.nelson-budget-chart-card,
.projections-chart-container,
.chart-container { min-width: 0; }
@media (min-width: 641px) {
  .invoices-grid,
  .budget-summary-cards,
  .projects-grid,
  .report-summary .summary-cards,
  .report-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 8. LOGIN AND MODULE CHOOSER ------------------------------------------------- */
@media (max-width: 640px) {
  .login-container {
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(16px + var(--m-safe-t)) calc(16px + var(--m-safe-r)) calc(16px + var(--m-safe-b)) calc(16px + var(--m-safe-l));
  }
  /* replaces the deleted legacy 480 rule (.login-card{padding:var(--spacing-lg)}) */
  .login-card { padding: 28px 20px; border-radius: var(--m-radius-sheet); }
  .login-header { margin-bottom: 24px; }
  .login-header .logo-container { width: 88px; height: 88px; margin-bottom: 16px; padding: 8px; }
  .login-header h1 { font-size: 1.5rem; }
  .login-header p { font-size: 0.95rem; }
  .login-form { gap: 1.25rem; }
  .login-security { margin-top: 24px; padding-top: 20px; }
  .security-badges { gap: 8px; margin-bottom: 0; }
  /* the Sign In label collides with the .btn-text variant (styles.css:4925);
     fixed for phones only (the desktop bug is reported, not fixed) */
  #login-form .btn > .btn-text { padding: 0; background: none; color: inherit; }

  /* chooser: horizontal rows (icon, title + description, chevron), so both
     apps and Sign out fit on one screen */
  .module-chooser-card { padding: 24px 16px 12px; border-radius: var(--m-radius-sheet); }
  .module-chooser-header { margin-bottom: 20px; }
  .module-chooser-header .logo-container { width: 72px; height: 72px; margin-bottom: 4px; padding: 6px; }
  .module-chooser-header h1 { margin-top: 0; font-size: var(--m-fs-title); line-height: 1.25; }
  .module-chooser-header p { font-size: 0.95rem; }
  .module-chooser-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .module-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    grid-template-areas: "icon title chev" "icon desc chev";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    min-height: 96px;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .module-card-icon { grid-area: icon; width: 48px; height: 48px; font-size: 1.3rem; border-radius: 12px; }
  .module-card h2 { grid-area: title; align-self: end; font-size: 1.05rem; line-height: 1.3; }
  .module-card p { grid-area: desc; align-self: start; font-size: var(--m-fs-meta); line-height: 1.4; }
  .module-card-cta { display: none; }
  .module-card::after {
    content: "\f054";
    grid-area: chev;
    justify-self: end;
    font: 900 0.875rem/1 'Font Awesome 6 Free';
    color: var(--gray-400);
  }
  .module-chooser-footer { margin-top: 12px; }
}

/* 9. TOUCH AND MOTION --------------------------------------------------------- */
/* hover lifts stick after a tap on touch screens; area files add their own */
@media (hover: none) {
  .stat-card:hover,
  .budget-card:hover,
  .project-card:hover,
  .work-type-item:hover,
  .note-card:hover,
  .nelson-site-card:hover,
  .nelson-contractor-card:hover,
  .module-card:hover,
  .security-badge:hover,
  .tooltip-trigger:hover { transform: none; }
  .btn-primary:hover:not(:disabled),
  #login-page .btn-primary:hover:not(:disabled) { transform: none; background: var(--primary-gradient); box-shadow: 0 4px 15px rgba(38, 125, 183, 0.35); }
  .sidebar-toggle:hover,
  .nelson-sidebar-toggle:hover { background: transparent; }
  .sidebar-toggle:active,
  .nelson-sidebar-toggle:active { background: rgba(255, 255, 255, 0.14); }
  .btn:active:not(:disabled),
  .filter-btn:active,
  .module-card:active { transform: scale(0.98); }
  .nav-item:active { background: rgba(255, 255, 255, 0.1); }
  .modal-close:active { background: var(--gray-100); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-content,
  .modal-content.small-modal,
  .modal-content.large-modal,
  .toast,
  .date-picker-calendar.active { animation: none; }
  .sidebar,
  .sidebar-overlay { transition: none; }
}

/* ==========================================================================
   AREA: INVOICES
   ========================================================================== */
/* 1. CONTRACTOR NEW INVOICE FAB ------------------------------------------- */
@media (max-width: 640px) {
  #new-invoice-btn {
    position: fixed;
    right: calc(16px + var(--m-safe-r));
    bottom: calc(16px + var(--m-safe-b));
    z-index: var(--m-z-fab);
    min-height: var(--m-fab-h);
    padding: 0 20px;
    border-radius: var(--m-radius-pill);
    box-shadow: var(--m-shadow-fab);
  }
  #invoices-list-contractor { padding-bottom: 88px; }
}

/* 2. LIST, FILTERS, CARDS, EXPANDED INVOICE --------------------------------- */
@media (max-width: 640px) {
  /* filters: collapsed behind the Filters toggle (hook H6) */
  .search-filters { padding: 12px; }
  .search-filters-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--m-tap);
    padding: 0 4px;
    background: none;
    border: 0;
    font: 600 0.95rem var(--font-family);
    color: var(--gray-700);
    cursor: pointer;
  }
  .search-filters-toggle::after { content: '\f107'; margin-left: auto; font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform 0.2s; }
  .search-filters.open .search-filters-toggle::after { transform: rotate(180deg); }
  .search-filters:has(.search-filters-toggle):not(.open) .search-filters-row { display: none; }
  .search-filters-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
  .search-filter-item { min-width: 0; }
  .search-filter-item:has(#site-filter),
  .search-filter-item:has(#contractor-filter),
  .search-filter-item:has(#date-field-filter),
  .search-filter-item:has(#clear-filters-btn) { grid-column: 1 / -1; }
  #clear-filters-btn { width: 100%; }

  /* cards */
  .invoice-card { padding: 14px 16px; border-radius: var(--m-radius-card); scroll-margin-top: calc(var(--m-top) + 12px); }
  .invoice-card-header { flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
  .invoice-card-header > div { min-width: 0; flex-wrap: wrap; }
  .invoice-card-body { gap: 6px; }
  .invoice-card-footer { margin-top: 10px; padding-top: 10px; }
  .invoice-card-footer .btn { flex: 0 0 auto; min-width: 0; }
  .invoice-delete-btn { position: relative; width: 36px; height: 36px; opacity: 1; }
  .invoice-delete-btn::after { content: ''; position: absolute; inset: -4px; }

  /* expanded invoice */
  .invoice-card.expanded { padding: 16px; overflow: clip; }
  .invoice-card-expanded-content { margin-top: 12px; padding-top: 12px; }
  .invoice-expanded-header { position: sticky; top: var(--m-top); z-index: 4; margin: 0 -16px 12px; padding: 8px 16px; background: var(--white); }
  .invoice-expanded-title { flex-wrap: wrap; gap: 8px; min-width: 0; font-size: 1.125rem; }
  .invoice-expanded-title .status-badge { display: none; }
  .invoice-expanded-close { flex-shrink: 0; width: var(--m-tap); height: var(--m-tap); }
  .invoice-expanded-form { gap: 0; }
  .invoice-expanded-form .form-group,
  .invoice-expanded-form .form-row { margin-bottom: 16px; }
  .invoice-expanded-form .form-row > .form-group { margin-bottom: 0; }
  .invoice-expanded-form .form-row:has(input[id^="expanded-invoice-number-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-expanded-form .checkbox-label:has(input[name="workType"]:disabled:not(:checked)) { display: none; }
  .invoice-expanded-form .company-info-box,
  .draft-editor-form .company-info-box { padding: 10px 12px; font-size: 0.875rem; line-height: 1.5; }
  .company-info-box a { display: inline-block; padding: 8px 0; }
  .form-group label .notes-delete-btn { flex: 0 0 auto; min-width: 0; min-height: 36px; margin-left: auto; }
  .paid-date-display .btn { flex: 0 0 auto; min-width: 0; width: var(--m-tap); height: var(--m-tap); margin-left: auto; padding: 0 !important; font-size: 1rem !important; }  /* inline: app.js:2263 */
  .invoice-expanded-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px -16px -16px;
    padding: 10px 16px calc(10px + var(--m-safe-b));
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: var(--m-shadow-raise);
  }
  .invoice-expanded-actions-left:not(:has(.autosave-indicator)) { display: none; }
  .invoice-expanded-actions-left .status-badge { display: none; }
  .invoice-expanded-actions-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .invoice-expanded-actions .btn { min-width: 0; min-height: 46px; padding: 0.5rem 0.625rem; font-size: 0.9rem; line-height: 1.2; white-space: normal; }
  /* order by variant, never by onclick text: primary first, outline (PDF) next to last, destructive last */
  .invoice-expanded-actions .btn:is(.btn-primary, .btn-success) { order: -1; }
  .invoice-expanded-actions .btn-outline { order: 9; }
  .invoice-expanded-actions .btn-danger { order: 10; }
}

/* 3. TOUCH ------------------------------------------------------------------ */
@media (hover: none) {
  .invoice-card:hover,
  .invoice-expanded-close:hover { transform: none; }
  .invoice-card:not(.expanded):hover { border-color: transparent; box-shadow: 0 2px 8px rgba(14, 46, 67, 0.08); }
  .invoice-card:not(.expanded):hover::before { transform: scaleY(0); }
}

/* ==========================================================================
   AREA: EDITOR
   ========================================================================== */
/* 1. SHARED LINE ITEMS (editor + expanded card) ----------------------------- */
/* read-only descriptions: a disabled <input> cannot wrap or scroll on iOS; show the mirrored text (hook H5) */
.invoice-item:has(.item-description-static) .item-description { display: none; }
.item-description-static {
  display: block;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .invoice-items { counter-reset: lineitem; gap: 12px; }
  .invoice-item {
    grid-template-columns: minmax(0, 1fr) var(--m-tap);
    gap: 8px;
    padding: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
  }
  .invoice-item::before {
    counter-increment: lineitem;
    content: 'Item ' counter(lineitem);
    grid-column: 1 / -1;
    font-size: var(--m-fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .invoice-item :is(.item-description, .item-description-static) { grid-column: 1 / -1; }
  .invoice-item .remove-item-btn { width: var(--m-tap); height: var(--m-tap); }
  .invoice-items + .btn { width: 100%; min-height: var(--m-tap-lg); border-style: dashed; color: var(--primary-dark); }
}

/* 2. DRAFT EDITOR ----------------------------------------------------------- */
@media (max-width: 768px) {
  #draft-editor-page .main-content { padding-bottom: 0; }
  /* Back + Saved move into the app bar */
  #draft-editor-page .draft-editor-header-top {
    position: fixed;
    top: var(--m-safe-t);
    left: calc(56px + var(--m-safe-l));
    right: calc(8px + var(--m-safe-r));
    z-index: var(--m-z-bar-item);
    flex-wrap: nowrap;
    gap: 8px;
    height: var(--m-bar-h);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  #draft-editor-page .draft-editor-header-top > .btn { flex: 0 1 auto; min-width: 0; min-height: 40px; padding: 0 12px; font-size: 0.875rem; color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
  #draft-editor-page .autosave-indicator { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: #a7f3d0; background: rgba(16, 185, 129, 0.18); }
  .draft-editor-header { margin-bottom: 16px; }
  .draft-editor-header h1 { gap: 10px; margin: 0; font-size: var(--m-fs-title); }
  .draft-editor-container > .alert { margin-bottom: 12px; padding: 12px 14px; }
  .draft-editor-form { margin-bottom: 16px; padding: 20px 16px; border-radius: 16px; }
  .draft-editor-form .form-group,
  .draft-editor-form .form-row { margin-bottom: 20px; }
  .draft-editor-form .form-row { gap: 12px; }
  .draft-editor-form .form-row > .form-group { margin-bottom: 0; }
  .draft-editor-form > .form-row:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draft-editor-form > .form-row:not(.totals-row) .form-input.readonly { min-height: 0; padding: 0; background: transparent; border: 0; font-weight: 500; color: var(--gray-800); text-overflow: ellipsis; }
  .draft-editor-form > .form-row:not(.totals-row) .form-group { gap: 2px; }
  .draft-editor-form .checkbox-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .draft-editor-form .checkbox-group .checkbox-label { min-height: var(--m-tap-lg); padding: 10px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--m-radius-ctl); }
  .draft-editor-form .checkbox-group .checkbox-label:has(input:checked) { background: var(--info-light); border-color: var(--primary-color); }
  .draft-editor-form .totals-row { gap: 8px; }
  .draft-editor-form .totals-row .form-group { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .draft-editor-form .totals-row .form-input.readonly { flex: 0 1 50%; width: auto; min-height: 0; padding: 0; background: transparent; border: 0; text-align: right; }
  .draft-editor-form .total-group { padding: 12px 14px; }
  .draft-editor-form .total-group .total-display { font-size: 1.25rem; }
  .draft-editor-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--m-z-sticky);
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--m-gutter));
    padding: 12px var(--m-gutter) calc(12px + var(--m-safe-b));
    border-radius: 16px 16px 0 0;
    box-shadow: var(--m-shadow-raise);
  }
  .draft-editor-actions-right { flex: 1; flex-wrap: nowrap; justify-content: flex-end; }
  .draft-editor-actions-right .btn-outline:not(:only-child) { display: none; }
  .draft-editor-actions-right .btn { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 380px) {
  /* Back goes icon-only */
  #draft-editor-page .draft-editor-header-top > .btn { flex: 0 0 40px; width: 40px; padding: 0; font-size: 0; }
  #draft-editor-page .draft-editor-header-top > .btn i { font-size: 1rem; }
}

/* ==========================================================================
   AREA: ADMIN
   ========================================================================== */
/* 14. ADMIN CONFIGURATION ---------------------------------------------------- */
@media (max-width: 640px) {
  /* users: name + status on row 1; actions labelled */
  .users-table.m-cards > tbody > tr > td:nth-child(2) { grid-row: 1; grid-column: 1; display: block; font-weight: 600; font-size: 1rem; color: var(--gray-900); }
  .users-table.m-cards > tbody > tr > td:nth-child(2)::before { display: none; }
  .users-table.m-cards > tbody > tr > td:nth-child(5) { grid-row: 1; grid-column: 2; }
  .users-table.m-cards > tbody > tr > td:nth-child(5)::before { display: none; }
  .users-table.m-cards > tbody > tr > td:first-child { font-weight: 400; font-size: 0.85rem; color: var(--gray-500); }
  .users-table.m-cards > tbody > tr > td:first-child::before { content: '@'; }
  .users-table.m-cards tr.user-inactive { opacity: 1; border-style: dashed; background: var(--gray-50); }
  .users-table.m-cards tr.user-inactive > td:not(.actions) { opacity: 0.6; }
  /* admins: feature toggles become labelled switch rows with a full-row hit area */
  #admins-table.m-cards > tbody > tr > td:nth-child(4) { grid-row: 1; grid-column: 2; }
  #admins-table.m-cards > tbody > tr > td:nth-child(4)::before { display: none; }
  #admins-table.m-cards > tbody > tr > td:nth-child(n+5):nth-child(-n+9) { min-height: var(--m-tap-lg); position: relative; border-top: 1px solid var(--gray-100); align-items: center; }
  #admins-table.m-cards > tbody > tr > td:nth-child(5) { margin-top: 6px; }
  #admins-table.m-cards > tbody > tr > td:nth-child(n+5):nth-child(-n+9)::before { text-transform: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--gray-700); max-width: none; flex: 1; }
  #admins-table.m-cards .feature-toggle::after { content: ''; position: absolute; inset: 0; }
  #admins-table.m-cards .action-buttons { gap: 8px; }
  /* sites: the active toggle row gets a full-row hit area */
  #sites-table.m-cards > tbody > tr > td:last-child { position: relative; min-height: var(--m-tap-lg); align-items: center; border-top: 1px solid var(--gray-100); margin-top: 8px; }
  #sites-table.m-cards .feature-toggle::after { content: ''; position: absolute; inset: 0; }
  .co-admin-chip { font-size: 13px !important; padding: 2px 2px 2px 10px !important; } /* inline: app.js:4619 */
  .co-admin-chip button { min-width: 32px; min-height: 32px; font-size: 18px !important; } /* inline: app.js:4621 */
}
@media (max-width: 640px) {
  .work-type-item { flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 10px 10px 10px 14px; min-height: 64px; }
  .work-type-item::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .work-type-name { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; line-height: 1.35; }
  .work-type-actions { order: 1; gap: 6px; flex-shrink: 0; }
  .work-type-item > .work-type-budget-tag { order: 3; margin: 4px 6px 0 0; }
  .work-type-actions .btn { flex: 0 0 auto; min-width: var(--m-tap); padding: 0 10px; }
  #invoice-warnings-list .work-type-item, #nelson-contract-types-view .work-type-item { flex-direction: column; align-items: stretch; }
  #invoice-warnings-list .work-type-item::after, #nelson-contract-types-view .work-type-item::after { display: none; }
  #invoice-warnings-list .work-type-actions, #nelson-contract-types-view .work-type-actions { justify-content: flex-end; border-top: 1px solid var(--gray-100); padding-top: 10px; margin-top: 10px; }
  .settings-container { padding: 16px; }
  .setting-row { flex-wrap: wrap; gap: 8px; align-items: stretch; }
  .setting-row label { flex: 1 0 100%; }
  .setting-row .form-input { flex: 1 1 0; min-width: 0; max-width: none; }
  .setting-row .btn { flex: 0 0 56px; min-width: 56px; padding: 0; }
  .tooltip-item { padding: 16px; }
  .backup-status-card, .backups-list-container { padding: 16px; }
  .backup-status-card .status-row { gap: 12px; align-items: flex-start; }
  .backup-status-card .status-value { text-align: right; overflow-wrap: anywhere; }
  .backup-status-card .status-value.error-text { max-width: none; }
  .backup-item { padding: 12px; align-items: stretch; }
  .backup-item-name { overflow-wrap: anywhere; }
  .backup-item-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }
  .backup-item-actions .btn { min-width: 0; min-height: var(--m-tap-lg); padding: 4px; font-size: 0.72rem; flex-direction: column; gap: 2px; }
  .backup-item-actions .btn[title]::after { content: attr(title); }
  #backups-view .view-actions, #trash-view .view-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .credential { flex-wrap: wrap; gap: 4px 12px; }
  .credential label { flex: 1 0 100%; min-width: 0; font-size: 0.8rem; }
  .credential span { overflow-wrap: anywhere; min-width: 0; }
  .credential .btn-icon { flex: 0 0 var(--m-tap); }
  #user-sites-list .checkbox-label { padding: 8px 14px !important; } /* inline: app.js:3967 */
}

/* ==========================================================================
   AREA: FINANCE
   ========================================================================== */
/* 15. FINANCIAL PLANNING ----------------------------------------------------- */
@media (max-width: 640px) {
  /* projections language tables: compact 3-line rows instead of tall cards */
  .projections-table.m-cards:is(.translation-table, .video-table) > tbody > tr {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name proj" "lim ytd" "bar bar"; gap: 2px 12px; padding: 10px 12px; }
  .projections-table.m-cards:is(.translation-table, .video-table) .language-name { grid-area: name; }
  .projections-table.m-cards:is(.translation-table, .video-table) .yearly-projection { grid-area: proj; }
  .projections-table.m-cards:is(.translation-table, .video-table) .monthly-limit { grid-area: lim; justify-content: flex-start; }
  .projections-table.m-cards:is(.translation-table, .video-table) .ytd-spent { grid-area: ytd; }
  .projections-table.m-cards:is(.translation-table, .video-table) .visual { grid-area: bar; width: auto; }
  .projections-table.m-cards:is(.translation-table, .video-table) :is(.yearly-projection, .visual)::before { display: none; }
}
@media (max-width: 640px) {
  .budget-card, .projection-budget-card, .project-card { padding: 16px; }
  .budget-card .budget-amount { font-size: 1.75rem; }
  .budget-card h3 { font-size: 1.1rem; }
  .progress-fill { min-width: 2.75rem; font-size: 0.72rem; }
  .budget-charts-section, .projections-charts-section, .projections-chart-section, .projections-tables-section, .potential-projects-impact, .expenses-section, .report-preview { padding: 14px; }
  .chart-container { height: 300px; padding-top: 40px; box-sizing: border-box; }
  .chart-container > h3 { position: absolute; top: 0; left: 0; right: 0; margin: 0; font-size: 1rem; }
  .projections-chart-container { height: 340px; }
  .projections-chart-card { padding: 12px 10px; }
  .expenses-section .section-header { flex-wrap: wrap; }
  .expense-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info amount" "info actions"; gap: 4px 12px; padding: 12px 4px; }
  .expense-item > .expense-info { grid-area: info; min-width: 0; }
  .expense-amount { grid-area: amount; margin: 0; text-align: right; font-size: 1.05rem; }
  .expense-actions { grid-area: actions; justify-content: flex-end; }
  .expense-actions .btn { flex: 0 0 var(--m-tap); width: var(--m-tap); padding: 0; }
  .expense-meta { flex-wrap: wrap; gap: 2px 10px; }
  .expense-date { white-space: nowrap; }
  #reports-view .view-actions, #projections-view .view-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #reports-view .view-actions > :not(.btn), #projections-view .view-actions > :not(.btn) { grid-column: 1 / -1; }
  #reports-view .view-actions > .btn, #projections-view .view-actions > .btn { flex-direction: column; gap: 4px; padding: 0.5rem 0.25rem; font-size: 0.75rem; min-height: 56px; white-space: normal; min-width: 0; box-shadow: none; }
  .contractor-payments-controls > div:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* inline: index.html:523 display:flex */
  #cp-generate-btn { grid-column: 1 / -1; }
  .contractor-payments-controls .btn, .budget-reports-controls .btn { white-space: normal; line-height: 1.2; min-width: 0; }
  .projection-budget-card .budget-metrics-grid { gap: 8px; }
  .budget-comparison-bars .comparison-label { width: auto; }
  .impact-project-item { flex-wrap: wrap; gap: 4px 8px; }
  .impact-totals { width: 100%; flex-wrap: wrap; gap: 6px; }
}

/* ==========================================================================
   AREA: NELSON
   ========================================================================== */
/* 16. NELSON PROJECT TRACKER -------------------------------------------------- */
@media (max-width: 640px) {
  /* Nelson task table: checkbox | name | actions grid, select-all row kept */
  .nelson-task-table.m-cards > thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; }
  .nelson-task-table.m-cards > thead > tr { display: flex; padding: 0 14px 8px; }
  .nelson-task-table.m-cards > thead th { display: none; }
  .nelson-task-table.m-cards > thead th:first-child { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--gray-600); }
  .nelson-task-table.m-cards > thead th:first-child::after { content: 'Select all'; }
  .nelson-task-table.m-cards > tbody > tr { grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: "cb name name act" ". link link link" ". who cost prio" ". status status status"; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(1) { grid-area: cb; align-self: start; padding-top: 2px; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(2) { grid-area: name; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(3) { grid-area: link; display: block; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(4) { grid-area: who; display: block; font-size: 0.85rem; color: var(--gray-600); }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(5) { grid-area: cost; display: block; font-weight: 600; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(6) { grid-area: status; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(7) { grid-area: prio; display: block; }
  .nelson-task-table.m-cards > tbody > tr > td:nth-child(8) { grid-area: act; display: flex; border: 0; margin: -8px -10px 0 0; padding: 0; gap: 0; }
  .nelson-task-table.m-cards > tbody > tr > td:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7))::before { display: none; }
  .nelson-task-cb, #nelson-select-all { width: 22px; height: 22px; accent-color: var(--primary-color); }
  .nelson-status-select { width: 100%; min-height: var(--m-tap-sm); padding: 6px 12px; }
  .nelson-table.m-cards .btn-ghost { width: var(--m-tap); height: var(--m-tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
  .nelson-breadcrumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; margin-bottom: 12px; }
  .nelson-breadcrumb > :not(:nth-last-child(-n+3)) { display: none; }
  .nelson-bc-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 45%; padding: 10px 0; }
  .nelson-bc-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nelson-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .nelson-stat-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-width: 0; }
  .nelson-stat-icon { width: 32px; height: 32px; font-size: 0.95rem; border-radius: 10px; }
  .nelson-stat-info { width: 100%; min-width: 0; }
  .nelson-stat-value { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
  .nelson-site-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; }
  .nelson-site-card-header { display: contents; }
  .nelson-site-card-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nelson-wt-card .nelson-site-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nelson-site-card-stat { min-width: 0; }
  .nelson-scs-value { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
  .nelson-site-card-footer { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 10px; border-top: 1px solid var(--gray-100); }
  .nelson-site-card-footer .btn { margin-left: auto; }
  .nelson-page-header { gap: 12px; margin-bottom: 16px; }
  .nelson-page-header h2 { font-size: 1.3rem; }
  .nelson-page-header > .btn { width: 100%; }
  #nelson-project-detail-view .nelson-page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  #nelson-project-detail-view .nelson-page-actions > :nth-child(3) { order: -1; grid-column: 1 / -1; }
  .nelson-page-actions .btn { width: 100%; }
  .nelson-section-header { gap: 12px; }
  .nelson-section-header h3 { font-size: var(--m-fs-h3); min-width: 0; }
  .nelson-section-header .btn { flex: 0 0 auto; }
  .nelson-budget-overview { padding: 16px; gap: 12px; }
  .nelson-budget-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .nelson-budget-item { min-width: 0; }
  .nelson-task-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nelson-task-filters #nelson-task-search { grid-column: 1 / -1; }
  .nelson-task-filters .form-input, .nelson-task-filters .form-select { max-width: none; min-height: var(--m-tap); }
  .nelson-contractor-card > .btn-ghost { width: 40px; height: 40px; padding: 0; top: 4px !important; right: 4px !important; } /* inline: nelson.js:494 */
  .nelson-info-header { flex-wrap: wrap; gap: 12px; }
  .nelson-info-header > div:nth-child(2) { flex: 1; min-width: 0; }
  .nelson-info-header > .btn { width: 100%; }
  .nelson-info-meta { flex-wrap: wrap; gap: 4px 12px; }
  .nelson-info-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nelson-chart-canvas-wrap { height: 240px; min-width: 0; }
  #nelson-contract-types-view .work-type-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
}
@media (max-width: 640px) {
  .nelson-bulk-bar:not(.hidden) {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--m-safe-b)); z-index: var(--m-z-fab); margin: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "count sel sel" "count apply del";
    gap: 8px; padding: 10px 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: 0 12px 32px rgba(14, 46, 67, 0.28);
  }
  #nelson-bulk-count { grid-area: count; align-self: center; }
  .nelson-bulk-bar .form-select { grid-area: sel; max-width: none; min-height: var(--m-tap); }
  .nelson-bulk-bar .btn-primary { grid-area: apply; }
  .nelson-bulk-bar .btn-danger { grid-area: del; }
  .nelson-bulk-bar .btn { width: 100%; min-height: var(--m-tap); }
  #nelson-project-detail-view:has(.nelson-bulk-bar:not(.hidden)) { padding-bottom: 140px; }
}