@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); }
:root { --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --steel: #637A80; --steel-strong: #263F46; --navy: var(--steel); --teal: #2ABC96; --canvas: #FFFCF5; --surface: #FFF9EE; --surface-alt: #F9F1E3; --action-primary: #FE9B76; --action-primary-hover: #FFAF94; --text: #183247; --muted: #586D7E; --border: #D6E1E8; --control-border: #8D9BAA; --green: #17633F; --yellow: #76500D; --orange: #8A3B0D; --red: #8F2028; --neutral: #4D5E6B; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --radius: 16px; --shadow: 0 2px 8px rgb(76 111 119 / 8%); font-family: var(--font-body); color: var(--text); background: var(--canvas); }
.site-header p, .vision-teaser, .vision-teaser small, .header-preference-button, .header-preference-toggle { color: white; }
* { box-sizing: border-box; } body { margin: 0; line-height: 1.5; } button, input, select { font: inherit; } button, a, input, select { min-height: 44px; } button, a, input, select, summary, [tabindex] { scroll-margin-block: calc(80px + env(safe-area-inset-bottom)); } .shell { width: min(100% - 32px, 1280px); margin-inline: auto; } .site-header { color: white; background: var(--navy); padding: 16px 0; } .site-header .shell { display: flex; gap: var(--gap-4); align-items: center; } .site-header__copy { min-width: 0; } .site-header h1, .site-header p { margin: 0; } .site-header h1 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; } .site-header p { color: #eaf1f5; font-size: .875rem; } .brand { font-weight: 800; letter-spacing: .08em; } .vision-teaser { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--gap-2); min-height: 44px; margin-left: auto; padding: 6px 10px; color: #eaf1f5; background: rgb(255 255 255 / 8%); border: 1px solid rgb(234 241 245 / 48%); border-radius: 12px; } .vision-teaser svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vision-teaser__copy { display: grid; line-height: 1.15; } .vision-teaser strong { color: white; font-size: .8125rem; } .vision-teaser small { color: #eaf1f5; font-size: .75rem; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 5; padding: 8px 12px; color: white; background: var(--navy); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* Global context bar - two-column layout (patient + location) */
.context-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-2); margin-top: 16px; }
.context-bar .context-console { min-width: 0; margin-top: 0; width: 100%; }
@media (min-width: 768px) {
  .context-bar { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}
/* Location is secondary context, not co-equal with the patient bar */
#location-console .console-trigger { min-height: 44px; padding: 6px 12px; color: var(--muted); background: transparent; border-color: var(--border); font-size: .8125rem; box-shadow: none; }
#location-console .console-trigger:hover { color: var(--navy); border-color: var(--control-border); }
#location-console .console-chevron { flex: 0 0 18px; }

/* Global context consoles (patient + location) - single-line summary with expandable details */
.context-console { margin-top: 16px; }
.console-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 16px; color: var(--navy); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; text-align: left; }
.case-summary-group { display: flex; align-items: center; gap: var(--gap-2); min-width: 0; }
.teaching-fixture-badge { flex: 0 0 auto; padding: 2px 8px; color: var(--yellow); background: #fff8e8; border: 1px solid currentColor; border-radius: 12px; font-size: .75rem; font-weight: 700; } .adult-patient-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap-2); min-height: 44px; padding: 4px 8px 4px 4px; color: var(--muted); font-size: .8125rem; font-weight: 600; cursor: pointer; } .adult-patient-toggle input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
.console-trigger:hover { border-color: var(--navy); }
.console-trigger:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.console-trigger[aria-expanded="true"] { border-color: var(--navy); }
.console-chevron { flex: 0 0 24px; transition: transform 180ms ease; }
.console-trigger[aria-expanded="true"] .console-chevron { transform: rotate(180deg); }
.console-details { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 200ms ease, opacity 160ms ease; }
.console-details > * { min-height: 0; overflow: hidden; }
.console-details.is-open { grid-template-rows: 1fr; opacity: 1; }
.console-details[hidden] { display: none; }
.console-details[inert] { pointer-events: none; }
.console-details .location-fields,
.console-details .case-fields { margin-top: 12px; display: grid; gap: var(--gap-3); }

/* Patient trigger row: patient menu trigger + add + edit pencil */
.case-trigger-row { display: flex; align-items: center; gap: var(--gap-2); }
.patient-menu-host { position: relative; flex: 1 1 auto; min-width: 0; }
.patient-menu-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); width: 100%; min-height: 44px; padding: 10px 16px; color: var(--navy); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); font-weight: 700; font-size: 1rem; cursor: pointer; text-align: left; }
.patient-menu-trigger:hover { border-color: var(--navy); }
.patient-menu-trigger:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.patient-menu-trigger[aria-expanded="true"] { border-color: var(--navy); }
.patient-menu-trigger[aria-expanded="true"] .console-chevron { transform: rotate(180deg); }
#patient-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-menu { position: absolute; z-index: 10; inset-inline: 0; top: calc(100% + 4px); display: grid; gap: 2px; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; }
.patient-option { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--text); background: transparent; border: 0; border-radius: 12px; cursor: pointer; text-align: left; }
.patient-option:hover { background: var(--surface-alt); }
.patient-option:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.patient-option[aria-selected="true"] { background: var(--surface-alt); color: var(--navy); font-weight: 600; }
.patient-row { display: flex; align-items: center; gap: var(--gap-1); }
.patient-row .patient-option { flex: 1 1 auto; min-width: 0; }
.patient-delete { flex: 0 0 44px; inline-size: 44px; block-size: 44px; min-height: 44px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.patient-delete:hover { color: var(--red); border-color: var(--red); background: #fff4f4; }
.patient-delete:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.patient-dialog { width: min(calc(100% - 32px), 30rem); padding: 24px; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgb(11 59 96 / 30%); }
.patient-dialog::backdrop { background: rgb(11 59 96 / 55%); }
.patient-dialog h2 { margin: 0; font-size: 1.125rem; }
.patient-dialog__list { display: grid; gap: 2px; max-height: min(60vh, 420px); overflow-y: auto; margin-top: 12px; }
.patient-dialog .action-row { margin-top: 16px; }
.console-add, .console-edit-pencil { flex: 0 0 44px; inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: var(--navy); background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; font-size: 1.25rem; line-height: 1; font-weight: 600; }
.console-add:hover, .console-edit-pencil:hover { border-color: var(--teal); color: var(--teal); }
.console-add:focus-visible, .console-edit-pencil:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.console-edit-pencil[aria-expanded="true"] { border-color: var(--navy); background: var(--surface-alt); }
.case-summary-group { margin: 8px 0 0; display: flex; align-items: center; gap: var(--gap-2); min-width: 0; color: var(--muted); font-size: .875rem; }
.new-patient-form { display: grid; gap: var(--gap-2); margin-top: 8px; padding: 10px; background: var(--surface-alt); border: 1px solid var(--control-border); border-radius: 12px; }
.new-patient-form label { font-size: .75rem; color: var(--muted); }
.new-patient-form input { text-transform: uppercase; }

/* Compact attributes row - 4 columns responsive */
.case-attributes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-2); margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.case-attributes .attr-field { display: grid; gap: var(--gap-1); min-width: 0; }
.case-attributes label { font-size: .75rem; font-weight: 600; color: var(--muted); }
.case-attributes input { width: 100%; padding: 8px 10px; color: var(--text); background: white; border: 1px solid var(--control-border); border-radius: 12px; font-size: .875rem; text-align: center; }
.case-attributes input:hover { border-color: var(--navy); }
.case-attributes input:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

@media (max-width: 767px) {
  .case-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .case-attributes { grid-template-columns: 1fr; }
}

/* Dropdown menu for cases with delete buttons */
.case-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 10; max-height: 280px; overflow-y: auto; }
.case-dropdown[hidden] { display: none; }
.case-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); padding: 10px 12px; cursor: pointer; }
.case-dropdown-item:hover { background: var(--surface-alt); }
.case-dropdown-item:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.case-dropdown-item.active { background: var(--surface-alt); color: var(--navy); font-weight: 600; }
.case-dropdown-item .case-label { flex: 1; min-width: 0; text-align: left; }
.case-dropdown-item .case-meta { font-size: .75rem; color: var(--muted); white-space: nowrap; margin-left: 8px; }
.case-dropdown-delete { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.case-dropdown-delete:hover { color: var(--red); border-color: var(--red); background: #fff4f4; }
.case-dropdown-delete:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.case-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.case-dropdown-new { padding: 10px 12px; color: var(--teal); font-weight: 600; cursor: pointer; }
.case-dropdown-new:hover { background: var(--surface-alt); }
.case-strip, .calculator-panel { margin-top: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .print-summary, .print-stale-warning { display: none; } h2, h3, h4 { color: var(--navy); text-wrap: balance; } h3 { font-size: 1rem; line-height: 1.4; } h4 { font-size: .875rem; line-height: 1.4; } .case-strip h2, .calculator-panel h2 { margin-top: 0; font-size: 1.125rem; } .case-fields, .field-grid { display: grid; gap: var(--gap-3); } .field-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } label { display: grid; gap: var(--gap-1); font-weight: 650; font-size: .875rem; }
.gas-table { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: var(--gap-4); margin-bottom: 8px; }
.gas-table label { flex: 0 0 auto; width: 140px; }
.gas-row { display: contents; } .input-unit span { max-width: fit-content; }
/* Any two-column field row can pair a short label with one that wraps (e.g. "Talla" next to
   "Etiqueta de la referencia externa"). Reserving a shared minimum label-text height keeps every
   input/select in a row starting at the same Y regardless of how many lines its own label needs. */
.gas-row label, .field-grid label, .case-fields > label { grid-template-rows: minmax(2.6rem, auto) auto; }
input, select { width: 100%; padding: 8px 10px; color: var(--text); background: white; border: 1px solid var(--control-border); border-radius: 12px; font-size: 1rem; } input:hover, select:hover { border-color: var(--navy); } input:disabled, select:disabled, button:disabled { opacity: .55; cursor: not-allowed; } small, .privacy-notice { color: var(--muted); font-weight: 400; } .input-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; max-width: 130px; justify-self: start; } .input-unit input { border-radius: 12px 0 0 12px; } .input-unit span { display: grid; place-items: center; padding: 0 8px; color: var(--navy); background: var(--surface-alt); border: 1px solid var(--control-border); border-left: 0; border-radius: 0 12px 12px 0; font-size: .75rem; } .checkbox-field { display: flex; align-items: center; gap: var(--gap-2); } .checkbox-field--stacked { align-items: start; } .checkbox-field--stacked span { flex: 1 1 auto; min-width: 0; } .checkbox-field input { flex: 0 0 auto; width: 20px; }.age-fieldset { display: grid; gap: var(--gap-1); min-width: 0; margin: 0; padding: 0; border: 0; } .age-fieldset legend { padding: 0; font-weight: 650; font-size: .875rem; } .age-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-2); } .age-inputs input { max-width: 90px; text-align: center; }
/* Keep age fieldset aligned with sibling weight/example fields */
.case-fields > .age-fieldset { align-self: start; }
.case-fields > label { display: grid; gap: var(--gap-1); }
.location-block { grid-column: 1 / -1; display: grid; gap: var(--gap-3); padding: 12px; border: 1px solid var(--control-border); border-radius: 12px; } .location-block h3, .location-block p { margin: 0; } .location-block details { display: grid; gap: var(--gap-3); } .mechanics-notice { padding: 10px; background: var(--surface-alt); border: 1px solid var(--control-border); border-radius: 12px; } .mechanics-notice summary { display: list-item; cursor: pointer; font-weight: 650; min-height: 44px; padding-block: 12px; } .mechanics-notice p { margin: 8px 0 4px; } .mechanics-notice ul { margin: 0; padding-left: 20px; display: grid; gap: var(--gap-1); }
.input-summary { margin-bottom: 12px; } .input-summary summary { min-height: 44px; padding: 8px 12px; color: var(--navy); background: var(--surface-alt); border: 1px solid var(--control-border); border-radius: 12px; font-weight: 650; font-size: .875rem; cursor: pointer; overflow-wrap: anywhere; } .input-summary[open] summary { border-radius: 12px 12px 0 0; margin-bottom: 12px; } .input-summary[open] summary { color: var(--muted); font-weight: 600; }
.tab-bar { display: flex; gap: var(--gap-1); overflow-x: auto; margin-top: 16px; padding-bottom: 4px; } .tab-bar button { flex: 0 0 auto; padding: 8px 12px; color: var(--navy); background: transparent; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .tab-bar button[aria-selected="true"], .tab-bar button:active { color: white; background: var(--navy); border-color: var(--navy); } .tab-bar button:hover { background: var(--surface-alt); } .tab-bar button[aria-selected="true"]:hover { color: white; background: #062D4B; }
.error-summary { margin-top: 16px; padding: 12px; color: #66242a; background: #fff4f4; border: 1px solid var(--red); border-radius: 12px; } .error-summary p { margin: 4px 0 0; } .field-error { min-height: 1.25em; color: var(--red); } [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); } #snapshot-list { display: grid; gap: var(--gap-2); padding-left: 20px; } #snapshot-list li { padding: 8px; border-bottom: 1px solid var(--border); } .button--small { min-height: 44px; margin-left: 8px; padding: 8px; color: var(--red); background: white; border-color: var(--red); } .result-region, .trend-region, .trend-table-region { min-width: 0; min-height: 72px; margin-top: 16px; padding: 12px; background: var(--surface-alt); border: 1px dashed var(--border); border-radius: 12px; } .result-region { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: stretch; gap: var(--gap-3); } .trend-table-region { max-width: 100%; overflow-x: auto; } .trend--empty { display: grid; justify-items: center; gap: var(--gap-2); padding-block: 24px; } .trend--empty svg { width: 32px; height: 32px; color: var(--muted); } .trend-empty-message { margin: 0; color: var(--text); font-weight: 700; } .trend--empty figcaption { color: var(--muted); font-size: .875rem; } .storage-warning { margin-block: 12px; padding: 12px; color: var(--orange); background: #FFF4EC; border: 1px solid currentColor; border-radius: 12px; } .storage-warning p { margin-top: 0; }
.height-echo { margin: 0 0 12px; color: var(--muted); font-size: .8125rem; }
.quickedit-bmi-echo { display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--gap-1); margin: 0; color: var(--text); font-weight: 650; font-size: .875rem; }
.quickedit-bmi-echo [data-bmi-value] { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.obesity-note { margin-top: 12px; padding: 10px 12px; color: var(--orange); background: #FFF4EC; border: 1px solid currentColor; border-radius: 12px; font-size: .875rem; } .calculate-action { display: flex; flex-direction: column; align-items: end; gap: var(--gap-2); margin-top: 16px; padding: var(--gap-3) 0; border-top: 1px solid var(--border); background: var(--surface); }
.calculate-action .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-shadow: var(--shadow); transition: opacity 180ms ease; } body[data-results-current="true"] .calculate-action .calculate-action__submit { opacity: 0; pointer-events: none; } .button { padding: 8px 16px; font-weight: 700; border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .button--primary { color: #062d25; background: var(--teal); } .button--primary:hover { background: #1d9f7d; } .button--primary:active { transform: translateY(1px); } .button--secondary { color: var(--navy); background: white; border-color: var(--navy); } .button--secondary:hover { color: white; background: var(--navy); } .button--secondary:active, .button--danger:active { transform: translateY(1px); } .button--danger { color: white; background: var(--red); } .button--danger:hover { background: #6E1920; } .action-row { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.calculate-action__buttons { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--gap-2); }
.save-id-form { display: grid; gap: var(--gap-2); width: min(100%, 320px); padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); pointer-events: auto; }
.save-id-error { margin: 0; max-width: min(100%, 320px); padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.save-id-feedback { margin: 0; max-width: min(100%, 320px); color: var(--navy); font-size: .875rem; font-weight: 600; }
.save-id-feedback:not(:empty) { padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.gauge { display: block; width: 100%; max-width: 140px; height: auto; margin-inline: auto; } .gauge__track { fill: none; stroke: var(--border); stroke-width: 18; } .gauge__band { fill: none; stroke-width: 14; } .gauge__band--green { stroke: var(--green); } .gauge__band--yellow { stroke: var(--yellow); } .gauge__band--orange { stroke: var(--orange); } .gauge__band--red { stroke: var(--red); } .gauge__band--neutral { stroke: var(--neutral); } .gauge__pointer { stroke: var(--navy); stroke-width: 4; stroke-linecap: round; } .gauge__hub { fill: var(--navy); } .gauge__value { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; fill: var(--text); } .gauge__unit { font-size: .75rem; fill: var(--muted); } .gauge__status { font-size: .75rem; fill: var(--muted); font-weight: 700; } path.trend__line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10000; stroke-dashoffset: 10000; animation: trend-line-draw 900ms cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes trend-line-draw { to { stroke-dashoffset: 0; } }
@keyframes trend-point-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.trend__point { fill: var(--navy); stroke: white; stroke-width: 3; transform-origin: center; transform-box: fill-box; opacity: 0; animation: trend-point-in 420ms cubic-bezier(.16, 1, .3, 1) 500ms forwards; } .trend__point--discontinuity { fill: var(--orange); stroke-width: 4; } path.trend__line:nth-of-type(2) { animation-delay: 90ms; } path.trend__line:nth-of-type(3) { animation-delay: 180ms; } path.trend__line:nth-of-type(4) { animation-delay: 270ms; } path.trend__line:nth-of-type(5) { animation-delay: 360ms; } .trend-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .trend-table th, .trend-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); } .trend-table caption { padding: 8px; font-weight: 700; text-align: left; } .trend--multi .trend__line { stroke-width: 1.25; } .trend--multi .trend__point { r: 3.5; stroke-width: 2; } .trend-legend { display: flex; flex-wrap: wrap; gap: var(--gap-2) var(--gap-4); margin: 8px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); } .trend-legend li { display: flex; align-items: center; gap: var(--gap-2); } .trend-legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; } .trend-variable-fieldset { display: flex; flex-wrap: wrap; gap: var(--gap-1) var(--gap-4); border: 0; padding: 0; margin: 0; } .trend-variable-fieldset legend { font-weight: 650; font-size: .875rem; padding: 0 0 4px; width: 100%; } .trend-variable-group { flex: 1 1 220px; min-width: 180px; } .trend-variable-group h4 { margin: 8px 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); } .trend-variable-option { display: flex; align-items: flex-start; gap: var(--gap-2); min-height: 44px; padding: 6px 0; font-size: .875rem; } .trend-variable-option input[type="checkbox"] { margin-top: 3px; } .trend-color-teal { stroke: var(--teal); fill: var(--teal); background: var(--teal); } .trend-color-navy { stroke: var(--navy); fill: var(--navy); background: var(--navy); } .trend-color-orange { stroke: var(--orange); fill: var(--orange); background: var(--orange); } .trend-color-red { stroke: var(--red); fill: var(--red); background: var(--red); } .trend-color-green { stroke: var(--green); fill: var(--green); background: var(--green); } .trend-color-yellow { stroke: var(--yellow); fill: var(--yellow); background: var(--yellow); } .trend-color-neutral { stroke: var(--neutral); fill: var(--neutral); background: var(--neutral); }
.state, .validity { display: inline-block; margin: 4px 4px 0 0; padding: 3px 8px; border: 1px solid currentColor; border-radius: 12px; font-size: .75rem; font-weight: 700; } .state--green, .validity--valid { color: var(--green); background: #eefaf4; } .state--yellow, .validity--estimated { color: #76500d; background: #fff8e8; } .state--orange, .validity--conditioned { color: var(--orange); background: #fff3ec; } .state--red { color: var(--red); background: #fff4f4; } .state--neutral, .validity--unavailable { color: var(--neutral); background: #f4f7f9; } .result-card { display: flex; flex-direction: column; min-width: 0; min-height: 185px; padding: 16px; background: white; border: 1px solid var(--border); border-radius: var(--radius); }
.result-card__title-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--gap-3); }
.result-card__title-row h3 { margin: 0; }
.result-card__top { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); align-items: center; gap: var(--gap-3); }
.result-card__top header { min-width: 0; }
.result-card__gauge { min-width: 0; }
.result-card__gauge .gauge { max-width: 120px; margin-inline: 0; } .result-card__value { margin: 0; color: var(--navy); font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; } .result-card__value span { font-size: .875rem; } details { margin-top: 12px; } summary { min-height: 44px; padding-top: 10px; color: var(--navy); font-weight: 700; cursor: pointer; } dl div { padding-block: 8px; border-top: 1px solid var(--border); } dt { font-weight: 700; } dd { margin: 2px 0 0; } .teaching-section { margin-block: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); } .teaching-section--caution { border-style: dashed; } .teaching-links { display: flex; flex-wrap: wrap; gap: var(--gap-2); } .teaching-links a { display: inline-block; padding: 3px 10px; color: var(--navy); background: var(--surface-alt); border: 1px solid var(--control-border); border-radius: 12px; font-size: .8125rem; font-weight: 700; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; } .teaching-links a:hover { color: white; background: var(--navy); } .glossary article { padding: 12px 0; border-top: 1px solid var(--border); } .glossary article svg { display: block; width: 100%; max-width: 360px; height: auto; margin-block: 8px; color: var(--navy); font-size: .8125rem; }
.result-teaching { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .formula-block { min-width: 0; padding-block: 8px; } .formula-block h4 { margin: 12px 0 6px; font-size: .875rem; } .formula-expression { min-width: 0; max-width: 100%; padding: 8px; overflow-wrap: anywhere; background: var(--surface-alt); border-radius: 12px; font-variant-numeric: tabular-nums; } .formula-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-1); min-width: 0; } .formula-fraction { display: inline-grid; grid-template-rows: auto auto; align-items: center; min-width: 3rem; max-width: 100%; vertical-align: middle; } .formula-fraction__numerator, .formula-fraction__denominator { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-1); padding-inline: 4px; } .formula-fraction__numerator { padding-bottom: 3px; border-bottom: 1px solid currentColor; } .formula-fraction__denominator { padding-top: 3px; } .formula-symbol { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; padding: 4px 8px; color: var(--navy); background: white; border: 1px solid var(--control-border); border-radius: 12px; font: inherit; font-weight: 750; cursor: pointer; } .formula-symbol:hover, .formula-symbol[aria-pressed="true"] { color: white; background: var(--navy); } .formula-symbol sub { font-size: .7em; } .formula-operator, .formula-text, .formula-value { display: inline-flex; align-items: baseline; min-height: 28px; padding-inline: 2px; } .formula-value__unit { margin-inline-start: 3px; color: var(--muted); font-size: .75rem; white-space: nowrap; } .formula-value--missing { color: var(--muted); font-size: .875rem; } .formula-definition { min-width: 0; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; } .variable-definition h5 { margin: 0; color: var(--navy); font-size: 1rem; } .variable-definition p { max-width: 70ch; } .variable-definition dl { display: grid; gap: var(--gap-1); } .concept-diagram { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr); min-width: 0; align-items: center; gap: var(--gap-3); margin: 12px 0; color: var(--navy); } .concept-diagram svg { width: 100%; height: auto; } .concept-diagram figcaption { color: var(--muted); font-size: .75rem; } .teaching-nested { padding-block: 4px; border-top: 1px solid var(--border); } .teaching-nested ul { padding-inline-start: 20px; } .source-scope { color: var(--muted); font-size: .875rem; }
.mobile-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-around; gap: var(--gap-1); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--border); } .mobile-nav a { display: grid; grid-template-rows: 20px auto; place-items: center; flex: 1 1 0; min-width: 0; padding: 2px 0; color: var(--navy); border-radius: 8px; font-size: .75rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; } .mobile-nav a[aria-current="page"] { background: var(--surface-alt); } .mobile-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trend-variable-fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3) var(--gap-4);
  margin-block: 12px 8px;
  padding: 0;
}
.trend-variable-fieldset > legend {
  grid-column: 1 / -1;
  padding-bottom: var(--gap-1);
}
.trend-variable-group {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}
.trend-variable-group h4 {
  margin: 0 0 var(--gap-1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.trend-variable-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-2);
  min-height: 40px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.trend-variable-option:hover { background: var(--surface-alt); }
.trend-variable-option:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.trend-variable-option input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--teal);
}
.trend-region {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.trend {
  display: grid;
  gap: var(--gap-3);
  margin: 0;
  padding: var(--gap-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.trend svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.trend__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-2); color: var(--navy); font-size: .875rem; font-weight: 750; }
.trend__heading span:last-child { color: var(--muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend__gridline { stroke: var(--border); stroke-width: 1; }
.trend__axis { stroke: var(--control-border); stroke-width: 1.25; }
.trend__x-label { fill: var(--muted); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
path.trend__line { stroke-width: 2.25; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.trend__point { opacity: 1; animation: none; transition: r 160ms ease-out, stroke-width 160ms ease-out; }
.trend__point:hover, .trend__point:focus { r: 6; stroke-width: 4.5; }
.trend__point:focus { outline: none; }
.trend--multi .trend__line { stroke-width: 1.25; }
.trend--multi .trend__point { stroke-width: 2.5; }
.trend__note { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.trend-legend { order: 1; gap: var(--gap-2) var(--gap-3); margin: 0; }
.trend-legend li { color: var(--text); }
.trend-legend__swatch { inline-size: 12px; block-size: 12px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.trend-variable-fieldset { align-items: start; margin-block: var(--gap-3) var(--gap-2); }
.trend-variable-group { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.trend-variable-group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); min-height: 44px; margin: 0; padding: 8px 12px; color: var(--navy); background: var(--surface-alt); font-size: .8125rem; font-weight: 750; list-style: none; }
.trend-variable-group > summary::-webkit-details-marker { display: none; }
.trend-variable-group > summary::after { content: '⌄'; order: -1; inline-size: 18px; color: var(--muted); font-size: 1rem; line-height: 1; text-align: center; transition: transform 160ms ease-out; }
.trend-variable-group[open] > summary { border-bottom: 1px solid var(--border); }
.trend-variable-group[open] > summary::after { transform: rotate(180deg); }
.trend-variable-count { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-variable-options { display: grid; gap: 2px; padding: var(--gap-1) var(--gap-2) var(--gap-2); }
.trend-variable-option { padding: 8px; border-radius: 8px; }
.trend-variable-option:has(input:checked) { color: var(--navy); background: #EEF8F5; }
.trend-color-teal, path.trend__line.trend-color-teal { stroke: var(--teal); fill: var(--teal); background: var(--teal); }
.trend-color-navy, path.trend__line.trend-color-navy { stroke: var(--navy); fill: var(--navy); background: var(--navy); }
.trend-color-orange, path.trend__line.trend-color-orange { stroke: var(--orange); fill: var(--orange); background: var(--orange); }
.trend-color-red, path.trend__line.trend-color-red { stroke: var(--red); fill: var(--red); background: var(--red); }
.trend-color-green, path.trend__line.trend-color-green { stroke: var(--green); fill: var(--green); background: var(--green); }
.trend-color-purple, path.trend__line.trend-color-purple { stroke: #6B4CA5; fill: #6B4CA5; background: #6B4CA5; }
.trend-color-magenta, path.trend__line.trend-color-magenta { stroke: #A1266B; fill: #A1266B; background: #A1266B; }
.trend-color-blue, path.trend__line.trend-color-blue { stroke: #2467A5; fill: #2467A5; background: #2467A5; }
.trend-color-brown, path.trend__line.trend-color-brown { stroke: #855638; fill: #855638; background: #855638; }
.trend-color-olive, path.trend__line.trend-color-olive { stroke: #677600; fill: #677600; background: #677600; }
.trend-color-slate, path.trend__line.trend-color-slate { stroke: #405C72; fill: #405C72; background: #405C72; }
.trend-color-indigo, path.trend__line.trend-color-indigo { stroke: #434D9F; fill: #434D9F; background: #434D9F; }
.trend-color-rose, path.trend__line.trend-color-rose { stroke: #B23A5C; fill: #B23A5C; background: #B23A5C; }
.trend-color-copper, path.trend__line.trend-color-copper { stroke: #9A541E; fill: #9A541E; background: #9A541E; }
.trend-color-neutral, path.trend__line.trend-color-neutral { stroke: var(--neutral); fill: var(--neutral); background: var(--neutral); }
@media (prefers-reduced-motion: reduce) {
  path.trend__line, .trend__point { animation: none; opacity: 1; transition: none; }
}
@media (min-width: 768px) {
  .trend-variable-fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .trend-variable-fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) { .case-strip { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: var(--gap-3); width: min(100%, 960px); margin-inline: auto; } .case-strip h2 { margin-bottom: 0; } .case-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; } .case-fields { grid-template-columns: minmax(12rem, 1.35fr) minmax(16rem, 1.5fr) minmax(8rem, .65fr); align-items: start; width: 100%; margin-top: 12px; } .case-fields > label, .case-fields > fieldset { align-self: start; } .case-fields > label, .case-fields > .case-field { padding-top: calc(.875rem * 1.5); } .mobile-nav { display: none; } }
@media (max-width: 767px) { body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } .case-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tab-bar { display: none; } .calculate-action .button { inline-size: fit-content; max-inline-size: 100%; } .case-fields > .age-fieldset { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-header .shell { gap: var(--gap-2); } .vision-teaser { gap: var(--gap-1); padding-inline: 8px; } .vision-teaser__label { display: none; } }
@media (max-width: 400px) { .concept-diagram { grid-template-columns: 1fr; } .concept-diagram svg { width: min(100%, 140px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .button, .formula-symbol, input, select, .tab-bar button { border: 1px solid ButtonText; } .state, .validity { border: 2px solid currentColor; } }
.case-fields > label, .case-fields > .case-field { grid-template-rows: auto auto; }
.case-field { display: grid; gap: var(--gap-1); align-self: start; min-width: 0; }
.case-field__label-row { display: flex; align-items: center; min-width: 0; min-height: 1.5rem; }
.case-field__label-row > label { display: block; margin: 0; }
.field-info-button { position: relative; inline-size: 44px; block-size: 44px; flex: 0 0 44px; margin: -10px -10px -10px 2px; padding: 0; border: 0; border-radius: 50%; color: var(--navy); background: transparent; font-size: 0; cursor: pointer; }
.field-info-button::after { content: 'i'; position: absolute; inset: 10px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: var(--surface); font: 800 .8125rem/1 system-ui, sans-serif; }
.field-info-button:hover::after { color: white; background: var(--navy); }
.field-info-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.citation-link { font-weight: 750; white-space: nowrap; }
.reference-section { margin-top: var(--gap-4); }
.reference-section h5 { margin: 0; }
.reference-list { margin: var(--gap-2) 0 0; padding-inline-start: 24px; color: var(--muted); font-size: .875rem; }
.reference-list li + li { margin-top: var(--gap-2); }
.reference-list a { color: inherit; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.reference-list a:hover { color: var(--navy); }

/* The patient bar remains one concise line on common phones. Metadata is compacted,
   never the 44 px interactive targets. */
@media (max-width: 767px) {
  .case-summary-group {
    gap: var(--gap-1);
  }

  .case-fields > .age-fieldset .age-inputs {
    column-gap: var(--gap-3);
  }

  .case-summary-trigger {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 8px 10px;
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .adult-patient-toggle {
    gap: var(--gap-1);
    padding-inline: 2px 4px;
  }

  .teaching-fixture-badge {
    padding-inline: 6px;
    font-size: .6875rem;
  }

  .case-fields {
    row-gap: var(--gap-2);
    column-gap: var(--gap-3);
  }

  .case-fields > label.case-field--sex {
    inline-size: min(100%, 150px);
    justify-self: start;
  }
}

@media (max-width: 400px) {
  .case-summary-group {
    flex-wrap: wrap;
  }

  .case-summary-trigger {
    flex-basis: 100%;
  }
}

/* Compact clinical groups use the same 16 px rhythm at every wide breakpoint.
   They wrap as intact controls on tablets, then become one scanable row on desktop. */
@media (min-width: 768px) {
  .console-details .case-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-4);
    margin-top: var(--gap-3);
  }

  .case-fields > .age-fieldset {
    flex: 0 0 190px;
  }

  .case-fields > .age-fieldset > legend {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .case-fields > .age-fieldset .age-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-fields > .age-fieldset .age-inputs > label,
  .case-fields > label {
    grid-template-rows: 24px auto;
    padding-top: 0;
  }

  .case-fields > .age-fieldset .age-inputs input {
    max-inline-size: none;
  }

  .case-fields > label.case-field--sex {
    flex: 0 0 216px;
  }

  .case-fields > label:not(.case-field--sex),
  .case-fields > .quickedit-bmi-echo {
    flex: 0 0 130px;
  }

  .case-fields > .case-field {
    flex: 0 0 130px;
    grid-template-rows: 24px auto;
    padding-top: 0;
  }

  .case-fields > .quickedit-bmi-echo {
    margin: 0;
    grid-template-rows: 24px auto;
    padding-top: 0;
  }
}

@media (min-width: 1280px) {
  .context-bar {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap-4);
  }

  .console-details .case-fields {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .console-details .case-fields:has(.quickedit-bmi-echo:not([hidden])) {
    flex-wrap: wrap;
  }
}
[data-pediatric-information="omitted"] [data-pediatric-content], [data-pediatric-information="omitted"] #glossary-age-reference { display: none !important; }
.site-header .shell { flex-wrap: wrap; }
.pediatric-information-control { display: flex; align-items: center; }
.header-preference-button, .header-preference-toggle { min-height: 44px; padding: 6px 10px; color: #eaf1f5; border: 1px solid rgb(234 241 245 / 48%); border-radius: 10px; background: rgb(255 255 255 / 8%); font-size: .75rem; font-weight: 700; }
.header-preference-button { cursor: pointer; }
.header-preference-toggle { display: flex; align-items: center; gap: var(--gap-1); cursor: pointer; }
.header-preference-toggle input { inline-size: 18px; block-size: 18px; min-height: 18px; margin: 0; accent-color: var(--teal); }
.welcome-dialog { width: min(calc(100% - 32px), 34rem); padding: 24px; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgb(11 59 96 / 30%); }
.welcome-dialog::backdrop { background: rgb(11 59 96 / 55%); }
.welcome-dialog h2 { margin: 0; }
.welcome-dialog__actions { display: grid; gap: var(--gap-2); margin-top: 20px; }
.welcome-dialog__actions .button { inline-size: 100%; text-align: left; }
@media (max-width: 767px) { .site-header .shell { align-items: flex-start; } .vision-teaser { margin-left: 0; } .pediatric-information-control { flex-basis: 100%; } }

/* Ivory, steel and coral component theme. Clinical status colors remain semantic. */
body {
  color: var(--steel-strong);
  background: var(--canvas);
  font-family: var(--font-body);
}
.shell { min-width: 0; color: inherit; }
.site-header { color: var(--surface); background: var(--steel-strong); }
.site-header p, .vision-teaser, .vision-teaser small { color: var(--surface-alt); }
.site-header h1, .site-header strong { color: var(--surface); }
.vision-teaser:focus-visible,
.header-preference-button:focus-visible,
.header-preference-toggle:focus-visible,
.header-preference-toggle:focus-within {
  outline: 3px solid var(--surface);
  outline-offset: 3px;
}
h2, h3, h4 {
  color: var(--steel-strong);
  font-family: var(--font-display);
  font-weight: 600;
}

.context-console {
  min-width: 0;
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.console-trigger, #location-console .console-trigger, .patient-menu-trigger {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  box-shadow: var(--shadow);
}
.console-trigger:hover, #location-console .console-trigger:hover, .patient-menu-trigger:hover,
.console-trigger[aria-expanded="true"], .patient-menu-trigger[aria-expanded="true"] {
  color: var(--steel-strong);
  border-color: var(--steel-strong);
}
.patient-menu {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  box-shadow: var(--shadow);
}
.case-attributes, .location-block {
  color: var(--steel-strong);
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  box-shadow: var(--shadow);
}

input, select {
  color: var(--steel-strong);
  background: var(--surface);
  border-color: var(--steel);
  font-family: var(--font-body);
}
input:hover, select:hover { border-color: var(--steel-strong); }
.input-unit span {
  color: var(--steel-strong);
  background: var(--surface-alt);
  border-color: var(--steel);
  font-family: var(--font-body);
}
.button {
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
}
.button--primary { color: var(--steel-strong); background: var(--action-primary); }
.button--primary:hover { color: var(--steel-strong); background: var(--action-primary-hover); }
.button--primary:active { color: var(--steel-strong); background: var(--action-primary-hover); }
.button--secondary {
  color: var(--steel-strong);
  background: var(--surface);
  border-color: var(--steel);
}
.button--secondary:hover { color: var(--surface); background: var(--steel-strong); }
.button--small { background: var(--surface); }
.formula-symbol {
  color: var(--steel-strong);
  background: var(--surface);
  border-color: var(--steel);
  font-family: var(--font-body);
}
.formula-symbol:hover, .formula-symbol[aria-pressed="true"] {
  color: var(--surface);
  background: var(--steel-strong);
}
:focus-visible,
.console-trigger:focus-visible,
.patient-menu-trigger:focus-visible,
.case-attributes input:focus-visible,
.patient-option:focus-visible,
.patient-delete:focus-visible,
.console-add:focus-visible,
.console-edit-pencil:focus-visible,
.trend-variable-option:focus-within {
  outline: 3px solid var(--steel-strong);
  outline-offset: 3px;
}

.calculate-action {
  background: var(--surface);
  border-top-color: var(--steel);
}
.calculate-action .button--primary {
  color: var(--steel-strong);
  background: var(--action-primary);
}
.calculate-action .button--primary:hover,
.calculate-action .button--primary:active { background: var(--action-primary-hover); }
.tab-bar button { color: var(--steel-strong); border-color: var(--steel); font-family: var(--font-display); font-weight: 600; }
.tab-bar button:hover { background: var(--surface-alt); }
.tab-bar button[aria-selected="true"] {
  color: var(--steel-strong);
  background: var(--action-primary);
  border-color: var(--action-primary);
}
.tab-bar button[aria-selected="true"]:hover,
.tab-bar button[aria-selected="true"]:active {
  color: var(--steel-strong);
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

.calculator-panel {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
}
.result-region {
  background: var(--surface-alt);
  border: 1px solid var(--steel);
}
.result-card {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
}
.teaching-section {
  color: var(--steel-strong);
  background: var(--surface);
  border-color: var(--steel);
}
.formula-expression {
  color: var(--steel-strong);
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  font-family: var(--font-body);
}
.teaching-links {
  padding: var(--gap-2);
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  border-radius: 12px;
}
.teaching-links a { color: var(--steel-strong); background: var(--surface); border-color: var(--steel); }
.teaching-links a:hover { color: var(--surface); background: var(--steel-strong); }
.state--green, .validity--valid { color: var(--green); }
.state--yellow, .validity--estimated { color: var(--yellow); }
.state--orange, .validity--conditioned { color: var(--orange); }
.state--red { color: var(--red); }
.state--neutral, .validity--unavailable { color: var(--neutral); }

.trend-region {
  min-width: 0;
  padding: var(--gap-3);
  background: var(--surface);
  border: 1px solid var(--steel);
  box-shadow: var(--shadow);
}
.trend-table {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
}
.trend-table th, .trend-table td { border-color: rgb(63 90 98 / 28%); }
.trend-variable-group {
  min-width: 0;
  background: var(--surface);
  border-color: var(--steel);
}
.trend-variable-group > summary { color: var(--steel-strong); background: var(--surface-alt); }
.trend-variable-option { min-width: 0; min-height: 44px; }
.trend-variable-option:hover, .trend-variable-option:has(input:checked) { color: var(--steel-strong); background: var(--surface-alt); }
.trend__gridline { stroke: rgb(63 90 98 / 28%); }
.trend__axis { stroke: var(--steel); }
path.trend__line { stroke-width: 2.25; }
.trend__point { r: 4px; }
.trend--multi .trend__line { stroke-width: 1.25; }
.trend--multi .trend__point { r: 3.5px; stroke-width: 2.5; }

.patient-dialog, .welcome-dialog {
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  box-shadow: 0 12px 32px rgb(38 63 70 / 28%);
}
.patient-dialog::backdrop, .welcome-dialog::backdrop { background: rgb(38 63 70 / 58%); }
.error-summary {
  color: var(--red);
  background: #FFF2F0;
  border-color: var(--red);
}
.storage-warning {
  color: var(--orange);
  background: #FFF4EC;
  border-color: var(--orange);
}

/* The patient summary is supporting context: compact, centered and always
   contained by its console rather than leaving the adult toggle stranded. */
#case-console > .case-summary-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-2);
  min-width: 0;
  margin: var(--gap-2) 0 0;
  padding: var(--gap-1) var(--gap-2);
}
#case-console > .case-summary-group .case-summary-trigger {
  flex: 0 1 auto;
  min-width: 0;
  max-inline-size: 100%;
}
@media (max-width: 767px) {
  #case-console > .case-summary-group {
    gap: var(--gap-2);
    padding: var(--gap-1) var(--gap-2);
  }
  #case-console > .case-summary-group .case-summary-trigger {
    flex: 0 1 auto;
    max-inline-size: 100%;
  }
}

/* Oxigenación is the first clinical view: keep its initial entry state compact
   and balanced, while reserving result space only after a calculation exists. */
#panel-oxygenation {
  padding: var(--gap-3);
}

#panel-oxygenation .calculator-inputs > header p {
  margin: 0 0 var(--gap-2);
  font-size: .875rem;
  line-height: 1.4;
}

#panel-oxygenation .input-summary {
  margin-bottom: 0;
}

#panel-oxygenation .input-summary[open] summary {
  margin-bottom: var(--gap-2);
}

#panel-oxygenation .gas-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  align-items: start;
  column-gap: var(--gap-3);
  row-gap: var(--gap-2);
  inline-size: min(100%, 20rem);
  margin: 0 auto;
}

#panel-oxygenation .gas-table label {
  width: auto;
  min-width: 0;
  grid-template-rows: 2.25rem auto;
}

#panel-oxygenation .gas-table .input-unit {
  inline-size: min(100%, 8.125rem);
  justify-self: center;
}

/* Do not reserve a decorative "results" container until a calculation has
   actually produced a card.  The action bar already explains how to calculate. */
.result-region:not(:has(.result-card)) {
  display: none;
}

/* Short value-and-unit controls sit on the centre line of their grid tracks.
   This keeps both outer margins equal in the two-column clinical forms. */
#panel-mechanics .field-grid > label > .input-unit,
#panel-constants .field-grid > label > .input-unit {
  justify-self: center;
}

@media (min-width: 768px) {
  #panel-oxygenation .gas-table {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: min(100%, 38rem);
  }
}

/* Soft clinical neomorphism: material relief helps users group controls while
   explicit borders, labels and semantic colors continue to carry meaning. */
:root {
  --neo-light: rgb(255 255 255 / 96%);
  --neo-dark: rgb(133 119 103 / 22%);
  --neo-raised: 9px 9px 18px var(--neo-dark), -9px -9px 18px var(--neo-light);
  --neo-pressed: inset 5px 5px 10px var(--neo-dark), inset -5px -5px 10px var(--neo-light);
}

.context-console,
.calculator-panel,
.trend-region,
.trend-table,
.trend-variable-group,
.teaching-section,
.result-card {
  box-shadow: var(--neo-raised);
}

.console-trigger,
#location-console .console-trigger,
.patient-menu-trigger,
.console-add,
.console-edit-pencil,
.button,
.calculate-action .button,
.tab-bar button,
.input-summary summary,
.input-unit,
.formula-expression,
.teaching-links,
.trend-variable-group > summary {
  box-shadow: var(--neo-raised);
}

input:not([aria-invalid="true"]),
select:not([aria-invalid="true"]) {
  box-shadow: var(--neo-pressed);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  box-shadow: 0 0 0 1px var(--red), var(--neo-pressed);
}

.console-trigger:active,
.patient-menu-trigger:active,
.console-add:active,
.console-edit-pencil:active,
.patient-delete:active,
.formula-symbol:active,
.button:active,
.tab-bar button:active,
.mobile-nav a:active {
  transform: translate(2px, 2px);
  box-shadow: var(--neo-pressed);
}

.tab-bar button[aria-selected="true"] {
  transform: translate(1px, 1px);
  box-shadow: var(--neo-pressed);
}

.site-header .vision-teaser,
.site-header .header-preference-button,
.site-header .header-preference-toggle {
  box-shadow: 4px 4px 10px rgb(0 0 0 / 22%), -4px -4px 10px rgb(255 255 255 / 6%);
}

.site-header .vision-teaser:active,
.site-header .header-preference-button:active,
.site-header .header-preference-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: inset 3px 3px 7px rgb(0 0 0 / 28%), inset -3px -3px 7px rgb(255 255 255 / 8%);
}

/* Patient context is a compact composition: every control keeps the same
   breathing room, and the one-line summary visibly opens its editor. */
#case-console {
  --case-trigger-action-width: 46px;
  padding: var(--gap-2);
}

#case-console .case-trigger-row {
  align-items: stretch;
  min-block-size: 46px;
}

#case-console .patient-menu-trigger {
  min-block-size: 46px;
  padding: 9px 12px;
  font-size: .875rem;
}

#case-console .console-add,
#case-console .console-edit-pencil {
  flex-basis: 46px;
  inline-size: 46px;
  block-size: 46px;
  min-block-size: 46px;
  padding: 0;
  border-radius: 14px;
}

#case-console > .case-summary-group {
  margin: var(--gap-2) 0 0;
  padding: 0;
  gap: var(--gap-2);
}

#case-console > .case-summary-group .case-summary-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  min-block-size: 44px;
  padding: 6px 8px;
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  border-radius: 12px;
  box-shadow: var(--neo-raised);
  cursor: pointer;
  font-size: .6875rem;
  line-height: 1.2;
  text-align: center;
}

/* The anonymous action is a single, centred target with the same visual width
   as the selector above; there are no secondary + or pencil actions. */
#case-console > .case-summary-group .case-summary-trigger--anonymous {
  flex: 1 1 100%;
  inline-size: 100%;
}

#case-summary-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-summary-trigger__affordance {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

/* A value and its unit are one control.  The wrapper owns its rounded outline
   so neither half can expose a square corner through the shared shadow. */
.input-unit {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: 12px;
}

.input-unit > input {
  border: 0;
  border-right: 1px solid var(--control-border);
  border-radius: 0;
}

.input-unit > span {
  border: 0;
  border-radius: 0;
}

.input-unit:focus-within {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.input-unit > input:focus-visible {
  outline: 0;
}

.input-unit:has(input[aria-invalid="true"]) {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--neo-raised);
}

.input-unit > input[aria-invalid="true"] {
  box-shadow: none;
}

/* Seguimiento is a visual overview: keep all series as precise open paths and
   compact its chart/table typography to 60% without changing the data itself. */
path.trend__line[class*="trend-color-"] {
  fill: none;
  stroke-width: 1.25;
}

.trend__heading { font-size: .525rem; }
.trend__heading span:last-child { font-size: .45rem; }
.trend__x-label { font-size: .4125rem; }
.trend-legend, .trend__note { font-size: .4875rem; }
#trend-table .trend-table { font-size: .6rem; }

#case-console > .case-summary-group .case-summary-trigger:active {
  transform: translate(1px, 1px);
  box-shadow: var(--neo-pressed);
}

#case-console .adult-patient-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  margin: 0;
  padding: 6px 8px;
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  border-radius: 12px;
  box-shadow: var(--neo-raised);
  font-size: .75rem;
}

#case-console .adult-patient-toggle input {
  appearance: auto;
  inline-size: 18px;
  block-size: 18px;
  min-block-size: 18px;
  margin: 0;
  padding: 0;
  background: revert;
  border: revert;
  box-shadow: none;
  accent-color: var(--steel-strong);
}

/* The selected case is concise: choose or create above, then see only its
   anthropometry below. The editor is explicit, never hidden behind a chevron. */
#case-console .case-trigger-row {
  display: flex;
  align-items: stretch;
  gap: var(--gap-2);
}

#case-console .patient-menu-host { flex: 1 1 auto; min-inline-size: 0; }

#case-console .case-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding: 9px 12px;
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  border-radius: 14px;
  box-shadow: var(--neo-raised);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#case-console .case-action-button:hover { border-color: var(--steel-strong); }
#case-console .case-action-button:active { transform: translate(1px, 1px); box-shadow: var(--neo-pressed); }

#case-console .case-data-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--gap-2);
  margin-top: var(--gap-2);
}

#case-console .case-data-panel[hidden] { display: none !important; }
#case-console .case-data-panel:has(#case-edit-button[hidden]) { grid-template-columns: minmax(0, 1fr); }

#case-console .case-data-summary {
  display: flex;
  align-items: center;
  min-block-size: 46px;
  margin: 0;
  padding: 9px 12px;
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  border-radius: 14px;
  box-shadow: var(--neo-raised);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  #case-console .case-trigger-row { min-block-size: 46px; }
  #case-console .case-action-button { padding-inline: 10px; }
  #case-console .case-data-summary { min-inline-size: 0; }
}

/* The case editor is the one place where patient context changes. Its brief
   movement makes the relationship with the selected case explicit without
   delaying clinical data entry. */
.case-editor-dialog {
  inline-size: min(calc(100vw - 2rem), 42rem);
  max-inline-size: none;
  max-block-size: min(46rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  color: var(--steel-strong);
  background: var(--surface);
  border: 1px solid var(--steel);
  border-radius: 18px;
  box-shadow: 16px 18px 42px rgb(38 63 70 / 28%), -8px -8px 20px rgb(255 255 255 / 72%);
}

.case-editor-dialog[open] {
  animation: case-editor-enter 220ms cubic-bezier(.25, 1, .5, 1) both;
}

.case-editor-dialog.is-closing {
  animation: case-editor-exit 160ms cubic-bezier(.4, 0, 1, 1) both;
}

.case-editor-dialog::backdrop {
  background: rgb(38 63 70 / 44%);
  animation: case-editor-backdrop-enter 220ms linear both;
}

.case-editor-dialog.is-closing::backdrop {
  animation: case-editor-backdrop-exit 160ms linear both;
}

.case-editor-dialog form {
  display: grid;
  gap: var(--gap-3);
  max-block-size: inherit;
  overflow: auto;
  padding: var(--gap-4);
}

.case-editor__header h2,
.case-editor__header p,
.case-editor-dialog .privacy-notice {
  margin: 0;
}

.case-editor__header { display: grid; gap: var(--gap-1); }
.case-editor__header h2 { font-size: 1.25rem; }
.case-editor__header p { color: var(--muted); font-size: .875rem; }
.case-tag-field { display: grid; gap: var(--gap-1); }

#case-editor-dialog .console-details {
  display: block;
  opacity: 1;
  overflow: visible;
}

#case-editor-dialog .case-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3);
  margin: 0;
}

#case-editor-dialog .case-fields > .adult-patient-toggle,
#case-editor-dialog .case-fields > .age-fieldset {
  grid-column: 1 / -1;
}

#case-editor-dialog .case-fields > .adult-patient-toggle {
  justify-self: start;
}

#case-editor-dialog .case-fields > .quickedit-bmi-echo {
  margin: 0;
}

.case-editor__ideal-weight-help {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--gap-2);
  padding: var(--gap-3);
  color: var(--steel-strong);
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  border-radius: 14px;
  box-shadow: var(--neo-pressed);
  font-size: .875rem;
}

.case-editor__ideal-weight-help[hidden] { display: none; }
.case-editor__ideal-weight-help h3,
.case-editor__ideal-weight-help p,
.case-editor__ideal-weight-help ul { margin: 0; }
.case-editor__ideal-weight-help ul { display: grid; gap: var(--gap-1); padding-left: 1.25rem; }
.case-editor__ideal-weight-help .button { justify-self: start; }
.case-editor__sources { color: var(--muted); font-size: .8125rem; }

.case-editor__actions {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: var(--gap-2);
  padding-top: var(--gap-2);
}

@keyframes case-editor-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes case-editor-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(.99); }
}

@keyframes case-editor-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes case-editor-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 767px) {
  .case-editor-dialog {
    position: fixed;
    inset: auto 0 0;
    inline-size: 100%;
    max-block-size: min(42rem, calc(100dvh - env(safe-area-inset-top) - 8px));
    margin: 0;
    border-radius: 18px 18px 0 0;
  }

  .case-editor-dialog form {
    padding: var(--gap-3) var(--gap-3) calc(var(--gap-3) + env(safe-area-inset-bottom));
  }

  .case-editor__actions > .button { flex: 1 1 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-editor-dialog[open],
  .case-editor-dialog.is-closing,
  .case-editor-dialog::backdrop,
  .case-editor-dialog.is-closing::backdrop { animation: none; }
}

/* A disclosure is a single bounded surface: its fields never appear to float
   below the trigger that reveals them. */
details.input-summary[open] {
  padding: var(--gap-2);
  background: var(--surface-alt);
  border: 1px solid var(--steel);
  border-radius: 12px;
  box-shadow: var(--neo-pressed);
}

details.input-summary[open] > summary {
  min-block-size: 44px;
  margin: 0 0 var(--gap-2);
  padding: 6px 8px;
  color: var(--steel-strong);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(63 90 98 / 35%);
  border-radius: 0;
  box-shadow: none;
}

@media print {
  @page { size: A4; margin: 12mm; }
  .site-header, .skip-link, .case-strip, .tab-bar, .mobile-nav, .action-row, .calculate-action, .error-summary, input, select, button, .calculator-inputs, .mechanics-notice, .patient-menu, .patient-dialog, .case-editor-dialog { display: none !important; }
  :root, html, body { overflow: visible !important; background: white !important; }
  body { color: black; }
  .shell { width: 100%; margin: 0; }
  .print-summary { display: block !important; margin: 0 0 8mm; padding: 4mm; border: 1px solid #000; break-inside: avoid; page-break-inside: avoid; }
  .print-summary h2 { margin-top: 0; }
  .print-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm 4mm; }
  .print-summary dl div { border: 0; }
  .calculator-panel, .calculator-panel[hidden] { display: block !important; margin: 0 0 8mm; padding: 0; box-shadow: none; border: 0; }
  .result-region { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4mm; }
  .result-region, .trend-region, .trend-table-region { min-height: 0; padding: 0; background: transparent; border: 0; }
  .trend-region, .trend-table-region, #panel-teaching { display: block !important; }
  .result-card { margin: 0; padding: 4mm; background: transparent; break-inside: avoid; page-break-inside: avoid; }
  .result-card .gauge, .concept-diagram, .teaching-section, .glossary article, .trend-table tr { break-inside: avoid; page-break-inside: avoid; }
  .result-teaching { display: none !important; }
  body[data-print-state="stale"] .calculator-panel, body[data-print-state="stale"] .result-region, body[data-print-state="stale"] .trend-region, body[data-print-state="stale"] .trend-table-region, body[data-print-state="stale"] #panel-teaching { display: none !important; }
  body[data-print-state="stale"] #print-stale-warning { display: block !important; margin: 4mm 0; padding: 4mm; border: 2px solid #000; font-size: 14pt; font-weight: 800; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
  .calculator-panel, .result-region, .result-card, .teaching-section, .formula-expression,
  .teaching-links, .trend-region, .trend, .trend-table, .trend-variable-group,
  .state, .validity, .storage-warning, .error-summary {
    color: #000 !important;
    background: #fff !important;
    border-color: #777 !important;
  }
  h2, h3, h4, p, li, dt, dd, th, td, caption, figcaption { color: #000 !important; }
  .trend__gridline, .trend__axis { stroke: #aaa !important; }
  .trend__line, .trend__point { stroke: #444 !important; }
  .trend__point { fill: #fff !important; }
  .trend--multi path.trend__line:nth-of-type(1) { stroke-dasharray: none !important; }
  .trend--multi path.trend__line:nth-of-type(2) { stroke-dasharray: 8px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(3) { stroke-dasharray: 2px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(4) { stroke-dasharray: 10px 3px 2px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(5) { stroke-dasharray: 6px 2px 2px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(6) { stroke-dasharray: 12px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(7) { stroke-dasharray: 4px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(8) { stroke-dasharray: 12px 2px 2px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(9) { stroke-dasharray: 8px 2px 2px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(10) { stroke-dasharray: 3px 2px 1px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(11) { stroke-dasharray: 14px 3px 3px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(12) { stroke-dasharray: 6px 3px 1px 3px !important; }
  .trend--multi path.trend__line:nth-of-type(13) { stroke-dasharray: 10px 2px 4px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(14) { stroke-dasharray: 2px 2px 6px 2px !important; }
  .trend--multi path.trend__line:nth-of-type(15) { stroke-dasharray: 16px 3px !important; }
  .trend-legend .trend-legend__swatch {
    inline-size: auto;
    block-size: auto;
    min-width: 5ch;
    color: #000 !important;
    background: none !important;
    border: 0;
    border-radius: 0;
    font: 700 9pt/1 monospace;
  }
  .trend-legend .trend-legend__swatch::after { display: inline-block; }
  .trend-legend li:nth-child(1) .trend-legend__swatch::after { content: "----"; }
  .trend-legend li:nth-child(2) .trend-legend__swatch::after { content: "-- --"; }
  .trend-legend li:nth-child(3) .trend-legend__swatch::after { content: ". . ."; }
  .trend-legend li:nth-child(4) .trend-legend__swatch::after { content: "-.-."; }
  .trend-legend li:nth-child(5) .trend-legend__swatch::after { content: "--.."; }
  .trend-legend li:nth-child(6) .trend-legend__swatch::after { content: "--- ---"; }
  .trend-legend li:nth-child(7) .trend-legend__swatch::after { content: "- - -"; }
  .trend-legend li:nth-child(8) .trend-legend__swatch::after { content: "---.."; }
  .trend-legend li:nth-child(9) .trend-legend__swatch::after { content: "--.-"; }
  .trend-legend li:nth-child(10) .trend-legend__swatch::after { content: "-.-.-"; }
  .trend-legend li:nth-child(11) .trend-legend__swatch::after { content: "----.."; }
  .trend-legend li:nth-child(12) .trend-legend__swatch::after { content: "--.-."; }
  .trend-legend li:nth-child(13) .trend-legend__swatch::after { content: "---.--"; }
  .trend-legend li:nth-child(14) .trend-legend__swatch::after { content: ".--."; }
  .trend-legend li:nth-child(15) .trend-legend__swatch::after { content: "---- ----"; }
}
[hidden] { display: none !important; }
.gauge__meta { font-size: .75rem; fill: var(--muted); }