/* The page's parts. Values come from tokens.css; logical properties only (inline-start / inline-end, never a side).
   Class names say what a part is (.chip, .card), not how it looks. The look is "Calm surface" (SPEC_redesign_calm_v1.md):
   sections are not boxed, their content sits in white tiles with no border. */

/* ---------- layout ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* a section: a heading, then its content on the page's own background */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);
  min-inline-size: 0;
}

/* The page's body: on a phone one column, and the mode panels and the aside (the main button and the result, or the mixer's sheet
   and list) are `display: contents`, so that their parts are items of that column: the bar and the sheet can then be pinned to the
   bottom of the screen for as long as the inputs above them are on it. */
.layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.tabpanel,
.aside {
  display: contents;
}

/* a wide screen: the inputs in the first column, the aside in the second, and the aside stays in view as the page scrolls */
@media (min-width: 64rem) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-width);
    column-gap: var(--space-6);
    row-gap: 0;                         /* the aside spans about twenty rows: a gap between them would be empty space under the inputs */
    align-items: start;
  }

  /* the space between sections is the sections' own margin, so that the last one has none under it */
  .layout > .step,
  .tabpanel > .step {
    grid-column: 1;
    margin-block-start: var(--space-section);
  }

  .layout > .step:first-child {
    margin-block-start: 0;
  }

  .aside {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 20;              /* the whole height of the inputs, so that it can stay in view beside all of them */
    position: sticky;
    inset-block-start: 1.25rem;
    align-self: start;
  }

  .aside > * + * {
    margin-block-start: var(--space-3);
  }
}

/* a white tile (in the dark theme it has a hairline edge, so that it does not melt into the page; in the light theme the edge is clear) */
.tile {
  border: var(--border-width) solid var(--color-tile-border);
  background: var(--color-card);
  border-radius: var(--radius-tile);
}

/* ---------- the header ---------- */

/* On a phone: the drop at the start and the tools (the language pill) at the end, the title across the whole width, the
   description, then the mode switch. From 64rem the tools are a row on top, the title and the description are at the start and the
   mode switch (24rem) at the end, level with the bottom of the description. There is no text beside the drop. */
.page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark . tools"
    "title title title"
    "sub sub sub"
    "mode mode mode";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-end: var(--space-4);
}

.lang-row {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;                  /* the end of the line, whichever way the language reads */
}

.brand {
  display: contents;                  /* the drop and the h1 are items of the header's grid */
}

.page-head h1 {
  grid-area: title;
  margin-block-start: var(--space-2);
}

/* a small water drop drawn with a rounded square turned a quarter-ish: one corner left sharp */
.brand-drop {
  grid-area: mark;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50% 50% 50% 0.25rem;
  background: var(--color-accent);
  transform: rotate(-45deg);
}

.page-head .caption {
  grid-area: sub;
  max-inline-size: 60ch;
}

.page-head .tablist {
  grid-area: mode;
  margin-block-start: var(--space-3);
}

@media (min-width: 64rem) {
  .page-head {
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-areas:
      "mark tools"
      "title mode"
      "sub mode";
    column-gap: var(--space-6);
    margin-block-end: var(--space-5);
  }

  .page-head .tablist {
    align-self: end;
    margin-block-start: 0;
  }
}

/* a step's heading: a small two-digit number in the accent colour, then its words */
.step-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-md);
}

.step-number {
  flex: none;
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
}

/* text for a screen reader that the eye does not need (the full stop after a step's number, a group's name) */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.caption {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---------- the language switch: a small pill ---------- */

.segmented {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  direction: ltr;                     /* the two names keep their order in both languages, as in the Streamlit app */
}

/* the light/dark button, before the language pill: it shows the theme it switches to (a moon while light, a sun while dark) */
.theme-btn {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
}

.theme-btn::before {
  content: "";
  inline-size: 1.05rem;
  block-size: 1.05rem;
  background: currentColor;
  -webkit-mask: var(--icon-moon) center / contain no-repeat;
  mask: var(--icon-moon) center / contain no-repeat;
}

:root[data-theme="dark"] .theme-btn::before {
  -webkit-mask-image: var(--icon-sun);
  mask-image: var(--icon-sun);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn::before {
    -webkit-mask-image: var(--icon-sun);
    mask-image: var(--icon-sun);
  }
}

.segmented-btn {
  min-block-size: 2rem;
  padding-block: 0;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 400;
  cursor: pointer;
}

.segmented-btn[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 600;
}

/* On the English page this button's name is the only Arabic word: the machine's own Arabic font shows it, so that the
   English page does not fetch a 42 KB font file for one word. */
:root:lang(en) .segmented-btn[lang="ar"] {
  font-family: var(--font-system);
}

/* ---------- fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.field-label {
  font-size: var(--text-sm);
}


.input,
.select {
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-card);
  color: var(--color-text);
  font-size: var(--text-base);
}

.input:focus,
.select:focus {
  border-color: var(--color-accent);   /* the focus ring comes with it (base.css :focus-visible) */
}

.input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-sm);          /* a hint, not a value */
  font-weight: 400;
  opacity: 1;
}

.input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-number {
  text-align: start;                  /* the numbers are always left to right (the element has dir="ltr") ... */
  font-variant-numeric: tabular-nums;
}

:root:dir(rtl) .input-number {
  text-align: end;                    /* ... but on the Arabic page they sit at the end of the box, as in the Streamlit app */
}

/* a number tile: a small label (the symbol in bold, then the name, on one line), the number big under it, "ppm" small at the end */
.tile-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-tile-border);
}

/* a tile with the keyboard: a 2 px accent edge (its border and an inset line), no blue ring around it */
.tile-field:focus-within {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
}

.tile-label {
  display: block;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-label b {
  color: var(--color-text);
  font-weight: 600;
}

.tile-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.tile-field .input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 500;
}

.tile-field .input:focus-visible {
  outline: none;                      /* the tile shows the focus ring (.tile-field:focus-within) */
}

.tile-unit {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* the six target boxes as one area: one panel, three to a row, hairlines between the boxes (the panel's colour shows through the 1 px gaps) */
.target-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.target-grid,
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border-width);
  overflow: hidden;
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-line);
}

.target-grid > .tile-field,
.panel-grid > .tile-field {
  border: 0;
  border-radius: 0;
}

.panel-filler {
  background: var(--color-card);
}

/* the label details have long names: they may take two lines */
.panel-grid-labels .tile-label {
  white-space: normal;
}

.target-grid > .tile-field:focus-within,
.panel-grid > .tile-field:focus-within {
  outline: none;                      /* inside the panel the ring would be cut off: an inset accent edge instead */
  box-shadow: inset 0 0 0 var(--rule-width) var(--color-accent);
}

/* an amount and its unit in one tile: the label and the number at the start, the unit's segmented control at the end */
.amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
}

.amount-row > .tile-label,
.amount-row > .tile-row {
  grid-column: 1;
}

.amount-row > .seg-group {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.amount-row .seg-text {
  min-inline-size: 2.75rem;
  min-block-size: 2.25rem;
  padding-inline: var(--space-3);
}

.amount-row .input-number {
  min-inline-size: 0;
}

.mode-row .seg-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ---------- a segmented control: a real radio group drawn as a pill ---------- */

.seg-group {
  display: flex;
  min-inline-size: 0;
}

.seg-legend {
  font-size: var(--text-sm);
}

.seg {
  display: inline-flex;
  align-items: stretch;
  gap: 0.1875rem;
  padding: 0.1875rem;
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.seg-option {
  position: relative;
  display: flex;
}

.seg-input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 3.25rem;
  min-block-size: 2.5rem;
  padding-inline: var(--space-4);
  border-radius: 0.5625rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.seg-input:checked + .seg-text {
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  color: var(--color-text);
  font-weight: 600;
}

.seg-input:focus-visible + .seg-text {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* ---------- step 1: the water chips ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* a water: a button that is on (picked) or off */
.chip {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  min-block-size: 2.25rem;
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: start;
  cursor: pointer;
}

.chip-name {
  overflow-wrap: anywhere;
}

.chip[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

/* at the most waters an unpicked chip does nothing */
.chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* the last chip: add a water of your own (it opens the form under the chips) */
.chip-add {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-accent);
}

.chip-add::before {
  content: "+\00a0";
}

.chip-add[aria-expanded="true"] {
  background: var(--color-accent-soft);
}

/* what the picked waters hold: one panel, a header row (what it is and the unit, then the symbols), the numbers in columns at the end */
.comp-tile {
  overflow: hidden;
  padding: 0;
  container-type: inline-size;
}

.comp-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.comp-table th,
.comp-table td {
  padding-block: var(--space-2) 0.125rem;
  padding-inline: var(--space-1);
  text-align: end;
}

.comp-table tr > :first-child {
  padding-inline-start: var(--space-3);
}

.comp-table tr > :last-child {
  padding-inline-end: var(--space-3);
}

.comp-table thead th {
  padding-block: var(--space-2);
  border-block-end: var(--border-width) solid var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
}

.comp-table thead .comp-label {
  text-align: start;
}

/* the numbers keep narrow columns at the end, on a wide screen too; the names take the rest */
.comp-table thead th:not(.comp-label) {
  inline-size: 2.5rem;
}

.comp-table tbody td {
  white-space: nowrap;
}

.comp-unit {
  font-weight: 400;
}

.comp-table tbody th {
  font-weight: 600;
  text-align: start;
}

.comp-table tbody tr:not(:first-child):not(.comp-derived) > * {
  border-block-start: var(--border-width) solid var(--color-line);
}

/* the line under a water's minerals: GH, KH and TDS, part of the same water (no rule between) */
.comp-table .comp-derived td {
  padding-block: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  text-align: start;
}

/* the same three numbers as columns: only on a wide table (below) */
.comp-table .comp-extra {
  display: none;
}

/* a wide table: a water is one line, GH, KH and TDS are muted columns after a faint divider, and the line under it goes */
@container (min-inline-size: 36rem) {
  .comp-table .comp-extra {
    display: table-cell;
    color: var(--color-text-muted);
  }

  .comp-table .comp-gh {
    border-inline-start: var(--border-width) solid var(--color-line);
    padding-inline-start: var(--space-2);
  }

  .comp-table .comp-derived {
    display: none;
  }

  .comp-table tbody tr > * {
    padding-block: var(--space-2);
  }
}

/* ---------- expanders (details / summary): quiet rows with a hairline between them ---------- */

.expander {
  border-block-start: var(--border-width) solid var(--color-line);
}

.expander > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--tap-min);
  padding-block: var(--space-1);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-body);
  font-weight: 400;
}

.expander > summary::-webkit-details-marker {
  display: none;
}

/* a chevron that points down when closed and up when open, the same in both directions */
.expander > summary::after {
  content: "";
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  color: var(--color-text-muted);
  transition: transform var(--duration);
}

.expander[open] > summary::after {
  transform: rotate(180deg);
}

.expander-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-4);
}

/* a link that opens more: accent text, no rule above it */
.expander-link {
  border-block-start: 0;
}

.expander-link > summary {
  justify-content: flex-start;
  color: var(--color-accent);
}


/* the add-water form: opened by the last chip, so its own summary is not drawn */
.add-water {
  border-block-start: 0;
}

.add-water > summary {
  display: none;
}

.add-water[open] {
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-card);
}

.form-title {
  font-size: var(--text-md);
}

/* inside the white card a tile is set apart by a hairline instead of its colour */
.form-card > .tile-field,
.form-card .panel-grid {
  border-color: var(--color-line);
}

/* ---------- step 2: the recipe cards ---------- */

/* the recipe dropdown: a tile with its label and the phone's own picker (every name whole) */
.recipe-pick {
  padding-block-end: var(--space-1);
}

/* the phone keeps the dropdown focused after a choice: no blue ring on the select inside the tile (the tile shows the accent edge) */
.recipe-select:focus-visible {
  outline: none;
}

.recipe-select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}

/* the recipe's published profile, as a small label: two columns of lines, each the symbol and word at the start and the value at the end */
.profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  padding-block: var(--space-1) var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-card);
}

.profile-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-inline-size: 0;
  padding-block: var(--space-2);
  border-block-end: var(--border-width) solid var(--color-line);
}

.profile-item:nth-last-child(-n + 2) {
  border-block-end: 0;                /* the last row: the label's own edge closes it */
}

.profile-key {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-key b {
  color: var(--color-text);
  font-weight: 600;
}

.profile-value {
  flex: none;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.profile-unit {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: 400;
}

.recipe-source {
  font-size: var(--text-sm);
}

.recipe-notes {
  line-height: var(--leading-normal);
}

/* ---------- cards and messages ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

/* a result: a white card with a soft corner */
.card-result {
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-card);
  background: var(--color-card);
  animation: fade-in var(--duration-fade) ease-out;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-title {
  font-size: var(--text-lg);
}

.card-title:focus {
  outline: none;                      /* the page puts the keyboard here after a solve; it is not a control */
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* what the card says about itself: almost exact (green) or the closest possible (warm) */
.pill {
  flex: none;
  padding-block: var(--space-1);
  padding-inline: 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.pill-exact {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.pill-closest {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

.gap {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* the old card stays, dimmed, while the answer to what was changed arrives */
.results-live.is-updating .card-result {
  opacity: 0.55;
}

.card-result .card-title + .updating {
  margin-block-start: calc(-1 * var(--space-2));
}

/* a message: an icon (a mask, in the colour of the text) and the words */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  line-height: var(--leading-snug);
}

.alert::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: currentColor;
}

.alert-body {
  min-inline-size: 0;
}

/* the warnings inside the result card, right under the gap line */
.alert-compact {
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

.alert-compact::before {
  inline-size: 1rem;
  block-size: 1rem;
}

/* a plain note (the mixer with no water picked): no icon, no colour of its own */
.alert-info {
  background: var(--color-card);
  color: var(--color-text);
}

.alert-info::before {
  display: none;
}

.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.alert-success::before {
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.alert-error::before {
  -webkit-mask: var(--icon-error) center / contain no-repeat;
  mask: var(--icon-error) center / contain no-repeat;
}

.alert-warn {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

.alert-warn::before {
  -webkit-mask: var(--icon-warn) center / contain no-repeat;
  mask: var(--icon-warn) center / contain no-repeat;
}

/* the "add this water" tip: soft teal, with a drop */
.alert-tip {
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

.alert-tip::before {
  color: var(--color-accent);
  -webkit-mask: var(--icon-drop) center / contain no-repeat;
  mask: var(--icon-drop) center / contain no-repeat;
}

/* ---------- buttons: teal outline, a white pill, and the one espresso button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration), transform var(--duration);
}

.btn:hover:not(:disabled) {
  background: var(--color-accent-soft);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  min-block-size: var(--button-height);
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.btn-block {
  inline-size: 100%;
}

/* the tip's button: white on the tip's soft teal */
.btn-pill {
  border-color: transparent;
  background: var(--color-card);
}

/* "Copy amounts", at the end of the total line: a text button in the accent colour, no outline */
.btn-copy {
  min-block-size: 2.25rem;
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-copy:hover {
  background: var(--color-accent-soft);
}

/* a secondary button that is the width of the screen on a phone */
.btn-wide {
  inline-size: 100%;
}

@media (min-width: 40rem) {
  .btn-wide {
    inline-size: auto;
  }
}

.stack > .btn,
.results-live > .btn {
  align-self: flex-start;             /* a button in a form keeps its own width, as in the Streamlit app */
}

.stack > .btn.btn-wide,
.results-live > .btn.btn-wide {
  align-self: stretch;
}

@media (min-width: 40rem) {
  .stack > .btn.btn-wide,
  .results-live > .btn.btn-wide {
    align-self: flex-start;
  }
}

/* the main button: on a phone a bar pinned to the bottom of the screen (the page's colour, a little see-through, edge to edge);
   beside the inputs on a wide screen it is simply the first thing in the aside */
.solve-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--page-gutter));
  padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  padding-inline: var(--page-gutter);
  border-block-start: var(--border-width) solid var(--color-line);
  background: var(--color-bar);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

/* beside the inputs on a wide screen, and on a phone once there is a result (the page then scrolls to it): in the flow, at the end
   of step 03; the bar comes back to the bottom of the screen when the result is cleared */
.solve-bar.is-inflow {
  position: static;
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 64rem) {
  .solve-bar {
    position: static;
    margin-inline: 0;
    padding: 0;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* the live bar (phones only): once there is a result and the card is off screen, the answer of the moment pinned to the bottom, in
   the solve bar's look; it sits after the results and is sticky, so it never covers the footer */
.live-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline: calc(-1 * var(--page-gutter));
  padding-block: var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  padding-inline: var(--page-gutter);
  border-block-start: var(--border-width) solid var(--color-line);
  background: var(--color-bar);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}

@media (min-width: 64rem) {
  .live-bar {
    display: none;
  }
}

.results:focus {
  outline: none;                      /* the live bar's button puts the keyboard here when there is no card */
}

.live-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.live-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.live-dot {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.live-blend {
  display: flex;
  gap: var(--space-3);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* each item gives way as a whole: the name takes the ellipsis, the amount always stays */
.live-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 0;
}

.live-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-amount {
  flex: none;
  white-space: nowrap;
}

.live-bar-slot .pour-bar {
  display: table;
}

.pour-bar.pour-bar-slim {
  block-size: 0.45rem;
}

.pour-bar-slim .pour-seg:first-child {
  border-start-start-radius: 0.225rem;
  border-end-start-radius: 0.225rem;
}

.pour-bar-slim .pour-seg:last-child {
  border-start-end-radius: 0.225rem;
  border-end-end-radius: 0.225rem;
}

.live-show {
  flex: none;
  min-block-size: 2.5rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

/* calculating: the old answer is dimmed; a new answer flashes the blend line in the accent colour */
.live-bar.is-calculating .live-blend,
.live-bar.is-calculating .pour-bar {
  opacity: 0.45;
}

.live-blend.is-flash {
  animation: live-flash 300ms ease-out;
}

@keyframes live-flash {
  from {
    color: var(--color-accent);
  }
}

/* no blend: the dot and the hairline are the error colour and the line says so, with no bar */
.live-bar.is-error {
  border-block-start-color: var(--color-error-text);
}

.live-bar.is-error .live-dot {
  background: var(--color-error-text);
}

.live-none {
  color: var(--color-error-text);
}

/* the problem report after a refused backup: its button, and what became of it beside it (under it on a narrow screen) */
.report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.btn[aria-busy="true"]::after {
  content: "";
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- the mode switch: two parts on a soft track; the open part is a white thumb ---------- */

.tablist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: 0.875rem;
  background: var(--color-surface);
}

.tab {
  /* A label may wrap on a phone (the second one is long): the two tabs are always one height, each label centred in its
     tab and broken into two even lines. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  line-height: var(--leading-snug);
  min-block-size: var(--tap-min);
  padding-block: 0.375rem;
  padding-inline: var(--space-2);
  border: 0;
  border-radius: 0.6875rem;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  transition: background var(--duration);
}

.tab[aria-selected="true"] {
  background: var(--color-card);
  box-shadow: var(--shadow-tile);
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- mix my own ---------- */

/* the waters of the mix in one panel, hairlines between the rows (the panel's colour shows through the 1 px gaps) */
.mix-rows {
  display: grid;
  gap: var(--border-width);
  overflow: hidden;
  container-type: inline-size;
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-line);
}

.mix-rows > .tile {
  border: 0;
  border-radius: 0;
}

/* a water: its name and a small number box at the end, the slider under them (two short lines on a phone) */
.mix-row {
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
}

.mix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mix-head .tile-label {
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: 400;
  white-space: normal;
}

.mix-box {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: var(--space-1);
}

/* the share as a number to type over: no box of its own, only a line under it (accent when it has the keyboard) */
.mix-number {
  inline-size: 4rem;
  min-block-size: 1.75rem;
  padding-block: 0;
  padding-inline: var(--space-1);
  border: 0;
  border-block-end: var(--border-width) solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
}

.mix-number:focus {
  border-color: var(--color-accent);
}

:root:dir(rtl) .mix-number {
  text-align: center;
}

/* the slider: the native control (so keys and screen readers work), with the track drawn under it by a <progress> that shows how
   far the thumb is; the thumb is white with an accent edge */
.mix-track {
  position: relative;
  block-size: 1.75rem;
  margin-block-start: 0;
  direction: ltr;                     /* a slider always runs from low to high, left to right */
}

.mix-fill {
  position: absolute;
  inset-block-start: 0.71875rem;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 0.3125rem;
  border: 0;
  border-radius: 0.1875rem;
  appearance: none;
  background: var(--color-surface);
  color: var(--color-accent);
}

.mix-fill::-webkit-progress-bar {
  border-radius: 0.1875rem;
  background: var(--color-surface);
}

.mix-fill::-webkit-progress-value {
  border-radius: 0.1875rem;
  background: var(--color-accent);
}

.mix-fill::-moz-progress-bar {
  border-radius: 0.1875rem;
  background: var(--color-accent);
}

.mix-range {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  direction: ltr;
  cursor: pointer;
}

.mix-range::-webkit-slider-runnable-track {
  block-size: 1.75rem;
  background: transparent;
}

.mix-range::-webkit-slider-thumb {
  inline-size: 1.3125rem;
  block-size: 1.3125rem;
  margin-block-start: 0.21875rem;
  border: var(--rule-width) solid var(--color-accent);
  border-radius: 50%;
  appearance: none;
  background: var(--color-white);
  box-shadow: var(--shadow-tile);
}

.mix-range::-moz-range-track {
  background: transparent;
}

.mix-range::-moz-range-thumb {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  border: var(--rule-width) solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-tile);
}

/* a wide panel: a water is one line, its name, the slider in the middle and the number box at the end (after the rules above,
   which it overrides) */
@container (min-inline-size: 34rem) {
  .mix-row {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
  }

  .mix-head {
    display: contents;
  }

  .mix-head .tile-label {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mix-row .mix-track {
    grid-column: 2;
    grid-row: 1;
  }

  .mix-box {
    grid-column: 3;
    grid-row: 1;
  }
}

/* the water that fills the rest: the panel's last row, tinted, a small label over the select and its share at the end */
.balance-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
}

.mix-rows > .balance-tile {
  background: var(--color-accent-soft);
}

.balance-pick {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.select-plain {
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 400;
}

.balance-share {
  flex: none;
  font-weight: 600;
}

/* what the mix makes: a dark sheet pinned to the bottom of a phone screen, its top corners rounded, edge to edge; beside the
   inputs on a wide screen it is the first thing in the aside, with all four corners rounded */
.mix-sheet {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  order: 1;                           /* after the controls */
  margin-inline: calc(-1 * var(--page-gutter));
  padding-block: var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
  padding-inline: var(--page-gutter);
  border: var(--border-width) solid var(--color-tile-border);
  border-start-start-radius: 1.25rem;
  border-start-end-radius: 1.25rem;
  background: var(--color-sheet);
  color: var(--color-on-sheet);
  font-variant-numeric: tabular-nums;
}

/* on a phone the sheet waits until step 2 (the sliders) is in view, then fades in */
@media (max-width: 63.99rem) {
  .mix-sheet {
    transition: opacity var(--duration-fade) ease-out, visibility var(--duration-fade);
  }

  .mix-sheet.is-waiting {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
  color: var(--color-on-sheet-muted);
  font-size: var(--text-xs);
}

.sheet-bar {
  margin-block-end: var(--space-2);
}

/* a line per water, in the bar's order: its colour, its name, the amount to pour and its share */
.sheet-pours {
  display: grid;
  gap: 0.125rem;
  margin-block-end: var(--space-3);
}

.sheet-pour {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 3rem;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.sheet-pour-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-pour-amount b {
  font-weight: 600;
}

.sheet-pour-amount small,
.sheet-pour-pct {
  color: var(--color-on-sheet-muted);
  font-size: var(--text-xs);
}

.sheet-pour-pct {
  text-align: end;
}

/* four waters or more: two columns, without the share (the sliders say it) */
.sheet-pours.is-many {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}

.sheet-pours.is-many .sheet-pour {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.sheet-pours.is-many .sheet-pour-pct {
  display: none;
}

/* the eight minerals as one panel, two rows of four: hairlines between the tiles */
.sheet-minerals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));             /* Ca, Mg, HCO3, SO4 / Cl, GH, KH, TDS */
  gap: var(--border-width);
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--color-sheet);
  text-align: center;
}

.sheet-mineral {
  padding-block: 0.375rem;
  padding-inline: 0.125rem;
  background: var(--color-sheet-tile);
}

/* chloride above the advisory level: the Cl tile has a warning edge (the note itself is under the sliders) */
.sheet-mineral.is-warn {
  box-shadow: inset 0 0 0 2px var(--color-on-sheet-warn);
}

.sheet-note {
  margin-block-start: var(--space-2);
  color: var(--color-on-sheet-muted);
  font-size: var(--text-xs);
}

.sheet-mineral small {
  display: block;
  color: var(--color-on-sheet-muted);
  font-size: var(--text-xs);
}

.sheet-mineral b {
  font-size: var(--text-base);
  font-weight: 600;
}

@media (min-width: 64rem) {
  .mix-sheet {
    position: static;
    margin-inline: 0;
    padding: var(--space-4);
    border-radius: 1.25rem;
  }
}

/* ---------- forms ---------- */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap-min);
  cursor: pointer;
}

/* a switch: a pill with a round thumb that moves to the end of the pill when it is on (so it mirrors itself in Arabic) */
.toggle input {
  position: relative;
  flex: none;
  inline-size: 2.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  appearance: none;
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--duration);
}

.toggle input::before {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: inset-inline-start var(--duration);
}

.toggle input:checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.toggle input:checked::before {
  inset-inline-start: calc(100% - 1.0625rem - 0.1875rem);
  background: var(--color-white);
}

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  list-style: disc;
}

/* the end of the page: "Saved data", one quiet panel with a row for each thing the visitor can do (two columns on a wide screen) */
.page-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.foot-title {
  color: var(--color-text);
  font-size: var(--text-md);
}

.data-list {
  display: grid;
  gap: var(--border-width);
  overflow: hidden;
  border: var(--border-width) solid var(--color-tile-border);
  border-radius: var(--radius-tile);
  background: var(--color-line);
}

.data-list > * {
  background: var(--color-card);
}

.data-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
}

.data-text {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.data-text b {
  display: block;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.data-text small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.data-row-danger .data-text b {
  color: var(--color-error-text);
}

.data-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.data-row > .alert,
.data-row > .report {
  flex-basis: 100%;
}

/* the privacy row opens in place: its summary is the row */
.data-row-open {
  border-block-start: 0;
}

.data-row-open > summary {
  padding: var(--space-3);
}

.data-row-open > .expander-body {
  padding-inline: var(--space-3);
}

.btn-small {
  min-block-size: 2.25rem;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

@media (min-width: 64rem) {
  .data-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.btn-danger {
  border-color: var(--color-error-text);
  color: var(--color-error-text);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
}

/* ---------- results ---------- */

.results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.results-live {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* a row of readings ("GH 59.9 · KH 25.0 · TDS 116 ppm"): numbers line up, and it wraps between the items (each is a .nowrap span) */
.readings {
  font-variant-numeric: tabular-nums;
}

/* the line under the target tiles: GH, KH and TDS worked out from what is typed */
.calculated-line {
  margin-block-start: var(--space-1);
}

.calculated-label {
  display: block;
}


/* "from the recipe, low priority": one line under the SO4, Cl and TDS tiles naming the ones a recipe filled in */
.from-recipe {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* the one-line explanation under a direction's heading */
.card-hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* the two-option switch above the result card: the mode switch's look, a title and a count in each part */
.option-switch {
  margin-block: var(--space-1) var(--space-2);
}

.option-tab {
  flex-direction: column;
  gap: 0.125rem;
}

.option-title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.option-count {
  font-size: var(--text-xs);
  font-weight: 400;
}

/* the card's one mix button is as wide as the card */
.card-result > .btn-wide {
  inline-size: 100%;
}

.pour-list {
  display: flex;
  flex-direction: column;
}

/* the pour bar: a segment for each water, as wide as its share (the widths are table cells' width attributes, in per cent) */
.pour-bar {
  inline-size: calc(100% + 0.25rem);
  block-size: 2.25rem;
  margin-inline: -0.125rem;
  border-collapse: separate;
  border-spacing: 0.125rem 0;
  table-layout: fixed;
}

.pour-seg {
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

.pour-seg:first-child {
  border-start-start-radius: var(--radius-control);
  border-end-start-radius: var(--radius-control);
}

.pour-seg:last-child {
  border-start-end-radius: var(--radius-control);
  border-end-end-radius: var(--radius-control);
}

.pour-bar-thin {
  block-size: 0.625rem;
}

.pour-bar-thin .pour-seg:first-child {
  border-start-start-radius: 0.3125rem;
  border-end-start-radius: 0.3125rem;
}

.pour-bar-thin .pour-seg:last-child {
  border-start-end-radius: 0.3125rem;
  border-end-end-radius: 0.3125rem;
}

.pour-1 {
  background: var(--color-pour-1);
  color: var(--color-on-pour-1);
}

.pour-2 {
  background: var(--color-pour-2);
  color: var(--color-on-pour-2);
}

.pour-3 {
  background: var(--color-pour-3);
  color: var(--color-on-pour-3);
}

/* a water's row: a swatch in its colour, its name with its share under it, and the amount to pour at the end */
.pour-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem;
  border-block-end: var(--border-width) solid var(--color-line);
}

.pour-swatch {
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 0.1875rem;
}

.pour-who {
  min-inline-size: 0;
}

.pour-name {
  font-weight: 400;
}

.pour-pct {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.pour-amount {
  flex: none;
  margin-inline-start: auto;
}

.pour-number {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.pour-unit {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-1);
}

.total-line .total {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.nowrap {
  white-space: nowrap;                /* a number with its sign or its unit, kept in one piece by rich() */
}

/* the comparison table: its own width decides where the mineral's word goes (a container query below) */
.compare {
  margin-block-start: var(--space-2);
}

.table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  container-type: inline-size;
}

.result-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
}

.result-table th,
.result-table td {
  padding-block: var(--space-2);
  padding-inline: 0.625rem;
  border-block-start: var(--border-width) solid var(--color-line);
  text-align: end;                    /* numbers line up at the end of their column */
  vertical-align: baseline;
}

.result-table th:first-child,
.result-table td:first-child {
  text-align: start;                  /* the mineral */
}

.result-table thead th {
  border-block-start: 0;
  border-block-end: var(--border-width) solid var(--color-text);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.result-table tbody th {
  font-weight: 400;
}

.mineral-symbol {
  font-weight: 600;
}

.mineral-word {
  margin-inline-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

@container (max-inline-size: 24rem) {
  .mineral-word {
    display: block;
    margin-inline-start: 0;
  }
}

/* what the blend was matched to: the result in bold, the difference muted, the biggest miss in the warm colour */
.result-table .result-cell {
  font-weight: 600;
}

.result-table .diff-cell {
  color: var(--color-text-muted);
}

.result-table .diff-cell.is-miss {
  color: var(--color-warn-text);
  font-weight: 600;
}

/* everything else, after a 2 px rule: all muted and light */
.result-table .is-first-other > * {
  border-block-start: var(--rule-width) solid var(--color-text);
}

.result-table .is-other > * {
  color: var(--color-text-muted);
  font-weight: 400;
}

.result-table .is-other .mineral-symbol {
  font-weight: 400;
}

.goal-tag {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.table-note {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 30rem) {
  .result-table th,
  .result-table td {
    padding-inline: var(--space-1);
  }
}