/* CuppaData app shell: first-run flow (register, login, welcome, brew logger).
   Direction: lab notebook. Graph paper, cobalt ink, a highlighter on the numbers that matter.
   IBM Plex Sans for text, IBM Plex Sans Condensed for titles and measurements. */

:root {
  --paper: #F8FAFD;      /* notebook page */
  --grid: #DDE5F0;       /* graph-paper lines */
  --surface: #FFFFFF;
  --ink: #15233F;        /* navy ink, text */
  --ink-soft: #4F5D78;
  --line: #9FB0C9;       /* control borders */
  --accent: #2346D9;     /* cobalt: actions and links */
  --accent-press: #1A36B0;
  --on-accent: #FFFFFF;
  --hi: #F2DD4B;         /* highlighter: ratio and selected rating only */
  --hi-edge: #C9B42A;
  --wash: color-mix(in srgb, var(--paper) 88%, transparent); /* backs text set on the grid */
  --on-hi: #15233F;
  --error: #B42318;
  --error-soft: #FDE8E6;
  --ok-soft: #E3EAFB;

  --radius: 4px;
  --gutter: 16px;

  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-measure: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;

  --step--1: 0.8125rem;  /* 13 */
  --step-0: 1rem;        /* 16 */
  --step-1: 1.25rem;     /* 20 */
  --step-2: 1.5625rem;   /* 25 */
  --step-3: 2.125rem;    /* 34 */
  --step-5: 4rem;        /* 64 */

  /* Colour scales used by the Tailwind theme bridge on older pages (header.php) */
  --g-50: #F4F7FB; --g-100: #EDF2F8; --g-200: #DDE5F0; --g-300: #C3CFE0; --g-400: #9FB0C9;
  --g-500: #6E7E9B; --g-600: #4F5D78; --g-700: #33415E; --g-800: #1F2D4A; --g-900: #15233F;
  --c-50: #EEF2FE; --c-100: #E0E7FD; --c-200: #C3D0FB; --c-300: #9DB1F7; --c-400: #6F89F0;
  --c-500: #4565E6; --c-600: #2346D9; --c-700: #1A36B0; --c-800: #172F8C; --c-900: #15286E;
  --y-50: #FEFBE6; --y-100: #FDF6C4; --y-200: #FAEE8F; --y-300: #F5E365; --y-400: #F2DD4B;
  --y-500: #E3CB2F; --y-600: #C9B42A; --y-700: #8F7E14; --y-800: #6B5E0F; --y-900: #4A410A;
  --r-50: #FDECEA; --r-100: #FBD9D5; --r-200: #F6B3AB; --r-300: #EE8579; --r-400: #E05A4B;
  --r-500: #C83A2B; --r-600: #B42318; --r-700: #911C13; --r-800: #6E160F; --r-900: #4C0F0A;

  color-scheme: light;
}

/* Dark mode: the same notebook as a blueprint */
@media (prefers-color-scheme: dark) {
  :root {
    --g-50: #17263F; --g-100: #142340; --g-200: #22355A; --g-300: #2E4369; --g-400: #4A5F86;
    --g-500: #7D8FB0; --g-600: #9DAECB; --g-700: #BFCBE0; --g-800: #D5DEEC; --g-900: #E3EAF6;
    --c-50: #17244A; --c-100: #1B2B58; --c-200: #233A77; --c-300: #2F4C99; --c-400: #5874D6;
    --c-500: #7A94F5; --c-600: #8FA8FF; --c-700: #A9BCFF; --c-800: #C6D3FF; --c-900: #E0E7FF;
    --y-50: #2A2A17; --y-100: #3A3819; --y-200: #4E4A1C; --y-300: #8F8424; --y-400: #C9B83A;
    --y-500: #E8D44A; --y-600: #EEDD6C; --y-700: #F3E68F; --y-800: #F8EFB5; --y-900: #FCF7DA;
    --r-50: #3A1D25; --r-100: #4A2229; --r-200: #6B2E31; --r-300: #9A3F3C; --r-400: #D2675C;
    --r-500: #F08377; --r-600: #FF9C93; --r-700: #FFB8B1; --r-800: #FFD3CF; --r-900: #FFE9E7;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1A2E;
    --grid: #1A2944;
    --surface: #142340;
    --ink: #E3EAF6;
    --ink-soft: #9DAECB;
    --line: #3A4E73;
    --accent: #8FA8FF;
    --accent-press: #A9BCFF;
    --on-accent: #0F1A2E;
    --hi: #E8D44A;
    --hi-edge: #E8D44A;
    --wash: transparent;
    --on-hi: #0F1A2E;
    --error: #FF9C93;
    --error-soft: #3A1D25;
    --ok-soft: #1B2D52;
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: 110px; }

body.cuppa {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 24px, 24px 100%;
  background-attachment: fixed;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.5;
}

.cuppa a:not([class]) { color: var(--accent); text-underline-offset: 3px; }

.cuppa :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.cuppa [tabindex="-1"]:focus { outline: none; }

/* Text set on the grid gets a paper wash so lines don't run through it */
.c-title, .c-lede, .c-hint, .c-foot, .c-label, .c-section-title, .c-scale-ends span, .c-brewer-chip, .c-done__summary {
  background-color: var(--wash);
}
.c-label, .c-hint { display: inline-block; }

/* ---------- Top bar ---------- */
.c-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px var(--gutter);
}
.cuppa .c-logo {
  font-family: var(--font-measure);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.cuppa .c-bar__link { color: var(--accent); font-size: var(--step--1); font-weight: 500; }

/* ---------- Page column ---------- */
.c-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px var(--gutter) 120px;
}

.c-title {
  font-family: var(--font-measure);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0 10px;
  text-wrap: balance;
  width: fit-content;
}
.c-lede {
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.4;
  margin: 0 0 28px;
  max-width: 34ch;
}

/* ---------- Forms ---------- */
.c-field { margin-bottom: 18px; }
.c-label {
  font-weight: 600;
  margin-bottom: 6px;
}
.c-hint { color: var(--ink-soft); font-size: var(--step--1); font-weight: 400; }

.c-input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 48px;
}
.c-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.c-input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 4px 0 0 var(--error); }
textarea.c-input { min-height: 88px; resize: vertical; }

.c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.cuppa .c-btn--primary { background: var(--accent); color: var(--on-accent); width: 100%; font-size: var(--step-1); }
.cuppa .c-btn--primary:hover { background: var(--accent-press); }
.c-btn--primary[disabled] { opacity: .6; cursor: progress; }
.cuppa .c-btn--quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.cuppa .c-btn--quiet:hover { border-color: var(--ink); }

.c-alert {
  border-radius: var(--radius);
  border-left: 4px solid var(--error);
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--error-soft);
  color: var(--error);
  font-weight: 500;
}
.c-alert a { color: inherit; }
.c-alert--ok { background: var(--ok-soft); color: var(--accent); border-left-color: var(--accent); }

.c-foot { color: var(--ink-soft); margin-top: 22px; width: fit-content; }

/* ---------- Brewer picker (welcome) ---------- */
.c-brewers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); background: var(--wash); }
.c-brewers li { border-bottom: 1px solid var(--line); }
.cuppa .c-brewer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  color: var(--ink);
  text-decoration: none;
}
.c-brewer__name { font-family: var(--font-measure); font-size: var(--step-2); font-weight: 600; }
.c-brewer__spec { color: var(--ink-soft); font-size: var(--step--1); text-align: right; font-variant-numeric: tabular-nums; }
.cuppa .c-brewer:hover { background: var(--surface); }
.cuppa .c-brewer:hover .c-brewer__name { color: var(--accent); }
.c-more { margin-top: 18px; }
.c-more summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; width: fit-content; background: var(--wash); }

/* ---------- Brew logger ---------- */
.c-brewer-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-measure);
  font-size: var(--step-1);
  font-weight: 600;
  margin: 4px 0 18px;
}
.c-brewer-chip a { font-family: var(--font-text); font-size: var(--step--1); font-weight: 500; }

/* The readout: the one bold element. A notebook entry with a cobalt margin rule. */
.c-readout {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-left: 4px solid var(--accent);
  padding: 8px 0 12px 18px;
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.c-readout__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-measure);
  font-size: clamp(3rem, 15vw, var(--step-5));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.c-readout__unit { font-family: var(--font-text); font-size: 0.34em; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.c-readout__arrow { font-family: var(--font-text); font-size: 0.45em; font-weight: 400; color: var(--ink-soft); }
.c-readout__ratio {
  margin: 12px 0 0;
  font-family: var(--font-measure);
  font-size: var(--step-1);
  font-weight: 700;
}
.c-readout__ratio-value {
  background: linear-gradient(transparent 52%, var(--hi) 52%);
  padding: 0 3px;
}
@media (prefers-color-scheme: dark) { .c-readout__ratio-value { color: var(--hi); background: none; padding: 0; } }
.c-readout__ratio-label { font-family: var(--font-text); color: var(--ink-soft); font-weight: 400; font-size: var(--step-0); }

.c-stepper {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.c-stepper button {
  font: inherit;
  font-size: var(--step-2);
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  min-height: 48px;
}
.c-stepper button:active { background: var(--ok-soft); }
.c-stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  text-align: center;
  font-family: var(--font-measure);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}
.c-stepper input::-webkit-outer-spin-button,
.c-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-stepper input:focus { outline: none; }
.c-stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.c-segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.c-segment input { position: absolute; opacity: 0; pointer-events: none; }
.c-segment label {
  text-align: center;
  padding: 12px 4px;
  cursor: pointer;
  font-weight: 500;
}
.c-segment label + input + label { border-left: 1px solid var(--line); }
.c-segment input:checked + label { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.c-segment input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: -3px; }

.c-timer { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.c-timer .c-input { font-family: var(--font-measure); font-size: var(--step-1); }
.c-timer .c-btn { min-height: 48px; min-width: 128px; }
.cuppa .c-timer .is-running { background: var(--hi); border-color: var(--hi-edge); color: var(--on-hi); }

.c-section-title {
  font-family: var(--font-measure);
  font-size: var(--step-2);
  font-weight: 700;
  margin: 34px 0 6px;
  width: fit-content;
}

.c-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.c-scale input { position: absolute; opacity: 0; pointer-events: none; }
.c-scale label {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.15;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--font-measure);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.c-scale label:hover { border-color: var(--accent); }
.c-scale input:checked + label { background: var(--hi); border-color: var(--hi-edge); color: var(--on-hi); }
.c-scale input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 1px; }
.c-scale-ends { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: var(--step--1); margin-top: 6px; }

.c-taste { margin-top: 22px; }
.c-taste summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; width: fit-content; background: var(--wash); }
.c-taste[open] summary { margin-bottom: 10px; }
.c-attr { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; }
.c-attr > span { background: var(--wash); width: fit-content; }
.c-attr .c-scale { grid-template-columns: repeat(5, 1fr); }
.c-attr .c-scale label { aspect-ratio: auto; min-height: 40px; }

.c-suggest { position: relative; }
.c-suggest ul {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(21, 35, 63, .12);
}
.c-suggest li { padding: 10px 12px; border-radius: 3px; cursor: pointer; }
.c-suggest li[aria-selected="true"], .c-suggest li:hover { background: var(--ok-soft); }

/* Save bar sticks to the bottom on small screens */
.c-savebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.c-savebar__inner { max-width: 560px; margin: 0 auto; }

/* Saved state */
.c-done { padding-top: 24px; }
.c-done__cup {
  font-family: var(--font-measure);
  font-size: clamp(3.5rem, 18vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 12px;
  width: fit-content;
  background: linear-gradient(transparent 58%, var(--hi) 58%);
  padding: 0 4px;
}
@media (prefers-color-scheme: dark) { .c-done__cup { color: var(--hi); background: none; } }
.c-done__summary {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 22px 0;
  font-variant-numeric: tabular-nums;
}
.c-done__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.c-done__summary dt { color: var(--ink-soft); }
.c-done__summary dd { margin: 0; font-weight: 600; }
.c-actions { display: grid; gap: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .c-done:not([hidden]) .c-done__cup { animation: c-ink 520ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes c-ink {
    from { opacity: 0; transform: translateY(10px); background-size: 0% 100%; }
    to { opacity: 1; transform: none; background-size: 100% 100%; }
  }
}

.c-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ======================================================================
   App shell for the main site (header.php / footer.php)
   ====================================================================== */
.c-skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--radius);
}
.c-skip:focus { top: 12px; }

.c-appbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.c-appbar__inner {
  max-width: 1120px; margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.c-appbar .c-logo { flex: none; }
.cuppa .c-nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.cuppa .c-nav a {
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
  padding: 8px 10px; border-radius: var(--radius); white-space: nowrap;
}
.cuppa .c-nav a:hover { color: var(--ink); background: var(--surface); }
.cuppa .c-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: 0;
}
.c-appbar__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.cuppa .c-appbar__link { color: var(--accent); font-weight: 500; }
.cuppa .c-btn--compact { width: auto; min-height: 40px; padding: 0 16px; font-size: var(--step-0); }

.c-account { position: relative; }
.c-account summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.c-account summary::-webkit-details-marker { display: none; }
.c-account summary img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); display: block; }
.c-account__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(21, 35, 63, .14); padding: 6px; z-index: 60;
}
.c-account__name { margin: 0; padding: 8px 10px 10px; font-weight: 600; border-bottom: 1px solid var(--grid); margin-bottom: 4px; }
.cuppa .c-account__menu a { display: block; padding: 9px 10px; color: var(--ink); text-decoration: none; border-radius: 3px; }
.cuppa .c-account__menu a:hover { background: var(--ok-soft); }

/* Phones: logo and actions on one row, sections in a scrollable row below */
@media (max-width: 720px) {
  .c-appbar__inner { flex-wrap: wrap; gap: 6px 12px; padding-bottom: 0; }
  .cuppa .c-nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 calc(var(--gutter) - 10px); scrollbar-width: none; }
  .cuppa .c-nav::-webkit-scrollbar { display: none; }
}

.c-app { max-width: 1120px; min-height: 60vh; }
.c-app h1, .c-app h2, .c-app h3 { font-family: var(--font-measure); color: var(--ink); letter-spacing: -0.005em; }
.c-app h1 { font-weight: 700; }

.c-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); margin-top: 48px; }
.c-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: 22px var(--gutter) 32px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: baseline;
  color: var(--ink-soft); font-size: var(--step--1);
}
.c-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cuppa .c-footer a { color: var(--ink-soft); }
.cuppa .c-footer a:hover { color: var(--accent); }

/* ======================================================================
   Shared page components (Home, brew detail, recipes)
   ====================================================================== */
.c-muted { color: var(--ink-soft); }
.cuppa .c-btn--auto { width: auto; padding: 0 24px; font-size: var(--step-0); }
.c-tag {
  display: inline-block; font-size: var(--step--1); font-weight: 500; line-height: 1.4;
  padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-soft); vertical-align: middle;
}
.c-rating { font-family: var(--font-measure); white-space: nowrap; color: var(--ink-soft); }
.c-rating b { color: var(--ink); font-size: 1.15em; }
.c-rating--top b { background: linear-gradient(transparent 55%, var(--hi) 55%); padding: 0 2px; }
@media (prefers-color-scheme: dark) { .c-rating--top b { background: none; color: var(--hi); } }

.c-home { max-width: 980px; margin: 0 auto; }
.c-home__title { font-size: clamp(2rem, 6vw, 2.75rem); margin: 8px 0 8px; line-height: 1.05; }
.c-home__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; margin: 0 0 20px; line-height: 1.4; }
.c-home__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.c-home__intro { padding-bottom: 28px; }
.c-home__title, .c-home__lede, .c-block__title, .c-block > .c-muted, .c-block__head > .c-muted { background-color: var(--wash); width: fit-content; }

.c-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 36px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.c-stats > div { padding: 14px 18px; border-left: 1px solid var(--grid); }
.c-stats > div:first-child { border-left: 0; }
.c-stats dt { color: var(--ink-soft); font-size: var(--step--1); }
.c-stats dd { margin: 2px 0 0; font-family: var(--font-measure); font-size: var(--step-3); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c-stats dd small { font-size: 0.5em; color: var(--ink-soft); font-weight: 500; }
.c-stats .c-stats__text { font-size: var(--step-1); padding-top: 6px; }
@media (max-width: 720px) {
  .c-stats { grid-template-columns: 1fr 1fr; }
  .c-stats > div:nth-child(3) { border-left: 0; }
  .c-stats > div:nth-child(n+3) { border-top: 1px solid var(--grid); }
}

.c-block { margin-bottom: 40px; }
.c-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.c-block__title { font-size: var(--step-2); margin: 0 0 12px; }

.c-list { list-style: none; margin: 12px 0 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-list li + li { border-top: 1px solid var(--grid); }
.cuppa .c-list__row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.cuppa .c-list__row:hover { background: var(--ok-soft); }
.c-list__go { color: var(--accent); font-weight: 600; }

.c-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.c-table th, .c-table td { text-align: left; padding: 11px 14px; border-top: 1px solid var(--grid); font-weight: 400; vertical-align: baseline; }
.c-table thead th { border-top: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: var(--step--1); font-weight: 500; background: var(--paper); }
.c-table tbody th { font-weight: 600; }
.cuppa .c-table tbody th a { color: var(--ink); text-decoration: none; }
.cuppa .c-table tbody tr:hover th a { color: var(--accent); text-decoration: underline; }
.c-table tbody tr:hover { background: var(--ok-soft); }
.c-table .c-num { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .c-table thead { display: none; }
  .c-table, .c-table tbody, .c-table tr { display: block; }
  .c-table tr { padding: 12px 14px; border-top: 1px solid var(--grid); }
  .c-table tr:first-child { border-top: 0; }
  .c-table th, .c-table td { display: inline; border: 0; padding: 0; }
  .c-table tbody th { display: block; font-size: var(--step-1); margin: 2px 0 4px; }
  .c-table td[data-label="Date"] { display: block; color: var(--ink-soft); font-size: var(--step--1); }
  .c-table td[data-label="Brewer"]::after, .c-table td[data-label="Ratio"]::after { content: ","; }
  .c-table td[data-label="Grind"]::before { content: "grind "; color: var(--ink-soft); }
  .c-table td[data-label="Grind"]::after { content: ","; }
  .c-table td[data-label="Rating"] { display: block; text-align: left; margin-top: 4px; }
  .c-table .c-num { text-align: left; }
}

.c-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.cuppa .c-pager a { color: var(--accent); font-weight: 600; }

/* ---------- Detail pages (brew, recipe) ---------- */
.c-detail { max-width: 860px; margin: 0 auto; }
.cuppa .c-back { display: inline-block; color: var(--accent); font-weight: 500; margin-bottom: 14px; background: var(--wash); }
.cuppa .c-back::before { content: "← "; }
.c-detail__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.c-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.c-detail__title { font-size: clamp(1.75rem, 5vw, 2.4rem); margin: 0; line-height: 1.1; }
.c-detail__meta { color: var(--ink-soft); margin: 6px 0 0; }
.c-detail__rating { font-size: var(--step-2); flex: none; }
.c-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; }
.c-detail__actions .c-btn { min-height: 44px; }
.cuppa .c-btn--danger { background: var(--surface); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 45%, var(--line)); }
.cuppa .c-btn--danger:hover { background: var(--error-soft); }
.c-detail__sub { font-size: var(--step-1); margin: 28px 0 10px; }
.c-detail__notes { margin: 0; padding: 12px 16px; border-left: 4px solid var(--hi); background: var(--paper); max-width: 65ch; }

.c-spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0; border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); }
.c-spec > div { padding: 12px 14px; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.c-spec dt { color: var(--ink-soft); font-size: var(--step--1); }
.c-spec dd { margin: 2px 0 0; font-family: var(--font-measure); font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }

.c-meter { display: grid; grid-template-columns: 110px 1fr 44px; gap: 12px; align-items: center; padding: 6px 0; max-width: 520px; }
.c-meter__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.c-meter__track i { height: 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); }
.c-meter__track i.on { background: var(--accent); border-color: var(--accent); }
.c-meter__value { font-family: var(--font-measure); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .c-detail__card { padding: 18px; } .c-detail__head { flex-direction: column; } }
.c-detail__actions { align-items: center; }
.cuppa .c-detail__actions .get-brew-tips {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 22px; min-height: 44px; font: inherit; font-weight: 600; box-shadow: none; transform: none;
}
.cuppa .c-detail__actions .get-brew-tips::before { content: none; }
.cuppa .c-detail__actions .get-brew-tips:hover { border-color: var(--ink); background: var(--surface); }

/* ---------- Recipes ---------- */
.c-recipes { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-recipe { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; }
.c-recipe + .c-recipe { border-top: 1px solid var(--grid); }
.c-recipe__name { font-size: var(--step-1); margin: 0; }
.cuppa .c-recipe__name a { color: var(--ink); text-decoration: none; }
.cuppa .c-recipe__name a:hover { color: var(--accent); text-decoration: underline; }
.c-recipe__spec { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.c-recipe__usage { margin: 2px 0 0; font-size: var(--step--1); }
.c-recipe__actions { display: flex; gap: 8px; flex: none; }
.c-block__empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; margin: 0; }
.c-block__head .c-home__title { margin-bottom: 8px; }
@media (max-width: 640px) {
  .c-recipe { flex-direction: column; align-items: flex-start; }
}

/* ---------- Landing (index.php) ---------- */
.c-landing { max-width: 1040px; margin: 0 auto; }
.c-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 32px 0 56px; }
.c-hero__title {
  font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.02; margin: 0 0 18px; letter-spacing: -0.015em;
  background: var(--wash); width: fit-content;
}
.c-hero__lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); max-width: 44ch; margin: 0 0 26px; background: var(--wash); }
.c-hero__entry { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent) 14%, transparent); }
.c-hero__entry-head { display: flex; flex-direction: column; margin: 0 0 12px; }
.c-hero__entry-head b { font-family: var(--font-measure); font-size: var(--step-1); }
.c-hero__entry-head span { color: var(--ink-soft); font-size: var(--step--1); }
.c-readout--static { background: transparent; margin-bottom: 14px; }
.c-readout--static .c-readout__line { font-size: clamp(2.6rem, 8vw, 3.4rem); }
.c-spec--compact { grid-template-columns: repeat(4, 1fr); }
.c-spec--compact dd { font-size: var(--step-0); }
.c-hero__note { margin-top: 14px; padding: 10px 12px; border-left: 4px solid var(--hi); background: var(--paper); font-size: var(--step--1); }

.c-steps { padding: 8px 0 40px; }
.c-steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-steps li { counter-increment: step; padding: 20px 22px 22px; border-left: 1px solid var(--grid); }
.c-steps li:first-child { border-left: 0; }
.c-steps li::before { content: counter(step); display: block; font-family: var(--font-measure); font-weight: 700; font-size: var(--step-3); color: var(--accent); line-height: 1; margin-bottom: 10px; }
.c-steps h3, .c-features h3 { font-size: var(--step-1); margin: 0 0 6px; }
.c-steps p, .c-features p { margin: 0; color: var(--ink-soft); }

.c-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 8px 0 48px; }
.c-features > div { border-top: 2px solid var(--ink); padding-top: 14px; background: var(--wash); }

.c-cta { text-align: left; padding: 28px 0 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.c-cta h2 { margin: 0; font-size: var(--step-3); background: var(--wash); }

@media (max-width: 820px) {
  .c-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 12px; }
  .c-steps ol, .c-features { grid-template-columns: 1fr; }
  .c-steps li { border-left: 0; border-top: 1px solid var(--grid); }
  .c-steps li:first-child { border-top: 0; }
  .c-spec--compact { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Insights (overrides css/insights.css, which loads later) ---------- */
.cuppa-app .insights-container { background: transparent; padding-top: 0; }
.cuppa-app .insights-header { text-align: left; margin-bottom: 24px; }
.cuppa-app .coffee-dna-card,
.cuppa-app .weekly-card,
.cuppa-app .achievements-card,
.cuppa-app .personal-bests-card,
.cuppa-app .community-card,
.cuppa-app .chart-card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.cuppa-app .coffee-dna-card { border-left: 4px solid var(--accent); }
.cuppa-app .personal-bests-card { border-left: 1px solid var(--line); }
.cuppa-app .coffee-dna-card *, .cuppa-app .weekly-card * { color: inherit; }
.cuppa-app .coffee-dna-card .opacity-75, .cuppa-app .coffee-dna-card .opacity-90,
.cuppa-app .weekly-card .opacity-75, .cuppa-app .weekly-card .opacity-90 { opacity: 1; color: var(--ink-soft); }
.cuppa-app .section-title, .cuppa-app .chart-title, .cuppa-app .subsection-title { color: var(--ink); font-family: var(--font-measure); }
.cuppa-app .btn-primary, .cuppa-app .btn-dna {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius); box-shadow: none; transform: none;
}
.cuppa-app .btn-primary:hover, .cuppa-app .btn-dna:hover { background: var(--accent-press); transform: none; box-shadow: none; }
.cuppa-app .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.cuppa-app .community-stat { background: var(--paper); border: 1px solid var(--grid); border-radius: var(--radius); }
.cuppa-app .community-stat-value { color: var(--ink); font-family: var(--font-measure); font-weight: 700; }
.cuppa-app .tab-btn { border-radius: var(--radius); }
.cuppa-app .chart-loading { color: var(--ink-soft); font-style: normal; }
.cuppa-app .personality-card, .cuppa-app .stat-card, .cuppa-app .best-stat {
  background: var(--paper); color: var(--ink); border: 1px solid var(--grid); border-radius: var(--radius); box-shadow: none;
}
.cuppa-app .achievement-item {
  background: var(--paper); color: var(--ink); border: 1px solid var(--grid); border-radius: var(--radius);
  box-shadow: none; transform: none; padding: 10px 12px;
}
.cuppa-app .achievement-item:hover { transform: none; box-shadow: none; border-color: var(--line); }
.cuppa-app .achievement-item .achievement-title { font-size: var(--step-0); font-weight: 600; font-family: var(--font-text); color: var(--ink); }
.cuppa-app .achievement-desc, .cuppa-app .achievement-date { color: var(--ink-soft); }
.cuppa-app .achievement-badge { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 3px; text-transform: none; letter-spacing: 0; }
.cuppa-app .weekly-card { min-height: 0; align-self: start; }
.cuppa-app .insights-grid { align-items: start; }

/* Form controls on older pages follow the theme (date pickers, selects) */
.cuppa-app input, .cuppa-app select, .cuppa-app textarea { color-scheme: inherit; }
.cuppa-app input[type="date"], .cuppa-app input[type="time"] { background-color: var(--surface); color: var(--ink); }

/* ---------- Dial-in coach: brew steps ---------- */
.c-changed { position: relative; }
.c-changed .c-input, .c-changed .c-stepper { border-color: var(--hi-edge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 55%, transparent); }
.c-was { margin: 6px 0 0; font-size: var(--step--1); font-weight: 600; width: fit-content; padding: 0 4px; background: linear-gradient(transparent 50%, var(--hi) 50%); color: var(--on-hi); }
@media (prefers-color-scheme: dark) { .c-was { background: none; color: var(--hi); padding: 0; } }

fieldset.c-field { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
fieldset.c-field legend { padding: 0; margin-bottom: 8px; }
.c-choice__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-choice__options input { position: absolute; opacity: 0; pointer-events: none; }
.c-choice__options label {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: center;
}
.c-choice__options label b { font-family: var(--font-measure); font-size: var(--step-1); }
.c-choice__options label span { font-size: var(--step--1); color: var(--ink-soft); }
.c-choice__options label:hover { border-color: var(--accent); }
.c-choice__options input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.c-choice__options input:checked + label span { color: inherit; opacity: .85; }
.c-choice__options input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

.c-taste-step, .c-next { padding-top: 16px; }
.c-next__eyebrow { margin: 0 0 4px; color: var(--accent); font-weight: 600; width: fit-content; background: var(--wash); }
.c-next__change {
  font-family: var(--font-measure); font-size: var(--step-3); margin: 6px 0 14px; line-height: 1.1; width: fit-content;
}
.c-next__change b { background: linear-gradient(transparent 55%, var(--hi) 55%); padding: 0 4px; }
.c-next__change span { font-size: var(--step-1); color: var(--ink-soft); font-weight: 500; }
@media (prefers-color-scheme: dark) { .c-next__change b { background: none; color: var(--hi); padding: 0; } }

/* ---------- Today (dashboard.php) ---------- */
.c-today { max-width: 640px; margin: 0 auto; }
.c-today__hello { font-size: var(--step-2); margin: 4px 0 18px; width: fit-content; background: var(--wash); }
.cuppa .c-nudge {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 16px; margin-bottom: 18px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hi-edge); border-left: 6px solid var(--hi); border-radius: var(--radius);
}
.c-nudge > span:first-child { display: flex; flex-direction: column; }
.c-nudge > span:first-child span { color: var(--ink-soft); font-size: var(--step--1); }
.c-nudge__go { color: var(--accent); font-weight: 600; white-space: nowrap; }

.c-nextcup { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 20px; margin-bottom: 32px; }
.c-nextcup__bag { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--ink-soft); font-size: var(--step--1); }
.c-nextcup__bag span { font-weight: 600; color: var(--ink); }
.c-nextcup__title { font-size: clamp(1.6rem, 6vw, 2.1rem); margin: 0 0 4px; line-height: 1.1; }
.c-nextcup__why { color: var(--ink-soft); margin: 4px 0 16px; max-width: 52ch; }
.c-nextcup__recipe { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 18px; border: 1px solid var(--grid); border-radius: var(--radius); }
.c-nextcup__recipe > div { padding: 8px 10px; border-left: 1px solid var(--grid); }
.c-nextcup__recipe > div:first-child { border-left: 0; }
.c-nextcup__recipe dt { color: var(--ink-soft); font-size: var(--step--1); }
.c-nextcup__recipe dd { margin: 0; font-family: var(--font-measure); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-nextcup__recipe .is-changed { background: color-mix(in srgb, var(--hi) 35%, var(--surface)); }
@media (max-width: 560px) {
  .c-nextcup__recipe { grid-template-columns: repeat(3, 1fr); }
  .c-nextcup__recipe > div:nth-child(4) { border-left: 0; }
  .c-nextcup__recipe > div:nth-child(n+4) { border-top: 1px solid var(--grid); }
}

.c-dialed { margin: 0 0 10px; padding: 10px 12px; background: var(--surface); border-left: 4px solid var(--hi); font-weight: 600; }
.c-cups { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-cups li + li { border-top: 1px solid var(--grid); }
.cuppa .c-cups a { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 14px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.cuppa .c-cups a:hover { background: var(--ok-soft); }
.c-cups__when { color: var(--ink-soft); font-size: var(--step--1); }
.c-cups__taste { display: flex; gap: 8px; align-items: baseline; }
.c-taste-tag { font-size: var(--step--1); font-weight: 600; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--line); }
.c-taste-tag--sour { border-color: var(--hi-edge); }
.c-taste-tag--bitter { border-color: var(--error); color: var(--error); }
.c-taste-tag--balanced { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .cuppa .c-cups a { grid-template-columns: 1fr auto; } .c-cups__when { grid-column: 1 / -1; } }
.c-today__more { display: flex; gap: 20px; margin-top: 8px; }
.cuppa .c-today__more a { color: var(--accent); font-weight: 500; }

/* ---------- Bags ---------- */
.c-status { display: inline-block; font-weight: 600; color: var(--ink); margin-right: 6px; }
.c-status.is-dialed { background: linear-gradient(transparent 55%, var(--hi) 55%); padding: 0 3px; }
@media (prefers-color-scheme: dark) { .c-status.is-dialed { background: none; color: var(--hi); padding: 0; } }
.c-finished summary { list-style: none; cursor: pointer; }
.c-finished summary::-webkit-details-marker { display: none; }
.c-finished summary h2::after { content: " +"; color: var(--accent); }
.c-finished[open] summary h2::after { content: " −"; }
.c-spec--text dd { font-family: var(--font-text); font-size: var(--step-0); font-weight: 500; }
.c-detail__actions form { margin: 0; }
.c-photos { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.c-photos img { width: 160px; height: 200px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }

.c-bagform .c-detail__card { margin-bottom: 16px; }
.c-photo-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.c-photo-pick {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; cursor: pointer; overflow: hidden;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper); color: var(--accent); font-weight: 600; text-align: center; padding: 8px;
}
.c-photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.c-photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-photo-pick img:not([hidden]) + span { position: absolute; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 6px; color: var(--ink); }
.c-photo-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.c-reader-status { margin: 8px 0 0; min-height: 1.5em; }
.c-suggest li { display: flex; flex-direction: column; }
.c-suggest li span { color: var(--ink-soft); font-size: var(--step--1); }
.c-actions--row { display: flex; flex-wrap: wrap; gap: 10px; }
.c-bagform .c-row .c-field { margin-bottom: 14px; }
@media (max-width: 520px) { .c-bagform .c-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- App tab bar (phones) ---------- */
.c-tabbar { display: none; }
@media (max-width: 720px) {
  .cuppa-app.has-tabbar .c-nav { display: none; }
  .cuppa-app.has-tabbar .c-appbar__actions .c-btn--compact { display: none; }
  .cuppa-app.has-tabbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .c-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .cuppa .c-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    color: var(--ink-soft); text-decoration: none; font-size: 11px; font-weight: 500;
  }
  .c-tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cuppa .c-tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .cuppa .c-tabbar .c-tabbar__brew { color: var(--accent); font-weight: 600; }
  .c-tabbar__brew svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--accent); stroke: var(--on-accent); stroke-width: 2.4; margin-top: -18px; box-shadow: 0 4px 12px rgba(21, 35, 63, .25); }
  .c-footer { display: none; }
}
.c-list--links .c-list__row { grid-template-columns: 1fr auto; }
.c-list--links .c-list__row > span:first-child { display: flex; flex-direction: column; }
.c-list--links .c-list__row .c-muted { font-size: var(--step--1); background: none; }

/* ---------- Public profile (/u/name) ---------- */
.c-profile { max-width: 920px; margin: 0 auto; }
.c-profile__head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; position: relative;
}
.c-profile__head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); border-radius: var(--radius) 0 0 var(--radius); }
.c-profile__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.c-profile__name { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 4px 0 4px; line-height: 1.05; }
.c-profile__bio { margin: 0 0 12px; color: var(--ink-soft); max-width: 52ch; }
.c-profile__counts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 10px 0 0; }
.c-profile__counts div { display: flex; flex-direction: column-reverse; }
.c-profile__counts dt { color: var(--ink-soft); font-size: var(--step--1); }
.c-profile__counts dd { margin: 0; font-family: var(--font-measure); font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.c-profile__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.c-profile__actions form { margin: 0; }
.c-profile__actions .c-btn { width: 100%; }
.c-profile__note { margin: 10px 2px 0; font-size: var(--step--1); }
.c-profile__section { margin-top: 36px; }
.c-profile__title { font-size: var(--step-2); margin: 0 0 14px; width: fit-content; background: var(--wash); }

.c-gearshelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.c-gearshelf li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px 14px;
}
.c-gearshelf__name { font-weight: 600; line-height: 1.25; margin-top: 8px; }
.c-gearshelf__kind { color: var(--ink-soft); font-size: var(--step--1); }

.c-gear-pic { display: block; flex: none; }
.c-gear-pic--md { width: 64px; height: 64px; }
.c-gear-pic--sm { width: 40px; height: 40px; }
img.c-gear-pic { object-fit: cover; border-radius: var(--radius); border: 1px solid var(--grid); }
.c-gear-art { background-color: var(--ink); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }

.c-recipecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.c-recipecard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.c-recipecard header { min-height: 64px; }
.c-recipecard__roaster { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.c-recipecard__name { margin: 2px 0 0; font-size: var(--step-1); line-height: 1.2; }
.c-recipecard__origin { margin: 4px 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.c-recipecard__ratio {
  margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 6px 0 6px 12px; border-left: 3px solid var(--accent);
  font-family: var(--font-measure); font-weight: 600; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.c-recipecard__ratio small { font-family: var(--font-text); font-size: 0.45em; color: var(--ink-soft); font-weight: 500; }
.c-recipecard__arrow { font-size: 0.55em; color: var(--ink-soft); }
.c-recipecard__how { margin: 0; font-variant-numeric: tabular-nums; }
.c-recipecard footer { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--grid); }
.c-cups__row { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 14px; }
@media (max-width: 640px) {
  .c-profile__head { grid-template-columns: auto 1fr; padding: 18px; }
  .c-profile__avatar { width: 64px; height: 64px; }
  .c-profile__actions { grid-column: 1 / -1; flex-direction: row; }
  .c-profile__actions .c-btn, .c-profile__actions form { flex: 1; }
  .cuppa .c-cups__row { grid-template-columns: 1fr auto; }
}

/* ---------- My gear ---------- */
.c-gearshelf--mine { margin-bottom: 24px; }
.c-gearshelf li { position: relative; }
.c-gearshelf__remove { margin: 6px 0 0; }
.c-gearshelf__remove button { background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: var(--step--1); text-decoration: underline; cursor: pointer; }
.c-gearshelf__remove button:hover { color: var(--error); }
.c-gear-results li { flex-direction: row !important; align-items: center; gap: 12px; }
.c-gear-results li > span:last-child { display: flex; flex-direction: column; }
.c-gear-picked { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.c-gear-picked > div { flex: 1; display: flex; flex-direction: column; }
.c-gear-add details.c-more { margin: 0 0 16px; }
@media (prefers-color-scheme: dark) { .c-nextcup__recipe .is-changed { background: transparent; box-shadow: inset 0 0 0 2px var(--hi); } .c-nextcup__recipe .is-changed dd { color: var(--hi); } }
.c-tip { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; }
.c-tip__title { font-size: var(--step-2); margin: 0 0 4px; }
.c-tip .c-muted { margin: 0 0 14px; background: none; }
.c-detail .c-nudge { margin-bottom: 24px; }
/* style.css gives every form a card look; small inline forms shouldn't have it */
.cuppa-app form.c-gearshelf__remove, .cuppa-app .c-detail__actions form, .cuppa-app .c-profile__actions form, .cuppa-app .c-recipe__actions form {
  background: none; padding: 0; margin-top: 0; box-shadow: none; border: 0; border-radius: 0;
}
.cuppa-app form.c-gearshelf__remove { margin-top: 6px; }

/* ---------- Community recipes ---------- */
.c-community .c-recipe__spec b { font-weight: 600; }
.c-community__hint { margin: 10px 0 0; font-size: var(--step--1); }
.c-community__hint a { color: var(--accent); }

/* ---------- Coffee pages ---------- */
.c-coffee__head { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.c-coffee__head:not(:has(.c-coffee__photo)) { grid-template-columns: 1fr; }
.c-coffee__photo { width: 180px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--grid); }
.c-coffee__roaster { margin: 0 0 2px; font-weight: 600; }
.cuppa .c-coffee__roaster a { color: var(--ink-soft); text-decoration: none; }
.cuppa .c-coffee__roaster a:hover { color: var(--accent); text-decoration: underline; }
.c-coffee__notes { margin: 6px 0 8px; font-size: var(--step-1); }
.c-coffee .c-detail__actions { margin-bottom: 0; }
.c-grindtable { max-width: 420px; }
.c-grindtable td { font-family: var(--font-measure); font-weight: 600; font-size: var(--step-1); }
.c-brewalong__timer { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); width: fit-content; }
.c-brewalong__clock { font-family: var(--font-measure); font-size: var(--step-3); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.c-brewalong__done { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--hi); background: var(--surface); max-width: 60ch; }
/* ---------- Explore coffees ---------- */
.c-explore__form { margin: 0 0 14px; }
.c-explore__search { display: flex; gap: 8px; }
.c-explore__search .c-input { flex: 1; min-width: 0; font-size: var(--step-1); padding: 12px 14px; }
.c-explore__search .c-btn[hidden] { display: none; }
.c-explore__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.c-select {
  width: 100%; min-height: 44px; padding: 8px 30px 8px 10px; font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234F5D78' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line); border-radius: var(--radius); appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
}
.c-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .c-explore__filters { grid-template-columns: 1fr 1fr; } }
.c-explore__status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.c-explore__count { margin: 0; font-family: var(--font-measure); font-weight: 600; background: var(--wash); }
.c-explore__clear { font-size: var(--step--1); }
.c-explore__clear[hidden] { display: none; }

.c-coffeegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.c-coffeegrid[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.c-coffeecard a {
  display: flex; align-items: stretch; height: 100%; box-sizing: border-box; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.c-coffeecard a:hover { border-color: var(--accent); }
.c-coffeecard a:hover .c-coffeecard__name { color: var(--accent); }
.c-coffeecard a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-coffeecard__photo { flex: none; width: 76px; min-height: 96px; object-fit: cover; border-right: 1px solid var(--grid); background: var(--paper); }
/* No photo: the roaster's initials on a scrap of graph paper, like a sample jar label */
.c-coffeecard__photo--none {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-measure); font-weight: 700; font-size: 1.375rem; letter-spacing: .02em; color: var(--ink-soft);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 12px, 12px 100%;
}
.c-coffeecard__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; flex: 1; }
.c-coffeecard__roaster { font-size: var(--step--1); color: var(--ink-soft); font-weight: 500; }
.c-coffeecard__name { font-size: var(--step-0); font-weight: 600; line-height: 1.25; }
.c-coffeecard__where { font-size: var(--step--1); color: var(--ink-soft); }
.c-coffeecard__notes { font-size: var(--step--1); color: var(--ink); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-coffeecard__count { margin-top: auto; padding-top: 8px; font-family: var(--font-measure); font-size: var(--step--1); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.c-coffeecard__mine { background: var(--hi); color: var(--on-hi); padding: 0 5px; border-radius: 2px; font-weight: 600; }
.c-explore__empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; }
.c-explore__empty p { margin: 0; }
.c-explore__more { display: flex; justify-content: center; margin: 20px 0 0; }
.c-explore__more [hidden] { display: none; }
.c-explore__add { margin: 24px 0 0; color: var(--ink-soft); background: var(--wash); width: fit-content; }
@media (prefers-reduced-motion: reduce) { .c-coffeegrid[aria-busy="true"] { transition: none; } }
@media (max-width: 600px) { .c-coffee__head { grid-template-columns: 1fr; } .c-coffee__photo { width: 140px; } }
.cuppa-app form.c-privacy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: none; }
.c-privacy p { margin: 0 0 12px; max-width: 60ch; }
.c-cups__what b { display: block; font-weight: 600; }
.c-cups__what .c-muted { display: block; font-size: var(--step--1); background: none; width: auto; }

/* ---------- Brew mode (brew.php): full screen, readable from a metre away ---------- */
.cuppa .c-brewmode-start {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; margin: -6px 0 22px; text-align: left; min-height: 0;
  border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface); font-size: var(--step-1);
}
.c-brewmode-start .c-hint { background: none; font-size: var(--step--1); }
.c-brewmode {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 24px, 24px 100%;
}
.c-brewmode__inner { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 18px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.c-brewmode__top { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-weight: 500; }
.c-brewmode__end { background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font: inherit; padding: 6px 14px; cursor: pointer; }
.c-brewmode__clock {
  font-family: var(--font-measure); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  font-size: clamp(5.5rem, 30vw, 9rem); letter-spacing: -0.03em; margin: 8vh 0 14px;
}
.c-brewmode__progress { height: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.c-brewmode__progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.c-brewmode__step { font-family: var(--font-measure); font-size: clamp(2.4rem, 11vw, 3.6rem); font-weight: 700; margin: 28px 0 0; line-height: 1.05; }
.c-brewmode__target {
  font-family: var(--font-measure); font-size: clamp(2rem, 9vw, 3rem); font-weight: 600; margin: 4px 0 0; width: fit-content;
  background: linear-gradient(transparent 55%, var(--hi) 55%); padding: 0 6px;
}
.c-brewmode__target:empty { display: none; }
@media (prefers-color-scheme: dark) { .c-brewmode__target { background: none; color: var(--hi); padding: 0; } }
.c-brewmode__note { font-size: var(--step-1); color: var(--ink-soft); margin: 12px 0 0; max-width: 34ch; }
.c-brewmode__next { margin: 18px 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.c-brewmode__actions { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.c-brewmode__actions .c-btn { min-height: 56px; }
.c-brewmode__done { grid-template-columns: 1fr; }
.c-brewmode__actions[hidden] { display: none; }
.cuppa .c-brewmode__done .c-btn--primary, .cuppa .c-brewmode__done .c-btn--quiet { width: 100%; font-size: var(--step-1); }
.c-brewmode__enjoy { margin: 0 0 4px; font-family: var(--font-measure); font-size: var(--step-2); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .c-brewmode__progress span { transition: none; } }

/* Bluetooth scale: the connect row on the brew form, and the live weight in brew mode */
.c-scalebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -10px 0 22px; padding: 10px 12px 10px 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.c-scalebar[hidden] { display: none; }
.c-scalebar__status { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.c-scalebar .c-btn { flex: none; }
.c-brewmode__tools { display: flex; gap: 8px; }
.c-brewmode__tools [hidden] { display: none; }
.c-brewmode__scale { margin: 18px 0 0; }
.c-brewmode__scale[hidden] { display: none; }
.c-brewmode__weight { margin: 0 0 8px; font-family: var(--font-measure); font-variant-numeric: tabular-nums; line-height: 1; }
#bm-weight { font-size: clamp(3rem, 16vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; }
.c-brewmode__unit { font-size: var(--step-2); font-weight: 600; }
.c-brewmode__of { font-size: var(--step-2); color: var(--ink-soft); font-weight: 600; margin-left: 6px; }
.c-brewmode__pour { height: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.c-brewmode__pour span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.c-brewmode__scale.is-reached .c-brewmode__pour span { background: var(--hi); }
.c-brewmode__scale.is-over .c-brewmode__of { color: var(--error); }
@media (prefers-color-scheme: dark) { .c-brewmode__scale.is-over .c-brewmode__of { color: #FF9C8F; } }
@media (prefers-reduced-motion: reduce) { .c-brewmode__pour span { transition: none; } }

/* ---------- Today: nudges, usual, community ---------- */
.c-tipline { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--hi-edge); border-radius: var(--radius); }
.c-tipline p { margin: 0; }
.cuppa .c-tipline a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cuppa .c-nextcup__alt { display: block; text-align: center; margin-top: 10px; color: var(--accent); font-weight: 500; }
.c-nextcup__people { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--grid); }
.cuppa .c-nextcup__people a { color: var(--accent); font-weight: 500; }
.c-trending { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cuppa .c-trending a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.cuppa .c-trending a:hover { border-color: var(--accent); }
.c-trending__roaster { color: var(--ink-soft); font-size: var(--step--1); }
.c-trending .c-muted { font-size: var(--step--1); background: none; }
@media (max-width: 640px) { .c-trending { grid-template-columns: 1fr; } .c-tipline { flex-direction: column; align-items: flex-start; } }

/* ---------- Insights ---------- */
.c-insights__note { margin: -24px 0 32px; font-size: var(--step--1); max-width: 70ch; }
.c-block .c-insights__note { margin: 10px 0 0; }
.c-takeaways { margin: 0 0 16px; padding: 14px 18px 14px 34px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--hi); border-radius: var(--radius); }
.c-takeaways li + li { margin-top: 6px; }
.c-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.c-insight-group h3 { font-size: var(--step-1); margin: 0 0 8px; }
.c-insight-group .c-muted { background: none; font-size: var(--step--1); }
.c-insight-table td, .c-insight-table th { padding: 8px 12px; }
.c-insight-table td:nth-child(2) { width: 40%; }
.c-meterbar { display: block; height: 10px; background: var(--paper); border: 1px solid var(--grid); border-radius: 2px; }
.c-meterbar span { display: block; height: 100%; background: var(--accent); }
.c-insights__sub { margin: -6px 0 12px; background: none; }
.c-tastebar { display: flex; height: 44px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); font-weight: 600; font-size: var(--step--1); }
.c-tastebar span { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; min-width: 0; overflow: hidden; }
.c-tastebar__sour { background: var(--hi); color: var(--on-hi); }
.c-tastebar__balanced { background: var(--accent); color: var(--on-accent); }
.c-tastebar__bitter { background: var(--error); color: #fff; }
@media (max-width: 760px) { .c-insight-grid { grid-template-columns: 1fr; } .c-insight-table td:nth-child(2) { display: none; } }

/* ---------- Landing (dial-in positioning) ---------- */
.c-hero__coach { font-family: var(--font-measure); font-size: var(--step-2); font-weight: 700; margin: 0; line-height: 1.15; }
.c-hero__why { color: var(--ink-soft); margin: 0 0 14px; font-size: var(--step--1); }
.c-landing__split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 8px 0 48px; }
.c-landing__text { background: none; margin: -4px 0 14px; max-width: 48ch; }
.c-trending--stack { grid-template-columns: 1fr; }
.cuppa .c-landing__more { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 600; }
.c-landing__roasters {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 40px;
  padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--hi); border-radius: var(--radius);
}
.c-landing__roasters h2 { margin: 0 0 4px; font-size: var(--step-2); }
.c-landing__roasters p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 820px) { .c-landing__split { grid-template-columns: 1fr; } .c-landing__roasters { flex-direction: column; align-items: flex-start; } }

/* ---------- Spending ---------- */
.c-spend { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.c-spend > div { padding: 12px 14px; border-left: 1px solid var(--grid); }
.c-spend > div:first-child { border-left: 0; }
.c-spend dt { color: var(--ink-soft); font-size: var(--step--1); }
.c-spend dd { margin: 2px 0 0; font-family: var(--font-measure); font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.c-spend dd small { display: block; font-family: var(--font-text); font-size: var(--step--1); font-weight: 400; color: var(--ink-soft); }
.c-spend__hint { margin: 0 0 18px; background: none; }
.c-spend__hint a { color: var(--accent); }
@media (max-width: 600px) { .c-spend { grid-template-columns: 1fr; } .c-spend > div { border-left: 0; border-top: 1px solid var(--grid); } .c-spend > div:first-child { border-top: 0; } }
.c-nextcup__cost { margin: -8px 0 14px; color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- Coffee page form (coffee-new.php) and the owner's QR panel ---------- */
.c-field-error { margin: 6px 0 0; color: var(--error); font-size: var(--step--1); font-weight: 500; }
.c-input[aria-invalid="true"] { border-color: var(--error); }
@media (prefers-color-scheme: dark) { .c-field-error { color: #FF9C8F; } }
.c-pageform .c-field[hidden] { display: none; }
.c-pageform__url { margin: -6px 0 14px; overflow-wrap: anywhere; }
.c-pageform__url:empty, .c-pageform__ratio:empty { display: none; }
.c-pageform__ratio { margin: -6px 0 14px; font-family: var(--font-measure); font-weight: 600; }
.c-pageform__price { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.c-photo-picks--one { grid-template-columns: minmax(0, 220px); }
.c-owner { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: start; border: 1.5px solid var(--accent); margin-bottom: 28px; }
.c-owner__qr { background: #fff; padding: 8px; border-radius: var(--radius); border: 1px solid var(--grid); line-height: 0; }
.c-owner__qr canvas, .c-owner__qr img { width: 100% !important; height: auto !important; }
.c-owner__title { margin: 0 0 6px; font-family: var(--font-measure); font-size: var(--step-2); }
.c-owner__title:focus { outline: none; }
.c-owner__text .c-muted { margin: 0 0 8px; }
.c-owner__url { margin: 0 0 12px; font-family: var(--font-measure); font-weight: 600; overflow-wrap: anywhere; }
.c-owner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.c-owner__status:empty { display: none; }
@media (max-width: 560px) { .c-owner { grid-template-columns: 1fr; } .c-owner__qr { width: 160px; } }

/* ---------- What's new (changelog.php) ---------- */
.c-whatsnew { max-width: 720px; }
.c-release { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 16px; }
.c-release--latest { border: 1.5px solid var(--accent); }
.c-release--next { background: var(--wash); border-style: dashed; }
.c-release__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0 0 8px; }
.c-release h2 { margin: 0; font-family: var(--font-measure); font-size: var(--step-2); line-height: 1.15; }
.c-release--latest h2 { font-size: var(--step-3); }
.c-release__date { margin: 0; color: var(--ink-soft); font-family: var(--font-measure); font-weight: 600; font-size: var(--step--1); }
.c-release__intro { margin: 0 0 6px; font-size: var(--step-1); max-width: 56ch; }
.c-release h3 { margin: 22px 0 6px; font-size: var(--step-0); font-weight: 700; }
.c-release ul { margin: 0; padding-left: 20px; }
.c-release li { margin: 0 0 8px; max-width: 64ch; }
.c-release li::marker { color: var(--accent); }
.c-release--next h2 { margin-bottom: 10px; }
.c-release--next .c-muted { margin: 10px 0 0; }

/* Sign-up from a coffee page: which coffee you're about to brew */
.c-forcoffee { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-forcoffee img { width: 56px; height: 70px; object-fit: cover; border-radius: 2px; }
.c-forcoffee p { margin: 0; display: flex; flex-direction: column; }
.c-forcoffee span { font-size: var(--step--1); color: var(--ink-soft); }
.c-forcoffee b { font-family: var(--font-measure); font-size: var(--step-1); }
.c-coffee__free { margin: 8px 0 0; }
/* "Poured, next step": big, easy to hit with a wet thumb */
.cuppa .c-brewmode__advance { width: 100%; min-height: 64px; margin-top: auto; font-size: var(--step-1); border: 1.5px solid var(--accent); color: var(--accent); }
.c-brewmode__advance[hidden] { display: none; }
.c-brewmode__advance:not([hidden]) + .c-brewmode__actions { margin-top: 10px; padding-top: 0; }

/* Cups saved on the phone while offline (js/app.js) */
.c-outbox { position: sticky; top: 0; z-index: 90; margin: 0; padding: 10px 16px; text-align: center; font-size: var(--step--1); font-weight: 600; background: var(--hi); color: var(--on-hi); }
.c-outbox.is-done { background: var(--ok-soft); color: var(--ink); }
.c-remind-status:empty { display: none; }
.c-remind-status { margin: 12px 0 0; max-width: 46ch; }
.c-quickrate { margin: 4px 0 24px; border: 0; padding: 0; }
.c-quickrate .c-hint:empty { display: none; }

/* ---------- Gear sections and the public setup page (/u/name/setup) ---------- */
.c-gear-share { margin: -8px 0 20px; }
.c-gear-section { margin: 24px 0 10px; font-family: var(--font-measure); font-size: var(--step-1); background: var(--wash); width: fit-content; }
.c-gear-pic--lg { width: 96px; height: 96px; }
.c-setup__head { margin: 0 0 8px; }
.c-setup__who { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 600; color: var(--ink); background: var(--wash); }
.c-setup__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.c-setup__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.c-setup__status:empty { display: none; }
.c-setup__status { margin: 8px 0 0; }
.c-setup__section { margin: 28px 0 0; }
.c-setup__title { margin: 0 0 12px; font-family: var(--font-measure); font-size: var(--step-2); background: var(--wash); width: fit-content; }
.c-setup__title .c-muted { font-size: var(--step-0); font-weight: 500; }
.c-setup__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .c-setup__grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.c-setup__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-setup__item img.c-gear-pic--lg { width: 100%; height: auto; aspect-ratio: 1; }
.c-setup__name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.c-setup__kind { font-size: var(--step--1); color: var(--ink-soft); margin-top: -4px; }

/* ---------- Getting started, coffee first (welcome.php) ---------- */
.c-welcome__step { margin: 0 0 6px; font-family: var(--font-measure); font-weight: 600; font-size: var(--step--1); color: var(--accent); }
.c-welcome__sub { margin: 22px 0 8px; }
.c-welcome__none { margin: 4px 0 12px; }
.c-welcome__alt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 26px 0 0; }
.c-welcome__skip { font-size: var(--step--1); }
.c-welcome__coffee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 14px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-welcome__coffee span { flex-basis: 100%; font-size: var(--step--1); color: var(--ink-soft); }
.c-welcome__coffee b { font-family: var(--font-measure); font-size: var(--step-1); }
.c-welcome__coffee a { margin-left: auto; font-size: var(--step--1); }
.c-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-picks:empty { display: none; }
.c-pick { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 64px; }
.c-pick:hover, .c-pick:focus-visible { border-color: var(--accent); }
.c-pick__pic { flex: none; width: 48px; height: 60px; object-fit: cover; border-radius: 2px; }
.c-pick__pic--none { display: flex; align-items: center; justify-content: center; font-family: var(--font-measure); font-weight: 700; color: var(--ink-soft); background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 100% 10px, 10px 100%; }
.c-pick__text { display: flex; flex-direction: column; min-width: 0; }
.c-pick__roaster { font-size: var(--step--1); color: var(--ink-soft); }
.c-pick__text b { font-weight: 600; }
.c-pick__meta { font-size: var(--step--1); color: var(--ink-soft); }
.cuppa .c-brewer--known .c-brewer__spec { color: var(--accent); font-weight: 600; }
.c-grinder-pick button.c-brewer { width: 100%; font: inherit; color: inherit; border: 0; background: none; text-align: left; cursor: pointer; }
.c-welcome__nogrinder { margin-top: 18px; }
.c-suggest li.c-suggest__community { display: flex; flex-direction: column; gap: 2px; }
.c-suggest li.c-suggest__community span { font-size: var(--step--1); color: var(--accent); font-weight: 600; }
.c-brewmode__recipe { margin: 6px 0 0; font-family: var(--font-measure); font-weight: 600; color: var(--ink-soft); }
.c-brewmode__recipe:empty { display: none; }
.c-brewmode__recipe mark { background: var(--hi); color: var(--on-hi); padding: 0 4px; border-radius: 2px; }
.c-servings .c-stepper { max-width: 200px; }
.c-moredetails { margin: 0 0 18px; }
.c-moredetails summary .c-hint { margin-left: 6px; }
.c-grinder-ask { margin-top: 8px; font-size: var(--step--1); }
.c-grinder-ask summary { color: var(--accent); cursor: pointer; font-weight: 600; }
.c-grinder-ask .c-hint { margin: 6px 0; }
.c-grinder-ask__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.c-foryou { margin: 0 0 28px; }
.c-foryou[hidden] { display: none; }
.c-foryou__why { margin: -6px 0 12px; max-width: 60ch; }

/* ---------- Add a bag: find the coffee, then your bag ---------- */
.c-bagfind .c-field { margin-bottom: 0; }
.c-bagfind #catalog-q { font-size: var(--step-1); padding: 12px 14px; }
.c-bagfind__alt { margin: 14px 0 0; }
.c-bagfind__alt[hidden], .c-bagfind [hidden] { display: none; }
.c-suggest li.c-suggest__add { color: var(--accent); font-weight: 600; }
.c-bagpicked { display: flex; align-items: center; gap: 12px; }
.c-bagpicked__pic { flex: none; width: 60px; height: 75px; border-radius: 2px; overflow: hidden; border: 1px solid var(--grid); }
.c-bagpicked__pic img { width: 100%; height: 100%; object-fit: cover; }
.c-bagpicked__pic.is-none { display: flex; align-items: center; justify-content: center; font-family: var(--font-measure); font-weight: 700; color: var(--ink-soft); background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 100% 10px, 10px 100%; }
.c-bagpicked__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-bagpicked__roaster { font-size: var(--step--1); color: var(--ink-soft); }
.c-bagpicked__text b { font-family: var(--font-measure); font-size: var(--step-1); line-height: 1.2; }
.c-bagpicked__meta { font-size: var(--step--1); color: var(--ink-soft); }
.c-bagpicked__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.c-bagpicked__edit { background: none; border: 0; padding: 0; font: inherit; font-size: var(--step--1); color: var(--accent); cursor: pointer; }
.c-bagopen { margin: 12px 0 0; padding: 10px 12px; background: var(--ok-soft); border-radius: var(--radius); }
.c-bagopen p { margin: 0 0 6px; }
.c-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.c-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.c-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.c-size { min-height: 44px; padding: 0 14px; font: inherit; font-family: var(--font-measure); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.c-size[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.c-size__other { width: 110px; min-height: 44px; }
.c-yourbag__fresh:empty, #price-hint:empty { display: none; }
.c-yourbag__fresh { margin: 6px 0 0; }
.cuppa-app form#bag-form { background: none; border: 0; padding: 0; box-shadow: none; }
.c-sizes .c-input.c-size__other { width: 120px; flex: none; }
.c-alsoopen__list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-alsoopen__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.c-alsoopen__list li + li { border-top: 1px solid var(--grid); }
.c-alsoopen__text { display: flex; flex-direction: column; min-width: 0; }
.c-alsoopen__text span { font-size: var(--step--1); color: var(--ink-soft); }
.c-askme { margin: 16px 0; padding: 12px 14px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }
.c-askme p { margin: 0 0 10px; font-size: var(--step--1); }
.c-gear-results li.c-gear-results__ask b { color: var(--accent); }

/* ---------- Coffee page: recipe tabs, what people learned, cost, your cups ---------- */
.c-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.c-tabs [role="tab"] { min-height: 40px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.c-tabs [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.c-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-recipepanel[hidden] { display: none; }
.c-recipepanel__brewer { margin: 0; font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; }
.c-recipepanel__line { margin: 2px 0 6px; font-family: var(--font-measure); font-size: var(--step-1); font-weight: 600; }
.c-recipepanel__grind, .c-recipepanel__notes { margin: 0 0 6px; }
.c-recipepanel__who { margin: 0 0 12px; font-size: var(--step--1); }
.c-recipepanel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.c-recipepanel__grinders { margin-top: 14px; }
.c-recipepanel__grinders .c-grindtable { margin-top: 10px; }
.c-learned__list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-learned__list li { padding: 12px 14px 12px 38px; position: relative; max-width: 70ch; }
.c-learned__list li + li { border-top: 1px solid var(--grid); }
.c-learned__list li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 8px; height: 8px; background: var(--hi); border-radius: 50%; }
.c-cost p, .c-mycups p { margin: 0 0 6px; max-width: 70ch; }

/* ---------- A year in coffee (year.php, js/year.js): bags on a table, turn one over to read it ---------- */
.c-year { max-width: 1200px; margin: 0 auto; }
.c-year__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 12px; }
.c-year__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.c-year__years, .c-year__layouts { display: flex; flex-wrap: wrap; gap: 6px; }
.c-year__years a, .c-year__layouts button { min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.c-year__years a[aria-current="page"], .c-year__layouts button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c-year__stage { position: relative; width: 100%; }
.c-year__msg, .c-year__hint { text-align: center; color: var(--ink-soft); font-size: var(--step--1); }
.c-year__hint { margin: 8px 0 18px; }
.c-year__bag { position: absolute; transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.c-year__bag:hover, .c-year__bag:focus-within { z-index: 50 !important; filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.c-year__bag.is-open { z-index: 100 !important; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.c-year__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.1,.2,1); }
.c-year__bag.is-open .c-year__flip { transform: perspective(1100px) rotateY(180deg); }
.c-year__front, .c-year__back { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
img.c-year__front { display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
/* Phone photos aren't cut out: give them a paper edge so they read as a print on the table */
img.c-year__front.is-photo { object-fit: cover; border: 5px solid #fff; border-radius: 3px; background: #fff; }
.c-year__drawn { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 26% 10% 10%; background: var(--bagc, #F2DD4B); color: #15233F; border-radius: 6px 6px 4px 4px; text-align: center; overflow: hidden; box-shadow: inset 0 14px 0 rgba(21,35,63,.12); }
.c-year__drawn-rs { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.c-year__drawn b { font-family: var(--font-measure); font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }
.c-year__hit { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.c-year__bag.is-open .c-year__hit { pointer-events: none; }
.c-year__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes c-year-fall { 0% { transform: translate(0, -110vh) rotate(var(--r)); } 55% { transform: translate(var(--sx), 10px) rotate(calc(var(--r) * -.45)); } 72% { transform: translate(calc(var(--sx) * -.35), -6px) rotate(calc(var(--r) * .18)); } 86% { transform: translate(calc(var(--sx) * .1), 2px) rotate(calc(var(--r) * -.06)); } 100% { transform: none; } }
.c-year__front.is-falling { animation: c-year-fall var(--d) cubic-bezier(.3,.1,.4,1) var(--dl) both; }
/* The back: a label ticket */
.c-year__back { --pop: #F2DD4B; transform: rotateY(180deg); background: #fff; color: #15233F; border-radius: 6px; padding: 14px 16px 12px; overflow: auto; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.45; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.c-year__back[inert] { pointer-events: none; }
.c-year__back dl, .c-year__back dd { margin: 0; }
.c-year__back button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 0; }
.c-year__back button:focus-visible, .c-year__back a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-year__top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .1em; margin-bottom: 8px; }
.c-year__close { font-size: 20px !important; line-height: 1; width: 32px; height: 32px; margin: -8px -10px 0 0; }
.c-year__rs { font-weight: 700; letter-spacing: .06em; margin: 0; }
.c-year__back h2 { font: 700 16px/1.15 "IBM Plex Mono", monospace; margin: 2px 0; overflow-wrap: anywhere; color: #15233F; }
.c-year__or { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px dashed #15233F; }
.c-year__back dl div { display: flex; align-items: baseline; gap: 6px; }
.c-year__back dl div::before { content: ""; order: 1; flex: 1; border-bottom: 1px dotted #15233F; transform: translateY(-3px); min-width: 8px; }
.c-year__back dt { order: 0; }
.c-year__back dd { order: 2; font-weight: 700; text-align: right; }
.c-year__notes { margin: 10px 0 0; padding: 6px 8px; background: var(--pop); font-weight: 700; }
.c-year__link { margin: 8px 0 0; color: #2346D9; font-weight: 700; }
.c-year__deco { flex: none; height: 20px; margin: auto 0 6px; background: repeating-linear-gradient(90deg, #15233F 0 2px, #fff 2px 4px, #15233F 4px 5px, #fff 5px 9px, #15233F 9px 12px, #fff 12px 14px); }
.c-year__nav { display: flex; justify-content: space-between; font-size: 10px; }
.c-year__nav button { text-decoration: underline; padding: 6px 0; }
.c-year__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.c-year__stats div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.c-year__stats dt { font-size: var(--step--1); color: var(--ink-soft); }
.c-year__stats dd { margin: 0; font-family: var(--font-measure); font-size: var(--step-2); font-weight: 700; }
.c-year__stats dd.c-year__word { font-size: var(--step-1); }
.c-year__fav { margin: 0 0 14px; background: var(--wash); width: fit-content; }
.c-year__share { margin-bottom: 24px; }
@media (max-width: 699px) { .c-year__controls { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .c-year__bag, .c-year__flip { transition: none; } .c-year__front.is-falling { animation: none; } }
.c-year__back dl div.is-long { display: block; margin: 2px 0; }
.c-year__back dl div.is-long::before { display: none; }
.c-year__back dl div.is-long dd { text-align: left; }
/* Drawn bags: text scales with the bag, so small table bags stay readable */
.c-year__drawn { container-type: inline-size; }
.c-year__drawn b { font-size: max(8px, 13cqw); overflow-wrap: break-word; hyphens: auto; }
.c-year__drawn-rs { font-size: max(6px, 8.5cqw); }
.c-year__stage { overflow-x: clip; }

/* ---------- Admin (admin.php) ---------- */
.c-admin .c-tabs a[role="tab"] { display: inline-flex; align-items: center; text-decoration: none; }
.c-admin__confirm { max-width: 360px; display: grid; gap: 10px; }
.c-admin__checks { list-style: none; margin: 0 0 24px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.c-admin__check { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px; align-items: start; }
.c-admin__check + .c-admin__check { border-top: 1px solid var(--grid); }
.c-admin__check p { margin: 2px 0 0; max-width: 70ch; }
.c-admin__check .c-muted { font-size: var(--step--1); }
.c-admin__status { display: inline-block; text-align: center; padding: 2px 0; border-radius: 3px; font-family: var(--font-measure); font-weight: 700; font-size: var(--step--1); }
.c-admin__check.is-ok .c-admin__status { background: var(--ok-soft); color: var(--ink); }
.c-admin__check.is-warn .c-admin__status { background: var(--hi); color: var(--on-hi); }
.c-admin__check.is-bad .c-admin__status { background: var(--error); color: #fff; }
.c-admin__files { list-style: none; margin: 0; padding: 0; }
.c-admin__files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.c-admin__errors td { font-size: var(--step--1); vertical-align: top; overflow-wrap: anywhere; }
.c-admin__details { font-size: var(--step--1); max-width: 40ch; overflow-wrap: anywhere; }
.c-admin__inline p { margin: 0 0 8px; }
.c-admin__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 20px; }
.c-admin__filters .c-select { width: auto; }
.c-admin__funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-admin__funnel li { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr 90px; gap: 10px; align-items: center; }
.c-admin__funnel-bar { height: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.c-admin__funnel-bar span { display: block; height: 100%; background: var(--accent); }
.c-admin__funnel-n { text-align: right; font-family: var(--font-measure); }
.c-admin__callout { margin: 14px 0 0; padding: 10px 12px; background: var(--hi); color: var(--on-hi); border-radius: var(--radius); width: fit-content; }
.c-admin__sub { margin: 18px 0 8px; font-size: var(--step-0); }
@media (max-width: 520px) { .c-admin__funnel li { grid-template-columns: 1fr 70px; } .c-admin__funnel-bar { grid-column: 1 / -1; grid-row: 2; } }
.c-askme p { max-width: 70ch; }
.c-askme .c-alert { margin: 0 0 12px; }
.c-admin__requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.c-admin__request-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.c-admin__request-head b { font-family: var(--font-measure); font-size: var(--step-1); }
.c-admin__notes { margin: 0 0 10px; padding-left: 18px; font-size: var(--step--1); color: var(--ink-soft); }
.c-admin__request-actions { display: grid; gap: 8px; }
.c-admin__request-actions form, .c-admin__typed form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-admin__request-actions .c-select, .c-admin__request-actions .c-input { flex: 1; min-width: 180px; width: auto; }
.c-admin__hint { margin: 8px 0 0; font-size: var(--step--1); }
.c-admin__gearhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; }
.c-admin__gearhead .c-admin__filters { margin: 0; }
.c-admin__gear th, .c-admin__gear td { vertical-align: middle; }
.c-admin__gearname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.c-admin__gearname .c-gear-pic--sm { width: 28px; height: 28px; }
.c-admin__gearinfo { font-size: var(--step--1); }
.c-admin__gear tr.is-retired { opacity: .55; }
.c-admin__warn { color: var(--error); font-weight: 600; }
@media (prefers-color-scheme: dark) { .c-admin__warn { color: #FF9C8F; } }
.c-admin__fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; }
.c-admin__fieldset legend { font-weight: 600; padding: 0 6px; }
.c-admin__fieldset[hidden], .c-admin__gearform [hidden] { display: none; }
.c-admin__arts { display: flex; flex-wrap: wrap; gap: 6px; }
.c-admin__art { display: inline-flex; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.c-admin__art input { position: absolute; opacity: 0; pointer-events: none; }
.c-admin__art:has(input:checked) { border-color: var(--accent); outline: 2px solid var(--accent); }
.c-admin__art:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-admin__preview { margin-top: 14px; }
.c-admin__preview caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.c-admin__typed { list-style: none; margin: 0; padding: 0; }
.c-admin__typed li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.c-admin__typed .c-select { width: auto; }

/* Notice banner (Admin > Settings): a strip of highlighter under the top bar */
.c-notice { background: var(--hi); color: var(--on-hi); padding: 8px 16px; text-align: center; font-weight: 600; font-size: var(--step--1); }

/* "Tell us" on the More page */
.c-feedback { display: grid; gap: 8px; max-width: 560px; }
.c-feedback .c-btn { justify-self: start; }

/* Admin: Coffees, People, Recipes, Data quality, Settings */
.c-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); vertical-align: middle; }
.c-admin__subnav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--grid); }
.c-admin__subnav a { font-weight: 600; text-decoration: none; padding: 4px 0; }
.c-admin__subnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.c-admin__merge { margin: 0 0 12px; overflow-x: auto; }
.c-admin__merge .c-table { margin: 0 0 10px; }
.c-admin__merge input[type="checkbox"], .c-admin__merge input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }
.c-admin__mergefoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.c-admin__mergefoot .c-input { width: auto; flex: 1; min-width: 160px; }
.c-admin__mergefoot .c-btn { margin-left: auto; }
.c-admin__inlineform { display: grid; gap: 6px; max-width: 420px; margin-top: 8px; }
.c-admin__inlineform .c-btn { justify-self: start; margin-top: 4px; }
.c-admin__pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-admin__pages li.is-hidden { opacity: .6; }
.c-admin__rowactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-admin__reassign { display: flex; gap: 6px; align-items: center; }
.c-admin__reassign .c-input { width: 160px; }
.c-admin__pageform { display: grid; gap: 4px; max-width: 560px; }
.c-admin__photos { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.c-admin__photos li { display: grid; gap: 6px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.c-admin__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--paper); display: block; }
.c-admin__photocap { font-size: var(--step--1); overflow-wrap: anywhere; }
.c-admin__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; margin: 0; }
.c-admin__facts dt { font-size: var(--step--1); color: var(--ink-soft); }
.c-admin__facts dd { margin: 2px 0 0; font-weight: 600; }
.c-admin__events { margin: 0; padding-left: 18px; font-size: var(--step--1); }
.c-admin__support { display: flex; flex-wrap: wrap; gap: 8px; }
.c-admin__danger { border-color: var(--error); }
.c-admin__danger ul { padding-left: 18px; }
.c-admin__danger .c-input { max-width: 320px; }
.c-admin__search { max-width: 520px; margin: 0 0 16px; }
.c-admin__searchrow { display: flex; gap: 8px; }
.c-admin__people { list-style: none; margin: 0 0 16px; padding: 0; }
.c-admin__people li { padding: 6px 0; border-bottom: 1px solid var(--grid); }
.c-admin__recipeform { display: grid; gap: 4px; }
.c-admin__steps td { padding: 4px; }
.c-admin__steps td:first-child { width: 80px; }
.c-admin__steps td:nth-child(3) { width: 90px; }
.c-admin__play { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); font-family: var(--font-measure); }
.c-admin__play p { margin: 4px 0 0; font-family: var(--font-text, inherit); }
.c-admin__feedback { list-style: none; margin: 0 0 10px; padding: 0; }
.c-admin__feedback li { padding: 8px 0; border-bottom: 1px solid var(--grid); }
.c-admin__feedback .c-check { align-items: flex-start; font-weight: 400; }
.c-admin__settings { display: grid; gap: 12px; max-width: 640px; }
.c-admin__settings .c-check { font-weight: 600; flex-wrap: wrap; }
.c-admin__settings .c-check .c-hint { font-weight: 400; width: 100%; padding-left: 28px; margin-top: -4px; }
@media (max-width: 520px) { .c-admin__reassign .c-input { width: 120px; } .c-admin__steps td:first-child { width: 64px; } }