:root { --surface-2:#f0f0ea; --bg:#fafaf7; --fg:#1d1d1b; --muted:#66665f; --card:#fff; --line:#dcdcd3; --accent:#1f5fbf; }
:root[data-theme="dark"] { --surface-2:#2a2c31; --bg:#16171a; --fg:#e8e8e3; --muted:#9a9a92; --card:#1f2024; --line:#32343a; --accent:#7aa7ee; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color:var(--accent); }
.ghost { background:none; border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:.3rem .6rem; font:inherit; cursor:pointer; min-height:36px; }
main { max-width:56rem; margin:0 auto; padding:1rem; outline:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; }
.muted { color:var(--muted); }
h1 { font-size:1.6rem; line-height:1.25; margin:.4rem 0 .6rem; }
h2 { font-size:1.2rem; margin:1.4rem 0 .4rem; }
.topic h2 { margin:0 0 .3rem; } .topic p { margin:.3rem 0; } .topic { margin-bottom:.8rem; }
.lede { font-size:1.1rem; } .meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.5rem 0 1rem; }
.chip { border:1px solid var(--line); border-radius:999px; padding:.15rem .7rem; font-size:.9rem; text-decoration:none; color:var(--fg); min-height:28px; display:inline-flex; align-items:center; }
.chip.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.badge { border-radius:4px; padding:.05rem .45rem; font-size:.8rem; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.03em; }
.more { display:inline-block; text-decoration:none; }
.search { display:flex; gap:.5rem; margin:.5rem 0 1rem; }
.search input { flex:1; min-width:0; font:inherit; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
.hits { list-style:none; padding:0; } .hit { margin-bottom:.7rem; } .hit h3 { margin:.2rem 0; } .hit p { margin:.2rem 0; }
mark { background:color-mix(in srgb, var(--accent) 30%, transparent); color:inherit; }
.sources { padding-left:0; list-style:none; } .sources li { margin:.6rem 0; scroll-margin-top:1rem; }
.sid { font-weight:700; margin-right:.4rem; }
.cite { text-decoration:none; font-size:.85em; }
.notes { padding-left:1.2rem; } .notes li { margin:.3rem 0; }
blockquote { margin:.6rem 0; padding:.1rem .9rem; border-left:3px solid var(--line); color:var(--muted); }
code { font-family:ui-monospace,Consolas,monospace; font-size:.9em; }
[aria-busy="true"] { opacity:.6; }
:root { --ok:#1d7a3a; --info:#1f5fbf; --warn:#b3261e; --weak:#7a6a1d; --callout:#fff6dc; }
:root[data-theme="dark"] { --ok:#6fcf8f; --info:#7aa7ee; --warn:#f2877f; --weak:#d6c26a; --callout:#2a2616; }
.badge.confirmed { color:var(--ok); border-color:var(--ok); }
.badge.reported { color:var(--info); border-color:var(--info); }
.badge.disputed { color:var(--warn); border-color:var(--warn); }
.badge.unverified { color:var(--weak); border-color:var(--weak); }
.claims { list-style:none; padding:0; }
.claims li { display:flex; gap:.7rem; align-items:flex-start; margin:.6rem 0; }
.claims .badge { flex:none; width:6.6rem; text-align:center; margin-top:.15rem; }
.timeline { list-style:none; margin:.6rem 0; padding:0 0 0 1.1rem; border-left:2px solid var(--line); }
.timeline li { position:relative; margin:0 0 1rem; }
.timeline li::before { content:""; position:absolute; left:calc(-1.1rem - 6px); top:.45rem; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.when { display:block; font-weight:700; font-variant-numeric:tabular-nums; }
.callout { background:var(--callout); border:1px solid var(--line); border-left:4px solid var(--weak); border-radius:8px; padding:.1rem 1rem .6rem; margin:1.4rem 0; }
.callout h2 { margin-top:.8rem; }
.flash { animation:flash 1.6s ease-out; }
@keyframes flash { from { background:color-mix(in srgb, var(--accent) 30%, transparent); } to { background:transparent; } }
@media (max-width:560px) {
  main { padding:.8rem; } h1 { font-size:1.4rem; }
  .claims li { flex-direction:column; gap:.2rem; } .claims .badge { width:auto; }
}
@media (min-width:900px) { main { padding:1.5rem; } .lede { font-size:1.2rem; } }
@media print {
  .topbar, .more, .search, .filters, .export, .topic-questions { display:none; }
  :root, :root[data-theme="dark"] { --bg:#fff; --fg:#000; --muted:#444; --card:#fff; --line:#bbb; --accent:#000; --callout:#fff; --ok:#000; --info:#000; --warn:#000; --weak:#000; }
  body { font-size:11pt; } main { max-width:none; padding:0; }
  section, .claims li, .timeline li, .sources li { break-inside:avoid; }
  a { text-decoration:none; } .sources a::after { content:" (" attr(href) ")"; font-size:.85em; word-break:break-all; }
  .cite::after { content:none; }
}

/* Sign-in / admin. Owner-only controls start hidden (data-role=guest in the HTML) so nothing flashes. */
:root[data-role="guest"] .needs-owner { display:none !important; }
.account { display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
a.ghost { text-decoration:none; display:inline-flex; align-items:center; }
.admin-list { list-style:none; padding:0; margin:1rem 0; display:grid; gap:.6rem; }
.admin-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.switch { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; cursor:pointer; }
.switch input { width:1.3rem; height:1.3rem; }
.err { color:#b3261e; flex-basis:100%; }
:root[data-theme="dark"] .err { color:#f2b8b5; }

/* Ask */
form.ask { display:grid; gap:.5rem; margin:1rem 0; }
form.ask textarea { font:inherit; padding:.6rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); resize:vertical; }
.ask-actions { display:flex; gap:.5rem; }
.question h3 { margin:0 0 .3rem; }
form.ask select { font:inherit; padding:.5rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); max-width:100%; }
.question-actions { margin-top:.5rem; }
.ghost.danger { color:#b3261e; }
:root[data-theme="dark"] .ghost.danger { color:#f2b8b5; }
.answer { white-space:pre-wrap; margin:.6rem 0; }

.export { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }

/* Top bar — same look and order as recipe-planner: brand, icon menus, theme toggle, then sign in / avatar. */
.topbar { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line); }
.topbar h1 { margin:0; font-size:1.25rem; }
.brand { text-decoration:none; color:var(--fg); font-weight:700; }
.nav-links { display:flex; gap:6px; }
.menu { position:relative; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.menu-toggle, .theme-toggle { display:flex; align-items:center; justify-content:center; padding:7px; border:1px solid transparent; border-radius:8px; background:none; color:var(--muted); cursor:pointer; }
.menu-toggle:hover, .theme-toggle:hover { background:var(--surface-2); color:var(--accent); }
.menu-toggle[aria-expanded="true"] { background:var(--surface-2); border-color:var(--line); color:var(--accent); }
.theme-toggle { margin-left:auto; }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.menu-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:10; display:flex; flex-direction:column; min-width:140px; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--card); box-shadow:0 6px 18px rgba(0,0,0,.14); }
.menu-panel[hidden] { display:none; }
.menu-panel a, .user-menu-item { display:block; width:100%; padding:7px 10px; border:none; border-radius:8px; background:none; color:var(--muted); font:inherit; font-size:.9rem; text-align:left; text-decoration:none; white-space:nowrap; cursor:pointer; }
.menu-panel a:hover, .user-menu-item:hover { background:var(--surface-2); color:var(--accent); }
.auth-control { display:flex; align-items:center; font-size:.9rem; }
.auth-control:empty { display:none; }
.auth-btn { padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--fg); font-weight:600; text-decoration:none; }
.auth-btn:hover { border-color:var(--accent); color:var(--accent); }
.menu-toggle.avatar-btn { padding:0; border:none; border-radius:50%; }
.menu-toggle.avatar-btn:hover, .menu-toggle.avatar-btn[aria-expanded="true"] { box-shadow:0 0 0 3px var(--surface-2); }
.avatar-circle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--bg); font-weight:700; line-height:1; }
.menu-panel.user-menu { left:auto; right:0; width:max-content; max-width:min(20rem, calc(100vw - 32px)); }
.user-menu-who { padding:8px 8px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; overflow-wrap:anywhere; font-weight:600; }
.user-menu-role { font-size:.8rem; font-weight:400; color:var(--muted); margin-top:2px; }
@media (max-width:560px) { .topbar { padding:10px 16px; gap:10px 12px; } }