/*
 * getburnout.app — the shared look (internal name DAYLIGHT, BRN-T120).
 *
 * The app's Home, ported to the web: warm grounds that follow the hours of a
 * day, off-white paper cards with soft shadows tinted by the ground, Bricolage
 * Grotesque 800 for headings and big numbers, DM Mono for uppercase labels,
 * and one orange for the things you press. The fixed inks are the app's
 * DaylightInk (burnout-flutter/lib/utils/daylight/daylight_palette.dart).
 *
 * Static on purpose: this file needs no build step, so a content deploy can
 * never ship a page against a stale bundle. Every rule sits in a cascade layer
 * named like Tailwind's, so on the Tailwind trees (tools, blog) the utilities
 * still win and on the hand-written pages nothing changes order.
 *
 * Contrast is measured, not guessed — tests/Feature/DaylightContrastTest.php
 * reads the tokens below and holds every text pair at 4.5:1 or better
 * (3:1 for the large headings that are allowed it).
 *
 * No @media print here: partials/print-base.blade.php is the one print block
 * in the repo (PrintSurfaceGateTest).
 */

/* ── Type: self-hosted, OFL ──────────────────────────────────────────────── */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/fonts/BricolageGrotesque-latin.woff2') format('woff2');
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/fonts/BricolageGrotesque-latin-ext.woff2') format('woff2');
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/fonts/DMMono-Regular-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/fonts/DMMono-Regular-latin-ext.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/fonts/DMMono-Medium-latin.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/fonts/DMMono-Medium-latin-ext.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* Fixed inks (the app's DaylightInk). */
    --dl-ink: #1C1210;          /* headings, numbers, text on light grounds */
    --dl-ink-body: #4A3A33;     /* running text on paper and on light grounds */
    --dl-ink-muted: #5E4C44;    /* labels and captions on paper only */
    --dl-paper: #FFFDF8;        /* cards */
    --dl-paper-2: #F4ECE4;      /* inputs, wells, rows inside a card */
    --dl-paper-3: #EADFD4;      /* pressed, tracks */
    --dl-ground: #F8EBDC;       /* the page under the cards once the morning fades */
    --dl-fire: #F2541B;         /* fills only: bars, dots, sliders, the pile's tips */
    --dl-fire-text: #B83C0C;    /* fire that is text on paper: eyebrows, links */
    --dl-cta: #C4400C;          /* the orange you press, white label on it */
    --dl-cta-top: #CC4410;
    --dl-cta-hover: #B23A0A;
    --dl-line: rgba(28, 18, 16, 0.12);
    --dl-line-strong: rgba(28, 18, 16, 0.24);

    /* The hours, from the app's keyframes (merged.html KEYS). */
    --dl-dawn: #FFC18E;
    --dl-morning: #FFAE58;
    --dl-morning-low: #FFDDA0;
    --dl-noon: #FFCC45;
    --dl-noon-low: #FFEFB4;
    --dl-afternoon: #FFB236;
    --dl-afternoon-low: #FFE19A;
    --dl-sunset: #FF7B4C;
    --dl-sunset-low: #FFB98A;
    --dl-dusk: #F24F76;
    --dl-dusk-low: #FF8D6E;
    --dl-evening: #8B3AD0;
    --dl-evening-low: #C24797;
    --dl-night: #2D2A8C;
    --dl-night-low: #5634B4;
    --dl-night-deep: #231F6E;

    /* Inks for the night grounds. */
    --dl-night-ink: #FFFFFF;
    --dl-night-ink-muted: #DCD5F5;

    /* Shadows tinted by the ground: warm by day, violet at night. */
    --dl-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 22px 44px -26px rgba(122, 52, 8, 0.42), 0 3px 10px -4px rgba(122, 52, 8, 0.12);
    --dl-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 28px 52px -24px rgba(122, 52, 8, 0.5), 0 4px 12px -4px rgba(122, 52, 8, 0.16);
    --dl-shadow-night: 0 24px 48px -24px rgba(16, 8, 48, 0.7), 0 3px 10px -4px rgba(16, 8, 48, 0.3);

    --dl-radius: 28px;
    --dl-radius-m: 20px;
    --dl-radius-s: 14px;

    --dl-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dl-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dl-ease: cubic-bezier(0.2, 1.1, 0.3, 1);
    --dl-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
@layer base {
    html { -webkit-text-size-adjust: 100%; }
    body.dl {
        margin: 0;
        font-family: var(--dl-display);
        color: var(--dl-ink);
        background-color: var(--dl-ground);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }
    /* The morning band: amber at the top of every inner page, fading into the
       day-paper ground the cards sit on. Not fixed — it scrolls away. */
    body.dl-morning {
        background-image: linear-gradient(180deg, var(--dl-morning) 0, #FFC98A 260px, #FCE2C0 560px, var(--dl-ground) 860px);
        background-repeat: no-repeat;
        background-size: 100% 860px;
    }
    body.dl ::selection { background: rgba(242, 84, 27, 0.28); color: var(--dl-ink); }
    body.dl :focus-visible { outline: 2.5px solid var(--dl-ink); outline-offset: 3px; border-radius: 6px; }
}

/* ── Components ──────────────────────────────────────────────────────────── */
@layer components {
    .dl-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
    @media (min-width: 640px) { .dl-wrap { padding: 0 28px; } }

    .dl-mono { font-family: var(--dl-mono); }
    .dl-eyebrow {
        display: block;
        font-family: var(--dl-mono); font-weight: 500;
        font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--dl-fire-text);
    }
    .dl-eyebrow.on-ground { color: var(--dl-ink); }
    .dl-num { font-weight: 800; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }

    /* The brand: the app's icon tile and the name. */
    .dl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dl-ink); }
    .dl-brand img { width: 32px; height: 32px; border-radius: 9px; background: #000; box-shadow: 0 6px 14px -6px rgba(60, 20, 0, 0.55), 0 0 0 1px rgba(28, 18, 16, 0.08); }
    .dl-brand span { font-family: var(--dl-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

    /* The header every inner page shares: glass over the morning band. */
    .dl-header {
        position: sticky; top: 0; z-index: 50;
        background: rgba(255, 214, 160, 0.72);
        -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
        border-bottom: 1px solid rgba(28, 18, 16, 0.08);
    }
    .dl-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
    .dl-nav { display: flex; align-items: center; gap: 22px; }
    .dl-nav a { font-size: 15px; font-weight: 600; color: var(--dl-ink); text-decoration: none; opacity: 1; }
    .dl-nav a:hover { color: var(--dl-fire-text); }
    .dl-nav a.dl-nav-app {
        font-family: var(--dl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
        padding: 7px 12px; border-radius: 999px; background: var(--dl-ink); color: var(--dl-paper);
    }
    .dl-nav a.dl-nav-app:hover { background: #3A2620; color: var(--dl-paper); }
    @media (max-width: 639px) { .dl-nav .dl-nav-wide { display: none; } .dl-nav { gap: 14px; } }

    /* Cards: off-white paper, 28px, a soft shadow tinted by the ground. */
    .dl-card { background: var(--dl-paper); color: var(--dl-ink); border-radius: var(--dl-radius); box-shadow: var(--dl-shadow); }
    .dl-card-pad { padding: 22px; }
    @media (min-width: 640px) { .dl-card-pad { padding: 30px; } }
    a.dl-card { display: block; text-decoration: none; transition: transform 0.25s var(--dl-ease), box-shadow 0.25s var(--dl-ease); }
    a.dl-card:hover { transform: translateY(-3px); box-shadow: var(--dl-shadow-lift); }
    a.dl-card:active { transform: scale(0.985); }

    /* Glass: the app's pile tray, for things that sit on a ground. */
    .dl-glass { background: rgba(255, 255, 255, 0.28); border-radius: var(--dl-radius); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 14px 26px -18px rgba(40, 10, 0, 0.25); }

    /* The orange you press. White label at 5:1 or better. */
    .dl-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 0;
        background: linear-gradient(180deg, var(--dl-cta-top), var(--dl-cta));
        color: #FFFFFF; font-family: var(--dl-display); font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
        text-decoration: none; cursor: pointer; white-space: nowrap;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 24px -12px rgba(160, 50, 6, 0.75);
        transition: transform 0.15s var(--dl-spring), box-shadow 0.2s ease, background 0.2s ease;
    }
    .dl-btn:hover { background: linear-gradient(180deg, var(--dl-cta), var(--dl-cta-hover)); color: #FFFFFF; }
    .dl-btn:active { transform: scale(0.96); }
    .dl-btn-ink { background: var(--dl-ink); box-shadow: 0 12px 24px -12px rgba(28, 18, 16, 0.6); }
    .dl-btn-ink:hover { background: #3A2620; }
    .dl-btn-ghost { background: transparent; color: var(--dl-ink); box-shadow: inset 0 0 0 1.5px var(--dl-line-strong); }
    .dl-btn-ghost:hover { background: rgba(255, 255, 255, 0.4); color: var(--dl-ink); }

    .dl-chip {
        display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--dl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
        padding: 5px 10px; border-radius: 999px; background: var(--dl-paper-2); color: var(--dl-ink);
    }
    .dl-chip-ink { background: var(--dl-ink); color: var(--dl-paper); }

    /* The night footer. */
    .dl-footer {
        background: linear-gradient(180deg, var(--dl-night-low) 0, var(--dl-night) 55%, var(--dl-night-deep) 100%);
        color: var(--dl-night-ink-muted);
        margin-top: 96px;
    }
    .dl-footer a { color: var(--dl-night-ink-muted); text-decoration: none; }
    .dl-footer a:hover { color: var(--dl-night-ink); }
    .dl-footer h4, .dl-footer .dl-footer-h {
        font-family: var(--dl-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--dl-night-ink); margin: 0 0 14px;
    }
    .dl-footer .dl-brand { color: var(--dl-night-ink); }
    .dl-footer .dl-brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }

    /* The language switcher, on light grounds. */
    .lang-switch > summary { color: var(--dl-ink); }

    /* ── The tool kit: the parts every tool page shares ─────────────────
       A tool's own <style> keeps only what is unique to that tool; these
       are the shared instruments (BRN-T120). */
    .tool-h1 { font-family: var(--dl-display); font-weight: 800; color: var(--dl-ink); font-size: clamp(2.15rem, 6.4vw, 3.3rem); line-height: 1.02; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
    .tool-lede { color: var(--dl-ink-body); font-size: 1.08rem; line-height: 1.6; font-weight: 500; }
    .tool-card { background: var(--dl-paper); color: var(--dl-ink); border-radius: var(--dl-radius); padding: 22px; box-shadow: var(--dl-shadow); }
    @media (min-width: 640px) { .tool-card { padding: 28px; } }
    .tool-label { font-family: var(--dl-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dl-ink-muted); }
    .tool-input, .tool-select {
        width: 100%; box-sizing: border-box;
        background: var(--dl-paper-2); color: var(--dl-ink);
        border: 1.5px solid transparent; border-radius: var(--dl-radius-s);
        padding: 12px 16px; font-family: var(--dl-display); font-size: 17px; font-weight: 600;
        outline: none; transition: border-color 0.2s ease, background 0.2s ease;
        -moz-appearance: textfield;
    }
    .tool-input::placeholder { color: var(--dl-ink-muted); font-weight: 500; }
    .tool-input::-webkit-outer-spin-button, .tool-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .tool-input:hover, .tool-select:hover { background: var(--dl-paper-3); }
    .tool-input:focus, .tool-select:focus { border-color: var(--dl-fire); background: var(--dl-paper); }
    .tool-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C1210' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 16px center; }
    .tool-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--dl-paper-3); outline: none; }
    .tool-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dl-fire); border: 3px solid var(--dl-paper); box-shadow: 0 4px 12px -2px rgba(160, 50, 6, 0.55); cursor: pointer; }
    .tool-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--dl-fire); border: 3px solid var(--dl-paper); box-shadow: 0 4px 12px -2px rgba(160, 50, 6, 0.55); cursor: pointer; }
    .tool-slider:focus-visible::-webkit-slider-thumb { outline: 2.5px solid var(--dl-ink); outline-offset: 2px; }
    .stat-value { font-family: var(--dl-display); font-size: 34px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--dl-ink); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }
    .stat-label { font-family: var(--dl-mono); font-size: 11px; font-weight: 500; color: var(--dl-ink-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 6px; }
    .projection-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--dl-line); }
    .projection-row:last-child { border-bottom: none; }
    .dl-figure-fire { color: var(--dl-fire-text); }
}

@media (prefers-reduced-motion: reduce) {
    a.dl-card, .dl-btn { transition: none; }
    a.dl-card:hover { transform: none; }
}