/* Yest visual identity. All food-specific color and artwork stays here. */
:root {
    --ground: #fff9ef; --surface: #fffefb; --ink: #21312c; --ink-2: #52635d;
    --ink-3: #68766f; --line: #ded8ca; --accent: #b7472b;
    --accent-soft: #f7dfd1; --link: #176653; --link-hover: #0c493b;
    --radius: 18px; --gap: 1.35rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #14201d; --surface: #1c2a26; --ink: #f7f1e5; --ink-2: #c7d0ca;
        --ink-3: #aebbb4; --line: #3d4b46; --accent: #ff9b78;
        --accent-soft: #4b2b22; --link: #80d6be; --link-hover: #b7efdf;
    }
}
:root[data-theme="dark"] {
    --ground: #14201d; --surface: #1c2a26; --ink: #f7f1e5; --ink-2: #c7d0ca;
    --ink-3: #aebbb4; --line: #3d4b46; --accent: #ff9b78;
    --accent-soft: #4b2b22; --link: #80d6be; --link-hover: #b7efdf;
}
.header { border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.brand { font-size: 1.15rem; }
.brand__mark {
    width: 2.35rem; height: 2.35rem; color: transparent; border-radius: 42% 58% 48% 52%;
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='10'/%3E%3Cpath d='M20 16v7l5 3M14 8c-3 2-3 5-1 7M21 6c-3 2-3 5-1 7M28 8c-3 2-3 5-1 7'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover; box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
main > h1 { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); }
.subtitle { max-width: 62ch; color: var(--ink-2); font-size: 1.08rem; }
.articles { gap: 1.2rem; }
.articles > li { box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent); }
.articles .thumb { background: #f4d6b7; }
.card-meta { text-transform: uppercase; letter-spacing: .06em; }

.quick-timer {
    position: relative; overflow: hidden; margin: 1.5rem 0 2rem; padding: clamp(1.1rem, 3vw, 2rem);
    border-radius: calc(var(--radius) + 6px); color: #fff;
    background: linear-gradient(135deg, #176653, #1c806a 58%, #b7472b 140%);
    box-shadow: 0 20px 50px rgba(23, 102, 83, .2);
}
.quick-timer::after {
    content: ""; position: absolute; width: 14rem; height: 14rem; right: -4rem; top: -7rem;
    border: 2rem solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none;
}
.quick-timer__eyebrow { margin: 0 0 .25rem; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 800; }
.quick-timer h2 { margin: 0 0 .35rem; padding: 0; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.25rem); }
.quick-timer > p { max-width: 56ch; color: rgba(255,255,255,.84); }
.quick-timer__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 48rem; }
.quick-timer label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 750; }
.quick-timer select {
    width: 100%; min-height: 48px; border: 1px solid rgba(255,255,255,.44); border-radius: 12px;
    padding: .55rem 2.2rem .55rem .75rem; background: #fff; color: #21312c; font: inherit;
}
.quick-timer select:focus-visible { outline: 3px solid #ffd9a8; outline-offset: 2px; }
.quick-timer__result { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }
.quick-timer__fact { min-width: 9rem; font-size: 1.12rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.quick-timer__link { color: #fff; font-weight: 700; }
.quick-timer__link:hover { color: #ffe0bd; }

.timer {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 48px; padding: .55em 1.05em; border: 2px solid var(--accent);
    border-radius: 999px; background: var(--accent-soft); color: #842e1d;
    font: 750 1rem/1.1 inherit; font-variant-numeric: tabular-nums;
    cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, color .15s;
}
.timer::before { content: ""; width: 0; height: 0; border-top: .34em solid transparent; border-bottom: .34em solid transparent; border-left: .52em solid currentColor; }
.timer:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.timer:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.timer--running { background: #21312c; border-color: #21312c; color: #fff; font-size: 1.12rem; }
.timer--running::before { width: .55em; height: .65em; border: 0; border-left: .18em solid; border-right: .18em solid; }
.timer--finished { background: #176653; border-color: #176653; color: #fff; }
.timer--finished::before { width: .6em; height: .3em; border: 0; border-left: .16em solid; border-bottom: .16em solid; transform: rotate(-45deg); }
.quick-timer .timer { background: #fff; border-color: #fff; color: #842e1d; }
.quick-timer .timer:hover { background: #ffe0bd; color: #6b2417; }
table .timer { min-height: 44px; padding: .35em .75em; font-size: .92rem; }

.ad { min-height: 150px; flex-direction: column; border: 1px dashed var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 82%, var(--ground)); }
.ad::before { content: "Advertisement"; align-self: stretch; padding: .45rem .7rem; color: var(--ink-3); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-align: center; text-transform: uppercase; }

@media (max-width: 540px) {
    main { padding-top: 1.35rem; }
    .quick-timer__fields { grid-template-columns: 1fr; }
    .quick-timer__result { align-items: stretch; flex-direction: column; }
    .quick-timer__result > * { width: 100%; }
    .quick-timer__link { min-height: 44px; display: inline-flex; align-items: center; }
    .articles h2, .articles .title { min-height: auto; }
    .content table { min-width: 36rem; }
}

/* Per-page timer panel: sits at the top of the guide, above the text. Presets
   quote this page (a table button or a sentence of it); the manual field is
   always present so a guide without a stated time still has a working timer. */
.page-timer {
    display: grid; gap: .8rem; margin: 0 0 1.6rem; padding: 1.15rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: var(--radius); background: var(--surface);
}
.page-timer h2 { margin: 0; padding: 0; font-size: 1.15rem; }
.page-timer__note { margin: 0; color: var(--ink-2); font-size: .95rem; }
.page-timer__presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-timer__preset { max-width: 100%; text-align: left; white-space: normal; }
.page-timer__own { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .8rem; }
.page-timer__own label { display: grid; gap: .25rem; color: var(--ink-2); font-size: .8rem; font-weight: 750; }
.page-timer__own input {
    min-height: 44px; width: 7rem; padding: .5rem .7rem; border: 1px solid var(--line);
    border-radius: calc(var(--radius) / 2); background: var(--ground); color: var(--ink); font: inherit;
}
.page-timer__own input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
    .page-timer__own { align-items: stretch; flex-direction: column; }
    .page-timer__own input, .page-timer__start { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .timer { transition: none; } }
@media print {
    .quick-timer, .page-timer, .timer, .ad { display: none !important; }
    .content table { min-width: 0; font-size: 9pt; }
    .table-wrap { overflow: visible; border-color: #777; }
}