/* ============================================================================
   LPPOA design system
   ----------------------------------------------------------------------------
   Phase 1 of the platform refit. Authored as plain CSS with a token layer: no
   build step, so a deploy never depends on fetching a toolchain (the CI tears
   the stack down BEFORE it builds, so a failed download would mean downtime).

   Load order matters: Bootstrap and Font Awesome load FIRST, this file second.
   Legacy screens still use Bootstrap classes inside {% block content %}; the
   BRIDGE section at the bottom remaps Bootstrap's own custom properties onto
   these tokens so those screens inherit the new palette and type immediately.
   New markup uses the lp- namespace, which cannot collide with Bootstrap.
   Phase 2 converts screens to lp- one at a time; Bootstrap goes away after the
   last one.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
/* Light is the bare :root. Dark is redefined twice: once for the OS setting
   (guarded so an explicit light choice still wins) and once for the explicit
   toggle. Never declare a colour only inside one of those blocks. */
:root {
  --lp-ground:      #F4F3EE;
  --lp-surface:     #FFFFFF;
  --lp-raised:      #FAF9F5;
  --lp-sunk:        #EDEBE3;
  --lp-ink:         #141E1E;
  --lp-ink-2:       #3D4C4B;
  --lp-ink-muted:   #5A6A69;
  --lp-line:        #DEDCD2;
  --lp-line-soft:   #E9E7DE;

  --lp-accent:      #0B5D66;
  --lp-accent-ink:  #FFFFFF;
  --lp-accent-soft: #E3EFF0;
  --lp-bright:      #00919E;
  --lp-rust:        #B5551F;
  --lp-rust-soft:   #F8EBE2;

  --lp-good:        #1C6E44;
  --lp-good-soft:   #E4F0E8;
  --lp-warn:        #9A6A10;
  --lp-warn-soft:   #F8EFDC;
  --lp-crit:        #A8321F;
  --lp-crit-soft:   #F9E7E3;

  /* Chart series — validated for colourblind separation in both themes.
     Order is the CVD-safety mechanism; do not reorder. */
  --lp-s1: #00919E;
  --lp-s2: #BE7A18;
  --lp-s3: #446FCC;
  --lp-s4: #C33A2D;
  --lp-grid: #EAE8DF;

  /* The navigation rail is intentionally dark in both themes, like a gatehouse
     console. Painted explicitly so it never borrows the host ground. */
  --lp-rail-bg:     #0E1A1B;
  --lp-rail-ink:    #DCE6E5;
  --lp-rail-muted:  rgba(255,255,255,.45);
  --lp-rail-hover:  rgba(255,255,255,.07);
  --lp-rail-line:   rgba(255,255,255,.09);

  --lp-shadow-sm: 0 1px 2px rgba(20,30,30,.06), 0 1px 1px rgba(20,30,30,.04);
  --lp-shadow-md: 0 4px 16px rgba(20,30,30,.08), 0 1px 3px rgba(20,30,30,.05);
  --lp-shadow-lg: 0 18px 48px rgba(20,30,30,.14), 0 2px 8px rgba(20,30,30,.06);

  --lp-r-sm: 4px;
  --lp-r-md: 7px;
  --lp-r-lg: 12px;

  --lp-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lp-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --lp-rail-w: 248px;
  --lp-topbar-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lp-ground:      #101615;
    --lp-surface:     #171F1D;
    --lp-raised:      #1E2825;
    --lp-sunk:        #0C1211;
    --lp-ink:         #E7EAE5;
    --lp-ink-2:       #BCC7C4;
    --lp-ink-muted:   #95A4A1;
    --lp-line:        #2B3734;
    --lp-line-soft:   #222D2B;

    --lp-accent:      #4FB9BF;
    --lp-accent-ink:  #07201F;
    --lp-accent-soft: #15302F;
    --lp-bright:      #0FA3B1;
    --lp-rust:        #E08451;
    --lp-rust-soft:   #2E201A;

    --lp-good:        #58B882;
    --lp-good-soft:   #152A20;
    --lp-warn:        #D9A33F;
    --lp-warn-soft:   #2B2315;
    --lp-crit:        #EA7A68;
    --lp-crit-soft:   #2E1A17;

    --lp-s1: #0FA3B1;
    --lp-s2: #BB7400;
    --lp-s3: #5D8CF1;
    --lp-s4: #E75444;
    --lp-grid: #27322F;

    --lp-rail-bg:     #0A1111;

    --lp-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --lp-shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --lp-shadow-lg: 0 18px 48px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
  --lp-ground:      #101615;
  --lp-surface:     #171F1D;
  --lp-raised:      #1E2825;
  --lp-sunk:        #0C1211;
  --lp-ink:         #E7EAE5;
  --lp-ink-2:       #BCC7C4;
  --lp-ink-muted:   #95A4A1;
  --lp-line:        #2B3734;
  --lp-line-soft:   #222D2B;

  --lp-accent:      #4FB9BF;
  --lp-accent-ink:  #07201F;
  --lp-accent-soft: #15302F;
  --lp-bright:      #0FA3B1;
  --lp-rust:        #E08451;
  --lp-rust-soft:   #2E201A;

  --lp-good:        #58B882;
  --lp-good-soft:   #152A20;
  --lp-warn:        #D9A33F;
  --lp-warn-soft:   #2B2315;
  --lp-crit:        #EA7A68;
  --lp-crit-soft:   #2E1A17;

  --lp-s1: #0FA3B1;
  --lp-s2: #BB7400;
  --lp-s3: #5D8CF1;
  --lp-s4: #E75444;
  --lp-grid: #27322F;

  --lp-rail-bg:     #0A1111;

  --lp-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --lp-shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --lp-shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------------ 2. BASE */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--lp-ground);
  color: var(--lp-ink);
  font-family: var(--lp-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .lp-display {
  font-family: var(--lp-display);
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--lp-ink);
}

code, kbd, samp, pre, .lp-mono, .lp-num {
  font-family: var(--lp-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--lp-accent); text-underline-offset: 2px; }
a:hover { color: var(--lp-bright); }

/* Every interactive thing gets a visible focus ring. The old stylesheet had
   none, which made the app unusable by keyboard. */
:focus-visible {
  outline: 2px solid var(--lp-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--lp-accent); color: var(--lp-accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 var(--lp-r-md) 0; font-weight: 600;
}
.lp-skip:focus { left: 0; }

.lp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 3. LAYOUT */
.lp-shell { display: flex; flex-direction: column; min-height: 100vh; }

.lp-topbar {
  position: sticky; top: 0; z-index: 1040;
  height: var(--lp-topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--lp-rail-bg);
  border-bottom: 1px solid var(--lp-rail-line);
}

.lp-brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; flex: none;
}
.lp-brand img {
  height: 30px; width: 30px; border-radius: 50%;
  background: #fff; padding: 2px; flex: none;
}
.lp-brand span {
  font-family: var(--lp-display); font-weight: 700; font-size: 1rem;
  color: #fff; letter-spacing: -.01em;
}

.lp-topbar-spacer { flex: 1; }

.lp-topsearch { flex: 0 1 300px; min-width: 0; }
.lp-topsearch form { display: flex; gap: 0; }
.lp-topsearch input {
  flex: 1; min-width: 0;
  font-family: var(--lp-body); font-size: .85rem;
  color: var(--lp-ink); background: var(--lp-surface);
  border: 1px solid transparent; border-right: none;
  border-radius: var(--lp-r-sm) 0 0 var(--lp-r-sm);
  padding: .38rem .6rem;
}
.lp-topsearch input::placeholder { color: var(--lp-ink-muted); }
.lp-topsearch button {
  border: 1px solid transparent; border-left: none;
  border-radius: 0 var(--lp-r-sm) var(--lp-r-sm) 0;
  background: var(--lp-surface); color: var(--lp-accent);
  padding: 0 .6rem; cursor: pointer;
}
.lp-topsearch button:hover { color: var(--lp-bright); }

.lp-iconbtn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  background: transparent; border: 1px solid var(--lp-rail-line);
  border-radius: var(--lp-r-sm); color: var(--lp-rail-ink);
  cursor: pointer;
}
.lp-iconbtn:hover { background: var(--lp-rail-hover); color: #fff; }

.lp-burger { display: none; }

.lp-user { position: relative; flex: none; }
.lp-user-btn {
  display: flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--lp-rail-line);
  border-radius: var(--lp-r-sm); color: var(--lp-rail-ink);
  font-family: var(--lp-body); font-size: .85rem; font-weight: 500;
  padding: .35rem .6rem; cursor: pointer;
}
.lp-user-btn:hover { background: var(--lp-rail-hover); color: #fff; }
.lp-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 190px; padding: .3rem;
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); box-shadow: var(--lp-shadow-lg);
  z-index: 1100;
}
.lp-menu[hidden] { display: none !important; }
.lp-menu a, .lp-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  font-family: var(--lp-body); font-size: .85rem; text-align: left;
  color: var(--lp-ink-2); text-decoration: none;
  background: transparent; border: none; border-radius: var(--lp-r-sm);
  padding: .45rem .55rem; cursor: pointer;
}
.lp-menu a:hover, .lp-menu button:hover { background: var(--lp-sunk); color: var(--lp-ink); }
.lp-menu .lp-menu-sep { height: 1px; background: var(--lp-line-soft); margin: .3rem 0; }
.lp-menu .lp-danger { color: var(--lp-crit); }

.lp-body { display: flex; flex: 1; min-height: 0; }

.lp-rail {
  width: var(--lp-rail-w); flex: none;
  background: var(--lp-rail-bg); color: var(--lp-rail-ink);
  padding: .85rem .6rem 1.5rem;
  border-right: 1px solid var(--lp-rail-line);
}
.lp-rail-who { padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--lp-rail-line); margin-bottom: .5rem; }
.lp-rail-who .k {
  display: block; font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lp-rail-muted);
}
.lp-rail-who .v { font-size: .88rem; font-weight: 600; color: #fff; }
.lp-rail-who .u { font-size: .74rem; color: var(--lp-rail-muted); font-family: var(--lp-mono); }

.lp-navgroup {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-rail-muted); padding: .9rem .6rem .3rem;
}
.lp-navlink {
  display: flex; align-items: center; gap: .55rem;
  font-size: .86rem; color: rgba(255,255,255,.74); text-decoration: none;
  padding: .45rem .6rem; border-radius: var(--lp-r-sm);
  border-left: 2px solid transparent;
}
.lp-navlink:hover { background: var(--lp-rail-hover); color: #fff; }
.lp-navlink.is-active {
  background: color-mix(in srgb, var(--lp-bright) 20%, transparent);
  border-left-color: var(--lp-bright);
  color: #fff; font-weight: 600;
}
.lp-navlink svg { width: 15px; height: 15px; flex: none; opacity: .9; }

.lp-main { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 2.5rem; }
.lp-main-narrow { max-width: 1240px; margin: 0 auto; }

.lp-foot {
  padding: 1rem 1.5rem; text-align: center;
  font-size: .78rem; color: var(--lp-ink-muted);
  background: var(--lp-sunk); border-top: 1px solid var(--lp-line);
}

/* Page header */
.lp-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.lp-page h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .12rem; }
.lp-page .lp-page-sub { font-size: .85rem; color: var(--lp-ink-muted); }
.lp-page-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ------------------------------------------------------- 4. MOBILE DRAWER */
/* The old shell hid the sidebar on mobile and kept a SECOND, hand-maintained
   copy of the links in the navbar, which had already drifted out of sync. Now
   the rail and the drawer render the same nav data. */
.lp-scrim {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(10,17,17,.55); backdrop-filter: blur(2px);
}
.lp-scrim[hidden] { display: none !important; }

@media (max-width: 991.98px) {
  .lp-burger { display: inline-grid; }
  .lp-topsearch { display: none; }
  .lp-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1060;
    width: min(86vw, var(--lp-rail-w));
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--lp-shadow-lg);
    padding-top: 1rem;
  }
  .lp-rail.is-open { transform: translateX(0); }
  .lp-main { padding: 1rem 1rem 2rem; }
  .lp-rail-close { display: inline-grid !important; position: absolute; top: .6rem; right: .6rem; }
}
@media (min-width: 992px) {
  .lp-rail-close { display: none !important; }
  .lp-scrim { display: none !important; }
}

/* ------------------------------------------------------------ 5. COMPONENTS */
.lp-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  box-shadow: var(--lp-shadow-sm);
}
.lp-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  padding: .75rem 1.05rem; border-bottom: 1px solid var(--lp-line-soft);
}
.lp-card-head h2, .lp-card-head h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.lp-card-head .lp-hint { font-size: .78rem; color: var(--lp-ink-muted); }
.lp-card-body { padding: 1.05rem; }

.lp-tile {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); box-shadow: var(--lp-shadow-sm);
  padding: .75rem .9rem;
}
.lp-tile .k {
  display: block; font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lp-ink-muted); margin-bottom: .2rem;
}
.lp-tile .v {
  font-family: var(--lp-display); font-size: 1.75rem; font-weight: 700;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.lp-tile .d { font-size: .74rem; color: var(--lp-ink-muted); margin-top: .25rem; }
.lp-tile .v.is-good { color: var(--lp-good); }
.lp-tile .v.is-warn { color: var(--lp-warn); }
.lp-tile .v.is-crit { color: var(--lp-crit); }
.lp-tile .v.is-accent { color: var(--lp-accent); }

.lp-grid { display: grid; gap: .7rem; }
.lp-grid-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.lp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--lp-body); font-size: .85rem; font-weight: 500;
  color: var(--lp-ink); background: var(--lp-surface);
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm);
  padding: .45rem .85rem; cursor: pointer; text-decoration: none;
}
.lp-btn:hover { border-color: var(--lp-accent); color: var(--lp-ink); }
.lp-btn svg { width: 15px; height: 15px; }
.lp-btn-primary { background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-accent-ink); }
.lp-btn-primary:hover { filter: brightness(1.1); color: var(--lp-accent-ink); }
.lp-btn-danger { background: var(--lp-rust); border-color: var(--lp-rust); color: #fff; }
.lp-btn-danger:hover { filter: brightness(1.1); color: #fff; }
.lp-btn-ghost { background: transparent; border-color: transparent; color: var(--lp-accent); }
.lp-btn-ghost:hover { background: var(--lp-accent-soft); }
.lp-btn-lg { font-size: .95rem; padding: .65rem 1.25rem; }
.lp-btn-sm { font-size: .78rem; padding: .3rem .6rem; }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.lp-field { display: block; margin-bottom: .85rem; }
.lp-field > .lp-label, .lp-label {
  display: block; font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
  color: var(--lp-ink-muted); margin-bottom: .3rem;
}
.lp-input, .lp-select, .lp-textarea {
  width: 100%; font-family: var(--lp-body); font-size: .88rem;
  color: var(--lp-ink); background: var(--lp-raised);
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm);
  padding: .5rem .7rem;
}
.lp-input:focus, .lp-select:focus, .lp-textarea:focus {
  background: var(--lp-surface); border-color: var(--lp-bright);
  outline: none; box-shadow: 0 0 0 3px var(--lp-accent-soft);
}
.lp-input.lp-mono { font-family: var(--lp-mono); }
.lp-help { font-size: .76rem; color: var(--lp-ink-muted); margin-top: .25rem; }
.lp-error { font-size: .78rem; color: var(--lp-crit); margin-top: .25rem; }

.lp-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: .16rem .46rem;
  border-radius: 3px; white-space: nowrap;
}
.lp-pill-good { background: var(--lp-good-soft); color: var(--lp-good); }
.lp-pill-warn { background: var(--lp-warn-soft); color: var(--lp-warn); }
.lp-pill-crit { background: var(--lp-crit-soft); color: var(--lp-crit); }
.lp-pill-info { background: var(--lp-accent-soft); color: var(--lp-accent); }
.lp-pill-mute { background: var(--lp-sunk); color: var(--lp-ink-muted); }

.lp-table-scroll { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.lp-table th {
  text-align: left; font-family: var(--lp-body); font-weight: 600;
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--lp-ink-muted); background: var(--lp-raised);
  padding: .55rem .75rem; border-bottom: 1px solid var(--lp-line);
  white-space: nowrap;
}
.lp-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--lp-line-soft); }
.lp-table tr:last-child td { border-bottom: none; }
.lp-table tbody tr:hover { background: var(--lp-raised); }
.lp-table .lp-n, .lp-table th.lp-n {
  text-align: right; font-family: var(--lp-mono); font-variant-numeric: tabular-nums;
}
.lp-table tfoot td {
  font-weight: 600; background: var(--lp-raised);
  border-top: 1px solid var(--lp-line); border-bottom: none;
}

.lp-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--lp-ink-muted);
}
.lp-empty svg { width: 28px; height: 28px; opacity: .5; margin-bottom: .5rem; }

/* Toasts — flash messages used to be dismissible alerts stacked above the
   content, which shifted the page as they auto-closed. */
.lp-toasts {
  position: fixed; z-index: 1200; top: calc(var(--lp-topbar-h) + 12px); right: 12px;
  display: flex; flex-direction: column; gap: .5rem;
  width: min(380px, calc(100vw - 24px));
}
.lp-toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--lp-surface); color: var(--lp-ink);
  border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-ink-muted);
  border-radius: var(--lp-r-md); box-shadow: var(--lp-shadow-lg);
  padding: .7rem .8rem; font-size: .85rem;
  animation: lp-toast-in .18s ease;
}
@keyframes lp-toast-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.lp-toast-success { border-left-color: var(--lp-good); }
.lp-toast-danger  { border-left-color: var(--lp-crit); }
.lp-toast-warning { border-left-color: var(--lp-warn); }
.lp-toast-info    { border-left-color: var(--lp-accent); }
.lp-toast .lp-toast-msg { flex: 1; min-width: 0; }
.lp-toast .lp-toast-x {
  background: transparent; border: none; cursor: pointer; flex: none;
  color: var(--lp-ink-muted); font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.lp-toast .lp-toast-x:hover { color: var(--lp-ink); }

/* Progress */
.lp-prog { height: 7px; background: var(--lp-sunk); border-radius: 20px; overflow: hidden; }
.lp-prog > i { display: block; height: 100%; background: var(--lp-accent); border-radius: 20px; transition: width .2s; }

/* ------------------------------------------------- 6. SMALL UTILITY LAYER */
.lp-stack { display: flex; flex-direction: column; gap: .7rem; }
.lp-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.lp-row-end { justify-content: flex-end; }
.lp-between { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lp-grow { flex: 1; min-width: 0; }
.lp-muted { color: var(--lp-ink-muted); }
.lp-small { font-size: .8rem; }
.lp-strong { font-weight: 600; }
.lp-center { text-align: center; }
.lp-right { text-align: right; }
.lp-nowrap { white-space: nowrap; }
.lp-mt { margin-top: .8rem; } .lp-mt-lg { margin-top: 1.5rem; }
.lp-mb { margin-bottom: .8rem; } .lp-mb-lg { margin-bottom: 1.5rem; }
.lp-hide { display: none !important; }

/* ====================================================== 7. BOOTSTRAP BRIDGE */
/* Legacy screens still use Bootstrap classes. Rather than restyle each one,
   remap Bootstrap's own custom properties onto these tokens, so every legacy
   card/button/table/badge picks up the new palette and typography at once.
   Bootstrap 5.3 also honours data-bs-theme, which the theme script sets
   alongside data-theme, so legacy components follow dark mode too.
   This whole section is deleted when the last screen leaves Bootstrap. */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  --bs-body-font-family: var(--lp-body);
  --bs-body-font-size: 15px;
  --bs-body-color: var(--lp-ink);
  --bs-body-bg: var(--lp-ground);
  --bs-emphasis-color: var(--lp-ink);
  --bs-secondary-color: var(--lp-ink-muted);
  --bs-secondary-bg: var(--lp-sunk);
  --bs-tertiary-bg: var(--lp-raised);
  --bs-border-color: var(--lp-line);
  --bs-border-radius: var(--lp-r-md);
  --bs-border-radius-sm: var(--lp-r-sm);
  --bs-primary: var(--lp-accent);
  --bs-link-color: var(--lp-accent);
  --bs-link-hover-color: var(--lp-bright);
  --bs-success: var(--lp-good);
  --bs-danger: var(--lp-crit);
  --bs-warning: var(--lp-warn);
  --bs-info: var(--lp-bright);
  --bs-font-monospace: var(--lp-mono);
}

/* Bootstrap's .btn-primary / .bg-primary read the -rgb triplets, not --bs-primary. */
:root { --bs-primary-rgb: 11,93,102; --bs-success-rgb: 28,110,68; --bs-danger-rgb: 168,50,31; --bs-warning-rgb: 154,106,16; --bs-info-rgb: 0,145,158; }
:root[data-theme="dark"] { --bs-primary-rgb: 79,185,191; --bs-success-rgb: 88,184,130; --bs-danger-rgb: 234,122,104; --bs-warning-rgb: 217,163,63; --bs-info-rgb: 15,163,177; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bs-primary-rgb: 79,185,191; --bs-success-rgb: 88,184,130; --bs-danger-rgb: 234,122,104; --bs-warning-rgb: 217,163,63; --bs-info-rgb: 15,163,177; }
}

/* Legacy headings/cards shouldn't look alien next to lp- components. */
.card, .card-custom {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  box-shadow: var(--lp-shadow-sm);
}
.card-custom { padding: 1.05rem; }
.table > :not(caption) > * > * { background-color: transparent; color: var(--lp-ink); }
.table th { color: var(--lp-ink-muted); }
.btn-primary-custom {
  background: var(--lp-accent); border: 1px solid var(--lp-accent);
  color: var(--lp-accent-ink); border-radius: var(--lp-r-sm);
  padding: .45rem .85rem; font-weight: 500;
}
.btn-primary-custom:hover { filter: brightness(1.1); color: var(--lp-accent-ink); }
.btn-outline-custom {
  background: transparent; border: 1px solid var(--lp-accent);
  color: var(--lp-accent); border-radius: var(--lp-r-sm);
  padding: .45rem .85rem; font-weight: 500;
}
.btn-outline-custom:hover { background: var(--lp-accent); color: var(--lp-accent-ink); }
.form-control-custom {
  width: 100%; font-family: var(--lp-body); font-size: .88rem;
  color: var(--lp-ink); background: var(--lp-raised);
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); padding: .5rem .7rem;
}
.form-control-custom:focus {
  background: var(--lp-surface); border-color: var(--lp-bright);
  outline: none; box-shadow: 0 0 0 3px var(--lp-accent-soft);
}
.text-danger-custom { color: var(--lp-crit); font-weight: 600; }
.text-success-custom { color: var(--lp-good); font-weight: 600; }

/* ================================================== 8. GATE CHECK-IN SCREEN */
/* Read at arm's length, one-handed, in sunlight. Type is deliberately large
   and the verdict carries colour + icon + word + chip, never colour alone. */
.lp-scanbar {
  display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.lp-scan-input { font-size: 1.15rem !important; padding: .6rem .8rem !important; letter-spacing: .02em; }
.lp-scan-entries { flex: none; }
.lp-scan-go { flex: none; }
@media (max-width: 575.98px) {
  .lp-scanbar { gap: .5rem; }
  .lp-scan-go { width: 100%; }
}

.lp-stepper {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm);
  background: var(--lp-surface);
}
.lp-stepper button {
  font-family: var(--lp-mono); font-size: 1.1rem; line-height: 1;
  width: 38px; height: 40px; flex: none; cursor: pointer;
  border: none; background: var(--lp-raised); color: var(--lp-ink);
}
.lp-stepper button:hover { background: var(--lp-accent-soft); color: var(--lp-accent); }
.lp-stepper input {
  font-family: var(--lp-mono); font-size: 1rem; text-align: center;
  width: 46px; height: 40px; border: none; background: var(--lp-surface);
  color: var(--lp-ink); font-variant-numeric: tabular-nums;
}
.lp-stepper input:focus { outline: none; }

.lp-verdict {
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-md);
  overflow: hidden; box-shadow: var(--lp-shadow-md);
}
.lp-fade { animation: lp-fade-in .22s ease-out; }
@keyframes lp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lp-verdict-band {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
}
.lp-verdict-band.is-ok   { background: var(--lp-good); color: #fff; }
.lp-verdict-band.is-hold { background: var(--lp-warn); color: #241A05; }
.lp-verdict-band.is-no   { background: var(--lp-crit); color: #fff; }
.lp-verdict-mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.lp-verdict-band.is-hold .lp-verdict-mark { background: rgba(0,0,0,.14); }
.lp-verdict-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-verdict-txt .big {
  font-family: var(--lp-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.025em; line-height: 1.1;
}
.lp-verdict-txt .small { font-size: .85rem; opacity: .92; }
/* The chip sits on a white plate in BOTH themes, so its ink is pinned to the
   light-mode semantic values rather than the theme tokens. */
.lp-verdict-stat {
  flex: none; font-family: var(--lp-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .06em; background: #fff; color: #1C6E44;
  padding: .32rem .75rem; border-radius: 4px;
}
.lp-verdict-band.is-hold .lp-verdict-stat { color: #7A5309; }
.lp-verdict-band.is-no .lp-verdict-stat { color: #A8321F; }

.lp-verdict-body {
  display: grid; grid-template-columns: 1.4fr 1fr;
  background: var(--lp-surface);
}
.lp-verdict-body > div { padding: 1.05rem 1.15rem; }
.lp-verdict-body > div:first-child { border-right: 1px solid var(--lp-line-soft); }
.lp-verdict-side { background: var(--lp-raised); }
@media (max-width: 767.98px) {
  .lp-verdict-body { grid-template-columns: 1fr; }
  .lp-verdict-body > div:first-child { border-right: none; border-bottom: 1px solid var(--lp-line-soft); }
}

.lp-member-name {
  font-family: var(--lp-display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .1rem;
}
.lp-member-id { font-family: var(--lp-mono); font-size: .82rem; color: var(--lp-ink-muted); margin-bottom: .9rem; }

.lp-kv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem .9rem; margin: 0; }
.lp-kv .full { grid-column: 1 / -1; }
.lp-kv dt {
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--lp-ink-muted); margin-bottom: .1rem;
}
.lp-kv dd { margin: 0; font-size: .92rem; color: var(--lp-ink); }

.lp-activity { display: flex; flex-direction: column; }
.lp-activity-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--lp-line-soft);
}
.lp-activity-row:last-child { border-bottom: none; }
.lp-activity-row .when { font-family: var(--lp-mono); font-size: .8rem; color: var(--lp-ink); }
.lp-activity-row .who { font-size: .72rem; color: var(--lp-ink-muted); }
.lp-ent {
  font-family: var(--lp-mono); font-size: .72rem; color: var(--lp-ink-2);
  background: var(--lp-sunk); border-radius: 3px; padding: .1rem .38rem;
}

/* ===================================================== 9. AUTH SCREENS */
.lp-auth {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem; align-items: start;
  max-width: 820px; margin: 2rem auto 0;
}
.lp-auth-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem; }
.lp-auth-sub { font-size: .88rem; color: var(--lp-ink-muted); margin: 0 0 1.4rem; }
.lp-auth-aside-title { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }
.lp-auth-side { background: var(--lp-raised); }
@media (max-width: 719.98px) {
  .lp-auth { grid-template-columns: 1fr; margin-top: 1rem; }
}

/* A narrow single-column form page (signup, password reset, change password). */
.lp-form-page { max-width: 480px; margin: 2rem auto 0; }
.lp-form-page.is-wide { max-width: 640px; }

/* ===================================================== 10. TABS & PANELS */
.lp-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.lp-tab {
  font-family: var(--lp-body); font-size: .84rem; font-weight: 500; cursor: pointer;
  color: var(--lp-ink-2); background: var(--lp-surface);
  border: 1px solid var(--lp-line); border-radius: 20px; padding: .4rem .9rem;
}
.lp-tab:hover { border-color: var(--lp-accent); color: var(--lp-ink); }
.lp-tab[aria-selected="true"] {
  background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-accent-ink);
}
.lp-panel[hidden] { display: none !important; }

/* ===================================================== 11. CHART CHROME */
.lp-legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .76rem; color: var(--lp-ink-2); }
.lp-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.lp-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; flex: none; }

/* ===================================================== 12. MODAL DIALOG */
.lp-modal-scrim {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(10,17,17,.55); backdrop-filter: blur(2px);
}
.lp-modal {
  width: min(460px, 100%);
  background: var(--lp-surface); color: var(--lp-ink);
  border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-lg); padding: 1.25rem;
  animation: lp-modal-in .16s ease-out;
}
@keyframes lp-modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.lp-modal-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; }
.lp-modal-body { font-size: .88rem; color: var(--lp-ink-2); margin: 0 0 1rem; }
.lp-modal .lp-row-end { margin-top: .4rem; }

/* ============================================ 13. INVOICE MANAGER SCREEN */
.lp-steps {
  display: flex; overflow: hidden; margin-bottom: 1rem;
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
}
.lp-step {
  flex: 1; min-width: 0; padding: .6rem .85rem;
  font-size: .8rem; color: var(--lp-ink-muted);
  border-right: 1px solid var(--lp-line);
}
.lp-step:last-child { border-right: none; }
.lp-step .sn { display: block; font-family: var(--lp-mono); font-size: .66rem; opacity: .8; }
.lp-step.is-done { background: var(--lp-good-soft); color: var(--lp-good); }
.lp-step.is-now { background: var(--lp-accent-soft); color: var(--lp-accent); font-weight: 600; }

.lp-rules { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.lp-rule {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 500; padding: .22rem .62rem; border-radius: 20px;
  background: var(--lp-good-soft); color: var(--lp-good);
}
.lp-rule.is-neg { background: var(--lp-crit-soft); color: var(--lp-crit); }

.lp-statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px,1fr)); gap: .5rem; margin: .85rem 0 0; }
.lp-statbar > div {
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-sm); padding: .5rem .65rem;
}
.lp-statbar .k { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-ink-muted); }
.lp-statbar .v { font-family: var(--lp-mono); font-size: 1.05rem; font-weight: 500; }
.lp-statbar .v.is-warn { color: var(--lp-warn); }
.lp-statbar .v.is-good { color: var(--lp-good); }
.lp-statbar .v.is-crit { color: var(--lp-crit); }

.lp-danger-zone {
  border: 1px solid var(--lp-rust); border-radius: var(--lp-r-md);
  background: var(--lp-rust-soft); padding: 1rem 1.1rem;
}
.lp-danger-zone h2 { font-size: .98rem; font-weight: 700; color: var(--lp-rust); margin: 0 0 .3rem; }
.lp-danger-zone p { font-size: .84rem; color: var(--lp-ink-2); margin: 0 0 .8rem; }

/* Typeahead results for the invoice search. */
.lp-typeahead { position: relative; }
.lp-results {
  position: absolute; z-index: 1100; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); box-shadow: var(--lp-shadow-lg);
}
.lp-results[hidden] { display: none !important; }
.lp-result {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; border-bottom: 1px solid var(--lp-line-soft);
  padding: .55rem .7rem; font-family: var(--lp-body); font-size: .84rem; color: var(--lp-ink);
}
.lp-result:last-child { border-bottom: none; }
.lp-result:hover, .lp-result:focus { background: var(--lp-accent-soft); }
.lp-result .top { display: flex; justify-content: space-between; gap: .6rem; }
.lp-result .top b { font-weight: 600; }
.lp-result .top span { font-family: var(--lp-mono); font-size: .78rem; color: var(--lp-accent); }
.lp-result .sub { font-size: .74rem; color: var(--lp-ink-muted); }

/* Invoice line items. */
.lp-items { display: flex; flex-direction: column; border: 1px solid var(--lp-line); border-radius: var(--lp-r-md); overflow: hidden; }
.lp-item {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem .85rem; border-bottom: 1px solid var(--lp-line-soft); background: var(--lp-surface);
}
.lp-item:last-child { border-bottom: none; }
.lp-item .nm { font-size: .9rem; font-weight: 500; }
.lp-item .tag { font-size: .7rem; color: var(--lp-ink-muted); }
.lp-item .amt { font-family: var(--lp-mono); font-size: 1rem; font-weight: 500; text-align: right; }

.lp-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: .5rem; }
.lp-money > div {
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-sm); padding: .6rem .7rem; text-align: center;
}
.lp-money .k { display: block; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-ink-muted); }
.lp-money .v { font-family: var(--lp-mono); font-size: 1.15rem; font-weight: 500; }
.lp-money .v.is-good { color: var(--lp-good); }
.lp-money .v.is-accent { color: var(--lp-accent); }

.lp-notes {
  background: var(--lp-warn-soft); border: 1px solid var(--lp-warn);
  border-radius: var(--lp-r-sm); padding: .6rem .75rem; font-size: .84rem;
  white-space: pre-wrap; color: var(--lp-ink);
}

/* ============================================ 14. STATE & FORM PAGE BITS */
.lp-state-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: .9rem;
}
.lp-state-mark.is-good { background: var(--lp-good-soft); color: var(--lp-good); }
.lp-state-mark.is-crit { background: var(--lp-crit-soft); color: var(--lp-crit); }
.lp-state-mark.is-warn { background: var(--lp-warn-soft); color: var(--lp-warn); }
.lp-state-mark.is-info { background: var(--lp-accent-soft); color: var(--lp-accent); }

.lp-ticket-ref {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); padding: .7rem 1.4rem; margin: .4rem 0 1.2rem;
}
.lp-ticket-no { font-family: var(--lp-mono); font-size: 1.5rem; font-weight: 500; color: var(--lp-accent); }

.lp-reqs {
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-sm); padding: .7rem .85rem;
}
.lp-reqs ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--lp-ink-2); }
.lp-reqs li { margin-bottom: .15rem; }
.lp-reqs li::marker { color: var(--lp-bright); }

/* ===================================================== 15. CALLOUT */
.lp-callout {
  display: flex; gap: .6rem; align-items: flex-start;
  border-radius: var(--lp-r-sm); padding: .75rem .9rem;
  font-size: .85rem; color: var(--lp-ink); border-left: 3px solid var(--lp-ink-muted);
  background: var(--lp-raised);
}
.lp-callout a { font-weight: 600; }
.lp-callout.is-warn { background: var(--lp-warn-soft); border-left-color: var(--lp-warn); }
.lp-callout.is-crit { background: var(--lp-crit-soft); border-left-color: var(--lp-crit); }
.lp-callout.is-info { background: var(--lp-accent-soft); border-left-color: var(--lp-accent); }
.lp-callout.is-good { background: var(--lp-good-soft); border-left-color: var(--lp-good); }
.lp-callout-mark { flex: none; display: grid; place-items: center; margin-top: .1rem; }
.lp-callout.is-warn .lp-callout-mark { color: var(--lp-warn); }
.lp-callout.is-crit .lp-callout-mark { color: var(--lp-crit); }
.lp-callout.is-info .lp-callout-mark { color: var(--lp-accent); }
.lp-callout.is-good .lp-callout-mark { color: var(--lp-good); }

/* ============================================ 16. STATUS CARDS & SCANNER */
.lp-status-card { border-top: 3px solid var(--lp-ink-muted); }
.lp-status-card.is-paid { border-top-color: var(--lp-good); }
.lp-status-card.is-unpaid { border-top-color: var(--lp-crit); }

.lp-scanner {
  background: var(--lp-sunk); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); padding: .75rem; text-align: center;
}
.lp-scanner #qr-reader { width: 100%; max-width: 100%; margin: 0 auto; }
.lp-scanner #qr-reader video { border-radius: var(--lp-r-sm); max-width: 100%; height: auto; }

/* ============================================ 17. TICKET THREAD */
/* The public ticket page: submit and look up, on two panes. It stays narrow
   while only the form is showing and widens for the lookup pane, which puts a
   thread beside the search box. */
.lp-ticket-center { max-width: 1120px; margin: 0 auto; }
.lp-ticket-center > .lp-tabs { justify-content: center; }
.lp-ticket-center-head { text-align: center; margin-bottom: 1.1rem; }
.lp-ticket-center #tp-submit { max-width: 640px; margin: 0 auto; }

.lp-ticket-page {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  gap: 1rem; align-items: start;
}
@media (max-width: 879.98px) { .lp-ticket-page { grid-template-columns: 1fr; } }
.lp-ticket-lookup .lp-card { position: sticky; top: calc(var(--lp-topbar-h) + 1rem); }
@media (max-width: 879.98px) { .lp-ticket-lookup .lp-card { position: static; } }

.lp-quote {
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-accent); border-radius: 0 var(--lp-r-sm) var(--lp-r-sm) 0;
  padding: .75rem .9rem; font-size: .9rem; white-space: pre-wrap;
}

.lp-thread {
  display: flex; flex-direction: column; gap: .6rem;
  max-height: 420px; overflow-y: auto; padding: .2rem;
}
.lp-msg {
  max-width: 82%; border-radius: var(--lp-r-md); padding: .6rem .75rem;
  border: 1px solid var(--lp-line); background: var(--lp-raised);
}
.lp-msg.is-staff { align-self: flex-end; background: var(--lp-accent-soft); border-color: var(--lp-accent); }
.lp-msg.is-owner { align-self: flex-start; }
.lp-msg-head {
  display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
  font-size: .76rem; margin-bottom: .2rem;
}
.lp-msg-head strong { font-weight: 600; }
.lp-msg-head span { color: var(--lp-ink-muted); font-size: .72rem; }
.lp-msg-body { font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.lp-reply {
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); padding: .75rem .85rem;
}

/* ===================================================== 18. VENDOR CARDS */
.lp-vendor-cat {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--lp-accent);
}
.lp-vendor-name {
  font-family: var(--lp-display) !important; font-size: 1.05rem !important;
  font-weight: 600 !important; background: transparent !important;
  border-color: transparent !important; padding-left: 0 !important;
}
.lp-vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.lp-vendor-grid .full { grid-column: 1 / -1; }
/* Read mode: inputs look like text until Edit is pressed. */
.lp-vendor input[readonly], .lp-vendor textarea[readonly] {
  background: transparent; border-color: transparent; padding-left: 0; cursor: default;
}
.lp-vendor.is-editing .lp-card { border-color: var(--lp-accent); box-shadow: 0 0 0 3px var(--lp-accent-soft); }
.lp-vendor.is-editing input, .lp-vendor.is-editing textarea {
  background: var(--lp-surface); border-color: var(--lp-line); padding-left: .7rem;
}
.lp-vendor.is-editing .lp-vendor-name { padding-left: .7rem !important; }

/* ===================================================== 19. PRINTED REPORT */
.lp-report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--lp-line); padding-bottom: 1rem; margin-bottom: 1.2rem;
}
.lp-report-org {
  font-family: var(--lp-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--lp-accent); margin: 0;
}
.lp-report-sub { font-size: .9rem; color: var(--lp-ink-muted); }
.lp-report-filter {
  display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap;
  background: var(--lp-raised); border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md); padding: .75rem .85rem;
}
.lp-monthrow td {
  background: var(--lp-sunk); font-family: var(--lp-display);
  font-weight: 600; font-size: .85rem;
}
.lp-subtotal td {
  background: var(--lp-raised); font-size: .8rem; color: var(--lp-ink-muted);
  border-bottom: 2px solid var(--lp-line) !important;
}

/* Highlighted table row (e.g. the busiest month). */
.lp-table tr.lp-rowmark td { background: var(--lp-good-soft); }
.lp-table tr.lp-rowmark td:first-child { box-shadow: inset 3px 0 0 var(--lp-good); }
/* Keep headers visible in a vertically scrolling table. */
.lp-table-scroll[style*="overflow-y"] thead th { position: sticky; top: 0; z-index: 2; }