:root{color-scheme:dark;--paper:#edf2ed;--ink:#29382e;--green:#3e624c;--muted:#55655c;--line:#d4ddd6;--white:#f5f8f5;--serif:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font:16px/1.55 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}[hidden]{display:none!important}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button,.primary{border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;min-height:44px;color:var(--ink);background:var(--white)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--green);color:#fff;border-color:var(--green);display:inline-block;text-decoration:none;font-weight:600}.quiet{background:transparent}:focus-visible{outline:3px solid #52785e;outline-offset:3px}.mast{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(20px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:700;font-size:1.35rem;text-decoration:none;white-space:nowrap}.brand img{width:37px;height:37px;border-radius:11px}.toolbar{display:flex;gap:.55rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}.shell{max-width:1220px;margin:auto;padding:26px 20px 70px}.hero{padding:clamp(24px,6vw,68px);border-radius:28px;background:#e2e7d5;background-image:radial-gradient(ellipse at 87% 0%,#f3e4bf,transparent 65%);margin-bottom:24px}.eyebrow{color:var(--muted);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}.hero h1,.login h1{font:600 clamp(2.7rem,7vw,5.8rem)/.99 var(--serif);letter-spacing:-.055em;margin:.25em 0 .4em}.search{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px 17px;max-width:480px}.search span{font-size:1.6rem}.search input{border:0;width:100%;min-height:44px;background:transparent;color:var(--ink)}#categories{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 23px}#categories [aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}#cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(235px,100%),1fr));gap:15px}.card{display:flex;flex-direction:column;min-height:195px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:19px;gap:9px}.card button{all:unset;cursor:pointer;flex:1;font:600 clamp(1.35rem,2.3vw,1.9rem)/1.13 var(--serif);overflow-wrap:anywhere}.card button:focus-visible{outline:3px solid #52785e}.card .eyebrow{margin:0}.card small{color:var(--muted);margin-top:auto}.card:hover{border-color:#859177}.glyph{background:#e1ebe3;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:1.2rem}#detail h1{font:600 clamp(2rem,5vw,4rem)/1.07 var(--serif);overflow-wrap:anywhere}.detail-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}.columns{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr);gap:clamp(16px,3vw,40px);margin-top:25px}.ingredients{background:#e2ebe3;border-radius:22px;padding:20px}.steps{padding:10px 0}.columns h2,dialog h2{font:600 1.65rem/1.2 var(--serif);margin:.2em 0 .7em}.check{display:flex;align-items:flex-start;gap:12px;padding:9px 0;cursor:pointer}.check input{margin-top:.3rem;width:20px;height:20px;flex:none;accent-color:var(--green)}.check input:checked+span{text-decoration:line-through;color:var(--muted)}.notice{padding:13px;background:#e2ece4;border-radius:12px}.note{margin-top:26px}.note textarea,dialog input,dialog textarea{width:100%;border:1px solid #c6d2c9;padding:10px 12px;border-radius:12px;background:var(--white);color:var(--ink)}.preserve{white-space:pre-wrap;overflow-wrap:anywhere}.cooking .check{font-size:1.22rem;line-height:1.65}.login{padding:clamp(24px,8vw,90px) 20px;max-width:1180px;margin:auto}.login-panel{padding:clamp(25px,8vw,95px);border-radius:32px;background:linear-gradient(125deg,#e2eee4,#e7ebe9)}.login-panel p{font-size:1.15rem}.login-panel .eyebrow{font-size:.78rem}dialog{width:min(660px,calc(100% - 28px));max-height:90dvh;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:22px}dialog::backdrop{background:#24312188}dialog label{display:block;margin:12px 0;font-weight:600}dialog small{font-weight:400;color:var(--muted)}.backup-actions{display:flex;flex-wrap:wrap;gap:8px}.error,#status{color:#8b321f}#status{position:sticky;bottom:12px}#status:not(:empty){background:var(--white);padding:10px 14px;border:1px solid var(--line);border-radius:12px}
@media(max-width:670px){.columns{grid-template-columns:1fr}.hero{border-radius:20px}.shell{padding:18px 14px 55px}.mast{padding:10px 14px}.toolbar{gap:.3rem}.mast button{font-size:.85rem;padding:.5rem .65rem}.brand{font-size:1.13rem;gap:.42rem}.brand img{width:29px;height:29px}#cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{min-height:175px;padding:13px}.card button{font-size:1.2rem}.card .eyebrow{font-size:.63rem}}

@media (pointer: coarse) {
    #collection:has(.search-row:focus-within) #categories {
        margin-block: 8px;
    }

    .search input {
        font-size: 16px;
    }
}

@media (pointer: coarse) {
    #collection:has(.search-row:focus-within) .card {
        min-height: 0;
        padding: 10px 12px;
    }

    #collection:has(.search-row:focus-within) .card .glyph {
        display: none;
    }

    #collection:has(.search-row:focus-within) .card button {
        font-size: 1.15rem;
    }
}

.mast { min-height: 0; padding-block: 8px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.shell { padding-top: 8px; }
.search-row { scroll-margin-top: 4px; }
.search { padding-block: 0; }
.search input { min-height: 36px; }
button, .primary {
    min-height: 22px;
    padding: 3px 10px;
    font-size: .875rem;
    line-height: 1.25;
}
.card button { font-size: clamp(1.2rem, 2vw, 1.7rem); }
#categories { margin-block: 12px; }

.header-menu { position: relative; }
.header-menu summary {
    display: grid;
    place-items: center;
    list-style: none;
    cursor: pointer;
    min-width: 32px;
    min-height: 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    letter-spacing: .12em;
}
.header-menu summary::-webkit-details-marker { display: none; }
.menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 2;
    display: grid;
    gap: 4px;
    width: max-content;
    min-width: 130px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 8px 20px #29382e18;
}
.menu-panel button { text-align: left; border-radius: 7px; }

.search { gap: 8px; padding-inline: 10px 5px; }
.search span { font-size: 1.15rem; line-height: 1; }
.search input { min-height: 28px; min-width: 0; padding-block: 0; }
.search input:focus { outline: none; box-shadow: none; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#clear-search {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    background: #e0e9e1;
    color: var(--ink);
    font-size: 1.15rem;
}

:root {
    --paper: #191b1b;
    --white: #282b2a;
    --ink: #f1f3ef;
    --muted: #aeb4ae;
    --line: #373a38;
    --green: #9dfd38;
}
.mast, dialog, .login-panel { background: var(--paper); }
.brand, h1, h2, h3 { color: var(--green); }
.primary { background: var(--white); color: var(--green); }
button, .primary, .header-menu summary { border: 0; }
:focus-visible { outline-color: var(--green); }
.error, #status { color: #ffad9c; }
dialog::backdrop {
    background: #0006;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.search-row { scroll-margin-top: 0; }
@media (orientation: landscape) and (pointer: coarse) {
    body:has(.search-row:focus-within) { padding-bottom: 65vh; }
}

:root { --control-height: 32px; --control-radius: 8px; }
button, .primary, .header-menu summary {
    min-height: var(--control-height);
    border-radius: var(--control-radius);
}
.search, #recipe-form input, #recipe-form textarea {
    background: var(--white);
    border: 0;
    border-radius: var(--control-radius);
}
.search input, #recipe-form input, #recipe-form textarea {
    font-size: 16px;
    min-height: var(--control-height);
    padding: 4px 9px;
}
.search input { background: transparent; }
#recipe-form textarea { height: var(--control-height); resize: vertical; }
#recipe-form label { margin: 7px 0; font-size: .875rem; }
#recipe-form input:focus, #recipe-form textarea:focus {
    outline: none;
    box-shadow: inset 0 -2px #788b70;
}
#clear-search { min-height: var(--control-height); background: transparent; }
#search-results { list-style: none; padding: 0; margin: 8px 0; }
#search-results li { padding: 6px 10px; border-bottom: 1px solid var(--line); }
#search-results summary { cursor: pointer; }
#search-results p { white-space: pre-line; }

dialog h2 { margin: 0 36px .7em 0; }
.dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: var(--control-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--green);
    font-size: 1.5rem;
}
dialog:focus, .dialog-close:focus { outline: none; box-shadow: none; }
.dialog-close:focus-visible { text-decoration: underline; }

@media (orientation: portrait) {
    #recipe-dialog {
        inset-block: 0 auto;
        margin-block: clamp(16px, 5dvh, 48px) 0;
        max-height: calc(100dvh - clamp(16px, 5dvh, 48px) - 16px);
    }
}

/* Grouped rows shared by forms and menus. */
.settings-group {
    background: var(--white);
    border-radius: 14px;
}
.settings-group + .settings-group { margin-top: 12px; }
#recipe-form .settings-group label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin: 0 14px;
    padding: 5px 0;
    font-weight: 500;
}
.settings-group > :not(:first-child) { border-top: 1px solid var(--line); }
#recipe-form .settings-fields input {
    flex: 1;
    min-width: 0;
    width: 0;
    text-align: end;
}
#recipe-form .settings-group :is(input, textarea) {
    background: transparent;
    padding-inline: 4px;
}
#recipe-form .settings-multiline label {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-block: 8px;
}
.settings-multiline small { display: block; }
.settings-actions { display: grid; gap: 0; }
.settings-actions button {
    width: calc(100% - 28px);
    margin-inline: 14px;
    min-height: 40px;
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
    text-align: start;
}
.settings-actions button + button { border-top: 1px solid var(--line); }
.menu-panel.settings-group { padding: 0; }