/* ==========================================================================
   WoodlandNotes — "a naturalist's field notebook in the woods".
   Warm pressed-paper, dappled canopy light, hand-formed edges, ink field-sketch
   botanicals, handwritten marginalia. Tactile + unhurried, never a SaaS template.
   Brand anchored on Nature of Learning. Shared by the Blazor Server web app and
   the MAUI Blazor Hybrid field app — all texture is inline SVG so it works offline.
   ========================================================================== */

:root {
    /* Forest canopy (NoL-aligned, layered for depth) */
    --fn-forest-950: #14201a;
    --fn-forest-900: #1b291f;
    --fn-forest-800: #26352a;
    --fn-forest-700: #3d4e3b;   /* PRIMARY BRAND GREEN (NoL exact) */
    --fn-forest-600: #4a6147;   /* field-primary fill (AA w/ white) */
    --fn-forest-500: #5e7a59;
    --fn-moss: #6f8a5e;

    /* Leaf + sun (dappled light) */
    --fn-leaf-400: #7bc28a;
    --fn-leaf-200: #d7e8cf;
    --fn-leaf-cta: #46b93d;     /* bright delight accent — brand/CTA glyph only */
    --fn-leaf-cta-ink: #13320f;
    --fn-sun: #e8b84b;          /* warm dappled sunlight */
    --fn-sun-soft: #f3dca0;

    /* Pressed paper (kraft / field notebook) */
    --fn-paper: #f7f1e4;
    --fn-paper-2: #efe6d3;
    --fn-paper-3: #e6d8bf;
    --fn-card: #fdfaf2;
    --fn-card-edge: #efe4cd;

    /* Bark + earth */
    --fn-bark-700: #4a3727;
    --fn-bark-500: #806249;
    --fn-bark-300: #c2ab8c;

    /* Sky / stream */
    --fn-sky-600: #5a86a0;
    --fn-sky-200: #cfe0e8;

    /* Ink (warm near-black, hand-written) */
    --fn-ink-900: #211c14;
    --fn-ink-700: #322a1e;
    --fn-ink-500: #6b5d49;
    --fn-ink-300: #9a8a70;

    /* Safety — meaning only */
    --fn-amber-600: #b5760a;
    --fn-amber-200: #f6e3bd;
    --fn-red-600: #a83217;
    --fn-red-200: #f1d3cb;

    /* Hand-drawn lines on paper */
    --fn-line: #e3d6bb;
    --fn-line-strong: #d2c1a0;
    --fn-ink-line: #cdb99a;
    --fn-sketch: #7c6a4a;        /* sepia "pen" used for hand-drawn frames (with #fn-sketch filter) */
    --fn-sketch-soft: #a3906c;

    /* Type */
    --fn-font-display: "Fraunces", "Merriweather", Georgia, serif;
    --fn-font: "Inter", "Open Sans", "Segoe UI", system-ui, sans-serif;
    --fn-font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
    --fn-text-xs: 0.78rem;
    --fn-text-sm: 0.875rem;
    --fn-text-base: 1rem;
    --fn-text-lg: 1.15rem;
    --fn-text-xl: 1.45rem;
    --fn-text-2xl: 1.95rem;
    --fn-text-3xl: 2.7rem;

    --fn-sp-1: 0.25rem; --fn-sp-2: 0.5rem; --fn-sp-3: 0.75rem;
    --fn-sp-4: 1rem; --fn-sp-5: 1.5rem; --fn-sp-6: 2rem; --fn-sp-7: 3rem; --fn-sp-8: 4rem;

    /* Radii — clean and gentle */
    --fn-radius-sm: 9px;
    --fn-radius: 13px;
    --fn-radius-lg: 18px;
    --fn-radius-pill: 999px;

    /* Soft, warm, layered shadow (no harsh material) */
    --fn-shadow-sm: 0 1px 2px rgba(40,52,42,.05), 0 2px 6px rgba(74,55,39,.05);
    --fn-shadow: 0 2px 6px rgba(40,52,42,.06), 0 10px 26px rgba(74,55,39,.10);
    --fn-shadow-lg: 0 6px 16px rgba(20,32,26,.10), 0 24px 60px rgba(20,32,26,.18);

    --fn-tap: 56px;
    --fn-tap-xl: 72px;

    --setting-accent: var(--fn-leaf-cta);

    /* Paper grain (subtle fractal noise) */
    --fn-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Brush-stroke underline */
    --fn-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14' viewBox='0 0 220 14'%3E%3Cpath d='M3 8 C40 3 70 11 110 7 C150 3 185 10 217 5' fill='none' stroke='%2346b93d' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    /* Faint fern motif for foliage panels */
    --fn-fern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' opacity='0.10'%3E%3Cpath d='M30 110 C30 70 30 40 48 22'/%3E%3Cpath d='M33 92 C20 88 13 80 12 70'/%3E%3Cpath d='M33 92 C46 86 52 78 53 68'/%3E%3Cpath d='M35 74 C23 70 17 63 16 54'/%3E%3Cpath d='M35 74 C47 69 52 62 53 53'/%3E%3Cpath d='M40 56 C30 53 25 47 24 39'/%3E%3Cpath d='M40 56 C50 52 54 46 55 38'/%3E%3C/g%3E%3C/svg%3E");
    /* Hills + trees horizon — a mask shape (fill alpha only; colour comes from the element's background) */
    --fn-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cpath d='M0 62 C18 47 36 53 54 46 C72 39 90 48 108 42 V62Z' fill='%23000' opacity='0.5'/%3E%3Cpath d='M0 62 C22 56 42 60 62 54 C80 49 96 56 108 52 V62Z' fill='%23000'/%3E%3Cg fill='%23000'%3E%3Cpath d='M26 62 l9-23 9 23z'/%3E%3Crect x='34' y='52' width='2' height='10'/%3E%3Cpath d='M78 62 l7-18 7 18z'/%3E%3Crect x='84' y='54' width='2' height='8'/%3E%3C/g%3E%3C/svg%3E");

    /* Hand-drawn frame as a TRUE VECTOR (wavy rounded-rect path). Scales to any box via preserveAspectRatio=none;
       non-scaling-stroke keeps the line a uniform crisp weight. No raster displacement → smooth at any zoom. */
    --fn-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M40 3 C58 1 78 5 96 3 C120 5 140 1 162 3 C184 1 200 5 218 3 C242 5 266 1 290 3 C314 5 334 1 360 3 C378 3 397 22 397 40 C399 64 395 86 397 112 C395 136 399 158 397 182 C399 206 395 228 397 252 C395 276 399 298 397 322 C397 342 396 352 397 360 C397 378 378 397 360 397 C334 399 312 395 290 397 C266 395 244 399 220 397 C198 399 174 395 150 397 C128 395 110 399 88 397 C68 395 56 399 40 397 C22 397 3 378 3 360 C1 334 5 312 3 290 C5 266 1 244 3 220 C1 198 5 174 3 150 C5 128 1 110 3 88 C3 68 4 56 3 40 C3 22 22 3 40 3 Z' fill='none' stroke='%237c6a4a' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    --fn-frame-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M40 3 C58 1 78 5 96 3 C120 5 140 1 162 3 C184 1 200 5 218 3 C242 5 266 1 290 3 C314 5 334 1 360 3 C378 3 397 22 397 40 C399 64 395 86 397 112 C395 136 399 158 397 182 C399 206 395 228 397 252 C395 276 399 298 397 322 C397 342 396 352 397 360 C397 378 378 397 360 397 C334 399 312 395 290 397 C266 395 244 399 220 397 C198 399 174 395 150 397 C128 395 110 399 88 397 C68 395 56 399 40 397 C22 397 3 378 3 360 C1 334 5 312 3 290 C5 266 1 244 3 220 C1 198 5 174 3 150 C5 128 1 110 3 88 C3 68 4 56 3 40 C3 22 22 3 40 3 Z' fill='none' stroke='%237c6a4a' stroke-width='2.5' stroke-dasharray='9 7' vector-effect='non-scaling-stroke' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    --fn-frame-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M40 3 C58 1 78 5 96 3 C120 5 140 1 162 3 C184 1 200 5 218 3 C242 5 266 1 290 3 C314 5 334 1 360 3 C378 3 397 22 397 40 C399 64 395 86 397 112 C395 136 399 158 397 182 C399 206 395 228 397 252 C395 276 399 298 397 322 C397 342 396 352 397 360 C397 378 378 397 360 397 C334 399 312 395 290 397 C266 395 244 399 220 397 C198 399 174 395 150 397 C128 395 110 399 88 397 C68 395 56 399 40 397 C22 397 3 378 3 360 C1 334 5 312 3 290 C5 266 1 244 3 220 C1 198 5 174 3 150 C5 128 1 110 3 88 C3 68 4 56 3 40 C3 22 22 3 40 3 Z' fill='%23000'/%3E%3C/svg%3E");

    /* Border-image frame for CARDS — wavy rounded-rect with cream fill + sepia stroke. Used via border-image
       so the line stays a FIXED thickness with FIXED-size corners on any card width (no large-card distortion). */
    --fn-card-bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M30 9 C48 6 66 12 90 9 C100 9 111 20 111 30 C114 48 108 66 111 90 C111 100 100 111 90 111 C66 114 48 108 30 111 C20 111 9 100 9 90 C6 66 12 48 9 30 C9 20 20 9 30 9 Z' fill='%23fdfaf2' stroke='%237c6a4a' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

:root[data-fn-contrast="sun"] {
    --fn-forest-600: #1f3d22; --fn-red-600: #871403; --fn-amber-600: #8f4d00; --fn-ink-500: #3a352d;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--fn-font);
    font-size: var(--fn-text-base); line-height: 1.55;
    color: var(--fn-ink-700);
    background-color: var(--fn-paper);
    /* dappled canopy light — layered soft radials over warm paper */
    background-image:
        radial-gradient(120% 85% at 88% -8%, rgba(232,184,75,.16), transparent 55%),
        radial-gradient(90% 70% at -10% 8%, rgba(94,122,89,.14), transparent 55%),
        radial-gradient(70% 60% at 50% 120%, rgba(61,78,59,.10), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* paper grain overlay */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    background-image: var(--fn-grain); background-size: 200px 200px;
    opacity: .07; mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
    font-family: var(--fn-font-display);
    color: var(--fn-forest-900); line-height: 1.1; font-weight: 600;
    margin: 0 0 var(--fn-sp-3); letter-spacing: -0.015em;
    font-optical-sizing: auto;
}
h1 { font-size: var(--fn-text-3xl); font-weight: 600; line-height: 1.16; padding-top: 0.04em; }
h2 { font-size: var(--fn-text-2xl); }
h3 { font-size: var(--fn-text-xl); }

/* hand-drawn brush underline accent */
.underline-leaf { position: relative; display: inline-block; }
.underline-leaf::after {
    content: ""; position: absolute; left: 0; right: -6px; bottom: -10px; height: 12px;
    background: var(--fn-underline) no-repeat; background-size: 100% 100%;
}

/* the same hand-drawn brush, sized to highlight a word/phrase inline in body copy */
.mark-leaf { position: relative; display: inline-block; font-weight: 600; color: inherit; }
.mark-leaf::after {
    content: ""; position: absolute; left: -2px; right: -4px; bottom: -3px; height: 7px;
    background: var(--fn-underline) no-repeat; background-size: 100% 100%;
}

a { color: var(--fn-forest-700); text-decoration: none; }
a:hover { color: var(--fn-forest-500); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

p { margin: 0 0 var(--fn-sp-4); }
.muted { color: var(--fn-ink-500); }
.small { font-size: var(--fn-text-sm); }
.lede { font-size: var(--fn-text-lg); color: var(--fn-ink-700); }
.hand { font-family: var(--fn-font-hand); font-size: 1.35em; line-height: 1; color: var(--fn-forest-600); }

/* ---------- Buttons (hand-drawn: wavy filled shape, crisp label) ---------- */
.btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--fn-sp-2);
    min-height: 50px; padding: 9px var(--fn-sp-5); line-height: 1.2;
    font: inherit; font-weight: 600;
    background: transparent; border: none; color: var(--fn-forest-800); cursor: pointer;
    transition: transform .12s cubic-bezier(.2,.8,.3,1), color .15s ease;
}
/* filled wavy shape (mask clips the fill to the hand-drawn outline) */
.btn::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: var(--fn-card);
    -webkit-mask: var(--fn-frame-fill) center / 100% 100% no-repeat;
            mask: var(--fn-frame-fill) center / 100% 100% no-repeat;
    transition: background .15s ease;
}
/* wavy ink outline (visible edge for low-contrast secondary buttons) */
.btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--fn-frame) center / 100% 100% no-repeat;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::before { background: var(--fn-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--fn-leaf-200); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { color: #fdf8ea; }
.btn-primary::before { background: linear-gradient(168deg, var(--fn-forest-600), var(--fn-forest-700)); }
.btn-primary:hover::before { background: linear-gradient(168deg, var(--fn-forest-500), var(--fn-forest-600)); }
.btn-primary::after { display: none; }

.btn-danger { color: #fff; }
.btn-danger::before { background: var(--fn-red-600); }
.btn-danger:hover::before { background: #8f2a13; }
.btn-danger::after { display: none; }

.btn-ghost { color: var(--fn-forest-700); }
.btn-ghost::before, .btn-ghost::after { display: none; }
.btn-ghost:hover { background: rgba(74,97,71,.09); border-radius: var(--fn-radius); }

.btn--xl { min-height: 56px; width: 100%; font-size: var(--fn-text-lg); }
.link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--fn-forest-700); font: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards (pressed paper, hand-drawn ink frame) ---------- */
.card {
    position: relative; isolation: isolate; background: transparent; padding: var(--fn-sp-5);
}
/* the wavy frame + cream fill come from a border-image on a pseudo: FIXED line thickness & corner size at
   any card width (large cards no longer over-wave or flatten). drop-shadow follows the wavy shape. */
.card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border: 15px solid transparent;
    border-image: var(--fn-card-bi) 30 fill / 15px / 0 stretch;
    filter: drop-shadow(0 3px 7px rgba(40,52,42,.10));
}
.card--hero::before { filter: drop-shadow(0 5px 12px rgba(40,52,42,.13)); }
/* same wavy border-image frame on the other big boxed surfaces (login card, dashboard setup card) */
.auth-card, .setup-card { background: transparent !important; border: none !important; box-shadow: none !important; position: relative; isolation: isolate; }
.auth-card::before, .setup-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border: 15px solid transparent; border-image: var(--fn-card-bi) 30 fill / 15px / 0 stretch;
    filter: drop-shadow(0 4px 9px rgba(40,52,42,.11));
}
.card-title { font-family: var(--fn-font-display); color: var(--fn-forest-900); font-size: var(--fn-text-lg); margin: 0 0 var(--fn-sp-2); }

/* ---------- Chips ----------
   Small status/label TAGS by default (a 40px pill reads as a button and bloats table rows). Interactive
   chips — <button class="chip"> and selectable .chip-grid items — opt back into a tappable target below. */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--fn-radius-pill);
    background: var(--fn-paper-2); border: 1px solid var(--fn-line-strong);
    color: var(--fn-forest-800); font-size: var(--fn-text-xs); font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.chip--ok { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); color: #2f5a2c; }
.chip--warn { background: var(--fn-amber-200); border-color: var(--fn-amber-600); color: #6a4604; }
.chip--danger { background: var(--fn-red-200); border-color: var(--fn-red-600); color: var(--fn-red-600); }
button.chip, .chip-grid .chip { min-height: 40px; padding: 0 14px; font-size: var(--fn-text-sm); cursor: pointer; }

/* ---------- Consent badge ---------- */
.consent-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--fn-radius-pill); font-size: var(--fn-text-xs); font-weight: 700; }
.consent-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.consent-badge--ok { background: var(--fn-leaf-200); color: var(--fn-forest-800); }
.consent-badge--ok::before { background: var(--fn-leaf-cta); }
.consent-badge--no { background: var(--fn-red-200); color: var(--fn-red-600); }
.consent-badge--no::before { background: var(--fn-red-600); }

/* ---------- Stats (hand-circled numbers) ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--fn-sp-4); margin: var(--fn-sp-5) 0; }
.stat {
    position: relative; display: block; background: var(--fn-card);
    border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius);
    padding: var(--fn-sp-4) var(--fn-sp-5); min-width: 132px; box-shadow: var(--fn-shadow-sm);
    transition: transform .14s ease, box-shadow .2s ease; text-decoration: none;
}
.stat:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: var(--fn-shadow); text-decoration: none; }
.stat-num { display: block; font-family: var(--fn-font-display); font-size: var(--fn-text-3xl); color: var(--fn-forest-700); line-height: 1; }
/* Shared with the register ratio readout (a full sentence) — keep it clean readable sans, not uppercase. */
.stat-label { display: block; font-family: var(--fn-font); font-size: var(--fn-text-sm); color: var(--fn-ink-500); margin-top: 4px; }

/* ---- Home dashboard stat cards: icon badge + number + label, of a piece with the session screen's cards. ---- */
.hstat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: var(--fn-sp-5) 0; }
.hstat { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius);
    padding: .9rem .95rem; box-shadow: var(--fn-shadow-sm); text-decoration: none;
    transition: transform .14s ease, box-shadow .2s ease, border-color .14s ease; }
.hstat:hover { transform: translateY(-2px); box-shadow: var(--fn-shadow); border-color: var(--fn-leaf-400); text-decoration: none; }
/* The icon sits large and faint in the card's right edge (a background motif), so the colour is a calm pop
   rather than a loud wash — three counts that read as a quiet, cohesive glance, not a rainbow. */
.hstat-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 0; opacity: .12; pointer-events: none; }
.hstat-num { position: relative; z-index: 1; font-family: var(--fn-font-display); font-size: var(--fn-text-3xl); line-height: 1; color: var(--fn-forest-800); }
.hstat--children .hstat-ic { color: var(--fn-forest-600); }
.hstat--sessions .hstat-ic { color: var(--fn-sky-600); }
.hstat--ras .hstat-ic { color: var(--fn-amber-600); }
.hstat-label { position: relative; z-index: 1; font-family: var(--fn-font); font-size: var(--fn-text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--fn-ink-500); margin-top: 3px; line-height: 1.15; }
/* On phone widths the 3 cards are narrow — shrink the label so the long "Risk assessments" wraps to two
   clean lines instead of clipping. (Desktop keeps the full size: the cards are roomy there.) */
@media (max-width: 560px) { .hstat-label { font-size: 10.5px; letter-spacing: .02em; } }
@media (max-width: 360px) { .hstat-label { font-size: 10px; } .hstat { padding: .8rem .7rem; } }
.stat--ok::after { content: ""; position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--fn-leaf-cta); box-shadow: 0 0 0 4px var(--fn-leaf-200); }

/* ---------- Banners ---------- */
.banner { padding: var(--fn-sp-3) var(--fn-sp-4); border-radius: var(--fn-radius); font-weight: 600; }
.banner--offline { background: var(--fn-bark-500); color: #fff; }
.banner--warn { background: var(--fn-amber-200); color: #6a4604; }
.banner--danger { background: var(--fn-red-600); color: #fff; }
.banner--ok { background: var(--fn-leaf-200); color: var(--fn-forest-900); }
.banner--info { background: var(--fn-paper-2); color: var(--fn-ink-700); font-weight: 500; }

/* ---------- Sync pill ---------- */
.sync-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--fn-radius-pill); background: var(--fn-paper-2); border: 1.5px solid var(--fn-line-strong); font-size: var(--fn-text-sm); font-weight: 600; }
.sync-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fn-ink-300); }
.sync-pill--synced::before { background: var(--fn-leaf-cta); box-shadow: 0 0 0 3px var(--fn-leaf-200); }
.sync-pill--offline::before { background: var(--fn-bark-500); }
.sync-pill--pending::before { background: var(--fn-amber-600); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; color: var(--fn-forest-800); margin-bottom: var(--fn-sp-4); }
/* Paired fields sit side-by-side with breathing room and wrap cleanly on a phone (no butting). */
.field-row { display: flex; gap: var(--fn-sp-3); flex-wrap: wrap; }
.field-row > label { flex: 1 1 12rem; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=time], input[type=tel], select, textarea {
    display: block; width: 100%; margin-top: 6px; min-height: 46px; padding: 10px 14px;
    font: inherit; line-height: 1.4; color: var(--fn-ink-900); background: var(--fn-paper);
    border: 1.5px solid var(--fn-line-strong); border-radius: var(--fn-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { padding: 11px 14px; min-height: 5rem; line-height: 1.5; resize: vertical; }
/* Selects read as soft pills with a hand-drawn chevron — friendlier than the OS dropdown. */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border-radius: var(--fn-radius-pill); padding-left: 18px; padding-right: 42px; cursor: pointer;
    background-color: var(--fn-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233d4e3b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 14px;
}
select::-ms-expand { display: none; }
::placeholder { color: var(--fn-ink-300); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; background-color: var(--fn-card); border-color: var(--fn-forest-500); box-shadow: 0 0 0 4px var(--fn-leaf-200); }
.validation-message, .field-validation-error { color: var(--fn-red-600); font-size: var(--fn-text-sm); }

/* ---------- App shell ---------- */
.fn-shell { display: flex; min-height: 100vh; }
.fn-sidebar {
    position: relative; width: 250px; flex: 0 0 250px;
    background:
        radial-gradient(120% 50% at 50% -10%, rgba(232,184,75,.18), transparent 55%),
        linear-gradient(185deg, var(--fn-forest-800) 0%, var(--fn-forest-900) 55%, var(--fn-forest-950) 100%);
    color: #eef3ea; padding: var(--fn-sp-5) var(--fn-sp-3) var(--fn-sp-6);
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
/* faint fern foliage + torn organic right edge */
.fn-sidebar::before { content: ""; position: absolute; inset: 0; background-image: var(--fn-fern); background-size: 120px 120px; opacity: .5; pointer-events: none; }
.fn-sidebar::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 14px;
    /* Paint the torn teeth with the SAME viewport-fixed canopy-light gradient as <body>,
       so they dissolve seamlessly into the page. A flat --fn-paper fill here left a faint
       vertical seam where it met the body's greenish top-left radial (at -10% 8%). */
    background-color: var(--fn-paper);
    background-image:
        radial-gradient(120% 85% at 88% -8%, rgba(232,184,75,.16), transparent 55%),
        radial-gradient(90% 70% at -10% 8%, rgba(94,122,89,.14), transparent 55%),
        radial-gradient(70% 60% at 50% 120%, rgba(61,78,59,.10), transparent 60%);
    background-attachment: fixed;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='80' preserveAspectRatio='none' viewBox='0 0 14 80'%3E%3Cpath d='M14 0 H6 C10 12 2 16 6 28 C9 38 1 42 5 54 C8 64 2 70 7 80 H14 Z' fill='black'/%3E%3C/svg%3E") repeat-y left/14px 80px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='80' preserveAspectRatio='none' viewBox='0 0 14 80'%3E%3Cpath d='M14 0 H6 C10 12 2 16 6 28 C9 38 1 42 5 54 C8 64 2 70 7 80 H14 Z' fill='black'/%3E%3C/svg%3E") repeat-y left/14px 80px;
}
.fn-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; font-family: var(--fn-font-display); font-weight: 600; font-size: var(--fn-text-xl); color: #fff; padding: 0 var(--fn-sp-2) var(--fn-sp-5); }
.fn-brand svg { width: 40px; height: 40px; flex: none; }
.fn-nav { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.fn-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--fn-radius-pill); color: #d4dfce; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.fn-nav a svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.fn-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
/* Selected = a clean even pill + a brightened icon. No left bar — it doubled up with the pill and read clumsily. */
.fn-nav a.active { background: rgba(70,185,61,.16); color: #fff; }
.fn-nav a.active svg { opacity: 1; color: var(--fn-leaf-cta); }
.fn-nav a { position: relative; }
.fn-nav-section { position: relative; z-index: 1; font-family: var(--fn-font-hand); font-size: 1.05rem; letter-spacing: .02em; color: #a9bba0; margin: var(--fn-sp-4) var(--fn-sp-3) 2px; }

.fn-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.fn-topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--fn-sp-4); height: 62px; padding: 0 var(--fn-sp-6); background: rgba(253,250,242,.7); backdrop-filter: blur(6px); border-bottom: 1.5px solid var(--fn-line); }
.fn-topbar .me { color: var(--fn-ink-500); font-size: var(--fn-text-sm); }
/* fill-mode `backwards` (not `both`): the rise-in entrance plays, but afterwards .fn-content reverts to NO
   transform. With `both` it permanently held the end transform, becoming a containing block that trapped the
   fixed-position session sheet/scrim (sheet fell off-screen, scrim covered only part). */
.fn-content { padding: var(--fn-sp-6) var(--fn-sp-7); max-width: 1140px; width: 100%; animation: rise-in .5s cubic-bezier(.2,.8,.3,1) backwards; }
.logout-form { display: inline; }

/* ---------- Auth / woodland scene ---------- */
.auth-scene { position: relative; min-height: 100vh; display: grid; place-items: center; padding: var(--fn-sp-5); overflow: hidden; }
.auth-scene .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-card {
    position: relative; z-index: 2; width: 100%; max-width: 430px;
    background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-lg);
    box-shadow: var(--fn-shadow-lg); padding: var(--fn-sp-6) var(--fn-sp-6) var(--fn-sp-5);
    animation: rise-in .6s cubic-bezier(.2,.8,.3,1) both;
}
.auth-card h1 { font-size: var(--fn-text-2xl); margin-bottom: var(--fn-sp-1); }
.auth-card .brand-line { display: flex; align-items: center; gap: 9px; color: var(--fn-forest-700); font-family: var(--fn-font-display); font-weight: 600; font-size: var(--fn-text-lg); margin-bottom: var(--fn-sp-4); }
.auth-card .brand-line > svg { width: 26px; height: 26px; }
.auth-submit { width: 100%; margin-top: var(--fn-sp-2); }
.auth-error { background: var(--fn-red-200); color: var(--fn-red-600); padding: var(--fn-sp-3); border-radius: var(--fn-radius-sm); margin-bottom: var(--fn-sp-4); font-weight: 600; }
.auth-card .field-row { display: flex; gap: var(--fn-sp-3); }
.auth-card .field-row label { flex: 1; min-width: 0; }
/* inline "Forgot password?" sitting on the password label's baseline */
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fn-sp-3); }
.auth-label-row a { font-size: var(--fn-text-sm); font-weight: 600; }
/* clearly separated sign-up prompt — a hairline keeps it off the Sign in button */
.auth-alt { margin-top: var(--fn-sp-5); padding-top: var(--fn-sp-4); border-top: 1px solid var(--fn-line); text-align: center; color: var(--fn-ink-500); font-size: var(--fn-text-sm); }
.field-hint { display: block; color: var(--fn-ink-500); font-size: var(--fn-text-sm); margin-top: 4px; }
/* drifting leaves — the OUTER span falls straight down at a steady pace (never pauses); the INNER span
   flutters side-to-side and rocks on its own rhythm. Splitting descent from sway means the fall never
   stalls, and giving each leaf its own descent + flutter timing keeps them spread out instead of clumping. */
.leaf-drift { position: absolute; top: 0; z-index: 1; color: var(--fn-leaf-400); animation: leaf-descend linear infinite; will-change: transform; }
.leaf-flutter { display: inline-block; animation: leaf-flutter ease-in-out infinite alternate; will-change: transform; }

/* ---------- Forest School · The App — logo lockup (sprig + stacked wordmark) ---------- */
.fs-logo { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; line-height: 1; }
.fs-logo__mark { width: 2.25em; height: 2.25em; flex: none; }
/* app-icon squircle: same mark on paper and on dark — one consistent brand chip */
.fs-logo__mark .fs-box   { fill: var(--fn-forest-700); }
.fs-logo__mark .fs-leaf  { fill: #5fd24f; }
.fs-logo__mark .fs-leaf2 { fill: #5fd24f; opacity: .82; }
.fs-logo__mark .fs-stem  { stroke: #cfe0c7; }
/* only the sprig sways (pivoting at the stem base); the box stays put */
.fs-logo__mark .fs-sprig { transform-box: fill-box; transform-origin: 50% 100%; animation: leaf-sway 6s ease-in-out infinite; }
.fs-logo__text { display: inline-grid; gap: .22em; }
.fs-logo__name { font-family: var(--fn-font-display); font-weight: 600; font-size: 1em; letter-spacing: -.01em; color: var(--fn-forest-900); }
.fs-logo__kicker { font-family: var(--fn-font); font-weight: 700; font-size: .42em; letter-spacing: .34em; text-transform: uppercase; color: var(--fn-forest-500); }
/* hero size on the login splash */
.fs-logo.fs-hero { font-size: var(--fn-text-2xl); }
/* on dark surfaces (sidebar / mobile top bar): only the wordmark changes — the squircle mark is identical everywhere */
.fs-logo.fs-on-dark .fs-logo__name { color: #fff; }
.fs-logo.fs-on-dark .fs-logo__kicker { color: #9fb497; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fn-sp-4); margin-bottom: var(--fn-sp-6); flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { font-family: var(--fn-font-hand); font-size: 1.4rem; color: var(--fn-ink-500); margin: 6px 0 0; }

/* ---------- Tables ---------- */
/* No overflow:hidden — it would kill the sticky header; corners are rounded per-cell instead. */
.fn-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-lg); box-shadow: var(--fn-shadow-sm); }
.fn-table th { text-align: left; font-family: var(--fn-font-hand); font-size: 1.1rem; color: var(--fn-ink-500); font-weight: 700; padding: 10px var(--fn-sp-4); background: var(--fn-paper-2); border-bottom: 1.5px solid var(--fn-line); position: sticky; top: 0; z-index: 2; }
.fn-table thead th:first-child { border-top-left-radius: var(--fn-radius-lg); }
.fn-table thead th:last-child { border-top-right-radius: var(--fn-radius-lg); }
.fn-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--fn-radius-lg); }
.fn-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--fn-radius-lg); }
.fn-table td { padding: var(--fn-sp-3) var(--fn-sp-4); border-bottom: 1px solid var(--fn-line); transition: background .12s ease; }
/* Anchor each row on its primary (first) column, but keep nested secondary text light. */
.fn-table td:first-child { font-weight: 600; }
.fn-table td:first-child .muted, .fn-table td:first-child .small { font-weight: 400; }
.fn-table tr:last-child td { border-bottom: none; }
.fn-table tbody tr:hover td { background: var(--fn-paper-2); }
/* Keyboard focus for clickable rows (role=button, made operable by the global Enter/Space handler). */
.fn-table tbody tr[role="button"] { outline: none; }
.fn-table tbody tr[role="button"]:focus-visible td { background: var(--fn-leaf-200); box-shadow: inset 0 -2px 0 var(--fn-forest-500), inset 0 2px 0 var(--fn-forest-500); }
[role="button"][tabindex]:not(tr):focus-visible { outline: 3px solid var(--fn-leaf-200); outline-offset: 2px; }

/* Visually-hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skeleton loader — shimmer placeholder shaped like a table while a list loads. */
.skeleton-card { background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-lg); box-shadow: var(--fn-shadow-sm); overflow: hidden; }
.skeleton-row { display: flex; align-items: center; gap: 1.5rem; padding: 15px var(--fn-sp-4); border-bottom: 1px solid var(--fn-line); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-bar { height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--fn-paper-2) 25%, var(--fn-paper-3) 37%, var(--fn-paper-2) 63%);
    background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }

/* On a phone a 4-column table overflows and clips its right-hand columns. Collapse each row into a
   stacked card: the first cell is the title, the rest become tidy label:value lines (via data-label). */
@media (max-width: 640px) {
    .fn-table { border: none; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
    .fn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .fn-table tbody, .fn-table tr, .fn-table td { display: block; width: 100%; }
    .fn-table tr { background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-lg); box-shadow: var(--fn-shadow-sm); padding: 12px 14px; margin-bottom: 10px; }
    .fn-table tbody tr:hover td { background: transparent; }
    .fn-table td { border-bottom: none; padding: 4px 0; }
    .fn-table td:first-child { font-size: 1.05rem; font-weight: 600; margin-bottom: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--fn-line); }
    .fn-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .fn-table td[data-label]::before { content: attr(data-label); color: var(--fn-ink-500); font-size: .8rem; font-weight: 600; }
}

/* Compliance-at-a-glance chip row (profile + free-practitioner home) */
.prof-compliance { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

/* Inline document preview (uploaded PDF via iframe/object; Word converted to sanitised HTML) */
.doc-frame { width: 100%; height: 75vh; border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-sm); background: #fff; }
.doc-html { background: #fff; border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-sm); padding: 1.25rem 1.5rem; max-height: 75vh; overflow: auto; }
.doc-html :is(h1, h2, h3) { font-family: var(--fn-font-display); color: var(--fn-forest-900); margin: 1rem 0 .4rem; }
.doc-html p { margin: 0 0 .6rem; }
.doc-html table { border-collapse: collapse; width: 100%; margin: .6rem 0; }
.doc-html td, .doc-html th { border: 1px solid var(--fn-line-strong); padding: 6px 9px; text-align: left; vertical-align: top; }
.doc-html img { max-width: 100%; height: auto; }

/* Payment-overdue grace nudge (owner only) */
.grace-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    background: var(--fn-amber-200); color: var(--fn-ink-900);
    border: 1.5px solid var(--fn-amber-600); border-radius: var(--fn-radius-sm);
    padding: 12px 16px; margin: 0 0 1rem; font-weight: 600;
}
.grace-banner .btn { flex: 0 0 auto; }

/* Done-screen at-a-glance stats */
.sum-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 1rem; }
.sum-stat { background: var(--fn-paper-2); border: 1px solid var(--fn-line); border-radius: 14px; padding: 12px 6px; text-align: center; }
.sum-num { display: block; font-family: var(--fn-font-hand); font-size: 1.7rem; font-weight: 700; color: var(--fn-forest-700); line-height: 1; }
.sum-lbl { display: block; font-size: .72rem; color: var(--fn-ink-500); margin-top: 4px; }
@media (max-width: 430px) { .sum-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Misc ---------- */
.op-note { background: radial-gradient(120% 140% at 0% 0%, rgba(215,232,207,.7), var(--fn-card)); border: 1.5px solid var(--fn-leaf-400); border-radius: var(--fn-radius); padding: var(--fn-sp-4) var(--fn-sp-5); }
.coming-soon { background: var(--fn-paper-2); border: 2px dashed var(--fn-line-strong); border-radius: var(--fn-radius-lg); padding: var(--fn-sp-7); text-align: center; color: var(--fn-ink-500); }
.coming-soon .hand { display: block; font-size: 2rem; margin-bottom: var(--fn-sp-2); }

/* ---------- Empty states ---------- */
.empty-state {
    text-align: center; padding: var(--fn-sp-8) var(--fn-sp-5); max-width: 460px; margin: var(--fn-sp-4) auto;
    background: var(--fn-paper-2); border: 2px dashed var(--fn-line-strong); border-radius: var(--fn-radius-lg);
}
.empty-state .empty-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: var(--fn-sp-3); }
.empty-state .empty-icon { color: var(--fn-forest-500); line-height: 1; margin-bottom: var(--fn-sp-3); }
.empty-state h2 { font-family: var(--fn-font-display); font-size: 1.5rem; color: var(--fn-forest-900); margin: 0 0 var(--fn-sp-2); }
.empty-state p { color: var(--fn-ink-500); margin: 0 auto var(--fn-sp-5); max-width: 38ch; }
.empty-state .btn { width: auto; }
.row-skip { opacity: .5; }

/* ---------- Mobile top bar + bottom tab nav ---------- */
.fn-topbar-brand { display: none; align-items: center; gap: 8px; font-family: var(--fn-font-display); font-weight: 600; font-size: var(--fn-text-lg); color: var(--fn-forest-900); text-decoration: none; }
.fn-topbar-brand .leaf { color: var(--fn-leaf-cta); }
.fn-topbar-spacer { flex: 1 1 auto; }

.bottomnav { display: none; }
.bn-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; padding: 6px 0; color: var(--fn-ink-500); text-decoration: none; font-size: 0.72rem; font-weight: 600;
}
.bn-tab svg { width: 24px; height: 24px; }
.bn-tab.active { color: var(--fn-forest-700); }
.bn-tab.active svg { color: var(--fn-leaf-cta); }
.bn-tab:hover { text-decoration: none; }

/* ---------- More (mobile setup hub) ---------- */
.more-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.more-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow-sm); text-decoration: none; color: var(--fn-ink-700); transition: transform .12s ease, box-shadow .12s ease; }
.more-row:hover { text-decoration: none; box-shadow: var(--fn-shadow); transform: translateY(-1px); }
.more-row .more-ic { font-size: 1.5rem; line-height: 1; }
.more-row span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.more-row strong { color: var(--fn-forest-900); }
.more-row small { color: var(--fn-ink-500); }
.more-row .more-go { font-size: 1.6rem; color: var(--fn-ink-300); }
.more-signout { margin-top: var(--fn-sp-5); }

/* ---------- Today dashboard ---------- */
.today-card {
    display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    background: linear-gradient(135deg, var(--fn-forest-700), var(--fn-forest-900));
    color: #f4efe0; border-radius: var(--fn-radius-lg); padding: var(--fn-sp-5) var(--fn-sp-6);
    box-shadow: var(--fn-shadow); position: relative; overflow: hidden; margin-bottom: var(--fn-sp-4);
}

/* "Needs you" dashboard strip — clay-accented to-do cards, shown only when there's something to act on. */
/* Date/season note on the left, the few "needs you" cards on the right of the same row. */
.wn-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.25rem; flex-wrap: wrap; margin: 0 0 var(--fn-sp-4); }
.wn-top .wn-note { margin: 0; }
.needs-strip { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.needs-card { display: flex; align-items: center; gap: .6rem; padding: .65rem .95rem; text-decoration: none;
    background: #fbf0e6; border: 1.5px solid #e7c3a6; border-radius: var(--fn-radius); color: var(--fn-ink-700);
    transition: transform .12s ease, box-shadow .12s ease; }
.needs-card:hover { transform: translateY(-1px); box-shadow: var(--fn-shadow-sm); text-decoration: none; }
.needs-card .needs-ic { color: var(--fn-red-600); display: flex; }
.needs-num { font-weight: 700; font-family: var(--fn-font-display); font-size: 1.05rem; }
.needs-label { color: var(--fn-ink-500); }
.needs-go { margin-left: .3rem; color: var(--fn-red-600); font-weight: 700; }

/* Collapsible form section (progressive disclosure) — native <details>, keyboard-accessible, no JS. */
.form-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; margin: 0; }
.form-details > summary::-webkit-details-marker { display: none; }
.form-details > summary::after { content: "▸"; margin-left: auto; color: var(--fn-ink-500); transition: transform .15s ease; }
.form-details[open] > summary::after { transform: rotate(90deg); }
.form-details[open] > summary { margin-bottom: var(--fn-sp-3); }
.form-details > summary:focus-visible { outline: 3px solid var(--fn-leaf-200); outline-offset: 3px; border-radius: var(--fn-radius-sm); }
.today-card::after {
    content: ""; position: absolute; right: -20px; bottom: -30px; width: 150px; height: 150px; opacity: .14;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2'><path d='M12 3c1.2 4 5 5 5 9a5 5 0 01-10 0c0-2 1-3.2 2.2-4.2C9.2 9.6 10 11 11 11c1.2-1.8-.4-5 1-8Z'/></svg>") no-repeat center/contain;
}
.today-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--fn-shadow-lg); }
.today-kicker { font-family: var(--fn-font); font-size: var(--fn-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #bfe6a8; }
.today-card.is-live .today-kicker { color: #8ff07a; }
.today-title { font-family: var(--fn-font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin: 2px 0; }
.today-meta { color: #d8cfb8; font-size: var(--fn-text-sm); }
.today-go { margin-top: var(--fn-sp-3); font-weight: 700; color: #fff; }
.today-card--empty { background: linear-gradient(135deg, var(--fn-paper-2), var(--fn-card)); color: var(--fn-ink-700); border: 2px dashed var(--fn-line-strong); box-shadow: var(--fn-shadow-sm); }
.today-card--empty .today-kicker { color: var(--fn-forest-600); }
.today-card--empty .today-title { color: var(--fn-forest-900); }
.today-card--empty .today-meta { color: var(--fn-ink-500); }
.today-card--empty .today-go { color: var(--fn-forest-700); }
.today-card--empty::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4e3b' stroke-width='1.2'><path d='M12 3c1.2 4 5 5 5 9a5 5 0 01-10 0c0-2 1-3.2 2.2-4.2C9.2 9.6 10 11 11 11c1.2-1.8-.4-5 1-8Z'/></svg>"); opacity: .2; }

/* Setup checklist */
.setup-card { background: var(--fn-card); border: 1.5px solid var(--fn-card-edge); border-radius: var(--fn-radius-lg); box-shadow: var(--fn-shadow-sm); padding: var(--fn-sp-5) var(--fn-sp-5) var(--fn-sp-3); margin-bottom: var(--fn-sp-5); }
.setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.setup-head h2 { font-family: var(--fn-font-display); font-size: 1.4rem; margin: 0; color: var(--fn-forest-900); }
.setup-count { font-family: var(--fn-font-hand); font-size: 1.15rem; color: var(--fn-forest-600); white-space: nowrap; }
.setup-bar { height: 8px; border-radius: 99px; background: var(--fn-paper-2); margin: 12px 0 4px; overflow: hidden; }
.setup-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fn-leaf-400), var(--fn-leaf-cta)); transition: width .4s ease; }
.setup-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.setup-steps li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--fn-line); }
.setup-steps li:last-child { border-bottom: none; }
.setup-tick { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--fn-line-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.setup-steps li.is-done .setup-tick { background: var(--fn-leaf-cta); border-color: var(--fn-leaf-cta); }
.setup-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.setup-body strong { color: var(--fn-forest-900); }
.setup-steps li.is-done .setup-body strong { color: var(--fn-ink-500); text-decoration: line-through; text-decoration-color: var(--fn-line-strong); }
.setup-body small { color: var(--fn-ink-500); }
.setup-cta { min-height: 42px; padding: 0 18px; white-space: nowrap; }
.setup-done-tag { font-family: var(--fn-font-hand); font-size: 1.1rem; color: var(--fn-forest-600); }

.signed-line { color: var(--fn-ink-500); font-size: var(--fn-text-sm); margin-top: var(--fn-sp-5); }

/* ---------- In-session focus shell ----------
   A stripped-back, full-bleed view for when you're actually RUNNING a session in the wood:
   no sidebar, no bottom nav, no setup chrome — just this session and a clear way out. */
.fn-focus { max-width: 980px; margin: 0 auto; padding: 14px 16px 96px; }
.focus-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    margin: -14px -16px 16px; padding: 10px 14px;
    /* Near-opaque solid (no backdrop-filter): a blurred sticky bar forces constant GPU compositing,
       which janks on field phones — keep the field app cheap to paint. */
    background: var(--fn-paper);
    border-bottom: 1px solid var(--fn-line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fn-paper) 60%, transparent);
}
.focus-title {
    flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--fn-ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-title small { display: block; font-weight: 500; color: var(--fn-ink-500); font-size: .82rem; }
.focus-leave, .focus-action {
    flex: 0 0 auto; font-weight: 600; text-decoration: none;
    padding: 9px 12px; border-radius: 12px; min-height: 40px; display: inline-flex; align-items: center;
}
.focus-leave { color: var(--fn-forest-700); }
.focus-leave:hover { background: var(--fn-paper-2); text-decoration: none; }
.focus-action { color: var(--fn-red-600); }
.focus-action:hover { background: var(--fn-red-200); text-decoration: none; }

/* ---------- Branded loading splash ---------- */
.app-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    min-height: 78vh; text-align: center; padding: 2rem 1rem;
}
.app-loading-mark svg {
    width: 88px; height: 88px; display: block; border-radius: 21px;
    filter: drop-shadow(0 7px 16px rgba(40, 52, 42, .18));
    animation: app-breathe 1.9s cubic-bezier(.4, 0, .3, 1) infinite;
}
.app-loading-text {
    margin: 0; font-family: var(--fn-font-hand); font-size: 1.35rem; color: var(--fn-forest-700);
    animation: app-fade 1.9s ease-in-out infinite;
}
@keyframes app-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.07) translateY(-3px); } }
@keyframes app-fade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Friendly error fallback (global error boundary) */
.app-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    min-height: 60vh; text-align: center; padding: 2rem 1.25rem; max-width: 26rem; margin: 0 auto;
}
.app-error-ic { color: var(--fn-amber-600); }
.app-error-title { font-family: var(--fn-font-display); font-size: 1.3rem; color: var(--fn-forest-900); margin: .2rem 0 0; }
.app-error-text { color: var(--fn-ink-500); margin: 0 0 .5rem; line-height: 1.5; }
.app-error-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.app-error-detail { margin-top: .5rem; width: 100%; max-width: 30rem; text-align: left; }
.app-error-detail > summary { cursor: pointer; font-size: .85rem; color: var(--fn-ink-500); }
.app-error-detail pre { margin: .5rem 0 0; padding: .65rem .8rem; background: var(--fn-paper-2); border: 1px solid var(--fn-line-strong);
    border-radius: var(--fn-radius-sm); font-size: .72rem; line-height: 1.4; color: var(--fn-ink-700);
    white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto; }

/* ---------- Session runner ---------- */
.run-stepper { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.run-step { font-family: var(--fn-font-hand); font-size: 1.15rem; color: var(--fn-ink-300); padding: 4px 16px; border-radius: var(--fn-radius-pill); border: 1.5px dashed var(--fn-line-strong); background: transparent; cursor: pointer; }
.run-step:disabled { cursor: default; opacity: .5; }
.run-step.is-done:not(:disabled):hover { border-color: var(--fn-forest-500); color: var(--fn-forest-700); }
.run-step.is-done { color: var(--fn-forest-600); border-style: solid; border-color: var(--fn-leaf-400); }
.run-step.is-current { color: #fff; background: var(--fn-forest-600); border: 1.5px solid var(--fn-forest-700); }
.run-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.75rem; align-items: start; }
.run-actions { display: flex; gap: 1rem; margin-top: 1.5rem; align-items: center; flex-wrap: wrap; }
.run-actions .btn--xl { width: auto; min-width: 230px; }

/* One-page runner: sticky section jump-nav + stacked sections. Single row — the pills scroll sideways on a
   narrow phone and Refresh stays pinned to the right, so it never wraps onto its own line. */
.run-nav { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap;
    margin: 0 0 1.25rem; padding: .5rem 0; background: rgba(253,250,242,.95); backdrop-filter: blur(6px);
    border-bottom: 1.5px solid var(--fn-line); }
.run-nav-links { display: flex; gap: .4rem; flex: 1 1 auto; min-width: 0; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.run-nav-links::-webkit-scrollbar { display: none; }
.run-nav-links a { font-family: var(--fn-font-hand); font-size: 1.05rem; line-height: 1.6; color: var(--fn-forest-700);
    text-decoration: none; padding: 1px 13px; border-radius: var(--fn-radius-pill); border: 1.5px solid var(--fn-line);
    background: transparent; white-space: nowrap; }
.run-nav-links a:hover { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); color: var(--fn-forest-800); text-decoration: none; }
.run-nav .run-refresh { flex: 0 0 auto; margin-left: 0; }
/* Generous rhythm so the one long page breathes: clear gaps between sections, and between the stacked
   blocks within a section (heading → cards → action). */
.run-sec { scroll-margin-top: 76px; margin-bottom: 2.75rem; }
.run-sec > * + * { margin-top: 1.1rem; }
.run-sec-head { font-family: var(--fn-font-display); font-size: 1.2rem; color: var(--fn-forest-900); margin: 0 0 .25rem; }
.add-more { margin: .75rem 0; border: 1.5px solid var(--fn-line-strong); border-radius: var(--fn-radius-sm); background: var(--fn-paper); padding: 0 .85rem; }
.add-more > summary { cursor: pointer; font-weight: 600; padding: .65rem 0; color: var(--fn-forest-800); list-style: none; display: flex; align-items: center; gap: .4rem; }
.add-more > summary::-webkit-details-marker { display: none; }
.add-more[open] > summary { border-bottom: 1px solid var(--fn-line); }
.add-more-body { padding: .75rem 0; display: flex; flex-direction: column; gap: .5rem; }

/* Session dashboard: the plan up top, then a hub of status tiles — tap to drill into a section */
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: var(--fn-radius-pill);
    background: var(--fn-paper-2); border: 1.5px solid var(--fn-line-strong); font-family: var(--fn-font); font-weight: 600;
    font-size: var(--fn-text-sm); color: var(--fn-ink-700); }
.status-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fn-ink-300); }
.status-pill--live { color: var(--fn-forest-800); border-color: var(--fn-leaf-400); }
.status-pill--live::before { background: var(--fn-leaf-cta); box-shadow: 0 0 0 3px var(--fn-leaf-200); }

/* Plan — a warm leafy band at the top, not a card */
.dash-plan { margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: var(--fn-radius);
    background: linear-gradient(155deg, var(--fn-leaf-200), var(--fn-paper-2) 85%); border: 1.5px solid var(--fn-leaf-400); }
.dash-plan-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fn-font); font-weight: 700;
    font-size: var(--fn-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fn-forest-700); }
.dash-plan-lead { margin: .25rem 0 .55rem; color: var(--fn-ink-900); font-size: 1.02rem; line-height: 1.5; }
.dash-plan-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-plan-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--fn-radius-pill);
    background: var(--fn-card); border: 1.5px solid var(--fn-leaf-400); font: inherit; font-size: .85rem; color: var(--fn-forest-800);
    cursor: pointer; transition: background .12s ease, transform .1s ease; }
.dash-plan-act:hover { background: var(--fn-leaf-200); transform: translateY(-1px); }
.dash-plan-act-go { color: var(--fn-forest-500); font-weight: 700; opacity: .55; }
.obs-activity { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 .7rem; padding: 5px 12px;
    border-radius: var(--fn-radius-pill); background: var(--fn-leaf-200); color: var(--fn-forest-800); font-size: .88rem; }

/* Band labels group the tiles into "state" (top) and "logs you build up" (bottom). */
.dash-band-label { font-family: var(--fn-font); font-size: var(--fn-text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--fn-ink-300); margin: 1.4rem 0 .6rem; }
.dash-band-label:first-of-type { margin-top: 0; }

.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.dash-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
    text-align: left; cursor: pointer; font: inherit;
    padding: .85rem .95rem; border: 1.5px solid var(--fn-line-strong); border-radius: var(--fn-radius);
    background: var(--fn-card); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
/* Icon + label ride on top; the value sits directly beneath — compact, no dead vertical gap. */
.dash-tile-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* The lone 3rd tile in each band spans the full width (same card style), so a band never has a ragged empty half. */
.dash-tile:nth-child(3):last-child { grid-column: 1 / -1; }
/* A little hills-and-trees horizon in the corner, tinted to the tile's category — decorative, low opacity so
   the text stays crisp. Sits behind the content (children are lifted above it). */
.dash-tile > * { position: relative; z-index: 1; }
.dash-tile::after {
    content: ""; position: absolute; right: 10px; bottom: 8px; width: 60px; height: 60px; z-index: 0; pointer-events: none; opacity: .15;
    background: var(--tile-accent, var(--fn-forest-700));
    -webkit-mask: var(--tile-motif, var(--fn-hills)) right bottom / contain no-repeat;
            mask: var(--tile-motif, var(--fn-hills)) right bottom / contain no-repeat;
}
/* Each tile gets a genuinely different, relevant emblem — sun, a little group, a shield, a leaf, a branch, a cross */
.dash-tile--weather  { --tile-accent: var(--fn-amber-600); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='40' cy='40' r='13' fill='%23000'/%3E%3Cg stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M40 19v6'/%3E%3Cpath d='M19 40h6'/%3E%3Cpath d='M55 40h7'/%3E%3Cpath d='M40 55v7'/%3E%3Cpath d='M25 25l4 4'/%3E%3Cpath d='M51 51l5 5'/%3E%3Cpath d='M55 25l-4 4'/%3E%3Cpath d='M29 51l-4 4'/%3E%3C/g%3E%3C/svg%3E"); }
.dash-tile--register { --tile-accent: var(--fn-forest-600); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Ccircle cx='22' cy='35' r='5'/%3E%3Cpath d='M15 63a7 7 0 0 1 14 0z'/%3E%3Ccircle cx='39' cy='28' r='6'/%3E%3Cpath d='M30 63a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='54' cy='37' r='5'/%3E%3Cpath d='M47 63a7 7 0 0 1 14 0z'/%3E%3C/g%3E%3C/svg%3E"); }
.dash-tile--risk     { --tile-accent: var(--fn-sky-600); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M38 12l20 8v15c0 14-10 23-20 27-10-4-20-13-20-27V20z' fill='%23000'/%3E%3C/svg%3E"); }
.dash-tile--obs      { --tile-accent: var(--fn-leaf-cta); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28 60C22 38 36 20 62 20c1 24-13 39-34 40z' fill='%23000'/%3E%3Cpath d='M28 60L16 64' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dash-tile--risklog  { --tile-accent: var(--fn-amber-600); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 60C26 50 44 52 62 36'/%3E%3Cpath d='M40 48l8-13'/%3E%3Cpath d='M52 44l6-14'/%3E%3Cpath d='M26 52l-6-11'/%3E%3C/g%3E%3C/svg%3E"); }
.dash-tile--incident { --tile-accent: var(--fn-red-600); --tile-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Crect x='33' y='22' width='14' height='40' rx='4'/%3E%3Crect x='20' y='35' width='40' height='14' rx='4'/%3E%3C/g%3E%3C/svg%3E"); }
.dash-tile:hover { transform: translateY(-2px); box-shadow: var(--fn-shadow-sm); border-color: var(--fn-leaf-400); }
.dash-tile:active { transform: translateY(0); }
.dash-tile:focus-visible { outline: 3px solid var(--fn-leaf-200); outline-offset: 2px; }
.dash-tile-label { min-width: 0; font-family: var(--fn-font); font-size: var(--fn-text-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--fn-ink-500); line-height: 1.1; }
/* A coloured icon badge per category — now a compact top-left anchor. */
.dash-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; flex: none; }
.dash-ic--weather  { background: var(--fn-sun-soft);  color: var(--fn-amber-600); }
.dash-ic--register { background: var(--fn-leaf-200);  color: var(--fn-forest-700); }
.dash-ic--risk     { background: var(--fn-sky-200);   color: var(--fn-sky-600); }
.dash-ic--obs      { background: var(--fn-leaf-200);  color: var(--fn-leaf-cta); }
.dash-ic--risklog  { background: var(--fn-amber-200); color: var(--fn-amber-600); }
.dash-ic--incident { background: var(--fn-red-200);   color: var(--fn-red-600); }
.dash-tile-main { font-family: var(--fn-font-display); font-size: 1.7rem; line-height: 1; color: var(--fn-forest-900); }
.dash-tile .dash-unit { font-family: var(--fn-font); font-size: .8rem; font-weight: 500; color: var(--fn-ink-500); }
.dash-tile-sub { font-size: .78rem; color: var(--fn-ink-500); line-height: 1.2; margin-top: .05rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The action affordance that stands in for a number when there's nothing to count yet — readable, inviting,
   never a lonely "0". Full tile width, one clean line. */
.dash-tile-cta { font-family: var(--fn-font); font-weight: 700; font-size: 1.05rem; color: var(--fn-forest-700); line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Log tiles carry a count badge only once they hold something — top-right, in the tile's own accent. */
.dash-count { position: absolute; top: 9px; right: 10px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    font-family: var(--fn-font); font-weight: 700; font-size: .8rem; color: #fff;
    background: var(--tile-accent, var(--fn-forest-700)); }
.dash-tile--incident .dash-count { background: var(--fn-red-600); }
/* weather tile — the bold "are we go?" hero state */
.dash-tile--go { border-color: var(--fn-leaf-400); background: linear-gradient(155deg, var(--fn-leaf-200), var(--fn-card) 72%); }
.dash-tile--go .dash-tile-main { color: var(--fn-forest-700); }
.dash-tile--mod { border-color: #d9a531; background: linear-gradient(155deg, #faf0d6, var(--fn-card) 72%); }
.dash-tile--nogo { border-color: var(--fn-red-300, #e0a59a); background: linear-gradient(155deg, var(--fn-red-200, #f6dcd5), var(--fn-card) 72%); }
.dash-tile--nogo .dash-tile-main { color: var(--fn-red-600); }
.dash-actions { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 1.75rem; }
.dash-actions .btn--xl { width: auto; min-width: 240px; }
.dash-back { margin: 0 0 1.5rem; padding-left: 0; }
@media (max-width: 380px) { .dash { grid-template-columns: 1fr; } }

/* ============================================================================
   Session hub — a real hierarchy (not a uniform grid). Headcount + weather set
   the scene; Observations is the solid hero; risk-log/incident are colour-coded
   secondary actions; risk assessments is demoted to a quiet reference link.
   Importance is encoded by size AND solid colour, so nothing reads as falsely equal.
   ============================================================================ */

/* Headcount — "how many children in the woods", taps into the register. */
.hub-count { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
    margin: 0 0 .65rem; padding: .8rem 1rem; border-radius: var(--fn-radius);
    background: var(--fn-card); border: 1.5px solid var(--fn-line-strong); }
.hub-count-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
    background: var(--fn-leaf-200); color: var(--fn-forest-700); flex: none; }
.hub-count-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hub-count-num { font-family: var(--fn-font-display); font-size: 1.55rem; line-height: 1.1; color: var(--fn-forest-900); }
.hub-count-word { font-family: var(--fn-font); font-size: .95rem; font-weight: 500; color: var(--fn-ink-700); margin-left: .35rem; }
.hub-count-sub { font-size: var(--fn-text-sm); color: var(--fn-ink-500); }
.hub-warn { color: var(--fn-amber-600); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.hub-go { color: var(--fn-ink-300); font-size: 1.3rem; line-height: 1; flex: none; }

/* Weather — a prompt before the call (gently amber to invite the decision), a small status chip after. */
.hub-wx-prompt { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
    margin: 0 0 1.1rem; padding: .75rem 1rem; border-radius: var(--fn-radius);
    background: linear-gradient(150deg, var(--fn-sun-soft), var(--fn-card) 82%); border: 1.5px solid var(--fn-amber-200); }
.hub-wx-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--fn-sun-soft); color: var(--fn-amber-600); flex: none; }
.hub-wx-title { font-weight: 700; color: var(--fn-forest-900); }
.hub-wx-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 1.1rem; padding: 6px 13px;
    border-radius: var(--fn-radius-pill); font-size: var(--fn-text-sm); cursor: pointer; border: 1.5px solid var(--fn-line-strong); background: var(--fn-card); }
.hub-wx-chip.wx-go   { color: var(--fn-forest-800); border-color: var(--fn-leaf-400); background: var(--fn-leaf-200); }
.hub-wx-chip.wx-mod  { color: #8a5a12; border-color: var(--fn-amber-600); background: var(--fn-amber-200); }
.hub-wx-chip.wx-nogo { color: var(--fn-red-600); border-color: var(--fn-red-600); background: var(--fn-red-200); }
.hub-wx-note { color: var(--fn-ink-500); font-weight: 400; }
/* Once set, the weather chip sits in the top status row next to "In session" — compact, no bottom margin. */
.dash-top { justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }
.dash-top .run-refresh { margin-left: auto; }
.hub-wx-chip--top { margin: 0; padding: 4px 11px; font-size: var(--fn-text-xs); }

/* Observations — the solid hero. */
.hub-hero { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
    margin: 0 0 .75rem; padding: 1.1rem 1.15rem; border: 0; border-radius: var(--fn-radius-lg);
    background: linear-gradient(135deg, var(--fn-forest-700), var(--fn-forest-900)); color: var(--fn-paper);
    box-shadow: var(--fn-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.hub-hero:hover { transform: translateY(-2px); box-shadow: var(--fn-shadow-lg); }
.hub-hero:active { transform: translateY(0); }
.hub-hero-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
    background: rgba(255, 255, 255, .15); color: var(--fn-sun-soft); flex: none; }
.hub-hero-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hub-hero-title { font-family: var(--fn-font-display); font-size: 1.4rem; line-height: 1; }
.hub-hero-sub { font-size: var(--fn-text-sm); color: var(--fn-leaf-200); }
.hub-hero-go { font-family: var(--fn-font); font-size: 2.1rem; font-weight: 300; line-height: 1; color: var(--fn-sun-soft); flex: none; }

/* Secondary logs — two colour-coded cards. */
.hub-logs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 1.1rem; }
.hub-log { position: relative; overflow: hidden; display: flex; align-items: center; text-align: left;
    cursor: pointer; min-height: 84px; padding: .85rem .95rem; border-radius: var(--fn-radius); border: 1.5px solid;
    transition: transform .12s ease, box-shadow .12s ease; }
.hub-log:hover { transform: translateY(-1px); box-shadow: var(--fn-shadow-sm); }
.hub-log:active { transform: scale(.985); }
.hub-log-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .12rem; }
/* The icon now sits LARGE and faint in the card's right edge — a background motif, not a top badge that
   pushed the text down unevenly. Text stays left, vertically centred, so both cards read at the same height. */
.hub-log-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 0; opacity: .12; pointer-events: none; }
.hub-log-label { font-family: var(--fn-font); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    font-size: var(--fn-text-xs); color: var(--fn-ink-500); }
.hub-log-sub { font-family: var(--fn-font); font-weight: 700; font-size: 1.05rem; }
.hub-log--risk { background: linear-gradient(155deg, var(--fn-amber-200), var(--fn-card) 86%); border-color: var(--fn-amber-600); }
.hub-log--risk .hub-log-ic { color: var(--fn-amber-600); }
.hub-log--risk .hub-log-sub { color: #8a5a12; }
.hub-log--risk .dash-count { background: var(--fn-amber-600); }
.hub-log--incident { background: linear-gradient(155deg, var(--fn-red-200), var(--fn-card) 86%); border-color: var(--fn-red-600); }
.hub-log--incident .hub-log-ic { color: var(--fn-red-600); }
.hub-log--incident .hub-log-sub { color: var(--fn-red-600); }
.hub-log--incident .dash-count { background: var(--fn-red-600); }

/* Risk assessments — quiet reference link. */
.hub-ra-link { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; cursor: pointer;
    margin: 0; padding: .7rem .3rem; background: none; border: 0; border-top: 1px solid var(--fn-line);
    color: var(--fn-ink-700); font-size: var(--fn-text-sm); }
.hub-ra-link .fn-icon { color: var(--fn-sky-600); }
.hub-ra-label { font-weight: 600; }
.hub-ra-status { color: var(--fn-ink-300); margin-left: auto; }

/* In-session references bar — safety/reference you might need WHILE running; each opens a sheet over the
   session so you never leave it. Sits at the foot of the hub. */
.refbar { display: flex; gap: .6rem; margin: 1.5rem 0 .25rem; padding-top: 1.1rem; border-top: 1px solid var(--fn-line); }
.refbar-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; cursor: pointer;
    padding: .8rem .5rem; border-radius: var(--fn-radius); border: 1.5px solid var(--fn-line-strong);
    background: var(--fn-card); font: inherit; font-size: var(--fn-text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--fn-forest-800); text-align: center; line-height: 1.2;
    transition: transform .1s ease, border-color .12s ease, background .12s ease; }
.refbar-item:hover { border-color: var(--fn-leaf-400); background: var(--fn-paper-2); }
.refbar-item:active { transform: scale(.97); }
.refbar-item .fn-icon { color: var(--fn-forest-600); }
.refbar-item--eap .fn-icon { color: var(--fn-red-600); }

/* Emergency action plan — a clean label/value list; the phone number is a tap-to-call link. */
.eap { margin: .4rem 0 0; }
.eap-row { display: flex; flex-direction: column; gap: 1px; padding: .65rem 0; border-bottom: 1px solid var(--fn-line); }
.eap-row:last-child { border-bottom: 0; }
.eap-row dt { font-size: var(--fn-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--fn-ink-300); font-weight: 700; }
.eap-row dd { margin: 0; font-size: 1.05rem; color: var(--fn-ink-900); }
.eap-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.eap-row--call dd a { font-weight: 800; font-size: 1.2rem; color: var(--fn-red-600); text-decoration: none; }

/* Terms-acceptance row on signup — checkbox aligned with a short wrapping label. */
.checkbox-row { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .4rem; font-size: var(--fn-text-sm); }
.checkbox-row input[type="checkbox"] { margin-top: .15rem; flex: none; width: 18px; height: 18px; }

/* Drill-in bottom sheet — the hub stays mounted underneath; a section slides up over it like a native sheet. */
.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(20, 32, 26, .45); animation: sheet-scrim-in .2s ease both; }
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 720px; margin: 0 auto;
    max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;   /* vh fallback if dvh unsupported */
    background: var(--fn-paper); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 34px rgba(20, 32, 26, .28);
    padding: 0 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    animation: sheet-up .3s cubic-bezier(.2, .82, .25, 1) both;
}
.sheet-grip {
    align-self: center; flex: none; width: 42px; height: 5px; margin: 11px 0 8px; padding: 0;
    border: 0; border-radius: 999px; background: var(--fn-line-strong); cursor: pointer;
}
.sheet-grip::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 28px; }   /* bigger tap target */
.sheet-grip { position: relative; }
/* flex:1 + min-height:0 is what actually lets a flex child scroll: without it, long content overflows the
   sheet (pushing the save button off-screen / behind the tab bar) instead of scrolling inside it. */
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: .4rem; }
/* Drill-in forms are compact: the primary action doesn't need to be full-bleed XL, and it wants clear space
   from the field above it (the old full-page sizing felt huge and crowded once these moved into a sheet). */
.sheet-body .btn--xl { min-height: 48px; font-size: 1rem; margin-top: 1rem; }
.sheet-body .card input, .sheet-body .card textarea { margin-bottom: .15rem; }
.sheet-body > .card:first-child { margin-top: .2rem; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-scrim { animation: none; } }
/* Desktop: the field sheet becomes a centred dialog rather than a phone bottom-sheet stranded at the screen edge. */
@media (min-width: 760px) {
    .sheet {
        top: 50%; bottom: auto; left: 50%; right: auto;
        width: min(720px, 92vw); max-height: 86vh;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        padding: .3rem 1.5rem 1.5rem;
        animation: sheet-pop .2s ease both;
    }
    @keyframes sheet-pop {
        from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
    }
}

/* Sticky page action bar — a form's ONE home for its primary action. Pinned to the bottom of the
   scroll so Save is never below the fold on a tall form; secondary/back sits left as a ghost, the
   primary right. Mirrors .focus-bar (solid bg, no backdrop-filter — cheap to paint on field phones).
   Use for a page's single bottom action row; .run-actions stays for in-flow / multi-row cases. */
.page-actions {
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin: 2rem 0 0; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--fn-paper);
    border-top: 1px solid var(--fn-line);
}
.page-actions .btn--xl { width: auto; min-width: 230px; }
.page-actions .pa-spacer { flex: 1 1 auto; }   /* pushes the primary to the right of any secondary/back */

/* End-of-session bar — the leader's single primary action, pinned to the foot of the session hub so it's
   always thumb-reachable without scrolling. Full-bleed (it's THE action here), solid paper bg so hub content
   scrolls cleanly under it. Mirrors the .page-actions sticky chrome. */
.run-end {
    position: sticky; bottom: 0; z-index: 30;
    margin: 1.4rem 0 0; padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: var(--fn-paper); border-top: 1px solid var(--fn-line);
}
.run-end .btn--xl { width: 100%; }

/* The site's day forecast, shown in the weather sheet to inform (not replace) the leader's go/no-go call. */
.wx-forecast {
    display: flex; align-items: center; gap: .5rem;
    background: var(--fn-sky-50, var(--fn-paper-2)); border: 1px solid var(--fn-line);
    border-radius: var(--fn-radius); padding: .6rem .75rem; margin: .2rem 0 .5rem;
    font-size: .95rem; color: var(--fn-forest-900); font-weight: 600;
}
.wx-forecast svg { color: var(--fn-amber-600); flex: none; }
.seg { display: inline-flex; border: 2px solid var(--fn-line-strong); border-radius: var(--fn-radius-pill); overflow: hidden; margin: 8px 0; }
.seg-btn { min-height: 48px; padding: 0 18px; border: none; background: transparent; font: inherit; font-weight: 600; cursor: pointer; color: var(--fn-forest-800); transition: background .12s ease; }
.seg-btn:not(.is-on):hover { background: var(--fn-paper-2); }
.seg-btn.is-on { background: var(--fn-forest-600); color: #fff; }
.seg-btn.is-on.warn { background: var(--fn-amber-600); }
.seg-btn.is-on.danger { background: var(--fn-red-600); }
.seg-sm .seg-btn { min-height: 44px; padding: 0 14px; }
/* ---- Register "Who's here?" — warm, scannable, field-friendly. Monogram per child, medical info as chips,
   a clear Present/Absent toggle, and absent children fade back so you can glance who's actually in. ---- */
.reg-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.reg-count { font-family: var(--fn-font); font-size: var(--fn-text-sm); font-weight: 700; color: var(--fn-forest-700); white-space: nowrap; }
.reg-count-of { color: var(--fn-ink-300); font-weight: 500; }
.reg-list { display: flex; flex-direction: column; }
.reg-child { padding: .8rem 0; border-bottom: 1px solid var(--fn-line); transition: opacity .15s ease; }
.reg-child:first-child { padding-top: .2rem; }
.reg-child:last-child { border-bottom: 0; padding-bottom: .2rem; }
.reg-child.is-absent { opacity: .5; }
.reg-child-id { display: flex; align-items: flex-start; gap: .7rem; }
.reg-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--fn-font-display); font-size: 1.05rem; font-weight: 600; color: #fff; }
.reg-avatar--0 { background: var(--fn-forest-600); }
.reg-avatar--1 { background: var(--fn-bark-700); }
.reg-avatar--2 { background: var(--fn-sky-600); }
.reg-avatar--3 { background: var(--fn-amber-600); }
.reg-avatar--4 { background: var(--fn-forest-800); }
.reg-child-text { min-width: 0; flex: 1 1 auto; }
.reg-name { font-family: var(--fn-font-display); font-size: 1.1rem; color: var(--fn-forest-900); display: block; line-height: 1.2; }
.reg-alerts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.reg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--fn-radius-pill);
    font-size: var(--fn-text-xs); font-weight: 600; }
.reg-chip--allergy { background: var(--fn-red-200); color: var(--fn-red-600); }
.reg-chip--med { background: var(--fn-amber-200); color: #8a5a12; }
.reg-chip--cond { background: var(--fn-paper-2); color: var(--fn-ink-700); }
.reg-chip--nophoto { background: var(--fn-paper-2); color: var(--fn-ink-500); }
.reg-toggle { display: flex; gap: .45rem; margin-top: .65rem; }
.reg-tog { flex: 1; min-height: 44px; border-radius: var(--fn-radius-pill); border: 1.5px solid var(--fn-line-strong);
    background: var(--fn-card); font: inherit; font-weight: 700; color: var(--fn-ink-500); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease; }
.reg-tog:active { transform: scale(.98); }
.reg-tog--in.is-on { background: var(--fn-forest-600); border-color: var(--fn-forest-600); color: #fff; }
.reg-tog--out.is-on { background: var(--fn-bark-700); border-color: var(--fn-bark-700); color: #fff; }
.med-alert { color: var(--fn-red-600); font-weight: 700; font-size: .85rem; margin-top: 3px; }

/* Body map (safeguarding injury locations) */
.bodymap { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 6px 0; }
.bodymap-cap { font-weight: 600; font-size: .85rem; color: var(--fn-ink-500); margin-bottom: 2px; text-align: center; }
.bodymap-svg { width: 130px; height: auto; touch-action: manipulation; }
.bodymap-zone { fill: transparent; stroke: var(--fn-forest-500); stroke-width: 1; stroke-dasharray: 2 2; cursor: pointer; opacity: .5; transition: fill .1s ease, opacity .1s ease; }
.bodymap-zone:hover { opacity: .9; }
.bodymap-zone.on { fill: var(--fn-red-600); stroke: var(--fn-red-600); opacity: .8; stroke-dasharray: none; }
.stepper-ctl { display: flex; align-items: center; gap: 12px; }
.stepper-ctl .btn { min-height: 44px; min-width: 44px; padding: 0; font-size: 1.4rem; }
.stepper-num { font-family: var(--fn-font-display); font-size: 1.8rem; min-width: 40px; text-align: center; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip-grid .chip { cursor: pointer; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 9px 0; border-bottom: 1px solid var(--fn-line); display: flex; gap: 8px; align-items: baseline; }
@media (max-width: 900px) { .run-grid { grid-template-columns: 1fr; } }
/* Two-column form layout — fills desktop width, stacks to one column on mobile. */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; max-width: 1060px; }
.form-2col > .form-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 900px) { .form-2col { grid-template-columns: 1fr; } }
/* Day-of-week toggles — clearly OFF (dashed outline) vs ON (filled green), so an empty selection is obvious. */
.day-toggle { min-height: 40px; padding: 0 16px; border-radius: var(--fn-radius-pill); cursor: pointer;
    background: transparent; border: 1.5px dashed var(--fn-line-strong); color: var(--fn-forest-700);
    font-size: var(--fn-text-sm); font-weight: 600; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.day-toggle:hover { border-color: var(--fn-forest-500); }
.day-toggle.on { background: var(--fn-forest-600); border: 1.5px solid var(--fn-forest-700); color: #fff; }
.live-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* In-session RA reference (collapsible, rendered from the session's snapshot) */
.ra-ref { margin: 0 0 14px; border: 1.5px solid var(--fn-line-strong); border-radius: var(--fn-radius-sm); background: var(--fn-paper-2); overflow: hidden; }
.ra-ref > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; color: var(--fn-forest-800); list-style: none; min-height: 44px; display: flex; align-items: center; }
.ra-ref > summary::-webkit-details-marker { display: none; }
.ra-ref[open] > summary { border-bottom: 1px solid var(--fn-line); }
.ra-ref-item { padding: 10px 14px; border-bottom: 1px solid var(--fn-line); }
.ra-ref-item:last-child { border-bottom: none; }
.ra-ref-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ra-ref-head .chip { flex: 0 0 auto; }
.live-actions { display: flex; width: 100%; margin: 0 0 1.25rem; }
.live-actions .seg-btn { flex: 1; padding: 0 8px; }
.run-stage-head { font-family: var(--fn-font-hand); font-size: 1.3rem; color: var(--fn-forest-700); margin: 0 0 8px; }
.run-stage-head strong { color: var(--fn-forest-900); }
.run-refresh { margin-left: 10px; padding: 3px 10px; min-height: 0; font-size: .8rem; font-weight: 600;
    background: var(--fn-paper-2); border: 1.5px solid var(--fn-line-strong); border-radius: var(--fn-radius-pill);
    color: var(--fn-forest-700); cursor: pointer; vertical-align: middle; }
.run-refresh:disabled { opacity: .5; cursor: default; }
/* Just-refreshed: the control becomes its own confirmation — no separate stray line of text. */
.run-refresh.is-fresh, .btn.btn--fresh { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); color: var(--fn-forest-800); }
.run-refresh.is-fresh:disabled, .btn.btn--fresh:disabled { opacity: 1; }
/* Helper (read-only) session view header */
.helper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.helper-head .btn { flex: 0 0 auto; }
/* Observation actions: photo + save stack full-width with even spacing (no width mismatch). */
.obs-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.obs-actions .btn--xl { margin-top: 0; }
.photo-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.photo-attached { display: flex; align-items: center; gap: 12px; margin: 0; }
.photo-attached img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--fn-radius-sm); border: 2px solid var(--fn-card-edge); }
@media (max-width: 760px) {
    /* Five equal-width segments on ONE line (no wrapping to a second row). Each fills 1/5 of the width,
       stays a 44px-tall tap target, and the current step's label is also spelled out in the header above. */
    .run-stepper { flex-wrap: nowrap; gap: 5px; margin-bottom: 1.25rem; }
    .run-step {
        flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
        font-size: .82rem; padding: 10px 3px; min-height: 44px; border-radius: 12px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: inline-flex; align-items: center;
    }
    /* Wizard nav: full-width, stacked, consistent — not a small back button orphaned above a wide primary. */
    .run-actions { flex-direction: column; gap: 10px; align-items: stretch; }
    .run-actions > *, .run-actions .btn--xl { width: 100%; min-width: 0; }
    /* Focus bar: keep the exit + concern reachable with a thumb; trim padding so the title still fits. */
    .focus-bar { gap: 6px; padding: 8px 12px; }
    .focus-leave, .focus-action { padding: 9px 10px; }
}

/* ---------- Onboarding guide bar ---------- */
.onboarding-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: linear-gradient(168deg, var(--fn-leaf-100, #eaf4e1), var(--fn-paper-2, #f4f1e6));
    border: 1.5px solid var(--fn-leaf-400, #8cc572); border-radius: var(--fn-radius-lg);
    padding: 12px 16px; margin-bottom: 1.5rem;
}
.onboarding-bar .ob-leaf { display: inline-flex; color: var(--fn-forest-600); }
.onboarding-bar .ob-leaf .fn-icon { width: 26px; height: 26px; }

/* Brand field-sketch icons (inline SVG, inherit currentColor) — replace OS emoji used as icons. */
.fn-icon { display: inline-block; vertical-align: -.15em; flex: none; color: inherit; }
.more-ic .fn-icon, .wn-badge-ic .fn-icon, .wn-nudge-ic .fn-icon, .wn-note-ic .fn-icon { color: var(--fn-forest-600); }
.onboarding-bar .ob-text { display: flex; flex-direction: column; flex: 1 1 160px; }
.onboarding-bar .ob-text strong { color: var(--fn-forest-800); }
.onboarding-bar .ob-text span { color: var(--fn-ink-500); font-size: var(--fn-text-sm); }
.onboarding-bar .ob-go { white-space: nowrap; }
.onboarding-bar .ob-dash { color: var(--fn-forest-700); font-size: var(--fn-text-sm); white-space: nowrap; text-decoration: underline; }
@media (max-width: 760px) { .onboarding-bar .ob-go { width: 100%; } }

/* ---------- Billing / pricing (the in-app sales page) ---------- */
.bill-config-note { border-color: var(--fn-amber-600); background: var(--fn-amber-200); margin-bottom: var(--fn-sp-5); }

/* Slim "what you're on now" strip — leaf-accented, with Manage billing pushed to the right. */
.bill-status {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .7rem 1rem; margin-bottom: var(--fn-sp-6);
    background: var(--fn-paper-2); border: 1px solid var(--fn-line);
    border-left: 4px solid var(--fn-leaf-400); border-radius: var(--fn-radius-md, 12px);
}
.bill-status-text { color: var(--fn-ink-500); }
.bill-status-manage { margin-left: auto; }

/* Warm sales hero — headline + ticks on paper, a soft sun-glow above and a low woodland horizon below. */
.bill-hero {
    position: relative; text-align: center; overflow: hidden;
    margin: var(--fn-sp-7) 0 var(--fn-sp-6); padding: var(--fn-sp-4) 0 3.4rem;
    background: radial-gradient(58% 80% at 50% -10%, rgba(247,227,166,.38), transparent 72%);
}
.bill-hero-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58%; z-index: 0; pointer-events: none; opacity: .85; }
.bill-hero-content { position: relative; z-index: 1; }
.bill-hero h2 { font-family: var(--fn-font-display); color: var(--fn-forest-900); font-size: var(--fn-text-2xl); margin: 0 0 .5rem; }
.bill-reassure { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.6rem; color: var(--fn-ink-500); margin: 0; }
.bill-reassure .tick { color: var(--fn-leaf-cta); font-weight: 800; margin-right: .35rem; }
.bill-section { font-family: var(--fn-font-display); color: var(--fn-forest-900); margin: var(--fn-sp-6) 0 var(--fn-sp-4); }

/* Plan cards — paper notebook surface, the recommended one raised with a leaf badge. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; align-items: stretch; }
.pricing-card {
    position: relative; display: flex; flex-direction: column; gap: .5rem;
    background: var(--fn-card); border: 1.5px solid var(--fn-card-edge);
    border-radius: var(--fn-radius-lg, 18px); padding: 1.6rem 1.4rem;
}
.pricing-card--featured { border-color: var(--fn-leaf-400); border-width: 2px; box-shadow: 0 10px 34px rgba(40,54,38,.11); }
.pricing-card--current { border-color: var(--fn-forest-500); }
.pricing-badge {
    position: absolute; top: -.8rem; left: 1.4rem;
    background: var(--fn-leaf-cta); color: var(--fn-leaf-cta-ink);
    font-size: var(--fn-text-xs); font-weight: 800; letter-spacing: .02em;
    padding: .25rem .7rem; border-radius: var(--fn-radius-pill);
    box-shadow: 0 2px 7px rgba(40,54,38,.18);
}
.pricing-name { font-family: var(--fn-font-display); color: var(--fn-forest-900); margin: .2rem 0 0; font-size: var(--fn-text-xl); }
.pricing-price { font-family: var(--fn-font-display); font-weight: 700; font-size: 1.9rem; color: var(--fn-ink-900); margin: 0; line-height: 1.1; }
.pricing-price .per { font-family: var(--fn-font); font-weight: 500; font-size: var(--fn-text-sm); color: var(--fn-ink-500); }
/* Contact tier has no number — a warm hand-lettered "Let's talk" that sits under, not over, the plan name. */
.pricing-price--contact { font-family: var(--fn-font-hand); font-weight: 700; font-size: 1.7rem; color: var(--fn-forest-600); }
.pricing-for { color: var(--fn-ink-500); font-size: var(--fn-text-sm); margin: .1rem 0 .4rem; }
.pricing-features { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pricing-features li { position: relative; padding-left: 1.6rem; color: var(--fn-ink-700); font-size: var(--fn-text-sm); line-height: 1.35; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--fn-leaf-cta); font-weight: 800; }
.pricing-cta { margin-top: auto; width: 100%; justify-content: center; }
.pricing-card .btn.is-current { color: var(--fn-forest-700); border-color: var(--fn-leaf-400); background: var(--fn-leaf-200); opacity: 1; cursor: default; }

.confirm-card { border-color: var(--fn-leaf-400); box-shadow: inset 0 0 0 1px var(--fn-leaf-400); max-width: 560px; margin-bottom: var(--fn-sp-5); }
.bill-error { color: var(--fn-red-600); margin-top: var(--fn-sp-4); }
.bill-payments { margin-top: var(--fn-sp-7); }

/* ---------- NETA development areas (Forest School Association) ----------
   Each area carries a brand colour via --area; components read it so the picker, the child-profile
   roll-up bars and the inline observation tags all stay visually consistent. */
.neta-dot--confidence,   .neta-bar--confidence,   .neta-tag--confidence   { --area: #b5760a; }   /* warm gold  */
.neta-dot--creativity,   .neta-bar--creativity,   .neta-tag--creativity   { --area: #5a86a0; }   /* sky        */
.neta-dot--resilience,   .neta-bar--resilience,   .neta-tag--resilience   { --area: #806249; }   /* bark       */
.neta-dot--independence, .neta-bar--independence, .neta-tag--independence { --area: #4a6147; }   /* forest     */
.neta-dot--wellbeing,    .neta-bar--wellbeing,    .neta-tag--wellbeing    { --area: #b06b6b; }   /* warm rose  */

/* Capture picker (session runner): one thumb-friendly row of small circles + tiny labels.
   Familiar at a glance once learned; the whole circle+label is the tap target. */
.neta-row { display: flex; align-items: flex-start; gap: 4px; }
.neta-dot {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 4px 1px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.neta-dot-ring {
    width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
    background: var(--fn-card); border: 1.5px solid var(--fn-line); color: var(--area);
    transition: background .12s, border-color .12s, box-shadow .12s, transform .1s;
}
.neta-dot-label {
    font-size: .68rem; font-weight: 600; line-height: 1.1; text-align: center; color: var(--fn-ink-500);
}
.neta-dot:hover .neta-dot-ring { border-color: var(--area); }
.neta-dot:active .neta-dot-ring { transform: scale(.94); }
.neta-dot.is-on .neta-dot-ring {
    background: color-mix(in srgb, var(--area) 16%, var(--fn-card));
    border-color: var(--area); box-shadow: 0 0 0 2px color-mix(in srgb, var(--area) 38%, transparent);
}
.neta-dot.is-on .neta-dot-label { color: var(--area); }
/* Wellbeing is the overarching strand — a faint divider keeps it distinct while staying on the line. */
.neta-dot--wb { margin-left: 7px; border-left: 1px dashed var(--fn-line); padding-left: 8px; }

/* Child-profile roll-up bars. */
.neta-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.neta-bars { display: flex; flex-direction: column; gap: 16px; }
.neta-bar { display: flex; gap: 12px; align-items: flex-start; }
.neta-bar--wb { padding-top: 16px; margin-top: 2px; border-top: 1px dashed var(--fn-line); }
.neta-bar-ico {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
    background: color-mix(in srgb, var(--area) 14%, var(--fn-paper)); color: var(--area);
}
.neta-bar-main { flex: 1; min-width: 0; }
.neta-bar-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.neta-bar-label { font-weight: 700; color: var(--fn-forest-800); }
.neta-bar-count { font-weight: 800; color: var(--area); font-variant-numeric: tabular-nums; white-space: nowrap; }
.neta-up { margin-left: 8px; font-size: .7rem; font-weight: 700; color: var(--fn-forest-600); }
.neta-track { height: 9px; border-radius: 6px; background: var(--fn-paper-2); overflow: hidden; margin: 6px 0; }
.neta-fill { height: 100%; border-radius: 6px; background: var(--area); min-width: 3px; transition: width .4s ease; }
.neta-blurb { margin: 2px 0 0; }

/* Inline area tags (observation list). */
.neta-tag {
    display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 4px 0; padding: 3px 9px;
    border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: color-mix(in srgb, var(--area) 13%, var(--fn-card)); color: var(--area);
    border: 1px solid color-mix(in srgb, var(--area) 35%, transparent);
}
.neta-tag .fn-icon { color: var(--area); }

/* Review step: a compact NETA tally of the day + a skimmable observation list (feeds the reflection). */
.review-neta { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--fn-line); }
.neta-tally { display: flex; gap: 6px; }
.neta-tally-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.neta-tally-ring {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--area) 14%, var(--fn-paper)); color: var(--area);
    border: 1.5px solid color-mix(in srgb, var(--area) 30%, transparent);
}
.neta-tally-item.is-zero .neta-tally-ring { background: var(--fn-paper-2); color: var(--fn-ink-300); border: 1.5px dashed var(--fn-line); }
.neta-tally-count { font-weight: 800; font-size: .95rem; line-height: 1; color: var(--area); font-variant-numeric: tabular-nums; }
.neta-tally-item.is-zero .neta-tally-count { color: var(--fn-ink-300); }
.neta-tally-label { font-size: .64rem; font-weight: 600; line-height: 1.05; color: var(--fn-ink-500); }

.obs-skim { margin-top: 12px; }
.obs-skim > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--fn-forest-700); }
.obs-skim-list { list-style: none; padding: 0; margin: 10px 0 0; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.obs-skim-list li { padding: 8px 10px; background: var(--fn-paper); border: 1px solid var(--fn-line); border-radius: var(--fn-radius-sm); }
.obs-skim-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.obs-skim-text { margin: 4px 0 0; font-size: .86rem; white-space: pre-wrap; }

/* ---------- NETA distance-travelled (periodic ratings) ---------- */
.neta-rate-form { margin-top: 14px; padding: 14px; background: var(--fn-paper); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); }
.neta-rate-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.neta-rate-meta label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
/* Keep the scale rows compact so label + pips read as one control (not stranded across a wide card). */
.neta-rate-rows { max-width: 580px; }
.neta-rate-row, .neta-travel-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.neta-rate-formhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.neta-stage-sel { width: auto; min-width: 130px; }
.neta-rate-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.neta-rate-section { margin: 4px 0 16px; padding-top: 14px; border-top: 1px solid var(--fn-line); }

/* Share-with-family toggle — a clear pill button (was reading as static text). */
.btn-share {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 12px;
    border-radius: var(--fn-radius-pill); border: 1.5px solid var(--fn-leaf-400); background: var(--fn-card);
    color: var(--fn-forest-700); font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.btn-share:hover { background: var(--fn-leaf-200); }
.btn-share .fn-icon { color: var(--fn-forest-600); }
.btn-share.is-shared { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); color: var(--fn-forest-800); }
.neta-rate-ico {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: color-mix(in srgb, var(--area) 14%, var(--fn-card)); color: var(--area);
}
.neta-rate-label { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--fn-forest-800); }

/* Editable score pips (1–4 buttons). */
.neta-pips { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.neta-pip {
    width: 30px; height: 30px; border-radius: 50%; padding: 0; display: grid; place-items: center;
    border: 1.5px solid var(--fn-line); background: var(--fn-card); color: var(--fn-ink-500);
    font-weight: 700; font-size: .8rem; cursor: pointer; transition: background .1s, border-color .1s, box-shadow .1s;
}
.neta-pip.is-on { background: color-mix(in srgb, var(--area) 22%, var(--fn-card)); border-color: var(--area); color: var(--area); }
.neta-pip.is-sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--area) 40%, transparent); }
.neta-pip-word { width: 78px; text-align: right; flex: 0 0 auto; }

/* Read-only pips on the distance-travelled view: small dots; baseline gets a ring. */
.neta-pips--ro .neta-pip { width: 16px; height: 16px; cursor: default; background: var(--fn-paper-2); }
.neta-pips--ro .neta-pip.is-on { background: var(--area); border-color: var(--area); }
.neta-pips--ro .neta-pip.is-base { box-shadow: 0 0 0 2px var(--fn-card), 0 0 0 3.5px var(--area); }
.neta-travel { display: flex; flex-direction: column; gap: 10px; max-width: 580px; }

.neta-delta { flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--fn-ink-500); text-align: right; }
.neta-delta-num { font-weight: 800; }
.neta-delta.up, .neta-delta.up .neta-delta-num { color: var(--fn-forest-600); }
.neta-delta.down, .neta-delta.down .neta-delta-num { color: var(--fn-red-600); }
.neta-delta.flat { color: var(--fn-ink-300); }

/* Cohort report table. */
.neta-table-wrap { overflow-x: auto; }
.neta-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.neta-table th, .neta-table td { padding: 8px 10px; border-bottom: 1px solid var(--fn-line); text-align: left; }
.neta-th-area { text-align: center; width: 44px; color: var(--area); }
.neta-th-area .fn-icon { color: var(--area); }
.neta-cell { text-align: center; }
.neta-cell-score { font-weight: 800; color: var(--area); }
.neta-cell-delta { font-size: .7rem; font-weight: 700; margin-left: 3px; }
.neta-cell-delta.up { color: var(--fn-forest-600); }
.neta-cell-delta.down { color: var(--fn-red-600); }

/* Reports-hub tile linking to the NETA development report. */
.report-tile {
    display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 1.25rem;
    background: var(--fn-card); border: 1px solid var(--fn-line); border-radius: var(--fn-radius);
    text-decoration: none; color: inherit; box-shadow: var(--fn-shadow);
    transition: border-color .12s, transform .12s;
}
.report-tile:hover { border-color: var(--fn-forest-500); transform: translateY(-1px); }
.report-tile-ico {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
    background: color-mix(in srgb, #b06b6b 14%, var(--fn-paper)); color: #b06b6b;
}
.report-tile-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.report-tile-go { font-size: 1.3rem; color: var(--fn-forest-600); flex: 0 0 auto; }

/* ---------- Motion ---------- */
@keyframes leaf-sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
/* `to` must be `transform: none`, NOT translateY(0): with fill-mode:both the element keeps the end transform,
   and any non-none transform makes .fn-content a containing block that traps position:fixed sheets/modals. */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Steady vertical descent (linear → never pauses); opacity fades in/out at the edges of the travel. */
@keyframes leaf-descend {
    0%   { transform: translateY(-12vh); opacity: 0; }
    8%   { opacity: .8; }
    90%  { opacity: .6; }
    100% { transform: translateY(112vh); opacity: 0; }
}
/* Independent side-to-side flutter + rock; runs `alternate` on its own duration so the leaf rocks
   back and forth as it falls. Eased here (not on the descent) so only the sway slows at its extremes. */
@keyframes leaf-flutter {
    0%   { transform: translateX(-16px) rotate(-42deg); }
    100% { transform: translateX(16px) rotate(58deg); }
}
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }

@media (max-width: 760px) {
    /* Phone shell: hide the desktop sidebar, surface the brand in the top bar,
       and put the daily essentials in a thumb-friendly bottom tab bar. */
    .fn-sidebar { display: none; }
    /* Dark-green top bar on mobile (matches the desktop sidebar) — the brand sits on it in its on-dark variant. */
    .fn-topbar { position: sticky; top: 0; z-index: 30; padding: 0 var(--fn-sp-4); min-height: 56px;
        background: linear-gradient(120deg, var(--fn-forest-800), var(--fn-forest-900));
        border-bottom: 1.5px solid var(--fn-forest-950); backdrop-filter: none; }
    .fn-topbar-brand { display: inline-flex; }
    .fn-topbar .me, .fn-topbar .logout-form.desktop-only { display: none; }
    .fn-content { padding: var(--fn-sp-4); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .bottomnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: var(--fn-card); border-top: 1.5px solid var(--fn-card-edge);
        padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 18px rgba(40,54,38,.06);
    }
    /* The fixed bottomnav owns the bottom edge on phones, so the action bar can't stick there —
       drop it back into the flow, stacked full-width like .run-actions (Save still ends up last). */
    .page-actions {
        position: static; flex-direction: column; align-items: stretch; gap: 10px;
        margin-top: 1.25rem; padding: 0; border-top: none; background: transparent;
    }
    .page-actions > *, .page-actions .btn--xl { width: 100%; min-width: 0; }
    .page-actions .pa-spacer { display: none; }
    h1 { font-size: 2rem; }
    .page-head h1 { font-size: 1.9rem; }
    /* Stack the title and its action with real breathing room — the full-width button
       was butting straight against the subtitle on phones. */
    .page-head { flex-wrap: wrap; gap: 18px; margin-bottom: var(--fn-sp-5); }
    .page-head > div:first-child { width: 100%; }
    .page-head .btn, .page-head .btn-primary { width: 100%; margin-top: 2px; }
}

/* --- Risk rating: severity/likelihood segmented selectors + before→after layout --- */
.lvl-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lvl-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 60px; min-height: 50px; padding: 6px 12px; border: 1.5px solid var(--fn-line);
    border-radius: 14px; background: var(--fn-surface, #fff); color: var(--fn-ink, #2f2417);
    cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.lvl-btn .lvl-num { font-weight: 700; font-size: 1.1rem; line-height: 1; }
.lvl-btn .lvl-cap { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fn-muted, #8a7b63); }
.lvl-btn:hover:not(.is-off):not(.is-on) { border-color: #c8bba2; }
.lvl-btn:active:not(.is-off) { transform: translateY(1px); }
.lvl-btn.is-off { opacity: .38; cursor: not-allowed; }
.lvl-btn.is-on { font-weight: 700; box-shadow: inset 0 0 0 1px currentColor; }
.lvl-btn.lvl-1.is-on { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); }
.lvl-btn.lvl-2.is-on { background: #fdf2d8; border-color: #e6c66a; }
.lvl-btn.lvl-3.is-on { background: #f7dcd6; border-color: #d98b7a; }
.lvl-btn.is-on .lvl-cap { color: inherit; }

.risk-rate { display: flex; flex-direction: column; gap: 16px; }
.risk-rate--bordered { border-top: 1px dashed var(--fn-line); padding-top: 14px; }
.rr-label { display: block; font-weight: 600; font-size: .82rem; color: var(--fn-ink, #2f2417); margin-bottom: 7px; }
.rr-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.rr-col { display: flex; flex-direction: column; gap: 10px; }
.rr-arrow { align-self: center; color: var(--fn-muted, #8a7b63); font-size: .76rem; font-weight: 700; white-space: nowrap; text-align: center; }
.rr-badge {
    display: inline-block; align-self: flex-start; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--fn-line); font-weight: 700; font-size: .85rem;
}
.rr-badge.chip--ok { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); }
.rr-badge.chip--warn { background: #fdf2d8; border-color: #e6c66a; }
.rr-badge.chip--danger { background: #f7dcd6; border-color: #d98b7a; }
@media (max-width: 560px) {
    .rr-grid { grid-template-columns: 1fr; gap: 12px; }
    .rr-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* --- Public parent booking surface (the /book and /my-bookings pages, BareLayout) --- */
.public-book { max-width: 620px; margin: 0 auto; padding: 1.75rem 1.1rem 3rem; }
.public-book .brand-line { justify-content: center; margin-bottom: 1.25rem; font-size: 1.05rem; }
/* The setting owns the top of its booking page — a brand-accent rule + its name as the hero.
   Our own mark steps back to a quiet "powered by" footer (.book-powered) below the content. */
.book-brand { text-align: center; margin-bottom: 1.5rem; }
.book-accent-rule { display: block; width: 56px; height: 4px; margin: 0 auto .9rem; border-radius: 99px; background: var(--book-accent, var(--fn-forest-700)); }
.book-cover { margin: 0 0 1.25rem; border-radius: var(--fn-radius); overflow: hidden; border: 1px solid var(--fn-line); }
.book-cover img { display: block; width: 100%; height: 180px; object-fit: cover; }
.book-logo { display: block; max-height: 84px; max-width: 70%; margin: 0 auto .8rem; object-fit: contain; }
.book-title { text-align: center; margin: 0 0 .25rem; }
.book-sub { text-align: center; margin: 0 auto 0; max-width: 46ch; }
.book-powered { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--fn-line); color: var(--fn-ink-500); font-size: .82rem; }
.book-powered .fs-logo { font-size: .72rem; }
.book-powered .fs-logo__name { color: var(--fn-ink-500); }
/* Full-width CTAs stretch the square hand-drawn brush mask into a messy blob — give the big public
   buttons a clean rounded fill (the sketch outline stays on small/inline buttons elsewhere). */
.public-book .btn--xl::before { -webkit-mask: none; mask: none; border-radius: var(--fn-radius); }
.public-book .btn--xl::after { display: none; }
.book-card { background: var(--fn-surface, #fff); border: 1px solid var(--fn-line); border-radius: var(--fn-radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.book-result { font-weight: 600; }
.book-result.is-ok { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); }
.book-result.is-wait { background: #fdf2d8; border-color: #e6c66a; }
.book-result.is-err { background: #f7dcd6; border-color: #d98b7a; }
.session-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); margin-top: 10px; cursor: pointer; }
.session-pick.is-full { opacity: .85; }
.session-pick .session-meta { flex: 1; }
.session-pick input[type=radio] { width: auto; min-height: auto; margin: 0; }

/* --- Practitioner-first home dashboard (shared by the MAUI app and the web home) --- */
.wn-hero {
    position: relative; overflow: hidden; min-height: 205px; display: flex; align-items: flex-end;
    box-shadow: var(--fn-shadow); isolation: isolate; border-radius: var(--fn-radius-lg); margin-bottom: 1.4rem;
}
.wn-hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.wn-hero-top { position: absolute; top: .65rem; right: .65rem; z-index: 3; }
.wn-hero-greet { position: relative; z-index: 2; padding: 1.1rem 1.4rem; }
.wn-hero-greet h1 { font-family: var(--fn-font-display); font-size: var(--fn-text-3xl); line-height: 1.05; margin: 0; color: #fff; text-shadow: 0 1px 7px rgba(20,32,26,.5); }
.wn-hero-greet p { font-family: var(--fn-font-hand); font-size: var(--fn-text-xl); margin: .1rem 0 0; color: var(--fn-sun-soft); text-shadow: 0 1px 5px rgba(20,32,26,.5); }
/* Within the banner the descent travels just the banner height (~220px) instead of a full viewport.
   The inner .leaf-flutter (shared keyframe above) still handles the side-to-side rock. */
.wn-hero .leaf-drift { z-index: 1; animation-name: wn-leaf-descend; }
@keyframes wn-leaf-descend {
    0%   { transform: translateY(-24px); opacity: 0; }
    12%  { opacity: .8; }
    88%  { opacity: .6; }
    100% { transform: translateY(224px); opacity: 0; }
}
.wn-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; }

.wn-card { background: var(--fn-card); border: 1px solid var(--fn-card-edge); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow-sm); padding: 1rem 1.1rem; }

.wn-note { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem; padding: .55rem .2rem; background-image: var(--fn-fern); background-repeat: no-repeat; background-position: right -16px bottom -22px; }
.wn-note-ic { font-size: 1.5rem; line-height: 1; flex: none; }
.wn-note-body { display: flex; flex-direction: column; }
.wn-note-date { font-size: var(--fn-text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--fn-ink-300); font-weight: 600; }
.wn-note-text { font-family: var(--fn-font); font-style: italic; font-size: var(--fn-text-sm); color: var(--fn-bark-700); line-height: 1.35; }

.wn-nudge { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin: 0 0 1.3rem; padding: .1rem .15rem; color: var(--fn-forest-700); }
.wn-nudge-ic { font-size: 1rem; line-height: 1; }
.wn-nudge-text { flex: 1; font-size: var(--fn-text-sm); }
.wn-nudge-go { color: var(--fn-forest-600); font-weight: 700; }

.wn-sec { margin: 0 0 1.5rem; }
.wn-sec-h { display: flex; align-items: center; gap: .45rem; font-family: var(--fn-font-display); color: var(--fn-forest-800); font-size: var(--fn-text-lg); margin: 0 0 .6rem; }
.wn-sec-count { font-family: var(--fn-font); font-size: var(--fn-text-sm); color: var(--fn-ink-300); font-weight: 400; margin-left: .15rem; }
.wn-group { font-size: var(--fn-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--fn-ink-300); margin: .9rem 0 .4rem; font-weight: 600; }

.wn-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fn-leaf-cta); box-shadow: 0 0 0 0 rgba(70,185,61,.6); animation: wn-pulse 1.8s infinite; }
@keyframes wn-pulse { 0% { box-shadow: 0 0 0 0 rgba(70,185,61,.55); } 70% { box-shadow: 0 0 0 8px rgba(70,185,61,0); } 100% { box-shadow: 0 0 0 0 rgba(70,185,61,0); } }
.wn-live { display: flex; flex-direction: column; gap: .2rem; width: 100%; text-align: left; border: 0; cursor: pointer; margin-bottom: .65rem; padding: 1rem 1.15rem; border-radius: var(--fn-radius-lg); background: linear-gradient(135deg, var(--fn-forest-700), var(--fn-forest-900)); color: var(--fn-paper); box-shadow: var(--fn-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.wn-live:hover { transform: translateY(-2px); box-shadow: var(--fn-shadow-lg); }
.wn-live-kicker { font-size: var(--fn-text-xs); color: var(--fn-leaf-400); letter-spacing: .04em; }
.wn-live-title { font-family: var(--fn-font-display); font-size: var(--fn-text-xl); }
.wn-live-meta { font-size: var(--fn-text-sm); color: var(--fn-leaf-200); opacity: .9; }
.wn-live-go { font-size: var(--fn-text-sm); color: var(--fn-sun-soft); margin-top: .35rem; font-weight: 600; }

.wn-session { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; cursor: pointer; margin-bottom: .5rem; padding: .8rem 1rem; background: var(--fn-card); border: 1px solid var(--fn-card-edge); border-left: 3px solid var(--fn-forest-500); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow-sm); transition: transform .12s ease; }
.wn-session:hover { transform: translateY(-1px); }
.wn-session--today { border-left-color: var(--fn-leaf-cta); }
.wn-session-date { font-size: var(--fn-text-xs); color: var(--fn-ink-300); letter-spacing: .04em; }
.wn-session-site { font-family: var(--fn-font-display); color: var(--fn-forest-900); font-size: var(--fn-text-lg); }
.wn-session-go { font-size: var(--fn-text-sm); color: var(--fn-forest-600); margin-top: .25rem; }
.wn-session--today .wn-session-date { color: var(--fn-leaf-cta); font-weight: 700; }

.wn-empty { text-align: center; padding: 1.6rem 1rem; }
.wn-empty-leaf { font-size: 1.7rem; line-height: 1; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fn-leaf-200); box-shadow: inset 0 0 0 2px var(--fn-leaf-400); margin-bottom: .25rem; }

.wn-recent { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--fn-line); padding: .55rem .15rem; cursor: pointer; }
.wn-recent:hover { background: rgba(74,97,71,.05); }
.wn-recent-date { font-size: var(--fn-text-xs); color: var(--fn-ink-300); width: 5.5rem; flex: none; }
.wn-recent-site { flex: 1; color: var(--fn-ink-700); }
.wn-recent-tag { flex: none; }

.wn-ul { background: var(--fn-underline) left bottom no-repeat; background-size: 100% .4em; padding-bottom: .1em; }

.wn-you-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.wn-you-name { font-family: var(--fn-font-display); color: var(--fn-forest-900); font-size: var(--fn-text-lg); display: block; }
.wn-you-head { font-size: var(--fn-text-sm); color: var(--fn-ink-500); }
.wn-youstats { display: flex; margin: .85rem 0 .25rem; }
.wn-youstats > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .05rem; border-left: 1px solid var(--fn-line); }
.wn-youstats > div:first-child { border-left: 0; }
.wn-youstats .n { font-family: var(--fn-font-display); font-size: var(--fn-text-xl); color: var(--fn-forest-800); line-height: 1.1; }
.wn-youstats .l { font-size: var(--fn-text-xs); color: var(--fn-ink-500); }

.wn-progress { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .25rem; }
.wn-ring { position: relative; width: 88px; height: 88px; flex: none; border-radius: 50%; background: conic-gradient(var(--fn-leaf-cta) calc(var(--p) * 1%), var(--fn-line) 0); display: grid; place-items: center; }
.wn-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--fn-card); box-shadow: var(--fn-shadow-sm); }
.wn-ring-num { position: relative; font-family: var(--fn-font-display); font-size: var(--fn-text-xl); color: var(--fn-forest-800); }
.wn-ring-num small { font-size: .55em; color: var(--fn-ink-300); }
.wn-ready { display: flex; flex-direction: column; gap: .15rem; }
.wn-ready strong { font-family: var(--fn-font-display); color: var(--fn-forest-800); font-size: var(--fn-text-lg); }

.wn-badges { display: flex; gap: .55rem; margin-top: 1rem; }
.wn-badge { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; text-decoration: none; }
.wn-badge-ring { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--fn-paper-2); box-shadow: inset 0 0 0 2px var(--fn-line-strong); transition: transform .12s ease; }
.wn-badge:hover .wn-badge-ring { transform: translateY(-2px); }
.wn-badge-ic { font-size: 1.4rem; line-height: 1; }
.wn-badge-num { font-family: var(--fn-font-display); font-size: 1.5rem; color: var(--fn-forest-800); }
.wn-badge-label { font-size: var(--fn-text-xs); color: var(--fn-ink-700); font-weight: 600; }
.wn-badge-status { font-size: var(--fn-text-xs); color: var(--fn-ink-300); }
.wn-badge--ok .wn-badge-ring { background: var(--fn-leaf-200); box-shadow: inset 0 0 0 2px var(--fn-leaf-400); }
.wn-badge--warn .wn-badge-ring { background: var(--fn-amber-200); box-shadow: inset 0 0 0 2px var(--fn-amber-600); }
.wn-badge--danger .wn-badge-ring { background: var(--fn-red-200); box-shadow: inset 0 0 0 2px var(--fn-red-600); }
.wn-badge--none .wn-badge-ring { background: transparent; box-shadow: none; border: 2px dashed var(--fn-line-strong); }
.wn-badge--none .wn-badge-num { color: var(--fn-ink-300); }
.wn-badge--none .wn-badge-status { color: var(--fn-leaf-cta); font-weight: 600; }
/* On the wider web layout the phone-sized dashboard groups stretch thin — keep them snug & centred.
   (No effect on a narrow phone, where the card is already < 480px.) */
.wn-youstats, .wn-progress, .wn-badges { max-width: 480px; margin-inline: auto; }

/* --- Family access: invite banner + connected list (child profile) --------------------- */
.btn-sm { padding: .28rem .6rem; font-size: var(--fn-text-xs); min-height: 0; }

.family-invite {
    position: relative; display: flex; gap: 1.1rem; margin-top: 1.5rem;
    padding: 1.5rem 1.6rem; border-radius: var(--fn-radius-lg);
    background: linear-gradient(135deg, var(--fn-forest-700), var(--fn-forest-600));
    color: #fff; box-shadow: var(--fn-shadow); overflow: hidden;
}
.family-invite::after {
    content: ""; position: absolute; inset: 0; background-image: var(--fn-fern);
    background-size: 150px; opacity: .55; pointer-events: none;
}
.family-invite__art {
    flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.16); color: #fff; position: relative; z-index: 1;
}
.family-invite__body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.family-invite__title { font-family: var(--fn-font-display); font-size: var(--fn-text-xl); margin: 0 0 .4rem; color: #fff; }
.family-invite__lede { margin: 0 0 1.1rem; max-width: 64ch; color: rgba(255,255,255,.9); font-size: var(--fn-text-sm); line-height: 1.55; }
.family-invite__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.family-invite__form input[type="text"] { flex: 1; min-width: 150px; }
.family-invite__form input[type="email"] { flex: 1.3; min-width: 170px; }
.family-invite__form select { min-width: 120px; }
.family-invite__cta { background: #fff; color: var(--fn-forest-700); border-color: #fff; font-weight: 600; }
.family-invite__cta::before, .family-invite__cta::after { display: none; }
.family-invite__cta:hover:not(:disabled) { background: var(--fn-paper); }
.family-invite__msg { margin: .75rem 0 0; color: #fff; font-size: var(--fn-text-sm); }
.family-invite__steps { list-style: none; display: flex; gap: 1.3rem; margin: 1.25rem 0 0; padding: 0; flex-wrap: wrap; }
.family-invite__steps li { display: flex; align-items: center; gap: .55rem; font-size: var(--fn-text-xs); color: rgba(255,255,255,.88); flex: 1; min-width: 190px; }
.family-invite__steps span {
    flex: none; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
    background: var(--fn-leaf-cta); color: var(--fn-leaf-cta-ink); font-weight: 700; font-size: var(--fn-text-xs);
}

.family-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: .5rem; }
.family-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--fn-line); }
.family-row__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.family-row__name { font-weight: 600; }
.family-add { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; align-items: stretch; }
.family-invite__alt { background: none; border: 0; padding: .6rem 0 0; color: rgba(255,255,255,.92); font: inherit; font-size: var(--fn-text-xs); text-decoration: underline; cursor: pointer; }
.family-invite__alt:hover:not(:disabled) { color: #fff; }
.family-invite__alt:disabled { opacity: .6; cursor: default; }
.family-code { display: inline-flex; align-items: center; gap: .4rem; margin-top: 3px; font-size: var(--fn-text-xs); color: var(--fn-ink-500); }
.family-code code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: var(--fn-text-sm); letter-spacing: .12em; background: var(--fn-paper-2); border: 1px solid var(--fn-line-strong); border-radius: var(--fn-radius-sm); padding: .12rem .45rem; color: var(--fn-ink-900); }

/* --- Family requests (parent self-service join code + staff approval) ------------------- */
.fn-nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: var(--fn-radius-pill); background: var(--fn-red-600); color: #fff; font-size: var(--fn-text-xs); font-weight: 700; line-height: 1; }
.family-joincode { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.family-joincode__code code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: var(--fn-text-2xl); letter-spacing: .2em; font-weight: 700; color: var(--fn-forest-700); background: var(--fn-paper-2); border: 2px dashed var(--fn-line-strong); border-radius: var(--fn-radius); padding: .4rem 1rem; }
.family-req { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--fn-line); }
.family-req__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.family-req__act { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.family-req__act select { min-width: 160px; }