/* Dalleth field notebook: calm, editorial, phone-first. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-500.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/cormorant-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-italic-500.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/source-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-italic-400.woff2) format("woff2"); }

/* THEME: brand colours. Defaults = the Dalleth look. A client build overrides these in css/theme.css
   (from clients/<id>/client.json "theme"). Danger/safety colours further down are fixed on purpose. */
:root {
  --brand: #1E3A5F;          /* woad: headings, links, buttons, active states */
  --brand-2: #2F527D;        /* lighter brand: eyebrows, secondary text */
  --brand-wash: #E4E8EE;     /* pale brand tint backgrounds */
  --brand-rule: #A3B1C1;     /* brand-tinted borders and dashed outlines */
  --brand-ink: #fff;         /* text/icons on a brand background */
  --brand-ink-soft: #D6DEE9; /* small text on a brand background */
  --brand-ink-2: #E9EEF5;    /* body text in brand boxes (rules box) */
  --bg: #F5EFE6;             /* page background (cream) */
  --bg-glass: rgba(245, 239, 230, .94); /* top bar (page background, translucent) */
  --card: #FDFBF6;           /* cards and panels (paper) */
  --card-veil: rgba(253, 251, 246, .55);
  --card-veil-2: rgba(253, 251, 246, .5);
  --field: #fff;             /* inputs and chips */
  --ink: #3B2117;            /* body text */
  --ink-2: #5A4A40;
  --mute: #777875;
  --faint: #9A958E;
  --faint-2: #A9A49C;
  --faint-3: #A09A91;
  --rule: #D9D0C2;           /* borders */
  --wash: #F7F3EC;           /* callout / reference box backgrounds */
  --wash-2: #EFE8DC;         /* off month cells */
  --hatch: #F7F2EA;          /* image placeholder stripes */
  --hatch-2: #F2ECE2;
  --accent: #9A5A14;         /* legend / highlight accent */
  --accent-wash: #F6EAD8;
  --warn: #8B3A3A;
  --warn-wash: #F6E4E0;
  --warn-rule: #D7B3AD;
  --warn-ink: #5B2A24;
  --warn-on-brand: #FFD9D2;
  --chef: #5E6B3A;
  --chef-rule: #B9C09A;
  --chef-wash: #F1F2E6;
  /* In season category bands (white label on the colour; each >= 4.5:1 with #fff, WCAG AA) */
  --cat-ink: #FFFFFF;        /* label text on a category band */
  --cat-veg: #52794A;        /* vegetables: sage/leaf green */
  --cat-fruit: #7A4E7E;      /* fruit: plum/damson */
  --cat-meat: #A2423A;       /* meat: brick red */
  --cat-game: #85663F;       /* game: earthy brown */
  --cat-fish: #3F6E9A;       /* fish: deep slate blue */
  --cat-shellfish: #377A86;  /* shellfish: sea teal */
  --cat-fungi: #7A6A5B;      /* fungi: mushroom taupe */
  --cat-wild: #6B7530;       /* herbs & wild: olive/moss (also wild group 4, leaves/greens/herbs) */
  /* wild food groups (forage calendar, Ingredients): fungi, fruit, wild and shellfish above are reused for groups 1, 2, 4, 7 */
  --cat-nuts: #8D5733;       /* 3 nuts and seeds: warm hazel brown */
  --cat-flowers: #A0506A;    /* 5 flowers: soft muted rose */
  --cat-roots: #8A6416;      /* 6 roots: earthy ochre */
  --cat-spices: #B05200;     /* 9 spices and seasonings: saffron */
  --cat-wildveg: #615A35;    /* wild vegetables (roots, stalks, shoots): earthy green-brown, 6.95:1 with white */
  --cat-medicinal: #587173;  /* medicinal (historical record): dusty teal-grey, 5.22:1 with white */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tap: 48px;
  --r: 10px;
  --nav-h: 64px;
  --top-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--brand); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .005em; font-variant-numeric: lining-nums; }
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
p { margin: 0 0 .7em; }
.i { width: 22px; height: 22px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px;
  min-height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 8px 0;
  background: var(--bg-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--brand); padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title img { height: 30px; width: auto; }
.topbar-right { display: flex; gap: 4px; }
.icon-btn {
  width: var(--tap); height: var(--tap); display: inline-grid; place-items: center; border: 0; background: transparent;
  color: var(--brand); border-radius: 50%;
}
.icon-btn:active { background: var(--brand-wash); }

/* ---------- layout ---------- */
.view { padding: 18px 18px calc(var(--nav-h) + var(--safe-b) + 28px); max-width: 720px; margin: 0 auto; outline: none; }
.view.flush { padding-left: 0; padding-right: 0; }
.view.flush > .pad { padding-left: 18px; padding-right: 18px; }
.loading { display: grid; place-items: center; gap: 12px; min-height: 60vh; color: var(--mute); font-family: var(--serif); font-style: italic; font-size: 20px; }
.loading img { opacity: .8; }

.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; }
.eyebrow.woad { color: var(--brand-2); }
.lede { font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink-2); font-style: italic; }
.muted { color: var(--mute); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.section { margin: 28px 0 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head a { font-size: 15px; font-weight: 600; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }
.ornament { display: flex; align-items: center; gap: 12px; color: var(--brand-rule); margin: 26px 0 18px; }
.ornament::before, .ornament::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.ornament span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--brand-rule); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; }
.card + .card { margin-top: 12px; }
.card.tight { padding: 12px 14px; }
.card-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; min-height: 64px; }
.card-link .grow { flex: 1; min-width: 0; }
.card-link h3 { font-size: 22px; }
.card-link .chev { color: var(--brand-rule); }
.card-link > .i:first-child { color: var(--brand); width: 26px; height: 26px; }
.stack > * + * { margin-top: 10px; }

/* ---------- home ---------- */
.hero { text-align: center; padding: 8px 0 4px; }
.hero img { width: 210px; height: auto; margin: 6px auto 12px; }
.hero .eyebrow { margin-top: 2px; }
.timeline-strip {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 18px 14px; margin: 0 -18px;
  scrollbar-width: none; position: relative; scroll-padding: 0 18px;
}
.timeline-strip::-webkit-scrollbar { display: none; }
.tl-item {
  flex: none; width: 128px; scroll-snap-align: start; text-decoration: none; color: inherit; position: relative;
  padding: 26px 8px 4px 0; min-height: 96px;
}
.tl-item::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 1.5px solid var(--brand-rule); }
.tl-item:first-child::before { left: 6px; }
.tl-item::after { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--brand); }
.tl-item.has-course::after { background: var(--brand); }
.tl-item .tl-name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--brand); line-height: 1.05; display: block; }
.tl-item .tl-date { font-size: 12.5px; padding-right: 6px; color: var(--mute); display: block; margin-top: 4px; line-height: 1.25; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick {
  display: flex; flex-direction: column; gap: 10px; justify-content: space-between; min-height: 104px; padding: 14px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: var(--ink);
}
.quick .i { color: var(--brand); width: 26px; height: 26px; }
.quick b { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--brand); line-height: 1.1; display: block; }
.quick small { color: var(--mute); font-size: 13px; line-height: 1.3; display: block; margin-top: 2px; }
.quick.primary { grid-column: 1 / -1; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); min-height: 96px; flex-direction: row; align-items: center; }
.quick.primary b, .quick.primary .i { color: var(--brand-ink); }
.quick.primary small { color: var(--brand-ink-soft); }
.progress { height: 6px; border-radius: 3px; background: var(--brand-wash); overflow: hidden; margin: 10px 0 6px; }
.progress > span { display: block; height: 100%; background: var(--brand); }

/* ---------- periods ---------- */
.period-list { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.period-list::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 16px; border-left: 1.5px solid var(--brand-rule); }
.period-list li { position: relative; }
.period-list li + li { margin-top: 10px; }
.period-list li::before { content: ""; position: absolute; left: -22px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--brand); }
.period-list li.has-course::before { background: var(--brand); }
.period-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 72px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: inherit; }
.period-row .grow { flex: 1; min-width: 0; }
.period-row h3 { font-size: 23px; }
.period-row .dates { font-size: 14px; color: var(--mute); }
.fillbar { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.fill { font-size: 11.5px; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--rule); color: var(--mute); white-space: nowrap; }
.fill.on { border-color: var(--brand-2); color: var(--brand); background: var(--brand-wash); }

.period-head { padding: 6px 18px 0; }
.period-head h1 { font-size: 40px; }
.period-head .dates { font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--ink-2); margin-top: 4px; }
.source-line { font-size: 13px; color: var(--mute); margin-top: 8px; line-height: 1.4; }
.pn { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pn a { font-size: 14px; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 2px; max-width: 48%; }
.pn a .i { width: 18px; height: 18px; }

.tabs {
  position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 10; background: var(--bg);
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 18px; border-bottom: 1px solid var(--rule); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 42px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--brand-rule);
  background: transparent; color: var(--brand); font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
}
.tab[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tab .count { font-weight: 400; opacity: .75; margin-left: 6px; font-size: 13px; }
.tabpanel { padding: 18px; }

/* ---------- tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid currentColor; line-height: 1.3; white-space: nowrap; vertical-align: middle;
}
.tag.evidence { color: var(--brand); background: var(--brand-wash); border-color: var(--brand-2); }
.tag.legend { color: var(--accent); background: var(--accent-wash); border-style: dashed; font-family: var(--serif); font-size: 13px; letter-spacing: .16em; font-style: italic; }
.tag.plausible { color: var(--ink-2); background: transparent; border-color: var(--rule); }
.tag.caution, .tag.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn); }
.tag.chef { color: var(--chef); border-color: var(--chef-rule); background: var(--chef-wash); }
.tag.stub { color: var(--mute); border-color: var(--rule); background: transparent; }
.tag.reworked { color: var(--brand); border-color: var(--brand-2); }
.tag.empty { color: var(--mute); border-color: var(--rule); border-style: dashed; }
.tag.old { color: var(--mute); border-color: var(--rule); font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: 12px; }
.tag .i { width: 13px; height: 13px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- empty states ---------- */
.empty-state {
  border: 1.5px dashed var(--brand-rule); border-radius: var(--r); padding: 22px 18px; text-align: center; background: var(--card-veil);
}
.empty-state .i { width: 30px; height: 30px; color: var(--brand-rule); margin: 0 auto 8px; }
.empty-state h3 { font-size: 22px; margin-bottom: 6px; }
.empty-state p { color: var(--ink-2); font-size: 15.5px; margin: 0 auto .5em; max-width: 34ch; }
.empty-state .tiny { color: var(--mute); }
.empty-state.left { text-align: left; }
.empty-state.left p { margin-left: 0; max-width: none; }
.coming { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--brand-2); margin-bottom: 4px; }
.subempty { padding: 12px 0; border-top: 1px solid var(--rule); }
.subempty:first-of-type { border-top: 0; }
.subempty h4 { font-size: 19px; margin-bottom: 2px; }
.subempty p { margin: 0; font-size: 14.5px; color: var(--mute); font-style: italic; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-top: 1px solid var(--rule); }
.list > li:last-child { border-bottom: 1px solid var(--rule); }
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 2px; text-decoration: none; color: inherit; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--brand); line-height: 1.15; }
.row .sub { font-size: 13.5px; color: var(--mute); }
.row .chev { color: var(--brand-rule); width: 18px; }
.group-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 22px 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- forms ---------- */
.field { display: block; margin-top: 12px; }
.field > span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; }
.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--brand-rule);
  background: var(--field); font-size: 17px; appearance: none; -webkit-appearance: none;
}
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.searchbox { position: relative; }
.searchbox .i { position: absolute; left: 12px; top: 13px; color: var(--mute); }
.searchbox .input { padding-left: 42px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px;
  border-radius: 99px; border: 1.5px solid var(--brand); background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 16px; text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--brand); }
.btn.quiet { background: transparent; border-color: var(--rule); color: var(--ink-2); }
.btn.danger { background: transparent; color: var(--warn); border-color: var(--warn-rule); }
.btn.block { width: 100%; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.btn .i { width: 19px; height: 19px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: transparent; border: 1.5px dashed var(--brand-rule); color: var(--mute); font-weight: 400; cursor: default; }
.btn[disabled]:active { transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--brand); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 52px; border: 0; background: transparent; color: var(--brand); font-weight: 600; font-size: 15px; line-height: 1.15; padding: 4px 6px; }
.seg button + button { border-left: 1px solid var(--brand-rule); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--brand-rule);
  background: var(--field); color: var(--ink); font-size: 15.5px; line-height: 1.2; text-align: left;
}
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip.core { background: var(--brand-wash); border-color: var(--brand-2); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: default; }
.chip.core .i { width: 14px; height: 14px; }
.chip.old { background: transparent; border-style: dashed; border-color: var(--rule); color: var(--faint); font-style: italic; cursor: default; }
.chip.off { background: transparent; color: var(--mute); border-color: var(--rule); cursor: default; }
.chip .warnmark { color: var(--warn); }
.chip[aria-pressed="true"] .warnmark { color: var(--warn-on-brand); }
.chip .inlarder { width: 15px; height: 15px; color: var(--chef); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.filterbar { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .chip { flex: none; }
.filterbar.wrap { flex-wrap: wrap; overflow: visible; }

/* ---------- ingredients ---------- */
.ing-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px; text-decoration: none; color: inherit; }
.ing-card + .ing-card { margin-top: 10px; }
.photo-slot {
  aspect-ratio: 1; border-radius: 8px; border: 1px dashed var(--brand-rule); background: repeating-linear-gradient(135deg, var(--hatch) 0 8px, var(--hatch-2) 8px 16px);
  display: grid; place-items: center; color: var(--brand-rule); text-align: center; font-size: 10.5px; line-height: 1.2; padding: 4px;
}
.photo-slot.big { aspect-ratio: 4 / 3; border-radius: var(--r); font-size: 13.5px; gap: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.photo-slot.big .i { width: 34px; height: 34px; }
.ing-card h3 { font-size: 22px; }
.ing-card .kind { font-size: 12.5px; color: var(--mute); text-transform: capitalize; }
.meta-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.meta-grid > div { background: var(--card); padding: 6px 8px; min-width: 0; }
.meta-grid dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.meta-grid dd { margin: 0; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-grid dd.none { color: var(--faint-2); font-style: italic; }
.safety-slot { grid-column: 1 / -1; font-size: 13.5px; border-radius: 8px; padding: 7px 10px; display: flex; gap: 8px; align-items: flex-start; border: 1px dashed var(--rule); color: var(--mute); }
.safety-slot .i { width: 18px; height: 18px; margin-top: 1px; }
.safety-slot.warn { border: 1px solid var(--warn); background: var(--warn-wash); color: var(--warn); font-weight: 600; }
.safety-box { border-radius: var(--r); padding: 14px; border: 1.5px solid var(--warn); background: var(--warn-wash); color: var(--warn); }
.safety-box h3 { color: var(--warn); font-size: 21px; display: flex; gap: 8px; align-items: center; }
.safety-box p { color: var(--warn-ink); margin: 6px 0 0; font-size: 15.5px; }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.months span { text-align: center; font-size: 11px; padding: 6px 0; border-radius: 4px; background: var(--wash-2); color: var(--faint-2); }
.months span.on { background: var(--brand); color: var(--brand-ink); }
.months span.now { outline: 1.5px solid var(--brand-2); outline-offset: -1.5px; }
dl.facts { margin: 0; }
dl.facts > div { padding: 12px 0; border-top: 1px solid var(--rule); }
dl.facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: 5px; }
dl.facts dd { margin: 0; }
.tbf { color: var(--faint-3); font-style: italic; font-family: var(--serif); font-size: 18px; }

/* ---------- forage ---------- */
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-tile {
  min-height: 74px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--card); padding: 10px 10px 8px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
}
.month-tile b { font-family: var(--serif); font-size: 21px; color: var(--brand); font-weight: 600; line-height: 1; }
.month-tile small { font-size: 12px; color: var(--faint-2); }
.month-tile.now { border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2); }
.month-tile.now small { color: var(--brand-2); font-weight: 600; }
.month-tile[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.month-tile[aria-pressed="true"] b, .month-tile[aria-pressed="true"] small { color: var(--brand-ink); }

/* ---------- larder ---------- */
.larder-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--rule); }
.larder-item:last-child { border-bottom: 1px solid var(--rule); }
.larder-item h3 { font-size: 22px; }
.larder-item .meta { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.larder-item .notes { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink-2); font-style: italic; margin: 2px 0 0; }
.larder-item .acts { display: flex; gap: 0; }
.pill { font-size: 12.5px; padding: 2px 9px; border-radius: 99px; background: var(--brand-wash); color: var(--brand); font-weight: 600; }
details.add { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 0 16px; }
details.add[open] { padding-bottom: 16px; }
details.add > summary { list-style: none; min-height: 56px; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--brand); cursor: pointer; }
details.add > summary::-webkit-details-marker { display: none; }
details.add > summary .i { color: var(--brand); }

/* ---------- menu builder ---------- */
.menu-card { display: block; text-decoration: none; color: inherit; }
.menu-card h3 { font-size: 23px; }
.range-summary { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.name-input { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--brand); border: 0; border-bottom: 1px dashed var(--brand-rule); background: transparent; width: 100%; padding: 4px 0; border-radius: 0; min-height: var(--tap); }
.name-input:focus { outline: none; border-bottom: 1.5px solid var(--brand); }
.saved { font-size: 12.5px; color: var(--chef); display: inline-flex; align-items: center; gap: 4px; }
.saved .i { width: 14px; height: 14px; }
.rules-box { background: var(--brand); color: var(--brand-ink-2); border-radius: var(--r); padding: 14px 16px; }
.rules-box h3 { color: var(--brand-ink); font-size: 20px; margin-bottom: 6px; }
.rules-box ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.45; }
.rules-box li + li { margin-top: 4px; }
.rules-box summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.rules-box summary::-webkit-details-marker { display: none; }
.section-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; color: var(--brand); }
.section-divider b { font-family: var(--serif); font-size: 15px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.section-divider::before, .section-divider::after { content: ""; flex: 1; border-top: 1px solid var(--brand-rule); }
.slot { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 16px 14px; position: relative; }
.slot + .slot { margin-top: 12px; }
.slot.is-empty { background: var(--card-veil-2); border-style: dashed; border-color: var(--brand-rule); }
.slot.is-skipped { opacity: .55; }
.slot-top { display: flex; gap: 12px; align-items: flex-start; }
.slot-num { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--brand); color: var(--brand); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 18px; margin-top: 2px; font-variant-numeric: lining-nums; }
.slot.is-empty .slot-num { border-style: dashed; border-color: var(--brand-rule); color: var(--mute); }
.slot-head { flex: 1; min-width: 0; }
.slot-period { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); font-weight: 600; }
.slot-period .d { color: var(--mute); letter-spacing: .02em; text-transform: none; font-weight: 400; }
.slot h3 { font-size: 25px; margin: 3px 0 6px; }
.slot h3.noname { color: var(--faint); font-style: italic; font-weight: 500; }
.slot .role { font-size: 15px; color: var(--ink-2); margin: 10px 0 0; }
.slot .kv { margin: 10px 0 0; font-size: 14.5px; }
.slot .kv dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 8px; }
.slot .kv dd { margin: 2px 0 0; color: var(--ink-2); }
.slot details.more > summary { list-style: none; cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14.5px; min-height: 40px; display: inline-flex; align-items: center; gap: 4px; }
.slot details.more > summary::-webkit-details-marker { display: none; }
.slot details.more > summary .i { width: 16px; height: 16px; transition: transform .15s; }
.slot details.more[open] > summary .i { transform: rotate(90deg); }
.core-line { margin-top: 12px; font-size: 14.5px; }
.core-line .lbl, .picks .lbl, .old-line .lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 4px; }
.core-line u { text-underline-offset: 3px; color: var(--brand); text-decoration-color: var(--brand-2); }
.picks { margin-top: 12px; }
.picks .chips .chip { min-height: 34px; font-size: 14px; padding: 4px 11px; }
.old-line { margin-top: 12px; color: var(--faint); font-size: 14.5px; font-style: italic; }
.old-line .items { color: var(--faint); }
.slot-sourcing { margin-top: 12px; font-size: 13.5px; border-left: 3px solid var(--brand-rule); padding: 2px 0 2px 10px; }
.slot-sourcing .lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 4px; }
.slot-sourcing p { margin: 0 0 6px; }
.slot-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.slot-actions .btn { flex: 1; }
.slot-actions .btn.skip { flex: none; }
.slot-warn { margin-top: 10px; font-size: 13.5px; color: var(--warn); background: var(--warn-wash); border-radius: 8px; padding: 6px 10px; display: flex; gap: 6px; }
.slot-warn .i { width: 17px; height: 17px; }
.ref-box { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--brand-rule); background: var(--wash); font-size: 14px; color: var(--ink-2); border-radius: 0 8px 8px 0; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }

/* ---------- sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(30, 26, 22, .38); display: flex; align-items: flex-end; }
.sheet {
  background: var(--bg); width: 100%; max-width: 720px; margin: 0 auto; max-height: 92vh; border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0, 0, 0, .16);
}
.sheet-head { padding: 10px 16px 10px; border-bottom: 1px solid var(--rule); }
.sheet-head .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 0 auto 10px; }
.sheet-head .top { display: flex; align-items: flex-start; gap: 8px; }
.sheet-head h2 { font-size: 24px; flex: 1; min-width: 0; }
.sheet-body { overflow-y: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 10px 16px calc(10px + var(--safe-b)); border-top: 1px solid var(--rule); background: var(--card); }
.pool { margin-top: 16px; }
.pool-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.pool-head b { font-family: var(--serif); font-size: 19px; color: var(--brand); font-weight: 600; }
.pool-note { font-size: 13.5px; color: var(--mute); font-style: italic; margin: -2px 0 8px; }

/* ---------- misc ---------- */
.toast.warn { background: var(--warn); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 60; background: var(--brand); color: var(--brand-ink); padding: 10px 18px; border-radius: 99px; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); max-width: 90vw; text-align: center; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kv-table td { border-top: 1px solid var(--rule); padding: 8px 4px; vertical-align: top; }
.kv-table td:first-child { color: var(--mute); width: 40%; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }
.note-callout { font-size: 14px; color: var(--ink-2); background: var(--wash); border-radius: 8px; padding: 10px 12px; }
.inferred { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-left: 4px; }

/* ---------- bottom nav ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--card); border-top: 1px solid var(--rule);
}
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: .03em; position: relative; }
.bottomnav a .i { width: 25px; height: 25px; }
.bottomnav a.active { color: var(--brand); }
.bottomnav a.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2.5px; background: var(--brand); border-radius: 0 0 2px 2px; }

@media (min-width: 560px) { .quick-grid { grid-template-columns: 1fr 1fr 1fr; } .month-grid { grid-template-columns: repeat(4, 1fr); } }
@media print { .bottomnav, .topbar, .slot-actions, .menu-actions { display: none !important; } body { background: #fff; } }

/* ---------------------------------------------------------------- Danger & lookalikes (v0.5 re-issue) */
:root { --danger: #B00000; --danger-dark: #7A0000; --danger-wash: #FDECEC; --safe: #2F6B2F; --safe-wash: #EAF4E6; }
.tag.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.safety-slot.danger { color: var(--danger-dark); background: var(--danger-wash); border: 2px solid var(--danger); }
.safety-box.danger { border: 2px solid var(--danger); background: var(--danger-wash); }
.safety-box.danger h3 { color: var(--danger); }
.dz-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dz-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--danger); color: #fff !important; font-weight: 700; text-decoration: none; font-size: 14px; }
.dz-link small { font-weight: 400; opacity: .9; }
.dz-link .i { width: 16px; height: 16px; }
.dz-homecard, .dz-morecard { display: flex; align-items: center; gap: 12px; background: var(--danger); color: #fff !important; border: 0; border-radius: var(--r); padding: 14px 16px; text-decoration: none; margin: 4px 0 14px; }
.dz-homecard .i, .dz-morecard .i { color: #fff; width: 26px; height: 26px; flex: none; }
.dz-homecard b { display: block; font-size: 17px; }
.dz-homecard small { display: block; font-size: 13.5px; opacity: .95; }
.dz-morecard h3, .dz-morecard .small { color: #fff; }
.dz-homecard .chev, .dz-morecard .chev { margin-left: auto; width: 18px; height: 18px; }
.dz-eyebrow { color: var(--danger) !important; }
.dz-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--danger); color: #fff; border-radius: var(--r); padding: 12px 14px; margin: 12px 0; }
.dz-banner p { margin: 0; font-size: 15.5px; line-height: 1.35; }
.dz-banner .i { width: 24px; height: 24px; flex: none; color: #fff; margin-top: 1px; }
.dz-banner.slim p { font-size: 13.5px; }
.dz-emergency { border: 2px solid var(--danger); border-radius: var(--r); padding: 10px 14px; background: var(--danger-wash); }
.dz-emergency h3 { margin: 0 0 4px; color: var(--danger); font-size: 16px; }
.dz-emergency p { margin: 4px 0; }
.dz-phone { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dz-phone a { font-weight: 800; font-size: 22px; color: var(--danger-dark); text-decoration: none; }
.dz-phone span, .dz-phone small { color: var(--ink); }
.lvl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
.lvl .i { width: 13px; height: 13px; }
.lvl-deadly { background: #7A0000; color: #fff; }
.lvl-serious { background: var(--danger); color: #fff; }
.lvl-irritant { background: #C0501A; color: #fff; }
.lvl-care { background: #F3D9A0; color: #5A3A00; }
.lvl-text-deadly { color: #7A0000; } .lvl-text-serious { color: var(--danger); } .lvl-text-irritant { color: #C0501A; } .lvl-text-care { color: #8A5A00; }
.dz-h { margin: 18px 0 6px; font-size: 20px; }
.dz-row { align-items: center; gap: 12px; }
.dz-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
.dz-thumb.none .i { width: 22px; height: 22px; color: var(--mute); }
.dz-conf { color: var(--mute); margin-top: 3px; }
.dz-chips { margin: 6px 0 4px; }
.dz-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-top: 8px; }
.dz-gallery figure { margin: 0; flex: 0 0 86%; scroll-snap-align: start; }
.dz-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 10px; display: block; }
.dz-gallery figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-top: 4px; }
.dz-gallery figcaption .tiny { color: var(--mute); }
.dz-toxic dt { color: var(--danger); }
.dz-toxic dd { color: var(--danger-dark); font-weight: 600; }
.dz-id { margin: 0; padding-left: 18px; }
.dz-id li { margin: 3px 0; }
.dz-cmp { border: 1px solid var(--rule); border-radius: var(--r); padding: 10px; margin: 10px 0 14px; background: var(--card); }
.dz-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz-side { border-radius: 8px; overflow: hidden; border: 3px solid; display: flex; flex-direction: column; }
.dz-side img, .dz-side .photo-slot { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.dz-side img { display: block; }
.dz-side .photo-slot { display: flex; }
.dz-side-h { min-height: 46px; font-weight: 800; font-size: 13px; padding: 6px 8px; display: flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .03em; }
.dz-side-h .i { width: 14px; height: 14px; }
.dz-side-n { padding: 6px 8px; font-size: 13.5px; display: flex; flex-direction: column; }
.dz-side-n i { color: var(--mute); font-size: 12.5px; }
.dz-side.dont { border-color: var(--danger); }
.dz-side.dont .dz-side-h { background: var(--danger); color: #fff; }
.dz-side.pick { border-color: var(--safe); }
.dz-side.pick .dz-side-h { background: var(--safe); color: #fff; }
.dz-side.confused { border-color: #8A8A8A; }
.dz-side.confused .dz-side-h { background: #8A8A8A; color: #fff; }
.dz-how { margin-top: 8px; }
.dz-how h4 { margin: 0 0 2px; font-size: 15px; }
.dz-how p { margin: 0; }
.dz-cmp-credit { margin: 6px 0 0; }
.dz-nophoto { flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; color: var(--mute); }
.dz-fungi { border: 2px solid var(--danger); background: var(--danger-wash); }
.dz-fungi h3 { color: var(--danger); display: flex; gap: 6px; align-items: center; }
.dz-fungi h3 .i { width: 18px; height: 18px; }
.dz-src li { margin: 4px 0; word-break: break-word; }

/* update bar (service worker) */
.sw-update { white-space: nowrap; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1000; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }

/* comparison links from edible-with-care ingredients (not red) */
.dz-link.cmp { background: #F3D9A0; color: #5A3A00 !important; }
.dz-care { display: block; margin-top: 4px; font-size: 12.5px; color: #5A3A00; background: #FFF4DC; border-radius: 6px; padding: 4px 6px; }
.safety-box.care { border: 2px solid #D9A93A; background: #FFF6E0; }
.safety-box.care h3 { color: #7A5200; }

/* wild food galleries (v0.2): illustrations shown whole on paper */
.dz-gallery figure.illus img { object-fit: contain; background: var(--card); border: 1px solid rgba(0,0,0,.08); }

/* ---------- seasonality (shared UK dataset) ---------- */
.ss-item > summary { list-style: none; cursor: pointer; }
.ss-item > summary::-webkit-details-marker { display: none; }
.ss-item > summary .chev { transform: rotate(90deg); transition: transform .15s; }
.ss-item[open] > summary .chev { transform: rotate(-90deg); }
.ss-item .tag { vertical-align: 3px; }
.ss-body { padding: 0 2px 12px; color: var(--ink-2); }
.ss-body p { margin: 0 0 8px; }
.ss-body a { color: var(--brand); }
.chip.ss-now { border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2); }

/* category bands: a solid block of the category colour, edge to edge, white label; matching left edge on rows */
.ss-cat-veg { --cat: var(--cat-veg); }
.ss-cat-fruit { --cat: var(--cat-fruit); }
.ss-cat-meat { --cat: var(--cat-meat); }
.ss-cat-game { --cat: var(--cat-game); }
.ss-cat-fish { --cat: var(--cat-fish); }
.ss-cat-shellfish { --cat: var(--cat-shellfish); }
.ss-cat-fungi { --cat: var(--cat-fungi); }
.ss-cat-wild { --cat: var(--cat-wild); }
.group-label.ss-cat {
  background: var(--cat, var(--brand)); color: var(--cat-ink);
  margin: 26px -18px 0; padding: 11px 18px; font-size: 13px; letter-spacing: .14em;
}
.group-label.ss-cat span {
  margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center; letter-spacing: 0;
  background: rgba(255, 255, 255, .2); color: var(--cat-ink); font-weight: 600;
}
.ss-list > li:first-child { border-top: 0; }
.ss-list > li { border-left: 4px solid var(--cat, var(--rule)); }
.ss-list > li > .ss-item > summary.row, .ss-list .ss-body { padding-left: 12px; }
.ss-sub { /* kitchen-use group subheading inside a category band */
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 0 6px 12px;
  border-left: 4px solid var(--cat, var(--rule)); border-bottom: 1px solid var(--rule);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cat, var(--mute));
}
.ss-sub span { margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.ss-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.ss-meta .tag.ss-fam { font-size: 11px; padding: 1px 7px; text-transform: none; letter-spacing: .02em; font-weight: 500; color: var(--ink-2); background: transparent; border-color: var(--rule); vertical-align: 0; }
.ss-allergens { font-size: 12px; color: var(--warn); }
.ss-allergens.none { color: var(--mute); }
.ss-aka { font-size: .8em; font-weight: 400; color: var(--mute); }

/* wild food groups: same bands and left edges as In season; Danger keeps the fixed danger red (not themeable) */
.wg-mushrooms { --cat: var(--cat-fungi); }
.wg-berries { --cat: var(--cat-fruit); }
.wg-nuts { --cat: var(--cat-nuts); }
.wg-leaves { --cat: var(--cat-wild); }
.wg-flowers { --cat: var(--cat-flowers); }
.wg-roots { --cat: var(--cat-roots); }
.wg-veg { --cat: var(--cat-wildveg); }
.wg-medicinal { --cat: var(--cat-medicinal); }
.wg-warnings { --cat: var(--danger); }
.wg-seashore { --cat: var(--cat-shellfish); }
.wg-spices { --cat: var(--cat-spices); }
.wg-danger { --cat: var(--danger); }
.wg-other { --cat: var(--brand); }
.group-label.ss-cat.wg-danger, .group-label.ss-cat.wg-danger span { color: #fff; }
.group-label.ss-cat.wg-other, .group-label.ss-cat.wg-other span { color: var(--brand-ink); }
.ss-list > li > a.row { padding-left: 12px; }
.wg-cards { margin-top: 10px; }
.wg-cards .ing-card { border-left: 4px solid var(--cat); }
.wg-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; font-size: 13px; color: var(--ink-2); }
.wg-key { display: inline-flex; align-items: center; gap: 6px; }
.wg-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--cat); flex: none; }
button.wg-key { min-height: 34px; padding: 4px 11px 4px 9px; border-radius: 99px; border: 1px solid var(--rule); background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
button.wg-key[aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: var(--cat-ink); }
button.wg-key[aria-pressed="true"] i { background: currentColor; }
button.wg-key.wg-danger[aria-pressed="true"] { color: #fff; }
.field + .wg-legend { margin: 10px 0 4px; gap: 6px 6px; }

/* ---------- calm danger styling (Oct 2026): thin 1px red outline + red "DANGER!" text instead of solid red blocks.
   The safety wording is unchanged; only the visual weight is reduced. #B00000 = 7.38:1 on white, 6.4:1 on cream. */
.tag.danger { color: var(--danger); background: transparent; border: 1px solid var(--danger); font-weight: 800; letter-spacing: .04em; }
.dz-word { display: inline-block; flex: none; color: var(--danger); border: 1px solid var(--danger); border-radius: 4px; padding: 0 5px; font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 1.5; background: transparent; }
.safety-slot.danger { color: var(--danger-dark); background: transparent; border: 1px solid var(--danger); }
.safety-box.danger { border: 1px solid var(--danger); background: transparent; }
.safety-box.danger h3 { color: var(--danger); font-size: 18px; }
.safety-box.danger p { color: var(--ink); }
.dz-link { background: transparent; color: var(--danger) !important; border: 1px solid var(--danger); font-weight: 700; }
.dz-link.cmp { background: transparent; color: #7A5200 !important; border-color: #B88A2E; }
.dz-homecard, .dz-morecard { background: transparent; color: var(--ink) !important; border: 1px solid var(--danger); }
.dz-homecard .i, .dz-morecard .i { color: var(--danger); }
.dz-homecard b, .dz-morecard h3 { color: var(--danger); }
.dz-morecard .small { color: var(--ink-2); }
.dz-banner { background: transparent; color: var(--danger-dark); border: 1px solid var(--danger); }
.dz-banner .i { color: var(--danger); }
.dz-emergency, .dz-fungi { border-width: 1px; background: transparent; }
.lvl-deadly, .lvl-serious, .lvl-irritant, .lvl-care { background: transparent; border: 1px solid currentColor; }
.lvl-deadly { color: #7A0000; } .lvl-serious { color: var(--danger); } .lvl-irritant { color: #A3410F; } .lvl-care { color: #7A5200; }
.dz-side { border-width: 1px; }
.dz-side.dont .dz-side-h { background: transparent; color: var(--danger); border-bottom: 1px solid var(--danger); }
.dz-side.pick .dz-side-h { background: transparent; color: var(--safe); border-bottom: 1px solid var(--safe); }
.dz-side.confused .dz-side-h { background: transparent; color: #5E5E5E; border-bottom: 1px solid #8A8A8A; }
/* Danger / Warnings section band: an outlined label, not a solid red block */
.group-label.ss-cat.wg-danger, .group-label.ss-cat.wg-warnings { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.group-label.ss-cat.wg-danger span, .group-label.ss-cat.wg-warnings span { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button.wg-key.wg-danger[aria-pressed="true"], button.wg-key.wg-warnings[aria-pressed="true"] { background: transparent; color: var(--danger); border-color: var(--danger); }
button.wg-key.wg-warnings[aria-pressed="true"] i { background: var(--danger); }
.wg-cards.wg-warnings .ing-card { border-left: 1px solid var(--danger); }

/* ---------- usage sections (wild.uses[]) */
.use-eyebrow { color: var(--cat); font-weight: 700; }
.use-eyebrow.wg-warnings { color: var(--danger); }
.use-links { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.use-links a { color: var(--cat, var(--brand)); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.use-links a.wg-warnings { color: var(--danger); }
.use-block { margin-top: 14px; }
.use-block > .group-label { margin-bottom: 8px; }
.use-sum { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.use-sum i { color: var(--mute); }
.med-notice { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--cat-medicinal); border-radius: 8px; padding: 8px 10px; margin: 8px 0; color: var(--ink); font-size: 14px; }
.med-notice p { margin: 0; }
.med-notice .i { width: 18px; height: 18px; flex: none; color: var(--cat-medicinal); margin-top: 1px; }
.sea-notice { border-color: var(--cat-shellfish); }
.sea-notice .i { color: var(--cat-shellfish); }
.sea-notice p + p { margin-top: 6px; }
.claims { list-style: none; padding: 0; margin: 8px 0; }
.claims li { border-left: 3px solid var(--cat-medicinal); padding: 4px 0 8px 10px; margin: 0 0 10px; }
.claims p { margin: 4px 0; }
.rate { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; border: 1px solid; }
.rate-scientific { color: #1F5E33; border-color: #1F5E33; }
.rate-traditional { color: #4A5E60; border-color: #587173; }
.rate-folklore { color: #6E5A2E; border-color: #9A8450; border-style: dashed; }

/* ---------- responsible fishing (Oct 2026): calm thin-outline rating chips, never solid blocks */
.gf-chip { font-family: var(--sans); display: inline-flex; align-items: center; flex: none; border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; font-size: 12.5px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; white-space: nowrap; background: transparent; vertical-align: 2px; }
.gf-green { color: var(--safe); background: var(--safe-wash); }
.gf-amber { color: var(--accent); background: var(--accent-wash); }
.gf-red { color: var(--warn); background: var(--warn-wash); }
.gf-none { color: var(--mute); border-style: dashed; font-weight: 600; }
.gf-panel { border: 1px solid var(--cat-fish); border-radius: var(--r); padding: 12px 14px; background: var(--card); }
.gf-panel h2 { margin-top: 0; color: var(--cat-fish); }
.gf-best { display: flex; gap: 10px; align-items: flex-start; }
.gf-best .gf-chip { margin-top: 2px; }
.gf-best p { margin: 0; font-size: 15px; }
.gf-h { font-size: 18px; margin: 14px 0 6px; }
.gf-h small { font-family: var(--sans); font-size: 12px; font-weight: 400; }
.gf-methods, .gf-subs, .gf-all ul { list-style: none; padding: 0; margin: 0; }
.gf-methods li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.gf-methods li:first-child { border-top: 0; }
.gf-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.gf-all { margin: 8px 0 4px; }
.gf-all summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.gf-all li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--rule); }
.gf-all li .gf-chip { margin-top: 2px; }
.gf-facts { margin-top: 12px; }
.gf-subs li { border-left: 2px solid var(--cat-fish); padding: 4px 0 6px 10px; margin: 0 0 10px; }
.gf-subhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gf-src { margin: 10px 0 0; }
.ss-item .gf-chip { vertical-align: 3px; }

/* Recipes (modules "recipes" + "recipeForm") */
.field .hint, .rc-allergens .hint { display: block; font-size: 13.5px; color: var(--mute); margin-top: 5px; line-height: 1.35; }
.field > .rc-label, .rc-allergens legend { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; padding: 0; }
.rc-allergens { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.rc-allergens .hint { margin: 0 0 8px; }
.rc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.rc-check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 10px; border: 1px solid var(--brand-rule); border-radius: 8px; background: var(--field); font-size: 15.5px; line-height: 1.2; cursor: pointer; }
.rc-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--brand); }
.rc-check:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.rc-ta { min-height: 150px; }
.rc-photo { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--rule); background: var(--hatch); }
.rc-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--rule); }
.rc-ings { list-style: none; padding: 0; margin: 8px 0 0; }
.rc-ings li { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.rc-ings li b { font-weight: 600; color: var(--brand); }
.rc-method { padding-left: 1.4em; margin: 8px 0 0; }
.rc-method li { margin-bottom: 10px; padding-left: 4px; }
.rc-notes { white-space: pre-line; margin: 8px 0 0; }

.ss-al-link { color: inherit; text-decoration: none; }
.ss-al-link .ss-allergens { text-decoration: underline dotted; text-underline-offset: 2px; }
.al-list .title { margin-bottom: 4px; }
.al-list p { margin: 4px 0; }
.rs-ico { display: inline-flex; width: 28px; color: var(--mute); }
.rs-list .row { align-items: center; gap: 8px; }
.rs-back b { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
/* Recipes: three ways to add, then Ready to send */
.rs-ways { display: grid; gap: 10px; margin: 18px 0 4px; }
.rs-way { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border: 1.5px solid var(--brand); border-radius: 14px; background: var(--card); color: var(--brand); text-decoration: none; cursor: pointer; box-sizing: border-box; }
.rs-way .i { width: 22px; height: 22px; flex: none; }
.rs-way.solid { background: var(--brand); color: var(--brand-ink); }
.rs-way-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-way-title { font-weight: 600; font-size: 16px; line-height: 1.25; }
.rs-way-sub { font-size: 13px; line-height: 1.3; color: var(--mute); }
.rs-way.solid .rs-way-sub { color: var(--brand-ink-soft); }
.rs-way:active { transform: translateY(1px); }
.rs-send { margin-top: 18px; }
.rs-h { font-size: 20px; line-height: 1.25; margin: 0 0 4px; }
.rs-saved { margin: 0 0 10px; }
.rs-sendbtn { margin-top: 14px; min-height: 52px; }
.rs-sendbtn[disabled] { background: var(--wash-2); border: 1.5px solid var(--wash-2); color: var(--mute); font-weight: 600; }
.rs-hint { margin: 8px 0 0; text-align: center; }
.rs-back { display: block; cursor: pointer; }

/* Pre-sale safety (15 Oct 2026): banner on every species/Danger page, first-run acknowledgement, medicinal blocks */
.safe-banner { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 10px 12px; border: 1.5px solid #b3261e; border-radius: 10px; background: #fdf1ef; color: #3b0d0a; font-size: .86rem; line-height: 1.35; }
.safe-banner svg { flex: 0 0 20px; width: 20px; height: 20px; color: #b3261e; margin-top: 2px; }
.safe-banner p { margin: 0 0 4px; }
.safe-banner a { color: #b3261e; font-weight: 600; }
.safe-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 16, 12, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.safe-card { background: #fffdf8; color: #1d1a16; max-width: 480px; width: 100%; max-height: 90vh; overflow: auto; border-radius: 14px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.safe-card h2 { margin: 2px 0 10px; }
.safe-card p { margin: 0 0 10px; line-height: 1.4; }
.safe-tick { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-weight: 600; }
.safe-tick input { flex: 0 0 22px; width: 22px; height: 22px; }
.safe-card .btn { width: 100%; padding: 12px; font-size: 1rem; }
.safe-card .btn[disabled] { opacity: .45; }
.med-h { margin: 14px 0 6px; font-size: 1rem; }

/* Dalleth's own fish ratings: deliberately not traffic-light colours */
.fr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 4px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; border: 1.5px solid; }
.fr-good { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
.fr-care { background: #fff; border-color: #6b4e8a; color: #4b3463; border-style: dashed; }
.fr-rest { background: repeating-linear-gradient(135deg, #e7e4df 0 6px, #d6d1ca 6px 12px); border-color: #55606b; color: #2f363d; }
.fr-none { background: transparent; border-color: #b9b2a7; color: #6f675c; border-style: dotted; font-weight: 400; }
.fr-mini { font-size: .7rem; padding: 1px 6px; }
.fr-box { border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.fr-box p { margin: 6px 0 0; }
.fr-key li { display: block; }
/* species pages: warnings fold away; the pop-up carries them */
.warn-fold { margin: 16px 0; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; padding: 8px 12px; }
.warn-fold > summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.warn-fold > summary svg { width: 18px; height: 18px; }
.warn-fold[open] > summary { margin-bottom: 8px; }
.sp-card .dz-id { margin: 4px 0 10px; padding-left: 18px; }
.sp-card .dz-id li { margin-bottom: 4px; line-height: 1.35; }
.sp-card .btn { margin-top: 6px; }

.id-line { margin: 8px 0 0; font-size: .9rem; font-weight: 600; color: #8a1c1c; display: flex; gap: 6px; align-items: center; }
.id-line a { color: #8a1c1c; text-decoration: underline; }
.sp-deadly { border: 2px solid #b3261e; background: #fdecea; color: #8a1c1c; border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.sp-deadly h3 { color: #b3261e; margin: 0 0 4px; font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.sp-deadly ul { margin: 0; padding-left: 18px; } .sp-deadly b { color: #b3261e; }
.priv-list li { margin-bottom: 10px; }
.safe-banner.compact { margin: 8px 0 12px; padding: 8px 10px; font-size: .82rem; }