/* ============================================================================
 * STH ERP — "Ledger" theme
 * ----------------------------------------------------------------------------
 * Additive override sheet. Loaded LAST on all three views. Restyles existing
 * classes only: no markup, no JS, no PHP, no form-field names are touched.
 *
 * HARD RULES observed throughout (each one guards a real behavior):
 *   1. NO `display` is declared anywhere. Show/hide across this app is inline
 *      `element.style.display`, and JS reads that value back as state
 *      (`content.style.display === 'none'`, `pdfModalOverlay.style.display ===
 *      'flex'`). Declaring display either does nothing or breaks a flow.
 *   2. NO `overflow`, `transform` or `position` is added to any ancestor.
 *      Admin's `#saveBar` is `position:sticky` and is the only save control on
 *      the page; the review table's `th` is `position:sticky`; several overlays
 *      are `position:fixed`. Any of the three properties on an ancestor breaks
 *      one of them.
 *   3. NO `opacity`, `cursor` or `pointer-events`. JS re-asserts these inline on
 *      every mode change; CSS loses the next repaint even with !important.
 *   4. Inputs stay LIGHT. validation.js:467 writes `backgroundColor:#fff3cd`
 *      inline with no class attached. A dark field would erase the only error
 *      affordance in the app.
 *   5. NO `::before`/`::after` caret on `.accordion-toggle` — the glyph is
 *      swapped as textContent, so a pseudo-element doubles it.
 *   6. No bare `h1/h2/h3 {}` rules — those names are shared across five
 *      unrelated components. Everything is scoped.
 *   7. `!important` is used only where an inline attribute, a runtime-injected
 *      stylesheet, or an existing !important must be beaten — never on
 *      `display`, and never on `body{background}` (that would defeat the
 *      `@media print` rules at initial_measure_sheet_styles.css:901-925).
 *
 * Page scoping, since there is no `<body class>`:
 *   measure sheet -> `#initialMeasureForm`, `.container`, `.main-content`
 *   projects      -> `.projects-wrap`
 *   admin         -> `.wrap`
 * ========================================================================== */

/* ==========================================================================
   0. TOKENS
   ========================================================================== */

:root {
  /* ground + surface */
  --lg-paper:       #F4F2ED;
  --lg-surface:     #FFFFFF;
  --lg-zebra:       #F8F6F2;
  --lg-sunk:        #EFECE6;

  /* ink */
  --lg-ink:         #22201D;
  --lg-ink-2:       #4A463F;
  --lg-mute:        #6E6960;
  --lg-faint:       #9A948A;

  /* rules */
  --lg-rule:        #DDD9D1;
  --lg-rule-soft:   #EBE8E1;

  /* brand */
  --lg-red:         #9B1B1F;
  --lg-red-hover:   #7E1519;
  --lg-red-tint:    #F6EAEA;
  --lg-blue:        #2E4A6B;

  /* semantic — deliberately separate from the accent */
  --lg-ok-bg:       #E4EDE4;  --lg-ok-fg:   #2C5F3C;
  --lg-warn-bg:     #F4EAD6;  --lg-warn-fg: #7A5C15;
  --lg-err-bg:      #F6E3E3;  --lg-err-fg:  #8C1D1D;

  /* type */
  --lg-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --lg-body:    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --lg-data:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* metrics */
  --lg-radius:  2px;
  --lg-shadow:  0 1px 2px rgba(34,32,29,.06);
  --lg-lift:    0 2px 10px rgba(34,32,29,.10);

  /* Remap the app's own variables so every rule we never name still rethemes.
     NOTE: these are defined in initial_measure_sheet_styles.css, which
     admin.php does not load — hence the duplicate :root here, which reaches
     all three pages. */
  --sth-red:       #9B1B1F;
  --sth-dark-red:  #7E1519;
  --sth-light-red: #B8323A;
  --white:         #FFFFFF;
  --light-gray:    #F4F2ED;
  --medium-gray:   #EFECE6;
  --dark-gray:     #6E6960;
  --black:         #22201D;
  --border-color:  #DDD9D1;
  --success-green: #2C5F3C;
  --shadow:        0 1px 2px rgba(34,32,29,.06);
  --shadow-hover:  0 2px 10px rgba(34,32,29,.10);
}

/* ==========================================================================
   1. BASE
   No !important on body background — the print rules depend on winning here.
   ========================================================================== */

body {
  background: var(--lg-paper);
  color: var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tabular figures wherever digits are compared down a column. */
input, select, textarea, table, .review-table, .co-list {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. TOP NAV  (three independent copies: measure sheet body-level <style>,
   projects head <style>, admin head <style>)
   The measure-sheet copy lives in the BODY at lines 584-651, so it would beat
   a head-injected link; our <link> is injected after it instead, which is why
   these need no !important. Admin's links carry NO .app-navbar__link class —
   they must be reached via the descendant selector.
   Logo box is deliberately left alone: #modeIndicator and #autosaveIndicator
   are fixed at top:100px/150px and are tuned to the current nav height.
   ========================================================================== */

.app-navbar {
  background: var(--lg-surface);
  border-bottom: 2px solid var(--lg-ink);
  font-family: var(--lg-body);
}

.app-navbar__inner { gap: 16px; }

.app-navbar__link,
.app-navbar__links a {
  color: var(--lg-mute);
  font-family: var(--lg-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: var(--lg-radius);
  padding: 7px 12px;
  text-decoration: none;
  transition: color .15s, background .15s, box-shadow .15s;
}

.app-navbar__link:hover,
.app-navbar__links a:hover {
  background: var(--lg-sunk);
  color: var(--lg-ink);
}

/* Active tab: an inset rule rather than a filled pill — quieter, and it reads
   as a ledger tab. Background reset to transparent to beat the navy pill. */
.app-navbar__link.is-active,
.app-navbar__links a.is-active,
.app-navbar__link.is-active:hover,
.app-navbar__links a.is-active:hover {
  background: transparent;
  color: var(--lg-ink);
  font-weight: 700;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--lg-red);
}

/* ---- who is signed in (shared navbar bar + sign-in dialog) -------------- */

.ab-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--lg-rule);
  font-family: var(--lg-body);
  font-size: 12.5px;
}
.ab-who { color: var(--lg-ink); font-weight: 600; }
.ab-role {
  color: var(--lg-mute);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-left: 5px;
}
/* Amber, not red: unattributed work is a gap to close, not a failure. */
.ab-anon {
  background: var(--lg-warn-bg);
  color: var(--lg-warn-fg);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--lg-radius);
}
.ab-link {
  background: none;
  border: none;
  color: var(--lg-blue);
  cursor: pointer;
  font: inherit;
  padding: 4px 2px;
  text-decoration: underline;
}
.ab-btn {
  font-family: var(--lg-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 15px;
  border-radius: var(--lg-radius);
  cursor: pointer;
  border: 1px solid transparent;
}
.ab-btn.ab-small { padding: 5px 11px; font-size: 12px; }
.ab-primary { background: var(--lg-red); border-color: var(--lg-red); color: #fff; }
.ab-primary:hover { background: var(--lg-red-hover); border-color: var(--lg-red-hover); }
.ab-ghost { background: var(--lg-surface); border-color: var(--lg-rule); color: var(--lg-ink); }
.ab-ghost:hover { background: var(--lg-sunk); }

.ab-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(34,32,29,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;   /* above the sheet's own modals (10001) */
  padding: 20px;
}
.ab-backdrop[hidden] { display: none; }
.ab-panel {
  background: var(--lg-surface);
  border-radius: var(--lg-radius);
  box-shadow: 0 12px 44px rgba(34,32,29,.28);
  padding: 24px 26px;
  width: 100%;
  max-width: 380px;
  font-family: var(--lg-body);
}
.ab-panel h2 {
  font-family: var(--lg-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--lg-ink);
}
.ab-panel .ab-sub { color: var(--lg-mute); font-size: 13px; margin: 0 0 16px; }
.ab-panel label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lg-mute);
  margin: 12px 0 4px;
}
.ab-panel input {
  width: 100%;
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  padding: 8px 10px;
  font: 400 14px var(--lg-body);
  color: var(--lg-ink);
}
.ab-panel input:focus {
  outline: none;
  border-color: var(--lg-red);
  box-shadow: 0 0 0 2px rgba(155,27,31,.15);
}
.ab-error {
  background: var(--lg-err-bg);
  color: var(--lg-err-fg);
  font-size: 13px;
  padding: 9px 11px;
  border-radius: var(--lg-radius);
  margin-bottom: 4px;
}
.ab-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }

@media (max-width: 640px) {
  .ab-bar { margin-left: 0; padding-left: 0; border-left: none; width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   3. PAGE WRAPPERS — four class names, one concept.
   .container > .main-content nest on the measure sheet, so padding compounds.
   ========================================================================== */

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container .main-content { padding-left: 0; padding-right: 0; }
.main-content { max-width: 1200px; margin: 0 auto; padding: 20px; }
.projects-wrap { width: 90%; max-width: none; margin: 22px auto; padding: 0; }
.wrap { max-width: 1100px; margin: 22px auto; padding: 0 20px; }

/* ==========================================================================
   4. CARD SURFACES
   ========================================================================== */

.form-section,
.projects-card,
.wrap .card {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow);
}

.form-section { margin-bottom: 16px; }
.projects-card,
.wrap .card { padding: 20px 22px; }

.projects-card h1,
.wrap h1 {
  font-family: var(--lg-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -.006em;
  color: var(--lg-ink);
}
.projects-card .sub {
  color: var(--lg-mute);
  font-size: 12.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lg-rule);
}

/* ==========================================================================
   5. FORM FIELDS
   Admin styles its controls with BARE element selectors and has no focus ring
   at all; #adminPw is matched by nothing today. All covered here.
   ========================================================================== */

.form-group label,
.question-section label,
.wrap label {
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lg-mute);
}

.form-group input,
.form-group select,
.form-group textarea,
.wrap input[type=text],
.wrap input[type=password],
.wrap input[type=number],
.wrap select,
.wrap textarea,
.note-form input,
.note-form textarea,
.modal-input,
.co-field input,
.co-field select,
.co-field textarea {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  color: var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 13px;
  padding: 6px 8px;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.wrap input::placeholder,
.modal-input::placeholder { color: var(--lg-faint); }

/* One focus ring, replacing three different treatments. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.wrap input:focus,
.wrap select:focus,
.wrap textarea:focus,
.note-form input:focus,
.note-form textarea:focus,
.modal-input:focus,
.co-field input:focus {
  border-color: var(--lg-red);
  box-shadow: 0 0 0 2px rgba(155,27,31,.15);
  outline: none;
}

/* Read-only / auto-generated fields read as inset paper, not as inputs. */
.form-group input[readonly],
.form-group input:disabled,
.form-group select:disabled {
  background: var(--lg-zebra);
  color: var(--lg-mute);
}

/* Lowest-risk, highest-reach checkbox win. */
input[type=checkbox],
input[type=radio] { accent-color: var(--lg-red); }

/* ==========================================================================
   6. BUTTONS — six parallel systems, page-scoped so they stop colliding.
   The two real measure-sheet buttons carry a full grey skin inline and six
   inline onmouseover handlers write this.style.*, so colour/border here must
   be !important or the "primary" button renders grey forever.
   ========================================================================== */

.btn, .modal-btn, .co-btn, .btn-sm, .wrap .btn, .note-form button {
  font-family: var(--lg-body);
  font-weight: 600;
  border-radius: var(--lg-radius);
  letter-spacing: .01em;
}

/* measure sheet */
.main-content .btn,
.container .btn { font-size: 12.5px; padding: 8px 15px; }

.btn-primary,
#submitMeasureBtn {
  background: var(--lg-red) !important;
  border: 1px solid var(--lg-red) !important;
  color: #fff !important;
}
.btn-primary:hover,
#submitMeasureBtn:hover {
  background: var(--lg-red-hover) !important;
  border-color: var(--lg-red-hover) !important;
}

.btn-secondary,
#saveDraftBtn {
  background: var(--lg-surface) !important;
  border: 1px solid var(--lg-rule) !important;
  color: var(--lg-ink) !important;
}
.btn-secondary:hover,
#saveDraftBtn:hover {
  background: var(--lg-sunk) !important;
  border-color: var(--lg-mute) !important;
}

#exportPdfBtn,
#resendEmailBtn,
.btn-outline-primary {
  background: var(--lg-surface) !important;
  border: 1px solid var(--lg-red) !important;
  color: var(--lg-red) !important;
  border-radius: var(--lg-radius) !important;
  font-family: var(--lg-body) !important;
  font-weight: 600 !important;
}
#exportPdfBtn:hover,
#resendEmailBtn:hover,
.btn-outline-primary:hover {
  background: var(--lg-red-tint) !important;
}

/* modal buttons */
.modal-btn { font-weight: 600; font-size: 12.5px; }
.modal-btn-primary {
  background: var(--lg-red);
  border-color: var(--lg-red);
  color: #fff;
}
.modal-btn-primary:hover { background: var(--lg-red-hover); }
.modal-btn-secondary {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  color: var(--lg-ink);
}

/* admin — its .btn is a navy pill and must not meet the measure sheet's .btn */
.wrap .btn {
  background: var(--lg-ink);
  color: #fff;
  border: 1px solid var(--lg-ink);
  font-size: 12.5px;
  padding: 7px 15px;
}
.wrap .btn:hover { background: #3A3630; border-color: #3A3630; }
.wrap .btn.red { background: var(--lg-red); border-color: var(--lg-red); }
.wrap .btn.red:hover { background: var(--lg-red-hover); border-color: var(--lg-red-hover); }
.wrap .btn.ghost {
  background: var(--lg-surface);
  color: var(--lg-ink);
  border: 1px solid var(--lg-rule);
}
.wrap .btn.ghost:hover { background: var(--lg-sunk); }

/* Small variant. Upstream `.btn.sm` and our `.wrap .btn` are both (0,2,0), so
   ours was winning on order and silently eating the small padding. This is
   (0,3,0) and restores it. */
.wrap .btn.sm {
  padding: 5px 11px;
  font-size: 12px;
}

/* The row-delete ✕ is the sole `.btn.sm` inside `.field-row`, and it always
   lands in that grid's fixed 32px end track. With any horizontal padding the
   content box collapses to ~2px and the glyph overflows off-centre, so the
   padding is zeroed and the 32px box does the centring. */
.wrap .field-row > .btn.sm {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  line-height: 1.25;
}

/* projects */
.projects-wrap .btn-sm {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  color: var(--lg-ink);
  font-size: 12px;
  padding: 5px 11px;
}
.projects-wrap .btn-sm:hover { background: var(--lg-sunk); }
.projects-wrap .btn-sm.edit {
  background: var(--lg-red);
  border-color: var(--lg-red);
  color: #fff;
  display: inline-block;      /* an <a> among <button>s — layout only, no state */
  line-height: 1.5;
  text-decoration: none;
  font-family: inherit;
}
.projects-wrap .btn-sm.edit:hover { background: var(--lg-red-hover); }
.projects-wrap .btn-sm.danger { color: var(--lg-err-fg); border-color: #E0C4C4; }
.projects-wrap .btn-sm.danger:hover { background: var(--lg-err-bg); }

.note-form button {
  background: var(--lg-ink);
  color: #fff;
  border: 1px solid var(--lg-ink);
  font-size: 12.5px;
}

/* ==========================================================================
   7. TOGGLE + DROPDOWN QUESTION ROW
   Never set display on .dropdown-group — 37 of them ship inline display:block.
   ========================================================================== */

.toggle-dropdown-group { gap: 20px; }
.question-section label { line-height: 1.45; }
.toggle-dropdown-group .dropdown-group select { min-width: 190px; }

/* ==========================================================================
   8. YES / NO TOGGLES
   `.active` here is DATA — classList.contains('active') builds the saved
   payload's includes_* booleans. We restyle it, never touch it.
   ~22 of these carry inline background-color, and the existing rules win only
   via !important, so every state below must be !important too. Specificity is
   matched up to (0,4,0) to beat `.toggle-btn[data-value="no"]:disabled.active`.
   Fixes a real defect: "No" currently looks identical selected vs unselected.
   ========================================================================== */

.toggle-btn {
  background-color: var(--lg-surface) !important;
  border: 1px solid var(--lg-rule) !important;
  color: var(--lg-ink-2) !important;
  font-family: var(--lg-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: var(--lg-radius) !important;
}

.toggle-btn:hover {
  background-color: var(--lg-sunk) !important;
  border-color: var(--lg-mute) !important;
  color: var(--lg-ink) !important;
  transform: translateY(-1px);
}

.toggle-btn.active {
  background-color: var(--lg-red) !important;
  border-color: var(--lg-red) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.toggle-btn[data-value="no"] {
  background-color: var(--lg-surface) !important;
  border-color: var(--lg-rule) !important;
  color: var(--lg-ink-2) !important;
}

.toggle-btn[data-value="no"]:hover {
  background-color: var(--lg-sunk) !important;
  border-color: var(--lg-mute) !important;
  transform: translateY(-1px);
}

/* Selected "No" is charcoal — unmistakably distinct from both unselected and
   from a selected "Yes". */
.toggle-btn[data-value="no"].active {
  background-color: var(--lg-ink) !important;
  border-color: var(--lg-ink) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.toggle-btn:disabled {
  background-color: var(--lg-zebra) !important;
  border-color: var(--lg-rule-soft) !important;
  color: var(--lg-faint) !important;
}
.toggle-btn:disabled.active {
  background-color: #C4989A !important;
  border-color: #C4989A !important;
  color: #fff !important;
}
.toggle-btn[data-value="no"]:disabled {
  background-color: var(--lg-zebra) !important;
  border-color: var(--lg-rule-soft) !important;
  color: var(--lg-faint) !important;
}
.toggle-btn[data-value="no"]:disabled.active {
  background-color: #8C8880 !important;
  border-color: #8C8880 !important;
  color: #fff !important;
}

/* ==========================================================================
   9. SECTION HEADER + COLLAPSE
   The bottom border is killed by !important upstream, so re-adding needs ours.
   The chevron <svg> carries stroke="#8B0000" as a presentation attribute —
   a CSS `stroke` wins over that, so recolouring is safe. Never animate the
   collapsed transform (JS writes it inline) and never set display on
   .section-content.
   ========================================================================== */

.section-header {
  background: var(--lg-surface);
  border-bottom: 1px solid var(--lg-rule) !important;
  padding: 13px 18px;
  color: var(--lg-ink);          /* the container itself inherited #8B0000 */
}
.section-header:hover { background: var(--lg-zebra); }

.section-header h3 {
  font-family: var(--lg-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.004em !important;
  color: var(--lg-ink) !important;
}

.section-toggle { color: var(--lg-red); }
.section-toggle svg { stroke: var(--lg-red); }
.section-content { padding: 16px 18px 18px; }

/* Raised from the upstream 2000px ceiling: admin can append arbitrarily many
   questions to a defaults section, and the old cap silently clipped them. */
.conditional-section { max-height: 6000px; }

/* ==========================================================================
   10. ACCORDION (line items)
   The header is kept DARK on purpose: the 12 action buttons carry inline
   `color:white`, regenerated by line_items.js on every add/duplicate, so a
   light header would render white-on-white icons. Keeping the bar dark is the
   robust fix rather than fighting the inline colour.
   No ::before on .accordion-toggle — the glyph is textContent.
   ========================================================================== */

.accordion-panel {
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
  margin-bottom: 10px;
}

.accordion-header {
  background: var(--lg-ink);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--lg-body);
}
.accordion-header:hover { background: #302C27; }

.accordion-header-left span {
  font-family: var(--lg-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .005em;
}

/* Inline `background:transparent;color:white` on every one of these, rewritten
   by JS — !important is the only way to reach them. */
.accordion-btn,
.accordion-duplicate,
.accordion-toggle {
  color: #fff !important;
  border-radius: var(--lg-radius) !important;
  font-family: var(--lg-body) !important;
}
.accordion-btn:hover,
.accordion-duplicate:hover,
.accordion-toggle:hover {
  background: rgba(255,255,255,.14) !important;
}

.accordion-content { background: var(--lg-surface); }

/* Free hook: toggled by accordion.js and carries no CSS upstream. */
.accordion-panel.active { border-color: var(--lg-mute); box-shadow: var(--lg-shadow); }

/* ---- reorder controls -------------------------------------------------- */

.lr-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 10px;
}

/* Hit areas are sized for a thumb on a tablet, not a mouse on a desk. The
   glyphs stay small; the tappable box around them does not. */
.lr-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 38px;
  color: rgba(255,255,255,.6);
  cursor: grab;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--lg-radius);
  user-select: none;
  /* Stops the browser claiming the gesture for scrolling, which is what makes
     dragging work on a touch screen at all. */
  touch-action: none;
}
.lr-handle:hover  { color: #fff; background: rgba(255,255,255,.14); }
.lr-handle:active { cursor: grabbing; }
.lr-handle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  color: #fff;
}

.lr-up, .lr-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 38px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  border-radius: var(--lg-radius);
  touch-action: manipulation;   /* no 300ms tap delay */
}
.lr-up:hover:not(:disabled), .lr-down:hover:not(:disabled) {
  color: #fff;
  background: rgba(255,255,255,.14);
}
.lr-up:disabled, .lr-down:disabled { opacity: .25; cursor: default; }
.lr-up:focus-visible, .lr-down:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* The panel being carried.
   Collapsed to its header while in flight: an expanded opening can be several
   hundred pixels tall, and dragging that through a 26-opening list means the
   thing you are holding covers everything you are trying to aim at. The other
   panels shuffle around it live, so the gap in the list is the drop preview —
   no separate indicator is needed. */
.accordion-panel.lr-dragging {
  max-height: 62px;
  overflow: hidden;
  opacity: .92;
  box-shadow: 0 10px 26px -8px rgba(34,32,29,.45);
  outline: 2px solid var(--lg-red);
  outline-offset: -2px;
  cursor: grabbing;
}
.accordion-panel.lr-dragging .accordion-header { background: var(--lg-red); }

/* Kill text selection while a drag is in flight. */
body.lr-drag-active { user-select: none; -webkit-user-select: none; }

/* ==========================================================================
   11. LINE-ITEM SUB-SECTIONS
   These three had no CSS anywhere and rendered as raw browser defaults ~24x
   per line item: an unstyled <h3> over a beveled <hr>. Biggest single visual
   win in the app. Scoped so the bare h3 never leaks to the other four
   components that also use <h3>.
   ========================================================================== */

.line-item-section { margin: 0 0 18px; }

.line-item-section .section-heading,
.accordion-content .section-heading {
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lg-mute);
  margin: 20px 0 8px;
}

hr.section-divider {
  border: none;
  border-top: 1px solid var(--lg-rule);
  margin: 0 0 14px;
  height: 0;
}

.default-indicator {
  color: var(--lg-mute);
  font-family: var(--lg-body);
  font-size: 10.5px;
}

/* ==========================================================================
   12. REVIEW TABLE
   Preserve min-width:2000px on the table and overflow-x on its container —
   39 columns depend on both, and `th` is position:sticky.
   Selection colours are !important upstream (5 rules), so they need ours.
   ========================================================================== */

.review-table { font-family: var(--lg-body); font-size: 12.5px; }

.review-table th {
  background: var(--lg-sunk);
  color: var(--lg-ink);
  border-bottom: 1px solid var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 10px;
}

.review-table td {
  border-bottom: 1px solid var(--lg-rule-soft);
  color: var(--lg-ink);
  padding: 7px 10px;
}

.review-table tr:nth-child(even) { background: var(--lg-zebra); }
.review-table tr:nth-child(odd)  { background: var(--lg-surface); }
.review-table tr:hover           { background: var(--lg-sunk); }
.review-table em                 { color: var(--lg-faint); font-style: italic; }

.review-table tr.selected,
.review-table tr.selected td,
.review-table tr.selected:hover,
.review-table tr.selected td:first-child,
.review-table tr.selected td:nth-child(2) {
  background: var(--lg-red-tint) !important;
  color: var(--lg-ink) !important;
  box-shadow: inset 2px 0 0 var(--lg-red);
}

#reviewTableContainer,
#modalReviewTableContainer {
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  scrollbar-color: var(--lg-mute) var(--lg-sunk);
  scrollbar-width: thin;
}
#reviewTableContainer::-webkit-scrollbar-track { background: var(--lg-sunk); }
#reviewTableContainer::-webkit-scrollbar-thumb {
  background: var(--lg-mute);
  border-radius: 4px;
}

.empty-state {
  background: var(--lg-zebra);
  border: 1px dashed var(--lg-rule);
  border-radius: var(--lg-radius);
  color: var(--lg-mute);
  font-family: var(--lg-body);
}

/* ==========================================================================
   13. MODALS — five systems, five z-indexes. Everything scoped; display never
   touched; the z-index ladder is left exactly as-is.
   ========================================================================== */

.modal-content, .modal-box, .co-modal {
  background: var(--lg-surface);
  border-radius: var(--lg-radius);
  box-shadow: 0 10px 40px rgba(34,32,29,.22);
}

.modal-header, .co-modal-header {
  border-bottom: 1px solid var(--lg-rule);
}
.modal-title, .modal-header h3, .co-modal-title, .modal-box .section-title {
  font-family: var(--lg-display);
  font-weight: 600;
  color: var(--lg-ink);
  letter-spacing: -.004em;
}
.modal-close { color: var(--lg-mute); border-radius: var(--lg-radius); }
.modal-close:hover { color: var(--lg-ink); background: var(--lg-sunk); }

.option-item {
  background: var(--lg-zebra);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
}
.option-number {
  background: var(--lg-red);
  color: #fff;
  font-family: var(--lg-data);
  font-weight: 600;
}
.option-text { color: var(--lg-ink); font-size: 13px; }

/* Version picker. `.selected` is the only signal of which version gets copied,
   so it is deliberately loud. `.status-draft` is scoped because a second,
   orange definition of that class exists upstream. */
.version-option {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
}
.version-option:hover { border-color: var(--lg-mute); background: var(--lg-zebra); }
.version-option.selected {
  border-color: var(--lg-red);
  background: var(--lg-red-tint);
  box-shadow: inset 3px 0 0 var(--lg-red);
}
.version-option-title { font-family: var(--lg-body); font-weight: 600; color: var(--lg-ink); }
.version-option.selected .version-option-title { color: var(--lg-red); }
.version-option-details { color: var(--lg-mute); font-size: 12px; }

.version-status-badge {
  border-radius: var(--lg-radius);
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
}
.version-status-badge.status-draft     { background: var(--lg-warn-bg); color: var(--lg-warn-fg); }
.version-status-badge.status-finalized { background: var(--lg-ok-bg);   color: var(--lg-ok-fg); }

/* ==========================================================================
   14. CHANGE ORDERS
   change_orders.js appends <style id="changeOrdersStyles"> to document.head at
   runtime, after every static link, and early-returns if it already exists —
   so it cannot be pre-empted. Every rule here needs !important.
   .co-notes-preview keeps its nowrap/overflow/ellipsis triplet untouched.
   ========================================================================== */

.co-section {
  background: var(--lg-surface) !important;
  border: 1px solid var(--lg-rule) !important;
  border-radius: var(--lg-radius) !important;
}
.co-header h3 {
  font-family: var(--lg-display) !important;
  color: var(--lg-ink) !important;
  font-weight: 600 !important;
}
.co-badge {
  background: var(--lg-sunk) !important;
  color: var(--lg-ink) !important;
  border-radius: var(--lg-radius) !important;
  font-family: var(--lg-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}
.co-row, .co-row-header {
  border-bottom: 1px solid var(--lg-rule-soft) !important;
  font-family: var(--lg-body) !important;
  font-size: 12.5px !important;
}
.co-status, .co-phase {
  font-family: var(--lg-body) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border-radius: var(--lg-radius) !important;
  color: var(--lg-warn-fg) !important;
  background: var(--lg-warn-bg) !important;
}
.co-submitted { color: var(--lg-ok-fg) !important; background: var(--lg-ok-bg) !important; }
.co-btn {
  font-family: var(--lg-body) !important;
  font-weight: 600 !important;
  border-radius: var(--lg-radius) !important;
  border: 1px solid var(--lg-rule) !important;
  background: var(--lg-surface) !important;
  color: var(--lg-ink) !important;
}
.co-btn-primary {
  background: var(--lg-red) !important;
  border-color: var(--lg-red) !important;
  color: #fff !important;
}
.co-modal { border-radius: var(--lg-radius) !important; }
.co-warning {
  background: var(--lg-warn-bg) !important;
  color: var(--lg-warn-fg) !important;
  border-radius: var(--lg-radius) !important;
}

/* ==========================================================================
   15. FLOATING INDICATORS
   All written as inline cssText by JS, so id + !important is the only reach.
   `top` is left alone — 100px/150px are tuned to the nav height, which we
   deliberately did not change.
   ========================================================================== */

#modeIndicator, #autosaveIndicator {
  background: var(--lg-ink) !important;
  color: #fff !important;
  border-radius: var(--lg-radius) !important;
  font-family: var(--lg-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  box-shadow: var(--lg-lift) !important;
}

#wfHint {
  color: var(--lg-red) !important;
  font-family: var(--lg-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* The defaults sub-headings carry a full inline skin. Two of the five have no
   id AND no class ("General Preferences", and the Jobsite one below), so the
   only CSS-reachable handle is their inline style string. */
#windowDefaultsHeading,
#slidingDoorDefaultsHeading,
#swingDoorDefaultsHeading,
#specialtyDoorDefaultsHeading,
h4[id^="addedSectionHeading_"],
h4[style*="border-bottom: 1px solid #ddd"],
.defaults-section h4 {
  color: var(--lg-ink) !important;
  font-family: var(--lg-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--lg-rule) !important;
  padding-bottom: 7px !important;
  margin: 20px 0 13px !important;
}

/* ==========================================================================
   16. PROJECTS PAGE
   `table.projects` must stay element+class — `.projects` alone loses the tie.
   No overflow wrapper exists on this 9-column table, so the type stays tight.
   ========================================================================== */

table.projects { font-size: 12.5px; }

table.projects th {
  background: var(--lg-sunk);
  color: var(--lg-ink);
  border-top: 1px solid var(--lg-ink);
  border-bottom: 1px solid var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 9px;
}
table.projects td {
  border-bottom: 1px solid var(--lg-rule-soft);
  padding: 7px 9px;
  color: var(--lg-ink);
}
table.projects tbody tr:nth-child(even) { background: var(--lg-zebra); }
table.projects tr:hover td { background: var(--lg-sunk); }

.badge {
  border-radius: var(--lg-radius);
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
}
.badge.draft     { background: var(--lg-warn-bg); color: var(--lg-warn-fg); }
.badge.finalized { background: var(--lg-ok-bg);   color: var(--lg-ok-fg); }

.projects-wrap .muted, .projects-wrap .meta { color: var(--lg-mute); font-size: 11.5px; }
.projects-wrap .empty { color: var(--lg-faint); font-style: italic; }

/* Edit history — promoted from a debug dump to a real ledger entry.
   The red/green strike-and-insert pairing is semantic; it is preserved. */
.hist-entry {
  background: var(--lg-zebra);
  border-left: 2px solid var(--lg-ink);
  border-radius: 0;
  padding: 10px 13px;
}
.hist-entry .meta {
  font-family: var(--lg-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lg-mute);
}
.change { font-family: var(--lg-data); font-size: 12px; line-height: 1.6; }
.change .old { color: var(--lg-red); text-decoration: line-through; text-decoration-color: var(--lg-red); }
.change .new { color: var(--lg-ok-fg); font-weight: 600; }

.note-entry {
  background: var(--lg-surface);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
  padding: 9px 12px;
}

/* ==========================================================================
   17. ADMIN
   The fixed grid tracks (.q-row 70px 1fr 100px 1.4fr, .field-row 1fr 120px
   1.2fr 100px 32px) are sized for 13px controls at 7px padding — the type
   scale here matches deliberately, so the row-end ✕ button stays in-row.
   #saveBar keeps position:sticky and no ancestor gains overflow/transform.
   ========================================================================== */

.wrap h2 {
  font-family: var(--lg-display);
  color: var(--lg-red);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--lg-rule);
  padding-bottom: 8px;
}
.wrap h3 {
  font-family: var(--lg-body);
  color: var(--lg-mute);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cat-box {
  background: var(--lg-zebra);
  border: 1px solid var(--lg-rule);
  border-radius: var(--lg-radius);
}
.q-row, .field-row { border-bottom: 1px solid var(--lg-rule-soft); }

.tag {
  background: var(--lg-sunk);
  border-radius: var(--lg-radius);
  color: var(--lg-mute);
  font-family: var(--lg-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tag b { color: var(--lg-red); }

.pill {
  background: var(--lg-sunk);
  border-radius: var(--lg-radius);
  color: var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 11px;
}

#saveBar {
  background: var(--lg-surface);
  border-top: 2px solid var(--lg-ink);
  box-shadow: 0 -2px 12px rgba(34,32,29,.08);
}
#loginCard { background: var(--lg-surface); border: 1px solid var(--lg-rule); border-radius: var(--lg-radius); }
#msg { border-radius: var(--lg-radius); font-family: var(--lg-body); font-weight: 600; font-size: 12.5px; }
#msg.ok  { background: var(--lg-ok-bg);  color: var(--lg-ok-fg); }
#msg.err { background: var(--lg-err-bg); color: var(--lg-err-fg); }
.opt-preview, .opt-row { font-family: var(--lg-body); font-size: 12.5px; }

/* ==========================================================================
   17b. CLASSLESS / ID-GUARDED LEFTOVERS
   Found by auditing the rendered pages for surviving old-palette colours
   rather than by reading source. Each of these is either behind an id rule
   the class selectors above cannot beat, or has no class at all and is
   reachable only through its inline-style string.
   ========================================================================== */

/* Product-category buttons — the row under "Product Selection". */
.product-btn {
  background: var(--lg-surface) !important;
  border: 1px solid var(--lg-rule) !important;
  border-radius: var(--lg-radius) !important;
  color: var(--lg-ink) !important;
  font-family: var(--lg-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.product-btn:hover {
  background: var(--lg-sunk) !important;
  border-color: var(--lg-mute) !important;
}
.product-btn.active {
  background: var(--lg-red) !important;
  border-color: var(--lg-red) !important;
  color: #fff !important;
}

/* Read-only sheet id — styled upstream by an id rule (specificity 1,0,0). */
#measureSheetId,
#version {
  background: var(--lg-zebra) !important;
  border: 1px solid var(--lg-rule) !important;
  color: var(--lg-mute) !important;
}

/* Required-field asterisks: inline color:#dc3545 on a classless <span>. */
label span[style*="#dc3545"] { color: var(--lg-red) !important; }

/* "Jobsite Address" sub-heading — no id, no class. Its TEXT is load-bearing
   (the workflow gate finds this block by matching /Jobsite Address/i), so
   only presentation is touched here. */
h4[style*="margin-bottom: 15px"] {
  color: var(--lg-red) !important;
  font-family: var(--lg-display) !important;
  font-weight: 600 !important;
}

/* The 2px crimson slab above the Jobsite block, softened to a ledger rule. */
div[style*="border-top: 2px solid #8B0000"] {
  border-top: 1px solid var(--lg-rule) !important;
}

/* PWA install banner — classless button with a full inline navy skin. */
button[style*="background: #2c3e50"] {
  background: var(--lg-ink) !important;
  border-radius: var(--lg-radius) !important;
  font-family: var(--lg-body) !important;
  font-weight: 600 !important;
}

/* Font Awesome is referenced by the service worker but never actually loaded
   on any page, so these <i> elements render as empty inline boxes. Neutralised
   so no stray flat-blue shows through if it is ever added. One carries an
   inline colour, hence the !important. */
i.fas, i.far, i.fa { color: var(--lg-mute) !important; }

/* The two frozen left-hand columns of the review table read as light blue
   upstream; kept visually distinct from the zebra, in the Ledger neutrals. */
.review-table td:first-child,
.review-table td:nth-child(2) {
  background: var(--lg-sunk);
  color: var(--lg-ink);
  font-weight: 600;
}

/* PWA install banner shell — classless, full inline skin. */
div[style*="background: #f8f9fa"][style*="border-top"] {
  background: var(--lg-zebra) !important;
  border-top: 1px solid var(--lg-rule) !important;
  border-radius: var(--lg-radius) !important;
}

/* ==========================================================================
   18. RESPONSIVE — re-declared because a later plain rule beats a media query.
   Everything overridden above that had a 768/480 variant upstream is restated.
   ========================================================================== */

@media (max-width: 768px) {
  .container, .main-content, .projects-wrap, .wrap { padding-left: 14px; padding-right: 14px; }
  .section-header { padding: 11px 14px; }
  .section-content { padding: 13px 14px 15px; }
  .projects-card, .wrap .card { padding: 16px 15px; }
  .toggle-dropdown-group { gap: 12px; }
  .toggle-dropdown-group .dropdown-group select { min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
  .projects-card, .wrap .card { padding: 14px 13px; }
  .section-header { padding: 10px 12px; }
  .section-content { padding: 12px 12px 14px; }
  .accordion-header { padding: 9px 11px; }
}

/* ==========================================================================
   19. PRINT — the upstream @media print block relies on winning against the
   screen rules. Ours is restated here so the theme does not leak into print.
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .form-section, .projects-card, .wrap .card, .accordion-panel {
    border-color: #999;
    box-shadow: none;
  }
  .accordion-header { background: #fff; color: #000; }
  .review-table th { background: #fff; color: #000; }
}