/* ---- Colors: one place to change the look ---- */
:root {
  --bg: #f4f1ec;
  --card: #ffffff;
  --text: #1f1d1a;
  --muted: #6b665e;
  --border: #e2ddd4;

  /* One color per stage, so you can tell stages apart at a glance */
  --fermenting: #d97706;
  --dry-hopping: #4d7c0f;
  --conditioning: #0369a1;
  --carbonating: #7c3aed;
  --ready: #15803d;
  --packaged: #57534e;
  --empty: #9ca3af;

  /* Tank statuses (for tanks with no beer in them) */
  --cleaning: #0891b2;
  --maintenance: #b91c1c;

  /* A tank that needs an acid cycle before it's filled again */
  --acid-due: #a16207;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --card: #23211e;
    --text: #f2efe9;
    --muted: #a39d93;
    --border: #36332e;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* "hidden" always wins over our styles */
body.busy, body.busy * { cursor: progress !important; } /* while saving to the database */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}

/* ---- Sign-in and setup screens ---- */
.screen {
  max-width: 420px;
  margin: 48px auto;
  padding: 0 16px;
}
.screen form { display: grid; gap: 12px; margin-top: 16px; }
.screen label { display: grid; gap: 4px; color: var(--muted); font-size: 0.9rem; }
.screen input {
  font: inherit;
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}
.form-message {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--maintenance);
  color: var(--text);
}
.screen-message { text-align: center; color: var(--muted); margin-top: 48px; }
.screen h2 { font-size: 1.15rem; margin: 24px 0 8px; }
.screen form h2 { margin: 0; }
.choices { display: grid; gap: 12px; margin: 12px 0 20px; }
.btn.choice { display: grid; gap: 4px; text-align: left; padding: 16px; font-size: 1rem; }
.join-code { font-family: ui-monospace, Menlo, monospace; }
.actions.wrap { flex-wrap: wrap; }

/* ---- Header ---- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.top h1 { margin: 0; font-size: 1.6rem; }
.top p { margin: 2px 0 0; }

/* No signal: a band under the header saying how old the data is */
.update-banner {
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 8px 16px;
  background: var(--ready);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.offline-banner {
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  background: var(--acid-due);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Offline changes the database refused: stays until you tap OK */
.sync-problems {
  max-width: 1100px;
  margin: 0 auto 12px;
  padding: 12px 16px;
  border: 2px solid var(--maintenance);
  border-radius: 10px;
  background: var(--card);
}
.sync-problems ul { margin: 6px 0 10px; padding-left: 20px; }

/* ---- Tank area, grouped by location ---- */
#tanks {
  padding: 0 16px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.location + .location { margin-top: 24px; }
.location h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--muted); }

/* Card grid: 1 column on phones, more on wider screens */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.card {
  /* It's a <button> so it's tappable, but we want it to look like a card */
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--stage-color, var(--empty));
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}
.card:focus-visible { outline: 3px solid var(--conditioning); }

.card .tank-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card .tank { font-weight: 700; font-size: 1.15rem; }
.card .type { color: var(--muted); font-size: 0.85rem; }
.card .beer { font-size: 1.3rem; font-weight: 600; }
.card .beer .style { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.card .beer.none { color: var(--muted); font-weight: 400; }
.card .meta, .muted { color: var(--muted); font-size: 0.9rem; }

.card .stage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.badge {
  background: var(--stage-color, var(--empty));
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.days { font-size: 1.6rem; font-weight: 700; }

/* "Acid due · after Sour": on tank cards and in the tank form */
.acid-due {
  justify-self: start;
  margin: 0;
  background: var(--acid-due);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 999px;
}
dialog .acid-due { display: inline-block; margin-bottom: 8px; }
.days small { font-size: 0.85rem; font-weight: 400; color: var(--muted); }

/* ---- Lists below the tanks (packaged batches, beers) ---- */
.list-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 32px;
}
.list-section h2 { font-size: 1.1rem; margin: 0 0 8px; }
.list-section ul { list-style: none; margin: 0; padding: 0; }
.list-section .row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* Beer rows: name on one line, targets on the next, so every row lines up */
.list-section .row.stacked { flex-direction: column; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.section-head h2 { margin: 0; }

/* ---- Buttons ---- */
.btn {
  font: inherit;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.danger { color: #b91c1c; }
.btn.small { padding: 6px 10px; font-size: 0.85rem; }

/* Simple lists with a button on the right (acid styles, acid log) */
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; }
ul.plain .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* A text box with its Add button beside it */
.inline-add { display: flex; gap: 8px; margin-top: 12px; }
.inline-add input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}

.inline-add select, .inline-label select, ul.plain .item select {
  font: inherit;
  font-size: 16px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}
.inline-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; color: var(--muted); }
.inline-label select { min-width: 0; max-width: 100%; } /* (a long choice wraps under its label on a phone, never off the screen) */
ul.plain .item .who { min-width: 0; overflow-wrap: anywhere; }
ul.plain .item .controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Brewery settings: labels and dropdowns in a grid that becomes one column on phones */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}
.settings-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 0.9rem; }
.settings-grid select, #custom-field-form input {
  font: inherit;
  font-size: 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}

/* ---- Settings: a row of page buttons, then one page at a time ---- */
.settings-nav {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-nav button {
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.settings-nav button[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* What each level can do: permissions down the side, levels across */
.table-scroll { overflow-x: auto; }
.levels-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.levels-table th, .levels-table td { padding: 8px 3px; border-bottom: 1px solid var(--border); text-align: center; }
.levels-table th { font-size: 0.8rem; }
.level-summaries .item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.level-summaries select { font: inherit; font-size: 0.9rem; padding: 6px; max-width: 65%; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.levels-table th:first-child, .levels-table td:first-child { text-align: left; }
.levels-table input[type=checkbox] { width: 22px; height: 22px; }
/* On a phone the Admin column (always all ticked) is left out, so the table fits without scrolling sideways */
@media (max-width: 440px) { .levels-table .admin-col { display: none; } }

/* One person's permissions: a checkbox per permission, with where it comes from */
.permission-list .item label { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; margin: 0; }
.permission-list input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
.tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.tag.added { border-color: var(--ready); color: var(--ready); }
.tag.removed { border-color: var(--maintenance); color: var(--maintenance); }
.list-section .row.static { cursor: default; }

/* ---- The batch page ---- */
.batch-head .tank-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.batch-head h2 { font-size: 1.4rem; margin: 0; }
.batch-head .badge { background: var(--stage-color, var(--empty)); }
ul.plain.log-list .item { display: block; } /* (beats the side-by-side layout of other lists) */
.log-list .entry { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.log-list .entry.static { cursor: default; }
.log-list .when { font-weight: 600; }
.log-list .readings { color: var(--muted); font-size: 0.9rem; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.three-col input { min-width: 0; width: 100%; }
.check-label { display: flex !important; align-items: center; gap: 10px; color: var(--text) !important; font-size: 1rem !important; }
.check-label input { width: 22px; height: 22px; }
dialog fieldset.group, .recipe-pane fieldset.group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 4px; margin: 0 0 12px; }
dialog fieldset.group legend, .recipe-pane fieldset.group legend { font-weight: 600; padding: 0 4px; }
dialog fieldset.group p, .recipe-pane fieldset.group p { margin: 0 0 8px; }
#beer-menu textarea { font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }

/* ---- The brew-day sheet ---- */
.turn-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.turn-tabs { display: flex; gap: 6px; }
.turn-tabs button {
  font: inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer;
}
.turn-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.sheet-section { margin-top: 18px; }
.sheet-section h3 { font-size: 1rem; margin: 0 0 4px; }
.sheet-section .per { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.field .name { font-size: 0.95rem; }
.field .target { color: var(--muted); font-size: 0.8rem; }
.field input {
  font: inherit; font-size: 16px; padding: 8px; width: 120px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
}
.field input[type=text] { width: 100%; grid-column: 1 / -1; }
.field input[type=time] { width: 140px; }
.field .meter { display: flex; gap: 6px; align-items: center; }
.field .meter input { width: 92px; }
.field .result { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }
.field.off-target input { border: 2px solid var(--acid-due); }
.field .off { grid-column: 1 / -1; color: var(--acid-due); font-size: 0.8rem; font-weight: 600; }
.field.saved input { border-color: var(--ready); }

/* ---- Edit pop-up ---- */
dialog {
  border: none;
  border-radius: 14px;
  padding: 20px;
  width: min(420px, calc(100vw - 32px));
  background: var(--card);
  color: var(--text);
}
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog h2 { margin-top: 0; }

/* ---- Questions and messages (instead of the browser's pop-ups) ---- */
dialog.ask p { margin: 0 0 16px; white-space: pre-line; line-height: 1.4; }
dialog.ask input { width: 100%; margin-bottom: 16px; }
dialog.ask .actions { flex-direction: row-reverse; justify-content: flex-start; }
dialog.ask #ask-cancel { margin-right: auto; }
dialog.ask .btn.primary.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.toasts {
  /* a popover sits above everything, including an open form */
  /* at the top: at the bottom it would cover a form's buttons */
  /* Each side is set on its own, and the height is just the messages': Safari stretched the
     browser's own popover sizing to the full screen, which made one message fill it */
  position: fixed; top: 12px; top: max(12px, env(safe-area-inset-top)); right: 0; bottom: auto; left: 0;
  height: auto; min-height: 0; max-height: calc(100vh - 24px);
  margin: 0 auto; padding: 0 16px;
  width: min(480px, 100vw); border: none; background: none; overflow: visible;
  display: grid; gap: 8px; align-content: start;
  pointer-events: none; /* taps go through the empty space around the messages... */
}
.toasts .toast { pointer-events: auto; } /* ...but not through a message */
.toasts:not(:popover-open) { display: none; }
.toast {
  display: flex; align-items: center; gap: 12px; height: auto; align-self: start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--text); color: var(--bg);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
  white-space: pre-line;
}
.toast.error { background: #7f1d1d; color: #fff; }
.toast .toast-text { flex: 1; }
.toast button {
  font: inherit; font-weight: 600; background: none; border: none; color: inherit;
  padding: 4px 6px; cursor: pointer; text-decoration: underline;
}
.toast button.toast-close { text-decoration: none; font-size: 1.2rem; line-height: 1; opacity: 0.8; }

dialog label, .recipe-pane label {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}
dialog input, dialog select, .recipe-pane input, .recipe-pane select {
  font: inherit;
  font-size: 16px; /* 16px stops iPhones from zooming in when you tap a field */
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
dialog fieldset.acid {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin: 0 0 12px;
}
dialog fieldset.acid legend { font-weight: 600; padding: 0 4px; }
dialog fieldset.acid p { margin: 0 0 8px; }

/* The tank form's History: one row per batch that's been in the tank; long rows wrap on a phone */
#tank-history { min-width: 0; }
#tank-history .entry { overflow-wrap: anywhere; }
#tank-history-more { margin: 8px 0; }

.actions { display: flex; gap: 8px; margin-top: 8px; }
.actions .spacer { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two-col input, .two-col select { min-width: 0; width: 100%; }
.link {
  all: unset;
  cursor: pointer;
  display: block;
  margin-top: 14px;
  color: var(--muted);
  text-decoration: underline;
  font-size: 0.9rem;
}

/* "Far from target" limits (Settings → Brewery): spans the whole settings grid */
.settings-grid fieldset.limits {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; margin: 0;
}
.settings-grid fieldset.limits legend { font-weight: 600; padding: 0 4px; color: var(--text); }
.settings-grid fieldset.limits p { grid-column: 1 / -1; margin: 0; }
.settings-grid fieldset.limits input {
  font: inherit; font-size: 16px; padding: 8px; width: 90px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
}

/* ---- The printed brew-day sheet ---- */
/* Hidden on screen; on paper it's the only thing printed. Boxes are sized for handwriting. */
#print-sheet { display: none; }
@media print {
  @page { size: letter portrait; margin: 0.4in; }
  body { background: #fff !important; color: #000 !important; margin: 0; padding: 0; }
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; font: 9pt/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #000; }
  #print-sheet .muted { color: #444; }
  .print-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
  .print-head h1 { font-size: 16pt; margin: 2px 0 6px; }
  .print-head dl { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 14px; margin: 0; }
  .print-head dl div { display: flex; gap: 4px; align-items: baseline; }
  .print-head dl .wide { grid-column: 1 / -1; }
  .print-head dt { font-weight: 600; white-space: nowrap; }
  .print-head dt::after { content: ":"; }
  .print-head dd { margin: 0; min-width: 0.8in; border-bottom: 1px solid #999; }
  .print-head .wide dd { flex: 1; }
  .print-head .qr { text-align: center; width: 1.3in; font-size: 7pt; }
  .print-head .qr img, .print-head .qr canvas { width: 1.1in !important; height: 1.1in !important; margin: 0 auto 2px; }
  .print-head .qr .link { word-break: break-all; font-size: 7pt; }
  .print-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
  #print-sheet.one-column .print-columns { grid-template-columns: 1fr; }
  .print-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; break-inside: avoid; }
  .print-table th { text-align: left; font-size: 9pt; border-bottom: 1.5px solid #000; padding: 2px 4px; }
  .print-table th.target { font-weight: 400; color: #444; font-size: 7.5pt; }
  .print-table td { border: 1px solid #888; padding: 0 4px; height: 0.25in; }
  .print-table td.target { color: #444; font-size: 7.5pt; width: 0.85in; }
  .print-table td.box, .print-table th.box { width: 0.75in; text-align: center; }
  .print-table tr.tall td { height: 0.4in; }
  .print-table tr.tall td.box { text-align: left; }
  .print-table.ingredients td.lot, .print-table.ingredients th.lot { width: 2in; }
  .print-table.whole-batch td.box, .print-table.whole-batch th.box { width: 1.6in; text-align: left; }
  .print-table tr.notes td { height: 1.6in; vertical-align: top; padding-top: 3px; }
  .print-head dd { white-space: nowrap; }
  /* Repeats at the bottom of every printed page, in case the pages get separated */
  .print-foot { position: fixed; bottom: 0; left: 0; right: 0; text-align: right; font-size: 7pt; color: #666; }
}

/* Settings → Brew sheet: the field picker */
.picker-section { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 12px 0; position: relative; }
.picker-section legend { font-weight: 600; padding: 0 4px; }
.picker-section legend .muted { font-weight: 400; font-size: 0.85rem; }
.picker-all { display: flex; justify-content: flex-end; gap: 12px; font-size: 0.85rem; margin: -4px 0 2px; }
.pick { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border); }
.pick:last-child { border-bottom: 0; }
.pick input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.pick .muted { font-size: 0.8rem; margin-left: 4px; }
.picker-all .link { display: inline; margin: 0; text-decoration: underline; color: var(--muted); }
.pick-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.pick-row:last-child { border-bottom: 0; }
.pick-row .pick { flex: 1; border-bottom: 0; }
.pick-row .link { margin: 0; flex: none; font-size: 0.85rem; }
#field-target label.choice { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--text); }
#field-target label.choice input { width: auto; }

#sheet-ingredients { margin-top: 12px; }
#sheet-ingredients .actions { margin-top: 8px; }

/* A batch's numbers (OG, gravity now, ABV...) and fermentation chart */
.numbers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 12px; font-size: 0.95rem; }
.numbers .muted { font-size: 0.8rem; }
.chart { width: 100%; max-width: 760px; height: auto; display: block; } /* (a wide screen doesn't blow the labels up) */
.chart.ph-strip { margin-top: 2px; }
.chart polyline.ph { stroke: var(--carbonating); stroke-width: 2; }
.chart circle.ph { fill: var(--carbonating); }
.legend .key.ph { background: var(--carbonating); margin-left: 10px; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .target { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 12.5px; }
.chart polyline { fill: none; stroke-width: 2.5; }
.chart polyline.gravity { stroke: var(--fermenting); }
.chart polyline.temp { stroke: var(--conditioning); stroke-dasharray: 2 3; }
.chart circle.gravity { fill: var(--fermenting); }
.chart circle.temp { fill: var(--conditioning); }
.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85rem; }
.legend .key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.legend .key.gravity { background: var(--fermenting); }
.legend .key.temp { background: var(--conditioning); margin-left: 10px; }

/* Packaging */
.package-rows { display: grid; gap: 6px; margin: 8px 0; }
.package-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.package-row input { width: 90px; font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.package-summary { font-weight: 600; margin: 6px 0 2px; }
#package-editor label.choice { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--text); }
#package-editor label.choice input { width: auto; }
#own-package-form input { font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
#level-editor label.choice { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--text); }
#level-editor label.choice input { width: auto; }

/* Splits and blends */
.family { font-size: 0.9rem; margin: -6px 0 10px; }
.link.inline { display: inline; margin: 0; font-size: inherit; }
.source-row { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.source-row label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 0.9rem; }
.source-row label.choice input { width: 22px; height: 22px; flex: none; margin: 0; }
#blend-add { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
#blend-editor h3 { margin: 14px 0 4px; font-size: 1rem; }

/* Inventory */
.header-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* A phone: the buttons get their own row under the title (four buttons don't fit beside it) */
@media (max-width: 600px) {
  .top { flex-wrap: wrap; gap: 10px; }
  .top > div { flex: 1 1 100%; }
  .header-buttons { flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  .header-buttons .btn { padding: 8px 10px; font-size: 0.95rem; }
}
.help-btn { min-width: 44px; font-weight: 700; }

/* Help: one section of guide.html, shown in a dialog */
.help-body { line-height: 1.5; max-height: 70vh; overflow-y: auto; }
.help-body h2 { margin-top: 0; }
.help-body h3 { font-size: 1rem; margin: 14px 0 4px; }
.help-body ul, .help-body ol { padding-left: 1.3em; }
.help-body .ui { font-weight: 600; }
.help-body table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.help-body th, .help-body td { border-bottom: 1px solid var(--border); padding: 4px; text-align: left; }
.help-body a:not(.btn) { color: inherit; text-underline-offset: 2px; }
.help-body .table-wrap { overflow-x: auto; }
.help-body .tip { border-left: 3px solid var(--ready); padding: 4px 10px; }
.place-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.place-chips button { font: inherit; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.place-chips button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.inv-table th, .inv-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.inv-table th:first-child, .inv-table td:first-child { text-align: left; white-space: normal; }
.inv-table th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.inv-table tr.beer-row { cursor: pointer; }
.inv-table tr.batches td { font-size: 0.85rem; color: var(--muted); background: var(--card); }
.inv-table td.zero { color: var(--muted); }
.inv-table input { width: 64px; font: inherit; font-size: 16px; padding: 6px; text-align: right; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.inv-table input.changed { border: 2px solid var(--fermenting); }
dialog.wide { max-width: 720px; width: calc(100vw - 32px); }
#place-form { flex-wrap: wrap; }
#place-form input[name=name] { flex: 1 1 100%; } /* the name on its own line; location, kind, and Add below */
#reasons-form { display: grid; gap: 10px; }
#reasons-form label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); }
#reasons-form label.choice input { width: 22px; height: 22px; }
#reasons-form textarea { font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.par-row.under strong { color: var(--acid-due); }
.par-row .restock { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 0.9rem; }
.inv-tabs { max-width: 1100px; margin: 0 auto 12px; padding: 0 16px; }
.raw-item .restock { color: var(--acid-due); font-size: 0.85rem; }
.raw-item { cursor: pointer; }
.raw-item.under strong { color: var(--acid-due); }
.raw-lot { margin: 8px 0 0 10px; padding-left: 10px; border-left: 3px solid var(--border); font-size: 0.9rem; }
#raw-item-editor label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 8px 0; }
#raw-item-editor label.choice input { width: 22px; height: 22px; }
.sort-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sort-bar select { font: inherit; font-size: 0.95rem; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.line-no { display: inline-block; min-width: 1.8em; font-weight: 700; color: var(--muted); }
#line-editor label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 10px 0 4px; }
#line-editor label.choice input { width: 22px; height: 22px; }
#line-editor select, #line-editor input[name=label] { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.arrange-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Kicked kegs: a Kicked button beside each pouring line, and the month's kicks under the lines */
ul.plain.log-list .item.line-row { display: flex; align-items: center; gap: 8px; }
.log-list .line-row .entry { flex: 1; min-width: 0; width: auto; }
.line-row > .btn { flex: none; }
#kick-editor label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 8px 0; }
#kick-editor label.choice input { width: 22px; height: 22px; }
#kick-editor select, #kick-editor input[type=date] { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.kicked { margin-top: 18px; }
.kicked .section-head { flex-wrap: wrap; gap: 6px; }
.month-nav { display: inline-flex; align-items: center; gap: 8px; }
.kicked details { margin-top: 6px; }
.kicked details summary { cursor: pointer; color: var(--muted); }
.kicked details .item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kicked details .item .btn { margin-left: auto; }

/* Inventory views */
.place-chips .view-chip { border-style: dashed; }
.place-chips .add-view { font: inherit; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--muted); background: transparent; color: var(--muted); }
.view-table th.group { text-align: center; border-bottom: 1px solid var(--border); color: var(--text); }
.inv-table th:first-child, .inv-table td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.inv-table tr.under td:first-child strong, .inv-table td.under { color: var(--acid-due); font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; }
#view-editor label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 4px 0; }
#view-editor label.choice input { width: 20px; height: 20px; flex: none; }

/* API keys */
#key-form { display: grid; gap: 10px; margin-bottom: 12px; }
#key-form label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); }
#key-form label.choice input { width: 20px; height: 20px; flex: none; }
.new-key { border: 2px solid var(--ready); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; }
.new-key code { word-break: break-all; font-size: 0.95rem; background: var(--card); padding: 8px; border-radius: 6px; }
#key-list .item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Import */
#import-text { font: inherit; font-size: 14px; font-family: ui-monospace, monospace; width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.import-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
.import-map select { font: inherit; font-size: 15px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.import-table tr.problem td { color: var(--acid-due); }
.import-table tr.skip td { color: var(--muted); }
.import-table td.outcome { text-align: left; white-space: normal; min-width: 150px; }
#import-kind { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
#import-sheet-url { flex: 1; }
.import-table th:nth-child(2) { text-align: left; }

/* Recipes */
.recipe-preview { display: grid; gap: 6px; }
.recipe-preview label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); }
.recipe-preview label.choice input { width: 20px; height: 20px; }
.recipe-preview select { font: inherit; font-size: 15px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.recipe-notes { white-space: pre-wrap; }

/* Alerts */
.alerts-box details { border: 2px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--card); }
.alerts-box details.has-alerts { border-color: var(--acid-due); }
.alerts-box summary { cursor: pointer; }
.today-alerts { color: var(--acid-due); font-weight: 600; }
.alert-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
/* Today: to-dos first (each opens its item), then the alerts */
.today-counts { color: var(--muted); font-weight: normal; }
.today-head { margin: 10px 0 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.today-row .entry { all: unset; box-sizing: border-box; flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.today-row.late strong { color: var(--acid-due); }
.alert-group { padding: 8px 0; border-top: 1px solid var(--border); }
.alerts-box .alert-group details { border: 0; padding: 0; background: none; } /* (not the Today box's own border) */
.alert-group summary { cursor: pointer; }
.alert-group summary .muted { display: block; font-size: 0.9rem; margin-left: 1.1em; }
.alert-group > details > .btn { margin: 6px 0 0; }
.alert-rule label.choice { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 4px 0; }
.alert-rule label.choice input { width: 20px; height: 20px; flex: none; }
.alert-rule legend label.choice { font-weight: 600; }
.stage-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stage-days input, .alert-rule input[type=number] { width: 100%; font: inherit; font-size: 16px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
#alerts-form select { font: inherit; font-size: 16px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }

/* ---- Planning calendar: tanks down the side, days across the top ---- */
#calendar-view { max-width: 1100px; margin: 0 auto; padding: 0 16px 24px; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-toolbar .spacer { flex: 1; }
.cal-someday { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-someday:empty { display: none; }
.cal-grid {
  display: grid;
  grid-template-columns: minmax(64px, 110px) repeat(var(--days, 7), minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card);
}
.cal-grid > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.cal-head { padding: 6px; font-size: 0.85rem; font-weight: 600; text-align: center; background: var(--bg); }
.cal-head.today { color: var(--ready); }
.cal-group { grid-column: 1 / -1; padding: 6px 8px; font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--bg); }
.cal-tank { padding: 6px 8px; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.cal-cell { padding: 4px; min-height: 44px; display: flex; flex-direction: column; gap: 4px; background: none; border-top: none; border-left: none;
  font: inherit; color: inherit; text-align: left; }
button.cal-cell { cursor: pointer; }
.cal-cell.today { background: color-mix(in srgb, var(--ready) 8%, transparent); }
.cal-chip {
  display: inline-block; padding: 3px 6px; border-radius: 6px; font-size: 0.8rem; line-height: 1.25;
  background: color-mix(in srgb, var(--conditioning) 18%, var(--card)); border: 1px solid var(--conditioning);
  color: var(--text); text-align: left; overflow-wrap: anywhere; cursor: pointer; font-family: inherit;
}
.cal-chip.expected { background: none; border-style: dashed; border-color: var(--muted); color: var(--muted); }
.cal-chip.done { opacity: 0.6; text-decoration: line-through; }
.cal-chip.brew { border-color: var(--fermenting); background: color-mix(in srgb, var(--fermenting) 18%, var(--card)); }
.cal-chip.clash { border: 2px solid var(--maintenance); } /* after .brew, so a clash is always red */
.cal-key { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cal-key .cal-chip { cursor: default; }
.schedule-step { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.schedule-step select { flex: 1; }
.schedule-step input { width: 5.5em; }
.cal-chip.late { border: 2px dashed var(--maintenance); color: var(--text); }
.cal-chip.short { border: 2px solid var(--acid-due); }
.cal-chip.clash { border: 2px solid var(--maintenance); } /* a clash outranks a shortfall */
.short-list { margin: 0 0 12px; padding-left: 18px; }
.short-list li { margin-bottom: 6px; }
.order-late { color: var(--maintenance); font-weight: 600; }
.cal-chip.due { border: 2px solid var(--ready); background: color-mix(in srgb, var(--ready) 15%, var(--card)); color: var(--text); font-weight: 600; }
.schedule-step { flex-wrap: wrap; }
.schedule-step [data-gravity] { width: 5em; }

/* The printable week (Calendar → Print) */
@media print {
  @page week { size: letter landscape; margin: 0.35in; }
  #print-sheet.print-week { page: week; }
  .pw-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; }
  .pw-table th, .pw-table td { border: 1px solid #000; padding: 3px; vertical-align: top; text-align: left; }
  .pw-table thead th { background: #eee; }
  .pw-table tbody th { width: 11%; }
  .pw-table td { height: 28px; }
  .pw-item { margin-bottom: 2px; }
  .pw-item.expected { font-style: italic; color: #444; }
  .pw-item.done { text-decoration: line-through; color: #444; }
}
#cal-mine[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Settings → Menu, and a beer's menu details */
.menu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.menu-row input, .menu-row select { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.menu-row .menu-name { flex: 1 1 9em; min-width: 0; }
.menu-row select { flex: 0 1 auto; width: auto; }
.menu-row .menu-oz { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--muted); }
.menu-row .menu-oz input { width: 5em; }
.menu-row .menu-options { flex: 1 1 100%; }
.menu-row .menu-uses { flex: 1 1 100%; font-size: 0.85rem; }
.menu-row-buttons { display: flex; gap: 4px; }
.menu-add { margin-top: 10px; }
.menu-group { border: 0; padding: 0; margin: 8px 0; }
.menu-group legend { font-size: 0.9rem; color: var(--muted); padding: 0; }
.price-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.price-table th, .price-table td { text-align: left; padding: 4px 6px 4px 0; font-weight: 400; }
.price-table thead th { font-size: 0.85rem; color: var(--muted); }
.price-table input { width: 100%; min-width: 4em; }
.swatch { display: inline-block; width: 1em; height: 1em; border-radius: 3px; border: 1px solid var(--border); vertical-align: -2px; }
.beer-srm { white-space: nowrap; }

/* Settings → Menu → Menu boards */
.board-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.board-card h3, .board-card h4 { margin: 0 0 6px; font-size: 1.05rem; }
.board-settings { display: grid; gap: 6px; }
.board-settings input:not([type=checkbox]), .board-settings select, .board-url { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
.board-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
.board-link { border-top: 1px solid var(--border); padding: 8px 0 4px; }
.board-link .muted { font-size: 0.85rem; }
.board-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.board-link-row .board-url { flex: 1 1 12em; min-width: 0; font-size: 14px; }
.board-preview-dialog { width: min(96vw, 1100px); max-width: none; }
[data-preview-as][aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.board-frame { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.board-frame-print { background: #fff; max-height: 70vh; overflow-y: auto; padding: 0.4in; }

/* The board builder: settings beside a live preview (preview on top on a phone) */
.board-builder-dialog { width: min(96vw, 1200px); max-width: none; }
.builder { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.builder > *, .builder-controls fieldset { min-width: 0; } /* (the preview shrinks to fit, instead of pushing the page wider) */
.builder-controls { max-height: 72vh; overflow-y: auto; padding-right: 4px; }
.builder-preview { position: sticky; top: 0; }
@media (max-width: 760px) {
  .builder { grid-template-columns: 1fr; }
  .builder-preview { order: -1; position: static; }
  .builder-controls { max-height: none; overflow: visible; }
}
.builder-checks { display: grid; gap: 4px; margin: 8px 0; }
.builder-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.builder-choices button { font: inherit; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.builder-choices button[aria-checked="true"] { border: 2px solid var(--text); padding: 7px 9px; }
.builder-choices .muted { display: block; font-size: 0.8rem; }
.builder-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.builder-colors input[type="color"] { width: 100%; height: 40px; padding: 2px; }
.builder-contrast { margin: 6px 0 0; font-size: 0.9rem; }
.builder-contrast.warn { color: #b45309; font-weight: 600; }
.builder-contrast.bad { color: #b91c1c; font-weight: 600; }

/* A list you can put in order: drag the handle, or use the arrows */
.sortable { list-style: none; padding: 0; margin: 0; }
.sortable li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; background: var(--card); }
.sortable li.dragging { opacity: 0.6; outline: 2px dashed var(--text); }
.sortable .handle { cursor: grab; touch-action: none; user-select: none; padding: 4px 6px; color: var(--muted); font-size: 1.1rem; }
.sortable label { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; }
.sortable label input { width: 22px; height: 22px; margin: 0; }
.sortable .arrows button { font: inherit; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; }
.sortable .arrows button:disabled { opacity: 0.35; cursor: default; }
.board-card .board-summary { margin: 0 0 6px; font-size: 0.9rem; }
.board-taproom { margin-top: 16px; }
.board-taproom > h3 { margin: 0 0 4px; }
.board-frame-tv { aspect-ratio: 16 / 9; width: 100%; }
.board-frame-tv > .mb { height: 100%; }
.board-frame-public { max-height: 70vh; overflow-y: auto; width: min(100%, 420px); margin: 0 auto; }
@media print {
  #print-sheet.print-menu .mb { background: #fff; }
}
a.btn { text-decoration: none; display: inline-block; }

/* Settings → Menu → Fonts and logos */
.file-row { display: flex; align-items: center; gap: 10px; }
.file-row > div { flex: 1; min-width: 0; }
.file-thumb { height: 40px; width: 64px; object-fit: contain; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 4px; }
.font-sample { font-size: 1.15rem; }

/* The demo: the offer on the sign-in screen, and the bar inside a demo brewery */
.demo-offer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.demo-offer h2 { font-size: 1.1rem; margin: 0 0 6px; }
.demo-offer.highlight { border: 2px solid var(--text); border-radius: 12px; padding: 16px; }
.demo-bar { max-width: 1100px; margin: 0 auto 12px; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: space-between; background: #fef3c7; color: #422006; border-radius: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-bar { background: #3b2f12; color: #fde68a; } }
/* In a demo, what's switched off is hidden and a note says so (a class on <body>, so each control's own
   show/hide rules are left alone) */
body.in-demo [data-not-in-demo] { display: none !important; }
.demo-note { display: none; }
body.in-demo .demo-note { display: block; }

/* A record an API key wrote ("via My AI assistant") */
.tag.via-key { border-style: dashed; }

/* Suggested changes waiting for review (suggest-only API keys) */
.review-box { border: 2px dashed var(--text); border-radius: 12px; padding: 10px 14px; }
.review-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.review-row:last-child { border-bottom: 0; }
.review-row .actions { display: flex; gap: 6px; flex: none; }

/* The demo tour: a spotlight on what a step is about, and its words beside it (at the bottom on a phone) */
.tour-layer { position: fixed; inset: 0; z-index: 900; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55); pointer-events: none;
  outline: 3px solid #fbbf24; outline-offset: 2px; transition: top 0.25s, left 0.25s, width 0.25s, height 0.25s; }
.tour-card { position: fixed; background: var(--card); color: var(--text); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35); max-width: 420px; outline: none; }
.tour-card.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-width: none; }
.tour-card.tour-sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; max-height: 55vh; overflow-y: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.tour-card h2 { margin: 2px 0 6px; font-size: 1.2rem; }
.tour-text { margin: 0 0 12px; line-height: 1.45; }
.tour-count { margin: 0; font-size: 0.8rem; color: var(--muted); }
.tour-progress { display: flex; gap: 4px; margin-bottom: 8px; }
.tour-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.tour-progress span.done { background: var(--muted); }
.tour-progress span.on { background: #f59e0b; }
.tour-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tour-actions .spacer { flex: 1; }
.tour-actions .btn.link { background: none; border: none; text-decoration: underline; color: var(--muted); padding: 6px; }
.tour-tv { margin: 0 0 12px; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 8px; position: relative; background: #111110; }
.tour-tv-screen { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: top left; overflow: hidden; }
.tour-tv-screen > .mb { height: 100%; }
.demo-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Try it yourself: the next thing to tap pulses, and a small hint says what to do */
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 3px #f59e0b; } 50% { box-shadow: 0 0 0 7px rgb(245 158 11 / 0.35); } }
.coach-target { animation: coach-pulse 1.4s ease-in-out infinite; border-radius: 8px; position: relative; z-index: 1; }
.coach-hint { position: fixed; inset: auto; margin: 0; padding: 12px 14px; border: 2px solid #f59e0b; border-radius: 12px;
  background: var(--card); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 0.3); max-width: 340px; }
.coach-hint.coach-bottom { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; }
.coach-hint .coach-text { margin: 0 0 8px; line-height: 1.4; }
.coach-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tryit-list li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tryit-list li > div { flex: 1; min-width: 0; }
.tryit-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-weight: 700; }
.tryit-job.done .tryit-tick { background: var(--ready); border-color: var(--ready); color: #fff; }
.tryit-count { font-weight: 600; margin: 4px 0; }

/* An alert's thresholds, written as a sentence with boxes in it */
.alert-sentence { line-height: 2.2; }
.alert-rule .alert-sentence .param-input { width: 5.5em; padding: 4px 6px; font: inherit; display: inline-block; }
.alert-rule .alert-sentence .param-input.wide { width: min(85%, 22em); }

/* Packaged batches: the latest few, with a box to find older ones */
.packaged-tools { margin: 0 0 8px; }
.packaged-tools input { font: inherit; font-size: 16px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); box-sizing: border-box; }
#packaged-more { margin-top: 8px; }

/* The badger above the name on the sign-in screen */
.signin-logo { display: block; width: 88px; height: 88px; margin: 0 0 12px; }

/* The tank form: an empty tank not cleaned since its last batch left */
#clean-state.dirty { color: var(--acid-due); font-weight: 600; }

/* Settings → Cleaning: the buttons under every tank's recent cleanings */
.cleaning-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* ...or, in a form with no room around it, in the form under its title (pushing the fields down, never covering them) */
.coach-hint.coach-inline { position: static; margin: 0 0 12px; width: auto; max-width: none; box-shadow: none; }
.section-head .actions { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Recipes: the view (grouped as on a brew sheet), its versions, comparing, and the editor ---- */
.recipe-group-head { font-size: 0.95rem; margin: 14px 0 4px; }
.recipe-version { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.recipe-version .actions { margin-top: 0; flex-wrap: wrap; }
.recipe-diff .diff-mark { display: inline-block; width: 1.1em; font-weight: 700; }
.recipe-diff .diff-added .diff-mark, .recipe-diff .diff-added strong { color: var(--ready); }
.recipe-diff .diff-removed { color: var(--maintenance); }
.recipe-diff .diff-changed .diff-mark { color: var(--acid-due); }
.recipe-diff .diff-same { opacity: 0.7; }
.recipe-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .recipe-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recipe-group { border-top: 1px solid var(--border); padding: 4px 0 10px; }
/* One ingredient line: kind, name, amount, unit, when, per turn, the worked-out figure, and tools, on one row
   (supplier and note fold out below); on a phone it wraps into three short rows */
.recipe-targets input { width: 100%; min-width: 0; box-sizing: border-box; }
.recipe-row { display: grid; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--border);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto minmax(3.5em, auto) auto; }
.recipe-row > input[type=hidden] + input { grid-column: 1 / span 2; }
.recipe-row input, .recipe-row select { font: inherit; font-size: 15px; padding: 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box; }
.recipe-row input[type=checkbox] { width: 18px; height: 18px; padding: 0; }
.recipe-row .recipe-per-turn { white-space: nowrap; font-size: 0.85rem !important; gap: 4px !important; }
.recipe-row .recipe-derived { font-size: 0.85rem; text-align: right; white-space: nowrap; }
.recipe-row .recipe-tools { display: flex; gap: 2px; }
.recipe-row .recipe-tools .btn { padding: 4px 7px; min-width: 0; }
.recipe-row .recipe-more { grid-column: 1 / -1; font-size: 0.85rem; }
.recipe-row .recipe-more summary { cursor: pointer; color: var(--muted); }
.recipe-row .recipe-more .two-col { margin-top: 4px; }
@media (max-width: 720px) {
  .recipe-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .recipe-row > [data-f="name"], .recipe-row > select[data-f="kind"], .recipe-row > input[type=hidden] + input { grid-column: 1 / -1; }
  .recipe-row > [data-f="timing"] { grid-column: 1 / span 2; }
  .recipe-row .recipe-derived { grid-column: 1 / span 2; text-align: left; }
  .recipe-row .recipe-tools { justify-content: flex-end; }
}
.recipe-source { margin-top: 8px; }
/* A printed recipe */
#print-sheet.print-recipe .print-notes { white-space: pre-wrap; }
#print-sheet.print-recipe .print-notes-head { font-size: 11pt; margin: 10px 0 4px; }
#print-sheet.print-recipe .print-table { table-layout: fixed; width: 100%; }
#print-sheet.print-recipe .print-table th:first-child { width: 30%; }
#print-sheet.print-recipe .print-table th.box { width: 11%; }
/* Recipe estimates: next to the targets; one far from its target is marked */
.recipe-estimates { margin: 6px 0 10px; font-size: 0.9rem; display: grid; gap: 2px; }
.recipe-estimates .estimate-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.recipe-estimates .estimate-off b, .recipe-estimates .estimate-off { color: var(--acid-due); }
.recipe-row .recipe-number { font-size: 0.85rem; }

/* The Recipes page: the list on the side, and the recipe (or the editor) beside it; on a phone, one at a time */
.recipes-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start;
  max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; box-sizing: border-box; }
.recipes-side { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; min-width: 0; padding: 0 4px 0 0; margin: 0; }
.recipes-side select { max-width: 100%; }
.recipes-side .section-head { flex-wrap: wrap; gap: 6px; }
.recipes-side .section-head .actions { flex-wrap: wrap; margin-top: 0; }
.recipes-main { min-width: 0; padding-top: 8px; }
.recipes-main #recipe-title, .recipes-main #recipe-editor-title { margin-top: 0; }
#recipe-list .row.current { background: var(--card); outline: 2px solid var(--text); outline-offset: -2px; border-radius: 8px; }
.recipe-back { display: none; margin-bottom: 8px; }
#recipe-none { margin-top: 40px; text-align: center; }
@media (max-width: 860px) {
  .recipes-layout { grid-template-columns: minmax(0, 1fr); }
  .recipes-side { position: static; max-height: none; overflow: visible; }
  #recipes-view.showing .recipes-side { display: none; }
  #recipes-view:not(.showing) .recipes-main { display: none; }
  #recipes-view.showing .recipe-back { display: inline-block; }
}
/* A beer's recent batches: the table scrolls inside the form, never past its edge */
#beer-history .table-scroll { overflow-x: auto; max-width: 100%; }
#beer-history table { font-size: 0.85rem; }
#beer-history { min-width: 0; } /* (a fieldset otherwise grows to fit its widest table) */
/* The recipe editor on its page: the notes box like the other fields */
.recipe-pane textarea { font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; }
/* The recipe list put away (on a computer): the recipe takes the whole width; "☰ Recipes" brings the list back */
.recipes-show { display: none; margin-bottom: 8px; }
#recipes-hide { margin-left: auto; }
#recipes-view.list-hidden .recipes-layout { grid-template-columns: minmax(0, 1fr); }
#recipes-view.list-hidden .recipes-side { display: none; }
#recipes-view.list-hidden .recipes-show { display: inline-block; }
@media (max-width: 860px) {
  /* (on a phone the list and the recipe already take turns) */
  #recipes-hide, .recipes-show, #recipes-view.list-hidden .recipes-show { display: none; }
  #recipes-view.list-hidden:not(.showing) .recipes-side { display: block; }
}

/* ---- Setting up a new brewery (setup.js): six steps, in order, each skippable ---- */
.setup-page { max-width: 760px; }
.setup-steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.setup-step { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.setup-step.current { border-color: var(--text); }
.setup-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.setup-head .muted { overflow-wrap: anywhere; }
.setup-tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted); }
.setup-step.done .setup-tick { background: var(--dry-hopping); border-color: var(--dry-hopping); color: #fff; }
.setup-step.current .setup-tick { border-color: var(--text); color: var(--text); }
.setup-body { margin-top: 10px; }
.setup-body > p { margin: 0 0 10px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.setup-form label { display: grid; gap: 4px; margin-bottom: 12px; font-size: 0.9rem; color: var(--muted); min-width: 0; }
.setup-form input, .setup-form select, .setup-form textarea { font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box; }
.setup-cellar { display: grid; gap: 8px; margin-bottom: 8px; }
.setup-cellar-row { display: grid; grid-template-columns: 4em repeat(4, minmax(0, 1fr)); gap: 0 10px; align-items: center;
  border-top: 1px solid var(--border); padding-top: 8px; }
.setup-cellar-row label { margin-bottom: 4px; }
@media (max-width: 640px) {
  .setup-cellar-row { grid-template-columns: 1fr 1fr; }
  .setup-cellar-row strong { grid-column: 1 / -1; }
}
.other-starts { margin-top: 12px; }
.other-starts summary { cursor: pointer; color: var(--muted); }
#setup-nudge { padding-top: 0; padding-bottom: 0; }