/* PantryPrep — base stylesheet
   Palette carries meaning: green is the product voice, honey marks what still
   needs buying or is close to expiring, rust marks something already expired
   and anything that deletes.

   Warmth comes from layers rather than decoration: an oat-coloured kitchen
   table (--paper) with warm white panels (--surface) set on it, soft corners,
   and a faint brown shadow under panels only. */

:root {
    --ink: #2B2722;
    --ink-soft: #6A6155;
    --paper: #F6F1E7;
    --paper-sunk: #EDE6D8;
    --surface: #FFFDF8;
    --herb: #2F5D3F;
    --herb-deep: #234A31;
    --herb-wash: #E4ECDF;
    --herb-line: #C6D6C2;
    --amber: #C7861F;
    --honey-wash: #FBEFD9;
    --honey-ink: #8A5610;
    --rust: #A33B26;
    --rust-wash: #F8E6E0;
    --rule: #E3DACA;
    --rule-strong: #D2C6B0;

    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --measure: 34rem;
    --radius: 8px;
    --radius-lg: 14px;
    --shadow: 0 1px 2px rgba(74, 52, 20, 0.05), 0 6px 18px rgba(74, 52, 20, 0.06);
    --shadow-lift: 0 2px 4px rgba(74, 52, 20, 0.06), 0 10px 26px rgba(74, 52, 20, 0.1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Short pages and long ones keep the same width, so the page does not jump
   sideways when a scrollbar comes and goes. */
html { scrollbar-gutter: stable; }

a { color: var(--herb-deep); }
a:hover { color: var(--herb); }

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

/* ---------- header ---------- */

.topnav {
    /* Its own layer above the pinned page heading. The page fade gives the
       bar a stacking context of its own, so without this the admin dropdown
       opened underneath the heading. */
    position: relative;
    z-index: 30;
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}

.topnav__inner {
    max-width: 84rem;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--herb-deep);
    text-decoration: none;
}

.wordmark__mark {
    width: 1.7rem;
    height: 1.7rem;
    flex: none;
}

/* Links sit in soft pills: a bigger target than bare text, and the current
   page reads at a glance without a hard underline. */
.topnav__links {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 0.94rem;
}

.topnav__links a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
}

.topnav__links a:hover {
    color: var(--herb-deep);
    background: var(--paper);
}

.topnav__links a.is-active {
    color: var(--herb-deep);
    font-weight: 600;
    background: var(--herb-wash);
}

/* The account link: a round initial, then the name, cut short if long. */
.topnav__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--herb-wash);
    border: 1px solid var(--herb-line);
    color: var(--herb-deep);
    font-size: 0.85rem;
    font-weight: 700;
}

.topnav__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The admin dropdown: one pill in the bar, its pages in a small panel
   beneath. A <details> element, so it opens and closes without script;
   app.js only closes it on an outside click or Escape. */
.navmenu {
    position: relative;
}

.navmenu__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.navmenu__button::-webkit-details-marker { display: none; }

/* A small chevron that turns over when the panel is open. */
.navmenu__button::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease, margin 0.15s ease;
}

.navmenu[open] > .navmenu__button::after {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.navmenu__button:hover,
.navmenu[open] > .navmenu__button {
    color: var(--herb-deep);
    background: var(--paper);
}

.navmenu.is-active > .navmenu__button {
    color: var(--herb-deep);
    font-weight: 600;
    background: var(--herb-wash);
}

.navmenu__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 11rem;
    padding: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
}

.topnav__links .navmenu__panel a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
}

/* Between the phone menu and a wide window, the pills tighten so the whole
   bar stays on one line. */
@media (min-width: 70.01rem) and (max-width: 85rem) {
    .topnav__inner { gap: 1rem; }

    .topnav__links { gap: 0.1rem; }

    .topnav__links > a,
    .navmenu__button { padding: 0.4rem 0.55rem; }

    /* The account link shrinks to its initial; the name stays in the tooltip
       and is still read out by screen readers. */
    .topnav__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .topnav__account a.topnav__user { padding: 0.2rem; }
}

.topnav__account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.topnav__user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 12rem;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.inline-form { margin: 0; }

/* ---------- page shells ---------- */

.page {
    flex: 1;
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
    padding: 2.75rem 1.5rem 4rem;
}

.page--split { padding-top: 3.5rem; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 4rem;
    align-items: start;
}

/* Sign in and sign up: the form and its sample card sit together in the
   middle rather than at opposite edges of a wide window. */
@media (min-width: 56.01rem) {
    .split:has(> .split__form) {
        grid-template-columns: minmax(0, 24rem) minmax(0, 22rem);
        justify-content: center;
        gap: 5rem;
        padding-top: 1rem;
    }
}

h1 {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.display {
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    max-width: 17ch;
    margin-bottom: 1.1rem;
}

.lede {
    max-width: var(--measure);
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
}

.lede--tight { margin-bottom: 1.5rem; }

/* ---------- showcase panel ---------- */

.showcase {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 1.5rem 1.4rem;
}

.showcase__caption {
    font-family: var(--serif);
    font-size: 1.02rem;
    margin: 0 0 1rem;
    color: var(--herb-deep);
}

.showcase__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.showcase__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.92rem;
}

.showcase__note { color: var(--ink-soft); font-size: 0.84rem; white-space: nowrap; }

.showcase__item--have .showcase__name {
    text-decoration: line-through;
    text-decoration-color: var(--herb);
    color: var(--ink-soft);
}

.showcase__item--need .showcase__name { font-weight: 600; }
.showcase__item--need .showcase__note { color: var(--honey-ink); font-weight: 600; }

.showcase__summary {
    margin: 1rem 0 0;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

/* ---------- how it works (landing) ----------
   Three real steps in order, so they are numbered. Each sits on a warm white
   panel like the sample list above, and the number is drawn by the list
   counter rather than typed into the copy. */

.howto { margin-top: 4rem; }

.howto__title {
    font-family: var(--serif);
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
}

.howto__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    counter-reset: howto;
}

.howto__step {
    counter-increment: howto;
    padding: 1.25rem 1.35rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.howto__step::before {
    content: counter(howto);
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: var(--herb-wash);
    color: var(--herb-deep);
    font-weight: 700;
}

.howto__step h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
}

.howto__step p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.howto__more {
    max-width: 60ch;
    margin: 1.5rem 0 0;
    color: var(--ink-soft);
}

@media (max-width: 56rem) {
    .howto { margin-top: 3rem; }
    .howto__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- forms ---------- */

.form { max-width: 24rem; }

.field { margin-bottom: 1.15rem; }

.field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field input::placeholder,
.field textarea::placeholder { color: #A39886; }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: #FFFFFF;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--herb);
    outline: 2px solid var(--herb-wash);
    outline-offset: 0;
}

/* Every single-choice dropdown draws its own arrow, inset from the right
   edge by the same amount as the text is from the left, instead of the
   browser's arrow jammed against the border. The :not() selectors lift this
   above the per-page select rules, whose background shorthand would
   otherwise erase the arrow. Font size is left alone so the phone rule that
   stops iOS zooming into small fields still applies. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236A6155' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.7rem auto;
    padding-right: 2.1rem;
    cursor: pointer;
}

select:not([multiple]):not([size]):disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.field__hint {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.field__error {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--rust);
}

/* ---------- buttons ---------- */

.button {
    display: inline-block;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button--primary {
    background: var(--herb);
    border-color: var(--herb);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(35, 74, 49, 0.25);
}

.button--primary:hover { background: var(--herb-deep); color: #FFFFFF; }

.button--quiet {
    background: var(--surface);
    border-color: var(--rule-strong);
    color: var(--ink);
}

.button--quiet:hover { border-color: var(--herb); color: var(--herb-deep); background: #FFFFFF; }

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- notices ---------- */

.notice {
    padding: 0.75rem 1rem;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius);
    margin: 0 0 1.25rem;
    font-size: 0.93rem;
    max-width: 40rem;
}

.notice--good { border-color: var(--herb-line); border-left-color: var(--herb); background: var(--herb-wash); }
.notice--bad { border-color: #EBC9BE; border-left-color: var(--rust); background: var(--rust-wash); }

.footnote { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- dashboard ---------- */

.tasklist {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem;
    max-width: 40rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.tasklist__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
}

.tasklist__item:last-child { border-bottom: 0; }

.tasklist__item a {
    font-family: var(--serif);
    font-size: 1.1rem;
    text-decoration: none;
}

.tasklist__item a:hover { text-decoration: underline; }
.tasklist__item span { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- footer ---------- */

.sitefooter {
    border-top: 1px solid var(--rule);
    background: var(--paper-sunk);
    padding: 1.1rem 1.5rem 1.25rem;
    text-align: center;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.sitefooter p { margin: 0.2rem 0; }

/* ---------- responsive ---------- */

@media (max-width: 56rem) {
    .split { grid-template-columns: 1fr; gap: 2.5rem; }
    .showcase { max-width: 26rem; }
    .topnav__inner { gap: 1rem; }
    .topnav__account { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- viewing as another account ----------
   Amber, because it is a warning: changes made here land in someone else's
   account. It sits above the navigation on every page until the admin leaves. */

.impersonation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 1.5rem;
    background: var(--honey-wash);
    border-bottom: 2px solid var(--amber);
    color: var(--ink);
    font-size: 0.92rem;
}

.impersonation__text { margin: 0; }

/* ---------- account page ---------- */

a.topnav__user {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.2rem 0.75rem 0.2rem 0.2rem;
    border-radius: 999px;
}

a.topnav__user:hover { color: var(--herb-deep); background: var(--paper); }

a.topnav__user.is-active {
    color: var(--herb-deep);
    background: var(--herb-wash);
}

.account-danger {
    max-width: 40rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.account-danger h2 { color: var(--rust); }

/* ---------- admin logs ---------- */

.filters__field select {
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.92rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: #FFFFFF;
}

.filters__field--actions {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.75rem;
}

.logs__when { white-space: nowrap; }
.logs__via { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.logs__summary { font-size: 0.88rem; overflow-wrap: anywhere; }

.logs__pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* ---------- admin logs: inline filters and pager ----------
   Inputs, selects, and buttons share one fixed height and sit on the same
   baseline, so the Filter and Clear buttons line up with the fields beside
   them. Scoped to .filters--inline so the recipe search is untouched. */

.filters--inline {
    align-items: flex-end;
    gap: 1rem;
}

.filters--inline input,
.filters--inline select,
.filters--inline .button,
.pager .button {
    box-sizing: border-box;
    height: 2.3rem;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.2;
}

.filters--inline input,
.filters--inline select {
    min-width: 11rem;
    padding: 0 0.6rem;
}

.filters--inline input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.filters--inline .filters__field--narrow select { min-width: 5.5rem; }

.filters__buttons {
    display: flex;
    gap: 0.5rem;
}

.filters--inline .button,
.pager .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.pager .button { min-width: 2.3rem; padding: 0 0.7rem; }

.pager .is-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.pager__total {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* ---------- checkboxes ----------
   One drawn box everywhere instead of each browser's own, so a meal, a table
   row and a group choice all tick the same way. The tick is a clipped square
   that scales in; the header box of a list shows a bar when only some rows
   are chosen. */

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    margin: 0;
    font-size: 1.15rem;
    vertical-align: -0.2em;
    background: var(--surface);
    border: 1.5px solid var(--rule-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.62em;
    height: 0.62em;
    background: #FFFFFF;
    clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 20%, 82% 4%, 40% 66%);
    transform: scale(0);
    transition: transform 0.15s ease;
}

input[type="checkbox"]:hover { border-color: var(--herb); }

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
    background: var(--herb);
    border-color: var(--herb);
}

input[type="checkbox"]:checked::before { transform: scale(1); }

input[type="checkbox"]:indeterminate::before {
    height: 0.14em;
    width: 0.55em;
    clip-path: none;
    border-radius: 1px;
    transform: scale(1);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--herb);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}