/* =============================================================================
   campistry_link.css — Campistry Link Shared Styles v3.0
   Product Color: Forest Green #2A7A35
   Two interfaces: Camp Admin & Parent Portal
   ============================================================================= */

:root {
    --link-color: #2A7A35;
    --link-dark: #1F6B2B;
    --link-darker: #16532A;
    --link-deep: #0D2E17;
    --link-tint: #F0FDF4;
    --link-tint-bg: #F0FDF4;
    --link-border: #BBF7D0;
    --link-gold: #D4930A;
    --link-gold-light: #F5C563;
    --link-canvas: #F3F1EE;
    --bg-primary: #F3F1EE;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --border-subtle: #E2E8F0;
    --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1;
    --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155;
    --slate-800: #1E293B; --slate-900: #0F172A;
    --green-50: #F0FDF4; --green-500: #22C55E; --green-600: #16A34A;
    --amber-50: #FFFBEB; --amber-500: #F59E0B; --amber-600: #D97706;
    --red-50: #FEF2F2; --red-500: #EF4444; --red-600: #DC2626;
    --blue-50: #EFF6FF; --blue-500: #3B82F6;
    --purple-50: #FAF5FF; --purple-500: #8B5CF6;
    /* Accent palette — each home tile / feature gets its own identity color */
    --acc-emerald-1: #2A7A35; --acc-emerald-2: #52B265; --acc-emerald-bg: #EAF9EC;
    --acc-gold-1: #C17F0A;    --acc-gold-2: #F0B94D;    --acc-gold-bg: #FDF3DF;
    --acc-violet-1: #6D28D9; --acc-violet-2: #A78BFA;   --acc-violet-bg: #F1EBFF;
    --acc-azure-1: #1D6FC4;  --acc-azure-2: #63B3F0;    --acc-azure-bg: #E7F3FE;
    --acc-coral-1: #C2410C;  --acc-coral-2: #F0925B;    --acc-coral-bg: #FDECDF;
    --acc-teal-1: #0F766E;   --acc-teal-2: #5EEAD4;     --acc-teal-bg: #E4FBF8;
    --acc-rose-1: #BE185D;   --acc-rose-2: #F472B6;     --acc-rose-bg: #FDEAF3;
    --acc-indigo-1: #4338CA; --acc-indigo-2: #818CF8;   --acc-indigo-bg: #ECEBFE;
    /* Material Design 3 system font — Roboto everywhere, no serif accents.
       Kept as two variables for back-compat with existing rules, but both
       now point at the same typeface (M3 uses one type family, varied by
       weight/size, not a display+body pairing). */
    --font-display: 'Roboto', 'Roboto Flex', system-ui, -apple-system, sans-serif;
    --font-body: 'Roboto', 'Roboto Flex', system-ui, -apple-system, sans-serif;
    /* M3 shape scale (approx.): small=8, medium=12, large=16, extra-large=28 */
    --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px;
    /* M3 elevation is mostly flat/tonal — shadows are neutral, soft, and
       shallow rather than colorful "glow" shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px 1px rgba(0,0,0,0.05);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 1px 3px rgba(0,0,0,0.08), 0 4px 8px 3px rgba(0,0,0,0.07);
    --shadow-xl: 0 2px 3px rgba(0,0,0,0.08), 0 6px 10px 4px rgba(0,0,0,0.08);
    /* M3 tonal surfaces — a neutral surface with a faint primary tint at
       rest, not a warm cream or a colored gradient wash */
    --md-surface: #FDFCFB;
    --md-surface-container: #F3F1EE;
    --md-surface-container-high: #EDEBE8;
    --md-primary-container: var(--link-tint);
    --md-on-primary-container: var(--link-darker);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    background: var(--md-surface-container);
    color: var(--text-primary); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased;
}

/* HEADER */
.lk-header {
    background: var(--md-surface);
    border-bottom: 1px solid rgba(15,23,42,0.08);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: hidden;
}
/* The quick-switch bar mounts inside .lk-header-right; drop the global
   absolute-centering so it's a normal shrinkable/scrollable flex item
   there instead of floating over the logo/camp name on narrow screens. */
.lk-header .quick-switch-bar { position: static; transform: none; max-width: 100%; }
.lk-header-right { min-width: 0; }
.lk-header-left { display: flex; align-items: center; gap: 14px; }
.lk-logo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--slate-800);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lk-logo-icon {
    width: 34px; height: 34px;
    background: var(--link-color);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.lk-role-tag {
    font-size: 0.65rem; font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lk-role-tag.admin { background: var(--link-tint); color: var(--link-color); }
.lk-role-tag.parent { background: var(--blue-50); color: var(--blue-500); }
.lk-camp-name {
    font-size: 0.8rem; color: var(--slate-400); font-weight: 500;
    padding-left: 14px; border-left: 1px solid var(--slate-200);
}
.lk-header-right { display: flex; align-items: center; gap: 6px; }
.lk-header-btn {
    position: relative; width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--slate-600);
    transition: background 0.15s ease;
}
.lk-header-btn:hover { background: rgba(15,23,42,0.06); color: var(--slate-900); }
.lk-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    background: #D93025; color: #fff;
    font-size: 0.6rem; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--md-surface);
}
.lk-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--link-color);
    color: #fff;
    font-size: 0.78rem; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* Avatar account menu — Material 3 Menu component */
.lk-avatar-menu-wrap { position: relative; }
.lk-hero-avatar-wrap { position: absolute; top: 20px; right: 20px; z-index: 2; }
.lk-hero-avatar { background: rgba(255,255,255,0.22); color: #fff; }
.lk-avatar-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px;
    background: var(--md-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 200;
}
.lk-avatar-menu-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; height: 40px; padding: 0 12px;
    border: none; background: none; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
    color: var(--slate-700); cursor: pointer; text-align: left;
    transition: background 0.15s ease;
}
.lk-avatar-menu-item:hover { background: var(--md-surface-container-high); }
.lk-avatar-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.lk-avatar-menu-divider { height: 1px; background: rgba(15,23,42,0.08); margin: 6px 4px; }

/* SIDEBAR — Material 3 Navigation Drawer */
.lk-sidebar {
    position: fixed; top: 64px; left: 0; bottom: 0; width: 256px;
    background: var(--md-surface-container);
    padding: 12px; z-index: 50; overflow-y: auto;
}
.lk-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.lk-nav-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--slate-500);
    padding: 16px 16px 8px;
}
.lk-nav-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
    height: 44px;
    border-radius: var(--radius-full);
    font-size: 0.875rem; font-weight: 500;
    color: var(--slate-700);
    cursor: pointer; border: none; background: none;
    width: 100%; text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: var(--font-body);
}
.lk-nav-item:hover { background: rgba(15,23,42,0.055); }
.lk-nav-item.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 700;
}
.lk-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.lk-nav-item .nav-count {
    margin-left: auto;
    font-size: 0.68rem; font-weight: 700;
    background: var(--link-color); color: #fff;
    min-width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lk-nav-divider { height: 1px; background: rgba(15,23,42,0.08); margin: 8px 16px; }

/* MAIN */
.lk-main { margin-left: 244px; padding: 28px 32px 80px; min-height: calc(100vh - 64px); }
.lk-page { display: none; }
/* Opacity only — deliberately no transform. A transform on .lk-page makes it
   the containing block for its position:fixed descendants, so the compose FAB
   inside the Messages page rendered up in the page box for the length of the
   animation and then snapped to the bottom of the screen. The rise now lives on
   the page hero instead, which is not an ancestor of anything fixed. */
.lk-page.active { display: block; animation: lkPageIn 0.35s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
@keyframes lkPageIn { from { opacity: 0; } to { opacity: 1; } }
.lk-page.active .lk-page-hero { animation: lkHeroIn 0.35s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
@keyframes lkHeroIn { from { transform: translateY(6px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .lk-page.active, .lk-page.active .lk-page-hero { animation: none; }
}
.lk-page-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--slate-100); }
.lk-page-header h1 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; margin-bottom: 2px; color: var(--slate-900); }
.lk-page-header p { font-size: 0.84rem; color: var(--slate-400); }

/* HERO BANNER — Material 3 tonal surface (flat primary fill, no glow
   blobs or multi-stop gradients — M3 conveys depth through color and
   shape, not shine) */
.lk-hero {
    /* Was a flat fill. The same two-layer treatment as the sign-in screen —
       a diagonal brand ramp plus a soft light behind the greeting — so the
       first thing a parent sees matches the door they came through. An
       implied light source is most of what separates a product surface from
       a coloured box. */
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
        linear-gradient(152deg, #1A8F49 0%, var(--link-color) 55%, #0F4A28 100%);
    border-radius: var(--radius-2xl);
    padding: 30px 32px 28px;
    margin-bottom: 22px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px -14px rgba(6, 46, 24, 0.55);
}
/* Hairline top edge: catches the light like a real surface rather than
   ending abruptly at the corner radius. */
.lk-hero::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    pointer-events: none;
}
.lk-hero-left { position: relative; z-index: 1; }
.lk-hero-greeting {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.72;
    margin-bottom: 6px;
}
.lk-hero-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    /* 500 read tentative at this size against a saturated fill. */
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.lk-hero-title span { font-weight: 700; }
.lk-hero-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
}
/* One scrolling row, not a wrapping block. A family with six children across
   three camps would otherwise wrap to three rows and add ~100px to the hero,
   pushing everything else down the screen. Scrolling keeps the hero the same
   height whether you have one child or six. */
.lk-hero-kids {
    position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 18px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    /* Bleed to the hero edges so a chip scrolling past does not stop short of
       the padding and look clipped mid-air. */
    margin-left: -4px; padding: 4px;
    scroll-snap-type: x proximity;
}
.lk-hero-kids::-webkit-scrollbar { display: none; }
.lk-hero-kid-chip { flex: none; scroll-snap-align: start; }
.lk-hero-kid-chip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.16);
    border-radius: var(--radius-full);
    padding: 5px 14px 5px 5px;
    border: none; cursor: pointer; font-family: var(--font-body);
    transition: background 0.15s ease;
}
.lk-hero-kid-chip:hover, .lk-hero-kid-chip:active { background: rgba(255,255,255,0.26); }
.lk-hero-kid-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--acc-1, var(--link-gold));
    color: #fff;
    font-size: 0.62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lk-hero-kid-name { font-size: 0.78rem; font-weight: 500; color: #fff; }

/* CARDS — Material 3 "elevated card": flat surface, minimal shadow */
.lk-card {
    background: var(--md-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}
.lk-card:hover { box-shadow: var(--shadow-md); }
.lk-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--slate-100);
    margin-bottom: 16px;
}
.lk-card-head h2 { font-size: 1.05rem; font-weight: 600; color: var(--slate-800); }

/* STAT GRID */
.lk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.lk-stat {
    background: white;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex; align-items: flex-start; gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lk-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lk-stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lk-stat-icon.rose { background: var(--link-tint); color: var(--link-color); }
.lk-stat-icon.green { background: var(--green-50); color: var(--green-600); }
.lk-stat-icon.amber { background: var(--amber-50); color: var(--amber-600); }
.lk-stat-icon.blue { background: var(--blue-50); color: var(--blue-500); }
.lk-stat-icon.purple { background: var(--purple-50); color: var(--purple-500); }
.lk-stat-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--slate-900); }
.lk-stat-lbl { font-size: 0.73rem; font-weight: 500; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.06em; }

/* BUTTONS — Material 3: solid fill, fully pill-shaped, flat state-layer
   on hover instead of gradient + shadow + lift */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem; font-weight: 500;
    cursor: pointer; border: none;
    border-radius: var(--radius-full);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    font-family: var(--font-body);
}
.btn-primary {
    background: var(--link-color);
    color: #fff;
}
.btn-primary:hover { background: var(--link-dark); box-shadow: var(--shadow-sm); }
.btn-secondary {
    background: transparent; color: var(--link-color);
    border: 1px solid var(--slate-300);
}
.btn-secondary:hover { background: var(--md-primary-container); border-color: var(--link-color); }
.btn-ghost {
    background: transparent; color: var(--link-color);
    border: none;
}
.btn-ghost:hover { background: var(--md-primary-container); }
.btn-sm { padding: 7px 16px; font-size: 0.8125rem; }

/* TABS */
.lk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--slate-200); margin-bottom: 16px; overflow-x: auto; }
.lk-tab {
    padding: 9px 14px;
    font-size: 0.79rem; font-weight: 600;
    color: var(--slate-400);
    background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--font-body);
}
.lk-tab:hover { color: var(--slate-800); }
.lk-tab.active { color: var(--link-color); border-bottom-color: var(--link-color); }

/* Sits right under a child-tab row on the pickup/transport forms — states
   plainly which camper the form below applies to, since the tab row above
   is easy to miss once you've scrolled down to actually submit. */
.lk-pickup-for {
    font-size: 0.8rem; font-weight: 700; color: var(--link-color);
    margin: -6px 0 14px;
}

/* ─── Camper switcher ─────────────────────────────────────────────────────
   The plain text-tab row (.lk-tabs/.lk-tab) used to double as the camper
   picker on Canteen, Camp Shop, Schedule, Health and every pickup form — a
   thin underline on a name is easy to act right past without registering
   it as a choice, so a parent with more than one child could easily submit
   or spend against the wrong one without ever noticing there was a
   decision to make. This is deliberately much louder: a colored avatar +
   name pill with a strong filled active state, reusing the same per-child
   accent colors already used on the Home hero chips (childAccent()/
   CHILD_ACCENTS), just restyled for a light card background instead of the
   dark hero. */
.lk-camper-switch {
    display: flex; gap: 10px; overflow-x: auto; padding: 3px 1px;
    margin-bottom: 16px; scrollbar-width: none;
}
.lk-camper-switch::-webkit-scrollbar { display: none; }
.lk-camper-chip {
    flex: none; display: flex; align-items: center; gap: 9px;
    padding: 7px 18px 7px 7px; border-radius: var(--radius-full);
    border: 2px solid var(--slate-200); background: #fff;
    cursor: pointer; font-family: var(--font-body);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.lk-camper-chip:active { transform: scale(0.97); }
.lk-camper-chip-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--acc-1, var(--link-color)); color: #fff;
    font-size: 0.68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.lk-camper-chip-name { font-size: 0.86rem; font-weight: 600; color: var(--slate-500); }
.lk-camper-chip.active { border-color: var(--link-color); background: var(--link-tint); }
.lk-camper-chip.active .lk-camper-chip-name { color: var(--link-color); }

/* Camp switcher on Payments — same chip row as the camper switch above, just
   no avatar circle (a camp has no photo/initials) and a small dot instead
   to flag which camps still have a balance due. */
.lk-camper-chip.lk-camp-chip { padding: 8px 16px; }
.lk-camp-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); flex-shrink: 0; }

/* TABLE */
.lk-table { width: 100%; border-collapse: collapse; }
.lk-table th {
    text-align: left;
    font-size: 0.69rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--slate-400);
    padding: 8px 12px;
    border-bottom: 1px solid var(--slate-200);
    background: var(--slate-50);
}
.lk-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--slate-100);
    font-size: 0.83rem; color: var(--slate-600);
    vertical-align: middle;
}
.lk-table tr:last-child td { border-bottom: none; }
.lk-table tr:hover td { background: rgba(42,122,53,0.015); }
.lk-table .bold { font-weight: 600; color: var(--slate-900); }

/* BADGES */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: 0.69rem; font-weight: 600;
}
.badge-ok { background: var(--green-50); color: var(--green-600); }
.badge-warn { background: var(--amber-50); color: var(--amber-600); }
.badge-err { background: var(--red-50); color: var(--red-600); }
.badge-info { background: var(--blue-50); color: var(--blue-500); }
.badge-rose { background: var(--link-tint); color: var(--link-color); }
.badge-neutral { background: var(--slate-100); color: var(--slate-600); }

/* FORM */
.lk-field { margin-bottom: 16px; }
.lk-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--slate-600); margin-bottom: 5px; }
.lk-input, .lk-select, .lk-textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff; color: var(--slate-900);
}
.lk-input:focus, .lk-select:focus, .lk-textarea:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 3px rgba(42,122,53,0.1);
}
.lk-textarea { min-height: 80px; resize: vertical; }

/* MODAL */
.lk-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 200;
    justify-content: center; align-items: flex-start;
    padding-top: 60px;
    backdrop-filter: blur(4px);
}
.lk-overlay.open { display: flex; }
.lk-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 90vw; max-width: 580px; max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.lk-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--slate-200);
    display: flex; align-items: center; justify-content: space-between;
}
.lk-modal-head h3 { font-size: 1rem; font-weight: 700; color: var(--slate-900); }
.lk-modal-close {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm); border: none;
    background: var(--slate-100); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--slate-400); font-size: 1.1rem;
    font-family: var(--font-body);
    transition: background 0.2s ease;
}
.lk-modal-close:hover { background: var(--slate-200); }
.lk-modal-body { padding: 22px; }
.lk-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--slate-200);
    display: flex; gap: 8px; justify-content: flex-end;
}

/* MESSAGES — avatar-forward feed (Brightwheel/Bloomz-style chat list
   instead of a plain text row list) */
.msg-item {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--slate-100);
}
.msg-item:last-child { border-bottom: none; }
.msg-item:hover { background: var(--slate-50); }
.msg-item.unread { background: var(--link-tint-bg); }
.msg-item.unread:hover { background: var(--link-tint); }
.msg-avatar {
    position: relative;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
    flex-shrink: 0;
}
.msg-avatar .msg-unread-dot {
    position: absolute; top: -1px; right: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--red-500); border: 2px solid #fff;
}
.msg-dot { display: none; } /* legacy — superseded by .msg-avatar */
.msg-body { flex: 1; min-width: 0; padding-top: 1px; }
.msg-subj { font-size: 0.85rem; font-weight: 600; color: var(--slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-preview { font-size: 0.74rem; color: var(--slate-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-from { font-size: 0.69rem; color: var(--slate-400); margin-top: 3px; }
.msg-time { font-size: 0.69rem; color: var(--slate-400); flex-shrink: 0; white-space: nowrap; }

/* ── MESSAGE ROW: swipe-to-commit (touch) + hover-reveal (desktop) ────────
   Two different interactions on the same markup, because they're the only
   two that make sense for their input device: a mouse can't swipe, so
   desktop hovers .msg-actions open (unchanged below) and clicks a button.
   Touch commits directly on release past the threshold — see the
   swipe-left/-right/-armed classes toggled by initMsgSwipe — because
   requiring a swipe-to-reveal AND THEN a tap on a button was two actions to
   do the one thing a directional swipe already means in every mail app. */
.msg-swipe { position: relative; overflow: hidden; background: #fff; --msg-actions-w: 140px; }
.msg-swipe:last-child > .msg-item { border-bottom: none; }
.msg-swipe > .msg-item { position: relative; z-index: 2; background: #fff;
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); touch-action: pan-y; }
.msg-swipe > .msg-item.unread { background: var(--link-tint-bg); }
.msg-swipe.dragging > .msg-item { transition: none; }

/* Backdrops revealed by drag direction, underneath the sliding row. Not
   buttons — nothing to tap here, the gesture itself is the action, and
   swipe-armed is the only feedback that release will actually commit it. */
.msg-swipe-bg {
    position: absolute; top: 0; bottom: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px; padding: 0 22px;
    font-size: 0.78rem; font-weight: 700; color: #fff;
    opacity: 0; transition: opacity 0.1s ease;
}
.msg-swipe-bg svg { width: 20px; height: 20px; flex: none; }
.msg-swipe-bg.left  { left: 0;  background: var(--amber-500); justify-content: flex-start; }
.msg-swipe-bg.right { right: 0; background: var(--red-500);   justify-content: flex-end; }
.msg-swipe.swipe-right .msg-swipe-bg.left  { opacity: 1; }
.msg-swipe.swipe-left  .msg-swipe-bg.right { opacity: 1; }
.msg-swipe.swipe-armed .msg-swipe-bg { filter: brightness(1.12); }

.msg-actions {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: stretch; z-index: 1;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    /* Only reveal after the pointer lingers ~0.45s — a quick pass-over won't
       pop the actions open. Retracts immediately when the pointer leaves. */
    .msg-swipe:hover > .msg-item { transform: translateX(calc(-1 * var(--msg-actions-w))); transition-delay: 0.4s; }
    .msg-swipe:hover .msg-actions { opacity: 1; pointer-events: auto; transition-delay: 0.4s; }
}
.msg-action-btn {
    border: none; cursor: pointer; width: 70px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em; color: #fff;
    font-family: var(--font-body); transition: filter 0.15s ease;
}
.msg-action-btn svg { width: 19px; height: 19px; }
.msg-action-btn:hover { filter: brightness(1.08); }
.msg-action-btn:active { filter: brightness(0.9); }
.msg-action-btn.important { background: var(--amber-600); }
.msg-action-btn.archive   { background: var(--amber-500); }
.msg-action-btn.delete    { background: var(--red-500); }

/* Detail-view action row */
.msg-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }
.msg-detail-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--radius-full);
    border: 1px solid var(--slate-200); background: #fff; cursor: pointer;
    font-size: 0.76rem; font-weight: 600; color: var(--slate-600);
    font-family: var(--font-body); transition: all 0.15s ease;
}
.msg-detail-btn svg { width: 16px; height: 16px; }
.msg-detail-btn.important:hover { background: var(--amber-50); border-color: var(--amber-600); color: var(--amber-600); }
.msg-detail-btn.important.on { background: var(--amber-50); border-color: var(--amber-500); color: var(--amber-600); }
.msg-detail-btn.archive:hover { background: var(--amber-50); border-color: var(--amber-500); color: var(--amber-600); }
.msg-detail-btn.delete:hover  { background: var(--red-50);  border-color: var(--red-500);  color: var(--red-600); }

/* Small inline icon button (sent-list rows) */
.icon-btn.lk-ico { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border-radius: var(--radius-sm); }
.icon-btn.lk-ico svg { width: 16px; height: 16px; }
.icon-btn.lk-ico.on { color: var(--amber-500); }

/* ── In-app confirm dialog (replaces the browser's confirm() popup) ──────── */
.lk-confirm-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
    z-index: 400; align-items: center; justify-content: center; padding: 20px;
}
.lk-confirm-overlay.open { display: flex; }
.lk-confirm-card {
    background: #fff; border-radius: var(--radius-xl);
    width: 100%; max-width: 380px; box-shadow: var(--shadow-xl);
    text-align: center; padding: 26px 24px 20px;
    animation: lkConfirmIn 0.18s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes lkConfirmIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.lk-confirm-icon {
    width: 52px; height: 52px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
    background: var(--red-50); color: var(--red-500);
}
.lk-confirm-icon svg { width: 26px; height: 26px; }
.lk-confirm-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--slate-900); margin-bottom: 6px; }
.lk-confirm-card > p { font-size: 0.84rem; color: var(--slate-500); line-height: 1.5; margin-bottom: 16px; }
.lk-confirm-optout {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 0.76rem; color: var(--slate-500); margin-bottom: 18px; cursor: pointer; user-select: none;
}
.lk-confirm-optout input { accent-color: var(--link-color); width: 15px; height: 15px; }
.lk-confirm-foot { display: flex; gap: 9px; }
.lk-confirm-foot .btn { flex: 1; justify-content: center; }
.btn-danger { background: var(--red-500); color: #fff; border: none; }
.btn-danger:hover { background: var(--red-600); }

/* RECIPIENT PICKER */
.recip-picker { border: 1px solid var(--slate-200); border-radius: var(--radius-md); max-height: 240px; overflow-y: auto; }
.recip-group-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--slate-400);
    padding: 5px 12px;
    background: var(--slate-50);
    position: sticky; top: 0; z-index: 1;
}
.recip-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 0.81rem; cursor: pointer; transition: background 0.15s; }
.recip-item:hover { background: var(--link-tint-bg); }
.recip-item input[type="checkbox"] { accent-color: var(--link-color); width: 15px; height: 15px; }
.recip-item .recip-count { margin-left: auto; font-size: 0.67rem; color: var(--slate-400); }

/* CHANNEL BUTTONS */
.channel-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.channel-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--slate-200); border-radius: var(--radius-md);
    background: #fff;
    font-size: 0.79rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--slate-600);
    font-family: var(--font-body);
}
.channel-btn:hover { border-color: var(--link-border); }
.channel-btn.selected { border-color: var(--link-color); background: var(--link-tint); color: var(--link-color); }

/* INFO ROWS */
.info-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--slate-100); font-size: 0.83rem; }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--slate-400); font-weight: 500; }
.info-row .value { color: var(--slate-900); font-weight: 600; text-align: right; }

/* CANTEEN — Material 3 balance card: solid tonal fill (per active child,
   via data-accent set in JS on tab switch), no gradient sheen or glow. */
.canteen-bal {
    text-align: center;
    padding: 32px 24px 26px;
    background: var(--acc-1, var(--link-color));
    border-radius: var(--radius-2xl);
    margin-bottom: 18px;
    position: relative;
    transition: background 0.3s ease;
}
.canteen-bal-amt { font-family: var(--font-display); font-size: 2.5rem; font-weight: 500; line-height: 1; margin-bottom: 4px; color: #fff; }
.canteen-bal-lbl { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }

/* DOC ITEMS */
.doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.doc-item:hover { border-color: var(--link-border); box-shadow: var(--shadow-md); }
.doc-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.doc-info { flex: 1; }
.doc-info h4 { font-size: 0.84rem; font-weight: 600; color: var(--slate-800); }
.doc-info p { font-size: 0.71rem; color: var(--slate-400); }

/* PROGRESS */
.progress { height: 8px; background: var(--slate-100); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill {
    height: 100%; border-radius: var(--radius-full);
    background: var(--link-color);
    transition: width 0.5s ease;
}

/* EMPTY STATE */
.lk-empty { text-align: center; padding: 40px 20px; color: var(--slate-400); }
.lk-empty-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--slate-100);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.2rem;
    color: var(--slate-400);
}
.lk-empty h3 { font-size: 0.92rem; font-weight: 700; color: var(--slate-600); margin-bottom: 2px; }

/* TOAST — Material 3 Snackbar: dark neutral surface, rounded, no color */
#toastBox { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* FAB — Material 3 Extended Floating Action Button. The signature Google-app
   pattern (Gmail compose, Google Pay "Add money") for a page's single most
   important action, instead of a small inline button in the header. */
.lk-fab {
    position: fixed;
    right: 32px; bottom: 32px;
    z-index: 90;
    display: inline-flex; align-items: center; gap: 12px;
    height: 56px;
    padding: 0 24px 0 20px;
    border-radius: var(--radius-lg);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.lk-fab:hover { box-shadow: var(--shadow-lg); }
.lk-fab svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 768px) {
    .lk-fab { right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* BOTTOM NAV — Material 3 Navigation Bar: full-width surface, per-item
   pill "indicator" that sits behind the icon only (not the label).
   padding-bottom accounts for the iPhone home-indicator safe area. */
.lk-bnav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--md-surface-container);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom);
}
.lk-bnav-inner {
    display: flex; align-items: center; justify-content: space-around;
    height: 80px; max-width: 560px; margin: 0 auto;
    padding-top: 12px;
}
.lk-bnav-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--slate-600);
    font-size: 0.75rem; font-weight: 500;
    padding: 0;
    font-family: var(--font-body);
    flex: 1;
    min-width: 0;
}
.lk-bnav-icon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 32px;
    border-radius: var(--radius-full);
    transition: background 0.2s ease;
}
.lk-bnav-item.active .lk-bnav-icon { background: var(--md-primary-container); }
.lk-bnav-item.active { color: var(--slate-900); font-weight: 700; }
.lk-bnav-item.active .lk-bnav-icon svg { color: var(--md-on-primary-container); }
.lk-bnav-item svg { width: 22px; height: 22px; }
.lk-bnav-label { line-height: 1; }

/* HOME GRID — bento layout: featured tiles span 2 columns, rest fill in */
.lk-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.lk-home-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0;
    padding: 22px 20px 20px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(15,23,42,0.06);
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), transform 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), border-color 0.25s ease;
    font-family: var(--font-body);
    text-align: left;
    /* Was 152px with the icon pushed to the top by margin-bottom:auto, which
       left a large empty band through the middle of every tile. Sized to its
       content instead, with a floor that keeps the grid even. */
    min-height: 118px;
    grid-column: span 1;
    overflow: hidden;
}
.lk-home-tile:hover {
    box-shadow: var(--shadow-md);
    background: var(--md-surface-container-high);
}
/* A tile that only changes colour on press feels like a link; one that gives
   under the finger feels like a control. */
.lk-home-tile:active {
    background: var(--md-surface-container-high);
    transform: scale(0.985);
    box-shadow: var(--shadow-sm);
}
.lk-home-tile-icon {
    width: 46px; height: 46px;
    border-radius: var(--radius-md);
    background: var(--acc-bg, var(--link-tint));
    display: flex; align-items: center; justify-content: center;
    color: var(--acc-1, var(--link-color));
    flex-shrink: 0;
    /* No margin-bottom:auto — that is what stretched the gap. */
}
.lk-home-tile-icon svg { width: 21px; height: 21px; }
.lk-home-tile-body { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; margin-top: auto; width: 100%; }
.lk-home-tile-label { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--slate-900); line-height: 1.2; }
.lk-home-tile-sub { font-size: 0.77rem; color: var(--slate-400); font-weight: 500; }
/* Per-feature identity colors */
/* Global per-identity accent vars — any element carrying data-accent="x"
   gets --acc-1/--acc-2/--acc-bg, used by home tiles, avatars, and per-child
   color coding (Life360-style: each family member gets a consistent color
   across hero chips, the children list, canteen, and messages). */
[data-accent="emerald"] { --acc-1: var(--acc-emerald-1); --acc-2: var(--acc-emerald-2); --acc-bg: var(--acc-emerald-bg); }
[data-accent="gold"]    { --acc-1: var(--acc-gold-1);    --acc-2: var(--acc-gold-2);    --acc-bg: var(--acc-gold-bg); }
[data-accent="violet"]  { --acc-1: var(--acc-violet-1);  --acc-2: var(--acc-violet-2);  --acc-bg: var(--acc-violet-bg); }
[data-accent="azure"]   { --acc-1: var(--acc-azure-1);   --acc-2: var(--acc-azure-2);   --acc-bg: var(--acc-azure-bg); }
[data-accent="coral"]   { --acc-1: var(--acc-coral-1);   --acc-2: var(--acc-coral-2);   --acc-bg: var(--acc-coral-bg); }
[data-accent="teal"]    { --acc-1: var(--acc-teal-1);    --acc-2: var(--acc-teal-2);    --acc-bg: var(--acc-teal-bg); }
[data-accent="rose"]    { --acc-1: var(--acc-rose-1);    --acc-2: var(--acc-rose-2);    --acc-bg: var(--acc-rose-bg); }
[data-accent="indigo"]  { --acc-1: var(--acc-indigo-1);  --acc-2: var(--acc-indigo-2);  --acc-bg: var(--acc-indigo-bg); }

/* Generic accent-colored avatar circle — used for camper avatars anywhere
   in the app (hero chips, My Children, message senders, canteen tabs).
   Material-style: a solid fill with white initials (like Gmail/Contacts
   default avatars), not a gradient. */
.lk-avatar-accent {
    background: var(--acc-1, var(--link-color));
    color: #fff;
}
.lk-home-tile.featured {
    grid-column: span 2;
    min-height: 172px;
    padding: 26px 24px 22px;
}
/* The wide tiles lay the icon beside the text instead of above it. Stacked,
   a full-width tile left two thirds of its own width empty, which is what made
   the top of the screen feel unfinished. */
.lk-home-tile.featured { flex-direction: row; align-items: center; gap: 16px; }
.lk-home-tile.featured .lk-home-tile-body { padding-top: 0; margin-top: 0; }
.lk-home-tile.featured .lk-home-tile-icon { width: 52px; height: 52px; }
.lk-home-tile.featured .lk-home-tile-icon svg { width: 24px; height: 24px; }
.lk-home-tile.featured .lk-home-tile-label { font-size: 1.15rem; }
/* The two large tiles carry the figures a parent opens the app to check —
   a balance, whether anything is waiting. At caption size they were the
   smallest thing on the biggest tile. */
.lk-home-tile.featured .lk-home-tile-sub {
    font-size: 1.02rem; font-weight: 700; color: var(--slate-700);
    letter-spacing: -0.01em; margin-top: 1px;
}
.lk-home-tile-badge {
    position: absolute; top: 14px; right: 14px;
    min-width: 22px; height: 22px;
    background: var(--link-color); color: #fff;
    font-size: 0.64rem; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

/* PICKUP TYPE BUTTONS */
.pickup-type-btn {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 12px;
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-lg);
    background: #fff; cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body); width: 100%;
    box-shadow: var(--shadow-sm);
}
.pickup-type-btn:hover { border-color: var(--link-border); background: var(--link-tint); box-shadow: var(--shadow-md); }
.pickup-type-btn.active { border-color: var(--link-color); background: var(--link-tint); box-shadow: var(--shadow-md); }
.pickup-type-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.pickup-type-label { font-size: 0.76rem; font-weight: 700; color: var(--slate-600); text-align: center; }
.pickup-type-btn.active .pickup-type-label { color: var(--link-color); }
.pickup-form { display: none; }
.pickup-form.active { display: block; }

/* CANTEEN QUICK BTNS — glass pills that sit on the dark wallet card */
.canteen-quick-btn {
    padding: 7px 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}
.canteen-quick-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.2); }
.canteen-quick-btn.sel { border-color: #fff; background: #fff; color: var(--acc-1, var(--link-color)); }
.canteen-bal .btn-primary { background: #fff; color: var(--acc-1, var(--link-color)); }
.canteen-bal .btn-primary:hover { background: rgba(255,255,255,0.9); }
.canteen-bal .btn-secondary { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(6px); }
.canteen-bal .btn-secondary:hover { background: rgba(255,255,255,0.2); }

/* AUTO-RELOAD — each trigger is a framed panel that fills the card width and
   tints when it's on, instead of a bare checkbox with fields floating loose
   beside it. Same border/tint-on-active language as .pickup-type-btn and
   .channel-btn, and the fields inside use the standard .lk-field/.lk-input
   form controls rather than one-off inline styles. */
.ar-option {
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ar-option.on { border-color: var(--link-color); background: var(--link-tint-bg); }
.ar-option-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ar-option-head--static { cursor: default; }
.ar-option-head input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
    accent-color: var(--link-color);
}
.ar-option-title { font-size: 0.875rem; font-weight: 600; color: var(--slate-800); }
.ar-option-title em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.ar-option-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--slate-100);
}
.ar-option-body .lk-field { margin-bottom: 0; }
.ar-option-body.ar-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ar-option-body.ar-grid-1 { grid-template-columns: 1fr; }
.ar-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
/* $ sits inside the field's left edge rather than as a separate character
   floating next to a narrow box. */
.ar-dollar-field { position: relative; }
.ar-dollar-field::before {
    content: '$'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--slate-400); font-size: 0.84rem; font-weight: 600; pointer-events: none;
}
.ar-dollar-field input { padding-left: 22px; }
.ar-hint { font-size: 0.72rem; color: var(--text-muted); }
.ar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-freq-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; color: var(--slate-700); }
.ar-freq-row input { text-align: center; }
/* Auto-save affordances — no Save button, a quiet note + a brief "Saved ✓". */
.ar-autosave-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 10px; }
.ar-saved-hint { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--green-600, #16A34A); opacity: 0; transform: translateY(-2px); transition: opacity .2s ease, transform .2s ease; }
.ar-saved-hint.show { opacity: 1; transform: translateY(0); }
/* Auto-pay tag on a Recent Transactions row that came from auto-reload. */
.lk-tx-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: var(--link-color, #2563EB); color: #fff; vertical-align: middle; }

/* State banner — carries the whole state in one line at the top of the card:
   a colored dot plus text, tinted to match. Replaces four different inline
   hex colors previously set from JS. */
.ar-status {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-md);
    font-size: 0.82rem; font-weight: 500; margin-bottom: 16px;
}
.ar-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ar-status.on { background: var(--green-50); color: #0E7C4A; }
.ar-status.on .ar-status-dot { background: var(--green-600); }
.ar-status.almost { background: var(--amber-50); color: var(--amber-600); }
.ar-status.almost .ar-status-dot { background: var(--amber-500); }
.ar-status.paused { background: var(--red-50); color: var(--red-600); }
.ar-status.paused .ar-status-dot { background: var(--red-500); }
.ar-status.off { background: var(--slate-50); color: var(--text-muted); }
.ar-status.off .ar-status-dot { background: var(--slate-300); }

@media (max-width: 640px) {
    .ar-option-body, .ar-option-body.ar-grid-3, .ar-date-grid { grid-template-columns: 1fr; }
}

/* SCHEDULE */
.sched-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-100); }
.sched-item:last-child { border-bottom: none; }
.sched-time { font-size: 0.78rem; font-weight: 700; color: var(--slate-400); min-width: 44px; }
.sched-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sched-name { font-size: 0.86rem; font-weight: 600; color: var(--slate-800); }
.sched-loc { font-size: 0.72rem; color: var(--slate-400); }

/* PAGE HERO (inner pages — compact branded strip) */
.lk-page-hero {
    display: flex; align-items: center; gap: 18px;
    padding: 20px 24px;
    background: var(--md-surface);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}
.lk-page-hero-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--md-primary-container);
    display: flex; align-items: center; justify-content: center;
    color: var(--md-on-primary-container); flex-shrink: 0;
}
.lk-page-hero-icon svg { width: 23px; height: 23px; }
.lk-page-hero h1 {
    font-family: var(--font-display);
    font-size: 1.375rem; font-weight: 500;
    color: var(--slate-900); margin-bottom: 2px;
}
.lk-page-hero p { font-size: 0.8125rem; color: var(--slate-500); }

/* CHILD CARDS — each camper gets a consistent identity color (Life360-style
   per-person color coding), carried via data-accent on the card element.
   Material style: flat surface, tonal avatar fill, no colored border bar. */
.lk-child-card {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    background: var(--md-surface);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.lk-child-card:hover { background: var(--md-surface-container-high); }
.lk-child-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 500;
    flex-shrink: 0;
}
.lk-child-info { flex: 1; min-width: 0; }
.lk-child-name { font-weight: 700; font-size: .92rem; color: var(--slate-900); }
.lk-child-meta { font-size: .76rem; color: var(--text-muted); margin-top: 1px; }

/* TX ITEMS */
.lk-tx-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--slate-100);
}
.lk-tx-item:last-child { border-bottom: none; }
.lk-tx-left { display: flex; align-items: center; gap: 10px; }
.lk-tx-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lk-tx-icon.debit { background: var(--red-50); color: var(--red-500); }
.lk-tx-icon.credit { background: var(--green-50); color: var(--green-600); }
.lk-tx-name { font-size: .84rem; font-weight: 600; color: var(--slate-800); }
.lk-tx-date { font-size: .7rem; color: var(--text-muted); }
.lk-tx-amt { font-size: .86rem; font-weight: 700; }
.lk-tx-amt.debit { color: var(--red-500); }
.lk-tx-amt.credit { color: var(--green-600); }

/* PICKUP HISTORY ITEMS */
.lk-hist-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--slate-100);
}
.lk-hist-item:last-child { border-bottom: none; }
.lk-hist-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--slate-500); flex-shrink: 0;
}
.lk-hist-info { flex: 1; }
.lk-hist-label { font-size: .84rem; font-weight: 600; color: var(--slate-800); }
.lk-hist-time { font-size: .71rem; color: var(--text-muted); }
.lk-hist-office-msg { font-size: .74rem; color: var(--slate-600); margin-top: 3px; font-style: italic; }

/* DATE NAV BUTTON */
.lk-date-nav-btn {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-200);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--slate-500);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.lk-date-nav-btn:hover { border-color: var(--link-border); background: var(--link-tint); color: var(--link-color); }

/* UPLOAD ZONE */
.lk-upload-zone {
    border: 2px dashed var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-bottom: 14px;
}
.lk-upload-zone:hover { border-color: var(--link-border); background: var(--link-tint); }
.lk-upload-zone-icon { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--slate-300); }
.lk-upload-zone h4 { font-size: .86rem; font-weight: 600; color: var(--slate-600); margin-bottom: 3px; }
.lk-upload-zone p { font-size: .73rem; color: var(--slate-400); }
.lk-upload-zone input[type="file"] { display: none; }

/* PHOTO GRID */
.lk-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

/* HEALTH VISIT LOG */
.lk-health-visit {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--slate-100);
}
.lk-health-visit:last-child { border-bottom: none; }
.lk-health-visit-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.lk-health-visit-dot.routine { background: var(--green-500); }
.lk-health-visit-dot.attention { background: var(--amber-500); }
.lk-health-visit-dot.sent-home { background: var(--red-500); }
.lk-health-visit-body { flex: 1; }
.lk-health-visit-title { font-size: .86rem; font-weight: 600; color: var(--slate-800); margin-bottom: 3px; }
.lk-health-visit-note { font-size: .78rem; color: var(--slate-500); line-height: 1.55; }
.lk-health-visit-meta { font-size: .69rem; color: var(--slate-400); margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.lk-health-visit-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* REFERENCE PHOTO SLOTS */
.lk-ref-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 4px; }
.lk-ref-photo-slot {
    border: 2px dashed var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lk-ref-photo-slot:hover { border-color: var(--link-border); background: var(--link-tint); }
.lk-ref-photo-slot.uploaded { border-style: solid; border-color: var(--link-border); background: var(--link-tint); }
.lk-ref-photo-slot-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--link-tint); border: 2px solid var(--link-border);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
    font-size: .88rem; font-weight: 700; color: var(--link-color);
}
.lk-ref-photo-slot.uploaded .lk-ref-photo-slot-avatar { background: var(--link-color); color: #fff; border-color: var(--link-color); }
.lk-ref-photo-slot-name { font-size: .82rem; font-weight: 700; color: var(--slate-800); }
.lk-ref-photo-slot-status { font-size: .69rem; color: var(--slate-400); margin-top: 3px; }
.lk-ref-photo-slot.uploaded .lk-ref-photo-slot-status { color: var(--green-600); font-weight: 600; }
.lk-ref-photo-slot input[type="file"] { display: none; }

/* Multi-pose enrollment (front / left / right) — pose diversity drives
   recognition accuracy far more than photo count */
.lk-ref-photo-slot { cursor: default; }
.lk-ref-pose-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.lk-ref-pose-slot {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
.lk-ref-pose-slot:hover { background: var(--link-tint); }
.lk-ref-pose-thumb {
    width: 40px; height: 40px; border-radius: 10px;
    border: 2px dashed var(--slate-300); background: var(--slate-50);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 600; color: var(--slate-400);
    overflow: hidden;
}
.lk-ref-pose-slot.uploaded .lk-ref-pose-thumb {
    border: 2px solid var(--link-color); color: var(--link-color); background: var(--link-tint);
}
.lk-ref-pose-label { font-size: .6rem; font-weight: 600; color: var(--slate-500); }
.lk-ref-pose-slot.uploaded .lk-ref-pose-label { color: var(--link-color); }
.lk-ref-pose-slot input[type="file"] { display: none; }

/* HEALTH DOC ITEMS */
.lk-health-doc {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--slate-100);
}
.lk-health-doc:last-child { border-bottom: none; }
.lk-health-doc-icon {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--product-50); color: var(--product-600);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lk-health-doc-info { flex: 1; }
.lk-health-doc-name { font-size: .84rem; font-weight: 600; color: var(--slate-800); }
.lk-health-doc-meta { font-size: .7rem; color: var(--slate-400); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .lk-sidebar { display: none; }
    /* Top inset matters as much as the bottom one: Android 15 draws apps
       edge-to-edge whether or not the status bar is asked to sit above the
       WebView, so without this the hero runs under the clock and the icons. */
    .lk-main { margin-left: 0; padding: calc(16px + env(safe-area-inset-top)) 14px calc(100px + env(safe-area-inset-bottom)); }
    .lk-bnav { display: block; }
    .lk-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lk-page-header h1 { font-size: 1.2rem; }
    .lk-camp-name { display: none; }
    .channel-btns { flex-direction: column; }
    .lk-hero { padding: 24px 22px 22px; border-radius: var(--radius-xl); }
    .lk-hero-title { font-size: 1.55rem; }
    .lk-home-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .lk-home-tile { min-height: 112px; padding: 16px 15px; grid-column: span 1; }
    .lk-home-tile.featured { grid-column: span 2; min-height: 124px; }
}
@media (max-width: 480px) {
    .lk-stats { grid-template-columns: 1fr; }
    .lk-home-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lk-home-tile { min-height: 130px; }
}

/* ============================================================
   CAMP SHOP (parent side)
   Photo-led, because a parent buying a t-shirt is choosing by
   sight — the admin grid can be text, this can't.
   ============================================================ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.shop-item {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.shop-item:hover { border-color: var(--link-color); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.shop-item.sold-out { opacity: 0.6; }
.shop-item-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--slate-100);
    overflow: hidden;
}
.shop-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-item-noimg {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; line-height: 1;
}
.shop-item-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-item-name { font-size: 0.88rem; font-weight: 700; color: var(--slate-800); line-height: 1.3; }
.shop-item-price { font-size: 0.95rem; font-weight: 800; color: var(--link-color); }
.shop-item-from { font-size: 0.68rem; font-weight: 500; color: var(--slate-400); }
.shop-item-out {
    font-size: 0.75rem; font-weight: 700; color: var(--slate-400);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;
}
.shop-opt-label {
    font-size: 0.65rem; font-weight: 700; color: var(--slate-400);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px;
}
.shop-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-opt {
    font: inherit; font-size: 0.7rem; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--slate-200); background: #fff; color: var(--slate-500);
    cursor: pointer;
}
.shop-opt:hover { border-color: var(--link-color); color: var(--link-color); }
.shop-opt.sel { background: var(--link-color); border-color: var(--link-color); color: #fff; }
.shop-opt.out { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.shop-opt.out:hover { border-color: var(--slate-200); color: var(--slate-500); }
.shop-add { margin-top: 9px; width: 100%; justify-content: center; }

/* ---- cart ---- */
.shop-cart-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--slate-100);
}
.shop-cart-row:last-child { border-bottom: none; }
.shop-cart-info { flex: 1; min-width: 0; }
.shop-cart-name { font-size: 0.85rem; font-weight: 600; color: var(--slate-800); }
.shop-cart-opts { font-size: 0.72rem; color: var(--slate-500); }
.shop-cart-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.shop-cart-qty button {
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--slate-200); background: #fff;
    font-size: 0.95rem; line-height: 1; color: var(--slate-600); cursor: pointer;
}
.shop-cart-qty button:hover { border-color: var(--link-color); color: var(--link-color); }
.shop-cart-qty span { min-width: 18px; text-align: center; font-size: 0.85rem; font-weight: 700; }
.shop-cart-amt { min-width: 62px; text-align: right; font-size: 0.85rem; font-weight: 700; color: var(--slate-800); }
.shop-cart-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 11px; margin-top: 4px; border-top: 2px solid var(--slate-200);
    font-size: 0.88rem; color: var(--slate-600);
}
.shop-cart-total strong { font-size: 1.15rem; color: var(--slate-900); }

/* ---- past orders ---- */
.shop-order { padding: 11px 0; border-bottom: 1px solid var(--slate-100); }
.shop-order:last-child { border-bottom: none; }
.shop-order-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shop-order-lines { font-size: 0.78rem; color: var(--slate-600); line-height: 1.55; margin-top: 4px; }
.shop-order-foot {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--slate-400); margin-top: 5px;
}

/* ─── Parent sign-in ──────────────────────────────────────────────────────
   The same front door as Campistry Lite, in Link's green: mark high on a lit
   brand canvas, one solid action carrying the only shadow on the screen.
   Lite's coral version lives in campistry_lite.css — the two are deliberately
   the same design, so a change to one belongs in both.

   Applied by adding .lk-auth-brand to the auth overlay, so the other overlays
   (create-account, loading detail) keep their own treatment until they're
   brought across too. */
.lk-auth-brand {
    background:
        /* Lighter wash than Lite's: the same white overlay desaturates green
           far more than it does coral, and washed-out green reads as olive. */
        radial-gradient(120% 62% at 50% 6%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 60%),
        linear-gradient(163deg, #18A94D 0%, #157F3D 46%, #0F4A28 100%) !important;
    align-items: flex-start !important;
    padding: calc(clamp(44px, 11vh, 104px) + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
}

.lk-login {
    width: 100%; max-width: 348px; text-align: center; color: #fff;
    animation: lkLoginIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lkLoginIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lk-login { animation: none; } }

.lk-login-badge {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.13));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 28px rgba(6, 46, 24, 0.28);
    display: flex; align-items: center; justify-content: center;
}
/* Masked rather than an <img>: the source PNG is matted and would halo on a
   saturated surface, and a mask lets the mark simply be white. */
.lk-login-mark {
    width: 42px; height: 42px; background: #fff;
    -webkit-mask: url('Campistry_logo.png') center / contain no-repeat;
    mask: url('Campistry_logo.png') center / contain no-repeat;
}

.lk-login-title {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: #fff;
}
.lk-login-title span { opacity: 0.82; }
.lk-login-sub { font-size: 0.9rem; opacity: 0.82; margin: 8px 0 30px; }

.lk-login-field { margin-bottom: 16px; text-align: left; }
.lk-login-field label {
    display: block; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.78); margin: 0 0 8px 2px;
}
.lk-login-input {
    width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px;
    font-family: inherit; font-size: 16px; font-weight: 500;
    color: #fff; caret-color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lk-login-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.lk-login-input:focus {
    outline: none; background: rgba(255, 255, 255, 0.19);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 4px rgba(255, 255, 255, 0.14);
}
/* Chrome's autofill paints its own opaque background and near-black text,
   which would be unreadable here; the inset shadow is the only override. */
.lk-login-input:-webkit-autofill,
.lk-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #17703B inset;
    caret-color: #fff;
}

/* The only element casting a shadow, so it is unmistakably the action. */
.lk-login-go {
    width: 100%; height: 54px; margin-top: 12px; border: none; border-radius: 14px;
    background: #fff; color: #14532D; cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(6, 46, 24, 0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.lk-login-go:active {
    background: rgba(255, 255, 255, 0.9); transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(6, 46, 24, 0.26);
}
.lk-login-alt {
    display: block; width: 100%; margin-top: 18px;
    background: none; border: none; cursor: pointer;
    color: #fff; opacity: 0.78; font-family: inherit;
    font-size: 0.86rem; font-weight: 600;
}
.lk-login-alt:active { opacity: 1; }

.lk-login-err {
    margin: 2px 0 14px; padding: 10px 12px; border-radius: 10px; text-align: left;
    background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff; font-size: 0.82rem; font-weight: 600;
}
.lk-login-msg { min-height: 18px; margin-top: 12px; font-size: 0.8rem; color: #FFE4E6; }

.lk-login-foot {
    margin: 40px 0 0; font-size: 0.74rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}
.lk-login-foot strong { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

/* Password reveal. A parent typing a password on a phone keyboard, one-handed,
   with a child on their hip, needs to be able to check what they typed. */
.lk-login-wrap { position: relative; }
.lk-login-wrap .lk-login-input { padding-right: 50px; }
.lk-login-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: none; color: rgba(255, 255, 255, 0.75); cursor: pointer;
}
.lk-login-eye svg { width: 19px; height: 19px; }
.lk-login-eye[aria-pressed="true"] { color: #fff; }

/* Biometric entry on the unlock screen (_showBioUnlock). Small and quiet on
   purpose: a full-width button the same size as "Sign in" reads as a second,
   competing way in rather than a shortcut belonging to the same one — a
   compact scan-frame icon with a caption is what makes it feel like part of
   this screen instead of bolted onto it. */
.lk-bio-quick {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    margin-bottom: 24px;
}
.lk-bio-quick-btn {
    width: 56px; height: 56px; border-radius: 50%; flex: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.42);
    color: #fff; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease;
}
.lk-bio-quick-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.26); }
.lk-bio-quick-btn:disabled { opacity: 0.5; }
.lk-bio-quick-btn svg { width: 25px; height: 25px; }
.lk-bio-quick-label {
    font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.01em;
}

/* ─── Settings ────────────────────────────────────────────────────────────
   Grouped rows with a section label above each card, which is the pattern
   people already know from their phone's own settings — and the pattern the
   old page was missing, being one long undifferentiated stack of cards. */
.lk-set-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted);
    margin: 22px 2px 8px;
}
.lk-set-card { padding: 4px 16px; }
.lk-set-card .lk-field { margin: 14px 0; }

/* Identity block: who you are, and which camps you're connected to. */
.lk-set-id {
    display: flex; align-items: center; gap: 14px;
    background: var(--md-surface); border-radius: var(--radius-lg);
    padding: 16px; box-shadow: var(--shadow-sm);
}
.lk-set-id-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    background: var(--link-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
}
.lk-set-id-body { min-width: 0; }
.lk-set-id-name { font-size: 1rem; font-weight: 700; color: var(--slate-900); }
.lk-set-id-sub  { font-size: 0.8rem; color: var(--text-muted); word-break: break-all; }
.lk-set-id-camps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lk-set-id-camps span {
    font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: var(--link-tint); color: var(--link-color);
}

/* One row shape for every toggle, so the controls line up down the card
   instead of each label sizing its own row. */
.lk-set-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-top: 1px solid var(--slate-100);
}
.lk-set-card .lk-set-row:first-child,
.lk-set-card .lk-field + .lk-set-row { border-top: 1px solid var(--slate-100); }
.lk-set-card > .lk-set-row:first-child { border-top: none; }
.lk-set-row-main { flex: 1; min-width: 0; }
.lk-set-row-title { font-size: 0.87rem; font-weight: 600; color: var(--slate-900); }
.lk-set-row-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
/* 20px, not 17: this is a touch target on a phone, not a desktop checkbox. */
.lk-set-check { width: 20px; height: 20px; flex: none; accent-color: var(--link-color); cursor: pointer; }

.lk-set-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lk-set-inline .lk-input { flex: 1; min-width: 180px; }
.lk-set-hint { font-size: 0.75rem; min-height: 15px; margin-top: 5px; color: var(--text-muted); }
.lk-set-actions { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.lk-set-saved { font-size: 0.76rem; font-weight: 600; color: var(--green-600); opacity: 0; transition: opacity 0.2s ease; }
.lk-set-saved.show { opacity: 1; }

.lk-set-signout {
    display: block; width: 100%; margin-top: 26px; padding: 14px;
    background: var(--md-surface); border: 1px solid var(--slate-100);
    border-radius: var(--radius-lg); cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--red-500);
}
.lk-set-signout:active { background: var(--slate-50); }
.lk-set-version { text-align: center; font-size: 0.72rem; color: var(--text-muted); margin: 16px 0 4px; }

/* ─── Expandable bottom nav ───────────────────────────────────────────────
   Five tabs cover the common destinations; the rest used to mean going Home
   and picking a tile. Dragging up on the bar (or tapping the grab handle)
   opens the full list in place, so you can cross the app from wherever you
   are. Collapsed height is unchanged, so nothing moves until you ask it to. */
.lk-bnav-grab {
    display: none;                      /* shown with the bar, on mobile only */
    width: 100%; padding: 9px 0 4px; border: none; background: none; cursor: grab;
    -webkit-tap-highlight-color: transparent;
}
.lk-bnav-grab span {
    display: block; width: 38px; height: 4px; margin: 0 auto; border-radius: 999px;
    background: var(--slate-200, #E2E8F0); transition: background 0.15s ease, width 0.15s ease;
}
.lk-bnav.expanded .lk-bnav-grab span { width: 52px; background: var(--slate-400, #94A3B8); }

.lk-bnav-sheet {
    display: grid; grid-template-columns: repeat(4, 1fr);
    /* Uniform rows, so labels of different lengths cannot stagger the grid. */
    grid-auto-rows: 86px;
    gap: 2px 0;
    padding: 0 6px;
    /* Sits under the tab row: the quick toggles stay the top line of the bar
       and these rows appear beneath them as it grows. */
    border-top: 1px solid var(--slate-100, #F1F5F9);
    /* Animating max-height keeps the bar anchored to the bottom while it grows;
       animating height or transform would drag the tab row with it. --sheet-h is
       set from JS to the real content height: animating to a fixed 58vh when the
       content is shorter spends most of the duration travelling through empty
       space, which is what made it feel like it snapped at the end. */
    max-height: 0; overflow: hidden;
    transition: max-height 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease 0.02s;
    opacity: 0;
}
.lk-bnav.expanded .lk-bnav-sheet {
    max-height: var(--sheet-h, 58vh); overflow-y: auto; opacity: 1; padding-bottom: 8px;
}
/* The rows themselves rise in behind the height change, which reads as the
   contents arriving rather than being revealed by a shutter. */
.lk-bnav.expanded .lk-bsheet-item { animation: lkSheetItemIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lkSheetItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .lk-bnav-sheet { transition: none; }
    .lk-bnav.expanded .lk-bsheet-item { animation: none; }
}

.lk-bsheet-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 7px; padding: 12px 2px 8px; border: none; border-radius: var(--radius-md);
    background: none; cursor: pointer;
    font-family: inherit; font-size: 0.7rem; font-weight: 600; line-height: 1.15;
    /* Full-strength label. These were --text-muted, which is right for a caption
       under something else but made a screen of tappable destinations look
       disabled — especially next to the tab row above, which is not muted. */
    color: var(--slate-900); text-align: center;
}
/* One line, ellipsised. "Emergency Info" wrapping to two lines while its
   neighbours stay on one is what made the rows look ragged. */
.lk-bsheet-item > span:last-child {
    display: block; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lk-bsheet-item:active { background: var(--slate-50, #F8FAFC); }
.lk-bsheet-item.active { color: var(--link-color); }
.lk-bsheet-icon {
    width: 44px; height: 44px; border-radius: 13px; flex: none;
    display: flex; align-items: center; justify-content: center;
    /* Brand tint rather than grey-on-grey: a grey glyph in a grey box is what
       read as dimmed. */
    background: var(--link-tint); color: var(--link-color);
}
.lk-bsheet-item.active .lk-bsheet-icon { background: var(--md-primary-container); }
.lk-bsheet-icon svg { width: 20px; height: 20px; }

.lk-bnav-backdrop {
    display: none; position: fixed; inset: 0; z-index: 89;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0; transition: opacity 0.24s ease;
}
.lk-bnav-backdrop.show { display: block; opacity: 1; }

/* Matches where .lk-bnav itself becomes visible (768px). At 900px the
   handle appeared on screens that have no bottom bar at all. */
@media (max-width: 768px) {
    .lk-bnav-grab { display: block; }
}

/* Collapsible canteen cards — default closed, tap header to expand */
.lk-card-toggle { cursor: pointer; user-select: none; }
.lk-card-toggle h2 { margin: 0; }
.lk-head-main { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.lk-card-summary { font-size: .72rem; color: var(--text-muted); font-weight: 500; line-height: 1.3; }
.lk-collapsible:not(.collapsed) .lk-card-summary { display: none; }
.lk-card-chevron { color: var(--text-muted); font-size: .8rem; transition: transform .18s ease; flex-shrink: 0; }
.lk-collapsible:not(.collapsed) .lk-card-chevron { transform: rotate(180deg); }
.lk-collapsible.collapsed .lk-card-head { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.lk-collapsible.collapsed > *:not(.lk-card-head) { display: none !important; }

/* Auto-reload "card on file" line */
.ar-cardonfile { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--slate-100, #e2e8f0); border-radius: 12px; background: var(--slate-50, #f8fafc); font-size: .82rem; color: var(--slate-700, #334155); }
.ar-cardonfile-icon { font-size: 1rem; }
.ar-cardonfile-label { font-weight: 700; }
.ar-cardonfile-none { color: var(--text-muted); }