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

    /* 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; }
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%;
}

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); }
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; }
::placeholder { color: var(--fn-ink-300); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; background: 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: 30px; height: 30px; 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 */
.leaf-drift { position: absolute; z-index: 1; color: var(--fn-leaf-400); opacity: .7; animation: drift linear infinite; }

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

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

/* ---------- 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); }
.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); }
.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; }
.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) {
    .run-stepper { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .run-step { white-space: nowrap; flex: 0 0 auto; }
}

/* ---------- 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); } }
@keyframes drift { 0% { transform: translateY(-10vh) rotate(0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translateY(110vh) rotate(320deg); opacity: 0; } }
@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; }
    .page-head { flex-wrap: wrap; gap: 12px; }
    .page-head .btn-primary { width: 100%; }
}