/* ============================================================================
   Campistry Lite — mobile companion design system
   Loads after campistry-unified.css. Coral is the Lite brand; each launcher
   tile carries its parent product's color. Built phone-first: big tap targets,
   no horizontal scroll, safe-area aware, native-app feel.
   ============================================================================ */

:root {
    /* ── Coral ramp — Lite brand ─────────────────────────────────────────
       Base hue ~9deg. Everything else in the system is derived from it. */
    --coral-50:  #FEF2EF;
    --coral-100: #FCDFD8;
    --coral-200: #F9C2B5;
    --coral-300: #F49C88;
    --coral-500: #EE6A53;
    --coral-600: #DA4B32;
    --coral-700: #B23A28;

    /* Per-product tile colors (home launcher) */
    --c-flow:   #147D91;
    --c-me:     #F59E0B;
    --c-alerts: #EE6A53;
    --c-go:     #0EA5E9;

    --accent:      var(--coral-500);
    --accent-dark: var(--coral-600);
    --accent-tint: var(--coral-50);

    /* ── Tinted neutrals ─────────────────────────────────────────────────
       These used to be cool blue-greys (hue ~220deg) under a warm coral
       brand — two palettes that shared nothing, which is what reads as
       "white with some colour on top". They're now built at the brand's own
       hue with a trace of saturation, so every surface carries the same
       undertone and coral looks native to the app instead of applied to it. */
    --ink:    #1F1714;   /* warm near-black, not blue-black */
    --ink-2:  #5F4F49;
    --muted:  #9A8B85;
    --line:   #EDE5E1;
    --line-2: #DFD4CE;

    /* ── Tonal elevation ────────────────────────────────────────────────
       Material 3's idea: height is expressed as TONE first and shadow
       second, so the hierarchy survives even where shadows are invisible.
       Sunken sits below the canvas; raised surfaces get brighter as they
       come forward. */
    --surface-sunk: #F1EAE6;
    --bg:           #F7F2EF;
    --card:         #FFFDFC;
    --card-2:       #F6F0EC;
    --surface-over: #FFFFFF;   /* sheets/menus — the top of the stack */

    /* M3 shape scale — same tokens/values as campistry_link.css, so a
       component that's structurally the same in both apps (a card, a
       button, a chip) resolves to the identical corner radius. --r-sm/--r/
       --r-lg are kept as aliases so every existing rule below that already
       reads them doesn't need to change. */
    --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px;
    --r-sm: var(--radius-md);
    --r:    var(--radius-lg);
    --r-lg: var(--radius-xl);

    /* M3 elevation — neutral, shallow shadows (height expressed through tone
       first, shadow second), matching campistry_link.css's --shadow-sm/-md/
       -lg exactly. Previously these were tinted with the brand's warm dark
       (rgba(74,38,26,...)); Link's own system never tints shadows by brand,
       so a card or sheet now casts the same neutral shadow in both apps. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px 1px rgba(0,0,0,0.05);
    --shadow:    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);

    --header-h: 58px;
    --tabbar-h: 64px;

    /* M3 system font — Roboto everywhere, one family varied by weight
       instead of a display+body pairing. Same stack as campistry_link.css,
       loaded via the same Google Fonts request (see campistry_lite.html /
       campistry_lite_login.html). Coral stays the brand hue — this only
       retires the serif display face in favor of Link's typographic system. */
    --font-display: 'Roboto', 'Roboto Flex', system-ui, -apple-system, sans-serif;
    --font-body: 'Roboto', 'Roboto Flex', system-ui, -apple-system, sans-serif;
}

/* ── Dark context ────────────────────────────────────────────────────────
   Not an inversion of the light theme: dark UI has its own logic. Surfaces
   are warm charcoals rather than pure black (pure black crushes depth and
   makes shadows useless), they step up in tone as they come forward, and
   the accent is lifted because a mid-tone coral loses contrast against a
   dark canvas. */
/* Dark applies when the phone asks for it — unless the user explicitly
   chose Light — and always when they explicitly chose Dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent:      #F58367;
        --accent-dark: #FA9A82;
        --accent-tint: #2E1C17;

        --ink:    #F7EFEC;
        --ink-2:  #C3B2AB;
        --muted:  #8E7C75;
        --line:   #2E2521;
        --line-2: #3C312C;

        --surface-sunk: #120E0D;
        --bg:           #171211;
        --card:         #201917;
        --card-2:       #292120;
        --surface-over: #2E2523;

        --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
        --shadow:    0 2px 4px rgba(0,0,0,0.35), 0 12px 30px -10px rgba(0,0,0,0.6);
        --shadow-lg: 0 18px 46px -12px rgba(0,0,0,0.7);
    }
}

:root[data-theme="dark"] {
    --accent:      #F58367;
    --accent-dark: #FA9A82;
    --accent-tint: #2E1C17;

    --ink:    #F7EFEC;
    --ink-2:  #C3B2AB;
    --muted:  #8E7C75;
    --line:   #2E2521;
    --line-2: #3C312C;

    --surface-sunk: #120E0D;
    --bg:           #171211;
    --card:         #201917;
    --card-2:       #292120;
    --surface-over: #2E2523;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow:    0 2px 4px rgba(0,0,0,0.35), 0 12px 30px -10px rgba(0,0,0,0.6);
    --shadow-lg: 0 18px 46px -12px rgba(0,0,0,0.7);
}


* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--ink);
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
}

/* ── Ambient backdrop ────────────────────────────────────────────────────
   Glass only reads against something with variation in it — over a flat fill
   a translucent surface is indistinguishable from an opaque one, which is
   why frosted panels on a plain canvas just look like grey boxes. This is a
   soft, fixed wash of the brand hues sitting behind everything, giving the
   surfaces above something to pick up and refract. */
body::before {
    content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(46% 34% at 12% 4%,  color-mix(in srgb, var(--coral-300) 46%, transparent) 0%, transparent 62%),
        radial-gradient(40% 30% at 92% 12%, color-mix(in srgb, var(--c-me) 26%, transparent) 0%, transparent 64%),
        radial-gradient(52% 40% at 74% 88%, color-mix(in srgb, var(--c-flow) 20%, transparent) 0%, transparent 66%),
        var(--bg);
    filter: saturate(120%);
}

button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; }
button { cursor: pointer; border: none; background: none; }

@keyframes liteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes litePush { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes litePop  { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.lite-view.anim { animation: liteIn 0.22s cubic-bezier(0.16,1,0.3,1) both; }
/* Screens push in from the right and pop back from the left, like a native stack. */
.lite-view.anim-push { animation: litePush 0.26s cubic-bezier(0.22,1,0.36,1) both; }
.lite-view.anim-pop  { animation: litePop  0.24s cubic-bezier(0.22,1,0.36,1) both; }
@media (prefers-reduced-motion: reduce) {
    .lite-view.anim, .lite-view.anim-push, .lite-view.anim-pop { animation: none; }
    .lite-sheet { animation: none; }
}

/* Chrome shouldn't behave like a web page: no text selection on controls, no
   rubber-band chaining to the document, no long-press callout. */
.lite-app, .lite-tabbar, .lite-header, .lite-launch-tile, .lite-ctrl, .lite-seg,
.lite-pick, .lite-chip, .lite-btn, .lite-slot-time, .lite-bunk-head, .lite-sheet-grip {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lite-main, .lite-sheet, .lite-grid-wrap, .lite-picklist-scroll { overscroll-behavior: contain; }

/* ─── Launch screen ───────────────────────────────────────────────────────
   An installed app's launch should read as one continuous moment: the OS shows
   the manifest's background_color and icon, then this takes over. They share a
   background, so there's no flash of a different colour at the handoff.
   Deliberately bare — the Lite wordmark is the only thing on screen, and it
   doubles as the progress indicator by filling from the bottom as the camp
   loads. A spinner says "waiting"; a mark that fills says "working". */
.lite-splash {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 24px;
    background:
        radial-gradient(58% 40% at 50% 24%, color-mix(in srgb, var(--coral-300) 40%, transparent) 0%, transparent 70%),
        radial-gradient(50% 36% at 84% 92%, color-mix(in srgb, var(--c-flow) 16%, transparent) 0%, transparent 70%),
        var(--bg);
    transition: opacity 0.42s cubic-bezier(0.4,0,0.2,1), transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
/* Hand-off: the launch screen lifts away as the app settles in underneath. */
.lite-splash.done { opacity: 0; transform: scale(1.06); pointer-events: none; }

.lite-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 260px; }

/* Registering --fill makes it a real animatable percentage; without this the
   gradient stop would jump between boot stages instead of rising. Browsers
   that don't support @property still fill, just in steps. */
@property --fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* The Lite wordmark IS the progress bar. The PNG becomes a mask, so the
   gradient underneath shows only through the letterforms: everything below
   --fill is solid brand colour, everything above is a faint ghost of the same
   shape. As boot stages land the line rises and the outline fills in.
   Box is 2.1:1 to match Lite_clean.png, so `contain` doesn't letterbox it. */
.lite-splash-logo {
    --fill: 0%;
    width: 184px; height: 88px;
    /* The fill edge is feathered over a few percent rather than being a hard
       line. A crisp boundary makes every sub-pixel step of the fill visible as
       a stutter; a soft one reads as a rising level. */
    background: linear-gradient(to top,
        var(--accent) 0%,
        var(--accent) calc(var(--fill) - 2%),
        color-mix(in srgb, var(--ink) 20%, transparent) calc(var(--fill) + 3%),
        color-mix(in srgb, var(--ink) 20%, transparent) 100%);
    -webkit-mask: url('Lite_clean.png') center / contain no-repeat;
    mask: url('Lite_clean.png') center / contain no-repeat;
    /* No transition: the fill is driven per animation frame, and a transition
       would lag a frame behind every update instead of smoothing anything. */
    animation: liteMarkIn 0.5s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}
@keyframes liteMarkIn {
    from { opacity: 0; transform: scale(0.86); }
    to   { opacity: 1; transform: none; }
}

.lite-splash-status {
    font-size: 0.86rem; color: var(--ink-2); min-height: 1.2em;
    opacity: 0; transition: opacity 0.3s ease;
}
.lite-splash-status.show { opacity: 1; }
.lite-splash-status.error { color: #B42318; font-weight: 600; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lite-splash-status.error { color: #FDA29B; }
}
:root[data-theme="dark"] .lite-splash-status.error { color: #FDA29B; }

@media (prefers-reduced-motion: reduce) {
    .lite-splash-logo { animation: none; transition: none; }
    .lite-splash { transition: opacity 0.2s linear; }
    .lite-splash.done { transform: none; }
}

/* ─── App shell ───────────────────────────────────────────────────────── */
.lite-app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; }

.lite-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    background: color-mix(in srgb, var(--card) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
/* No top bar anywhere — home uses the hero settings button; in-app you
   swipe/back-gesture to return to the launcher (native-app feel). */
.lite-app[data-screen="app"] .lite-header { display: none; }
.lite-app[data-screen="app"] .lite-header-titles { display: none; }
.lite-back {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: none; align-items: center; justify-content: center; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.lite-back:active { background: var(--accent-tint); color: var(--accent-dark); }
.lite-app[data-screen="app"] .lite-back { display: flex; }

.lite-header-titles { flex: 1; min-width: 0; }
.lite-header-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lite-header-title span { color: var(--accent); }
.lite-header-sub { font-size: 0.74rem; color: var(--muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lite-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    /* Material-style: a solid fill with white initials (like Link's own
       avatars — see campistry_link.css's .lk-avatar comment), not a
       gradient sheen. */
    background: var(--accent);
    color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.lite-avatar:active { transform: scale(0.94); }

/* ─── Account menu ────────────────────────────────────────────────────── */
.lite-menu {
    position: fixed; top: calc(var(--header-h) + env(safe-area-inset-top) - 4px); right: 12px; z-index: 60;
    background: var(--surface-over); border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: var(--shadow-lg); min-width: 240px; overflow: hidden;
    animation: liteIn 0.16s ease both;
}
.lite-menu-head { display: flex; align-items: center; gap: 11px; padding: 14px; border-bottom: 1px solid var(--line); }
.lite-menu-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    /* Material-style: a solid fill with white initials (like Link's own
       avatars — see campistry_link.css's .lk-avatar comment), not a
       gradient sheen. */
    background: var(--accent);
    color: #fff; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.lite-menu-id { min-width: 0; }
.lite-menu-user { font-size: 0.82rem; font-weight: 600; color: var(--ink); word-break: break-all; line-height: 1.2; }
.lite-menu-role { margin-top: 4px; }
.lite-menu-item {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 13px 14px; font-size: 0.92rem; font-weight: 500; color: var(--ink);
    text-decoration: none; border-top: 1px solid var(--line);
}
.lite-menu-item svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.lite-menu-item:active { background: var(--accent-tint); }
.lite-menu-danger { color: #C0392B; }
.lite-menu-danger svg { color: #C0392B; }

.lite-role-badge {
    display: inline-block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-dark); background: var(--accent-tint); padding: 3px 8px; border-radius: 999px;
}

/* ─── Main / views ────────────────────────────────────────────────────── */
/* No top header on any screen — content clears the status bar itself. */
.lite-main { flex: 1; padding: calc(14px + env(safe-area-inset-top)) 15px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
.lite-app[data-screen="home"] .lite-header { display: none; }
.lite-app[data-screen="home"] .lite-main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ─── HOME LAUNCHER ───────────────────────────────────────────────────── */
/* Hero card — mirrors the website dashboard hero, in the Lite coral theme.
   Always coral regardless of the per-app accent. */
.lite-hero-card {
    position: relative;
    background: linear-gradient(150deg, #F0765F 0%, #C4402A 100%);
    /* radius-2xl, same corner radius as Link's own .lk-hero */
    border-radius: var(--radius-2xl); padding: 22px 20px; color: #fff; margin-bottom: 18px;
    box-shadow: 0 16px 36px -14px rgba(196,64,42,0.55);
}
.lite-hero-settings {
    position: absolute; top: 16px; right: 16px; z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.lite-hero-greeting, .lite-hero-welcome, .lite-hero-sub { position: relative; z-index: 1; }
.lite-hero-settings:active { background: rgba(255,255,255,0.3); transform: scale(0.94); }
.lite-hero-greeting { font-size: 0.98rem; font-weight: 500; opacity: 0.92; }
.lite-hero-welcome { padding-right: 40px; }
.lite-hero-welcome { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-top: 4px; }
.lite-hero-welcome span { color: #FBD38D; }
.lite-hero-sub { font-size: 0.86rem; opacity: 0.85; margin-top: 10px; line-height: 1.45; }
.lite-hero-widget {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px; padding: 15px; margin-top: 14px; text-align: center;
}
.lite-hero-clock .time { font-family: var(--font-display); font-size: 1.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.lite-hero-clock .date { font-size: 0.8rem; opacity: 0.85; margin-top: 3px; }
.lite-hero-weather { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lite-hero-weather .wx-icon { color: #fff; display: flex; }
.lite-hero-weather .wx-temp { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.lite-hero-weather .wx-desc { font-size: 0.8rem; opacity: 0.85; }

/* Product tiles — square app-icon style: logo + uppercase name, product-color
   base accent. 3-up grid. */
.lite-launch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.lite-launch-grid.single { grid-template-columns: 1fr; }
/* Two across, four down — eight apps in a clean 2x4 with room for the logos. */
.lite-launch-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
    min-height: 104px; padding: 16px 10px;
    /* radius-xl, matching Link's own .lk-home-tile corner radius */
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl);
    border-bottom: 4px solid var(--ql, var(--line-2)); box-shadow: var(--shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lite-launch-grid.single .lite-launch-tile { min-height: 96px; }
.lite-launch-tile:active { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.lite-launch-tile.soon { opacity: 0.5; background: var(--bg); box-shadow: var(--shadow-sm); border-bottom-color: var(--line-2); }
.lite-launch-icon-box { display: flex; align-items: center; justify-content: center; height: 34px; }
/* Wordmarks render as a mask filled with the product colour — see tileHTML.
   contain keeps each logo's own aspect ratio inside a shared box. */
.lite-launch-logo { height: 34px; width: auto; max-width: 130px; object-fit: contain; }
.lite-launch-mask {
    display: block; width: 130px; height: 34px;
    background-color: var(--ql, var(--ink-2));
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}
/* On dark the raw product colours sit too close to the surface, so lift them
   toward white — the same reasoning as the per-app accent. */
:root[data-theme="dark"] .lite-launch-mask { background-color: color-mix(in srgb, var(--ql) 72%, #FFFFFF); }
.lite-launch-icon { width: 32px; height: 32px; color: var(--ql, var(--ink-2)); }
.lite-launch-icon svg { width: 100%; height: 100%; }
.lite-launch-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.lite-launch-tile.soon .lite-launch-name { color: var(--muted); }
.lite-launch-soon {
    position: absolute; top: 8px; right: 8px;
    font-size: 0.54rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); background: var(--card); border: 1px solid var(--line-2);
    padding: 2px 6px; border-radius: 999px;
}

/* ─── Bottom tab bar ──────────────────────────────────────────────────── */
.lite-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    display: none; justify-content: space-around; align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line); max-width: 680px; margin: 0 auto;
}
.lite-app[data-screen="app"] .lite-tabbar { display: flex; }
.lite-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: var(--muted); font-size: 0.67rem; font-weight: 600; min-height: 44px;
    transition: color 0.15s ease;
}
.lite-tab-ic { width: 46px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.lite-tab-ic svg { width: 22px; height: 22px; }
.lite-tab.active { color: var(--accent); }
.lite-tab.active .lite-tab-ic { background: var(--accent-tint); }
.lite-tab:active .lite-tab-ic { background: var(--coral-100); }

/* ─── Cards & shared ──────────────────────────────────────────────────── */
/* Borderless, shadow-only elevation — matches Link's own .lk-card ("flat
   surface, minimal shadow" per Material 3's elevated-card convention)
   instead of the border+shadow combination the rest of Lite's chrome uses
   for smaller elements (chips, inputs, control bars — Link keeps borders on
   its own analogous small controls too, e.g. .lk-input, .channel-btn). */
.lite-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 15px; margin-bottom: 12px; transition: box-shadow 0.2s ease; }
.lite-card:hover { box-shadow: var(--shadow-lg); }
.lite-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; }
.lite-section-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 18px 4px 9px; }
.lite-empty { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 40px 18px; line-height: 1.5; }
.lite-empty-icon { font-size: 2.1rem; margin-bottom: 10px; }

/* Pill-shaped (radius-full), like Link's .btn/.btn-primary — Material 3
   buttons are always fully rounded, never a soft rounded-rect. The mobile
   press-scale stays (Link has no touch equivalent to copy; this is the
   native-app affordance Lite already had, just reshaped). */
.lite-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 20px; border-radius: var(--radius-full); font-size: 0.95rem; font-weight: 600; border: 1px solid transparent; background: var(--accent); color: #fff; transition: transform 0.1s ease, background 0.15s ease; }
.lite-btn:active { transform: scale(0.98); background: var(--accent-dark); }
.lite-btn:disabled { opacity: 0.5; }
.lite-btn.secondary { background: var(--card); color: var(--accent-dark); border-color: var(--line-2); }
.lite-btn.danger { background: var(--card); color: #C0392B; border-color: #F3C2BA; }
.lite-btn.block { display: flex; width: 100%; }

.lite-input, .lite-select, .lite-textarea {
    width: 100%; min-height: 48px; padding: 11px 14px;
    /* 1.5px + radius-md, same as Link's .lk-input */
    border: 1.5px solid var(--line-2); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lite-input:focus, .lite-select:focus, .lite-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.lite-field { margin-bottom: 13px; }
.lite-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); margin: 0 2px 6px; }

.lite-switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.lite-switch input { opacity: 0; width: 0; height: 0; }
.lite-switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background 0.18s ease; }
.lite-switch .slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.18s ease; }
.lite-switch input:checked + .slider { background: var(--accent); }
.lite-switch input:checked + .slider::before { transform: translateX(20px); }

/* ─── Date bar (modern: chevrons flank a centered date pill) ──────────── */
.lite-datebar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.lite-date-arrow {
    width: 48px; flex: none; border-radius: 15px;
    border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.lite-date-arrow svg { width: 20px; height: 20px; }
.lite-date-arrow:active { background: var(--accent-tint); color: var(--accent-dark); }
.lite-date-pill {
    flex: 1; position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 10px 12px; border-radius: 15px;
    background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
}
.lite-date-pill:active { background: var(--accent-tint); }
.lite-date-day { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.lite-date-tag { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.lite-date-tag.today { color: var(--accent-dark); background: var(--accent-tint); padding: 2px 9px; border-radius: 999px; }
.lite-date-pill input[type="date"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }

/* ─── Segmented control (mode / scope toggles) ────────────────────────── */
.lite-seg { display: flex; gap: 3px; padding: 3px; margin-bottom: 12px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 13px; }
.lite-seg-btn { flex: 1; min-height: 38px; border-radius: 10px; font-size: 0.85rem; font-weight: 600;
    color: var(--ink-2); background: transparent; transition: background 0.15s ease, color 0.15s ease; }
.lite-seg-btn.active { background: var(--card); color: var(--accent-dark); box-shadow: var(--shadow-sm); }

/* ─── Now bar ─────────────────────────────────────────────────────────── */
.lite-nowbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.lite-now-step { min-width: 54px; height: 46px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 0.85rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.lite-now-step:active { background: var(--accent-tint); }
.lite-now-label { flex: 1; text-align: center; position: relative; }
.lite-now-label .t { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; }
.lite-now-label .s { font-size: 0.7rem; color: var(--muted); }
.lite-now-label input[type="time"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.lite-now-reset { height: 46px; padding: 0 17px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--card); color: var(--accent-dark); font-size: 0.85rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.lite-now-reset.live { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── Usage bars ──────────────────────────────────────────────────────── */
.lite-usage-row { padding: 10px 15px; border-bottom: 1px solid var(--line); }
.lite-usage-row:last-child { border-bottom: none; }
.lite-usage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lite-usage-name { font-size: 0.9rem; font-weight: 500; }
.lite-usage-count { font-size: 0.82rem; font-weight: 800; color: var(--accent-dark); }
.lite-usage-bar { height: 7px; border-radius: 999px; background: var(--accent-tint); overflow: hidden; }
.lite-usage-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; }

/* ─── Availability cards (Reports → what's free) ──────────────────────── */
.lite-avail-card { padding: 12px 14px; }
.lite-avail-card.free { border-left: 3px solid #12B76A; }
.lite-avail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lite-avail-name { font-weight: 600; font-size: 0.95rem; }
.lite-avail-card .lite-slot-loc { margin-top: 5px; }

/* ─── Chips ───────────────────────────────────────────────────────────── */
.lite-chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lite-chiprow::-webkit-scrollbar { display: none; }
.lite-chip { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.85rem; font-weight: 600; color: var(--ink-2); min-height: 40px; box-shadow: var(--shadow-sm); }
.lite-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Schedule / bunk cards ───────────────────────────────────────────── */
.lite-bunk-card { padding: 0; overflow: hidden; }
.lite-bunk-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: var(--accent-tint); border-bottom: 1px solid var(--line); }
.lite-bunk-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--accent-dark); letter-spacing: -0.01em; }
.lite-bunk-div { font-size: 0.74rem; color: var(--ink-2); font-weight: 500; }
.lite-slot { display: flex; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.lite-slot:last-child { border-bottom: none; }
.lite-slot-time { flex: none; width: 88px; }
.lite-slot-time .t1 { font-size: 0.82rem; font-weight: 700; }
.lite-slot-time .t2 { font-size: 0.72rem; color: var(--muted); }
.lite-slot-body { flex: 1; min-width: 0; }
.lite-slot-activity { font-size: 0.95rem; font-weight: 600; }
.lite-slot-loc { font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; }
.lite-slot.now { background: var(--accent-tint); }
.lite-slot.now .lite-slot-time .t1 { color: var(--accent-dark); }

.lite-league-badge { display: inline-block; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: #FEF0C7; color: #9A6700; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.lite-matchup { font-size: 0.8rem; color: var(--ink-2); padding: 3px 0 0; }
.lite-matchup.mine { color: var(--accent-dark); font-weight: 700; }

/* Pinned / reserved / trip markers on a schedule slot */
.lite-kind-badge { display: inline-block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }
.lite-kind-badge.pinned { background: #EEF2FF; color: #3730A3; }
.lite-kind-badge.reserved { background: #FEF3F2; color: #B42318; }
.lite-kind-badge.trip { background: #ECFDF5; color: #065F46; }
.lite-slot.kind-pinned { border-left: 3px solid #818CF8; }
.lite-slot.kind-reserved { border-left: 3px solid #F87171; }
.lite-slot.kind-trip { border-left: 3px solid #34D399; }
.lite-slot.kind-league { border-left: 3px solid #60A5FA; }

/* League "view matchups & games" link + sheet */
.lite-league-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-tint); border: none; border-radius: 999px; cursor: pointer; }
.lite-league-link:active { opacity: 0.7; }
.lite-games-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lite-game-row { padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.lite-game-row.mine { background: var(--accent-tint); border-color: var(--accent); }
.lite-game-teams { font-size: 0.92rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lite-game-you { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--accent-dark); padding: 2px 7px; border-radius: 999px; }
.lite-game-meta { font-size: 0.8rem; color: var(--ink-2); margin-top: 3px; }

/* ─── Post-edit + rainy day ───────────────────────────────────────────── */
.lite-slot.tappable { cursor: pointer; }
.lite-slot.tappable:active { background: var(--accent-tint); }
.lite-conflict { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 0.8rem; font-weight: 600; }
/* Compact control bar: two labelled pickers + search/overflow icons, one row. */
.lite-ctrlbar { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.lite-ctrl { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 42px; padding: 4px 9px 4px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 0.83rem; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.lite-ctrl-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.lite-ctrl-cap { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); line-height: 1; }
.lite-ctrl-val { font-size: 0.84rem; font-weight: 700; color: var(--ink); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lite-ctrl svg { width: 15px; height: 15px; flex: none; }
.lite-ctrl:active { background: var(--accent-tint); border-color: var(--accent); }
.lite-ctrl.grow { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.lite-ctrl.grow > .lite-ctrl-txt { flex: 1 1 auto; overflow: hidden; }
.lite-ctrl.icon { width: 42px; height: 42px; min-height: 42px; flex: none; padding: 0; border-radius: 999px; color: var(--ink-2); }
.lite-ctrl.icon + .lite-ctrl.icon { margin-left: 0; }
.lite-ctrl.icon svg { width: 18px; height: 18px; }
.lite-ctrl.icon.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }
.lite-ctrl.icon.alert { position: relative; }
.lite-ctrl.icon.alert::after { content: ''; position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #3B82F6; border: 1.5px solid var(--card); }
.lite-searchrow { margin-bottom: 10px; }

/* Sheet pickers (view / group by / more) */
.lite-picklist { display: flex; flex-direction: column; margin-top: 4px; }
.lite-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 4px; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.lite-pick:first-child { border-top: none; }
.lite-pick-group { padding: 12px 4px 5px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.lite-pick-group + .lite-pick { border-top: none; }
.lite-picklist-scroll { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lite-pick svg { width: 19px; height: 19px; flex: none; color: var(--accent-dark); }
.lite-pick-main { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.lite-pick.on .lite-pick-main { color: var(--accent-dark); font-weight: 800; }
.lite-pick-hint { font-size: 0.76rem; font-weight: 500; color: var(--ink-2); }
.lite-rain-row { padding: 10px 0; border-top: 1px solid var(--line); }
.lite-rain-what { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.lite-rain-meta { font-size: 0.76rem; color: var(--ink-2); margin: 2px 0 6px; }

/* ─── Period-first (Time) view ────────────────────────────────────────── */
.lite-bunk-card.now .lite-bunk-head { background: var(--accent-tint); }
.lite-tl-row { padding: 11px 15px; border-top: 1px solid var(--line); }
.lite-tl-row:first-of-type { border-top: none; }
.lite-tl-row.kind-pinned { border-left: 3px solid #818CF8; }
.lite-tl-row.kind-reserved { border-left: 3px solid #F87171; }
.lite-tl-row.kind-trip { border-left: 3px solid #34D399; }
.lite-tl-row.kind-league { border-left: 3px solid #60A5FA; }
.lite-who-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.lite-who { font-size: 0.72rem; font-weight: 600; color: var(--ink-2); background: var(--card-2); border-radius: 999px; padding: 3px 9px; }
.lite-who.all { color: var(--accent-dark); background: var(--accent-tint); font-weight: 800; }

/* ─── Grid view (periods × bunks) ─────────────────────────────────────── */
.lite-grid-wrap { overflow: auto; max-height: 66vh; border: 1px solid var(--line); border-radius: 14px; background: var(--card); -webkit-overflow-scrolling: touch; }
.lite-grid { border-collapse: separate; border-spacing: 0; font-size: 0.78rem; }
.lite-grid th, .lite-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.lite-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 9px 10px; font-size: 0.72rem; font-weight: 800; color: var(--ink-2); text-align: left; white-space: nowrap; }
.lite-grid-corner { left: 0; z-index: 3 !important; min-width: 62px; }
.lite-grid-bunk { min-width: 116px; max-width: 116px; }
.lite-grid-time { position: sticky; left: 0; z-index: 1; background: var(--card); padding: 8px 10px; text-align: left; white-space: nowrap; min-width: 62px; }
.lite-grid-time .t1 { display: block; font-size: 0.74rem; font-weight: 800; color: var(--ink); }
.lite-grid-time .t2 { display: block; font-size: 0.66rem; color: var(--muted); }
.lite-grid-cell { padding: 8px 10px; vertical-align: top; min-width: 116px; max-width: 116px; cursor: pointer; }
.lite-grid-cell .g1 { display: block; font-weight: 700; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lite-grid-cell .g2 { display: block; font-size: 0.7rem; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lite-grid-cell.empty { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.025) 5px, rgba(0,0,0,0.025) 10px); cursor: default; }
.lite-grid-cell:active:not(.empty) { background: var(--accent-tint); }
.lite-grid-cell.kind-league { background: #EFF6FF; }
.lite-grid-cell.kind-pinned { background: #EEF2FF; }
.lite-grid-cell.kind-reserved { background: #FEF3F2; }
.lite-grid-cell.kind-trip { background: #ECFDF5; }
.lite-grid tr.now .lite-grid-time { box-shadow: inset 3px 0 0 var(--accent); }
.lite-grid tr.now .lite-grid-time .t1 { color: var(--accent-dark); }

/* ─── Roster / camper ─────────────────────────────────────────────────── */
.lite-camper { padding: 0; overflow: hidden; }
.lite-camper-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 15px; text-align: left; }
.lite-camper-name { font-size: 0.95rem; font-weight: 600; }
.lite-camper-meta { font-size: 0.75rem; color: var(--muted); }
.lite-camper-flags { display: flex; gap: 5px; }
.lite-flag { font-size: 0.66rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: #FDE4E1; color: #B42318; }
.lite-flag.diet { background: #FEF0C7; color: #9A6700; }
.lite-flag.med { background: #E0EAFF; color: #3538CD; }
/* Medication status. "Due" has to read as an outstanding task, "given" as
   settled — same shape, opposite urgency, so a counselor can scan a bunk. */
.lite-flag.meds { background: #E0EAFF; color: #3538CD; }
.lite-flag.given { background: #D3F8E0; color: #067647; }
.lite-camper-chev { color: var(--muted); flex: none; }
.lite-camper-details { padding: 0 15px 14px; font-size: 0.84rem; color: var(--ink-2); border-top: 1px dashed var(--line-2); }
.lite-camper-details dt { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 11px; }
.lite-camper-details dd { margin: 2px 0 0; }
.lite-camper-details a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }

/* ─── League view ─────────────────────────────────────────────────────── */
.lite-team-hero { text-align: center; padding: 22px 15px; }
.lite-team-hero .league { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.lite-team-hero .team { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--accent-dark); margin: 5px 0; letter-spacing: -0.01em; }
.lite-team-hero .record { font-size: 0.85rem; color: var(--ink-2); }
.lite-standings { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lite-standings th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 7px 9px; border-bottom: 1px solid var(--line); }
.lite-standings td { padding: 9px; border-bottom: 1px solid var(--line); }
.lite-standings tr:last-child td { border-bottom: none; }
.lite-standings tr.mine td { background: var(--accent-tint); font-weight: 700; }

/* ─── Staff & messaging ───────────────────────────────────────────────── */
.lite-staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lite-staff-info { min-width: 0; }
.lite-staff-name { font-weight: 600; font-size: 0.95rem; }
.lite-staff-meta { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.lite-pill { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); margin: 2px 4px 0 0; }
.lite-pill.gray { background: var(--bg); color: var(--ink-2); }
.lite-pill.green { background: #DCFAE6; color: #067647; }
.lite-bunk-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.lite-bunk-picker .lite-chip { min-height: 36px; padding: 7px 13px; font-size: 0.8rem; }
.lite-preview-msg { background: var(--accent-tint); border-radius: 13px; padding: 11px 13px; font-size: 0.82rem; white-space: pre-wrap; margin-top: 8px; word-break: break-word; }
.lite-note { font-size: 0.78rem; color: var(--muted); margin: 9px 2px; line-height: 1.5; }
.lite-warn { background: #FFFAEB; border: 1px solid #FEDF89; color: #9A6700; border-radius: 13px; padding: 11px 13px; font-size: 0.8rem; line-height: 1.5; margin-bottom: 12px; }

/* ─── Toast ───────────────────────────────────────────────────────────── */
.lite-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); z-index: 200; background: #1A2231; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg); max-width: 88vw; text-align: center; animation: liteIn 0.2s ease; }

/* ─── Pickup alerts ───────────────────────────────────────────────────── */
.lite-pickup-alerts { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 8px); z-index: 210; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; pointer-events: none; }
.lite-pickup-alert-card { pointer-events: auto; background: #1A2231; color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-lg); animation: liteSheetUp 0.22s cubic-bezier(0.16,1,0.3,1); }
.lite-pickup-alert-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.lite-pickup-alert-sub { font-size: 0.76rem; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.lite-pickup-alert-actions { display: flex; gap: 8px; }
.lite-pickup-alert-actions button { flex: 1; min-height: 38px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; border: none; }
.lite-pickup-alert-actions .lpa-ack { background: #fff; color: #1A2231; }
.lite-pickup-alert-actions .lpa-snooze { background: rgba(255,255,255,0.15); color: #fff; }

/* ─── Bottom sheet ────────────────────────────────────────────────────── */
.lite-sheet-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(19,26,38,0.5); display: flex; align-items: flex-end; justify-content: center; animation: liteFade 0.2s ease; }
@keyframes liteFade { from { opacity: 0; } to { opacity: 1; } }
/* radius-xl top corners — same corner radius Link's own .lk-modal uses */
.lite-sheet { background: var(--surface-over); width: 100%; max-width: 680px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: liteSheetUp 0.24s cubic-bezier(0.16,1,0.3,1); }
@keyframes liteSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.lite-sheet-grip { display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--line-2); margin: -8px auto 12px; }
.lite-sheet { transition: transform 0.24s cubic-bezier(0.22,1,0.36,1); }
.lite-sheet-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; }

/* ─── Camper detail sheet ─────────────────────────────────────────────── */
.lite-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lite-detail-sub { font-size: 0.82rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.lite-sheet-close { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink-2); }
.lite-detail-section { padding: 13px 0 3px; border-top: 1px solid var(--line); margin-top: 10px; }
.lite-detail-title { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.lite-detail-dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 4px 12px; margin: 0; font-size: 0.88rem; }
.lite-detail-dl dt { color: var(--muted); font-weight: 600; }
.lite-detail-dl dd { margin: 0; color: var(--ink); font-weight: 500; word-break: break-word; }
.lite-detail-dl a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.lite-detail-med { background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 14px; padding: 12px 13px 10px; margin-top: 14px; }
.lite-detail-med .lite-detail-title { color: #B42318; }
.lite-detail-med .lite-detail-dl dd { color: #912018; font-weight: 600; }
.lite-detail-notes { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ─── Me Lite: at-a-glance stats + birthdays ──────────────────────────── */
.lite-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
/* radius-lg, matching Link's own .lk-stat corner radius */
.lite-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 11px 4px; text-align: center; }
.lite-stat-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--accent-dark); line-height: 1; }
.lite-stat-lbl { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 5px; }
.lite-bday-card { background: var(--accent-tint); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.lite-bday-head { font-size: 0.78rem; font-weight: 800; color: var(--accent-dark); margin-bottom: 7px; }
.lite-bday-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 0.86rem; }
.lite-bday-name { font-weight: 600; }
.lite-bday-meta { font-size: 0.78rem; color: var(--ink-2); }
.lite-bday-more { font-size: 0.76rem; color: var(--muted); padding-top: 4px; }

/* ─── Me Lite: medical safety list ────────────────────────────────────── */
.lite-med-card { padding: 0; overflow: hidden; }
.lite-med-card .lite-camper-row { padding: 12px 15px 8px; }
.lite-med-facts { padding: 0 15px 12px; display: flex; flex-direction: column; gap: 6px; }
.lite-med-fact { font-size: 0.83rem; color: var(--ink); line-height: 1.35; padding-left: 10px; border-left: 3px solid var(--line-2); }
.lite-med-fact span { display: inline-block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 7px; padding: 2px 6px; border-radius: 999px; vertical-align: middle; }
.lite-med-fact.allergy { border-left-color: #F97066; } .lite-med-fact.allergy span { background: #FDE4E1; color: #B42318; }
.lite-med-fact.meds { border-left-color: #528BFF; } .lite-med-fact.meds span { background: #E0EAFF; color: #3538CD; }
.lite-med-fact.diet { border-left-color: #FDB022; } .lite-med-fact.diet span { background: #FEF0C7; color: #9A6700; }

/* ─── Me Lite: staff contact directory ────────────────────────────────── */
.lite-staff-card { padding: 0; overflow: hidden; }
.lite-staff-bunk { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark); padding: 11px 15px 8px; display: flex; align-items: center; gap: 8px; }
.lite-staff-bunk span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.72rem; }
.lite-staff-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px; border-top: 1px solid var(--line); }
.lite-staff-who { min-width: 0; }
.lite-call-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: #fff; background: var(--accent); padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.lite-call-btn:active { background: var(--accent-dark); }

/* ─── Live Lite: roll call + changes ──────────────────────────────────── */
/* Present / Absent / Left early / Not marked — 4 tiles, uses the base 4-col grid above */
.lite-status { font-size: 0.7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.lite-status.present { background: #DCFAE6; color: #067647; }
.lite-status.absent { background: #FEE4E2; color: #B42318; }
.lite-status.left { background: #FEF0C7; color: #9A6700; }
.lite-change { padding: 13px 15px; }
.lite-change-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lite-change-detail { font-size: 0.82rem; color: var(--ink-2); margin-top: 6px; }

/* ─── Live Lite: live camera QR scan overlay ───────────────────────────── */
.lite-scan-overlay { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; }
.lite-scan-topbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; color: #fff; }
.lite-scan-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.lite-scan-close { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.3rem; line-height: 1; border: none; }
.lite-scan-close:active { background: rgba(255,255,255,0.24); }
#scanLiveVideo { flex: 1; width: 100%; min-height: 0; object-fit: cover; background: #000; }
.lite-scan-frame { position: absolute; left: 10%; right: 10%; top: 22%; bottom: 30%; border: 3px solid rgba(255,255,255,0.85); border-radius: 20px; box-shadow: 0 0 0 2000px rgba(0,0,0,0.28); pointer-events: none; }
.lite-scan-status { flex: none; padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center; color: #fff; font-size: 0.9rem; font-weight: 600; background: rgba(0,0,0,0.35); }

/* ─── Health Lite: meds board + trip ──────────────────────────────────── */
.lite-health-today { font-size: 0.8rem; font-weight: 700; color: var(--accent-dark); margin: 2px 2px 12px; }
.lite-health-card { padding: 0; overflow: hidden; }
.lite-health-head { padding: 12px 15px 8px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.lite-health-allergy { margin: 0 15px 6px; font-size: 0.78rem; font-weight: 700; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 9px; padding: 6px 9px; }
.lite-health-meds { padding: 0 15px 12px; display: flex; flex-direction: column; gap: 7px; }
.lite-med-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lite-med-nm { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.lite-give-btn { flex: none; font-size: 0.8rem; font-weight: 800; color: #fff; background: var(--accent); padding: 7px 16px; border-radius: 999px; }
.lite-give-btn:active { background: var(--accent-dark); }
.lite-give-btn:disabled { opacity: 0.6; }
.lite-trip-summary { background: var(--accent-tint); color: var(--accent-dark); border-radius: 12px; padding: 11px 14px; font-size: 0.88rem; margin-bottom: 12px; }
.lite-trip-summary b { font-weight: 800; }

/* ─── Link Lite: messages + compose ───────────────────────────────────── */
.lite-thread { padding: 12px 15px; }
.lite-thread-top { display: flex; align-items: center; gap: 8px; }
.lite-thread-top .lite-camper-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lite-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.lite-thread-time { font-size: 0.72rem; color: var(--muted); flex: none; }
.lite-thread-preview { font-size: 0.83rem; color: var(--ink-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lite-thread-scroll { max-height: 52dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.lite-bubble { max-width: 82%; padding: 9px 12px; border-radius: 15px; font-size: 0.88rem; line-height: 1.4; word-break: break-word; }
.lite-bubble.in { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 5px; }
.lite-bubble.out { align-self: flex-end; background: var(--accent-tint); border-bottom-right-radius: 5px; }
.lite-bubble-subj { font-weight: 700; margin-bottom: 2px; }
.lite-bubble-time { font-size: 0.66rem; color: var(--muted); margin-top: 4px; }
.lite-bubble-attach { margin-top: 6px; }
.lite-attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; background: var(--accent-tint); color: var(--accent-dark); padding: 4px 10px; border-radius: 999px; margin: 3px 5px 0 0; }
.lite-attach-chip button { color: var(--accent-dark); font-size: 0.95rem; line-height: 1; padding: 0 2px; }
.lite-reply-row { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.lite-reply-row .lite-input { flex: 1; }
.lite-lbl { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 12px 2px 5px; }
.lite-compose .lite-lbl:first-child { margin-top: 0; }
.lite-recipient { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--line-2); border-radius: 13px; padding: 11px 13px; }
.lite-link-btn { color: var(--accent-dark); font-weight: 700; font-size: 0.82rem; }
.lite-rec-hit { display: block; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-top: 6px; }
.lite-attach-row { margin-top: 10px; }
.lite-compose-actions { display: flex; gap: 10px; margin-top: 16px; }
.lite-compose-actions .lite-btn { flex: 1; }
.lite-pick-row { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-top: 7px; }
.lite-imp-dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: #F79009; flex: none; }
.lite-thread-actions { display: flex; gap: 4px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.lite-thread-act { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--bg); }
.lite-thread-act.on { color: #F79009; }
.lite-thread-act:active { background: var(--accent-tint); }
.lite-recip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.lite-chiprow.wrap { flex-wrap: wrap; overflow: visible; }
.lite-rec-hit.on { border-color: var(--accent); background: var(--accent-tint); }
.lite-rec-hit.on::after { content: '✓'; float: right; color: var(--accent-dark); font-weight: 800; }

/* ─── Swipe to act (thread cards) ─────────────────────────────────────── */
.lite-swipe { position: relative; margin-bottom: 12px; border-radius: var(--r); overflow: hidden; }
.lite-swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; border-radius: var(--r); padding: 0 20px; font-weight: 800; font-size: 0.9rem; color: #fff; opacity: 0; transition: opacity 0.12s ease; }
.lite-swipe-arch { color: #fff; }
.lite-swipe-del { color: #fff; margin-left: auto; }
.lite-swipe.reveal-arch .lite-swipe-bg { opacity: 1; background: #F79009; }
.lite-swipe.reveal-arch .lite-swipe-del { display: none; }
.lite-swipe.reveal-del .lite-swipe-bg { opacity: 1; background: #D92D20; }
.lite-swipe.reveal-del .lite-swipe-arch { display: none; }
.lite-swipe-fg { position: relative; margin-bottom: 0; touch-action: pan-y; will-change: transform; }

/* ─── Toggle switch (menu preference) ─────────────────────────────────── */
.lite-toggle { flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; transition: background 0.15s ease; }
.lite-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.lite-toggle.on { background: var(--coral-500, #EE6A53); }
.lite-toggle.on::after { transform: translateX(16px); }
.lite-toggle.disabled { opacity: 0.4; pointer-events: none; }

/* ─── Settings screen ─────────────────────────────────────────────────── */
.lite-app[data-screen="settings"] .lite-header { display: none; }
.lite-app[data-screen="settings"] .lite-tabbar { display: none; }
.lite-app[data-screen="settings"] .lite-main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.lite-settings-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; }
.lite-settings-back { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.lite-settings-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.lite-set-account { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 8px; }
.lite-set-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--coral-500, #EE6A53); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex: none; }
.lite-set-name { font-weight: 700; font-size: 1.02rem; }
.lite-set-sub { font-size: 0.8rem; color: var(--muted); margin: 1px 0 6px; word-break: break-word; }
.lite-set-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.lite-set-section-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 20px 4px 8px; }
.lite-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Related settings now share one card (Account & Security; Preferences)
   instead of each getting its own elevated box — fewer separately-shadowed
   rectangles reads as one calm screen instead of a stack of tiles. */
.lite-set-divider { height: 1px; background: var(--line); margin: 14px 0; }
.lite-set-row-title { font-weight: 600; font-size: 0.95rem; }
.lite-set-row-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.lite-link-row { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; font-size: 0.92rem; font-weight: 600; color: var(--accent-dark); margin-top: 8px; text-decoration: none; }
.lite-link-row.danger { color: #C0392B; }
.lite-set-version { text-align: center; font-size: 0.74rem; color: var(--muted); margin: 20px 0 8px; }

/* ─── Notes Lite ──────────────────────────────────────────────────────── */
.lite-notes-grid { columns: 2; column-gap: 10px; }
.lite-note-card { display: block; width: 100%; text-align: left; break-inside: avoid; margin-bottom: 10px; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); position: relative; }
.lite-note-card[data-color="yellow"] { background: #FEFCE8; border-color: #FDE68A; }
.lite-note-card[data-color="peach"]  { background: #FFF0E6; border-color: #FED7AA; }
.lite-note-card[data-color="pink"]   { background: #FDF2F8; border-color: #FBCFE8; }
.lite-note-card[data-color="blue"]   { background: #EFF6FF; border-color: #BFDBFE; }
.lite-note-card[data-color="green"]  { background: #F0FDF4; border-color: #BBF7D0; }
.lite-note-card[data-color="purple"] { background: #FAF5FF; border-color: #E9D5FF; }
.lite-note-card[data-color="slate"]  { background: var(--card-2); border-color: var(--line-2); }
.lite-note-pin { position: absolute; top: 8px; right: 9px; font-size: 0.8rem; }
.lite-note-title { font-weight: 700; font-size: 0.92rem; color: #1A2231; margin-bottom: 3px; padding-right: 16px; word-break: break-word; }
.lite-note-body { font-size: 0.83rem; color: #3A4353; line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: hidden; }
.lite-note-empty { color: #CBD5E1; font-style: italic; }
.lite-note-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.lite-note-badge { font-size: 0.75rem; }
.lite-note-date { margin-left: auto; font-size: 0.7rem; color: #94A3B8; }
.lite-fab { position: fixed; right: 18px; bottom: calc(var(--tabbar-h, 64px) + 18px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 40; }
.lite-fab:active { background: var(--accent-dark); }

/* Note editor */
.lite-note-editor { min-height: 60dvh; }
.lite-note-ed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lite-note-ed-actions { display: flex; gap: 6px; }
.lite-note-act { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); }
.lite-note-act.on { color: var(--accent-dark); border-color: var(--accent); }
.lite-note-title-input { width: 100%; border: none; background: transparent; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); padding: 6px 2px; outline: none; }
.lite-note-body-input { width: 100%; min-height: 40dvh; border: none; background: transparent; font-size: 1rem; line-height: 1.55; color: var(--ink); padding: 6px 2px; outline: none; resize: none; }
.lite-note-colors { display: flex; gap: 10px; padding: 12px 2px; border-top: 1px solid var(--line); }
.lite-note-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; }
.lite-note-dot.on { border-color: var(--ink); }
.lite-note-dot[data-c="yellow"] { background: #FEF08A; } .lite-note-dot[data-c="peach"] { background: #FDBA74; }
.lite-note-dot[data-c="pink"] { background: #F9A8D4; } .lite-note-dot[data-c="blue"] { background: #93C5FD; }
.lite-note-dot[data-c="green"] { background: #86EFAC; } .lite-note-dot[data-c="purple"] { background: #D8B4FE; }
.lite-note-dot[data-c="slate"] { background: #CBD5E1; }
.lite-note-meta { font-size: 0.76rem; color: var(--muted); padding: 2px; }
.lite-note-ro { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; }
.lite-note-section { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 8px; }
.lite-note-sec-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
.lite-note-section .lite-attach-row { margin: 0 0 8px; }

@media (min-width: 720px) {
    .lite-app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ─── Standalone sign-in ──────────────────────────────────────────────────
   Restrained on purpose. A sign-in screen is the one place a product should
   look like it belongs to a company rather than a campaign: quiet brand mark,
   one clear heading, generous field targets, a single primary action, and
   secondary options that stay out of the way until wanted. */
/* The app's single gate. Coral gradient canvas, badged mark, display wordmark,
   one white primary action. Intentionally theme-independent — the brand colour
   IS the surface here, so there is no light/dark variant to keep in sync. */
/* Two layers, not one flat ramp: a diagonal brand gradient, plus a soft radial
   light behind where the mark sits. A single linear fill is what makes a brand
   screen read as a coloured <div>; an implied light source is most of what
   separates it from a real product's front door. */
.lite-login-page {
    background:
        radial-gradient(120% 62% at 50% 6%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
        linear-gradient(163deg, var(--coral-500, #EE6A53) 0%, var(--coral-600, #D9553F) 46%, var(--coral-700, #B23A28) 100%);
    background-attachment: fixed;
}
/* The app's ambient wash is tuned for the neutral surfaces; it only muddies
   the gradient here. */
.lite-login-page::before { display: none; }

/* Top-anchored, not centred. Centring buried the mark in the middle of the
   screen and left the whole thing floating; every banking app worth copying
   puts the mark high and lets the form hang beneath it. clamp() keeps that
   true from a small phone to a tablet without a media query. */
.lite-login {
    min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
    padding: calc(clamp(44px, 11vh, 104px) + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
}
.lite-login-inner {
    width: 100%; max-width: 348px; text-align: center; color: #fff;
    animation: liteLoginIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Rises in rather than appearing. Cheap, and it is the difference between a
   screen that loaded and a screen that arrived. */
@keyframes liteLoginIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lite-login-inner { animation: none; }
}

/* The badge carries a rim-light and an inner lift so the mark sits ON the
   surface instead of being punched out of it. */
.lite-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(87, 22, 10, 0.22);
    display: flex; align-items: center; justify-content: center;
}
/* Masked rather than an <img>: the source PNG is matted, so it haloes on a
   saturated surface. A mask also lets the mark simply be white. */
.lite-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;
}

/* Body font, not Fraunces. Everywhere else in Lite the serif display face is
   the brand's voice, but on the sign-in screen it read as softer and less
   assured than Link's sans — and this is the one screen whose job is to look
   like a company. The two apps now share a wordmark treatment. */
.lite-login-title {
    font-family: var(--font-body); font-size: 2rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: #fff;
}
.lite-login-title span { opacity: 0.82; }
.lite-login-sub {
    font-size: 0.9rem; opacity: 0.82; margin: 8px 0 30px; letter-spacing: 0.01em;
}

/* Fields are translucent white rather than solid: on this canvas a solid white
   input competes with the white button, and the button has to stay the single
   obvious action. Placeholders are omitted — a label plus a real focus state
   is clearer than grey text people mistake for a filled value. */
.lite-lf { margin-bottom: 16px; text-align: left; }
.lite-lf 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;
}
.lite-lf-wrap { position: relative; }
.lite-lf-input {
    width: 100%; height: 54px; padding: 0 16px;
    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;
}
.lite-lf-wrap .lite-lf-input { padding-right: 50px; }
.lite-lf-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 trick is the only way to
   override it. */
.lite-lf-input:-webkit-autofill,
.lite-lf-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(210, 74, 52, 0.92) inset;
    caret-color: #fff;
}
.lite-lf-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: none; color: rgba(255, 255, 255, 0.75);
}
.lite-lf-eye svg { width: 19px; height: 19px; }
.lite-lf-eye[aria-pressed="true"] { color: #fff; }

.lite-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;
}

/* Biometric entry. Small and quiet on purpose: a full-width button the same
   size as "Sign in" read 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.
   Sits above the form (see #liteBioQuick), not on a screen of its own. */
.lite-bio-quick {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    margin-bottom: 24px;
}
.lite-bio-quick-btn {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    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; transition: transform 0.12s ease, background 0.15s ease;
}
.lite-bio-quick-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.26); }
.lite-bio-quick-btn:disabled { opacity: 0.5; }
.lite-bio-quick-btn svg { width: 25px; height: 25px; }
.lite-bio-quick-label {
    font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.01em;
}

.lite-login-offer {
    font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.94);
    margin: 0 0 18px;
}
.lite-login-offer span { font-weight: 700; }

/* The one solid element on the screen, and the only thing casting a real
   shadow — that is what makes it read as the action rather than a panel. */
.lite-login .lite-btn {
    background: #fff; color: var(--coral-700, #B23A28);
    box-shadow: 0 8px 22px rgba(87, 22, 10, 0.26);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.lite-login .lite-btn:active {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(87, 22, 10, 0.22);
}
.lite-login-go {
    margin-top: 12px; height: 54px; border-radius: 14px;
    font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
}
.lite-login-alt {
    display: block; width: 100%; margin-top: 18px; background: none;
    color: #fff; opacity: 0.78; font-size: 0.86rem; font-weight: 600;
    letter-spacing: 0.01em;
}
.lite-login-alt:active { opacity: 1; }
/* Pushed to the bottom of the screen rather than trailing the form: legal-ish
   small print belongs at the foot of the page, not attached to the controls. */
.lite-login-foot {
    margin: 40px 0 0; font-size: 0.74rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}
.lite-login-foot a { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.lite-login-foot a { color: #fff; font-weight: 600; text-decoration: none; opacity: 0.9; }
.lite-login-foot-link {
    background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: #fff; font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* Sign in / Create account toggle — two flat tabs on the coral card, the
   active one lifted to a solid white pill so it reads the same way the
   primary "Sign in" button below it does. */
.lite-login-modes {
    display: flex; gap: 6px; margin: 18px 0 22px;
    background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 4px;
}
.lite-login-mode {
    flex: 1; border: none; background: none; padding: 9px 0;
    border-radius: 9px; font-size: 0.84rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.8); cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lite-login-mode.active { background: #fff; color: var(--coral-700, #B23A28); }