/*
 * Agent Morot's own styles, loaded after pico.jade.min.css (Pico CSS 2.1.1): first the colours,
 * set only as variables (docs/UI.md): area colours, the dim dark mode, warning colours; then the
 * app's own blocks, taken from the mockups in docs/mockups/.
 *
 * Theme: follows the system unless the user picks light or dark in the settings menu; the
 * server then renders <html data-theme="light|dark">, which Pico honours. The dark blocks
 * therefore appear twice with the same values: in the media query for :root without
 * data-theme, and for :root[data-theme="dark"]. data-theme="light" matches neither.
 *
 * Selectors match Pico's specificity: Pico declares its variables on :root:not([data-theme=dark])
 * and, in dark mode, :root:not([data-theme]), so a bare :root here would lose.
 */

/* Warning levels, shared by all areas; always shown with an icon and text, never colour alone. */
:root {
  --app-warning: #af291d; /* red-600: −3 hits */
  --app-warning-background: #faeeeb; /* red-50 */
  --app-caution: #bd3c13; /* orange-550: advice that may be ignored */
  --app-caution-background: #faeeea; /* orange-50 */
}

/* "Morot" in the top bar: the drawing's carrot, darker in light mode so it reads on white (4.7:1). */
:root {
  --app-carrot: #b85a0f;
}

/* Meal planning: azure, light. */
:root[data-area="planning"] {
  --pico-primary: #0172ad;
  --pico-primary-background: #0172ad;
  --pico-primary-underline: rgba(1, 114, 173, 0.5);
  --pico-primary-hover: #015887;
  --pico-primary-hover-background: #02659a;
  --pico-primary-focus: rgba(2, 154, 232, 0.5);
  --pico-primary-inverse: #fff;
  --pico-text-selection-color: rgba(2, 154, 232, 0.25);
}

/* Shopping list: amber, light. */
:root[data-area="shopping"] {
  --pico-primary: #876400;
  --pico-primary-background: #ffbf00;
  --pico-primary-underline: rgba(135, 100, 0, 0.5);
  --pico-primary-hover: #694d00;
  --pico-primary-hover-background: #e8ae01;
  --pico-primary-focus: rgba(183, 136, 0, 0.5);
  --pico-primary-inverse: #000;
  --pico-text-selection-color: rgba(183, 136, 0, 0.25);
}

/*
 * Dim dark mode: Pico's dark surfaces, borders and muted text lifted by 14 points of HSL
 * lightness, keeping the layering between page, cards and form fields. Body text keeps
 * Pico's value. On these surfaces Pico's link colours fall below 4.5:1, so links use
 * palette step 250 and 150 on hover; button backgrounds keep Pico's values.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #2e374a;
    --pico-muted-color: #a3a9b5;
    --pico-muted-border-color: #3c475e;
    --pico-card-background-color: #343d50;
    --pico-card-sectioning-background-color: #363f54;
    --pico-code-background-color: #363f54;
    --pico-form-element-background-color: #384257;
    --pico-form-element-selected-background-color: #46526b;
    --pico-form-element-border-color: #46526b;
    --pico-form-element-active-background-color: #363f54;
    --pico-dropdown-background-color: #343d50;
    --pico-dropdown-border-color: #3c475e;
    --pico-dropdown-hover-background-color: #3c475e;
    --pico-progress-background-color: #3c475e;
    --pico-switch-background-color: #4f5d79;
    --pico-range-border-color: #3c475e;
    --pico-range-active-border-color: #46526b;

    /* Recipes and pages outside the areas: jade links. */
    --pico-primary: #00cc88; /* jade-250 */
    --pico-primary-underline: rgba(0, 204, 136, 0.5);
    --pico-primary-hover: #39f1a6; /* jade-150 */

    --app-warning: #f5a390; /* red-250 */
    --app-warning-background: #45150c; /* red-850 */
    --app-caution: #f8a283; /* orange-250 */
    --app-caution-background: #411a0a; /* orange-850 */

    --app-carrot: #f28a26; /* the drawing's own carrot, 4.8:1 on the page */
  }

  :root:not([data-theme])[data-area="planning"] {
    --pico-primary: #79c0ff; /* azure-250 */
    --pico-primary-background: #0172ad;
    --pico-primary-underline: rgba(121, 192, 255, 0.5);
    --pico-primary-hover: #b7d9fc; /* azure-150 */
    --pico-primary-hover-background: #017fc0;
    --pico-primary-focus: rgba(1, 170, 255, 0.375);
    --pico-primary-inverse: #fff;
    --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
  }

  :root:not([data-theme])[data-area="shopping"] {
    --pico-primary: #e8ae01; /* amber-250 */
    --pico-primary-background: #ffbf00;
    --pico-primary-underline: rgba(232, 174, 1, 0.5);
    --pico-primary-hover: #fecc63; /* amber-150 */
    --pico-primary-hover-background: #fecc63;
    --pico-primary-focus: rgba(199, 148, 0, 0.375);
    --pico-primary-inverse: #000;
    --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
  }
}

/* Dark chosen in the app: the same values as the media query above. */
:root[data-theme="dark"] {
  --pico-background-color: #2e374a;
  --pico-muted-color: #a3a9b5;
  --pico-muted-border-color: #3c475e;
  --pico-card-background-color: #343d50;
  --pico-card-sectioning-background-color: #363f54;
  --pico-code-background-color: #363f54;
  --pico-form-element-background-color: #384257;
  --pico-form-element-selected-background-color: #46526b;
  --pico-form-element-border-color: #46526b;
  --pico-form-element-active-background-color: #363f54;
  --pico-dropdown-background-color: #343d50;
  --pico-dropdown-border-color: #3c475e;
  --pico-dropdown-hover-background-color: #3c475e;
  --pico-progress-background-color: #3c475e;
  --pico-switch-background-color: #4f5d79;
  --pico-range-border-color: #3c475e;
  --pico-range-active-border-color: #46526b;

  --pico-primary: #00cc88; /* jade-250 */
  --pico-primary-underline: rgba(0, 204, 136, 0.5);
  --pico-primary-hover: #39f1a6; /* jade-150 */

  --app-warning: #f5a390; /* red-250 */
  --app-warning-background: #45150c; /* red-850 */
  --app-caution: #f8a283; /* orange-250 */
  --app-caution-background: #411a0a; /* orange-850 */

  --app-carrot: #f28a26; /* the drawing's own carrot, 4.8:1 on the page */
}

:root[data-theme="dark"][data-area="planning"] {
  --pico-primary: #79c0ff; /* azure-250 */
  --pico-primary-background: #0172ad;
  --pico-primary-underline: rgba(121, 192, 255, 0.5);
  --pico-primary-hover: #b7d9fc; /* azure-150 */
  --pico-primary-hover-background: #017fc0;
  --pico-primary-focus: rgba(1, 170, 255, 0.375);
  --pico-primary-inverse: #fff;
  --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
}

:root[data-theme="dark"][data-area="shopping"] {
  --pico-primary: #e8ae01; /* amber-250 */
  --pico-primary-background: #ffbf00;
  --pico-primary-underline: rgba(232, 174, 1, 0.5);
  --pico-primary-hover: #fecc63; /* amber-150 */
  --pico-primary-hover-background: #fecc63;
  --pico-primary-focus: rgba(199, 148, 0, 0.375);
  --pico-primary-inverse: #000;
  --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
}

/* ===== Icons ===== */

/* The sprite in base.html (templates/partials/icons.html), used as <svg class="icon"><use href="#i-…"/></svg>. */
.app-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* Visually hidden, still read by screen readers. */
.app-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Page frame (base.html; docs/mockups/01-base-layout.html) ===== */

/* The rail's first icon is level with the page title's letters (--app-rail-offset); −0.375rem, since
   the icon's ink starts below its box and the title's glyphs below theirs. */
:root {
  --app-topbar-height: 3.25rem;
  --app-rail-width: 7rem;
  --app-content-max: 60rem;
  --app-page-top: calc(var(--pico-spacing) * 2.5);
  --app-rail-offset: calc(var(--app-topbar-height) + var(--app-page-top) - 0.375rem);
}

/* The page column (.app-shell): the top bar and the page in one box, so their edges always line up.
   From 768 px it is at most --app-shell-max wide, at the left of the grid column next to the rail, so
   the rail and the drawing stay put between pages: 60rem on normal pages (56rem of content inside the
   side padding), 48rem of content on narrow ones, every form page among them. A page never sets its
   width with a wrapper of its own. */
:root { --app-shell-max: var(--app-content-max); }
.app-page--narrow { --app-shell-max: calc(48rem + var(--pico-spacing) * 4); }

/* --- Top bar --- */
.app-header {
  margin-bottom: 0; padding-block: 0;
  /* Body text colour, taken here because Pico sets --pico-color to the primary colour on every link. */
  --app-text: var(--pico-color);
}
.app-topbar {
  position: relative;
  display: flex; align-items: center; column-gap: 0.75rem;
  min-height: var(--app-topbar-height); padding-block: 0.5rem;
}
/* The bar's controls are 36 px to keep it low; ::before widens each tap area to 48 px, and the 12 px
   gap keeps neighbouring tap areas apart. */
.app-brand, .app-chip, .app-icon-button { position: relative; }
/* The bar centres every box, but the name's letters sit low in theirs (room for descenders below them),
   so the chip and the gear are moved down to the letters' middle. On these two rather than their
   <details>, which would otherwise become the panels' anchor. */
.app-chip, .app-icon-button { top: 0.15rem; }
.app-brand::before, .app-chip::before, .app-icon-button::before { content: ""; position: absolute; inset: -6px; }
.app-brand {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2rem; margin-inline-end: auto; padding-inline-end: 0.25rem;
  color: var(--app-text); font-size: 1.40625rem; text-decoration: none;
}
a.app-brand:hover, a.app-brand:focus { color: var(--app-text); text-decoration: none; }
.app-brand-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.app-brand-name { display: none; }
@media (min-width: 480px) { .app-brand-name { display: inline; } }
.app-brand-carrot { color: var(--app-carrot); font-weight: 700; }

/* --- Who eats and the gear: panels under the bar, one open at a time (static/js/header.js) --- */
.app-eaters, .app-menu { margin: 0; }
/* The gear's icon sits centred in its 36 px button, so the button is pulled out until the icon's right
   edge meets the content's (−0.15rem: the cog's ink stops short of its drawing area). */
.app-menu { margin-inline-end: calc((2.25rem - 1.5rem) / -2 - 0.15rem); }
.app-eaters > summary, .app-menu > summary { padding: 0; list-style: none; border-radius: 2rem; }
.app-eaters > summary::-webkit-details-marker, .app-menu > summary::-webkit-details-marker { display: none; }
.app-eaters > summary::after, .app-menu > summary::after { display: none; }
.app-eaters[open] > summary, .app-menu[open] > summary { margin-bottom: 0; }
.app-eaters > summary:focus-visible, .app-menu > summary:focus-visible { outline: none; }
.app-eaters > summary:focus-visible .app-chip,
.app-menu > summary:focus-visible .app-icon-button { box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }

.app-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.25rem; padding: 0 0.875rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 2rem;
  background: var(--pico-background-color); color: var(--pico-muted-color);
  font-size: 0.9375rem; line-height: 1.2; white-space: nowrap;
}
/* Not everyone eats: filled with the area colour, so a forgotten setting is noticed. */
.app-chip--partial {
  border-color: var(--pico-primary-background);
  background: var(--pico-primary-background); color: var(--pico-primary-inverse);
  font-weight: 600;
}

.app-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--app-text);
}
.app-icon-button .icon { width: 1.5rem; height: 1.5rem; }

.app-popover {
  position: absolute; z-index: 20; top: calc(100% + 0.25rem); inset-inline: 0.5rem;
  padding: var(--pico-spacing);
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow);
}
@media (min-width: 576px) { .app-popover { inset-inline: auto var(--pico-spacing); width: 20rem; } }
.app-popover fieldset { margin-bottom: var(--pico-spacing); }
.app-eaters .app-popover > button { width: 100%; margin: 0; }

/* The eaters picker (templates/partials/eaters_picker.html): a row of at least 44 px per member. */
.app-eaters-picker legend { font-weight: 600; }
.app-eaters-picker small { display: block; margin-bottom: 0.25rem; color: var(--pico-muted-color); }
.app-eaters-picker label { display: flex; align-items: center; min-height: 2.75rem; margin: 0; }
/* "Välj minst en som äter" under the picker; kept while empty, so a screen reader hears it appear. */
.app-eaters-error { margin: calc(var(--pico-spacing) * -0.5) 0 var(--pico-spacing); font-size: 0.875rem; }
.app-eaters-error:empty { margin: 0; }

.app-menu .app-popover { inset-inline: auto 0.5rem; width: 16rem; padding: 0.25rem 0 0; }
.app-menu-list { margin: 0; padding: 0; }
.app-menu-list li { margin: 0; padding: 0; list-style: none; }
.app-menu-list form { margin: 0; }
/* "Logga ut" posts (conventions.md, Django), so it is a button in a form that looks like the links. */
.app-menu-list a, .app-menu-list button {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 2.75rem; padding: 0 var(--pico-spacing);
  color: var(--app-text); text-decoration: none;
}
.app-menu-list a:hover, .app-menu-list a:focus { background: var(--pico-dropdown-hover-background-color); color: var(--app-text); text-decoration: none; }
.app-menu-list a[aria-current="page"] { font-weight: 600; }
.app-menu-list button {
  width: 100%; margin: 0; border: 0; border-radius: 0; text-align: start; font-size: 1rem; font-weight: 400; line-height: inherit;
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--app-text); --pico-box-shadow: none;
}
.app-menu-list button:is(:hover, :active, :focus) { --pico-background-color: var(--pico-dropdown-hover-background-color); --pico-border-color: transparent; --pico-color: var(--app-text); --pico-box-shadow: none; }
.app-menu-list button:focus-visible { --pico-box-shadow: inset 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }

/* The theme in the gear's menu: a three-part switch, each option filling its third. */
.app-theme { margin: 0; padding: 0.5rem var(--pico-spacing) 0.75rem; border: 0; border-top: 1px solid var(--pico-muted-border-color); }
.app-theme legend { margin-bottom: 0.375rem; padding: 0; color: var(--pico-muted-color); font-size: 0.8125rem; }
.app-theme-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.25rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 0.5rem; background: var(--pico-card-sectioning-background-color);
}
.app-theme-options label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  width: 100%; min-height: 2.75rem; margin: 0; border-radius: 0.375rem; /* width: Pico gives a label holding a radio width: fit-content */
  color: var(--pico-muted-color); font-size: 0.8125rem; cursor: pointer;
}
.app-theme-options input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.app-theme-options label:has(input:checked) { background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 600; }
.app-theme-options label:has(input:focus-visible) { box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }

/* --- Areas: a bar fixed to the bottom of the screen on phones, in thumb reach; a rail from 768 px --- */
.app-page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.app-areas {
  position: fixed; z-index: 30; inset: auto 0 0 0;
  /* A quarter of the home bar's strip goes above the links, so they sit in the bar's visible middle
     rather than high above the strip; the bar is as tall as with all of it below. */
  padding: calc(0.25rem + env(safe-area-inset-bottom) / 4) 0 calc(0.25rem + env(safe-area-inset-bottom) * 3 / 4);
  border-top: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-sectioning-background-color);
  --app-text: var(--pico-color);
}
.app-areas ul { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 30rem; margin: 0 auto; padding: 0; }
.app-areas li { margin: 0; padding: 0; list-style: none; }
.app-areas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 4.25rem; margin: 0; padding: 0.25rem; border-radius: 0;
  color: var(--pico-muted-color); font-size: 0.9rem; line-height: 1.2; text-align: center; text-decoration: none;
}
.app-areas a:hover { color: var(--app-text); text-decoration: none; }
.app-areas a[aria-current="page"] { color: var(--app-text); font-weight: 600; text-decoration: none; }
.app-areas .icon { box-sizing: content-box; width: 1.8rem; height: 1.8rem; padding: 0.3rem 1.5rem; border-radius: 1.2rem; }
.app-areas a:hover:not([aria-current]) .icon { background: var(--pico-muted-border-color); }
.app-areas a[aria-current="page"] .icon { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }

/* From 768 px a grid: spacer, rail, the page column (at most --app-content-max), spacer. The left spacer
   is half the leftover width minus the rail, so the page column itself is centred on the screen and the
   rail sits just left of it; on narrower screens the spacer is 0 and the rail meets the screen's edge. */
@media (min-width: 768px) {
  .app-page {
    display: grid; padding-bottom: 0;
    grid-template-columns:
      max(0px, calc((100% - var(--app-content-max)) / 2 - var(--app-rail-width)))
      var(--app-rail-width) minmax(0, var(--app-content-max)) minmax(0, 1fr);
  }
  .app-shell { grid-column: 3; grid-row: 1; min-width: 0; max-width: var(--app-shell-max); }
  /* Pico's container has no side padding from here; next to the rail the page needs its own. */
  .app-topbar.container, .app-shell > main.container { max-width: none; padding-inline: calc(var(--pico-spacing) * 2); }
  .app-areas {
    position: sticky; inset: auto; top: 0; grid-column: 2; grid-row: 1; align-self: start;
    height: 100vh; height: 100dvh; padding: var(--app-rail-offset) 0 1rem; border: 0;
    /* The rail's background reaches the screen's left edge when the grid is centred. */
    background: var(--pico-card-sectioning-background-color);
    box-shadow: 0 0 0 100vmax var(--pico-card-sectioning-background-color); clip-path: inset(0 0 0 -100vmax);
  }
  .app-areas ul { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .app-areas a { min-height: 3.5rem; font-size: 0.9375rem; }
  .app-areas .icon { width: 1.875rem; height: 1.875rem; padding: 0.3125rem 1.5625rem; border-radius: 1.25rem; }
}

/* --- Form pages (base_form.html): the area bar goes on phones; from 768 px the rail keeps its band
   without its links, so the page doesn't shift sideways. Hidden rather than greyed out. --- */
.app-page--form { padding-bottom: env(safe-area-inset-bottom); }
.app-page--form .app-areas { display: none; }
@media (min-width: 768px) {
  .app-page--form .app-areas { display: block; }
  .app-page--form .app-areas ul { visibility: hidden; }
}

/* --- Page: content starts 24 px below the top bar on phones, 40 px from 768 px --- */
.app-shell > main {
  padding-top: calc(var(--pico-spacing) * 1.5); padding-bottom: var(--pico-block-spacing-vertical); /* Pico pads only body > main */
  --app-text: var(--pico-color);
}
@media (min-width: 768px) { .app-shell > main { padding-top: var(--app-page-top); } }

/* --- Message after a save or a delete (templates/partials/messages.html) --- */
.app-message {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: var(--pico-spacing); padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-inline-start: 4px solid var(--pico-primary-background);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.app-message .icon { width: 1.5rem; height: 1.5rem; color: var(--pico-primary); }
/* An error, such as a mail that couldn't be sent: Pico's error colour with the caution icon (UI.md, Warning colours). */
.app-message--error { border-inline-start-color: var(--pico-del-color); }
.app-message--error .icon { color: var(--pico-del-color); }

/* --- A note in place of a field's help text, at the caution level (UI.md, Warning colours) --- */
.app-field-note { display: flex; align-items: flex-start; gap: 0.375rem; }
.app-field-note .icon { margin-top: 0.1em; vertical-align: 0; }
.app-field-note--caution { color: var(--app-caution); }

/* --- Delete confirmation (templates/partials/confirm_dialog.html, static/js/confirm.js) --- */
/* No top margin: Pico gives one to a heading after another element, here the dialog's empty form. */
.app-confirm-title { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; }
.app-confirm p { margin-bottom: 0; }
/* A delete button is an outline button with a trash icon, never red, since red is the warning level. */
.app-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* ===== Page head and page menu (templates/partials/page_menu.html; docs/mockups/04-recipe-search.html, 05-recipe-page.html) ===== */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}
@media (min-width: 768px) { .page-head { margin-bottom: calc(var(--pico-spacing) * 1.75); } }
.page-head h1 { margin: 0; }
.page-head-actions { position: relative; display: flex; flex: none; gap: 0.375rem; }
/* From 768 px the button tops meet the top of the rail's current-area pill (about 2.4 px above the
   title's box), while the title's letters stay level with the rail's icon. */
@media (min-width: 768px) { .page-head-actions { margin-top: -0.15rem; } }
.page-menu { margin: 0; }
/* The week steps' look: a page menu's summary, or a single action beside the menus as a plain link. */
.page-menu > summary, .page-head-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-width: 2.75rem; height: 2.75rem; margin: 0; padding: 0 0.625rem 0 0.75rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  color: var(--app-text); font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap;
  list-style: none; cursor: pointer; text-decoration: none;
}
.page-head-button { padding-inline: 0.75rem; }
.page-head-button:hover, .page-head-button:focus { color: var(--app-text); background: var(--pico-muted-border-color); text-decoration: none; }
.page-head-button:focus { outline: none; }
.page-head-button:focus-visible { box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
.page-head-button .icon { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.page-menu > summary::-webkit-details-marker { display: none; }
.page-menu > summary::after { display: none; }
.page-menu > summary:hover, .page-menu[open] > summary { background: var(--pico-muted-border-color); }
.page-menu > summary:focus { outline: none; }
.page-menu > summary:focus-visible { box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
.page-menu > summary .icon { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.page-menu--add > summary > .icon:first-child { color: var(--pico-primary); }
.page-menu > summary .page-menu-chevron { width: 1rem; height: 1rem; color: var(--pico-muted-color); }
@media (prefers-reduced-motion: no-preference) { .page-menu-chevron { transition: transform 0.15s ease-out; } }
.page-menu[open] .page-menu-chevron { transform: rotate(180deg); }
@media (max-width: 399.98px) { /* 360 px phones: the title and the buttons stay on one row */
  .page-head { gap: 0.5rem; }
  .page-head-actions { gap: 0.25rem; }
  .page-menu > summary, .page-head-button { gap: 0.25rem; padding-inline: 0.5rem; }
}
.page-head-long { display: none; }
@media (min-width: 576px) { .page-head-long { display: inline; } }

/* The menu: under the buttons, right-aligned with them. */
.page-menu-list {
  position: absolute; z-index: 20; top: calc(100% + 0.375rem); inset-inline-end: 0;
  width: min(18rem, calc(100vw - 2rem)); margin: 0; padding: 0.25rem 0;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow);
}
.page-menu-list li { margin: 0; padding: 0; list-style: none; }
.page-menu-list form { margin: 0; }
.page-menu-list a, .page-menu-item, .page-menu-button {
  display: flex; align-items: flex-start; gap: 0.75rem;
  min-height: 3rem; padding: 0.5rem var(--pico-spacing);
  color: var(--app-text); text-decoration: none;
}
/* An entry that posts, such as "Arkivera": a button in a form that looks like the links. */
.page-menu-button {
  width: 100%; margin: 0; border: 0; border-radius: 0; text-align: start; font-size: 1rem; font-weight: 400; line-height: inherit;
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--app-text); --pico-box-shadow: none;
}
.page-menu-button:is(:hover, :active, :focus) { --pico-background-color: var(--pico-dropdown-hover-background-color); --pico-border-color: transparent; --pico-color: var(--app-text); --pico-box-shadow: none; }
.page-menu-button:focus-visible { --pico-box-shadow: inset 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
.page-menu-list a:hover, .page-menu-list a:focus { background: var(--pico-dropdown-hover-background-color); color: var(--app-text); text-decoration: none; }
.page-menu-list a:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
/* An entry of a phase not yet built: greyed out, not a link, with a "Kommer senare" pill. */
.page-menu-item { color: var(--pico-muted-color); cursor: default; }
.page-menu-item .icon { opacity: 0.6; }
.page-menu-soon {
  display: inline-block; margin-inline-start: 0.25rem; padding: 0 0.5rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 1rem; font-size: 0.75rem; line-height: 1.4; white-space: nowrap; vertical-align: 0.1em;
}
.page-menu-list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; vertical-align: 0; color: var(--pico-primary); }
.page-menu-text { display: flex; flex-direction: column; line-height: 1.35; }
.page-menu-text small { color: var(--pico-muted-color); font-size: 0.8125rem; }

/* ===== Login pages' frame (base_auth.html; docs/mockups/16-login.html) ===== */

/* No top bar or navigation; the page column is narrow and centred. */
.auth-page { --app-shell-max: 26rem; min-height: 100vh; min-height: 100dvh; }
.auth-page .app-shell { max-width: var(--app-shell-max); margin-inline: auto; padding: calc(var(--pico-spacing) * 2) var(--pico-spacing) var(--pico-spacing); }
.auth-page .app-shell > main { padding: 0; }
@media (min-width: 768px) { .auth-page .app-shell { padding-top: calc(var(--pico-spacing) * 4); } }

/* The drawing, in a circle that cuts its collar like a portrait, and the name above the card. */
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; }
.auth-portrait {
  display: flex; align-items: flex-end; justify-content: center;
  width: 5.5rem; height: 5.5rem; overflow: hidden; border-radius: 50%;
  background: var(--pico-card-sectioning-background-color);
  box-shadow: inset 0 0 0 1px var(--pico-muted-border-color);
}
.auth-portrait img { display: block; width: 5rem; height: 5rem; }
.auth-name { margin: 0; color: var(--pico-color); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; }

/* The card holding the page's form; the page's title is its h1. */
.auth-card { margin: 0 0 var(--pico-spacing); padding: 1.5rem 1.25rem; }
@media (min-width: 576px) { .auth-card { padding: 2rem; } }
.auth-card h1 { margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 1.25; }
.auth-card h1 + .app-message, .auth-card h1 + .auth-error { margin-top: 1rem; }
.auth-lead { margin-bottom: 1.25rem; color: var(--pico-muted-color); }
.auth-lead strong { color: var(--pico-color); font-weight: 600; overflow-wrap: anywhere; }
.auth-card p.auth-muted { margin-bottom: 1rem; color: var(--pico-muted-color); font-size: 0.9375rem; }
.auth-card form { margin: 0; }
.auth-card form > button[type="submit"], .auth-card a[role="button"] { display: block; width: 100%; margin: 0; text-align: center; }
.auth-card input:not([type="checkbox"]) + small { margin-top: calc(var(--pico-spacing) * -0.5); }
.auth-card small { font-size: 0.8125rem; }

/* A refused field: its messages in place of the help, in Pico's error colour. */
.auth-card small.auth-field-error { display: block; color: var(--pico-del-color); }

/* Links under the form: 44 px tap areas, centred. */
.auth-links { display: flex; flex-direction: column; align-items: center; margin: 0.75rem 0 0; font-size: 0.9375rem; }
.auth-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* "Visa lösenord": Pico's switch under the field (password.js). */
.auth-reveal { display: flex; align-items: center; width: fit-content; min-height: 2.75rem; margin: -0.5rem 0 calc(var(--pico-spacing) * 0.75); font-size: 0.9375rem; cursor: pointer; }
.auth-card small ~ .auth-reveal { margin-top: 0.25rem; }

/* An error that blocks (neither warning level): Pico's error colour on the start edge, an icon. */
.auth-error {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 0 0 var(--pico-spacing); padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color); border-inline-start: 4px solid var(--pico-del-color);
  border-radius: var(--pico-border-radius); background: var(--pico-background-color);
}
.auth-error > .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--pico-del-color); vertical-align: 0; }
.auth-error p { margin: 0; font-size: 0.9375rem; }
.auth-error strong { color: var(--pico-del-color); }

/* The address on the invite page: text, not a field. */
.auth-login-as { display: flex; align-items: center; gap: 0.4rem; margin: -0.25rem 0 1.25rem; overflow-wrap: anywhere; }
.auth-login-as .icon { color: var(--pico-muted-color); vertical-align: 0; }
.auth-field-label { display: block; margin-bottom: calc(var(--pico-spacing) * 0.375); }

/* ===== Family page (core/templates/core/family.html; docs/mockups/15-family-page.html) ===== */
.fam-head { margin-bottom: calc(var(--pico-spacing) * 1.25); }

/* Sections: the shopping list's headings (13). */
.fam-section { margin: 0 0 calc(var(--pico-spacing) * 1.5); }
.fam-section-title {
  margin: 0; padding: 0 0.25rem 0.375rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase;
}
.fam-rows { margin: 0; padding: 0; }

/* A row: name, pills and muted lines; ✎ at the right edge, level with the name. */
.fam-row { display: flex; align-items: flex-start; gap: 0.25rem; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--pico-muted-border-color); }
.fam-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.375rem; min-width: 0; min-height: 3rem; padding: 0.625rem 0.25rem; line-height: 1.35; }
.fam-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.fam-name { font-weight: 600; overflow-wrap: anywhere; }
.fam-pill {
  display: inline-flex; align-items: center; padding: 0 0.5rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 1rem;
  color: var(--pico-muted-color); font-size: 0.75rem; font-weight: 500; line-height: 1.4;
}
.fam-pill--admin { border-color: currentColor; color: var(--pico-primary); }
.fam-sub { display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; color: var(--pico-muted-color); font-size: 0.8125rem; line-height: 1.35; }
.fam-sub > span { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; overflow-wrap: anywhere; }
.fam-sub .icon { width: 0.9375rem; height: 0.9375rem; vertical-align: 0; }
.fam-sub .fam-caution { color: var(--app-caution); font-weight: 500; }

/* ✎: as on the shopping list (13) and the check step (14), level with the row's top line. */
button.fam-edit-btn {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin: calc(0.625rem + 1rem * 1.35 / 2 - 1.375rem) -0.5rem 0 0; padding: 0; border-radius: var(--pico-border-radius);
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--pico-muted-color); --pico-box-shadow: none;
}
button.fam-edit-btn:is(:hover, :active, :focus) { --pico-background-color: var(--pico-muted-border-color); --pico-border-color: transparent; --pico-color: var(--app-text); --pico-box-shadow: none; }
button.fam-edit-btn:focus-visible { --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
.fam-edit-btn .icon { width: 1.25rem; height: 1.25rem; vertical-align: 0; }

/* Edit card, in the row's place. */
.fam-row.is-editing { display: block; padding: 0.5rem 0 0.75rem; }
.fam-row.is-editing > .fam-main, .fam-row.is-editing > .fam-edit-btn { display: none; }
/* The new member's row, until "Lägg till medlem" opens it. */
.fam-row.is-editing[hidden] { display: none; }
.fam-edit {
  margin: 0; padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--pico-muted-border-color); border-inline-start: 4px solid var(--pico-primary-background);
  border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
  --pico-form-element-spacing-vertical: 0.5rem; --pico-form-element-spacing-horizontal: 0.75rem;
}
.fam-edit[hidden] { display: none; }
.fam-edit-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.fam-edit input:not([type="radio"]) { height: 2.75rem; }
.fam-edit label, .fam-edit legend { font-size: 0.9375rem; }
.fam-edit small { font-size: 0.8125rem; }
/* Pico pulls the help under a field up with a negative top margin; here the field's own bottom margin sets the gap. */
.fam-edit input:not([type="radio"]) + small { margin-top: 0; }
.fam-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
@media (min-width: 768px) {
  .fam-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Two rows: Namn | Portion, then Behörighet | the e-mail part, so choosing Användare shows the address field on the right. */
  .fam-grid > * { align-self: start; }
  .fam-grid > :first-child { grid-column: 1; grid-row: 1; }
  .fam-grid > .fam-portion { grid-column: 2; grid-row: 1; }
  .fam-grid > .fam-level { grid-column: 1; grid-row: 2; }
  .fam-grid > :is(.fam-login, .fam-invite-mail) { grid-column: 2; grid-row: 2; }
}

/* Switches (portion, level): like the theme menu's, filled with the area colour. */
/* As tall as a text field (2.75rem, border included). The options fill it edge to edge, so each tap area keeps the full
   height; the chosen one's fill is inset 3 px by a shadow in the field colour, so it still reads as a pill inside a box. */
.fam-switch {
  display: grid; grid-template-columns: repeat(3, 1fr); box-sizing: border-box; height: 2.75rem; padding: 0; overflow: hidden;
  border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius); background: var(--pico-form-element-background-color);
}
.fam-switch label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; margin: 0; padding: 0 0.25rem; border-radius: var(--pico-border-radius);
  color: var(--pico-muted-color); font-size: 0.875rem; line-height: 1.15; text-align: center; cursor: pointer;
}
.fam-switch label:has(input:checked) { box-shadow: inset 0 0 0 3px var(--pico-form-element-background-color); }
.fam-switch label span { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.fam-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.fam-switch label:has(input:checked) { background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 600; }
/* Focus ring drawn inside, since the box clips anything outside it. */
.fam-switch label:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--pico-primary-focus); }
.fam-switch label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.fam-portion, .fam-level { margin: 0 0 var(--pico-spacing); padding: 0; border: 0; }
.fam-portion legend, .fam-level legend { margin-bottom: 0.375rem; padding: 0; }
.fam-portion-other { display: none; margin-top: 0.5rem; }
.fam-portion:has(input[value="other"]:checked) .fam-portion-other { display: block; }
.fam-portion-other input { max-width: 8rem; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.fam-portion > small, .fam-level > small { display: block; margin-top: 0.375rem; color: var(--pico-muted-color); }
/* A save the server refused for the level, such as the last admin's. */
.fam-level > small.fam-error { color: var(--pico-del-color); }

/* The invite address shows when the level gives a login (CSS only); its own grid item, right of Behörighet from 768 px. */
.fam-invite-mail { display: none; margin-bottom: var(--pico-spacing); }
.fam-edit:has(.fam-level input[value="user"]:checked, .fam-level input[value="admin"]:checked) .fam-invite-mail { display: block; }
.fam-invite-mail input { margin-bottom: 0.5rem; }
.fam-invite-mail small { display: block; color: var(--pico-muted-color); }
.fam-invite-mail small[aria-live] { color: var(--pico-del-color); }

/* Login part: the address as a field or as text, its status and its buttons. */
.fam-login { margin-bottom: var(--pico-spacing); }
.fam-login-label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; }
.fam-login-text { margin: 0 0 0.5rem; }
/* Another user's name, in an admin's card: text, not a field (theirs to change). */
.fam-name-locked { display: flex; align-items: center; min-height: 2.75rem; margin: 0 0 var(--pico-spacing); }
.fam-login-address { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.fam-login-address .icon { color: var(--pico-muted-color); vertical-align: 0; }
.fam-login input { margin-bottom: 0.5rem; }
.fam-login small { display: block; margin-bottom: 0.5rem; color: var(--pico-muted-color); }
.fam-login small.fam-caution { display: flex; align-items: flex-start; gap: 0.375rem; color: var(--app-caution); font-weight: 500; }
.fam-login small.fam-caution .icon { width: 1rem; height: 1rem; margin-top: 0.05em; vertical-align: 0; }
.fam-login button { width: auto; min-height: 2.75rem; margin: 0; padding: 0.375rem 1rem; font-size: 0.9375rem; }
.fam-login button + .fam-login-text { margin-top: 0.75rem; }
/* Login part of an admin's card: hidden while the level switch is on "Ingen inloggning". */
.fam-edit:has(.fam-level input[value="none"]:checked) .fam-login--gated { display: none; }

.fam-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.fam-edit-actions button { width: auto; min-height: 2.75rem; margin: 0; padding: 0.375rem 1rem; font-size: 0.9375rem; }
.fam-edit-actions .fam-delete { margin-inline-start: auto; }

/* Under the members: "Lägg till medlem" for admins, a muted line for users. */
.fam-add { margin-top: 0.75rem; }
.fam-add[hidden] { display: none; }
button.fam-add { width: auto; }
.fam-readonly { margin: 0.75rem 0 0; padding: 0 0.25rem; color: var(--pico-muted-color); font-size: 0.875rem; }
.fam-readonly[hidden] { display: none; }

/* Deleting the household: its own section at the bottom, admins only. */
.fam-danger[hidden] { display: none; }
.fam-danger p { margin: 0.625rem 0 0.75rem; padding: 0 0.25rem; color: var(--pico-muted-color); font-size: 0.875rem; }
.fam-danger button { width: auto; }
.fam-danger-dialog h2 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.fam-danger-dialog p { margin-bottom: 0.75rem; }
.fam-danger-dialog label { font-size: 0.9375rem; }
.fam-danger-dialog input { margin-bottom: 0; }
/* The footer sits inside the form, so Pico's article footer styles don't reach it: spacing set here. */
.fam-danger-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: calc(var(--pico-spacing) * 1.5); }
.fam-danger-dialog footer button { width: auto; margin: 0; }