/* FreezeM calculators — stylesheet.

   IMPORTANT LAYOUT CONSTRAINT
   These pages are designed to be embedded in freezem.com as an auto-height
   iframe. An auto-height iframe never scrolls, so position:sticky and
   position:fixed silently do nothing and 100vh refers to the wrong box.
   Do not add any of them. Mobile puts results first in the source order
   instead of using a sticky bar.

   Colour rules that are not negotiable:
   - Cyan #00DDCB is 1.72:1 on white. Fills and 3px+ strokes only.
     Never body text, never a 1px border, never a small label.
   - Sky #499FFC is 2.75:1. Fills and rules only, never text.
   - Blue #0C6EF2 is 4.65:1 on white but only 4.27:1 on the #F0F6FE tint,
     so --fzm-blue-deep is used for text on tinted panels.
*/

:root {
  --fzm-blue:        #0C6EF2;
  --fzm-blue-deep:   #0A57BE;  /* passes AA on the tint */
  --fzm-cyan:        #00DDCB;
  --fzm-navy:        #001070;
  --fzm-ink:         #000314;
  --fzm-body:        #212121;
  --fzm-muted:       #5A5E63;
  --fzm-violet:      #683CEB;
  --fzm-tint:        #F0F6FE;
  --fzm-tint-2:      #D9E8FD;
  --fzm-line:        #DFE6EF;
  --fzm-line-soft:   #EDF2F8;
  --fzm-warn:        #B45309;
  --fzm-warn-bg:     #FFF7ED;
  --fzm-error:       #C0261F;
  --fzm-error-bg:    #FEF2F2;
  --fzm-ok:          #0F7B4F;
  --fzm-white:       #FFFFFF;

  --fzm-radius:      14px;
  --fzm-radius-sm:   9px;
  --fzm-shadow:      0 1px 2px rgba(0,3,20,.04), 0 8px 24px rgba(0,3,20,.06);
  --fzm-shadow-lift: 0 2px 4px rgba(0,3,20,.06), 0 14px 36px rgba(12,110,242,.13);

  --fzm-font: Poppins, Helvetica, Arial, "Lucida Grande", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fzm-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fzm-body);
  background: var(--fzm-white);
  -webkit-font-smoothing: antialiased;
}

.fzm-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 20px 56px; }

h1, h2, h3 { color: var(--fzm-ink); margin: 0 0 .4em; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -.01em; }
h2 { font-size: clamp(22px, 3.6vw, 30px); }
h3 { font-size: clamp(17px, 2.2vw, 20px); }
p  { margin: 0 0 1em; }
a  { color: var(--fzm-blue); }

.fzm-lede { font-size: clamp(16px, 2vw, 18px); color: var(--fzm-body); max-width: 68ch; }
.fzm-small { font-size: 13px; line-height: 1.5; color: var(--fzm-muted); }
.fzm-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fzm-blue-deep); margin: 0 0 8px;
}

.fzm-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--fzm-blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 50;
}
.fzm-skip:focus { left: 0; }

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

/* ── banners ─────────────────────────────────────────────────────────────── */

.fzm-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--fzm-tint); border-left: 4px solid var(--fzm-cyan);
  border-radius: 0 var(--fzm-radius-sm) var(--fzm-radius-sm) 0;
  padding: 13px 18px; margin: 0 0 22px; font-size: 15px; color: var(--fzm-navy);
}
.fzm-banner strong { color: var(--fzm-navy); }
.fzm-banner--bio { border-left-color: var(--fzm-violet); }

.fzm-note { border-radius: var(--fzm-radius-sm); padding: 12px 16px; font-size: 14px; margin: 0 0 14px; }
.fzm-note--info  { background: var(--fzm-tint);      color: var(--fzm-navy);  border: 1px solid var(--fzm-tint-2); }
.fzm-note--warn  { background: var(--fzm-warn-bg);   color: var(--fzm-warn);  border: 1px solid #FDBA74; }
.fzm-note--error { background: var(--fzm-error-bg);  color: var(--fzm-error); border: 1px solid #FCA5A5; }
.fzm-note strong { display: block; margin-bottom: 3px; }

/* ── panels and cards ────────────────────────────────────────────────────── */

.fzm-panel {
  background: var(--fzm-white); border: 1px solid var(--fzm-line);
  border-radius: var(--fzm-radius); padding: 20px 22px; margin: 0 0 20px;
}
.fzm-panel--tint { background: var(--fzm-tint); border-color: var(--fzm-tint-2); }
.fzm-panel__title {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fzm-navy); margin: 0 0 14px;
}

.fzm-grid { display: grid; gap: 18px; }
.fzm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
@media (min-width: 700px) { .fzm-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Grid and flex children default to min-width:auto, which means a wide child —
   a results table with a min-width, a long unbroken number — makes the whole
   page scroll sideways instead of scrolling inside its own container. */
.fzm-grid > *, .fzm-tiles > *, .fzm-ratios > *, .fzm-biolayout > *,
.fzm-scenario > *, .fzm-arow > *, .fzm-panel, .fzm-field { min-width: 0; }
.fzm-scroll { max-width: 100%; }

/* ── scenario bar ────────────────────────────────────────────────────────── */

.fzm-scenario { display: grid; gap: 16px 22px; }
@media (min-width: 760px)  { .fzm-scenario { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .fzm-scenario { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

.fzm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fzm-field__label {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fzm-navy);
}
.fzm-field__hint { font-size: 12px; color: var(--fzm-muted); line-height: 1.4; }
.fzm-optional {
  margin-left: 7px; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fzm-muted); background: #F3F4F6;
  border-radius: 20px; padding: 2px 8px;
}

/* Inputs are never below 16px — anything smaller makes iOS zoom on focus. */
.fzm-input, .fzm-select {
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--fzm-ink);
  background: var(--fzm-white); border: 1.5px solid var(--fzm-line);
  border-radius: var(--fzm-radius-sm); padding: 9px 12px; min-height: 44px; width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
}
.fzm-input:hover, .fzm-select:hover { border-color: #C4D2E4; }
.fzm-input:focus, .fzm-select:focus { border-color: var(--fzm-blue); outline: none; box-shadow: 0 0 0 3px rgba(12,110,242,.16); }
.fzm-input--invalid { border-color: var(--fzm-error); background: var(--fzm-error-bg); }

.fzm-inputgroup { display: flex; gap: 8px; }
.fzm-inputgroup .fzm-input { flex: 1 1 auto; min-width: 0; }
.fzm-inputgroup .fzm-select { flex: 0 0 auto; width: auto; min-width: 96px; }

.fzm-segments { display: flex; flex-wrap: wrap; gap: 6px; }
.fzm-segments input { position: absolute; opacity: 0; pointer-events: none; }
.fzm-segments label {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 1.5px solid var(--fzm-line); border-radius: var(--fzm-radius-sm);
  padding: 7px 13px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--fzm-body); background: var(--fzm-white); min-height: 44px; justify-content: center;
  transition: border-color .12s, background .12s;
}
.fzm-segments label span { font-size: 11px; font-weight: 400; color: var(--fzm-muted); letter-spacing: .02em; }
.fzm-segments label:hover { border-color: #C4D2E4; }
.fzm-segments input:checked + label {
  border-color: var(--fzm-blue); background: var(--fzm-tint); color: var(--fzm-blue-deep);
  box-shadow: inset 0 0 0 1px var(--fzm-blue);
}
.fzm-segments input:focus-visible + label { outline: 3px solid var(--fzm-blue); outline-offset: 2px; }
.fzm-segments input:checked + label span { color: var(--fzm-blue-deep); }

/* ── driver indicator ────────────────────────────────────────────────────── */

.fzm-driverbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 18px; margin: 0 0 18px;
  background: var(--fzm-ink); color: #fff; border-radius: var(--fzm-radius);
  font-size: 15px;
}
.fzm-driverbar__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--fzm-cyan); color: var(--fzm-ink); padding: 3px 9px; border-radius: 20px;
}
.fzm-driverbar__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.fzm-driverbar__undo {
  margin-left: auto; font-size: 13px; color: var(--fzm-cyan);
  background: none; border: 1.5px solid rgba(0,221,203,.5); border-radius: 20px;
  padding: 5px 13px; cursor: pointer; font-family: inherit; min-height: 34px;
}
.fzm-driverbar__undo:hover { background: rgba(0,221,203,.12); }

/* ── the flow diagram ────────────────────────────────────────────────────── */

.fzm-flow { position: relative; margin: 0 0 22px; }

.fzm-flow__stage {
  position: relative; width: 100%; aspect-ratio: 1200 / 680;
  container-type: inline-size;
}
.fzm-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Node cards sit at absolute percentage positions inside a fixed-aspect stage,
   so their contents must fit a known height. Everything inside is sized in cqw
   (1cqw = 1% of the stage width) so the whole diagram scales as one piece.
   If you change a padding or font here, re-check that no card clips: the
   shortest cards are the 72-unit loss boxes. */
.fzm-node {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  background: var(--fzm-white); border: 1.5px solid var(--fzm-line);
  border-radius: var(--fzm-radius); box-shadow: var(--fzm-shadow);
  padding: 1.1cqw 1.4cqw; gap: .15cqw; overflow: hidden;
}
.fzm-node__label {
  font-size: clamp(8px, 1.02cqw, 12px); font-weight: 600; letter-spacing: .07em; line-height: 1.25;
  text-transform: uppercase; color: var(--fzm-blue-deep); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fzm-node__icon { height: 1.9cqw; width: auto; max-width: 40%; object-fit: contain; opacity: .95; }
.fzm-node__row { display: flex; align-items: baseline; gap: .4cqw; min-width: 0; }
.fzm-node__input {
  font-family: inherit; font-size: clamp(12px, 1.9cqw, 25px); font-weight: 600; color: var(--fzm-ink);
  border: none; background: transparent; padding: 0; width: 100%; min-width: 0; line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
.fzm-node__input:focus { outline: none; }
.fzm-node__unit { font-size: clamp(8px, .98cqw, 12px); font-weight: 500; color: var(--fzm-muted); white-space: nowrap; }
.fzm-node__chip {
  font-size: clamp(7px, .88cqw, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fzm-muted); display: flex; align-items: center; gap: .3cqw; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.fzm-node__sub { font-size: clamp(7px, .9cqw, 11px); color: var(--fzm-muted); line-height: 1.3; }

.fzm-node.is-driver {
  border: 2px solid var(--fzm-blue); box-shadow: var(--fzm-shadow-lift); background: var(--fzm-white);
}
.fzm-node.is-driver .fzm-node__chip { color: var(--fzm-blue-deep); }
.fzm-node.is-calculated { background: var(--fzm-tint); border-color: var(--fzm-tint-2); border-left: 3px solid var(--fzm-cyan); }
.fzm-node.is-overridden { border-left: 3px solid var(--fzm-violet); }
.fzm-node.is-overridden .fzm-node__chip { color: var(--fzm-violet); }
.fzm-node.is-loss {
  background: repeating-linear-gradient(135deg, #FAFBFD, #FAFBFD 6px, #F4F7FB 6px, #F4F7FB 12px);
  border-style: dashed; border-color: #CBD5E1; box-shadow: none;
}
/* The loss boxes are the shortest cards on the stage, so they drop the chip
   and run a size smaller. */
.fzm-node.is-loss { padding: .8cqw 1.4cqw; }
.fzm-node.is-loss .fzm-node__label { color: var(--fzm-muted); white-space: normal; }
.fzm-node.is-loss .fzm-node__input { color: var(--fzm-muted); font-weight: 500; font-size: clamp(11px, 1.5cqw, 19px); }
.fzm-node.is-loss .fzm-node__chip { display: none; }
.fzm-node--pausem { background: linear-gradient(180deg, #FFFFFF, var(--fzm-tint)); align-items: center; text-align: center; }
.fzm-node--pausem .fzm-node__label { color: var(--fzm-ink); }
.fzm-node__jar { height: 38%; width: auto; object-fit: contain; }

.fzm-flow__caption { font-size: 13px; color: var(--fzm-muted); margin-top: 10px; }

/* Mobile: the SVG connector layer is meaningless in one column, so it goes
   away and the cards become a simple indented list. */
.fzm-flow__list { display: none; }
@media (max-width: 899px) {
  .fzm-flow__stage { display: none; }
  .fzm-flow__list { display: block; }
}

.fzm-step { border-left: 3px solid var(--fzm-cyan); padding: 0 0 0 16px; margin: 0 0 4px; position: relative; }
.fzm-step--branch { margin-left: 22px; border-left-color: var(--fzm-tint-2); }
.fzm-step--loss   { border-left-style: dashed; border-left-color: #CBD5E1; margin-left: 22px; }
.fzm-step__card {
  border: 1.5px solid var(--fzm-line); border-radius: var(--fzm-radius);
  padding: 12px 15px; margin: 0 0 10px; background: var(--fzm-white);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fzm-step__card.is-driver { border: 2px solid var(--fzm-blue); box-shadow: var(--fzm-shadow-lift); }
.fzm-step__card.is-calculated { background: var(--fzm-tint); border-color: var(--fzm-tint-2); }
.fzm-step__card.is-loss { background: #FAFBFD; border-style: dashed; border-color: #CBD5E1; }
.fzm-step__icon { height: 26px; width: 30px; object-fit: contain; flex: 0 0 auto; }
.fzm-step__main { flex: 1 1 150px; min-width: 0; }
.fzm-step__label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fzm-blue-deep); }
.fzm-step__card.is-loss .fzm-step__label { color: var(--fzm-muted); }
.fzm-step__value { display: flex; align-items: baseline; gap: 6px; }
.fzm-step__value .fzm-node__input { font-size: 22px; }

/* ── ratio strip ─────────────────────────────────────────────────────────── */

.fzm-ratios { display: grid; gap: 1px; background: var(--fzm-line); border: 1px solid var(--fzm-line); border-radius: var(--fzm-radius); overflow: hidden; }
@media (min-width: 620px) { .fzm-ratios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fzm-ratios { grid-template-columns: repeat(5, 1fr); } }
.fzm-ratio { background: var(--fzm-white); padding: 14px 16px; }
.fzm-ratio__value { font-size: 19px; font-weight: 700; color: var(--fzm-ink); font-variant-numeric: tabular-nums; }
.fzm-ratio__label { font-size: 12px; color: var(--fzm-muted); line-height: 1.35; margin-top: 2px; }
.fzm-ratio--accent { background: var(--fzm-tint); }
.fzm-ratio--accent .fzm-ratio__value { color: var(--fzm-blue-deep); }

/* ── result tiles (page 2) ───────────────────────────────────────────────── */

.fzm-headline {
  background: var(--fzm-ink); color: #fff; border-radius: var(--fzm-radius);
  padding: 24px 26px; margin: 0 0 18px;
}
.fzm-headline__pair { display: flex; flex-wrap: wrap; gap: 26px 40px; }
.fzm-headline__item { min-width: 140px; }
.fzm-headline__value { font-size: clamp(32px, 6vw, 46px); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fzm-headline__label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fzm-cyan); margin-bottom: 4px; }
.fzm-headline__caption { font-size: 14px; color: rgba(255,255,255,.72); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }

/* auto-fit rather than a viewport media query: these tiles live in a narrow
   results column on desktop, where three-across would be unreadable. */
.fzm-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fzm-tile {
  border: 1.5px solid var(--fzm-line); border-radius: var(--fzm-radius);
  padding: 15px 17px; background: var(--fzm-white);
}
.fzm-tile--assumed { border-style: dashed; border-color: #C9D4E3; background: #FCFDFF; }
.fzm-tile--pending { background: #FAFBFC; border-style: dashed; }
.fzm-tile__label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fzm-navy); }
.fzm-tile__value { font-size: 26px; font-weight: 700; color: var(--fzm-ink); font-variant-numeric: tabular-nums; line-height: 1.2; margin: 3px 0 1px; }
.fzm-tile--pending .fzm-tile__value { color: #6B7280; font-weight: 500; font-size: 14px; line-height: 1.4; margin-top: 6px; }
.fzm-tile__caption { font-size: 12px; color: var(--fzm-muted); line-height: 1.4; }
.fzm-tile__sens { font-size: 12px; color: var(--fzm-warn); margin-top: 6px; }

.fzm-prov {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 20px; padding: 2px 8px; margin-left: 6px; vertical-align: middle;
}
.fzm-prov--user     { background: var(--fzm-tint);    color: var(--fzm-blue-deep); }
.fzm-prov--derived  { background: #E7F8F6;            color: #0B6F66; }
.fzm-prov--assumed  { background: #F3F4F6;            color: var(--fzm-muted); }

.fzm-statusbar {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  background: var(--fzm-tint); border-radius: var(--fzm-radius-sm);
  padding: 11px 16px; font-size: 14px; color: var(--fzm-navy); margin: 0 0 16px;
}

/* ── assumptions panel ───────────────────────────────────────────────────── */

.fzm-assump { border: 1.5px solid var(--fzm-line); border-radius: var(--fzm-radius); margin: 0 0 20px; background: var(--fzm-white); }
.fzm-assump > summary {
  cursor: pointer; padding: 15px 20px; list-style: none; display: flex; gap: 12px;
  align-items: flex-start; font-size: 14px; color: var(--fzm-body); min-height: 44px;
}
.fzm-assump > summary::-webkit-details-marker { display: none; }
.fzm-assump > summary::after { content: "▸"; margin-left: auto; color: var(--fzm-blue); transition: transform .15s; flex: 0 0 auto; }
.fzm-assump[open] > summary::after { transform: rotate(90deg); }
.fzm-assump > summary:hover { background: var(--fzm-tint); border-radius: var(--fzm-radius); }
.fzm-assump__title { font-weight: 600; color: var(--fzm-ink); }
.fzm-assump__body { padding: 4px 20px 20px; border-top: 1px solid var(--fzm-line-soft); }
.fzm-assump__group { margin: 18px 0 0; }
.fzm-assump__group h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fzm-navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--fzm-line-soft);
}
.fzm-arow { display: grid; gap: 4px 14px; align-items: center; padding: 8px 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .fzm-arow { grid-template-columns: 1fr 150px 130px 40px; } }
.fzm-arow__label { font-size: 14px; color: var(--fzm-body); }
.fzm-arow__note { font-size: 12px; color: var(--fzm-muted); }
.fzm-arow__default { font-size: 12px; color: var(--fzm-muted); font-variant-numeric: tabular-nums; }
.fzm-arow__reset {
  background: none; border: 1px solid var(--fzm-line); border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; color: var(--fzm-muted); font-size: 15px; line-height: 1;
}
.fzm-arow__reset:hover { border-color: var(--fzm-blue); color: var(--fzm-blue); }
.fzm-arow.is-changed .fzm-arow__label { font-weight: 600; color: var(--fzm-violet); }
.fzm-changed-count { background: var(--fzm-violet); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.fzm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  border-radius: var(--fzm-radius-sm); padding: 11px 20px; min-height: 46px;
  cursor: pointer; border: 2px solid transparent; transition: background .12s, border-color .12s;
}
.fzm-btn--primary { background: var(--fzm-blue); color: #fff; }
.fzm-btn--primary:hover { background: #0A5CCB; }
.fzm-btn--ghost { background: transparent; color: var(--fzm-blue); border-color: var(--fzm-blue); }
.fzm-btn--ghost:hover { background: var(--fzm-tint); }
.fzm-btn--quiet { background: var(--fzm-white); color: var(--fzm-body); border-color: var(--fzm-line); font-weight: 500; }
.fzm-btn--quiet:hover { border-color: #C4D2E4; }
.fzm-btn--sm { font-size: 13px; padding: 7px 14px; min-height: 38px; }
.fzm-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── choice card (over-determination) ────────────────────────────────────── */

.fzm-choice {
  border: 2px solid var(--fzm-violet); border-radius: var(--fzm-radius);
  background: #FBFAFF; padding: 16px 18px; margin: 0 0 18px;
}
.fzm-choice__q { font-size: 15px; color: var(--fzm-ink); margin: 0 0 12px; }
.fzm-choice__q strong { color: var(--fzm-violet); }

/* ── consistency + footer ────────────────────────────────────────────────── */

.fzm-consistency { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 13px; color: var(--fzm-muted); }
.fzm-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  border-radius: 20px; padding: 4px 12px; border: 1px solid var(--fzm-line); background: var(--fzm-white);
}
.fzm-chip--ok   { color: var(--fzm-ok);    border-color: #BBE3CE; background: #F3FBF7; }
.fzm-chip--bad  { color: var(--fzm-error); border-color: #FCA5A5; background: var(--fzm-error-bg); }

.fzm-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--fzm-line); font-size: 13px; color: var(--fzm-muted); }
.fzm-foot p { margin: 0 0 8px; }

.fzm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── export dialog ───────────────────────────────────────────────────────── */

.fzm-modal { border: none; border-radius: var(--fzm-radius); padding: 0; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(0,3,20,.28); }
.fzm-modal::backdrop { background: rgba(0,3,20,.45); }
.fzm-modal__body { padding: 26px 26px 22px; }
.fzm-modal h3 { margin-bottom: 8px; }

/* ── self-test page ──────────────────────────────────────────────────────── */

.fzm-test { border-left: 4px solid var(--fzm-ok); background: #F6FBF8; padding: 9px 14px; margin: 0 0 5px; border-radius: 0 8px 8px 0; font-size: 14px; }
.fzm-test--fail { border-left-color: var(--fzm-error); background: var(--fzm-error-bg); }
.fzm-test__name { font-weight: 500; color: var(--fzm-ink); }
.fzm-test__detail { font-size: 12.5px; color: var(--fzm-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.fzm-test__flag { font-weight: 700; margin-right: 8px; }
.fzm-test .fzm-test__flag { color: var(--fzm-ok); }
.fzm-test--fail .fzm-test__flag { color: var(--fzm-error); }
.fzm-verdict { border-radius: var(--fzm-radius); padding: 20px 24px; margin: 0 0 26px; color: #fff; }
.fzm-verdict--ok  { background: var(--fzm-ok); }
.fzm-verdict--bad { background: var(--fzm-error); }
.fzm-verdict h2 { color: #fff; margin: 0 0 6px; }

/* ── tables ──────────────────────────────────────────────────────────────── */

/* Key-value rows for the narrow result cards. A real table needs a min-width
   to stay readable, which in a 300px grid column pushes the numbers out of
   sight behind a scrollbar — so these wrap instead. */
.fzm-kv__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--fzm-line-soft); font-size: 14px;
}
.fzm-kv__row:last-child { border-bottom: none; }
.fzm-kv__k { color: var(--fzm-body); flex: 1 1 auto; min-width: 0; }
/* The value never wraps mid-number, so on a narrow card the pair stacks
   instead of pushing the figure out of sight. */
.fzm-kv__v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fzm-ink); white-space: nowrap; text-align: right; flex: 0 0 auto; }
.fzm-kv__row--total { border-top: 2px solid var(--fzm-line); border-bottom: none; margin-top: 4px; }
.fzm-kv__row--total .fzm-kv__k { font-weight: 600; }

/* Price rows stack, because the label is long and the column is narrow. */
.fzm-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fzm-price__label { flex: 1 1 100%; font-size: 13px; color: var(--fzm-body); }
.fzm-price .fzm-input { flex: 1 1 90px; min-width: 0; }
.fzm-price__unit { flex: 0 0 auto; font-size: 12px; color: var(--fzm-muted); white-space: nowrap; }

.fzm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fzm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.fzm-table th, .fzm-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--fzm-line-soft); }
.fzm-table th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fzm-navy); }
.fzm-table td.num, .fzm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── motion + print ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .fzm-flow__stage, .fzm-btnrow, .fzm-driverbar__undo, .fzm-skip { display: none !important; }
  .fzm-flow__list { display: block !important; }
  body { font-size: 11pt; }
  .fzm-wrap { max-width: none; padding: 0; }
  .fzm-panel, .fzm-tile, .fzm-step__card { break-inside: avoid; box-shadow: none; }
  .fzm-headline { background: #fff !important; color: #000 !important; border: 2px solid #000; }
  .fzm-headline__label, .fzm-headline__caption { color: #333 !important; }
  .fzm-assump { break-before: page; }
  .fzm-assump[open] > summary::after { content: ""; }
}

/* ── page 2 layout ─────────────────────────────────────────────────────────
   Desktop puts the inputs on the left and the results on the right; mobile
   keeps the source order, which is results first (see the note at the top of
   this file about why there is no sticky bar). */
.fzm-biolayout { display: grid; gap: 22px; }
@media (min-width: 980px) {
  .fzm-biolayout { grid-template-columns: 7fr 5fr; align-items: start; }
  .fzm-biolayout__inputs  { grid-column: 1; grid-row: 1; }
  .fzm-biolayout__results { grid-column: 2; grid-row: 1; }
}