/* ==========================================================================
   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");

    /* 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: 0 var(--fn-sp-5);
    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 ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px; border-radius: var(--fn-radius-pill);
    background: var(--fn-paper-2); border: 1.5px solid var(--fn-line-strong);
    color: var(--fn-forest-800); font-size: var(--fn-text-sm); font-weight: 600;
}
.chip--ok { background: var(--fn-leaf-200); border-color: var(--fn-leaf-400); }
.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); }

/* ---------- 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; }
.stat-label { display: block; font-family: var(--fn-font-hand); font-size: 1.2rem; color: var(--fn-ink-500); margin-top: 4px; }
.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; }

/* ---------- 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=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;
    background: var(--fn-paper);
    -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; transform-origin: 50% 90%; animation: leaf-sway 6s ease-in-out infinite; }
.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; }
.fn-nav a.active { background: linear-gradient(90deg, rgba(70,185,61,.22), rgba(70,185,61,.06)); color: #fff; }
.fn-nav a.active::before { content: ""; position: absolute; left: 4px; width: 7px; height: 22px; border-radius: 8px; background: var(--fn-leaf-cta); box-shadow: 0 0 12px rgba(70,185,61,.6); }
.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); }
.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) both; }
.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; }
.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: .15em; text-decoration: none; line-height: 1; }
.fs-logo__mark { width: 2.25em; height: 2.25em; flex: none; }
.fs-logo__mark .fs-leaf  { fill: var(--fn-leaf-cta); }
.fs-logo__mark .fs-leaf2 { fill: var(--fn-leaf-cta); opacity: .82; }
.fs-logo__mark .fs-stem  { stroke: var(--fn-forest-900); }
.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): light name + sage kicker + brighter leaves */
.fs-logo.fs-on-dark .fs-logo__name { color: #fff; }
.fs-logo.fs-on-dark .fs-logo__kicker { color: #9fb497; }
.fs-logo.fs-on-dark .fs-logo__mark .fs-leaf  { fill: #5fd24f; }
.fs-logo.fs-on-dark .fs-logo__mark .fs-leaf2 { fill: #5fd24f; opacity: .82; }
.fs-logo.fs-on-dark .fs-logo__mark .fs-stem  { stroke: #cfe0c7; }

/* ---------- 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 ---------- */
.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); overflow: hidden; 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); }
.fn-table td { padding: var(--fn-sp-3) var(--fn-sp-4); border-bottom: 1px solid var(--fn-line); }
.fn-table tr:last-child td { border-bottom: none; }
.fn-table tbody tr:hover td { background: var(--fn-paper); }

/* 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 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);
}
.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-hand); font-size: 1.2rem; color: #bfe6a8; letter-spacing: .01em; }
.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; }

/* ---------- 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.5rem; 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; }
.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-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--fn-line); }
.register-row > div:first-child { min-width: 0; }
.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; } }
.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); }
.photo-btn { width: auto; }
.photo-attached { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.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 { font-size: 1.3rem; }
.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%; } }

/* Developmental-area chips: selected state is OUTLINED green, distinct from the FILLED green of a selected
   child chip — so "who it's about" reads differently from "areas of learning". */
.chip--area-on { background: var(--fn-paper-2); color: var(--fn-forest-800); box-shadow: inset 0 0 0 2px var(--fn-forest-600); }

/* ---------- Motion ---------- */
@keyframes leaf-sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* 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; }
    .fn-topbar { position: sticky; top: 0; z-index: 30; padding: 0 var(--fn-sp-4); min-height: 56px; background: var(--fn-card); border-bottom: 1.5px solid var(--fn-card-edge); }
    .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);
    }
    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; }
.book-title { text-align: center; margin: 0 0 .25rem; }
.book-sub { text-align: center; margin: 0 auto 1.5rem; max-width: 46ch; }
.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-hand); font-size: var(--fn-text-lg); color: var(--fn-bark-500); line-height: 1.2; }

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