/* Taken from docs/mock/index.html, minus what stories 1 and 2 do not use. */

:root { --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f9fafb; --ok:#15803d; --okbg:#dcfce7; --miss:#b91c1c; --missbg:#fee2e2; --accent:#2563eb; }
* { box-sizing:border-box; }
/* Always reserve the scrollbar's space, so the long list and the short recipe page have the same width. */
html { scrollbar-gutter:stable; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
header { background:#fff; border-bottom:1px solid var(--line); padding:10px 20px; display:flex; align-items:center; gap:16px; }
header h1 { font-size:18px; margin:0; }
header h1 a { color:inherit; text-decoration:none; }
/* minmax(0, 1fr): the column takes the space that is left; wide content (the table) must not push it wider. */
main { display:grid; grid-template-columns: 320px minmax(0, 1fr); gap:20px; padding:20px; max-width:1200px; margin:0 auto; }
@media (max-width:800px) { main { grid-template-columns:minmax(0, 1fr); } }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; overflow-x:auto; }
.card h2 { font-size:15px; margin:0 0 10px; }
.card h2.title { font-size:20px; }
.card + .card { margin-top:16px; }
input[type=text], select { font:inherit; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid #d1d5db; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.link { border:none; background:none; color:var(--accent); padding:0; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { background:var(--okbg); color:var(--ok); border-radius:999px; padding:3px 8px 3px 10px; font-size:13px; display:inline-flex; gap:6px; align-items:center; }
.chip form { display:inline; margin:0; }
.chip button { border:none; background:none; color:inherit; padding:0; font-size:14px; line-height:1; }
.hint { color:var(--muted); font-size:13px; }
details { margin-top:12px; }
summary { color:var(--muted); font-size:13px; cursor:pointer; }
details select { margin-top:8px; max-width:100%; }
.filters { display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin-bottom:12px; }
.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 6px; border-top:1px solid var(--line); vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:500; border-top:none; }
td.num { text-align:right; white-space:nowrap; }
.bar { height:6px; background:var(--line); border-radius:3px; width:90px; display:inline-block; vertical-align:middle; margin-right:6px; }
.bar i { display:block; height:100%; background:var(--ok); border-radius:3px; }
.missing { color:var(--miss); font-size:13px; }
.tag { display:inline-block; font-size:12px; padding:1px 6px; border-radius:4px; margin-right:4px; }
.tag.ok { background:var(--okbg); color:var(--ok); } .tag.miss { background:var(--missbg); color:var(--miss); } .tag.assumed { background:var(--line); color:var(--muted); }
ul.ings { list-style:none; padding:0; margin:0; }
ul.ings li { padding:6px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
ul.ings .tag { min-width:64px; text-align:center; }
.thumb { width:72px; height:54px; object-fit:cover; border-radius:6px; background:var(--line); display:block; }
td.pic { width:80px; }
/* The height is reserved before the image loads (aspect-ratio), so the page does not jump; the grey is the placeholder. */
.hero { width:100%; aspect-ratio:2 / 1; max-height:320px; object-fit:cover; background:var(--line); border-radius:8px; margin-bottom:12px; display:block; }
.meta { color:var(--muted); font-size:13px; margin:4px 0 14px; }
.spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
.sugg label { display:flex; gap:8px; align-items:center; padding:3px 0; }
.sugg .row { margin-top:8px; }
.error { background:var(--missbg); color:var(--miss); padding:8px 10px; border-radius:6px; font-size:13px; margin:10px 0 0; }