/* recettes — design system: garden-to-table, warm & organic, light-only.
   CSP-safe: system fonts only (Georgia display + system UI sans), no CDN. */

:root {
  color-scheme: light;

  /* palette — warm paper + garden greens + terracotta appetite accent */
  --bg:        #f5f2e9;   /* cream paper */
  --bg-tint:   #eee9db;
  --card:      #fffdf7;   /* warm surface */
  --border:    #e6e0cf;
  --fg:        #2b2a24;   /* warm ink */
  --muted:     #77715f;

  --green:      #2f6b45;  /* deep garden green (primary) */
  --green-600:  #3c8055;
  --green-500:  #4a9c66;
  --green-soft: #e7f0e6;  /* green tint (pills/success) */

  --accent:      #d9663f; /* terracotta (appetite / CTA) */
  --accent-600:  #c4542e;
  --accent-soft: #fbe8df;

  --amber: #c77d33;
  --danger: #c1452f;

  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 1px 2px rgba(70,55,25,.05), 0 10px 26px -14px rgba(70,55,25,.20);
  --shadow-lg: 0 2px 6px rgba(70,55,25,.06), 0 22px 44px -20px rgba(70,55,25,.28);

  /* glass — translucent surfaces that let the background light through.
     Opaque by default; the @supports block below thins them out where the
     browser can actually blur what is behind. */
  --glass:        rgba(255,253,247,.94);
  --glass-thin:   rgba(255,253,247,.88);
  --glass-blur:   none;
  --glass-edge:   rgba(255,255,255,.75);  /* specular highlight along the top */
  --glass-ring:   rgba(70,55,25,.07);     /* hairline that reads as an edge */
  --gloss:        linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%);

  /* motion — one easing for travel, one with overshoot for taps */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --spring:  cubic-bezier(.34, 1.4, .64, 1);

  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass:      rgba(255,253,247,.62);
    --glass-thin: rgba(255,253,247,.45);
    --glass-blur: saturate(180%) blur(20px);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  line-height: 1.6;
  background: var(--bg);
  /* organic depth: warm + green light pools for the glass surfaces to refract.
     The first layer holds the top of the viewport at exactly --bg — the colour
     <meta name="theme-color"> hands to the phone's status bar — so the browser
     chrome, the header and the page read as one surface. */
  background-image:
    linear-gradient(180deg, var(--bg) 0, var(--bg) 72px, transparent 240px),
    radial-gradient(1200px 680px at 6% -10%, rgba(74,156,102,.20), transparent 62%),
    radial-gradient(980px 560px at 106% 2%, rgba(217,102,63,.15), transparent 58%),
    radial-gradient(760px 760px at 82% 104%, rgba(74,156,102,.14), transparent 60%);
  background-attachment: fixed;
}

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

.site-header { background: none; }
.site-header .bar {
  max-width: 720px;
  margin: 0 auto;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  letter-spacing: .2px;
}
.brand .logo { font-size: 1.4rem; filter: saturate(1.05); }

/* ---------- layout ---------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem calc(5.4rem + env(safe-area-inset-bottom));
}

.back { display: inline-block; margin-bottom: .5rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
.back:hover { color: var(--green); }

/* ---------- typography ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--fg); letter-spacing: .1px; }
h2 { font-size: 1.4rem; margin: .1rem 0 1rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
a { color: var(--green-600); text-decoration-color: color-mix(in srgb, var(--green-600) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--green); }
.muted { color: var(--muted); }
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .86em;
  background: var(--bg-tint);
  padding: .12rem .4rem;
  border-radius: 6px;
}

/* ---------- cards ---------- */

.card {
  position: relative;
  background: var(--gloss), var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.1rem 0;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
  animation: rise .55s var(--ease) both;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }
.card:nth-child(5) { animation-delay: .16s; }

@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pop { 50% { transform: scale(1.07); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* hero card on the home page */
.hero {
  background:
    linear-gradient(135deg, rgba(74,156,102,.14), rgba(217,102,63,.10)),
    var(--card);
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
}
.hero h1 { font-size: 2rem; margin: .2rem 0 .4rem; }
.hero h2 { font-size: 1.7rem; margin: .2rem 0 .4rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-weight: 650;
  font-size: .95rem;
  padding: .55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44px;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
/* gloss cap, plus a highlight that sweeps across on hover */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--gloss);
  pointer-events: none;
}
.btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 120%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); transition-duration: .08s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.btn-primary:hover { background: var(--accent-600); color: #fff; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 8px 18px -10px var(--green); }
.btn-green:hover { background: var(--green-600); color: #fff; }
.btn-soft {
  background: color-mix(in srgb, var(--green-soft) 70%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--green); border-color: color-mix(in srgb, var(--green) 22%, transparent);
}
.btn-soft:hover { background: color-mix(in srgb, var(--green-soft) 70%, var(--card)); }
.btn-ghost {
  background: var(--glass-thin);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--muted); border-color: var(--glass-ring);
}
.btn-ghost:hover { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.btn-sm { padding: .32rem .6rem; font-size: .82rem; border-radius: 8px; min-height: 36px; }
.btn-link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; font: inherit; font-size: .82rem; }
.btn-link:hover { color: var(--accent); }

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

label { font-size: .9rem; color: var(--muted); font-weight: 600; }
input, select, textarea {
  font: inherit;
  color: var(--fg);
  background: rgba(255,255,255,.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  border-radius: var(--radius-sm);
  padding: .6rem .7rem;
  width: 100%;
  min-height: 44px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
input[type=checkbox], input[type=radio] {
  width: auto; min-height: 0; padding: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: rgba(255,255,255,.92);
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-500) 18%, transparent);
}
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .7rem; }

/* ---------- pills / badges ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
}
.pill-warn { background: var(--accent-soft); color: var(--accent-600); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.pill-plain { background: var(--bg-tint); color: var(--muted); border-color: var(--border); }
.tag { font-size: .8rem; color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.chip:hover { background: var(--accent-soft); color: var(--accent-600); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- lists ---------- */

.rows { list-style: none; padding: 0; margin: 0; }
.rows li { padding: .6rem 0; border-top: 1px solid var(--border); }
.rows li:first-child { border-top: 0; }

.link-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.link-list li { margin: .15rem 0; }
.link-list a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; padding: .45rem .6rem; border-radius: 10px; text-decoration: none; }
.link-list a:hover { background: var(--green-soft); }

/* recipe ingredients & steps */
.ingredients { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: .4rem 0 .4rem 1.6rem; position: relative; border-bottom: 1px dashed var(--border); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients li::before { content: "🌿"; position: absolute; left: 0; font-size: .8rem; opacity: .8; }
.qty { font-weight: 700; color: var(--green); }
.steps { padding-left: 1.2rem; margin: 0; }
.steps li { margin-bottom: .8rem; padding-left: .3rem; }
.steps li::marker { color: var(--accent); font-weight: 700; font-family: var(--font-display); }

/* meta line */
.meta { color: var(--muted); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.meta .dot::before { content: "·"; margin-right: .5rem; color: var(--border); }

/* nutrition figure */
.nutrition { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; }
.nutrition .kcal { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--green); }
.nutrition .macro { color: var(--muted); }
.nutrition .macro b { color: var(--fg); font-weight: 700; }

/* recipe image */
.recipe-img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px; margin: .5rem 0 .2rem; }

/* ---------- planning grid ---------- */

.table-scroll { overflow-x: auto; margin: .5rem -.4rem 0; padding: 0 .4rem; }
.plan {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 540px;
}
.plan th { text-align: left; padding: .4rem .5rem; font-family: var(--font-display); font-size: .95rem; color: var(--green); }
.plan td { padding: .5rem; vertical-align: top; border-top: 1px solid var(--border); }
.plan .day { white-space: nowrap; }
.plan .day b { font-family: var(--font-display); }
.cell-recipe { background: var(--green-soft); border-radius: 10px; padding: .5rem .6rem; }
.cell-recipe a { font-weight: 700; text-decoration: none; }
.cell-recipe + .cell-recipe, .cell-recipe + .cell-add { margin-top: .35rem; }
.cell-add > summary { list-style: none; margin-top: .35rem; }
.cell-add > summary::-webkit-details-marker { display: none; }
.cell-add[open] > summary { margin-bottom: .35rem; }

/* A meal that reheats a share reads as a quieter echo of the one that cooked it. */
.cell-reuse { background: var(--bg-tint); border: 1px dashed var(--border); }
.portions { font-size: .78rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; }
.cell-tune > summary { list-style: none; margin-top: .3rem; }
.cell-tune > summary::-webkit-details-marker { display: none; }
.cell-tune select, .cell-tune input[type=number] { font-size: .82rem; padding: .25rem; }
.tune { display: flex; flex-direction: column; gap: .15rem; font-size: .72rem; color: var(--muted); }
.cell-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.covers { display: flex; align-items: center; gap: .25rem; margin: 0; }
.covers input { width: 3.2rem; font-size: .82rem; padding: .25rem; }

/* ---------- slot picker ---------- */

.slot-banner { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pick-days { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pick-days > li { display: grid; grid-template-columns: minmax(6.5rem, 1fr) 1fr 1fr; gap: .4rem; align-items: stretch; }
.pick-day { font-family: var(--font-display); font-size: .92rem; align-self: center; }
.pick-slot { margin: 0; display: flex; }
.pick-btn {
  flex: 1; text-align: left; cursor: pointer; font: inherit; font-size: .78rem;
  background: var(--green-soft); border: 1px solid transparent; border-radius: 10px;
  padding: .4rem .5rem; color: inherit; display: flex; flex-direction: column; gap: .1rem;
}
.pick-btn:hover { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.pick-btn.taken { background: var(--bg-tint); border-color: var(--border); }
.pick-meal { font-weight: 700; }
.pick-free { color: var(--muted); }
.pick-busy { color: var(--muted); overflow-wrap: anywhere; }

.week-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.week-nav strong { font-family: var(--font-display); font-size: 1.15rem; }

/* ---------- shopping list ---------- */

.shop-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 .2rem; }
.shop-filter { cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; }
.chip.on { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }

.shop-rayon {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--green); margin: .9rem 0 .2rem; padding-bottom: .2rem;
  border-bottom: 1px solid var(--border);
}
.shop-rayon:first-child { margin-top: .4rem; }

.shop-item { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem 0; border-bottom: 1px dashed var(--border); }
.shop-item:last-child { border-bottom: 0; }
.shop-item.dragging { opacity: .45; }
.shop-item.done .shop-name { color: var(--muted); text-decoration: line-through; }
.shop-item.hide, .shop-rayon.hide { display: none; }
.shop-drag { cursor: grab; color: var(--border); user-select: none; padding-top: .15rem; }
.shop-check { flex: none; padding-top: .15rem; }
.shop-body { flex: 1; min-width: 0; }
.shop-name { font-weight: 600; }
.shop-btn {
  flex: none; background: none; border: 0; cursor: pointer; color: var(--muted);
  font: inherit; font-size: .95rem; text-decoration: none; padding: .1rem .3rem; border-radius: 6px;
}
.shop-btn:hover { color: var(--accent); background: var(--accent-soft); }

/* in-store mode: big tap targets, nothing else on the page */
.shop-mode-list { display: flex; flex-direction: column; }
.shop-tap { display: flex; gap: .7rem; align-items: center; cursor: pointer; padding: .6rem .2rem; border-bottom: 1px dashed var(--border); font-size: 1.05rem; }
.shop-tap:last-child { border-bottom: 0; }
.shop-tap.done { color: var(--muted); text-decoration: line-through; }

input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--green); flex: none; }

/* ---------- misc ---------- */

.grid-2 { columns: 2; }
@media (max-width: 560px) {
  .grid-2 { columns: 1; }
  /* keep clearance for the floating bar */
  main { padding: 1.4rem 1rem calc(5.2rem + env(safe-area-inset-bottom)); }
  .card { padding: 1.2rem; }
}

.empty { color: var(--muted); font-style: italic; }
.warn { color: var(--amber); }
.error { color: var(--danger); }
details > summary {
  cursor: pointer; color: var(--muted);
  font-size: .85rem; font-weight: 600;
  list-style: none;
  transition: color .2s var(--ease);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "›";
  display: inline-block;
  margin-left: .35rem;
  font-size: 1.15em; line-height: 1;
  transform: rotate(90deg);
  transform-origin: center;
  transition: transform .3s var(--spring);
}
details[open] > summary::after { transform: rotate(-90deg); }
details > summary:hover { color: var(--green); }
details[open] > *:not(summary) { animation: reveal .3s var(--ease) both; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* ---------- accessibility ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
  left: .6rem; top: .6rem; z-index: 60;
  background: var(--card); color: var(--green);
  padding: .6rem 1rem; border-radius: 10px;
  border: 2px solid var(--green); font-weight: 700; text-decoration: none;
}

/* ---------- bottom tab bar (mobile) ---------- */

.tabbar { display: none; }

/* a floating glass bar, detached from the screen edges — the same navigation
   on a phone and on a desktop, centred on the content column when there is
   room to spare. */
.tabbar {
  display: flex;
  position: fixed; z-index: 30;
  left: .55rem; right: .55rem;
  bottom: calc(.55rem + env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
  padding: .3rem;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}
.tabbar a {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem;
  min-height: 52px; padding: .4rem .15rem;
  border-radius: 18px;
  color: var(--muted); text-decoration: none;
  font-size: .66rem; font-weight: 700; line-height: 1.15; text-align: center;
  transition: color .25s var(--ease);
}
/* the lit pane that slides in under the active tab */
.tabbar a::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.85);
  box-shadow: 0 1px 2px rgba(70,55,25,.10);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .28s var(--ease), transform .28s var(--spring);
}
.tabbar a[aria-current] { color: var(--green); }
.tabbar a[aria-current]::before { opacity: 1; transform: none; }
.tabbar a:hover::before { opacity: .5; transform: none; }
.tabbar a[aria-current]:hover::before { opacity: 1; }
.tabbar a:active::before { opacity: 1; transform: scale(.94); }
.tabbar .ico, .tabbar .lbl { position: relative; }
.tabbar .ico {
  font-size: 1.28rem; line-height: 1;
  transition: transform .3s var(--spring);
}
.tabbar a[aria-current] .ico { transform: scale(1.12) translateY(-1px); }

/* ---------- finder (search page) ---------- */

.page-title { font-size: 1.5rem; margin: .2rem 0 .9rem; }

/* No card chrome: the search block is the page, not a box on it. */
.finder { display: flex; flex-direction: column; gap: .7rem; margin: 0 0 1.5rem; }

.tabs {
  display: flex; gap: .2rem; padding: .25rem;
  max-width: 460px;
  background: var(--glass-thin);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.tab {
  flex: 1; min-height: 40px;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .4rem .3rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: var(--muted); text-decoration: none;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--spring);
}
.tab:active { transform: scale(.96); }
.tab.on {
  background: rgba(255,255,255,.85);
  color: var(--green);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
}

.searchbar { display: flex; gap: .5rem; }
.searchbar input { flex: 1; min-width: 0; }
.searchbar .btn { flex: none; padding-inline: .85rem; }
.searchbar select { flex: 0 1 8rem; }

/* Every filter lives behind this one fold; the badge says how many are on. */
.filters > summary {
  min-height: 44px; width: fit-content;
  display: flex; align-items: center; gap: .45rem;
  padding: 0 .9rem; font-size: .9rem;
  border-radius: 999px;
  background: var(--glass-thin);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: color .2s var(--ease), transform .2s var(--spring), border-color .2s var(--ease);
}
.filters > summary:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.filters > summary:active { transform: scale(.97); }
.filters > summary .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.filters > *:not(summary) { margin-top: .8rem; }
.filters .chips legend { font-size: .82rem; color: var(--muted); font-weight: 600; padding: 0 0 .35rem; }

.selects { display: flex; flex-wrap: wrap; gap: .7rem; }
.selects .field { flex: 1 1 150px; margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.actions form { display: contents; }

/* checkbox chips — a real checkbox, visually hidden, its label is the chip */
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips input[type=checkbox] {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.chips label {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--glass-thin);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg);
  border: 1px solid var(--glass-ring);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  font-size: .87rem; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--spring);
}
.chips label:hover { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); transform: translateY(-1px); }
.chips label:active { transform: scale(.94); }
.chips input:checked + label {
  background: var(--green); color: #fff; border-color: var(--green);
  box-shadow: 0 6px 14px -8px var(--green), inset 0 1px 0 rgba(255,255,255,.3);
  animation: pop .32s var(--spring);
}
.chips input:focus-visible + label { outline: 3px solid var(--green-500); outline-offset: 2px; }

/* ---------- results ---------- */

.results-head { font-size: .9rem; font-weight: 600; color: var(--muted); margin: 0 0 .5rem; padding: 0 .2rem; }
.results {
  list-style: none; margin: 0;
  background: var(--gloss), var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-ring);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge);
}
.result {
  position: relative;
  padding: .7rem .5rem; border-radius: 12px;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.result + .result::before {
  content: "";
  position: absolute; top: 0; left: .5rem; right: .5rem;
  height: 1px; background: var(--border);
}
.result:hover { background: rgba(255,255,255,.55); transform: translateX(3px); }
/* chevron says the whole row is tappable — faint at rest (touch never hovers),
   full on hover */
.result-link::after {
  content: "›";
  position: absolute; right: .6rem; top: .7rem;
  color: var(--green); font-size: 1.2rem; line-height: 1.2;
  opacity: .3; transform: translateX(-3px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.result:hover .result-link::after { opacity: 1; transform: none; }
.result-link {
  display: block; padding: .15rem 1.4rem .15rem 0;
  font-weight: 700; font-size: 1.02rem;
  color: var(--fg); text-decoration: none;
}
.result-link:hover { color: var(--green); }
.result-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  margin: .25rem 0 0; color: var(--muted); font-size: .85rem;
}
.result-missing { margin: .3rem 0 0; font-size: .84rem; color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- staples ---------- */

.placards { margin-top: 1.4rem; }
.placards > summary { min-height: 44px; display: flex; align-items: center; gap: .4rem; padding: 0 .2rem; }
.staples { list-style: none; padding: 0; margin: .7rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.staples li { padding: 0; border: 0; }
.chip-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 38px; padding: .3rem .7rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.chip-btn:hover { background: var(--accent-soft); color: var(--accent-600); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.staple-add { display: flex; gap: .5rem; }
.staple-add input { flex: 1; }

/* ---------- page transitions ---------- */

/* Cross-document view transitions. Both documents name the tab pill the same
   thing, so the browser morphs it from the old tab to the new one instead of
   letting it teleport. Browsers without the API just navigate as before. */
@view-transition { navigation: auto; }

::view-transition-group(root) {
  animation-duration: .22s;
  animation-timing-function: var(--ease);
}

.tabbar a[aria-current]::before { view-transition-name: tab-pill; }

::view-transition-group(tab-pill) {
  animation-duration: .45s;
  animation-timing-function: var(--ease);
}
/* the group carries the travel; the squash rides on top of it, so the pill
   stretches into the move and settles back — liquid, not rigid */
::view-transition-image-pair(tab-pill) {
  animation: pill-squash .45s var(--ease) both;
}
@keyframes pill-squash {
  0%   { transform: none; }
  40%  { transform: scaleX(1.18) scaleY(.84); }
  70%  { transform: scaleX(.96) scaleY(1.05); }
  100% { transform: none; }
}

/* ---------- motion, only if it is welcome ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card, .result, .btn, .chips label, .tab, .nav a, .tabbar a { transform: none !important; }
  ::view-transition-group(root),
  ::view-transition-group(tab-pill),
  ::view-transition-image-pair(tab-pill) { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}