/* =============================================================================
   Refill Impact Calculator — official brand palette
   PRIMARY    Dark Charcoal  #333333  anchor, dominant
              Pale Sand      #DFCDBE  warmth (tints 80/60/40/20)
              Off-White      #FAFAFA  resting ground
   SECONDARY  Dark Olive     #2C321D  environmental data
              Dark Chocolate #32251D  material and money
              Deep Maroon    #3C0D1A  claims to avoid, warnings
   ========================================================================== */

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --content-wide: 1180px;
}

:root,
[data-theme='light'] {
  /* brand primaries */
  --charcoal: #333333;
  --sand: #dfcdbe;
  --sand-80: #e2d2c4;
  --sand-60: #e9ddd2;
  --sand-40: #f0e8e1;
  --sand-20: #f7f3ef;
  --offwhite: #fafafa;
  /* brand secondaries */
  --olive: #2c321d;
  --chocolate: #32251d;
  --maroon: #3c0d1a;

  --color-bg: var(--sand-20);
  --color-surface: #ffffff;
  --color-surface-2: var(--offwhite);
  --color-surface-offset: var(--sand-40);
  --color-divider: var(--sand-60);
  --color-border: var(--sand-80);

  --color-text: var(--charcoal);
  --color-text-muted: #6b6560;
  --color-text-faint: #9d938a;
  --color-text-inverse: var(--offwhite);

  --color-ink: var(--charcoal);
  --color-ink-hover: #4d4d4d;
  --color-greige: var(--sand);

  --color-primary: var(--olive);
  --color-primary-soft: #e7ead9;
  --color-primary-text: var(--olive);

  --color-accent: var(--chocolate);
  --color-accent-soft: var(--sand-40);
  --color-warn: var(--maroon);
  --color-warn-soft: #f4e6e8;
  --color-olive-soft: #eceee2;
  --color-olive-line: #b9bfa4;

  /* metric tile colours */
  --tile-plastic-bg: var(--chocolate);
  --tile-plastic-fg: var(--sand);
  --tile-carbon-bg: var(--olive);
  --tile-carbon-fg: var(--offwhite);
  --tile-water-bg: var(--sand);
  --tile-water-fg: var(--charcoal);
  --tile-money-bg: var(--charcoal);
  --tile-money-fg: var(--sand);

  --shadow-sm: 0 1px 2px rgb(42 42 42 / 0.06);
  --shadow-md: 0 6px 20px rgb(42 42 42 / 0.07);
  --shadow-lg: 0 18px 48px rgb(42 42 42 / 0.13);
}

[data-theme='dark'] {
  --charcoal: #333333;
  --sand: #dfcdbe;
  --offwhite: #fafafa;
  --olive: #2c321d;
  --chocolate: #32251d;
  --maroon: #3c0d1a;

  --color-bg: #232323;
  --color-surface: var(--charcoal);
  --color-surface-2: #3d3d3d;
  --color-surface-offset: #464038;
  --color-divider: #454545;
  --color-border: #565150;

  --color-text: var(--offwhite);
  --color-text-muted: #a8a29c;
  --color-text-faint: #837d77;
  --color-text-inverse: var(--charcoal);

  --color-ink: var(--offwhite);
  --color-ink-hover: #ffffff;
  --color-greige: #4f463e;

  --color-primary: #a9bd7e;
  --color-primary-soft: #2f3524;
  --color-primary-text: #b9cc8e;

  --color-accent: var(--sand);
  --color-accent-soft: #40342b;
  --color-warn: #d9909c;
  --color-warn-soft: #3a2126;
  --color-olive-soft: #232719;
  --color-olive-line: #4a5238;

  --tile-plastic-bg: #241a13;
  --tile-plastic-fg: var(--sand);
  --tile-carbon-bg: #212617;
  --tile-carbon-fg: #cfdcb2;
  --tile-water-bg: #4f463e;
  --tile-water-fg: var(--sand);
  --tile-money-bg: #2b2b2b;
  --tile-money-fg: var(--sand);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
}
h1,
h2,
h3 {
  line-height: 1.14;
  text-wrap: balance;
  letter-spacing: -0.02em;
}
p,
li {
  text-wrap: pretty;
}
svg {
  display: block;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}
input,
select {
  font: inherit;
  color: inherit;
}
table {
  border-collapse: collapse;
  width: 100%;
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a,
button,
input {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- header ---------- */
.site-header {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.mark-disc {
  fill: var(--color-greige);
}
.mark-glyph {
  fill: var(--color-ink);
}
.brand-wordmark {
  height: 22px;
  width: auto;
  display: block;
  color: var(--color-ink);
}
.brand-sub {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .brand-wordmark {
    height: 18px;
  }
  .brand-sub {
    display: none;
  }
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.icon-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
}

/* ---------- layout shell ---------- */
main {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-16);
}
.hero {
  padding: var(--space-8) 0 var(--space-10);
  max-width: none;
}
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-greige);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.hero-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: none;
}

/* ---------- tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
/* One row wherever the eight labels genuinely fit; wrap rather than clip below that */
@media (min-width: 721px) {
  .tabs { overflow-x: visible; flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 1140px) {
  .tabs { flex-wrap: nowrap; justify-content: space-between; }
}
@media (min-width: 721px) and (max-width: 1240px) {
  .tab { padding: var(--space-2) 9px; font-size: 11.5px; letter-spacing: 0.03em; }
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex: 0 1 auto;
  padding: var(--space-2) 12px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tab:hover {
  color: var(--color-text);
}
.tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.view {
  display: none;
}
.view.is-active {
  display: block;
  animation: fade 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.panel-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.section-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-3);
}
.section-lede {
  color: var(--color-text-muted);
  max-width: none;
  margin-bottom: var(--space-8);
}

/* ---------- calculator layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

/* calculator: full-width control bar over full-width results */
.calc-stack {
  display: grid;
  gap: var(--space-6);
}
.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.control-grid .field-basket {
  grid-column: span 2;
}
.control-grid .field-wide {
  grid-column: span 2;
}
@media (max-width: 720px) {
  .control-grid {
    grid-template-columns: 1fr;
  }
  .control-grid .field-basket,
  .control-grid .field-wide {
    grid-column: span 1;
  }
}
.result-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .result-pair {
    grid-template-columns: 1fr;
  }
}
.controls .field {
  border: none;
  margin-bottom: 0;
}
.field legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.field legend output {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-text-faint);
}

/* basket cards */
.basket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}
.basket-card {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.basket-card:hover {
  border-color: var(--color-text-faint);
}
.basket-card.is-active {
  border-color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.basket-radio {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  display: grid;
  place-items: center;
}
.basket-card.is-active .basket-radio {
  border-color: var(--color-ink);
}
.basket-card.is-active .basket-radio::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
}
.basket-card b {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
}
.basket-card span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.basket-card em {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary-text);
}

/* segmented + chips */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 3px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-sm);
}
.segmented button {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-sm) - 3px);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.segmented button.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chip-row button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.chip-row button:hover {
  border-color: var(--color-text-faint);
  color: var(--color-text);
}
.chip-row button.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-text-inverse);
}

/* range */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  /* a mid tone, so the track stays visible on white surfaces and on the
     sand-tinted prototype-controls panel alike - surface-offset was invisible
     against the panel it sat inside */
  background: var(--color-text-faint);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);
  outline-offset: 6px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  cursor: grab;
}
.range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.basket-detail ul {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2) var(--space-8);
}
.basket-detail .detail-foot {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2) var(--space-8);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
.basket-detail .detail-foot li {
  color: var(--color-text);
  font-weight: 600;
}
/* the equivalence list sits in a narrow column, so stack it */
.result-pair .equiv-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
/* keep the occupant buttons on one row */
#householdSeg button,
#fitHomeSeg button {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.basket-detail h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.basket-detail ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.basket-detail li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.basket-detail li b {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- results ---------- */
.results {
  display: grid;
  gap: var(--space-6);
}
.headline {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-text-inverse);
  overflow: hidden;
}
[data-theme='dark'] .headline {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}
.headline-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
.headline-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-1);
}
.headline-value strong {
  font-size: clamp(3rem, 1.5rem + 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.headline-value span {
  font-size: var(--text-lg);
  font-weight: 600;
  opacity: 0.7;
}
.headline-note {
  font-size: var(--text-sm);
  opacity: 0.7;
  max-width: 34rem;
}
.bottle-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  align-items: flex-end;
}
[data-theme='dark'] .bottle-viz {
  border-top-color: var(--color-divider);
}
.bottle-viz svg {
  width: 13px;
  height: 30px;
  color: currentColor;
  opacity: 0.55;
  animation: pop 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.bottle-viz .overflow-count {
  font-size: var(--text-xs);
  font-weight: 700;
  opacity: 0.65;
  align-self: center;
  padding-left: var(--space-2);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.85);
  }
  to {
    opacity: 0.55;
    transform: none;
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.metric {
  padding: var(--space-5);
}
.metric-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.metric-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-primary-text);
}
.metric.money .metric-value {
  color: var(--color-accent);
  font-size: var(--text-lg);
  white-space: nowrap;
}
.metric-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.45;
}

.equiv-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
.equiv-list li {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.equiv-list svg {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--color-primary);
}
.equiv-list strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.equiv-list span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.equiv-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.context p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.context strong {
  color: var(--color-text);
}
.context-cite {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.context-cite a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.context-cite a:hover {
  color: var(--color-primary-text);
}

/* ---------- checkout view ---------- */
.checkout-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 900px) {
  .checkout-wrap {
    grid-template-columns: 1fr;
  }
}
.variants {
  margin-bottom: var(--space-8);
}
.copy-block {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.copy-block h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.copy-block ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.copy-block li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.copy-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-primary);
}

.phone-frame {
  position: sticky;
  top: var(--space-5);
  background: var(--color-ink);
  border-radius: 2.25rem;
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
}
[data-theme='dark'] .phone-frame {
  background: #0c0b09;
  border: 1px solid var(--color-border);
}
.phone-notch {
  width: 74px;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.25);
  margin: var(--space-1) auto var(--space-3);
}
.phone-screen {
  background: #FAFAFA;
  border-radius: 1.5rem;
  padding: var(--space-4);
  min-height: 440px;
  color: #333333;
}

/* Mobile impact screen. A standing account view rather than a checkout module,
   so it is laid out as a full phone screen: one headline number, progress
   toward the next milestone, then supporting detail in descending weight.
   Self-contained like the other variants so it can be lifted out whole. */
.rf-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rf-m-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.rf-m-eyebrow {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #333333;
}
.rf-m-since {
  font-size: 0.75rem;
  color: #6B6560;
  margin-top: 0.1rem;
}
.rf-m-plan {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #ECE5DC;
  color: #4A4038;
  white-space: nowrap;
}
.rf-m-hero {
  background: #2C321D;
  color: #F5F1EA;
  border-radius: 1rem;
  padding: 1rem 0.9rem 0.9rem;
  text-align: center;
}
.rf-m-hero-num {
  font-family: var(--font-display, inherit);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.rf-m-hero-unit {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 0.25rem;
  opacity: 0.92;
}
.rf-m-hero-sub {
  font-size: 0.6875rem;
  line-height: 1.45;
  margin: 0.5rem 0 0;
  opacity: 0.75;
}
.rf-m-progress {
  background: #FFFFFF;
  border: 1px solid #E9E2D8;
  border-radius: 0.75rem;
  padding: 0.65rem 0.7rem;
}
.rf-m-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  color: #6B6560;
}
.rf-m-progress-top b {
  color: #333333;
  font-size: 0.8125rem;
}
.rf-m-track {
  height: 6px;
  border-radius: 999px;
  background: #ECE5DC;
  margin: 0.45rem 0 0.35rem;
  overflow: hidden;
}
.rf-m-fill {
  height: 100%;
  border-radius: 999px;
  background: #7A8450;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rf-m-progress-foot {
  font-size: 0.6875rem;
  color: #6B6560;
  line-height: 1.4;
}
.rf-m-stats {
  display: grid;
  gap: 0.4rem;
}
.rf-m-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  background: #FFFFFF;
  border: 1px solid #E9E2D8;
  border-radius: 0.75rem;
  padding: 0.55rem 0.7rem;
}
.rf-m-stat b {
  font-size: 1rem;
  font-weight: 800;
  color: #333333;
  white-space: nowrap;
}
.rf-m-stat span {
  font-size: 0.75rem;
  color: #6B6560;
  text-align: right;
}
.rf-m-equiv {
  background: #F3EEE6;
  border-radius: 0.75rem;
  padding: 0.7rem;
}
.rf-m-equiv-head {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B6560;
  margin-bottom: 0.45rem;
}
.rf-m-equiv ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.rf-m-equiv li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: #6B6560;
}
.rf-m-equiv li b {
  font-size: 0.8125rem;
  color: #333333;
  white-space: nowrap;
}
.rf-m-equiv-note {
  font-size: 0.625rem;
  color: #8A837C;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}
.rf-m-caption {
  margin: 0;
}
.rf-m-btn {
  width: 100%;
}
.rf-m-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  border-top: 1px solid #E9E2D8;
  margin-top: 0.15rem;
  padding-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #A8A199;
}
.rf-m-nav .is-on {
  color: #2C321D;
}

.dash-mobile {
  display: grid;
  grid-template-columns: minmax(0, 58ch) auto;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: start;
}
.dash-mobile-phone {
  display: flex;
  justify-content: center;
}
/* The checkout tab constrains the frame through its grid column; here the
   column is wider than a phone, so the phone has to constrain itself. */
.dash-mobile-phone .phone-frame {
  width: 372px;
  max-width: 100%;
}
@media (max-width: 900px) {
  .dash-mobile {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The window this screen is showing, stated under the headline so a monthly
   figure can never be read as a lifetime one. */
.rf-mi-window {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
  opacity: 0.62;
}
.rf-mi-window:empty {
  display: none;
}

/* Icon-led alternative. Same data, same caveats — the difference is that
   quantity is carried by shape and colour rather than by type size. */
.rf-mi-hero {
  background: #2C321D;
  color: #F5F1EA;
  border-radius: 1rem;
  padding: 0.9rem 0.85rem;
  text-align: center;
}
.rf-mi-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Row gap carries the separation; column gap stays tight so a row reads as
     one cluster of bottles rather than eight isolated icons. */
  gap: 0.3rem 0.15rem;
  max-width: 262px;
  margin: 0 auto 0.7rem;
}
.rf-mi-grid .rf-i-bot {
  width: 18px;
}
.rf-i-bot {
  display: block;
  color: rgba(245, 241, 234, 0.16);
}
.rf-i-bot.is-on {
  color: #C8D48A;
}
.rf-i-bot svg {
  display: block;
  width: 100%;
  height: auto;
}
.rf-mi-hero-num {
  font-family: var(--font-display, inherit);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.rf-mi-hero-unit {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 0.2rem;
  opacity: 0.92;
}
.rf-mi-scale {
  font-size: 0.625rem;
  margin-top: 0.4rem;
  opacity: 0.6;
}
.rf-mi-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.rf-mi-tile {
  background: #FFFFFF;
  border: 1px solid #E9E2D8;
  border-radius: 0.75rem;
  padding: 0.6rem 0.4rem 0.55rem;
  text-align: center;
}
.rf-mi-tile i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 0.35rem;
  border-radius: 50%;
}
.rf-mi-tile i svg {
  width: 17px;
  height: 17px;
}
.rf-mi-tile.t-plastic i {
  background: #E6EBD2;
  color: #59632F;
}
.rf-mi-tile.t-carbon i {
  background: #E4E7EC;
  color: #4A5566;
}
.rf-mi-tile.t-water i {
  background: #DDE9EC;
  color: #3D6570;
}
.rf-mi-tile b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #333333;
  line-height: 1.1;
  white-space: nowrap;
}
.rf-mi-tile b em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: 0.1rem;
  color: #6B6560;
}
.rf-mi-tile span {
  display: block;
  font-size: 0.625rem;
  line-height: 1.3;
  color: #6B6560;
  margin-top: 0.2rem;
}
.rf-mi-milestone {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: #FFFFFF;
  border: 1px solid #E9E2D8;
  border-radius: 0.75rem;
  padding: 0.65rem 0.7rem;
}
.rf-mi-flag {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ECE5DC;
  color: #59632F;
  margin-top: 0.1rem;
}
.rf-mi-flag svg {
  width: 16px;
  height: 16px;
}
.rf-mi-ms-body {
  flex: 1;
  min-width: 0;
}
.rf-mi-equiv li {
  align-items: center;
}
.rf-mi-equiv li i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E4E0D6;
  color: #59632F;
}
.rf-mi-equiv li i svg {
  width: 14px;
  height: 14px;
}
.rf-mi-equiv ul {
  gap: 0.4rem;
}

/* widget internals — deliberately self-contained so they can be lifted out */
.rf-widget {
  font-family: var(--font-body);
  animation: fade 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rf-card {
  border: 1px solid #ECE4DC;
  border-radius: 0.875rem;
  padding: 1rem;
  background: #fff;
}
.rf-card + .rf-card {
  margin-top: 0.75rem;
}
.rf-sum-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #333333;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.rf-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #5A544E;
  padding: 0.3rem 0;
}
.rf-row b {
  color: #333333;
  font-weight: 700;
}
.rf-row.total {
  border-top: 1px solid #ECE4DC;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  font-size: 0.9375rem;
}
.rf-row .free {
  color: #2C321D;
  font-weight: 700;
}

.rf-impact {
  border: 1px solid #E2D2C4;
  background: #F7F3EF;
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  margin-top: 0.75rem;
}
.rf-impact-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #2C321D;
  margin-bottom: 0.5rem;
}
.rf-impact-head svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.rf-impact-big {
  font-size: 1.375rem;
  font-weight: 800;
  color: #333333;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rf-impact-big em {
  font-style: normal;
  color: #2C321D;
}
.rf-impact-sub {
  font-size: 0.75rem;
  color: #5A544E;
  margin-top: 0.25rem;
  line-height: 1.45;
}
.rf-stats {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.rf-stat {
  flex: 1;
  background: #fff;
  border: 1px solid #E9DDD2;
  border-radius: 0.625rem;
  padding: 0.5rem 0.5rem 0.55rem;
  text-align: center;
}
.rf-stat b {
  display: block;
  font-size: 0.875rem;
  font-weight: 800;
  color: #333333;
}
.rf-stat span {
  display: block;
  font-size: 0.625rem;
  color: #6B6560;
  line-height: 1.3;
  margin-top: 2px;
}
.rf-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #2C321D;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-inline {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  border: 1px dashed #E2D2C4;
  background: #F7F3EF;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: #333333;
  line-height: 1.5;
}
.rf-inline svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #2C321D;
  margin-top: 2px;
}
.rf-inline b {
  color: #333333;
}
.rf-confirm {
  text-align: center;
  padding: 1.25rem 0.5rem 0.5rem;
}
.rf-tick {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.875rem;
  border-radius: 999px;
  background: #E9DDD2;
  color: #2C321D;
  display: grid;
  place-items: center;
}
.rf-tick svg {
  width: 24px;
  height: 24px;
}
.rf-confirm h4 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #333333;
  letter-spacing: -0.02em;
}
.rf-confirm > p {
  font-size: 0.8125rem;
  color: #5A544E;
  margin: 0.35rem 0 1rem;
}
.rf-ring {
  display: block;
  margin: 0 auto 0.75rem;
}
.rf-caption {
  font-size: 0.6875rem;
  color: #6B6560;
  margin-top: 0.75rem;
  line-height: 1.45;
}
.rf-btn {
  display: block;
  width: 100%;
  margin-top: 0.875rem;
  background: #333333;
  color: #faf8f5;
  border-radius: 0.75rem;
  padding: 0.7rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ---------- tables ---------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
table {
  min-width: 700px;
}
th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  /* Headings wrap, figures do not. These tables carry seven or eight columns of
     short numbers under long headings; when the headings refuse to wrap they,
     not the data, set every column width and push the right-hand columns out of
     view. See qc/05-layout-clipping.mjs. */
  white-space: normal;
  line-height: 1.25;
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr.total-row {
  background: var(--color-surface-2);
  font-weight: 700;
}
td.num,
th.num {
  text-align: right;
}
td.num {
  white-space: nowrap;
}
/* Numeric headings wrap like every other heading. Without this, th.num outranks
   the thead rule above on specificity and silently reinstates nowrap. */
thead th.num {
  white-space: normal;
}
td.name {
  font-weight: 600;
}
td small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
table a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/* ---------- method ---------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.method-card h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.method-card ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.method-card li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.method-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.method-card.good h3 {
  color: var(--color-primary-text);
}
.method-card.good li::before {
  background: var(--color-primary);
}
.method-card.muted h3 {
  color: var(--color-text-muted);
}
.method-card.muted li::before {
  background: var(--color-text-faint);
}
.method-card.warn {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  margin-bottom: var(--space-10);
}
.method-card.warn h3 {
  color: var(--color-accent);
}
.method-card.warn li::before {
  background: var(--color-accent);
}
[data-theme='dark'] .method-card.warn li {
  color: var(--color-text);
}
.sources-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.flag {
  margin-top: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.flag strong {
  color: var(--color-text);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-surface-offset);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- footer ---------- */
.site-footer {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
  }
  .tab {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-2);
    text-align: center;
  }
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  .equiv-list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .method-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- phone app bar ---------- */
.phone-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.phone-mark {
  flex: none;
}
.phone-mark .mark-disc {
  fill: var(--color-greige);
}
.phone-mark .mark-glyph {
  fill: var(--color-ink);
}
.phone-wordmark {
  height: 13px;
  width: auto;
  color: var(--color-ink);
}
.phone-step {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* =============================================================================
   Brand colour blocking — each metric gets a brand colour with a fixed meaning
   ========================================================================== */
.metric {
  border: none;
  position: relative;
  overflow: hidden;
}
.metric .metric-label,
.metric .metric-value,
.metric .metric-sub {
  position: relative;
  z-index: 1;
}
.tile-plastic {
  background: var(--tile-plastic-bg);
  color: var(--tile-plastic-fg);
}
.tile-carbon {
  background: var(--tile-carbon-bg);
  color: var(--tile-carbon-fg);
}
.tile-water {
  background: var(--tile-water-bg);
  color: var(--tile-water-fg);
}
.tile-money {
  background: var(--tile-money-bg);
  color: var(--tile-money-fg);
}
.metric .metric-label {
  color: inherit;
  opacity: 0.72;
}
.metric .metric-value,
.metric.money .metric-value {
  color: inherit;
}
.metric .metric-sub {
  color: inherit;
  opacity: 0.66;
}
/* a soft brand-sand wash behind each tile's number for depth */
.metric::after {
  content: '';
  position: absolute;
  right: -18%;
  top: -32%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.07;
}

/* the headline panel keeps charcoal, bottles render in Pale Sand */
.bottle-viz svg {
  color: var(--sand);
  opacity: 0.85;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.85);
  }
  to {
    opacity: 0.85;
    transform: none;
  }
}
.headline-label {
  color: var(--sand);
  opacity: 1;
}

/* equivalence icons in Dark Olive, on a sand-tinted panel */
.equiv {
  background: var(--color-surface-offset);
}
.equiv-list svg {
  color: var(--color-primary);
}

/* context panel gets a sand fill and a charcoal rule */
.context {
  background: var(--sand-40);
  border-color: var(--color-border);
}
[data-theme='dark'] .context {
  background: var(--color-surface-2);
}

/* controls: active states in charcoal, selected basket gets a sand fill */
.basket-card.is-active {
  background: var(--sand-40);
}
[data-theme='dark'] .basket-card.is-active {
  background: var(--color-surface-2);
}
.tabs {
  background: var(--sand-60);
}
[data-theme='dark'] .tabs {
  background: var(--color-surface-2);
}
.eyebrow {
  background: var(--sand);
  color: var(--charcoal);
}
[data-theme='dark'] .eyebrow {
  background: var(--color-greige);
  color: var(--sand);
}

/* method cards: olive for what we count, maroon for what to avoid */
.method-card.good {
  background: var(--color-primary-soft);
  border-color: transparent;
}
[data-theme='dark'] .method-card.good {
  background: var(--color-primary-soft);
}
.method-card.warn {
  background: var(--color-warn-soft);
  border-color: transparent;
}
.method-card.warn h3,
.method-card.warn li::before {
  color: var(--color-warn);
}
[data-theme='dark'] .method-card.warn {
  background: var(--color-warn-soft);
}
[data-theme='dark'] .method-card.warn li {
  color: #eccdd2;
}
.flag {
  border-left-color: var(--chocolate);
  background: var(--sand-40);
}
[data-theme='dark'] .flag {
  border-left-color: var(--sand);
  background: var(--color-surface-2);
}

/* phone app bar now lives inside the white screen */
.phone-bar {
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid #ece4dc;
}
.phone-mark .mark-disc {
  fill: var(--sand);
}
.phone-mark .mark-glyph,
.phone-wordmark {
  fill: var(--charcoal);
  color: var(--charcoal);
}
.phone-step {
  color: #9d938a;
}

/* contrast refinements */
.tile-water .metric-label,
.tile-water .metric-sub {
  opacity: 0.85;
}
.tile-water .metric-sub {
  opacity: 0.75;
}
.controls {
  background: linear-gradient(var(--sand-20), var(--color-surface) 220px);
  border-color: var(--color-border);
}
[data-theme='dark'] .controls {
  background: var(--color-surface);
}
.panel-title,
.metric-label,
.field legend {
  color: var(--color-text-muted);
}
.controls .panel-title {
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sand);
}
[data-theme='dark'] .controls .panel-title {
  border-bottom-color: var(--color-greige);
}
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--sand);
}
[data-theme='dark'] .section-title::after {
  background: var(--color-greige);
}

/* =============================================================================
   Checkout impact block — Primary Sand at 80%, so it reads as a warm brand
   panel rather than a dark interruption in a light checkout.
   Hard-coded hex on purpose: this block gets lifted straight into checkout.
   ========================================================================== */
.rf-impact {
  background: rgb(223 205 190 / 0.8);
  border-color: rgb(180 158 139 / 0.45);
  color: #333333;
}
.rf-impact-head {
  color: #2c321d;
}
.rf-impact-big {
  color: #2c321d;
}
.rf-impact-big em {
  color: #32251d;
}
.rf-impact-sub {
  color: rgb(51 51 51 / 0.78);
}
.rf-stat {
  background: rgb(255 255 255 / 0.62);
  border-color: rgb(180 158 139 / 0.4);
}
.rf-stat b {
  color: #2c321d;
}
.rf-stat span {
  color: rgb(51 51 51 / 0.68);
}
.rf-link {
  color: #2c321d;
}
.rf-inline {
  background: #2c321d;
  border: 1px solid #2c321d;
  color: rgb(250 250 250 / 0.85);
}
.rf-inline svg {
  color: #dfcdbe;
}
.rf-inline b {
  color: #dfcdbe;
}
.rf-tick {
  background: #2c321d;
  color: #dfcdbe;
}
.rf-inline-quiet {
  background: #fafafa;
  border: 1px solid #ece4dc;
  color: #5a544e;
}
.rf-inline-quiet svg {
  color: #2c321d;
}
.rf-inline-quiet b {
  color: #333333;
}
.rf-caption .rf-link,
.rf-inline-quiet .rf-link {
  color: #2c321d;
}

/* Size chips — the packaging format drives the plastic weight, so make it legible */
.size-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.size-chip.is-pour {
  background: #32251d;
  color: #dfcdbe;
}
.size-chip.is-trigger {
  background: #2c321d;
  color: #dfcdbe;
}

/* =============================================================================
   Household context — a note on the dead-looking control, and the one figure
   household size actually moves.
   ========================================================================== */
.field-note {
  margin: 0.55rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.field-note strong {
  color: var(--color-text);
  font-weight: 700;
}

.share-bar {
  margin-top: 0.875rem;
}
.share-track {
  height: 10px;
  border-radius: 999px;
  background: var(--sand-60);
  overflow: hidden;
}
.share-track span {
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: 999px;
  background: #2c321d;
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.share-legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.share-legend strong {
  color: var(--color-text);
  font-weight: 800;
}
[data-theme='dark'] .share-track {
  background: rgb(223 205 190 / 0.16);
}
[data-theme='dark'] .share-track span {
  background: #dfcdbe;
}

/* =============================================================================
   IMPACT DASHBOARD — post-purchase account view
   ========================================================================== */
.dash-sim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.875rem 1.125rem;
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: 0.875rem;
  background: var(--color-surface-offset);
}
.dash-sim-label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dash-sim-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  flex: 1;
}
.dash-sim-fields label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
}
.dash-sim-fields input[type='range'] {
  width: 200px;
  min-width: 160px;
}
.dash-sim-fields output {
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.dash-wrap {
  display: block;
}

/* the account screen — full width, reflows into a phone-width column on mobile */
.dash-app {
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface-2);
  padding: 1.125rem;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto min-content 1fr;
  grid-template-areas:
    'bar   bar'
    'hello hello'
    'tiles tiles'
    'chart stone'
    'chart share';
  align-items: start;
}
.dash-appbar { grid-area: bar; }
.dash-hello { grid-area: hello; }
.dash-tiles { grid-area: tiles; }
.dash-chart-panel { grid-area: chart; align-self: stretch; }
.dash-milestone-panel { grid-area: stone; align-self: start; }
.dash-share { grid-area: share; align-self: start; }
/* four tiles across when there is room */
.dash-app > .dash-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dash-appbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.25rem 0.5rem;
}
.dash-appbar strong {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.dash-back {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--color-text-muted);
}
.dash-back svg {
  width: 17px;
  height: 17px;
}
.dash-window-tag {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--charcoal);
  white-space: nowrap;
}

.dash-panel {
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
  background: var(--color-surface);
  padding: 0.9375rem 1rem;
}
.dash-hello h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}
.dash-hello p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.dash-panel-head h4 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.dash-delta,
.dash-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--olive);
  color: var(--sand);
}
.dash-badge {
  background: var(--sand);
  color: var(--charcoal);
}

/* four tiles, colour-blocked to match the calculator */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}
.dash-tile {
  border-radius: 0.875rem;
  padding: 0.8125rem 0.875rem 0.875rem;
  display: grid;
  gap: 0.1rem;
  position: relative;
  overflow: hidden;
}
.dash-tile-icon {
  display: block;
  margin-bottom: 0.35rem;
  opacity: 0.75;
}
.dash-tile-icon svg {
  width: 20px;
  height: 20px;
}
.dash-tile strong {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}
.dash-tile > span:last-child {
  font-size: 0.6875rem;
  line-height: 1.35;
  opacity: 0.78;
}
.dash-tile.t-bottles {
  background: var(--chocolate);
  color: var(--sand);
}
.dash-tile.t-carbon {
  background: var(--olive);
  color: var(--offwhite);
}
.dash-tile.t-water {
  background: var(--sand);
  color: var(--charcoal);
}
.dash-tile.t-orders {
  background: var(--charcoal);
  color: var(--sand);
}
[data-theme='dark'] .dash-tile.t-water {
  background: #4f463e;
  color: var(--sand);
}
[data-theme='dark'] .dash-tile.t-orders {
  background: #2b2b2b;
}

/* chart */
.dash-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.dc-grid {
  stroke: var(--color-divider);
  stroke-width: 1;
}
.dc-ylabel,
.dc-xlabel {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--color-text-faint);
}
.dc-ylabel {
  text-anchor: end;
}
.dc-xlabel {
  text-anchor: middle;
}
.dc-line {
  stroke: var(--olive);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc-stop-a {
  stop-color: var(--sand);
  stop-opacity: 0.95;
}
.dc-stop-b {
  stop-color: var(--sand);
  stop-opacity: 0.1;
}
.dc-dot {
  fill: var(--olive);
}
.dc-dot-halo {
  fill: var(--olive);
  opacity: 0.2;
}
[data-theme='dark'] .dc-line,
[data-theme='dark'] .dc-dot {
  stroke: var(--sand);
  fill: var(--sand);
}
[data-theme='dark'] .dc-line {
  fill: none;
}
[data-theme='dark'] .dc-dot-halo {
  fill: var(--sand);
}
[data-theme='dark'] .dc-stop-a {
  stop-color: var(--sand);
  stop-opacity: 0.3;
}
[data-theme='dark'] .dc-stop-b {
  stop-color: var(--sand);
  stop-opacity: 0.02;
}
.dash-chart-foot {
  margin: 0.6rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}

/* share row */
.dash-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dash-share h4 {
  margin: 0 0 0.2rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-text);
}
.dash-share p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.dash-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.55rem 0.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
}
.dash-share-btn:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.dash-share-btn svg {
  width: 15px;
  height: 15px;
}
[data-theme='dark'] .dash-share-btn {
  background: var(--sand);
  color: var(--charcoal);
}

/* commentary column */
.dash-notes {
  display: grid;
  gap: 1rem;
}
.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.note-list li {
  position: relative;
  padding-left: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.note-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--sand);
}
.note-list strong {
  color: var(--color-text);
  font-weight: 700;
}
.note-list.tight li {
  font-size: 0.75rem;
}
.warn-panel {
  background: var(--color-warn-soft);
  border-color: var(--color-warn);
}
.warn-panel .note-list li::before {
  background: var(--color-warn);
}

@media (max-width: 900px) {
  .dash-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'bar'
      'hello'
      'tiles'
      'chart'
      'stone'
      'share';
    max-width: 520px;
    margin: 0 auto;
  }
  .dash-app > .dash-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .dash-app {
    padding: 0.75rem;
    gap: 0.625rem;
  }
  .dash-tiles {
    gap: 0.5rem;
  }
  .dash-tile {
    padding: 0.6875rem 0.6875rem 0.75rem;
  }
  .dash-tile strong {
    font-size: 1.1875rem;
  }
  .dash-sim-fields {
    flex-direction: column;
    align-items: stretch;
  }
}

/* section head row with the info trigger */
.section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.info-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.info-btn:hover {
  color: var(--color-text);
  border-color: var(--olive);
  background: var(--color-surface-offset);
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgb(51 51 51 / 0.42);
  backdrop-filter: blur(3px);
  animation: modalIn 0.18s ease;
}
.modal-backdrop[hidden] {
  display: none;
}
@keyframes modalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  width: min(620px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.375rem 1.5rem;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}
.modal-head h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.modal-close {
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.modal-close svg {
  width: 15px;
  height: 15px;
}
.modal-close:hover {
  color: var(--color-text);
  border-color: var(--olive);
}

/* full-width warning footer */
.dash-footer {
  margin-top: 1.25rem;
}
.dash-footer-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.dash-footer-list li {
  font-size: 0.75rem;
}
@media (max-width: 820px) {
  .dash-footer-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }
}

/* dashboard polish */
.dash-tile-window {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.6;
  margin-top: 0.2rem;
}
#dashWindow button {
  white-space: nowrap;
}
.dash-sim {
  gap: 0.75rem 1.25rem;
}
.dash-sim-fields label {
  gap: 0.5rem;
}
.dash-sim-fields output {
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--charcoal);
  text-align: center;
}

/* =============================================================================
   HOUSEHOLD FIT
   ========================================================================== */
[data-panel='fit'] {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}
[data-panel='fit'].is-active {
  display: flex;
}
.fit-lede {
  margin: 0.35rem 0 1.1rem;
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.fit-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}
.fit-controls .field {
  border: 0;
  padding: 0;
  margin: 0;
}
.fit-verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fit-stat {
  background: var(--color-surface);
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fit-stat > span {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.fit-stat > strong {
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.fit-stat > em {
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.fit-arith {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  min-width: 172px;
}
.est-flag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  background: var(--color-warn-soft);
  border: 1px solid var(--color-warn);
  color: var(--color-warn);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.verdict {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.verdict-short {
  background: var(--maroon);
  color: var(--offwhite);
}
.verdict-matched {
  background: var(--olive);
  color: var(--offwhite);
}
.verdict-surplus {
  background: var(--sand-60);
  color: var(--chocolate);
}
.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.fit-rec {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}
.fit-rec-sub {
  margin: 0.8rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.fit-rec-sub b,
.fit-rec b {
  color: var(--color-text);
  font-weight: 700;
}
.fit-options {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.fit-options li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem 0.95rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.75rem;
  background: var(--color-surface-2);
}
.fit-options li.is-recommended {
  border-color: var(--olive);
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--olive);
}
.fit-opt-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-text);
}
.fit-options li > b {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary);
  text-align: right;
  white-space: nowrap;
}
.fit-options li > em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.fit-options li > em b {
  color: var(--color-text);
  font-weight: 700;
}
.fit-caveat-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.warn-panel ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.warn-panel ul li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.warn-panel ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-warn);
}
.warn-panel ul li b {
  color: var(--color-text);
  font-weight: 700;
}
.fit-scale-why {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  min-width: 260px;
}
.fit-scale-why b {
  color: var(--color-text);
  font-weight: 700;
  text-transform: none;
}
td.num.is-current {
  background: var(--color-primary-soft);
  font-weight: 800;
  color: var(--color-text);
}
.table-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.table-note b {
  color: var(--color-text);
}
@media (max-width: 900px) {
  .fit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.segmented.small button {
  white-space: nowrap;
}
.fit-table td:first-child,
.fit-table th:first-child {
  min-width: 158px;
}
.fit-table td:first-child b {
  white-space: nowrap;
}
.fit-table th:last-child,
.fit-table td:last-child {
  /* Was 0, which ran the verdict text flush into the table edge and read as
     truncated. The verdict is the column people look at; it gets real space. */
  padding-right: var(--space-4);
}
.fit-table th,
.fit-table td {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
.fit-table th:last-child,
.fit-table td:last-child {
  min-width: 168px;
}
/* Compresses further than the 700px global table floor so the seven columns
   still fit inside a narrow embed rather than needing sideways scrolling. */
.fit-table {
  min-width: 640px;
}
.fit-table .topup-when {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Below the desktop breakpoint the seven columns need to give up padding and a
   little type size to stay on screen. Preferred to sideways scrolling, which
   hides the verdict column - the one thing the table exists to show. */
@media (max-width: 1023px) {
  .fit-table th,
  .fit-table td {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: 0.8125rem;
  }
  .fit-table th:last-child,
  .fit-table td:last-child {
    padding-right: var(--space-3);
    min-width: 132px;
  }
  .fit-table td:first-child,
  .fit-table th:first-child {
    min-width: 124px;
  }
  .fit-table td:first-child b {
    white-space: normal;
  }
}
/* Eight columns: a product name, six home tiers and the driver note. The
   driver note is prose and was holding a 260px column open, pushing the widest
   tiers off the right edge at 1024px. It wraps instead. */
.scale-table th,
.scale-table td {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
#productTable th,
#productTable td,
.stock-table th,
.stock-table td {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}
/* Prose-bearing final columns wrap instead of holding a column open. */
#productTable th:last-child,
#productTable td:last-child,
.stock-table th:last-child,
.stock-table td:last-child,
.stock-table th:first-child,
.stock-table td:first-child {
  white-space: normal;
  max-width: 200px;
}
.scale-table th:last-child,
.scale-table td:last-child {
  white-space: normal;
  min-width: 128px;
  max-width: 210px;
}
/* The global 700px table floor is wider than this table's own content at
   tablet widths, so the floor itself was causing the overflow. */
.scale-table {
  min-width: 620px;
}
@media (max-width: 900px) {
  .scale-table th,
  .scale-table td {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: 0.8125rem;
  }
  .scale-table th:first-child,
  .scale-table td:first-child {
    min-width: 104px;
  }
}


/* ---------------------------------------------------------------------------
   Home-size consumption model: driver chips, home summary line, wrapping segs
   -------------------------------------------------------------------------- */
.segmented.small.wrap {
  flex-wrap: wrap;
}

.driver-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: help;
}
.driver-chip.d-area {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.driver-chip.d-glazing {
  background: var(--color-olive-soft);
  color: var(--color-olive);
  border-color: var(--color-olive-line);
}
.driver-chip.d-bathrooms {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.fit-home-line {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.fit-home-line b {
  color: var(--color-text);
}
.fit-vs-market {
  color: var(--color-primary);
  font-weight: 600;
}

.fit-scale-lede {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.data-table th.num em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--color-text-faint);
}
.data-table th.is-current {
  color: var(--color-primary);
}


/* Label-gap alert: Refill's own directions are incomplete */
.label-alert {
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warn);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.label-alert h4 {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}
.label-alert p,
.label-alert li {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.label-alert ul {
  margin: 0 0 0.55rem;
  padding-left: 1.1rem;
}
.label-alert b {
  color: var(--color-text);
}
.label-alert-ask {
  margin: 0.75rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-divider);
  font-weight: 600;
  color: var(--color-text) !important;
}
.warn-inline {
  color: var(--color-warn);
  font-weight: 600;
}


/* ---- Collapsible accordions (fit tab) ---- */
.acc {
  width: 100%;
  margin: 1.5rem 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.acc + .acc {
  margin-top: 1rem;
}
.acc > summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.18s ease;
}
.acc > summary::-webkit-details-marker {
  display: none;
}
.acc > summary:hover {
  background: rgb(0 0 0 / 0.03);
}
.acc > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.acc-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.acc-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 0.22s ease;
}
.acc[open] > summary .acc-chevron {
  transform: rotate(180deg);
}
.acc[open] > summary {
  border-bottom: 1px solid var(--color-divider);
}
.acc-body {
  padding: 1.15rem 1.3rem 1.35rem;
}
.acc-body > *:first-child {
  margin-top: 0;
}
.acc-body > *:last-child {
  margin-bottom: 0;
}

/* soft brand green */
.acc-green {
  background: var(--color-olive-soft);
  border-color: var(--color-olive-line);
}
.acc-green > summary:hover {
  background: rgb(44 50 29 / 0.06);
}
.acc-green[open] > summary {
  border-bottom-color: var(--color-olive-line);
}

/* caveats */
.acc-warn {
  background: var(--color-warn-soft);
  border-color: var(--color-warn);
}
.acc-warn > summary:hover {
  background: rgb(60 13 26 / 0.05);
}
.acc-warn[open] > summary {
  border-bottom-color: var(--color-warn);
}
.acc-warn .acc-body ul {
  margin: 0;
  padding-left: 1.1rem;
}
.acc-warn .acc-body li {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.acc-warn .acc-body li b {
  color: var(--color-text);
}
.acc-warn .acc-body li:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .acc-hint {
    display: none;
  }
  .acc > summary {
    padding: 0.95rem 1.05rem;
  }
  .acc-body {
    padding: 1rem 1.05rem 1.15rem;
  }
}

/* A help level this home type cannot have. Live-in help needs a maid's room,
   which one-bedroom apartments do not have, so the option is shown as
   unavailable rather than hidden - hiding it makes the control jump. */
.segmented button.is-unavailable {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.segmented button.is-unavailable:hover {
  background: transparent;
  color: inherit;
}
.field-note {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-faint);
  max-width: 42ch;
}


/* ---- Inside one delivery cycle ---------------------------------------- */
/* Refill ships whole baskets on a fixed day; consumption does not line up
   with that. This block reports the mismatch on both sides. */
.cycle-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.cycle-head > div:first-child {
  flex: 1 1 460px;
  min-width: 0;
}
.cycle-head .ctl {
  flex: 0 0 auto;
  margin-top: 0.4rem;
}
.cycle-head .section-lede {
  margin: 0.5rem 0 0;
  max-width: none;
}
.cycle-grid {
  display: grid;
  /* min() so the 320px track can collapse below the viewport width instead of
     forcing the panel content wider than its own box on small screens. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem 2.5rem;
  align-items: start;
}
.cycle-col {
  min-width: 0;
}
.cycle-h {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cycle-h.warn {
  color: var(--color-warn);
}
.cycle-row {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-divider);
}
.cycle-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.cycle-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--text-base);
  color: var(--color-text);
}
.cycle-row-top strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cycle-bar {
  position: relative;
  height: 8px;
  margin: 0.5rem 0 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}
.cycle-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-warn);
}
.cycle-bar-fill.soft {
  background: var(--color-primary);
}
.cycle-row-foot {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.cycle-total {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.cycle-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .cycle-head {
    flex-direction: column;
    /* space-between in column mode was pushing the control to the bottom of a
       stretched box, opening ~350px of dead space under the lede. */
    justify-content: flex-start;
  }
  .cycle-head > div:first-child {
    flex: 0 1 auto;
  }
  .cycle-head .ctl {
    margin-top: 0;
  }
}

/* ---- Top-up stock exposure table -------------------------------------- */
.stock-table th[scope='row'] {
  white-space: nowrap;
}
.stock-table .cell-sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}
.stock-table td.heat {
  position: relative;
  isolation: isolate;
}
.stock-table td.heat[style]::before {
  content: '';
  position: absolute;
  inset: 4px 2px;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  opacity: var(--heat);
}
.stock-table tr.row-quiet th[scope='row'],
.stock-table tr.row-quiet td {
  color: var(--color-text-muted);
}
.stock-table tfoot td,
.stock-table tfoot th {
  border-top: 2px solid var(--color-border);
  padding-top: 0.75rem;
}
.stock-table .muted {
  color: var(--color-text-faint);
}


/* ---- Table overflow container ----------------------------------------- */
/* Wide tables (the 8-column stock table above all) must scroll inside their
   panel instead of pushing the page sideways. Without this the stock table
   forced 890px of content into a 375px viewport. */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-wrap > table {
  min-width: 640px;
}
/* Fade hint on the right edge so it is obvious there is more to scroll. */
@media (max-width: 900px) {
  .table-wrap {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
}

/* The tab bar already scrolls, but between ~640px and ~950px the last tab was
   clipped with no visual cue that there was more. Fade the right edge. */
@media (min-width: 641px) and (max-width: 950px) {
  .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}

/* The segmented controls had no hover feedback anywhere in the app. */
.segmented button:not(.is-active):hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

/* ---- Household fit: per-product consumption and top-up column ---- */
.panel-sub {
  margin: -2px 0 14px;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.fit-arith-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.use-bar {
  display: block;
  width: 100%;
  min-width: 56px;
  height: 5px;
  margin: 0 0 5px;
  border-radius: 3px;
  background: var(--surface-3, rgba(128, 128, 128, 0.18));
  overflow: hidden;
}
.use-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.use-bar.is-short > span { background: var(--danger, #c2410c); }
.topup {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.topup-yes {
  background: color-mix(in srgb, var(--danger, #c2410c) 14%, transparent);
  color: var(--danger, #c2410c);
}
.topup-no {
  background: var(--surface-3, rgba(128, 128, 128, 0.14));
  color: var(--text-muted);
}
.topup-when {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
tr.row-short td { background: color-mix(in srgb, var(--danger, #c2410c) 5%, transparent); }
.topup-edge {
  background: color-mix(in srgb, var(--warn, #b45309) 15%, transparent);
  color: var(--warn, #b45309);
}
.use-bar.is-edge > span { background: var(--warn, #b45309); }
tr.row-edge td { background: color-mix(in srgb, var(--warn, #b45309) 4%, transparent); }
#fitBody .size-chip { margin-left: 8px; vertical-align: middle; }
#fitBody .use-bar { max-width: 92px; margin-left: auto; }

/* ---------------- Calculations tab ---------------- */
.chain-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface-2);
}
.chain-head {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chain-head h4 {
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chain-answer {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.chain-answer b {
  color: var(--text);
  font-size: 15px;
}
.chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* Column headings so the right-hand result column reads as a column */
.chain-colhead {
  display: grid;
  grid-template-columns: 24px 1fr minmax(84px, max-content);
  gap: 10px;
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.chain-colhead span:last-child {
  text-align: right;
}
.chain-step {
  display: grid;
  grid-template-columns: 24px 1fr minmax(84px, max-content);
  gap: 10px;
  align-items: baseline;
  padding: 8px;
  border-radius: 6px;
}
/* Alternate shading so the eye can follow a row across to its result */
.chain-step:nth-child(odd) {
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.chain-n {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chain-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chain-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chain-detail {
  font-size: 13.5px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.chain-out {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
  text-align: right;
  align-self: center;
}
.chain-foot {
  font-size: 12.5px;
  color: var(--muted);
  margin: 10px 0 0;
}

.conf-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
/* Scoped to the dot. These were bare class selectors, so the fill colour also
   landed on the .conf-tag text chips in Field permissions and left dark text
   sitting on a dark fill. */
.conf-dot.conf-sourced { background: #1d9a6c; }
.conf-dot.conf-partial { background: #d19a2a; }
.conf-dot.conf-estimate { background: #b45a5a; }
.conf-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 14px;
}
.conf-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inputs-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btn-reset {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }
.btn-reset { border-color: currentColor; opacity: 0.85; }
.btn-reset:hover { opacity: 1; }

.tune-group { margin-top: 18px; }
.tune-group-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.tune-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  border-radius: 6px;
}
.tune-row.is-changed { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tune-label {
  display: flex;
  gap: 9px;
  align-items: baseline;
  min-width: 0;
}
.tune-label b { font-weight: 600; font-size: 14px; }
.tune-note {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.tune-input {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tune-input input {
  width: 84px;
  padding: 7px 9px;
  border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tune-input input:hover { border-color: color-mix(in srgb, currentColor 50%, transparent); }
.tune-input input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.tune-unit {
  font-size: 12.5px;
  color: var(--muted);
  min-width: 62px;
}
.tune-revert {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  white-space: nowrap;
}
.tune-changed-note {
  font-size: 13px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 4px;
}

@media (max-width: 720px) {
  .tune-row { grid-template-columns: 1fr; }
  .tune-input { justify-content: flex-start; }
}

.method-card.signoff {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.method-card.signoff p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 9px;
  max-width: 78ch;
}
.method-card.signoff p:last-child { margin-bottom: 0; }
.method-card.signoff a { color: var(--accent); }

/* Worked examples sit side by side where there is room, stacked on a phone */
.chain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 12px;
  align-items: start;
}
.chain-grid .chain-card { margin-bottom: 0; }
@media (max-width: 700px) {
  .chain-grid { grid-template-columns: 1fr; }
}

/* Step rows respond to the card they sit in, not just the viewport.
   The result keeps its own column until the card is too narrow to hold one. */
.chain-grid .chain-card { container-type: inline-size; }
@container (max-width: 330px) {
  .chain-colhead { grid-template-columns: 22px 1fr; }
  .chain-colhead span:last-child { display: none; }
  .chain-step { grid-template-columns: 22px 1fr; }
  .chain-out { grid-column: 2; text-align: left; }
}

/* ---------- Configuration: guidance accordion ---------- */
.guide-stack { display: grid; gap: var(--space-2); margin: var(--space-6) 0; }
.guide {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}
.guide > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
  font-size: 0.95rem; font-weight: 600; color: var(--color-text);
  transition: background var(--transition-interactive);
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary:hover { background: var(--color-surface-offset); }
.guide > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.guide[open] > summary { border-bottom: 1px solid var(--color-divider); }
.guide-t { display: flex; align-items: flex-start; gap: var(--space-3); }
.guide-t::before {
  content: ''; width: 7px; height: 7px; flex: none; border-radius: 2px;
  background: var(--color-primary); transition: transform var(--transition-interactive);
  margin-top: 0.5em;
}
.guide[open] .guide-t::before { transform: rotate(45deg); }
.guide-c {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint); white-space: nowrap;
}
.guide-body {
  padding: var(--space-4); font-size: 0.9rem; line-height: 1.65; color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.guide-body > *:first-child { margin-top: 0; }
.guide-body > *:last-child { margin-bottom: 0; }
.guide-body p { margin: 0 0 var(--space-3); }
.guide-body ul, .guide-body ol { margin: 0 0 var(--space-3); padding-left: 1.2rem; }
.guide-body li { margin-bottom: var(--space-1); }
.guide-body b { color: var(--color-text); font-weight: 600; }
.guide-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em;
  background: var(--color-surface-offset); padding: 0.1em 0.35em; border-radius: 3px;
  color: var(--color-text);
}
.guide-note {
  border-left: 2px solid var(--color-primary); padding: var(--space-1) 0 var(--space-1) var(--space-3);
  margin-top: var(--space-4) !important;
}
.guide-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); font-size: 0.85rem; }
.guide-table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600; padding: 0 var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.guide-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider); vertical-align: top;
}
.guide-table tr:last-child td { border-bottom: 0; }
.guide-table td:first-child { color: var(--color-text); font-weight: 500; }

/* ---------- Configuration: inputs that need confirming ---------- */
.tune-row.needs-weigh, .tune-row.needs-state, .tune-row.needs-observe {
  background: var(--flag-bg);
  box-shadow: inset 3px 0 0 var(--flag-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tune-flag, .tune-group-flag {
  display: inline-block; padding: 0.1rem 0.42rem;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 3px; white-space: nowrap;
  color: var(--flag-ink); background: var(--flag-chip);
}
.tune-flag { margin-left: var(--space-2); vertical-align: 1px; }
.tune-group-flag { margin-left: var(--space-2); }
.tune-how {
  display: block; margin-top: var(--space-1); font-size: 0.78rem; line-height: 1.55;
  color: var(--flag-ink);
}
:root, [data-theme='light'] {
  --flag-bg: rgba(151, 106, 32, 0.06);
  --flag-line: #b98a3c;
  --flag-chip: rgba(151, 106, 32, 0.14);
  --flag-ink: #7d5a1c;
}
[data-theme='dark'] {
  --flag-bg: rgba(228, 179, 96, 0.07);
  --flag-line: #c99a4d;
  --flag-chip: rgba(228, 179, 96, 0.16);
  --flag-ink: #e0b877;
}
@media (max-width: 640px) {
  .guide > summary { padding: var(--space-3); font-size: 0.88rem; }
  .guide-c { display: none; }
  .guide-body { padding: var(--space-3); }
}

/* =============================================================================
   Governance — account bar, model-state banner, reason gate, change log
   ========================================================================== */

.account-panel {
  margin-bottom: var(--space-5, 1.25rem);
}

.acct {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.acct-who {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 22rem;
}
.acct-who b {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.acct-who span {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.acct-actions {
  display: flex;
  gap: 0.5rem;
  flex: none;
  /* Three buttons do not fit on one line on a phone, and flex: none stopped
     them shrinking, so the row ran off the side of the screen. */
  flex-wrap: wrap;
}

.role-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.role-admin {
  background: rgb(44 50 29 / 0.1);
  border-color: rgb(44 50 29 / 0.3);
  color: var(--olive);
}
.role-business {
  background: rgb(151 106 32 / 0.1);
  border-color: rgb(185 138 60 / 0.4);
  color: var(--flag-ink);
}
.role-viewer {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme='dark'] .role-admin {
  background: rgb(169 189 126 / 0.14);
  border-color: rgb(169 189 126 / 0.36);
  color: var(--color-primary);
}

/* ---- sign-in ---- */
.signin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-divider);
}
.signin input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-interactive);
}
.signin input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.signin .reason-error {
  flex: 1 1 100%;
  margin: 0.125rem 0 0;
}

/* ---- buttons ---- */
.btn-primary,
.btn-ghost {
  padding: 0.5rem 0.9375rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #ffffff;
}
[data-theme='dark'] .btn-primary {
  color: var(--charcoal);
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-ghost {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---- model-state banner ---- */
.sbanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.875rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.sbanner b {
  color: var(--color-text);
  font-weight: 700;
}
.sbanner-clean {
  border-left-color: var(--color-primary);
}
.sbanner-modified {
  border-left-color: var(--flag-line);
  background: var(--flag-bg);
}
.sbanner-modified b {
  color: var(--flag-ink);
}
.sbanner-offline {
  border-left-color: var(--maroon);
  background: rgb(60 13 26 / 0.05);
}
[data-theme='dark'] .sbanner-offline {
  background: rgb(255 138 160 / 0.08);
  border-left-color: #e08a9a;
}
.sbanner-whatif {
  border-left-color: var(--chocolate);
  background: rgb(50 37 29 / 0.05);
  border-style: dashed;
  border-left-style: solid;
}
[data-theme='dark'] .sbanner-whatif {
  background: rgb(223 205 190 / 0.07);
  border-left-color: var(--sand);
}
.sbanner .btn-ghost {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

/* ---- locked and attributed rows ---- */
.tune-row.is-locked {
  opacity: 0.72;
}
.tune-row.is-locked .tune-input input {
  background: var(--color-surface-offset);
  cursor: not-allowed;
}
.tune-lock {
  display: inline-block;
  margin-left: 0.4375rem;
  padding: 0.05rem 0.4375rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: 1px;
}
.tune-who {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--flag-ink);
  overflow-wrap: anywhere;
}
.tune-was {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-faint);
  white-space: nowrap;
}

/* ---- reason gate ---- */
.rmodal-card {
  width: min(480px, 100%);
}
.rmodal-card h3 {
  margin: 0 0 0.4375rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.rmodal-sub {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.rmodal-sub b {
  color: var(--color-text);
  font-weight: 700;
}
.reason-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
}
#reasonText {
  width: 100%;
  padding: 0.5625rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}
#reasonText:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.reason-hint {
  margin: 0.4375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-faint);
}
.reason-error {
  margin: 0.5rem 0 0;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  background: rgb(60 13 26 / 0.07);
  border: 1px solid rgb(60 13 26 / 0.2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--maroon);
}
[data-theme='dark'] .reason-error {
  background: rgb(255 138 160 / 0.1);
  border-color: rgb(255 138 160 / 0.3);
  color: #f0a8b4;
}
.rmodal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.125rem;
}

/* ---- change log ---- */
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.audit-item {
  padding: 0.8125rem 0;
  border-top: 1px solid var(--color-divider);
}
.audit-item:first-child {
  border-top: 0;
}
.audit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 0.75rem;
}
.audit-head b {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}
.audit-delta {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--flag-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.audit-item.is-reset .audit-delta {
  color: var(--color-primary);
}
.audit-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.audit-reason {
  margin: 0.3125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.audit-meta {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}
.audit-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .acct-actions {
    flex: 1 1 100%;
  }
  .acct-actions .btn-ghost {
    flex: 1 1 auto;
  }
  .signin input {
    flex: 1 1 100%;
  }
  .signin .btn-primary {
    flex: 1 1 100%;
  }
  .rmodal-actions .btn-primary,
  .rmodal-actions .btn-ghost {
    flex: 1 1 auto;
  }
}

/* =============================================================================
   ADMIN — header entry point, sub-tabs, users, field permissions
   ========================================================================== */

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Sits at the logo's eye level and carries the signed-in role, so the state of
   the tool is legible from any screen without opening anything. */
.header-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-interactive);
}
.header-admin:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.header-admin.is-signed-in {
  border-color: rgb(44 50 29 / 0.28);
}
[data-theme='dark'] .header-admin.is-signed-in {
  border-color: rgb(169 189 126 / 0.35);
}
.header-admin svg {
  flex: none;
}
.header-admin-who {
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .header-admin-t {
    display: none;
  }
}

/* ---- admin shell ---- */

.admin-head {
  margin-bottom: var(--space-5);
}
.admin-title {
  margin: 0 0 0.375rem;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.admin-sub {
  margin: 0;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.subtabs {
  display: flex;
  gap: 0.25rem;
  margin: var(--space-5) 0 var(--space-4);
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar {
  display: none;
}
.subtab {
  padding: 0.5rem 0.875rem;
  margin-bottom: -1px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-interactive);
}
.subtab:hover {
  color: var(--color-text);
}
.subtab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.admin-pane {
  display: none;
}
.admin-pane.is-active {
  display: block;
}

.admin-gate,
.admin-loading {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- set a password ---- */

.setpw-panel {
  margin-bottom: var(--space-5);
  border-color: rgb(44 50 29 / 0.3);
}
[data-theme='dark'] .setpw-panel {
  border-color: rgb(169 189 126 / 0.35);
}
.setpw-form {
  display: grid;
  gap: 0.375rem;
  max-width: 24rem;
  margin-top: var(--space-4);
}
.setpw-l {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.setpw-i {
  padding: 0.5rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
}
.setpw-i:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.setpw-form .btn-primary {
  margin-top: 0.5rem;
  justify-self: start;
}
.setpw-msg {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.setpw-msg.is-error {
  color: var(--maroon);
}
[data-theme='dark'] .setpw-msg.is-error {
  color: #e79aa9;
}
.setpw-msg.is-ok {
  color: var(--color-primary);
}

/* ---- users ---- */

.role-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem var(--space-4);
  margin-bottom: var(--space-4);
  padding: 0.625rem 0.75rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.invite-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.invite-row {
  display: grid;
  gap: 0.25rem;
  flex: 1 1 12rem;
}
.invite-l {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.invite-opt {
  font-weight: 400;
  color: var(--color-text-faint);
}
.invite-i {
  padding: 0.5rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  width: 100%;
}
.invite-i:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.invite-note {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.invite-error {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  background: rgb(60 13 26 / 0.06);
  border: 1px solid rgb(60 13 26 / 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--maroon);
}
[data-theme='dark'] .invite-error {
  background: rgb(231 154 169 / 0.08);
  border-color: rgb(231 154 169 / 0.28);
  color: #e79aa9;
}

.invite-result {
  margin-top: 0.75rem;
  padding: var(--space-4);
  background: var(--flag-bg);
  border: 1px solid var(--flag-line);
  border-radius: var(--radius-sm);
}
.invite-result > b {
  font-size: 0.875rem;
}
.ir-mail {
  margin: 0.375rem 0 0.75rem;
  font-size: 0.8125rem;
}
.ir-ok {
  color: var(--color-primary);
  font-weight: 600;
}
.ir-warn {
  color: var(--flag-ink);
  font-weight: 600;
}
.ir-l {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ir-row {
  display: flex;
  gap: 0.375rem;
}
.ir-i {
  flex: 1;
  min-width: 0;
  padding: 0.4375rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}
.ir-note {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.btn-mini {
  padding: 0.3125rem 0.5625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-interactive);
}
.btn-mini:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-mini:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-mini.is-danger:hover:not(:disabled) {
  border-color: var(--maroon);
  color: var(--maroon);
}
[data-theme='dark'] .btn-mini.is-danger:hover:not(:disabled) {
  border-color: #e79aa9;
  color: #e79aa9;
}

.users-table {
  width: 100%;
  /* The global 700px floor exists for wide data tables that sit inside a
     .table-scroll wrapper. This one has no wrapper, so the floor pushed the
     whole page sideways on a phone. */
  min-width: 0;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.users-table th {
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.users-table td {
  padding: 0.625rem;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.users-table tr.is-self {
  background: var(--color-surface-2);
}
/* Same rule as the actions cell: the flex box goes inside the td, never on it,
   so the row's bottom border stays on one line. */
.u-acct-in {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
  gap: 0.125rem;
}
.u-acct-in > b {
  font-size: 0.875rem;
}
.u-mail,
.u-inv {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.u-inv {
  color: var(--color-text-faint);
}
.u-you {
  align-self: flex-start;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--color-surface-offset);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.u-role {
  padding: 0.3125rem 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
}
.u-role:disabled {
  opacity: 0.55;
  cursor: default;
}
.u-status {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: help;
}
.u-active {
  background: rgb(44 50 29 / 0.1);
  border-color: rgb(44 50 29 / 0.28);
  color: var(--olive);
}
[data-theme='dark'] .u-active {
  background: rgb(169 189 126 / 0.12);
  border-color: rgb(169 189 126 / 0.32);
  color: #a9bd7e;
}
.u-pending {
  background: var(--flag-bg);
  border-color: var(--flag-line);
  color: var(--flag-ink);
}
.u-disabled {
  background: rgb(60 13 26 / 0.07);
  border-color: rgb(60 13 26 / 0.22);
  color: var(--maroon);
}
[data-theme='dark'] .u-disabled {
  background: rgb(231 154 169 / 0.09);
  border-color: rgb(231 154 169 / 0.28);
  color: #e79aa9;
}
.u-seen {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.u-never {
  color: var(--color-text-faint);
}
/* The flex box has to be inside the cell, not on it. Setting display:flex on a
   td drops it out of table layout, so its bottom border no longer lines up with
   the rest of the row and the divider breaks in two. */
.u-actions {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ua-h {
  text-align: right;
}
.users-foot {
  margin: var(--space-4) 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
@media (max-width: 760px) {
  .users-table,
  .users-table thead,
  .users-table tbody,
  .users-table tr,
  .users-table td {
    display: block;
    width: 100%;
  }
  .users-table thead {
    display: none;
  }
  .users-table tr {
    margin-bottom: 0.625rem;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .users-table td {
    border-bottom: none;
    padding: 0.25rem 0;
  }
  /* The stacked card must not inherit the nowrap that keeps the desktop column
     on one line, or a long address pushes the whole page wider than the screen. */
  .users-table td.u-acct {
    white-space: normal;
  }
  .ua-cell,
  .u-actions {
    justify-content: flex-start;
    margin-top: 0.375rem;
  }
}

/* ---- field permissions ---- */

.perm-warn {
  padding: var(--space-4);
  background: var(--flag-bg);
  border: 1px solid var(--flag-line);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text);
}
.perm-flag {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--flag-chip);
  border: 1px solid var(--flag-line);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--flag-ink);
  white-space: nowrap;
}
.perm-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem var(--space-4);
  margin: var(--space-4) 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.pc-warn {
  color: var(--flag-ink);
}
.perm-group {
  margin-bottom: var(--space-5);
}
.perm-gt {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.perm-row {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.375rem;
  background: var(--color-surface);
}
.perm-row.is-exposed {
  border-color: var(--flag-line);
  background: var(--flag-bg);
}
.perm-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.perm-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.perm-box {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  transition: var(--transition-interactive);
}
.perm-toggle input:checked + .perm-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}
.perm-toggle input:focus-visible + .perm-box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.perm-name {
  font-size: 0.875rem;
  font-weight: 600;
}
.perm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0.4375rem 0 0 1.5625rem;
}
.conf-tag {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.conf-tag.conf-sourced {
  border-color: rgb(44 50 29 / 0.3);
  color: var(--olive);
}
[data-theme='dark'] .conf-tag.conf-sourced {
  border-color: rgb(169 189 126 / 0.35);
  color: #a9bd7e;
}
.conf-tag.conf-partial {
  border-color: var(--flag-line);
  color: var(--flag-ink);
}
.conf-tag.conf-estimate {
  border-color: rgb(180 90 90 / 0.45);
  color: #9c4141;
}
[data-theme='dark'] .conf-tag.conf-estimate {
  border-color: rgb(216 138 138 / 0.4);
  color: #e0a0a0;
}
.perm-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.perm-src,
.perm-act {
  margin: 0.375rem 0 0 1.5625rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.perm-act {
  color: var(--flag-ink);
}

/* ---- activity ---- */

.audit-what {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
}
.audit-kind {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--color-surface-offset);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.audit-src {
  color: var(--color-text-faint);
}

/* ---- reason gate extras ---- */

.rmodal-src,
.rmodal-warn {
  display: block;
  margin-top: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.55;
  font-weight: 400;
}
.rmodal-src {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.rmodal-warn {
  background: var(--flag-bg);
  border: 1px solid var(--flag-line);
  color: var(--color-text);
}

/* Several admin blocks are laid out with flex, and a flex display beats the
   [hidden] attribute's display:none. Without this, hiding the invite form for a
   non-admin leaves it on screen. */
.invite-form[hidden],
.role-key[hidden],
.perm-warn[hidden],
.perm-counts[hidden],
.setpw-form[hidden],
.header-admin-who[hidden] {
  display: none;
}

/* ============================================================= login gate ==
   The tool is not readable until a session exists.

   Be clear about what this is. It keeps the interface, the figures and every
   control off the screen for anyone without an account, and it is the right
   thing for a page that is now on a public hostname. It is NOT a substitute
   for the enforcement in Postgres, and on a static site it cannot be: the
   bundle is served by a CDN, so a determined person can still request app.js
   or data.js directly and read the shipped defaults out of them. Nothing they
   can do from there changes a stored value or reveals an account, because
   every write goes through set_config_value() or the admin-users function and
   both re-derive the caller's role in the database. If the shipped numbers
   themselves must not be readable by an anonymous request, the site has to
   move behind auth at the edge — that is a hosting change, not a CSS one.
   ========================================================================== */

body[data-locked] { overflow: hidden; }
body[data-locked] .site-header,
body[data-locked] main,
body[data-locked] .site-footer { display: none; }
body:not([data-locked]) .login-gate { display: none; }

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-offset);
  overflow-y: auto;
}

.lg-card {
  width: 100%;
  max-width: 27rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8) var(--space-8);
}

.lg-mark { display: block; width: 6.5rem; height: auto; color: var(--color-text); }
.lg-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
/* A fixed size, not a token. The type scale clamps against the viewport, which
   is the wrong reference inside a fixed-width card — at 1280px --text-2xl
   resolves to 3.25rem and swamps the panel. */
.lg-title { margin: var(--space-6) 0 0; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; }
.lg-lede { margin: var(--space-3) 0 var(--space-7); color: var(--color-text-muted); }
.lg-foot {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* .signin was written for the account bar: a wrapping row with a rule above
   it. In the card it is a plain stack and the rule is noise. */
.login-gate .signin {
  display: grid;
  gap: var(--space-3);
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.login-gate .signin input {
  flex: none;
  width: 100%;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.login-gate .signin input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.login-gate .signin .btn-primary { width: 100%; padding: 0.7rem 1rem; }
.login-gate .reason-error { margin: 0; }

/* Shown only while the session check is in flight, so an already-signed-in
   person does not see a sign-in form flash up before being let straight in. */
.lg-boot {
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
body[data-locked='pending'] .lg-card { display: none; }
body[data-locked='pending'] .lg-boot { display: flex; }

.lg-spin {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: lg-spin 0.7s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lg-spin { animation: none; } }

@media (max-width: 30rem) {
  .login-gate { padding: var(--space-4); }
  .lg-card { padding: var(--space-8) var(--space-5) var(--space-6); }
}