/* Magnetometer characterization page. Page width, figures, key figures and
   reference cards come from kmsr.css; this file adds the page's own components. */
.characterization-page .section-body > h3 { margin: 2.5rem 0 .8rem; }
.text-underlined { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.characterization-page .kmsr-reference + .kmsr-reference { margin-top: 1rem; }

/* Term and value rows for the measured conditions. */
.spec-list { margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .15rem 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); font-size: var(--small); font-weight: 600; line-height: 1.75; }
.spec-list dd { margin: 0; color: var(--ink); }
.spec-list var, .mds-step var, .mds-conditions var, .characterization-page figcaption var { font-family: var(--serif); }

/* Two photographs side by side. "Equal" gives both the format of the building photograph;
   "matched" keeps a portrait and a landscape photograph uncropped at the same height. */
.figure-pair { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.characterization-page .figure-pair .kmsr-figure { margin-top: 0; }
.figure-pair-equal img { aspect-ratio: 4 / 3; object-fit: cover; }
.characterization-page .figure-plot { max-width: 40rem; }
.characterization-page .figure-plot > a { background: var(--white); }
/* A cut-out picture stands directly on the page, without the photograph frame. */
.characterization-page .figure-cutout > a { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* Text and key data beside a portrait figure (door video, DALAC picture). */
.split-layout { display: grid; gap: 1.75rem; }
.split-layout > div > :first-child { margin-top: 0; }
.characterization-page .split-layout .kmsr-figure { max-width: 20rem; margin-top: 0; }
.ranking-list { margin: 0 0 1.5rem; }
.ranking-list li { margin-bottom: .4rem; }
.figure-video video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: .875rem; background: var(--ink); box-shadow: 0 4px 12px rgb(23 51 67 / 8%), 0 18px 38px -12px rgb(9 107 112 / 22%); }

.key-statement-note { font-weight: 400; }
.key-statement { max-width: none !important; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-radius: .75rem; background: var(--surface); color: var(--ink); font-weight: 600; }

/* Invitation to research collaborations: a quiet link below the introduction leads to the panel
   that closes the page (.invite-panel in styles.css). The panel names what fits, so it is not read
   as a testing service. */
.page-actions { margin: .75rem 0 0; }
/* The panel lands directly below the bar, so the bar marks "Collaboration" as the current section. */
.characterization-page .invite-panel { scroll-margin-top: 0; }
.page-actions .text-link { font-weight: 600; }

/* Six numbered metric groups; the application-specific one is set apart. */
.metric-groups { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: metric-group; }
.metric-group { margin: 0; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid #cfdee3; border-radius: .875rem; background: var(--white); box-shadow: 0 2px 6px rgb(23 51 67 / 3%); counter-increment: metric-group; }
.metric-group h3 { display: flex; align-items: center; gap: .75rem; margin: 0 0 .85rem; font: 650 1.0625rem/1.35 var(--sans); color: var(--ink); }
.metric-group h3::before { content: counter(metric-group); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--white); font-size: .875rem; font-variant-numeric: tabular-nums; }
.metric-group ul { margin: 0; padding-left: 1.15rem; list-style: disc; }
.metric-group li { margin-bottom: .3rem; padding-left: .1rem; }
.metric-group li:last-child { margin-bottom: 0; }
.metric-group-key { border-color: #70a4a7; background: var(--surface); }

/* Minimum detectable signal: three numbered steps, each with its sketch or formula. */
.mds-steps { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: mds-step; }
.mds-step { display: grid; gap: 1.25rem; margin: 0; padding: 1.25rem; border: 1px solid #cfdee3; border-radius: .875rem; background: var(--white); box-shadow: 0 2px 6px rgb(23 51 67 / 3%); counter-increment: mds-step; }
.mds-step h3 { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; font: 650 1.0625rem/1.35 var(--sans); color: var(--ink); }
.mds-step h3::before { content: counter(mds-step); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--white); font-size: .875rem; font-variant-numeric: tabular-nums; }
.mds-step p { margin: 0; }
/* One column as wide as the box. Without the explicit width the column grows to the formula's estimated width,
   which Firefox sets larger than the drawn formula, and a scrollbar appears although everything fits. */
.mds-step-visual { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: .75rem; min-width: 0; padding: 1rem; border-radius: .5rem; background: #f6f9f9; overflow-x: auto; overflow-y: hidden; }
/* The longest formula is about 22.2 em wide with the macOS math font; it scales down with the box instead of
   scrolling. The factor leaves about 13 % in reserve, because other math fonts (Cambria Math on Windows) run wider. */
.mds-formula { margin: 0; color: var(--ink); font-size: clamp(.75rem, 3.9cqi, 1.125rem); }
.mds-conditions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mds-conditions li { margin: 0; padding: .3rem .8rem; border-radius: 999px; background: var(--surface); color: var(--accent-dark); font-size: var(--small); font-weight: 600; white-space: nowrap; }
.mds-conditions var { font-weight: 400; }
/* Pointing at a condition (or focusing it with the keyboard) marks where it enters the MDS20
   formula. Pure CSS; browsers without :has() only show the changed box. */
.mds-conditions li { cursor: default; }
.mds-conditions li:hover, .mds-conditions li:focus-visible { background: var(--accent); color: var(--white); }
.mds-conditions li:focus-visible { outline-offset: 2px; }
.mds-term { border-radius: .2em; }
.mds-step:has([data-term="distance"]:is(:hover, :focus-visible)) .mds-term-distance,
.mds-step:has([data-term="bandwidth"]:is(:hover, :focus-visible)) .mds-term-bandwidth,
.mds-step:has([data-term="snr"]:is(:hover, :focus-visible)) .mds-term-snr,
.mds-step:has([data-term="noise"]:is(:hover, :focus-visible)) .mds-term-noise { background: var(--accent); color: var(--white); box-shadow: 0 0 0 .08em var(--accent); }
.mds-step .mds-hint { margin-top: .6rem; color: var(--muted); font-size: .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .mds-conditions li, .mds-term { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
}

.mds-diagram { display: block; width: 100%; max-width: 22rem; height: auto; margin-inline: auto; }
.mds-case { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.mds-guide { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mds-source { fill: var(--accent); }
.mds-detector { fill: var(--ink); }
.mds-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.mds-head { fill: var(--ink); }
.mds-line.mds-standoff { stroke: #b4472c; }
.mds-head.mds-standoff, .mds-symbol.mds-standoff { fill: #b4472c; }
.mds-label { fill: var(--muted); font: 600 11px var(--sans); letter-spacing: .04em; }
.mds-symbol { fill: var(--ink); font: italic 17px var(--serif); }
.mds-sub { font-size: 11px; font-style: normal; }

.mds-tradeoff { display: grid; gap: 1rem; }
.mds-regime { padding: 1.1rem 1.25rem; border: 1px solid #cfdee3; border-radius: .875rem; background: var(--white); }
.mds-regime h4 { margin: 0 0 .4rem; color: var(--accent); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mds-regime p { margin: 0; }

@media (max-width: 29.999rem) {
  .spec-list > div { grid-template-columns: minmax(0, 1fr); }
  .mds-step { padding: 1rem; }
  .mds-step-visual { padding: .75rem .5rem; }
}
@media (min-width: 40rem) {
  .figure-pair, .metric-groups, .mds-tradeoff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure-pair { align-items: start; }
  .figure-pair.figure-pair-matched { grid-template-columns: minmax(0, 513fr) minmax(0, 957fr); }
}
@media (min-width: 48rem) {
  .split-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: start; }
}
@media (min-width: 75rem) {
  .metric-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mds-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 1.75rem; }
}
@media print {
  .metric-group, .mds-step { box-shadow: none; break-inside: avoid; }
}

/* MDS20 calculator and MDS(R) plotter (assets/js/mds-calculator.js).
   The three class colours were checked for colour-vision deficiencies and contrast on the white
   plot surface (#d55181, #2a78d6, #c98500, all pairs); "your sensor" is drawn in ink.
   Dash pattern and marker shape identify the device within a class. */
.mds-tool { --mds-high: #d55181; --mds-very: #2a78d6; --mds-sens: #c98500; --mds-own: var(--ink); margin-top: 2.5rem; }
.characterization-page .mds-tool > h3 { margin: 0 0 .8rem; }
.characterization-page .mds-tool > h4 { margin: 2rem 0 .75rem; }
.mds-tool-interactive { margin-top: 1.25rem; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid #cfdee3; border-radius: .875rem; background: var(--white); box-shadow: 0 2px 6px rgb(23 51 67 / 3%); }
.mds-tool-form { display: grid; gap: 1.25rem; }
.mds-tool-form fieldset, .mds-legend fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mds-tool-form legend { margin-bottom: .75rem; padding: 0; color: var(--accent); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mds-field { margin-bottom: .85rem; }
.mds-field label { display: block; margin-bottom: .35rem; color: var(--ink); font-size: var(--small); font-weight: 600; }
.mds-field label var { font-family: var(--serif); font-weight: 400; }
.mds-field input[type="number"], .mds-field select { width: 100%; min-width: 0; min-height: 44px; padding: .5rem .6rem; border: 1px solid #8b9fa4; border-radius: .375rem; background: var(--white); color: var(--ink); font-size: 1rem; }
.mds-field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.mds-field-row { display: flex; align-items: center; gap: .5rem; }
.mds-field-row select { flex: none; width: auto; }
.mds-field-row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.mds-field-row input[type="range"] + input { flex: 0 0 5.5rem; }
.mds-tool-form .reset-button { padding-left: 0; }
.mds-results { display: grid; gap: .75rem; margin-top: 1.25rem; }
.mds-result { padding: 1rem 1.1rem; border-radius: .75rem; background: #f6f9f9; }
.mds-result-main { background: var(--surface); }
.mds-result p { max-width: none; margin: 0; }
.mds-result-label { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.mds-result-value { color: var(--accent); font: 650 clamp(1.6rem, 3vw, 2.1rem)/1.25 var(--sans); }
.mds-result-unit { font-size: .55em; font-weight: 600; }
.mds-result-note { color: var(--muted); font-size: .75rem; }
.mds-result var { font-family: var(--serif); }

.mds-plot-figure { margin: 1.5rem 0 0; }
.mds-plot { position: relative; min-width: 0; border-radius: .5rem; }
.mds-plot:focus-visible { outline-offset: 2px; }
.mds-chart { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.mds-inside { fill: #f1f4f4; }
.mds-grid { stroke: #e3eaeb; stroke-width: 1; }
.mds-axis { stroke: #9fb0b5; stroke-width: 1; }
.mds-tick { fill: var(--muted); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.mds-axis-title { fill: var(--text); font: 600 12px var(--sans); }
.mds-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mds-line-own { stroke-width: 3; }
.mds-stroke-high { stroke: var(--mds-high); }
.mds-stroke-very { stroke: var(--mds-very); }
.mds-stroke-sens { stroke: var(--mds-sens); }
.mds-stroke-own { stroke: var(--mds-own); }
.mds-dash-1 { stroke-dasharray: 7 5; }
.mds-dash-2 { stroke-dasharray: .1 5; }
.mds-dash-3 { stroke-dasharray: 9 4 .1 4; }
.mds-marker { stroke: var(--white); stroke-width: 2; }
.mds-fill-high { fill: var(--mds-high); }
.mds-fill-very { fill: var(--mds-very); }
.mds-fill-sens { fill: var(--mds-sens); }
.mds-fill-own { fill: var(--mds-own); }
.mds-chosen { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mds-chosen-label { fill: var(--ink); font: 600 12px var(--sans); }
.mds-crosshair { stroke: var(--muted); stroke-width: 1; }
.mds-key { flex: none; overflow: visible; }

.mds-tooltip { position: absolute; top: 0; left: 0; z-index: 2; width: max-content; max-width: min(19rem, 80vw); padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--white); box-shadow: 0 8px 24px rgb(23 51 67 / 14%); color: var(--text); font-size: .75rem; line-height: 1.45; pointer-events: none; }
.mds-tooltip p { max-width: none; margin: 0; }
.mds-tooltip .mds-tooltip-title { margin-bottom: .3rem; color: var(--ink); font-weight: 650; }
.mds-tooltip .mds-tooltip-unit { margin-top: .3rem; color: var(--muted); }
.mds-tooltip ul { margin: 0; padding: 0; list-style: none; }
.mds-tooltip li { display: grid; grid-template-columns: 34px 5.4rem minmax(0, 1fr); align-items: center; gap: .45rem; margin: 0; padding: .05rem 0; }
.mds-tooltip strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mds-tooltip-own span { color: var(--ink); font-weight: 650; }

.mds-legend { display: grid; gap: .75rem 1.5rem; margin-top: 1rem; font-size: var(--small); }
.mds-legend legend { margin-bottom: .2rem; padding: 0; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mds-legend label { display: flex; align-items: center; gap: .5rem; min-height: 32px; color: var(--text); line-height: 1.35; cursor: pointer; }
.mds-legend input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.mds-legend .mds-legend-own { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; max-width: none; margin: 0; color: var(--ink); font-weight: 600; }

/* Sideways scrolling only. With "overflow-x: auto" alone the other direction becomes "auto" as well, and Firefox on
   Windows then shows a vertical scrollbar for a table that is a fraction of a pixel taller than its frame. */
.mds-table-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid #cfdee3; border-radius: .75rem; background: var(--white); }
.mds-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--small); line-height: 1.45; }
.mds-table th, .mds-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.mds-table thead th { background: var(--surface); color: var(--ink); font-weight: 600; }
.mds-table tbody th { color: var(--ink); font-weight: 400; }
.mds-table tbody tr:last-child > * { border-bottom: 0; }
.mds-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mds-table thead .num { white-space: normal; }
.mds-table tbody td:nth-child(5) { color: var(--ink); font-weight: 650; }
.mds-table tbody .mds-live { color: var(--accent-dark); }
.mds-table var { font-family: var(--serif); }
.mds-tool .mds-footnotes { max-width: none; margin: .75rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }

@media (min-width: 40rem) {
  .mds-tool-form, .mds-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mds-tool-form { gap: 2rem; }
  .mds-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
  .mds-tool-form, .mds-legend input, .mds-tooltip { display: none; }
  .mds-tool-interactive { box-shadow: none; }
}