:root {
    color-scheme: light dark;
    /* page */
    --smoke: #E9ECF1;
    --field: #F7F8FA;
    --ink: #1D2433;
    --ink-2: #4A5468;
    --line: #BCC3D0;
    /* the weighing panel is dark in both themes */
    --panel: #1D2433;
    --panel-ink: #F2F4F8;
    --panel-ink-2: #A9B1C2;
    --wax: #F3DC8C;
    --oil: #B08CF0;
    --flame: #F0A030;
    --glass: #8E98AB;
    --focus: #7A4BC2;
    --radius: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --smoke: #171B24;
        --field: #1F2430;
        --ink: #E7EAF0;
        --ink-2: #A9B1C2;
        --line: #3A4253;
        --panel: #252B39;
        --focus: #B08CF0;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--smoke);
    color: var(--ink);
    font: 400 1.0625rem/1.55 "Schibsted Grotesk", system-ui, "Hiragino Sans", "Yu Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* header */
header.site { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.lang select { font: inherit; font-size: 0.9375rem; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--ink); }

/* intro */
.intro { padding: 24px 0 32px; }
.intro h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 14em;
}
.intro p { margin: 0; color: var(--ink-2); font-size: 1.125rem; max-width: 34em; }

/* tool: form + weighing panel */
.tool { display: grid; gap: 32px; align-items: start; }
@media (min-width: 760px) {
    .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; }
    .recipe { position: sticky; top: 16px; }
}

.field { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; margin-bottom: 8px; font-weight: 600; padding: 0; }
.hint { margin: 8px 0 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 36em; }

input[type="number"], .pair select {
    font: inherit;
    font-size: 1.25rem;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--field);
    color: var(--ink);
    width: 100%;
    min-width: 0;
}
input[type="number"]:invalid { border-color: #C2410C; }
.pair { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 8px; align-items: center; }
.pair select { font-size: 1rem; }
.pct { grid-template-columns: minmax(0, 9rem) auto; justify-content: start; }
.pct span { font-size: 1.25rem; font-weight: 600; }
#count { max-width: 9rem; }

.radio { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; }
.radio input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--focus); }

/* the weighing panel */
.recipe {
    background: var(--panel);
    color: var(--panel-ink);
    border-radius: 20px;
    padding: 24px;
}
.recipe h2 { margin: 0 0 20px; font-size: 1rem; font-weight: 600; color: var(--panel-ink-2); }
.recipe-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: center; }

.jar { width: 100%; height: auto; overflow: visible; }
.jar-wax { fill: var(--wax); }
.jar-oil { fill: var(--oil); transition: height 0.2s ease; }
.jar-glass { fill: none; stroke: var(--glass); stroke-width: 3; }
.jar-wick { stroke: var(--panel-ink-2); stroke-width: 2.5; stroke-linecap: round; }
.jar-flame { fill: var(--flame); transform-origin: 60px 36px; animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    30% { transform: scale(0.94, 1.06) rotate(-2deg); }
    60% { transform: scale(1.04, 0.95) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .jar-flame { animation: none; }
    .jar-oil { transition: none; }
}

.amounts { margin: 0; display: grid; gap: 20px; }
.amount dt { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--panel-ink-2); }
.amount dd { margin: 4px 0 0; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.swatch.wax { background: var(--wax); }
.swatch.oil { background: var(--oil); }
.big {
    display: block;
    font-size: clamp(2.25rem, 7vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.each { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--panel-ink-2); font-size: 0.9375rem; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.actions button {
    font: inherit;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: var(--panel-ink);
    cursor: pointer;
}
.actions button:hover { background: rgba(255, 255, 255, 0.08); }
.actions button:focus-visible { outline-color: var(--oil); }

/* notes and FAQ */
.notes { max-width: 68ch; padding: 56px 0 24px; }
.notes h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 32px 0 12px; }
.notes h2:first-child { margin-top: 0; }
.notes ul { padding-left: 1.2em; margin: 0; }
.notes li { margin-bottom: 8px; }
details { border-bottom: 1px solid var(--line); }
details summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
details p { margin: 0 0 16px; color: var(--ink-2); }

/* legal pages */
.legal { max-width: 68ch; padding: 16px 0 32px; }
.legal h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; }
.legal h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal .updated { margin: 0 0 24px; }

/* footer */
footer.site { padding: 32px 0 48px; border-top: 1px solid var(--line); margin-top: 24px; color: var(--ink-2); font-size: 0.9375rem; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }

@media print {
    body { background: #fff; color: #000; }
    .lang, .actions, .notes, footer.site, .intro p, .hint { display: none; }
    .tool { grid-template-columns: 1fr 1fr; }
    .recipe { position: static; background: #fff; color: #000; border: 1.5px solid #000; }
    .recipe h2, .small, .each, .amount dt { color: #000; }
    .jar-wick { stroke: #000; }
    .jar-flame { animation: none; }
}