/* Uncertainty Propagation Calculator (2026-11-06, reworked 2026-11-12). Only what ft-tool-20261106.css lacks; colours and sizes from tokens. */

/* Panel head: "Try an example", "Clear" and, after either replaced a calculation, "Undo".
   Undo is laid over free space (position: absolute), so it comes and goes without moving the other two: a second
   click meant for "Try an example" can never land on "Clear". With the title and the buttons on one line it sits
   before them, beside the title; when the buttons are under the title it sits after them. There are two Undo
   buttons in the markup, one for each place, and only one is ever displayed, so the tab order is the order on screen. */
.upc-inputs .ft-panel__head { container: upchead / inline-size; }
.upc-inputs .ft-panel__head .ft-btnrow { position: relative; flex-wrap: nowrap; }
.upc-inputs .ft-panel__head .ft-btn--quiet { padding: 0 var(--ft-space-2); white-space: nowrap; }
.upc-undo { position: absolute; top: 0; }
.upc-undo--first { display: none; right: 100%; margin-right: var(--ft-space-2); }
.upc-undo--last { left: 100%; margin-left: var(--ft-space-2); }
@container upchead (max-width: 31.49rem) { .upc-inputs .ft-panel__title { flex-basis: 100%; } }
@container upchead (min-width: 31.5rem) { .upc-undo--first { display: inline-flex; } .upc-undo--last { display: none; } }

/* Formula ---------------------------------------------------------------------------------- */
.upc-mono, .upc-formula { font-family: var(--ft-font-mono); }
.upc-readas { margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); overflow-wrap: anywhere; }
.upc-readas .upc-mono { color: var(--ft-ink); }
.upc-readas__note, .upc-readas__warn { display: block; margin-top: 2px; }
.upc-readas__warn { color: var(--ft-warn); }
.upc-formula-error { display: grid; gap: var(--ft-space-2); padding: var(--ft-space-3); border-left: 4px solid var(--ft-bad); border-radius: var(--ft-radius); background: var(--ft-bad-soft); }
.upc-formula-error .ft-error { display: block; }
.upc-excerpt { margin: 0; padding: var(--ft-space-2) var(--ft-space-3); border-radius: var(--ft-radius-s); background: var(--ft-surface); color: var(--ft-ink); font-size: var(--ft-text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.upc-excerpt mark { padding: 0 1px; border-radius: 2px; background: var(--ft-bad-soft); color: var(--ft-bad); font-weight: 700; outline: 1px solid var(--ft-bad); }
.upc-excerpt mark.upc-ins { background: var(--ft-ok-soft); color: var(--ft-ok); outline-color: var(--ft-ok); }
.upc-fixes { display: grid; gap: var(--ft-space-2); }
.upc-fixes:empty { display: none; }
.upc-fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-space-1) var(--ft-space-3); min-width: 0; }
.upc-fix .ft-btn { max-width: 100%; height: auto; min-height: var(--ft-target); font-family: var(--ft-font-mono); overflow-wrap: anywhere; white-space: normal; text-align: left; }
.upc-fix__reads { min-width: 0; color: var(--ft-ink); font-size: var(--ft-text-sm); overflow-wrap: anywhere; }
.upc-setrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--ft-space-4); align-items: start; }
.upc-subtitle { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-md); font-weight: 650; line-height: 1.3; }
.upc-waiting, .upc-empty { margin: 0; padding: var(--ft-space-4); border: 1px dashed var(--ft-line-strong); border-radius: var(--ft-radius); color: var(--ft-ink-2); font-size: var(--ft-text-sm); }
/* Sentences, labels and tiles that repeat a typed name or unit break inside it rather than push their box wider. */
.upc-result .ft-result__note, .upc-result .ft-note, .upc-stats .ft-stat__value, .upc-stats .ft-stat__note, .upc-lead, .upc-dof, .upc-budget > .ft-hint,
.upc-results > .ft-status, .upc-more .ft-status, .upc-corr__field .ft-label, .upc-corr__body .ft-error, .upc-row .ft-error, .upc-formula-error .ft-error,
.upc-slider .ft-label, .upc-slider__note, .upc-whatif__result, .upc-mc__text, .upc-mc__chart .ft-chart__caption, .upc-step__title, .upc-step__note, .upc-compare__out { overflow-wrap: anywhere; }

/* The result in one line, under the formula, while the panels are stacked (phones and tablets).
   It sticks to the top of the screen while the measurements below it are filled in. ------------- */
.upc-live { display: none; }
@media (max-width: 55.99rem) {
  .upc-live {
    position: sticky; top: 0; z-index: 3;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label link" "text link"; align-items: center; gap: 0 var(--ft-space-3);
    margin: 0; padding: var(--ft-space-1) var(--ft-space-3);
    border: 1px solid var(--ft-line-strong); border-left: 4px solid var(--ft-accent); border-radius: var(--ft-radius);
    background: var(--ft-surface); box-shadow: var(--ft-shadow);
  }
  .upc-live__label { grid-area: label; align-self: end; color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 650; line-height: 1.3; }
  .upc-live__text { grid-area: text; align-self: start; min-width: 0; color: var(--ft-ink); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
  .upc-live.is-waiting { border-left-color: var(--ft-line-strong); }
  .upc-live.is-waiting .upc-live__text { color: var(--ft-ink-2); font-size: var(--ft-text-sm); font-weight: 500; }
  .upc-live__link { grid-area: link; display: inline-flex; align-items: center; min-height: var(--ft-target); color: var(--ft-link); font-size: var(--ft-text-sm); font-weight: 600; }
  .upc-live__link:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; border-radius: var(--ft-radius-s); }
  .upc-live.is-flash { animation: upc-flash 1.2s ease-out 1; }
}
@keyframes upc-flash { 0%, 35% { background: var(--ft-accent-soft); } 100% { background: var(--ft-surface); } }

/* Formulas and examples ---------------------------------------------------------------------- */
.upc-library__body { display: grid; gap: var(--ft-space-4); }
.upc-examples { display: grid; gap: var(--ft-space-2); }
.upc-examples__label { margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); font-weight: 650; }
.upc-lib { display: grid; gap: var(--ft-space-3); max-height: 21rem; padding: var(--ft-space-1) var(--ft-space-1) var(--ft-space-1) 0; overflow: auto; }
.upc-lib__title { margin: 0 0 var(--ft-space-1); color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 650; }
.upc-lib__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--ft-space-2); margin: 0; padding: 0; list-style: none; }
.upc-lib__item { display: grid; gap: 2px; width: 100%; min-height: var(--ft-target); padding: var(--ft-space-2) var(--ft-space-3); border: 1px solid var(--ft-line-strong); border-radius: var(--ft-radius); background: var(--ft-surface); color: var(--ft-ink); font: inherit; text-align: left; cursor: pointer; }
.upc-lib__item:hover { background: var(--ft-accent-soft); }
.upc-lib__item:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; }
.upc-lib__name { font-size: var(--ft-text-sm); font-weight: 650; line-height: 1.3; }
.upc-lib__formula { color: var(--ft-ink-2); font-size: var(--ft-text-xs); overflow-wrap: anywhere; }

/* Measurement rows: stacked cards in narrow panels, one line per name from 32rem (below that the Type menu and
   the Unit box would be too narrow for "Readings: half range" and "m/s^2").
   A name is never cut. In the one-line layout a name of up to 4 characters sits in the name column; a longer one
   gets its own line above its fields (.upc-row--longname, set by the script), and when no name is short the name
   column goes (.upc-grid--nonamecol). A name longer than its line wraps, after an underscore where it can. ---- */
.upc-vars { container: upcvars / inline-size; display: grid; gap: var(--ft-space-2); min-width: 0; }
.upc-grid { display: grid; min-width: 0; }
.upc-vars__head { display: none; }
.upc-rows { display: grid; min-width: 0; }
.upc-row {
  display: grid;
  /* the Unit box keeps 4.25rem, enough for "kg/m^3" and "m/s^2"; with 8 px gaps the Type menu beside it still shows
     "Readings: half range" at 320 px */
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(4.25rem, 1fr);
  grid-template-areas: "name name name name" "value value amount amount" "kind kind kind unit" "readings readings readings readings" "kfield kfield kfield kfield" "info info info info" "error error error error";
  gap: var(--ft-space-2);
  min-width: 0;
  padding: var(--ft-space-3) 0;
  border-top: 1px solid var(--ft-line);
}
.upc-row:first-child { border-top: 0; padding-top: var(--ft-space-1); }
.upc-row__name { grid-area: name; display: flex; align-items: center; min-width: 0; }
.upc-f-value { grid-area: value; }
.upc-f-amount { grid-area: amount; }
.upc-f-kind { grid-area: kind; }
.upc-f-unit { grid-area: unit; }
.upc-f-readings { grid-area: readings; }
.upc-f-k { grid-area: kfield; display: grid; grid-template-columns: minmax(0, auto) 6rem; align-items: center; justify-content: start; gap: var(--ft-space-3); }
.upc-f-k .ft-label { margin: 0; }
.upc-row__info { grid-area: info; margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.upc-row__error { grid-area: error; display: grid; gap: var(--ft-space-2); min-width: 0; }
.upc-row__error:not(:has(> :not([hidden]))) { display: none; }
.upc-var { display: inline-block; max-width: 100%; padding: 0.15rem 0.5rem; border-radius: var(--ft-radius-s); background: var(--ft-accent-soft); color: var(--ft-ink); font-family: var(--ft-font-mono); font-size: var(--ft-text-sm); font-weight: 700; line-height: 1.4; white-space: normal; overflow-wrap: break-word; }
.upc-row .ft-input, .upc-row .ft-select { font-size: var(--ft-text-sm); }
.upc-row .ft-select { padding-left: 0.6rem; padding-right: 2rem; }
.upc-row .ft-input[readonly] { border-color: var(--ft-line); background: var(--ft-surface-2); color: var(--ft-ink-2); }
/* the narrowest box of a row: a little less padding, so units sit in it with room to spare */
.upc-f-unit .ft-input { padding-left: var(--ft-space-2); padding-right: var(--ft-space-2); }
.upc-readings { min-height: 4.5rem; }
@container upcvars (min-width: 32rem) {
  /* Type keeps 11.125rem ("Readings: half range") and Unit 4.25rem ("kg/m^3"); value and uncertainty share the rest */
  .upc-vars__head, .upc-row { grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 0.9fr) minmax(11.125rem, 1.75fr) minmax(4.25rem, 0.65fr); column-gap: var(--ft-space-2); }
  .upc-vars__head { display: grid; padding-bottom: var(--ft-space-1); border-bottom: 1px solid var(--ft-line); color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 650; }
  .upc-row { grid-template-areas: "name value amount kind unit" ". readings readings readings readings" ". kfield kfield kfield kfield" ". info info info info" ". error error error error"; row-gap: var(--ft-space-1); padding: var(--ft-space-2) 0; }
  .upc-row--longname { grid-template-areas: "name name name name name" ". value amount kind unit" ". readings readings readings readings" ". kfield kfield kfield kfield" ". info info info info" ". error error error error"; }
  .upc-row:first-child { padding-top: var(--ft-space-2); border-top: 0; }
  .upc-row:not(.upc-row--longname) > .upc-row__name { min-height: var(--ft-target); }
  /* every name is long: no name column, the fields use the whole line */
  .upc-grid--nonamecol .upc-vars__head, .upc-grid--nonamecol .upc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(11.125rem, 1.75fr) minmax(4.25rem, 0.65fr); }
  .upc-grid--nonamecol .upc-vars__head > :first-child { display: none; }
  .upc-grid--nonamecol .upc-row { grid-template-areas: "name name name name" "value amount kind unit" "readings readings readings readings" "kfield kfield kfield kfield" "info info info info" "error error error error"; }
  .upc-f-value .upc-label, .upc-f-amount .upc-label, .upc-f-kind .upc-label, .upc-f-unit .upc-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* Correlations ------------------------------------------------------------------------------- */
.upc-corr { display: grid; gap: var(--ft-space-2); }
.upc-corr__body { display: grid; gap: var(--ft-space-3); padding: var(--ft-space-3) var(--ft-space-4); border: 1px solid var(--ft-line); border-radius: var(--ft-radius); background: var(--ft-surface-2); }
.upc-corr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--ft-space-3); }
.upc-corr__grid .ft-hint { grid-column: 1 / -1; }
.upc-corr__field .ft-label { font-family: var(--ft-font-mono); }

/* Result ----------------------------------------------------------------------------------- */
.upc-linkbox { display: grid; gap: var(--ft-space-1); margin-bottom: var(--ft-space-4); }
.upc-linknote:empty { display: none; }
.upc-linknote .ft-note { margin: 0 0 var(--ft-space-4); }
#upc-out { display: grid; gap: var(--ft-space-4); min-width: 0; }
.upc-result__value { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.upc-unit { margin-left: 0; }
.upc-result__actions { margin-top: var(--ft-space-4); }
.upc-result__bad { color: var(--ft-bad); font-weight: 600; }
.upc-result .ft-note { margin: var(--ft-space-3) 0 0; }
.upc-result .ft-note .ft-btn { margin-top: var(--ft-space-2); }
/* tiles side by side share their three rows (label, value, note), so the values line up even when one label wraps */
@supports (grid-template-rows: subgrid) {
  .upc-stats .ft-stat { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; }
}
.upc-stat--pending .ft-stat__value { color: var(--ft-ink-2); }
.upc-settings { align-items: start; }
.upc-settings .ft-field { align-content: start; }
.upc-compare__body { display: grid; gap: var(--ft-space-3); }
.upc-compare__out { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-sm); }
.upc-method .ft-segmented__option span { white-space: normal; text-align: center; }
@media (max-width: 40rem) {
  /* the two methods one above the other, full width */
  .upc-method .ft-segmented__options { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .upc-method .ft-segmented__option span { width: 100%; }
}

/* Uncertainty budget ------------------------------------------------------------------------ */
.upc-budget { container: upcbudget / inline-size; display: grid; gap: var(--ft-space-3); min-width: 0; align-content: start; }
.upc-budget:empty { display: none; }
.upc-lead { margin: 0; padding: var(--ft-space-3) var(--ft-space-4); border-left: 3px solid var(--ft-accent); border-radius: 0 var(--ft-radius) var(--ft-radius) 0; background: var(--ft-accent-soft); color: var(--ft-ink); font-weight: 600; line-height: 1.45; }
.upc-dof { margin: 0; color: var(--ft-ink); font-size: var(--ft-text-sm); }
.upc-table th, .upc-table td { white-space: nowrap; vertical-align: middle; }
/* Column heads wrap between words before the table needs to scroll. A cell that holds a long name or unit (.upc-brk,
   set by the script) may also break inside it. Numbers stay in one piece. */
.upc-table thead th { font-size: var(--ft-text-xs); white-space: normal; }
.upc-table .upc-brk, .upc-table .ft-num.upc-brk { white-space: normal; overflow-wrap: anywhere; }
.upc-nb { white-space: nowrap; }
.upc-brk .upc-nb { white-space: normal; }
.upc-table tfoot th, .upc-table tfoot td { border-top: 1px solid var(--ft-line-strong); border-bottom: 0; font-weight: 650; }
.upc-cell2 { display: block; margin-top: 2px; color: var(--ft-ink-2); font-size: var(--ft-text-xs); font-weight: 400; }
.upc-table tbody th .upc-cell2 { font-variant-numeric: tabular-nums; }
.upc-fold { display: none; }
.upc-share { min-width: 6.5rem; }
.upc-bar { display: inline-block; width: 2.75rem; height: 0.5rem; margin-right: var(--ft-space-2); overflow: hidden; border-radius: 999px; background: var(--ft-surface-2); box-shadow: inset 0 0 0 1px var(--ft-line); vertical-align: middle; }
.upc-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--ft-accent); }
.upc-share__text { font-variant-numeric: tabular-nums; }
.upc-corr-row th, .upc-corr-row td { color: var(--ft-ink-2); }
.upc-budget__hint { margin: 0; }
/* narrow panels (phones): u and c move under the input's name, headers may wrap, so the table fits without scrolling */
@container upcbudget (max-width: 31rem) {
  .upc-col-u, .upc-col-c { display: none; }
  .upc-fold { display: block; }
  .upc-table thead th, .upc-table tbody th { white-space: normal; }
}
@container upcbudget (max-width: 24rem) {
  .upc-bar { display: none; }
  .upc-share { min-width: 0; }
  .upc-table.ft-table--compact th, .upc-table.ft-table--compact td { padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* Steps, Monte Carlo and What if? tabs ------------------------------------------------------ */
@media (max-width: 40rem) {
  .upc-more .ft-tab { padding: 0 var(--ft-space-3); }
  .upc-tab__long { display: none; }
}
/* the narrowest phones: the three tabs still share one row */
@media (max-width: 22.5rem) { .upc-more .ft-tabs__list { gap: 2px; } .upc-more .ft-tab { padding: 0 var(--ft-space-2); font-size: var(--ft-text-sm); } }
.ft-example + .upc-prose { margin-top: var(--ft-space-5); }
.upc-tabhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ft-space-3) var(--ft-space-5); margin-bottom: var(--ft-space-4); }
.upc-tabhead__text { flex: 1 1 20rem; max-width: var(--ft-measure); margin: 0; color: var(--ft-ink-2); }
.upc-steps__hint { margin: 0 0 var(--ft-space-3); }
.upc-stepsbox { display: grid; align-content: start; min-width: 0; }
.upc-steps { counter-reset: upc-step; display: grid; gap: var(--ft-space-5); margin: 0; padding: 0; list-style: none; }
.upc-steps:empty { display: none; }
.upc-step { counter-increment: upc-step; position: relative; min-width: 0; padding-left: 2.75rem; }
.upc-step::before { content: counter(upc-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--ft-accent-soft); color: var(--ft-ink); font-size: var(--ft-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.upc-step__title { margin: 0.25rem 0 0; color: var(--ft-ink); font-size: var(--ft-text-md); font-weight: 650; }
.upc-step__lines.ft-formula { margin: var(--ft-space-2) 0 0; font-size: var(--ft-text-sm); overflow-wrap: anywhere; }
.upc-step__note { max-width: var(--ft-measure); margin: var(--ft-space-2) 0 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); }
@media (max-width: 40rem) { .upc-step { padding-left: 2.25rem; } .upc-step::before { width: 1.625rem; height: 1.625rem; } }
.upc-printonly { display: none; }
.upc-mc { display: grid; gap: var(--ft-space-5); align-items: start; }
.upc-mc__text { display: grid; gap: var(--ft-space-3); min-width: 0; }
.upc-mc__note:empty { display: none; }
.upc-mc__verdict .ft-note { margin: 0; }
.upc-mc__table td { white-space: nowrap; }
.upc-mc__table td.ft-num.upc-interval { white-space: normal; }
/* words in the two tables stay whole ("Standard uncertainty", never "Stan/dard"); only a unit may break inside */
.upc-mc__table th, .upc-mc__table td, .upc-hist th, .upc-hist td { overflow-wrap: normal; }
.upc-mc__table .upc-cell2 { overflow-wrap: anywhere; }
/* phones: headers and cells may wrap between words, so the two small tables fit without sideways scrolling */
@media (max-width: 40rem) {
  .upc-mc__table thead th, .upc-mc__table tbody th, .upc-mc__table td, .upc-hist thead th, .upc-hist tbody td.ft-num:first-child { white-space: normal; }
  .upc-mc__table.ft-table--compact th, .upc-mc__table.ft-table--compact td { padding-left: 0.4rem; padding-right: 0.4rem; }
}
.upc-mc__chart { --ft-chart-ratio: 5 / 3; --ft-chart-ratio-narrow: 5 / 3; min-width: 0; }
.upc-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ft-ink-2); font-size: var(--ft-text-sm); }
.upc-swatch--normal { background: repeating-linear-gradient(90deg, var(--ft-plot-2) 0 4px, transparent 4px 7px); }
.upc-mc__details { margin-top: var(--ft-space-5); }
.upc-hist { width: auto; min-width: min(100%, 22rem); }
.upc-whatif { display: grid; gap: var(--ft-space-5); align-items: start; }
.upc-whatif__value { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.upc-sliders { display: grid; gap: var(--ft-space-4); min-width: 0; }
.upc-slider .ft-label { font-family: var(--ft-font-mono); }
.upc-slider__note { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .upc-mc, .upc-whatif { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Print: the result, budget and steps without controls ------------------------------------- */
@media print {
  .upc-live, .upc-library, .upc-corr > .ft-switch, .upc-linkbox, .upc-linknote, .upc-sliders, .upc-method, .upc-draws, .upc-settings .ft-hint, .upc-compare:not([open]), .upc-steps__hint, #upc-panel-whatif { display: none !important; }
  .upc-printonly { display: block; margin: var(--ft-space-5) 0 var(--ft-space-3); font-size: var(--ft-text-lg); }
  .upc-step { break-inside: avoid; }
  .upc-mc__chart:not(:has(svg)) { display: none !important; }
  /* On screen the budget is a grid. Printed, a grid that met a page break laid its notes over the table rows, so on
     paper it is a plain block: the table moves to the next page whole, with its heading and lead line. */
  .upc-budget { display: block; }
  .upc-budget > * + * { margin-top: var(--ft-space-3); }
  .upc-budget .ft-tablewrap, .upc-lead { break-inside: avoid; }
  .upc-subtitle, .upc-lead { break-after: avoid; }
  /* the status line speaks for the screen ("Loaded …", "Undo brings back …"); the printed result is in the card */
  #tool-status { display: none !important; }
}