/* ============================================================================
   Barista Pro field guide
   A precision instrument, not a cafe. Cool greys carry everything; the accent
   is restricted to numeric values and the active tab indicator, nothing else.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  --paper:    #FAFAFB;   /* near-white page, cool rather than cream */
  --surface:  #FFFFFF;   /* cards */
  --sunken:   #F0F1F5;   /* pills, segmented control, callouts */
  --ink:      #14161A;
  --muted:    #5E636D;   /* brief's #71757E is 4.30:1 on --paper, below AA */
  --hairline: #E3E6EB;
  --accent:   #C2410C;   /* numerals and the active tab, nothing else */
  --done:     #6E737C;   /* brief's #9AA0A6 is 2.46:1; completed steps still read */

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:      10px;
  --gap:    8px;
  --tap:    48px;
  --pad:    16px;
  --shell:  680px;
  --t:      200ms;
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --rail:   0px;
}

/* Dark follows the system setting, no manual toggle. To force light for
   everyone, change the line below to @media not all and delete nothing else. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #101215;
    --surface:  #191C21;
    --sunken:   #12151B;
    --ink:      #F2F3F5;
    --muted:    #9AA0AA;
    --hairline: #262A31;
    --accent:   #F97316;
    --done:     #868C96;
  }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

button, input { font: inherit; color: inherit; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Every numeral in the app. This is what makes it feel like an instrument. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* Quantities in running prose: mono and tabular, but not accented. The accent
   stays on the places where the number itself is the point. */
.q {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

.ic { display: block; flex: none; }

/* --- Shell --------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-left: var(--rail);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Height is fixed so the coffee-type button appearing cannot shift the page. */
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--pad) 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.topbar h1 { font-size: 19px; }
.topbar .crumb {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topbar .crumb[hidden] { display: none; }

/* Selected coffee, riding in the bar once the picker scrolls away. */
.topbar .jump {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 2px 0 12px;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.topbar .jump[hidden] { display: none; }
.topbar .jump:active { opacity: .6; }
.topbar .jump .chev {
  color: var(--muted);
  transform: rotate(180deg);
}

.main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--pad) 28px;
}

.pane[hidden] { display: none; }

.lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 17px;
}

.sectionhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 10px;
  color: var(--muted);
}
.sectionhead:first-child { margin-top: 0; }
.sectionhead h2 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Tab bar ------------------------------------------------------------- */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 1px 7px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--t) var(--ease);
}
.tabbar button .ic { transition: transform var(--t) var(--ease); }
.tabbar button:active .ic { transform: scale(.9); }

.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--accent);
}

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
.card + .card { margin-top: 12px; }

.group { margin-bottom: 18px; }

.grouphead {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
}
.group.open .grouphead {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.grouphead h2 { flex: 1 1 auto; font-size: 18px; }
.grouphead .ic:first-child { color: var(--muted); }

.progress {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.progress b { color: var(--accent); font-weight: 400; }

.groupbody {
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--surface);
  padding: 4px 0 0;
}
.group:not(.open) .groupbody { display: none; }
.group:not(.collapsible) .grouphead { pointer-events: none; }
.group:not(.collapsible) .grouphead .chev { display: none; }

.groupintro {
  margin: 8px 14px 12px;
  color: var(--muted);
  font-size: 17px;
}

.grouphead .chev,
.acc .chev { color: var(--muted); transition: transform var(--t) var(--ease); }
.group.open .grouphead .chev,
.acc[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* --- Step rows ----------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; }

.step { border-top: 1px solid var(--hairline); }
.steps > .step:first-child { border-top: 0; }

.steprow {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 8px 0 6px;
}

/* Tick target, deliberately separate from the expand target. */
.tick {
  flex: none;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background var(--t) var(--ease);
}
.tick:active { background: var(--hairline); }
.tick span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}

/* The expand target: the whole rest of the row, for wet thumbs. */
.acc {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 4px 10px 2px;
  transition: opacity var(--t) var(--ease);
}
.acc:active { opacity: .6; }
.acc .action {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 1.35;
  position: relative;
}
.acc .chip {
  flex: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--accent);
  white-space: nowrap;
}

.step.done .tick span {
  background: var(--done);
  border-color: var(--done);
  color: var(--surface);
}
/* Strike the glyphs, not the whole flex track, or the rule runs out under
   the chip. */
.step.done .acc .action {
  color: var(--done);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.step.done .acc .chip { color: var(--done); }

.detail {
  display: none;
  padding: 0 14px 16px 56px;
}
.step.open .detail { display: block; }

.detail p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.detail p:last-child { margin-bottom: 0; }

.detail .stretchlist {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.detail .stretchlist li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-size: 16px;
}
.detail .stretchlist li span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 14px;
}

/* --- Controls ------------------------------------------------------------ */









.rowbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.rowbtn.reset { border-top: 1px solid var(--hairline); width: 100%; }
.rowbtn:active { opacity: .6; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ink);
  font-size: 16px;
}
.link .ic { color: var(--muted); }
.link:active { opacity: .6; }

.outro {
  margin: 4px 14px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 17px;
}
.outro p { margin: 0 0 6px; }

/* --- Pill labels for physical buttons ------------------------------------ */
.pill {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--sunken);
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  vertical-align: 1px;
}

/* --- Callouts ------------------------------------------------------------ */
.callout {
  margin: 12px 14px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--sunken);
  font-size: 16px;
}
.callout .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 15px;
}
.callout p { margin: 0 0 8px; color: var(--muted); }
.callout p:last-child { margin: 0; }
.callout ul { margin: 0; padding-left: 20px; color: var(--muted); }
.callout ul li { margin-bottom: 6px; }
.callout ul li:last-child { margin-bottom: 0; }

/* --- Timers -------------------------------------------------------------- */
.timer {
  margin: 0 14px 16px 56px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.timer .face {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 16px 0 6px;
}
.timer .face .t {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.timer .face .u { font-family: var(--mono); font-size: 15px; color: var(--muted); }





.timer .verdict {
  margin: 8px 14px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.timer .verdict:empty { display: none; }
/* Stop and Reset get a real gap. Reaching for Stop mid-shot and landing on
   Reset loses the time, which is the whole point of the control. */
.timer .acts {
  display: flex;
  gap: var(--gap);
  padding: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--hairline);
}
.timer .acts button {
  flex: 1 1 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.timer .acts button:active { background: var(--sunken); }

.timer .opts {
  display: flex;
  gap: var(--gap);
  padding: 12px 12px 0;
}
.timer .opts button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 6px 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
}
.timer .opts button[aria-selected="true"] { color: var(--ink); border-color: var(--done); }
.timer .opts button b {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--accent);
}

/* --- Drinks -------------------------------------------------------------- */
.drinkgrid { display: grid; gap: 12px; align-items: start; }

.drink { padding: 12px 14px 4px; }

/* Figure bottom-aligns with the name block so the drink appears to sit on the
   type baseline. The 64px box is kept intact, which is what holds every drink
   to one scale. */
.drink .top { display: flex; gap: 12px; align-items: flex-end; }
.drink .fig {
  flex: none;
  width: 64px;
  height: 64px;
  margin-bottom: -8px;
  color: var(--muted);
}
.drink .id { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
.drink h3 { font-size: 19px; }
.drink .cup { margin: 2px 0 0; font-size: 15px; color: var(--muted); }

.spec { margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.spec div {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 16px;
}
.spec div:first-child { padding-top: 8px; }
.spec dt { flex: none; width: 58px; color: var(--muted); font-size: 15px; }
.spec dd { margin: 0; }
/* Only the numeral takes the accent. The words around it stay in the body face. */
.spec dd .q { color: var(--accent); font-size: 15px; }

.drink .notes {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
.drink .make {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 15px;
}
.drink .make:active { opacity: .6; }

.footnote {
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}
.footnote b { color: var(--ink); font-weight: 600; }

/* --- Checklists ---------------------------------------------------------- */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { border-top: 1px solid var(--hairline); }
.checks li:first-child { border-top: 0; }
.checks button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  font-size: 17px;
  line-height: 1.35;
}
.checks .box {
  flex: none;
  margin-top: 2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  color: transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.checks li.done .box {
  background: var(--done);
  border-color: var(--done);
  color: var(--surface);
}
.checks li.done span:last-child {
  color: var(--done);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- Fix ----------------------------------------------------------------- */
.emergency {
  margin-bottom: 20px;
  padding: 14px;
  border: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
}
.emergency .head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--accent);
}
.emergency .head h2 { font-size: 18px; color: var(--ink); }
.emergency .lede { margin: 0 0 12px; font-size: 16px; color: var(--muted); }
.emergency ol { margin: 0; padding: 0; list-style: none; counter-reset: e; }
.emergency ol li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 17px;
  line-height: 1.45;
}
.emergency ol li::before {
  counter-increment: e;
  content: counter(e);
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.emergency .rule {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 17px;
  font-weight: 600;
}

.searchwrap { position: relative; margin-bottom: 12px; }
.searchwrap .ic {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.searchwrap input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 40px 0 42px;
  font-size: 16px;            /* 16px minimum or Safari zooms on focus */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  appearance: none;
}
.searchwrap input::placeholder { color: var(--muted); }
.searchwrap .clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.symptom .acc { padding-left: 14px; }
.symptom .acc .action { font-size: 17px; }
.symptom .detail { padding-left: 14px; }
.symptom .detail dl { margin: 0; }
.symptom .detail dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.symptom .detail dd { margin: 0 0 10px; font-size: 17px; }
.symptom .detail dd:last-child { margin: 0; }
.symptom .flag {
  flex: none;
  color: var(--accent);
}
.empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 16px; }

/* --- Learn --------------------------------------------------------------- */
.article .acc { padding-left: 14px; align-items: flex-start; }
.article .acc .ic:first-child { margin-top: 2px; color: var(--muted); }
.article .acc .action { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.article .acc .sub {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.article .detail { padding: 0 16px 18px; }
.article .detail h4 {
  margin: 20px 0 8px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.article .detail p { color: var(--ink); }
.article .detail p .lead { font-weight: 600; }
.article .detail ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 17px; }
.article .detail ul li { margin-bottom: 7px; line-height: 1.5; }
.article .detail dl { margin: 0 0 12px; }
.article .detail dt { font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.article .detail dd { margin: 0 0 12px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.article .detail .rows { border-top: 1px solid var(--hairline); margin: 4px 0 14px; }
.article .detail .rows div { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.article .detail .rows b { display: block; font-size: 17px; margin-bottom: 2px; }
.article .detail .rows span { color: var(--muted); font-size: 16px; }
.article .detail .note {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--sunken);
  font-size: 17px;
  line-height: 1.5;
}

/* --- Cycle cards --------------------------------------------------------- */
.cyclemeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--accent);
}
.needs {
  margin: 0 14px 12px;
  font-size: 16px;
  color: var(--muted);
}

/* --- Add to home hint ---------------------------------------------------- */
.a2hs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  font-size: 15px;
  color: var(--muted);
}
.a2hs .ic:first-child { color: var(--ink); }
.a2hs p { margin: 0; flex: 1 1 auto; }
.a2hs button { width: 44px; height: 44px; display: grid; place-items: center; margin: -10px -8px -10px 0; }

/* --- Step detail as a list ------------------------------------------------ */
/* Indented dot points read as subordinate to the action line and are easier
   to follow on a phone than a slab of grey text. */
.detail .why {
  list-style: none;
  margin: 0 0 2px;
  padding: 0;
}
.detail .why li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 16px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.detail .why li:last-child { margin-bottom: 0; }

/* Shot result bands. The range is the number that matters, so it carries the
   accent; the advice beside it stays body copy. */
.detail .bands { margin-top: 12px; }
.detail .bands li { color: var(--ink); }
.detail .bands .q {
  display: inline-block;
  min-width: 3.6em;
  color: var(--accent);
  margin-right: 6px;
  white-space: nowrap;
}
.detail .why li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--done);
}

/* --- Inline glossary cards ----------------------------------------------- */
.termcards { list-style: none; margin: 14px 0 0; padding: 0; }
.termcards li + li { margin-top: 8px; }
.termcards button {
  display: flex;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  text-align: left;
}
.termcards button:active { opacity: .6; }
.tc-ic { flex: none; color: var(--muted); margin-top: 1px; }
.tc-b { display: block; min-width: 0; }
.tc-b b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.tc-b > span { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* --- Drink picker -------------------------------------------------------- */
.picker .progress { color: var(--muted); font-family: var(--sans); font-size: 14px; }

.drinkpick {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0 14px 14px;
}
.drinkpick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 96px;
  padding: 6px 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}
.drinkpick button:active { background: var(--sunken); }
.drinkpick .fig { color: var(--muted); }
.drinkpick button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
}
.drinkpick button[aria-pressed="true"] .fig { color: var(--ink); }

/* --- Section heads inside a group ---------------------------------------- */
.sectionhead.branchhead { margin: 12px 14px 6px; }
.sectionhead.subhead    { margin: 16px 14px 6px; }

/* --- Timer note ---------------------------------------------------------- */


/* --- Terms tab ----------------------------------------------------------- */
.termlist { list-style: none; margin: 0; padding: 0; }
.termlist li {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 8px;
}
.termlist li:last-child { margin-bottom: 0; }
.termlist .card + .card { margin-top: 0; }
.termlist b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.termlist p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.termlist .tc-ic { margin-top: 2px; }
.termlist li.flash { border-color: var(--accent); }

/* --- Breakpoints --------------------------------------------------------- */
@media (min-width: 768px) {
  .drinkgrid { grid-template-columns: 1fr 1fr; }
  .drinkpick { grid-template-columns: repeat(4, 1fr); }
  .topbar { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 1024px) {
  :root { --rail: 96px; }

  .tabbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gap);
    padding: calc(env(safe-area-inset-top) + 20px) 8px 20px;
    border-top: 0;
    border-right: 1px solid var(--hairline);
  }
  .tabbar button { flex: none; min-height: 64px; border-radius: 10px; }
  .tabbar button[aria-selected="true"]::before {
    top: 50%;
    left: 0;
    width: 2px;
    height: 26px;
    transform: translateY(-50%);
  }
  .main { padding-bottom: 40px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}