/* =====================================================================
   Revamp Leaflet Platform - design system
   Loaded by every page in all four areas (public site, business portal,
   distributor portal, platform admin).

   Everything here is a token or a shared component. Page-specific styling
   belongs in that page. If two pages need the same rule, it moves here.

   Naming: .lp-<block>__<element>--<modifier>
   ===================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────
   Brand colours are deliberately restrained: one ink-navy for structure,
   one green for action. Per-tenant branding overrides --lp-brand and
   --lp-brand-strong only, so a customer's colour can never make text
   unreadable against a surface.                                        */
:root {
    /* Surfaces */
    --lp-bg:            #f6f7f9;
    --lp-surface:       #ffffff;
    --lp-surface-2:     #f1f3f6;
    --lp-surface-3:     #e8ebf0;
    --lp-border:        #dfe3ea;
    --lp-border-strong: #c7cdd8;

    /* Text - all pairings below meet WCAG AA on --lp-surface */
    --lp-text:    #10151f;
    --lp-text-2:  #4a5262;
    --lp-text-3:  #737d90;
    --lp-text-inverse: #ffffff;

    /* Brand */
    --lp-brand:        #12796a;
    --lp-brand-strong: #0d5c50;
    --lp-brand-soft:   #e6f4f1;
    --lp-brand-border: #a8d8d0;

    /* Accent used for the public site only */
    --lp-ink:       #0f1b2d;
    --lp-ink-soft:  #1b2c45;

    /* Status tones - each has a text, background and border triple so a
       badge, an alert and a table row can all use the same tone name. */
    --lp-green:  #15803d;  --lp-green-bg:  #eefbf2;  --lp-green-border:  #b7e9c6;
    --lp-amber:  #a15c07;  --lp-amber-bg:  #fff8ea;  --lp-amber-border:  #f3d9a4;
    --lp-red:    #b42318;  --lp-red-bg:    #fef3f2;  --lp-red-border:    #f5c6c2;
    --lp-blue:   #175cd3;  --lp-blue-bg:   #eff6ff;  --lp-blue-border:   #bfd7fd;
    --lp-indigo: #4335b7;  --lp-indigo-bg: #f0eefc;  --lp-indigo-border: #c9c2f0;
    --lp-grey:   #4a5262;  --lp-grey-bg:   #f1f3f6;  --lp-grey-border:   #dfe3ea;

    /* Typography - system stack, so nothing is fetched before first paint */
    --lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --lp-text-xs: 0.75rem;
    --lp-text-sm: 0.8125rem;
    --lp-text-base: 0.9375rem;   /* 15px - comfortable on mobile, never tiny */
    --lp-text-lg: 1.0625rem;
    --lp-text-xl: 1.25rem;
    --lp-text-2xl: 1.5rem;
    --lp-text-3xl: 1.875rem;

    /* Spacing - a 4px scale */
    --lp-space-1: 4px;   --lp-space-2: 8px;   --lp-space-3: 12px;
    --lp-space-4: 16px;  --lp-space-5: 20px;  --lp-space-6: 24px;
    --lp-space-8: 32px;  --lp-space-10: 40px; --lp-space-12: 48px;
    --lp-space-16: 64px;

    /* Radius, shadow, layout */
    --lp-radius-sm: 6px;
    --lp-radius:    10px;
    --lp-radius-lg: 14px;
    --lp-shadow-sm: 0 1px 2px rgba(16, 21, 31, .06);
    --lp-shadow:    0 1px 3px rgba(16, 21, 31, .07), 0 6px 20px rgba(16, 21, 31, .05);
    --lp-shadow-lg: 0 12px 40px rgba(16, 21, 31, .12);
    --lp-nav-width: 244px;
    --lp-topbar-h:  56px;
    --lp-tap:       44px;   /* minimum interactive target */
    --lp-content-max: 1200px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--lp-font);
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-text);
    background: var(--lp-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--lp-space-3); line-height: 1.25; font-weight: 650; letter-spacing: -0.011em; }
h1 { font-size: var(--lp-text-3xl); }
h2 { font-size: var(--lp-text-2xl); }
h3 { font-size: var(--lp-text-xl); }
h4 { font-size: var(--lp-text-lg); }
p  { margin: 0 0 var(--lp-space-4); }
img, svg { max-width: 100%; }

a { color: var(--lp-brand-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--lp-brand); }

/* Focus is always visible. Never remove this without a replacement. */
:focus-visible {
    outline: 2px solid var(--lp-brand);
    outline-offset: 2px;
    border-radius: var(--lp-radius-sm);
}

/* ── Accessibility utilities ───────────────────────────────────────── */
.lp-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp-skip-link {
    position: absolute; left: var(--lp-space-2); top: -60px; z-index: 100;
    padding: var(--lp-space-3) var(--lp-space-4);
    background: var(--lp-surface); border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow); transition: top .15s;
}
.lp-skip-link:focus { top: var(--lp-space-2); }

/* ── Layout ────────────────────────────────────────────────────────── */
/* The hidden attribute must beat any display a class sets. A browser's own
   [hidden] rule is a user-agent style, so an author rule like
   .lp-btn { display: inline-flex } silently wins and the element stays on
   screen. That left the map editor showing Draw, Finish, Undo and Discard all
   at once, and the tracker showing Start, Pause, Resume and Finish together,
   because every one of those is toggled through element.hidden. */
[hidden] { display: none !important; }

.lp-container { width: 100%; max-width: var(--lp-content-max); margin: 0 auto; padding: 0 var(--lp-space-4); }
.lp-container--narrow { max-width: 760px; }
.lp-stack > * + * { margin-top: var(--lp-space-4); }
.lp-row { display: flex; gap: var(--lp-space-3); align-items: center; flex-wrap: wrap; }
.lp-row--between { justify-content: space-between; }
.lp-row--end { justify-content: flex-end; }
/* auto-fit, so a grid of four tiles becomes two then one as the screen
   narrows without a media query per breakpoint.

   One trap: auto-fit only collapses a track when NOTHING occupies it. A
   child with grid-column:1/-1 occupies every track, so none can collapse
   and the remaining items are left in narrow columns with dead space beside
   them. Put full-width content outside the grid, not spanning it. */
.lp-grid { display: grid; gap: var(--lp-space-4); }
.lp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Ticked list of what a plan includes. The public pricing page has its own
   copy as .lp-price__list in site.css, which the app shell never loads -
   using that class on a screen inside /app rendered a bare bullet list. */
.lp-feature-list { list-style: none; margin: var(--lp-space-4) 0; padding: 0; display: grid; gap: var(--lp-space-2); }
.lp-feature-list li { display: flex; gap: var(--lp-space-2); font-size: var(--lp-text-sm); color: var(--lp-text-2); }
.lp-feature-list li::before { content: "\2713"; color: var(--lp-brand); font-weight: 700; flex: none; }

.lp-page { padding: var(--lp-space-6) 0 var(--lp-space-16); }
.lp-page__header { margin-bottom: var(--lp-space-6); }
.lp-page__title { margin: 0; }
.lp-page__lede { color: var(--lp-text-2); margin: var(--lp-space-1) 0 0; }

/* Compact, keyboard-accessible help attached to a heading. */
.lp-title-with-info { display: flex; align-items: center; gap: var(--lp-space-2); min-width: 0; }
.lp-info-popover { position: relative; flex: none; }
.lp-info-popover > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    list-style: none; cursor: pointer;
    border: 1px solid var(--lp-border-strong); border-radius: 50%;
    background: var(--lp-surface); color: var(--lp-brand-strong);
    font-size: var(--lp-text-sm); font-weight: 750; font-family: Georgia, serif;
}
.lp-info-popover > summary::-webkit-details-marker { display: none; }
.lp-info-popover > summary:hover,
.lp-info-popover > summary:focus-visible,
.lp-info-popover[open] > summary {
    border-color: var(--lp-brand); background: var(--lp-brand-soft); outline: none;
}
.lp-info-popover > summary:focus-visible { box-shadow: 0 0 0 3px var(--lp-brand-soft); }
.lp-info-popover__panel {
    position: absolute; z-index: 600; top: calc(100% + var(--lp-space-2)); left: 0;
    width: min(390px, calc(100vw - 48px)); padding: var(--lp-space-4);
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg);
    background: var(--lp-surface); box-shadow: var(--lp-shadow);
    color: var(--lp-text-2); font-size: var(--lp-text-sm); line-height: 1.55;
}
.lp-info-popover__panel h2,
.lp-info-popover__panel h3 { margin: 0 0 var(--lp-space-2); color: var(--lp-text); font-size: var(--lp-text-base); }
.lp-info-popover__panel p { margin: 0 0 var(--lp-space-3); }
.lp-info-popover__panel p:last-child { margin-bottom: 0; }

/* A large choice panel that stays as one compact row until it is needed. */
.lp-disclosure > summary { list-style: none; cursor: pointer; }
.lp-disclosure > summary::-webkit-details-marker { display: none; }
.lp-disclosure__summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-3);
    padding: var(--lp-space-3) var(--lp-space-5);
}
.lp-disclosure__summary > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.lp-disclosure__action {
    display: inline-flex; align-items: center; min-height: 34px;
    padding: var(--lp-space-1) var(--lp-space-3); border-radius: var(--lp-radius);
    background: var(--lp-brand-soft); color: var(--lp-brand-strong);
    font-size: var(--lp-text-sm); font-weight: 650;
}
.lp-disclosure[open] > .lp-disclosure__summary { border-bottom: 1px solid var(--lp-border); }
.lp-disclosure__summary:hover .lp-disclosure__action,
.lp-disclosure__summary:focus-visible .lp-disclosure__action { background: var(--lp-brand); color: #fff; }
.lp-disclosure__summary:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

/* ── Cards ─────────────────────────────────────────────────────────── */
.lp-card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-sm);
}
.lp-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-3);
    padding: var(--lp-space-4) var(--lp-space-5);
    border-bottom: 1px solid var(--lp-border);
}
.lp-card__title { margin: 0; font-size: var(--lp-text-lg); }
.lp-card__body { padding: var(--lp-space-5); }
.lp-card__footer {
    padding: var(--lp-space-4) var(--lp-space-5);
    border-top: 1px solid var(--lp-border);
    background: var(--lp-surface-2);
    border-radius: 0 0 var(--lp-radius-lg) var(--lp-radius-lg);
}

/* Metric tile for dashboards. Kept plain: a number, a label, one optional
   trend line. No sparklines, no gradients. */
.lp-stat {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: var(--lp-space-4) var(--lp-space-5);
}
.lp-stat__label { font-size: var(--lp-text-sm); color: var(--lp-text-2); margin: 0 0 var(--lp-space-1); }
.lp-stat__value { font-size: var(--lp-text-2xl); font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.lp-stat__meta  { font-size: var(--lp-text-sm); color: var(--lp-text-3); margin-top: var(--lp-space-1); }
.lp-stat__meta--up   { color: var(--lp-green); }
.lp-stat__meta--down { color: var(--lp-red); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-space-2);
    min-height: var(--lp-tap);
    padding: var(--lp-space-2) var(--lp-space-5);
    font: inherit; font-weight: 600; line-height: 1.2;
    color: var(--lp-text);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.lp-btn:hover { background: var(--lp-surface-2); color: var(--lp-text); }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.lp-btn--primary {
    color: var(--lp-text-inverse);
    background: var(--lp-brand);
    border-color: var(--lp-brand);
}
.lp-btn--primary:hover { background: var(--lp-brand-strong); border-color: var(--lp-brand-strong); color: var(--lp-text-inverse); }

.lp-btn--danger { color: var(--lp-red); border-color: var(--lp-red-border); background: var(--lp-red-bg); }
.lp-btn--danger:hover { background: #fde9e7; }
.lp-btn--warning { color: var(--lp-amber); border-color: var(--lp-amber-border); background: var(--lp-amber-bg); }
.lp-btn--warning:hover { background: #fff0ce; }

.lp-btn--ghost { background: transparent; border-color: transparent; }
.lp-btn--ghost:hover { background: var(--lp-surface-2); }

.lp-btn--sm { min-height: 34px; padding: var(--lp-space-1) var(--lp-space-3); font-size: var(--lp-text-sm); }
.lp-btn--lg { min-height: 52px; padding: var(--lp-space-3) var(--lp-space-8); font-size: var(--lp-text-lg); }
.lp-btn--block { display: flex; width: 100%; }

/* The distributor's primary action while walking. Deliberately huge. */
.lp-btn--action {
    display: flex; width: 100%;
    min-height: 68px;
    font-size: 1.15rem;
    border-radius: var(--lp-radius-lg);
}

/* ── Forms ─────────────────────────────────────────────────────────── */
.lp-field { margin-bottom: var(--lp-space-4); }
.lp-label {
    display: block; margin-bottom: var(--lp-space-1);
    font-size: var(--lp-text-sm); font-weight: 600; color: var(--lp-text-2);
}
.lp-label__optional { font-weight: 400; color: var(--lp-text-3); }

.lp-input, .lp-select, .lp-textarea {
    display: block; width: 100%;
    min-height: var(--lp-tap);
    padding: var(--lp-space-2) var(--lp-space-3);
    font: inherit; color: var(--lp-text);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius);
}
.lp-input:focus, .lp-select:focus, .lp-textarea:focus {
    border-color: var(--lp-brand);
    outline: 2px solid var(--lp-brand-soft);
    outline-offset: 0;
}
.lp-textarea { min-height: 110px; resize: vertical; }
.lp-input[aria-invalid="true"], .lp-select[aria-invalid="true"], .lp-textarea[aria-invalid="true"] {
    border-color: var(--lp-red);
}
.lp-help  { font-size: var(--lp-text-sm); color: var(--lp-text-3); margin-top: var(--lp-space-1); }
.lp-error { font-size: var(--lp-text-sm); color: var(--lp-red); margin-top: var(--lp-space-1); font-weight: 550; }

.lp-check { display: flex; align-items: flex-start; gap: var(--lp-space-2); min-height: var(--lp-tap); }
.lp-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lp-brand); flex: none; }

.lp-fieldset { border: 0; padding: 0; margin: 0 0 var(--lp-space-6); }
.lp-fieldset > legend { font-weight: 650; padding: 0; margin-bottom: var(--lp-space-3); }

/* ── Badges and tones ──────────────────────────────────────────────── */
.lp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px var(--lp-space-2);
    font-size: var(--lp-text-xs); font-weight: 650; line-height: 1.6;
    white-space: nowrap;
    border: 1px solid var(--lp-grey-border);
    border-radius: 999px;
    background: var(--lp-grey-bg);
    color: var(--lp-grey);
}
.lp-badge--green  { color: var(--lp-green);  background: var(--lp-green-bg);  border-color: var(--lp-green-border); }
.lp-badge--amber  { color: var(--lp-amber);  background: var(--lp-amber-bg);  border-color: var(--lp-amber-border); }
.lp-badge--red    { color: var(--lp-red);    background: var(--lp-red-bg);    border-color: var(--lp-red-border); }
.lp-badge--blue   { color: var(--lp-blue);   background: var(--lp-blue-bg);   border-color: var(--lp-blue-border); }
.lp-badge--indigo { color: var(--lp-indigo); background: var(--lp-indigo-bg); border-color: var(--lp-indigo-border); }
.lp-badge--grey   { color: var(--lp-grey);   background: var(--lp-grey-bg);   border-color: var(--lp-grey-border); }

/* ── Alerts ────────────────────────────────────────────────────────── */
.lp-alert {
    display: flex; gap: var(--lp-space-3);
    padding: var(--lp-space-3) var(--lp-space-4);
    border: 1px solid var(--lp-blue-border);
    background: var(--lp-blue-bg);
    color: var(--lp-text);
    border-radius: var(--lp-radius);
    margin-bottom: var(--lp-space-4);
}
.lp-alert--success { border-color: var(--lp-green-border); background: var(--lp-green-bg); }
.lp-alert--warning { border-color: var(--lp-amber-border); background: var(--lp-amber-bg); }
.lp-alert--error   { border-color: var(--lp-red-border);   background: var(--lp-red-bg); }
.lp-alert__title { font-weight: 650; margin: 0 0 2px; }
.lp-alert p:last-child { margin-bottom: 0; }

/* ── Tables ────────────────────────────────────────────────────────── */
/* Wide tables scroll inside their own container; the page never scrolls
   sideways on a phone. */
.lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-table { width: 100%; border-collapse: collapse; font-size: var(--lp-text-sm); }
.lp-table th, .lp-table td {
    padding: var(--lp-space-3) var(--lp-space-4);
    text-align: left;
    border-bottom: 1px solid var(--lp-border);
    vertical-align: middle;
}
.lp-table th {
    font-size: var(--lp-text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
    color: var(--lp-text-3); background: var(--lp-surface-2); white-space: nowrap;
}
.lp-table tbody tr:hover { background: var(--lp-surface-2); }
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-table a { font-weight: 600; }

.lp-empty { padding: var(--lp-space-12) var(--lp-space-4); text-align: center; color: var(--lp-text-3); }
.lp-empty__title { font-weight: 650; color: var(--lp-text-2); margin-bottom: var(--lp-space-1); }

/* ── Pagination ────────────────────────────────────────────────────── */
.lp-pagination { display: flex; gap: var(--lp-space-2); align-items: center; justify-content: center; padding: var(--lp-space-4); }
.lp-pagination__info { color: var(--lp-text-3); font-size: var(--lp-text-sm); }

/* ── Application shell ─────────────────────────────────────────────── */
.lp-shell { min-height: 100vh; }

.lp-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--lp-nav-width); z-index: 40;
    display: flex; flex-direction: column;
    background: var(--lp-ink);
    color: #cbd5e1;
    overflow-y: auto;
}
.lp-sidebar__brand {
    display: flex; align-items: center; gap: var(--lp-space-2);
    padding: var(--lp-space-4) var(--lp-space-5);
    color: #fff; font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
/* The brand tile beside the wordmark. site.css carries the same rule for the
   public site, but the app shell never loads that sheet, so in every portal
   the glyph was rendering as a bare character with no tile behind it. */
.lp-logo__mark {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--lp-brand); color: #fff; font-size: 15px;
}
.lp-sidebar__section {
    padding: var(--lp-space-4) var(--lp-space-5) var(--lp-space-1);
    font-size: var(--lp-text-xs); text-transform: uppercase; letter-spacing: .06em; color: #7c8ba1;
}
.lp-nav-item {
    display: flex; align-items: center; gap: var(--lp-space-3);
    min-height: var(--lp-tap);
    padding: var(--lp-space-2) var(--lp-space-5);
    color: #cbd5e1; text-decoration: none; font-weight: 550;
    border-left: 3px solid transparent;
}
.lp-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.lp-nav-item.is-active { background: rgba(255,255,255,.10); color: #fff; border-left-color: var(--lp-brand); }
.lp-nav-item__icon { flex: none; width: 18px; text-align: center; opacity: .9; }
.lp-nav-item__badge {
    margin-left: auto; padding: 1px 7px; border-radius: 999px;
    background: var(--lp-brand); color: #fff; font-size: var(--lp-text-xs); font-weight: 700;
}
.lp-sidebar__footer { margin-top: auto; padding: var(--lp-space-4) var(--lp-space-5); border-top: 1px solid rgba(255,255,255,.08); }

.lp-main { padding-left: var(--lp-nav-width); }

.lp-topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--lp-space-3);
    min-height: var(--lp-topbar-h);
    padding: 0 var(--lp-space-5);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--lp-border);
}
.lp-topbar__title {
    font-weight: 650; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-topbar__spacer { margin-left: auto; }
.lp-topbar__toggle { display: none; }

/* Who you are and the way out, in the top bar of every portal. These used to
   sit only in the sidebar footer, which a distributor never saw. */
.lp-topbar__account { display: flex; align-items: center; gap: var(--lp-space-2); margin: 0; flex: none; }
.lp-topbar__user {
    font-size: var(--lp-text-sm); font-weight: 600; color: var(--lp-text-2);
    max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .lp-topbar__user { display: none; }
}

/* ── Mobile: the sidebar becomes a drawer, opened by a checkbox so it
   works with JavaScript disabled. ─────────────────────────────────── */
@media (max-width: 900px) {
    .lp-main { padding-left: 0; }
    .lp-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--lp-shadow-lg);
    }
    .lp-nav-toggle:checked ~ .lp-sidebar { transform: translateX(0); }
    .lp-nav-toggle:checked ~ .lp-scrim { display: block; }
    .lp-topbar__toggle { display: inline-flex; }
    .lp-scrim {
        display: none; position: fixed; inset: 0; z-index: 35;
        background: rgba(15, 27, 45, .45);
    }
}
.lp-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* ── Distributor portal: bottom tab bar, thumb-reachable ───────────── */
.lp-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: none;
    background: var(--lp-surface);
    border-top: 1px solid var(--lp-border);
    padding-bottom: env(safe-area-inset-bottom);
}
.lp-tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 58px; padding: var(--lp-space-1);
    color: var(--lp-text-3); text-decoration: none;
    font-size: var(--lp-text-xs); font-weight: 600;
}
.lp-tabbar__item.is-active { color: var(--lp-brand); }
/* The distributor portal uses the same shell as everything else: a sidebar on
   a desktop, a drawer on a phone. It used to hide the sidebar outright, which
   left a phone tab bar stretched across a wide screen, and, because the
   account controls live in the sidebar, no way whatsoever to sign out.

   The tab bar stays, but only where it earns its place: on a phone, where the
   four things done in the field belong within thumb reach. Above the drawer
   breakpoint the sidebar is the navigation and a second one is just clutter. */
@media (max-width: 900px) {
    body.lp-body--distributor .lp-tabbar { display: flex; }
    body.lp-body--distributor .lp-main { padding-bottom: 76px; }
}

/* ── Add to home screen ────────────────────────────────────────────── */
.lp-install {
    display: flex; align-items: center; gap: var(--lp-space-4); flex-wrap: wrap;
    padding: var(--lp-space-4); margin-bottom: var(--lp-space-4);
    background: var(--lp-surface); border: 1px solid var(--lp-brand);
    border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow);
}
.lp-install__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 16rem; }

/* ── Map ───────────────────────────────────────────────────────────── */
.lp-map { width: 100%; height: 460px; border-radius: var(--lp-radius-lg); border: 1px solid var(--lp-border); }
.lp-map--tall { height: calc(100vh - 200px); min-height: 380px; }
.lp-map-toolbar {
    display: flex; gap: var(--lp-space-2); flex-wrap: wrap; align-items: center;
    padding: var(--lp-space-3); background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-bottom: 0; border-radius: var(--lp-radius-lg) var(--lp-radius-lg) 0 0;
}
.lp-map-toolbar + .lp-map { border-radius: 0 0 var(--lp-radius-lg) var(--lp-radius-lg); }

/* ── Misc ──────────────────────────────────────────────────────────── */
.lp-muted { color: var(--lp-text-3); }
.lp-small { font-size: var(--lp-text-sm); }
.lp-mono  { font-family: var(--lp-font-mono); font-size: var(--lp-text-sm); }
.lp-nowrap { white-space: nowrap; }
.lp-divider { height: 1px; background: var(--lp-border); border: 0; margin: var(--lp-space-6) 0; }

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

@media print {
    .lp-sidebar, .lp-topbar, .lp-tabbar, .lp-btn { display: none !important; }
    .lp-main { padding: 0 !important; }
    body { background: #fff; }
}

/* ── Map editor handles ─────────────────────────────────────────────
   Sized for a fingertip. Leaflet positions these by their anchor, so the
   visual circle is drawn with a border rather than by resizing the icon. */
.lp-vertex {
    background: var(--lp-surface);
    border: 3px solid var(--lp-brand);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(16, 21, 31, .3);
    cursor: pointer;
}
.lp-vertex:hover { background: var(--lp-brand-soft); }
.lp-vertex--mid {
    border-width: 2px;
    border-color: var(--lp-brand);
    opacity: .55;
}
.lp-vertex--mid:hover { opacity: 1; }

/* Leaflet paints its own controls; keep them on our type scale. */
.leaflet-container { font: inherit; font-size: var(--lp-text-sm); }
.leaflet-control-attribution { font-size: 10px; }

/* ── Search results under the map search box ───────────────────────── */
.lp-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.lp-search__results {
    position: absolute; z-index: 500; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius); box-shadow: var(--lp-shadow);
    max-height: 260px; overflow-y: auto;
}
.lp-search__result {
    display: block; width: 100%; text-align: left;
    padding: var(--lp-space-3) var(--lp-space-4); min-height: var(--lp-tap);
    background: none; border: 0; border-bottom: 1px solid var(--lp-border-light);
    font: inherit; color: var(--lp-text); cursor: pointer;
}
.lp-search__result:hover, .lp-search__result:focus { background: var(--lp-surface-2); }
.lp-search__result:last-child { border-bottom: 0; }

/* ── Property count readout ────────────────────────────────────────── */
.lp-count {
    display: flex; align-items: baseline; gap: var(--lp-space-3); flex-wrap: wrap;
    padding: var(--lp-space-4);
    background: var(--lp-surface-2); border-radius: var(--lp-radius);
}
.lp-count__value { font-size: var(--lp-text-2xl); font-weight: 700; letter-spacing: -.02em; }
.lp-count__caveat { font-size: var(--lp-text-sm); color: var(--lp-text-2); }

/* ── Phase 3: mobile tracking and agreements ─────────────────────── */
.lp-map--tracker { height: min(58vh, 560px); min-height: 360px; border-radius: 0; border-width: 0 0 1px; }
.lp-tracker__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--lp-space-3); }
.lp-tracker__signal {
    display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px;
    border-radius: 999px; color: var(--lp-green); background: var(--lp-green-bg);
    border: 1px solid var(--lp-green-border); font-size: var(--lp-text-xs); font-weight: 650;
}
.lp-tracker__signal.is-offline { color: var(--lp-amber); background: var(--lp-amber-bg); border-color: var(--lp-amber-border); }
.lp-contract-copy { margin-top: var(--lp-space-4); line-height: 1.7; color: var(--lp-text-2); }
.lp-contract-copy p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .lp-map--tracker { height: 52vh; min-height: 320px; }
    .lp-tracker__controls { grid-template-columns: 1fr; }
}

/* ── Availability calendar ─────────────────────────────────────────── */
.lp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--lp-space-1); }
.lp-cal__head {
    text-align: center; font-size: var(--lp-text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--lp-text-3);
    padding: var(--lp-space-2) 0;
}
.lp-cal__day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: var(--lp-space-1);
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    font: inherit; color: var(--lp-text); cursor: pointer;
    text-align: center;
}
.lp-cal__day:hover { border-color: var(--lp-brand); }
/* Each day is a <label> wrapping a visually hidden checkbox, so the whole
   cell is the tap target and the control keeps native keyboard behaviour. */
.lp-cal__day:has(input:checked) {
    background: var(--lp-brand-soft);
    border-color: var(--lp-brand);
    font-weight: 650;
    box-shadow: inset 0 0 0 1px var(--lp-brand);
}
.lp-cal__day:has(input:focus-visible) { outline: 2px solid var(--lp-brand); outline-offset: 2px; }
.lp-cal__day:has(input:disabled) { opacity: .4; cursor: not-allowed; background: var(--lp-surface-2); }
.lp-cal__day--outside { opacity: .35; }
.lp-cal__num { font-size: var(--lp-text-base); font-weight: 600; }
.lp-cal__note { font-size: 10px; color: var(--lp-text-3); line-height: 1.1; }
.lp-cal__day:has(input:checked) .lp-cal__note { color: var(--lp-brand-strong); }

/* ── Impersonation bar ──────────────────────────────────────────────
   Deliberately loud and never dismissible. A support session that looks
   like an ordinary one is how somebody edits the wrong account. */
.lp-impersonation-bar {
    position: sticky; top: var(--lp-topbar-h); z-index: 29;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--lp-space-4); flex-wrap: wrap;
    padding: var(--lp-space-3) var(--lp-space-5);
    background: var(--lp-amber-bg);
    border-bottom: 2px solid var(--lp-amber);
    color: var(--lp-amber);
    font-size: var(--lp-text-sm);
    font-weight: 550;
}
.lp-impersonation-bar strong { font-weight: 700; }

/* ── Feature request board ──────────────────────────────────────────── */
.lp-vote {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 56px; min-height: 56px; padding: var(--lp-space-2);
    background: var(--lp-surface); border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius); cursor: pointer;
    font: inherit; color: var(--lp-text); line-height: 1.1;
}
.lp-vote:hover { border-color: var(--lp-brand); background: var(--lp-brand-soft); }
.lp-vote[aria-pressed="true"] {
    background: var(--lp-brand-soft); border-color: var(--lp-brand); color: var(--lp-brand-strong);
}
.lp-vote__arrow { font-size: 12px; opacity: .7; }
.lp-vote__count { font-size: var(--lp-text-lg); font-weight: 700; }