/* theme: manual light/dark (html.theme-light / html.theme-dark) */
:root {
  --green-900: #123c32;
  --green-700: #1b6e5b;
  --green-600: #21876f;
  --green-100: #e3f3ee;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --text: #17221d;
  --muted: #5d6b64;
  --border: #e1e8e4;
  --danger: #c0392b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(18,60,50,.06), 0 6px 20px rgba(18,60,50,.06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    --bg: #101513;
    --surface: #1a2320;
    --text: #eef3f0;
    --muted: #9db3ab;
    --border: #2a3733;
    --green-100: #163229;
    color-scheme: dark;
  }
}
html.theme-dark {
    --bg: #101513;
    --surface: #1a2320;
    --text: #eef3f0;
    --muted: #9db3ab;
    --border: #2a3733;
    --green-100: #163229;
    color-scheme: dark;
  }


* { box-sizing: border-box; }

/* The `hidden` attribute must always win over any `display` a class
   sets on the same element (e.g. .sheet's display:flex, .btn's
   display:inline-flex) — otherwise elements toggled via `hidden` in
   JS/PHP stay visible regardless of that toggle. */
[hidden] { display: none !important; }

.lang-switch { position: relative; }
.lang-switch.fixed-corner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 45;
}
.lang-switch .icon-btn { font-size: 1.25rem; }


html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  position: relative;
}

.wrap.narrow {
  max-width: 400px;
  padding-top: 15vh;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.app-header h1 { font-size: 1.4rem; margin: 0; }

.logo { border-radius: 10px; }

.lead { color: var(--muted); line-height: 1.5; margin: 0 0 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card h1 { margin-top: 0; font-size: 1.3rem; }

label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--muted);
}
label:first-of-type { margin-top: 0; }

.muted { color: var(--muted); }
.small { font-size: .82rem; }

input[type="text"], input[type="search"] {
  width: 100%;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
input:focus { outline: 2px solid var(--green-600); outline-offset: 1px; }

.hint { font-size: .8rem; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn.primary {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  width: 100%;
  margin-top: 18px;
}

.mylists-hero-btn {
  margin-top: 0;
  margin-bottom: 20px;
  text-decoration: none;
  gap: 10px;
}
.mylists-hero-icon { flex: 0 0 auto; }
.mylists-hero-label { flex: 1; text-align: left; font-size: 1.05rem; }
.mylists-hero-count {
  flex: 0 0 auto;
  background: rgba(255,255,255,.22);
  color: #fff;
  border-radius: 999px;
  min-width: 26px;
  padding: 3px 9px;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
}
.btn.primary:active { background: var(--green-900); }
.btn:disabled { opacity: .6; cursor: default; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.icon-btn:hover { background: var(--green-100); }
/* The SVG child must never intercept the tap/click itself — on touch
   devices especially, hit-testing an SVG's actual painted shapes (here,
   three small stroked circles with lots of transparent space between
   them) can behave inconsistently, silently shifting the effective
   clickable spot away from where the icon visually sits. Forcing every
   click straight through to the parent <button> fixes this for good. */
.icon-btn svg { pointer-events: none; }

.error {
  color: var(--danger);
  font-size: .88rem;
  margin: 12px 0 0;
}

.foot { margin-top: 28px; text-align: center; }
.foot p { color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* ---- list page ---- */

.list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.list-header h1 { font-size: 1.4rem; margin: 0 0 2px; cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.list-header h1:hover, .list-header h1:focus { background: var(--green-100); outline: none; }
.title-edit-input {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: inherit;
  margin: 0 0 2px -6px;
  padding: 2px 6px;
  border: 1px solid var(--green-600);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  max-width: 320px;
}

.add-card { margin-bottom: 22px; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* input.item-name-input (element+class) matches input[type="text"]'s
   specificity exactly; being later in the file, it then wins ties. More
   importantly, flex-basis is 0 (not auto), so the flex algorithm never
   consults `width` at all for sizing — no specificity fight to lose. */
input.item-name-input { flex: 1 1 100%; min-width: 0; width: auto; }
select.qty-input {
  width: 72px;
  flex: 1 1 72px;
  min-width: 0;
  font-size: 1rem;
  padding: 12px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
input.qty-input { width: 72px; flex: 1 1 72px; min-width: 0; }
.add-row .btn { flex: 2 1 auto; margin-top: 0; padding: 12px 18px; white-space: nowrap; }

/* On the narrowest phones there isn't room for name + qty + button on
   one line without squeezing the button. Put the name field on its own
   full-width row, with qty and Add sharing the row underneath. */
@media (min-width: 380px) {
  input.item-name-input { flex: 3 1 0; min-width: 120px; }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--muted);
  margin: 22px 0 8px;
}

.pill {
  background: var(--green-100);
  color: var(--green-700);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .78rem;
  font-weight: 700;
}

.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.category-select {
  width: 100%;
  margin-top: 8px;
  font-size: .9rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.category-group + .category-group { margin-top: 16px; }
.category-group-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  margin: 0 0 8px 2px;
}
/* A recipe's group: its name and "Remove recipe" on one line */
.category-group-title.has-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.category-group-title.has-action > span { min-width: 0; overflow-wrap: anywhere; }
.recipe-remove {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.recipe-remove:disabled { opacity: .5; cursor: default; }

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.item.editing { align-items: flex-start; }
.item-edit-form { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.item-edit-form .add-row { gap: 8px; }
.edit-actions { display: flex; gap: 4px; flex: 0 0 auto; }

.item-check { position: relative; display: inline-flex; cursor: pointer; }
.item-check input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; cursor: pointer; }
.checkmark {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.item-check input:checked + .checkmark {
  background: var(--green-700);
  border-color: var(--green-700);
}
.item-check input:checked + .checkmark::after {
  content: "";
  width: 7px; height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px,-1px);
}

.item-body { flex: 1; min-width: 0; }
.item-name { font-size: 1rem; word-break: break-word; }
.item-meta { margin-top: 2px; }
.item-shop-link { color: var(--green-700); }

.item.bought .item-name { text-decoration: line-through; color: var(--muted); }

.item-delete { flex: 0 0 auto; width: 34px; height: 34px; color: var(--muted); }
.item-delete:hover { color: var(--danger); }

.empty-state { text-align: center; margin-top: 30px; }

.header-actions {
  display: flex; gap: 8px; flex: 0 0 auto;
  position: relative;
  z-index: 50; /* stays above any lower page content in edge cases */
}

.menu {
  position: absolute;
  right: 16px;
  top: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
  min-width: 200px;
}
.menu button, .menu a {
  background: none;
  border: none;
  text-align: left;
  padding: 12px 16px;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  display: block;
}
.menu button:last-child, .menu a:last-child { border-bottom: none; }
.menu button.danger { color: var(--danger); }
.menu button:hover, .menu a:hover { background: var(--green-100); }
.menu .menu-sep { flex: none; height: 6px; margin: 0; border: 0; background: var(--bg); }
.menu .menu-sep-danger { height: 0; margin: 8px 12px; background: none; border-top: 2px dotted var(--muted); }
.menu button:has(+ .menu-sep), .menu a:has(+ .menu-sep) { border-bottom: none; }

/* ---- message board ---- */

.messages-card { margin-top: 24px; }
.messages-card .hint { margin-bottom: 14px; }

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 2px;
}

.message {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.message.seen { opacity: .62; }
.message-body { font-size: .95rem; line-height: 1.4; word-break: break-word; }
.message-meta { margin-top: 4px; }
.message-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.msg-seen-btn {
  background: none; border: none; padding: 0;
  font-size: .78rem; font-weight: 600;
  color: var(--green-700); cursor: pointer;
}
.message-actions .msg-delete { width: 28px; height: 28px; color: var(--muted); margin-left: auto; }
.message-actions .msg-delete:hover { color: var(--danger); }

.emoji-row { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.emoji-btn {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
}
.emoji-btn:hover { background: var(--green-100); }

.message-form { display: flex; flex-direction: column; }
.message-form .add-row { margin-top: 0; }

/* ---- QR scanner ---- */

.scan-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}
.scan-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scan-video-wrap::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 16px;
  pointer-events: none;
}
.scan-result-text {
  font-size: .95rem;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 14px;
}

/* ---- share sheet ---- */

.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 999;
}
.sheet-inner {
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 480px;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  max-height: 86vh;
  overflow-y: auto;
}
.close-sheet { position: absolute; top: 10px; right: 10px; font-size: 1.4rem; }
.sheet-inner h2 { margin-top: 0; }

.qr-holder {
  display: flex; justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.qr-holder svg { width: 200px; height: 200px; max-width: 100%; }

.share-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.share-buttons .btn { flex-direction: column; font-size: .8rem; padding: 12px 6px; gap: 4px; }

.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; font-size: .82rem; }
.copy-row .btn { margin-top: 0; }

#install-btn { width: 100%; margin-top: 16px; }

/* ---- category row (select + manage button) ---- */
.category-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.category-row .category-select { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.category-row .icon-btn { flex: 0 0 auto; }

/* ---- category manager sheet ---- */
#categories-sheet .add-row { margin-top: 12px; }
.category-manager { margin: 14px 0; }
#category-restore { width: 100%; }

/* ---- the list's options menu is now long (9 entries): let it scroll on short screens ---- */
#options-menu { max-height: calc(100vh - 100px); overflow-y: auto; }

/* ---- About page ---- */
.about-body { line-height: 1.65; }
.about-body h2 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
.about-body h2:first-child { margin-top: 0; }
.about-body p { margin: 0 0 1em; overflow-wrap: anywhere; }
.about-body p:last-child { margin-bottom: 0; }
.about-body a { color: var(--green-700); }

/* ---- "save your link / install the app" card on My Lists ---- */
.tip-card { margin: 18px 0; border-color: var(--green-600); }
.tip-title { margin: 0 0 6px; font-size: 1.05rem; }
.tip-card .copy-row { margin: 12px 0 10px; }
.tip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-actions .btn { flex: 1 1 auto; width: auto; margin-top: 0; }
.link-btn {
  background: none; border: none; padding: 8px 0 0;
  color: var(--muted); font-size: .85rem; text-decoration: underline; cursor: pointer;
}

/* ---- centred confirmation dialog (reuses the .sheet overlay) ---- */
.sheet.sheet-center { align-items: center; padding: 20px; }
.sheet.sheet-center .sheet-inner { border-radius: 16px; max-width: 380px; padding: 24px 22px 22px; }
.sheet.sheet-center h2 { margin: 0 0 8px; font-size: 1.15rem; }
.confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.confirm-actions .btn { flex: 1 1 0; width: auto; margin-top: 0; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- brand logo (welcome + About pages) ---- */
.brand { text-align: center; margin: 6px 0 22px; }
.brand h1 { margin: 0; line-height: 0; }           /* the logo image is the page heading */
.brand-plate { display: inline-block; line-height: 0; }
.brand-logo { display: block; width: min(100%, 300px); height: auto; }
.brand-tagline { margin: 10px 0 0; color: var(--muted); font-size: .95rem; }
.brand-compact { margin-bottom: 14px; }
.brand-compact .brand-logo { width: min(100%, 210px); }
.page-title { font-size: 1.4rem; margin: 0 0 14px; }
/* The wordmark is dark green, so on a dark page it sits on a light plate. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .brand-plate { background: #f4f7f5; border-radius: 14px; padding: 10px 16px; }
}
html.theme-dark .brand-plate { background: #f4f7f5; border-radius: 14px; padding: 10px 16px; }


/* ---- language menu: 13 languages now. .menu's overflow:hidden (above)
   used to win over .lang-menu's scrolling, cutting off the last ones on
   short screens; tighter rows so they usually all fit without scrolling. ---- */
/* ---- language pop-up (src/i18n.php render_language_switcher, lang-switch.js):
   the phone's own languages first, then A-Z in two or three columns, with a search box. ---- */
.lang-dialog { width: min(600px, calc(100vw - 24px)); }
.lang-search { padding: 12px 16px 4px; }
.lang-search input { width: 100%; box-sizing: border-box; margin: 0; font-size: 1rem; }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) { .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lang-dialog .lang-grid a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; }
.lang-dialog .lang-grid a:hover { background: var(--green-100); }
.lang-dialog .lang-grid a.active { background: var(--green-100); border-color: var(--green-700, #1f6f5c); font-weight: 700; }
.lang-grid a[hidden] { display: none; }
.lang-flag { font-size: 1.35rem; line-height: 1; flex: none; }
.lang-names { display: flex; flex-direction: column; min-width: 0; }
.lang-name, .lang-sub { overflow-wrap: anywhere; }
.lang-sub { color: var(--muted); font-size: .8rem; font-weight: 400; }
.lang-divider { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 4px 0; }
.lang-divider[hidden] { display: none; }

/* ---- footer on every page: notices + copyright (src/legal.php) ---- */
.site-legal { text-align: center; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); color: var(--muted); font-size: .8rem; line-height: 1.6; }
.site-legal p { margin: 0 0 4px; }
.site-legal a { color: var(--muted); }
.site-legal-links span { margin: 0 6px; }
body.has-cookie-banner .site-legal { padding-bottom: 170px; }

.legal-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(86vh, 900px); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog::backdrop { background: rgba(10, 30, 25, .45); }
.legal-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--border); }
.legal-dialog-head h2 { margin: 0; font-size: 1.15rem; }
.legal-dialog-head .icon-btn { font-size: 1.6rem; line-height: 1; }
.legal-body { overflow-y: auto; padding: 6px 20px 20px; -webkit-overflow-scrolling: touch; }
.legal-body h2, .legal-body h3 { font-size: 1rem; margin: 20px 0 6px; }
.legal-body p, .legal-body li { font-size: .92rem; line-height: 1.55; }
.legal-body p { margin: 0 0 10px; }
.legal-body ul { margin: 0 0 10px; padding-left: 20px; }
.legal-body li { margin-bottom: 4px; }
.legal-body a { color: var(--green-700); }
.legal-updated { color: var(--muted); font-size: .82rem !important; margin-top: 8px !important; }
.legal-table-wrap { overflow-x: auto; margin: 4px 0 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--border); }
.legal-table th { font-weight: 700; white-space: nowrap; }
.legal-table td:first-child { white-space: nowrap; }
.legal-table code { font-size: .82rem; }
@media (max-width: 560px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; }
  .legal-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .legal-table td { border: 0; padding: 2px 0; white-space: normal; }
  .legal-table td:first-child { font-weight: 700; }
  .legal-table td[data-label] { color: var(--muted); }
  .legal-table td[data-label]::before { content: attr(data-label) ": "; }
}

.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 30px rgba(10, 30, 25, .18); padding: 14px 16px; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.cookie-banner-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-banner-actions .btn { width: auto; margin: 0; padding: 8px 16px; text-decoration: none; }

/* stand-alone privacy.php / cookies.php */
.legal-page .legal-body { padding: 0; overflow: visible; }
.legal-page h1 { margin-top: 0; }

/* "Check the label or E-numbers" under an item being edited, and the food tool links on My Lists */
.item-check-label { display: inline-block; margin-top: 8px; font-size: .88rem; color: var(--green-700); }
.food-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 18px 0 6px; }
.food-links a { color: var(--green-700); font-weight: 600; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .item-check-label, html:not(.theme-light) .item-shop-link, html:not(.theme-light) .food-links a { color: #7fd1b8; } }
html.theme-dark .item-check-label, html.theme-dark .item-shop-link, html.theme-dark .food-links a { color: #7fd1b8; }

.legal-body p.legal-credits { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }

/* Contact and newsletter forms */
.mail-form input[type="email"], .mail-form input[type="text"], .mail-form textarea, .nl-box input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.mail-form textarea { resize: vertical; min-height: 9em; line-height: 1.45; }
.mail-form textarea:focus, .mail-form input:focus, .nl-box input:focus { outline: 2px solid var(--green-600); outline-offset: 1px; }
.mail-form .btn.primary { margin-top: 16px; }
.mail-form form + p, .mail-form .lead { line-height: 1.5; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Voice control (voice.js): microphone buttons and what was heard ---- */
.add-row .mic-btn { flex: 0 0 44px; width: 44px; height: 44px; align-self: center;
  border: 1px solid var(--border); color: var(--green-700); }
.mic-btn.listening { background: var(--danger); border-color: var(--danger); color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite; }
.mic-btn.listening:hover { background: var(--danger); }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); }
  50% { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .mic-btn.listening { animation: none; } }
.voice-status { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--green-100); color: var(--text); line-height: 1.4; }

/* ---- Works without signal (offline.js) ---- */
.offline-note { margin: 10px 0 0; padding: 8px 12px 8px 34px; border-radius: 10px; position: relative;
  background: #fff6dc; color: #5b4500; line-height: 1.4; font-size: .93rem; }
.offline-note::before { content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px;
  margin-top: -5px; border-radius: 50%; background: #e0a100; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .offline-note { background: #3a2f10; color: #f5dd9a; }
}
html.theme-dark .offline-note { background: #3a2f10; color: #f5dd9a; }

/* An item changed on this device and not sent yet: a dotted edge. */
.item.pending { border-style: dashed; }
.off-lists { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.off-lists li { display: flex; flex-direction: column; gap: 4px; }
.off-lists .btn { justify-content: flex-start; text-decoration: none; }

/* ---- Recipe to list (recipe.js) ---- */
.recipe-input { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); resize: vertical;
  min-height: 9em; line-height: 1.45; margin: 4px 0 12px; display: block; }
.recipe-input:focus { outline: 2px solid var(--green-600); outline-offset: 1px; }
.recipe-name { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-weight: 600; font-size: .9rem; }
.recipe-name input { font: inherit; font-weight: 400; font-size: 1rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 100%; }
.recipe-servings { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.recipe-servings span { margin-right: auto; font-weight: 600; }
.recipe-servings .icon-btn { width: 40px; height: 40px; border: 1px solid var(--border); font-size: 1.3rem; }
.recipe-servings output { min-width: 2.2em; text-align: center; font-weight: 700; font-size: 1.1rem; }
.recipe-items { list-style: none; margin: 0 0 6px; padding: 0; }
.recipe-items li { border-top: 1px solid var(--border); }
.recipe-items label { color: var(--text); font-size: 1rem; font-weight: 400; display: flex; align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; }
.recipe-items input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--green-700); }
.recipe-items .r-name { flex: 1 1 auto; }
.recipe-items .r-qty { color: var(--muted); white-space: nowrap; }
.recipe-items li.off .r-name { color: var(--muted); }
.recipe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- Right-to-left languages (Arabic): <html dir="rtl">. Flex and grid rows flip by
   themselves; these mirror the few rules that name a side. ---- */
[dir="rtl"] .lang-switch.fixed-corner { right: auto; left: 10px; }
[dir="rtl"] .menu { right: auto; left: 16px; }
[dir="rtl"] .menu button, [dir="rtl"] .menu a, [dir="rtl"] .mylists-hero-label,
[dir="rtl"] .legal-table th, [dir="rtl"] .legal-table td { text-align: right; }
[dir="rtl"] .list-header h1 { margin-left: 0; margin-right: -6px; }
[dir="rtl"] .messages-list { padding-right: 0; padding-left: 2px; }
[dir="rtl"] .title-edit-input { margin: 0 -6px 2px 0; }
[dir="rtl"] .category-group-title { margin: 0 2px 8px 0; }
[dir="rtl"] .message-actions .msg-delete { margin-left: 0; margin-right: auto; }
[dir="rtl"] .close-sheet { right: auto; left: 10px; }
[dir="rtl"] .legal-dialog-head { padding: 14px 20px 10px 14px; }
[dir="rtl"] .legal-body ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .legal-table th, [dir="rtl"] .legal-table td { padding: 8px 0 8px 8px; }
[dir="rtl"] .offline-note { padding: 8px 34px 8px 12px; }
[dir="rtl"] .offline-note::before { left: auto; right: 13px; }
[dir="rtl"] .recipe-servings span { margin-right: 0; margin-left: auto; }
/* Arabic script needs a little more line height and no letter spacing. */
[dir="rtl"] body { line-height: 1.6; letter-spacing: 0; }

/* ---- Easier to read (src/i18n.php a11y_html_attr, assets/js/a11y.js) ----
   Text sizes are in rem, so a bigger root size makes all text bigger while
   the layout stays the same. Stronger contrast darkens grey text and lines
   and underlines links; it also follows the phone's own "increase contrast". */
html.a11y-s2 { font-size: 112.5%; }
html.a11y-s3 { font-size: 125%; }
.menu { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }
html.a11y-hc {
  --text: #000;
  --muted: #2b3631;
  --border: #6b7a73;
  --green-700: #145545;
}
html.a11y-hc a:not(.btn):not(.icon-btn):not(.brand-plate):not(.store-badge) { text-decoration: underline; }
html.a11y-hc .btn, html.a11y-hc .icon-btn, html.a11y-hc input, html.a11y-hc select, html.a11y-hc textarea { border-color: var(--text); }
html.a11y-hc :focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (prefers-contrast: more) {
  :root { --muted: #2b3631; --border: #6b7a73; }
}
@media (prefers-color-scheme: dark) {
  html.a11y-hc:not(.theme-light) { --text: #fff; --muted: #d6e3de; --border: #8fa39b; --green-700: #1b6e5b; }
  @media (prefers-contrast: more) { html:not(.theme-light) { --muted: #d6e3de; --border: #8fa39b; } }
}
html.a11y-hc.theme-dark { --text: #fff; --muted: #d6e3de; --border: #8fa39b; --green-700: #1b6e5b; }
  @media (prefers-contrast: more) { html.theme-dark { --muted: #d6e3de; --border: #8fa39b; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.a11y-dialog .legal-body { padding-top: 10px; }
.a11y-dialog fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.a11y-dialog legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.a11y-sizes { display: flex; gap: 8px; }
.a11y-sizes label { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: center; font-size: .85rem; }
.a11y-sizes label:has(input:checked) { border: 2px solid var(--green-700); background: var(--green-100); font-weight: 700; }
.a11y-sizes input { position: absolute; opacity: 0; pointer-events: none; }
.a11y-sizes label:has(input:focus-visible) { outline: 3px solid var(--green-600); outline-offset: 2px; }
.a11y-sizes .a11y-aa { font-weight: 700; line-height: 1.1; }
.a11y-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.a11y-toggle input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--green-700); }
.a11y-toggle span { display: block; }
.a11y-dialog .btn.primary { width: 100%; justify-content: center; }
.a11y-reading { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--green-700); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.25); cursor: pointer; }
.a11y-reading::before { content: ""; width: 12px; height: 12px; background: #fff; border-radius: 2px; }
.a11y-aa1 { font-size: 1.05rem; } .a11y-aa2 { font-size: 1.3rem; } .a11y-aa3 { font-size: 1.55rem; }
.site-legal .link-btn.site-legal-access { color: var(--muted); font-size: inherit; padding: 0; text-decoration: underline; }
/* Bigger text on narrow phones: let long titles break and rows wrap instead of running off the screen. */
html.a11y-s2 .list-header > :first-child, html.a11y-s3 .list-header > :first-child { min-width: 0; flex: 1 1 auto; }
html.a11y-s2 .list-header h1, html.a11y-s3 .list-header h1 { overflow-wrap: anywhere; }
html.a11y-s2 input, html.a11y-s2 select, html.a11y-s3 input, html.a11y-s3 select { min-width: 0; max-width: 100%; }
@media (max-width: 400px) {
  html.a11y-s2 .header-actions, html.a11y-s3 .header-actions { gap: 0; }
  html.a11y-s2 .home-top-inner, html.a11y-s3 .home-top-inner { flex-wrap: wrap; }
  html.a11y-s2 .home-nav, html.a11y-s3 .home-nav { flex-wrap: wrap; }
}
html.a11y-s2 body, html.a11y-s3 body { overflow-wrap: break-word; hyphens: auto; }

/* ---- Use it in time: best-before dates (assets/js/fresh.js) ---- */
.item-fresh { color: var(--muted); }
.item-fresh.has-date { color: var(--green-700); }
.fresh-date { white-space: nowrap; }
.fresh-soon { color: #9a5b00; font-weight: 700; }
.fresh-past { color: var(--danger); font-weight: 700; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .fresh-soon { color: #f0b54a; } html:not(.theme-light) .item-fresh.has-date { color: #6cc9ae; } }
html.theme-dark .fresh-soon { color: #f0b54a; } html.theme-dark .item-fresh.has-date { color: #6cc9ae; }

.fresh-card { border-color: #e7c27a; background: color-mix(in srgb, #f6b73c 10%, var(--surface)); padding: 14px 16px; }
.fresh-card-title { margin: 0 0 8px; font-size: 1rem; }
.fresh-list { list-style: none; margin: 0; padding: 0; }
.fresh-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.fresh-list li:first-child { border-top: 0; padding-top: 2px; }
.fresh-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fresh-text strong { font-weight: 600; overflow-wrap: anywhere; }
.fresh-text .fresh-date { font-size: .85rem; white-space: normal; }
.fresh-used { flex: 0 0 auto; padding: 8px 14px; font-size: .9rem; }
.fresh-sheet h2 { padding-right: 34px; overflow-wrap: anywhere; }
.fresh-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.fresh-chips .btn { justify-content: center; margin: 0; }
.fresh-pick { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
.fresh-pick input { width: 100%; }
.fresh-clear { display: block; margin-top: 12px; }
[dir="rtl"] .fresh-sheet h2 { padding-right: 0; padding-left: 34px; }
.fresh-pick input { padding: 10px 12px; font: inherit; font-size: 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

/* ---- Costs and budget (assets/js/money.js) ---- */
.budget-line { margin: 2px 0 0; color: var(--muted); }
.budget-line.near { color: #9a5b00; font-weight: 700; }
.budget-line.over, .money-over { color: var(--danger); font-weight: 700; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .budget-line.near { color: #f0b54a; } }
html.theme-dark .budget-line.near { color: #f0b54a; }

.money-inner h2 { padding-right: 34px; }
.money-inner h3 { font-size: 1rem; margin: 0 0 8px; }
.money-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.money-month strong { text-transform: capitalize; }
.money-month .icon-btn { font-size: 1.6rem; line-height: 1; }
.money-month .icon-btn:disabled { opacity: .3; cursor: default; }
.money-total { margin-bottom: 16px; }
.money-spent { font-size: 1.6rem; font-weight: 800; }
.money-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 8px 0 4px; }
.money-bar span { display: block; height: 100%; background: var(--green-700); border-radius: 999px; }
.money-bar.near span { background: #d48a00; }
.money-bar.over span { background: var(--danger); }
.money-total p { margin: 2px 0 0; }
.money-form { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 8px; }
.money-row { display: flex; gap: 10px; }
.money-row .money-field { flex: 1 1 0; min-width: 0; }
.money-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.money-field input, .money-field select { width: 100%; font-size: 1rem; font-weight: 400; color: var(--text); }
.money-field select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); font: inherit; font-size: 1rem; }
.money-form .btn { width: 100%; justify-content: center; }
.money-receipts { list-style: none; margin: 10px 0 0; padding: 0; }
.money-receipts li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.money-r-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.money-r-text strong { font-weight: 600; overflow-wrap: anywhere; }
.money-r-amount { font-weight: 700; white-space: nowrap; }
.money-split { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 12px; }
.money-split p { margin: 0 0 6px; }
.money-people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.money-person { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .92rem; }
.money-person:has(input:checked) { border-color: var(--green-700); background: var(--green-100); }
.money-person input { accent-color: var(--green-700); width: 18px; height: 18px; margin: 0; }
.money-settle { list-style: none; margin: 0; padding: 0; }
.money-settle li { padding: 6px 0; font-weight: 600; }
.money-settings { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.money-settings summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.money-settings form { margin-top: 10px; }
.money-settings .btn { width: 100%; justify-content: center; }
[dir="rtl"] .money-inner h2 { padding-right: 0; padding-left: 34px; }

/* ---- Allergy and diet warnings (assets/js/allergy.js) ---- */
.item-allergy { color: #9a5b00; font-weight: 600; margin-top: 2px; }
.item-allergy::before { content: "⚠\FE0E  "; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .item-allergy { color: #f0b54a; } }
html.theme-dark .item-allergy { color: #f0b54a; }

.allergy-inner { max-height: 90vh; overflow-y: auto; }
.allergy-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; margin: 12px 0 16px; }
.allergy-choices .allergy-choice { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 0; font-size: .95rem; font-weight: 400; color: var(--text); cursor: pointer; }
.allergy-choice input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }

/* ---- Regular items (assets/js/regulars.js) ---- */
.regulars-inner { max-height: 90vh; overflow-y: auto; }
.regulars-list { list-style: none; margin: 12px 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.regulars-list li { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-top: 1px solid var(--border); }
.regulars-list li:first-child { border-top: 0; }
.regulars-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.regulars-status { min-height: 1.2em; margin: 6px 0 0; color: var(--green-700); font-weight: 600; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .regulars-status { color: #6cc9ae; } }
html.theme-dark .regulars-status { color: #6cc9ae; }

.regulars-save { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.regulars-save .muted { margin: 6px 0 0; }
.regulars-auto { margin-top: 14px; }
.regulars-auto summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.regulars-next-line { margin: 8px 0 0; font-weight: 600; }
.money-row .money-field { margin-top: 0; }

/* Colours chosen by hand in "Easier to read": Automatic, Light or Dark. */
html.theme-light { color-scheme: light; }
.a11y-swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); margin-bottom: 4px; }
.a11y-swatch-a { background: linear-gradient(135deg, #f4f7f5 50%, #101513 50%); }
.a11y-swatch-l { background: #f4f7f5; }
.a11y-swatch-d { background: #101513; }

/* ---- My Lists as cards (me.php, me.js): bigger, with what is still to buy, a preview and a ☆ pin ---- */
.mylist-cards { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .mylist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mylist-card { position: relative; border: 1px solid color-mix(in srgb, var(--green-700) 30%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--green-700) 6%, var(--surface)); box-shadow: var(--shadow); }
.mylist-card.is-pinned { border-color: var(--green-700); }
.mylist-card:hover { background: color-mix(in srgb, var(--green-700) 11%, var(--surface)); }
.mylist-open { display: flex; flex-direction: column; gap: 4px; padding: 14px 54px 14px 16px; color: var(--text); text-decoration: none; border-radius: 14px; min-height: 64px; }
.mylist-title { font-size: 1.2rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.mylist-todo { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--green-700); color: #fff; font-weight: 700; font-size: .85rem; }
.mylist-todo.is-empty { background: var(--green-100); color: var(--muted); }
.mylist-preview { color: var(--text); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mylist-meta { color: var(--muted); font-size: .8rem; }
.mylist-pin { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.mylist-pin[aria-pressed="true"] { color: #c98a00; }
.mylist-pin:hover { background: var(--green-100); }
[dir="rtl"] .mylist-open { padding: 14px 16px 14px 54px; }
[dir="rtl"] .mylist-pin { right: auto; left: 6px; }