/* Bru design system (claude.ai/artifact/SDAf9NukTUHxyZUKCvEQFf).
   Tokens below mirror project/tokens.json; component rules mirror components/bundle.css.
   Additions beyond the published system, each fixing a contrast flag it raises about itself:
   --accent-strong / --on-accent (button fills, links, wordmark), --control-border (input and
   secondary-button outlines), and the :focus-visible ring. */

:root {
  color-scheme: light dark;
  --bg: #faf8f4; --card: #ffffff; --fg: #2a2118; --muted: #7a6f63; --line: #e2dccf;
  --accent: #b5651d; --bad: #b3261e;
  --accent-strong: #a35a14;   /* 5.2:1 with --on-accent; 4.9:1 on --bg. Text, links, button fill */
  --on-accent: #ffffff;
  --control-border: #8c8174;  /* >= 3.5:1 on --bg and --card */
  --veil: rgba(250, 248, 244, .74);       /* over the photo, behind everything */
  --card-glass: rgba(255, 255, 255, .90); /* frosted surface for cards, bars and chips: keeps text >= 4.5:1 over the photo's worst pixel */
  --chart-temperature: #3b82c4; --chart-hydrometer: #2e9e5b; --chart-refractometer: #9b59b6; --chart-chamber: #1f9d9d;
  --font-sans: system-ui, sans-serif; --font-mono: ui-monospace, monospace;
  --space-2: 2px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-4: 4px; --space-24: 24px; --space-16: 16px; --space-20: 20px; --content-max: 960px;
  --radius-control: 8px; --radius-card: 10px; --radius-pill: 99px; --radius-round: 50%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1612; --card: #241f19; --fg: #efe8dd; --muted: #a59a8c; --line: #3a332a;
    --accent: #e0913f; --bad: #f2837b;
    --accent-strong: #e0913f;  /* 7.1:1 on --bg */
    --on-accent: #1a1612;      /* 7.1:1 on the accent fill (white would be 2.5:1) */
    --control-border: #7a6f63;
    --veil: rgba(26, 22, 18, .72);
    --card-glass: rgba(36, 31, 25, .88);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Background photo (pre-blurred, 44 KB). A fixed layer rather than background-attachment: fixed, which iOS ignores. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--veil), var(--veil)), url("bg-bar.jpg") center / cover no-repeat; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--font-sans); }
a { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 0 0 var(--space-10); line-height: 1.3; }
p { margin: 0 0 var(--space-10); }
b, strong { font-weight: 650; }
code { font-family: var(--font-mono); font-size: .85em; overflow-wrap: anywhere; }
.card, h1, h2, p, .lead { overflow-wrap: anywhere; }

/* ---------- shell: top bar (desktop), sub-menu, bottom tab bar (phone) ---------- */
.topbar { background: var(--card-glass); border-bottom: 1px solid var(--line); }
.topbar .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); max-width: var(--content-max); margin: 0 auto; padding: var(--space-12) var(--space-16); }
.brand { display: inline-flex; align-items: center; gap: var(--space-10); font-weight: 700; color: var(--accent-strong); text-decoration: none; font-size: 1.25rem; letter-spacing: -.01em; }
.brand img { display: block; border-radius: 7px; }
.login { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); margin: var(--space-24) 0 var(--space-16); }
.login img { border-radius: 16px; }
.primary { display: none; gap: var(--space-4); }
.primary a, .tabbar a { position: relative; color: var(--fg); text-decoration: none; font-weight: 500; }
.primary a { padding: var(--space-8) var(--space-12); border-radius: var(--radius-control); }
.primary a:hover, .subnav a:hover { background: var(--bg); }
.primary a[aria-current], .tabbar a[aria-current] { color: var(--accent-strong); }
.primary a[aria-current] { background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent-strong); }
.badge { display: inline-block; min-width: 1.35em; margin-left: var(--space-6); padding: 0 var(--space-6); border-radius: var(--radius-pill); background: var(--accent-strong); color: var(--on-accent); font-size: .75rem; font-weight: 700; line-height: 1.35em; text-align: center; }
.subnav { display: flex; gap: var(--space-6); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-16) var(--space-10); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; background: var(--card-glass); padding: var(--space-6) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--fg); text-decoration: none; font-size: .9rem; }
.subnav a[aria-current] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--space-6); font-size: .8rem; text-align: center; }
.tabbar a[aria-current]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent-strong); }
.tabbar .badge { margin-left: var(--space-4); }

main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-16) var(--space-16) calc(80px + env(safe-area-inset-bottom)); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10); margin: var(--space-4) 0 var(--space-14); }
.page-head .actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.lead { color: var(--muted); max-width: 62ch; }

/* ---------- text that sits directly on the photo gets a frosted backing ---------- */
main > p:not(.actions), main > .lead, .section-title, .login .muted, p.credit {
  background: var(--card-glass); border-radius: var(--radius-control); padding: var(--space-6) var(--space-12);
  width: fit-content; max-width: 100%; }
.section-title { display: flex; width: auto; padding: var(--space-8) var(--space-12); }
p.credit { margin: var(--space-16) 0 0; font-size: .78rem; color: var(--muted); }

/* ---------- cards and figures ---------- */
.card { background: var(--card-glass); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-14); margin-bottom: var(--space-14); }
.card.alert { border-color: var(--accent); }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-10); }
.stat { text-align: center; }
.stat b { display: block; font-size: 1.5rem; line-height: 1.25; }
.stat span { color: var(--muted); font-size: .85rem; }
.muted { color: var(--muted); }
.err { color: var(--bad); }
.tag { display: inline-block; padding: 1px var(--space-8); border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: .8rem; font-weight: 400; vertical-align: middle; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: var(--radius-round); border: 1px solid var(--line); vertical-align: middle; }
.chart { position: relative; height: 260px; }
.scroll { overflow-x: auto; }
.linklist { padding: 0; overflow: hidden; }
.linklist a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-14); border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.linklist a:last-child { border-bottom: 0; }
.linklist a:hover { background: var(--bg); }

/* ---------- dashboard cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-14); margin-bottom: var(--space-14); }
.batch-card { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; }
.batch-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); }
.batch-card .head a { font-size: 1.15rem; font-weight: 650; text-decoration: none; color: var(--fg); }
.batch-card .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
.batch-card .stats b { display: block; font-size: 1.2rem; line-height: 1.3; }
.batch-card .stats span { color: var(--muted); font-size: .75rem; }
.spark { width: 100%; height: 40px; display: block; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.progress { height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent-strong); }
.foot { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--muted); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-20) 0 var(--space-10); }
.section-title h2 { margin: 0; }

/* ---------- forms and buttons ---------- */
label { display: block; font-size: .85rem; color: var(--muted); margin: var(--space-10) 0 var(--space-2); }
input, select, textarea, button, .btn { font: inherit; padding: var(--space-10) var(--space-12); min-height: 44px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--bg); color: var(--fg); width: 100%; }
textarea { min-height: 88px; }
input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: var(--accent-strong); }
button, .btn { width: auto; cursor: pointer; background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }
button.secondary, .btn.secondary { background: transparent; color: var(--fg); border-color: var(--control-border); }
button.danger, .btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
button.compact, .btn.compact { padding: var(--space-6) var(--space-12); min-height: 34px; font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.row > * { flex: 1 1 160px; }
.row.actions > * { flex: 0 0 auto; }
.row.actions { align-items: center; }
.check { display: flex; align-items: center; gap: var(--space-8); }
.check label { margin: 0; color: var(--fg); font-size: .95rem; }
details summary { cursor: pointer; color: var(--accent-strong); margin-bottom: var(--space-8); min-height: 32px; display: list-item; }
.rowform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
.rowform:last-child { border-bottom: 0; }
.rowform label { margin: 0 0 var(--space-2); font-size: .78rem; }
.rowform .btns { display: flex; flex-wrap: wrap; gap: var(--space-8); grid-column: 1 / -1; }
.rowform .btns button { flex: 1 1 auto; }
textarea.big { min-height: 240px; font-family: var(--font-mono); font-size: .85rem; }

/* ---------- tables: scroll on desktop, cards on phones ---------- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: var(--space-8); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; }

/* ---------- schedule steps ---------- */
.step-item { padding: var(--space-10) 0; border-bottom: 1px solid var(--line); }
.step-item:last-of-type { border-bottom: 0; }
.step-main { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); }
.step-actions { display: flex; gap: var(--space-6); flex: 0 0 auto; }
.step-item details { margin-top: var(--space-6); }
.step-item details summary { margin: 0; font-size: .9rem; }

/* ---------- tabs on the batch page (enhanced by batch.js; without scripts every panel simply shows) ---------- */
.tabs { display: none; gap: var(--space-4); margin: 0 calc(var(--space-16) * -1) var(--space-14); padding: 0 var(--space-16); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.js .tabs { display: flex; background: var(--card-glass); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tabs a { flex: 1 1 auto; text-align: center; padding: var(--space-10) var(--space-6); font-size: .92rem; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--accent-strong); }
.js .tab-panel[hidden] { display: none; }

/* ---------- brew-day sheet ---------- */
.box { width: 1.6em; font-size: 1.1rem; }
.step { margin: var(--space-6) 0; }
td.blank { border-bottom: 1px solid var(--fg); min-width: 8em; }

footer { max-width: var(--content-max); margin: 0 auto; padding: var(--space-16); color: var(--muted); font-size: .85rem; }

/* ---------- phones (stack tables and wide forms) ---------- */
@media (max-width: 719px) {
  table.stack, table.stack tbody { display: block; }
  table.stack tr.thead { display: none; }
  table.stack tr { display: block; margin-bottom: var(--space-10); padding: var(--space-4) var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg); }
  table.stack td { display: block; position: relative; min-height: 1.6em; padding: var(--space-6) 0 var(--space-6) 38%; border: 0; text-align: left; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: var(--space-6); width: 34%; color: var(--muted); font-size: .85rem; line-height: 1.6; }
  table.stack td:not([data-label]) { padding-left: 0; }
  table.stack td:not([data-label]) form { display: flex; justify-content: flex-end; }
  .rowform > * { min-width: 0; }
  .rowform [style*="span 2"] { grid-column: 1 / -1 !important; }
  .row.actions > button, .row.actions > .btn { flex: 1 1 auto; }
  .page-head .actions .btn, .page-head .actions button { flex: 1 1 auto; }
}

/* very narrow phones: two figures per row instead of squeezing four */
@media (max-width: 359px) {
  .batch-card .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); }
}

/* ---------- tablets and desktop ---------- */
@media (min-width: 720px) {
  .primary { display: flex; }
  .tabbar { display: none; }
  main { padding-bottom: var(--space-24); }
  h1 { font-size: 1.7rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .chart { height: 320px; }
  .rowform { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .rowform .btns { flex-wrap: nowrap; }
  .rowform .btns button { flex: 0 0 auto; }
  .tabs { margin: 0 0 var(--space-14); padding: 0; }
  .tabs a { flex: 0 0 auto; padding: var(--space-10) var(--space-16); font-size: 1rem; }
  button, .btn, input, select { min-height: 40px; }
  .foot { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ---------- printing ---------- */
@media print {
  :root { --bg: #fff; --card: #fff; --card-glass: #fff; --fg: #000; --muted: #444; --line: #999; --control-border: #666; --accent: #000; --accent-strong: #000; }
  .no-print, .topbar, .tabbar, p.credit { display: none !important; }
  body::before { display: none; }
  body { font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .card { break-inside: avoid; border-color: #999; }
  a { color: #000; text-decoration: none; }
}

/* ---------- no photo for people who ask for more contrast or less data ---------- */
@media (prefers-contrast: more) {
  body::before { display: none; }
  :root { --card-glass: var(--card); }
}
@media (prefers-reduced-data: reduce) {
  body::before { background: var(--bg); }
}