.analysis-trend-view { --atr-gold: #dbb76b; --atr-cyan: #57c5dc; --atr-muted: #afc4c7; --atr-border: #285057; --analysis-label-gutter: clamp(304px, 20vw, 312px); display: grid; align-content: start; gap: 12px; min-width: 0; color: #e5efef; font-family: inherit; font-size: 16px; line-height: 1.4; }
.analysis-trend-view *, .analysis-demo-page * { box-sizing: border-box; }
.analysis-trend-view .atr-card { min-width: 0; border: 1px solid var(--atr-border); border-radius: 10px; background: #0c2a30; }
.analysis-trend-view h2, .analysis-trend-view h3, .analysis-trend-view h4, .analysis-trend-view p { margin: 0; }
.analysis-trend-view h2 { font-size: 28px; font-weight: 650; color: #e4bf74; letter-spacing: -.5px; }
.analysis-trend-view h3 { font-size: 20px; font-weight: 650; color: #e0ecec; }
.analysis-trend-view h4 { margin-bottom: 11px; font-size: 18px; color: #e0ecec; font-weight: 650; }
.analysis-trend-view h4 small { display: block; margin-top: 3px; color: var(--atr-muted); font-size: 14px; font-weight: 400; }
.analysis-trend-view button, .analysis-trend-view select, .analysis-trend-view input { font: inherit; }
.analysis-trend-view button { cursor: pointer; }
.analysis-trend-view button:disabled { cursor: default; }
.analysis-trend-view button:focus-visible, .analysis-trend-view [tabindex]:focus-visible { outline: 2px solid var(--atr-gold); outline-offset: 2px; }
.analysis-trend-view select, .analysis-trend-view input:not([type=checkbox]) { min-width: 0; width: auto; height: 38px; padding: 6px 10px; border: 1px solid #36585e; border-radius: 5px; color: #e0e9e9; background: #09242a; color-scheme: dark; }
.atr-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 180px; overflow: hidden; container: atr-hero / inline-size; }
.atr-hero-copy { position: relative; z-index: 1; min-width: 0; width: 100%; padding: 22px 26px; }
.atr-hero-title { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.analysis-trend-view .atr-hero-motto { position: absolute; right: 26px; bottom: 22px; width: 230px; isolation: isolate; color: #f0f6f6; font-size: 18px; line-height: 1.5; font-weight: 400; text-align: right; text-shadow: 0 2px 4px #0006; }
.atr-hero-motto::before { content: ''; position: absolute; z-index: -1; inset: -12px -18px; background: radial-gradient(ellipse, #0006 0%, #0003 40%, transparent 75%); filter: blur(14px); pointer-events: none; }
.atr-demo-badge { padding: 4px 7px; border: 1px solid #897447; border-radius: 4px; color: #e8ca8a; background: #393724; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.atr-metadata { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.5fr) minmax(0, 1.6fr); align-items: start; width: min(calc(100% - 250px), 1120px); padding: 10px 0; border-radius: 6px; background: linear-gradient(90deg, #0c2a30ed 55%, #0c2a30b8 88%, #0c2a3000); }
.atr-metadata > div { min-width: 0; min-height: 62px; padding: 0 clamp(16px, 1.7vw, 28px); border-left: 1px solid #54808466; }
.atr-metadata > div:first-child { padding-left: 0; border-left: 0; }
.atr-metadata > div:last-child { padding-right: 14px; }
.atr-metadata span, .atr-metadata strong { display: block; }
.atr-metadata span { margin-bottom: 8px; color: var(--atr-muted); font-size: 14px; }
.atr-metadata strong { font-size: 18px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.atr-hero-art { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 65%; pointer-events: none; }
/* Anchor the fade to the image edge, including when the zoomed-out image is narrower than its container. */
.atr-hero-art::before { content: ''; position: absolute; right: 0; top: -17.5%; height: 150%; aspect-ratio: 1983 / 793; background: url('./assets/branding/ans-explorer-dashboard-hero.png') center / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
/* Reflow by actual card width, including when the surrounding app has a sidebar. */
@container atr-hero (max-width: 1100px) {
  .analysis-trend-view .atr-hero-motto {
    position: relative; inset: auto; margin-left: auto; flex: 0 1 230px;
  }
  .atr-metadata {
    width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px;
    background: linear-gradient(90deg, #0c2a30ed, #0c2a30c9);
  }
  .atr-metadata > div { min-height: 0; padding: 0; border-left: 0; }
  .atr-metadata > div:last-child { padding-right: 0; }
}
/* Give the shaded metadata area its own inset on narrow cards. Keep the
   established outer card padding and the wider two-/four-column views intact. */
@container atr-hero (max-width: 750px) {
  .atr-metadata { padding: 14px 16px; column-gap: 20px; }
  .atr-metadata > div,
  .atr-metadata > div:first-child,
  .atr-metadata > div:last-child { padding-inline: 0; border-inline: 0; }
}
@container atr-hero (max-width: 560px) {
  .atr-hero-copy { padding: 20px; }
  .atr-metadata { grid-template-columns: minmax(0, 1fr); }
  .analysis-trend-view .atr-hero-motto { margin-left: 0; flex-basis: 100%; width: auto; text-align: left; }
}
.atr-chart { padding: 12px 16px 8px; }
.atr-toolbar { display: grid; grid-template-columns: var(--analysis-label-gutter) minmax(0, 1fr); align-items: center; row-gap: 8px; margin-bottom: 8px; }
.atr-plot-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-width: 0; padding-left: 8px; }
.atr-parameter-title { min-width: 0; overflow-wrap: anywhere; color: var(--atr-muted); font-size: 16px; }
.atr-time-controls { display: flex; flex: 1 1 520px; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 18px; margin-left: auto; }
.atr-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atr-dates input { width: 156px !important; }
.atr-dates select { width: 180px; }
.atr-chart-legend { display: flex; gap: 18px; color: #b3c8ca; font-size: 14px; }
.atr-chart-legend span { display: flex; align-items: center; gap: 6px; }
.atr-chart-legend i { width: 19px; height: 2px; background: var(--atr-cyan); }
.atr-chart-legend .atr-gold { background: var(--atr-gold); }
.atr-time-grid { display: grid; grid-template-columns: var(--analysis-label-gutter) minmax(0, 1fr); }
.atr-main-labels { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: start; }
.atr-main-plot { position: relative; min-width: 0; }
.atr-main, .atr-axis svg { display: block; width: 100%; height: 340px; overflow: visible; }
.analysis-trend-view svg text { fill: var(--atr-muted); font: 16px system-ui, sans-serif; }
.atr-grid-line { stroke: #295058; stroke-width: .65; stroke-dasharray: 2 4; }
.atr-value-line, .atr-trend-line, .atr-posture-line, .atr-breathing-line, .atr-nav-line { fill: none; stroke: var(--atr-cyan); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.atr-value-line { stroke-width: 1.9; }
.atr-trend-line { stroke: var(--atr-gold); stroke-width: 2; }
.atr-selection-line { stroke: #fff; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.atr-point { cursor: pointer; outline: none; }
.atr-point circle { fill: #0c2a30; stroke: var(--atr-cyan); stroke-width: 1.5; }
.atr-point .atr-hit { fill: transparent; stroke: none; }
.atr-point.selected circle:not(.atr-hit), .atr-point:focus-visible circle:not(.atr-hit) { fill: var(--atr-gold); stroke: #fff0c6; stroke-width: 2; }
.atr-navigator-row { margin-top: 9px; margin-bottom: 9px; }
.atr-track-title { display: flex; align-items: center; justify-content: flex-end; align-self: start; height: 37px; padding-right: 8px; color: var(--atr-muted); font-size: 16px; }
.atr-navigator { display: block; width: 100%; height: 39px; overflow: visible; touch-action: none; user-select: none; }
.atr-navigator-axis { display: block; width: 100%; height: 26px; overflow: visible; pointer-events: none; }
.atr-navigator-axis text { fill: var(--atr-muted); font-size: 12px; font-family: inherit; }
.atr-nav-axis-tick { stroke: var(--atr-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atr-nav-background { fill: #092127; stroke: #30545b; }
.atr-nav-line { stroke-width: 1; opacity: .6; }
.atr-nav-mask { fill: #051b22; opacity: .66; pointer-events: none; }
.atr-nav-window { fill: #53acb820; stroke: #789797; cursor: grab; }
.atr-nav-window:active { cursor: grabbing; }
.atr-nav-handle { fill: #d6b369; stroke: #efd18f; cursor: ew-resize; }
.atr-nav-grip { fill: none; stroke: #564725; stroke-width: 1; pointer-events: none; }
.atr-context { display: block; width: 100%; height: 160px; overflow: visible; }
.atr-context .atr-grid-line { stroke: #3a6068; stroke-width: .85; }
.atr-context-labels { position: relative; height: 160px; font-size: 16px; line-height: 20px; color: var(--atr-muted); }
/* Group centers and state baselines match the SVG track coordinates. */
.atr-track-group { --track-accent: var(--atr-gold); position: absolute; inset-inline: 0 8px; border-radius: 7px; background: linear-gradient(90deg, #dbb76b0d, #dbb76b03 75%, transparent); }
.atr-track-posture { top: 0; height: 72px; }
.atr-track-breathing { --track-accent: var(--atr-cyan); top: 76px; height: 48px; background: linear-gradient(90deg, #57c5dc0d, #57c5dc03 75%, transparent); }
.atr-track-quality { top: 128px; height: 32px; }
.atr-track-group strong { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; color: #dce9e9; font-size: 18px; font-weight: 500; }
.atr-track-icon { --track-accent: var(--atr-cyan); display: block; flex: 0 0 32px; width: 32px; height: 32px; fill: none; stroke: var(--track-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atr-icon-posture circle { fill: var(--track-accent); stroke: none; }
.atr-track-group span { position: absolute; right: 0; color: #c5d7d9; }
.atr-state-standing { top: 4px; }
.atr-state-seated { top: 26px; }
.atr-state-supine { top: 48px; }
.atr-state-paced { top: 2px; }
.atr-state-free { top: 24px; }
.atr-posture-line { stroke: var(--atr-gold); stroke-width: 4; }
.atr-breathing-line { stroke-width: 4; }
.atr-context-selection { fill: var(--atr-gold); stroke: #fff0ca; pointer-events: none; }
.atr-context-point { cursor: pointer; outline: none; }
.atr-context-hit { fill: transparent; stroke: none; }
.atr-context-connection { pointer-events: none; }
.atr-context-point:focus-visible .atr-context-hit { stroke: var(--atr-gold); stroke-width: 1.5; }
.atr-quality, .atr-quality-cell, .atr-selection-panel dl > div:has(.atr-quality), .atr-filter-field[data-quality] { --atr-quality-color: #82979c; }
.atr-quality.good, .atr-quality-cell.good, .atr-selection-panel dl > div:has(.atr-quality.good), .atr-filter-field[data-quality=good] { --atr-quality-color: #63bc86; }
.atr-quality.caution, .atr-quality-cell.caution, .atr-selection-panel dl > div:has(.atr-quality.caution), .atr-filter-field[data-quality=caution] { --atr-quality-color: #dac66a; }
.atr-quality.limited, .atr-quality-cell.limited, .atr-selection-panel dl > div:has(.atr-quality.limited), .atr-filter-field[data-quality=limited] { --atr-quality-color: #db7d78; }
.atr-quality-cell { fill: var(--atr-quality-color); cursor: pointer; }
.atr-quality-selection { fill: none; stroke: #fff; pointer-events: none; }
.atr-chart-footer { display: flex; justify-content: flex-end; align-items: start; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--atr-border); color: #8fa9ae; font-size: 14px; }
.atr-legend-label { padding: 0; text-align: right; color: var(--atr-muted); font-size: 16px; }
.atr-legend-content { min-width: 0; padding: 0 8px; }
.atr-quality-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 24px; }
.atr-quality-legend .atr-quality { display: flex; align-items: center; min-height: 23px; color: #c5d7d9; font-size: 16px; }
.atr-quality { white-space: nowrap; }
.atr-quality::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--atr-quality-color); content: ''; }
.atr-quality-legend .atr-quality::before { flex: 0 0 5px; width: 5px; height: 12px; margin-right: 10px; border-radius: 1px; }
.atr-selection-panel { min-width: 0; min-height: 340px; padding: 14px; border: 1px solid #796842; border-radius: 8px; background: #102d32; }
.atr-selection-panel h4 { margin-bottom: 8px; }
.atr-selection-date { color: #bdd0d2; font-size: 14px; }
.atr-selection-value { display: block; margin: 8px 0 12px; color: var(--atr-gold); font-size: 28px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.analysis-trend-view .atr-selection-panel dl { gap: 8px; }
.analysis-trend-view .atr-selection-panel dl > div { position: relative; display: grid; gap: 0; padding-left: 40px; }
.atr-selection-panel .atr-track-icon { position: absolute; left: 0; top: 5px; }
.analysis-trend-view .atr-selection-panel dd { margin: 0; text-align: left; }
.atr-selection-panel .atr-quality { white-space: normal; }
.atr-selection-panel .atr-quality::before { display: none; }
.atr-no-data[hidden] { display: none; }
.atr-no-data { position: absolute; inset: 50px 0 auto; text-align: center; line-height: 1.8; color: #b3c7ca; }
.atr-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 580px), 1fr)); gap: 12px; }
.atr-details > div { min-width: 0; padding: 2px 12px; }
.atr-details .atr-summary-comparison { display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 5vw, 88px); column-gap: 12px; align-content: start; }
.atr-summary-heading { grid-area: 1 / 1; display: grid; gap: 4px; min-width: 0; }
.atr-summary-comparison > dl { grid-area: 2 / 1; }
.atr-trend-direction { grid-area: 1 / 2 / 3 / 3; align-self: center; text-align: center; color: var(--atr-gold); }
.atr-trend-direction svg { display: block; width: 100%; height: auto; max-height: 76px; }
.atr-trend-direction path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.atr-trend-direction > span { display: block; font-size: 32px; line-height: 64px; color: var(--atr-muted); }
.atr-trend-direction small { display: block; font-size: 12px; line-height: 15px; font-weight: 400; color: var(--atr-muted); }
.atr-details h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 22px; }
.atr-details .atr-summary-description { margin: 0; color: #d3e2e3; font-size: 14px; line-height: 18px; }
.atr-details h4 small { display: inline; margin: 0 0 0 8px; }
.atr-details .atr-period-heading { flex-wrap: wrap; gap: 6px 16px; }
.atr-period-title { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.atr-details .atr-period-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 14px; line-height: 18px; }
.atr-summary-count { white-space: nowrap; color: #dce9e9; }
.atr-details .atr-track-icon { flex-basis: 22px; width: 22px; height: 22px; }
.analysis-trend-view dl { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.analysis-trend-view dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.analysis-trend-view dt { color: var(--atr-muted); }
.analysis-trend-view dd { margin: 0 0 0 auto; text-align: right; color: #e1ecec; font-size: 16px; font-variant-numeric: tabular-nums; }
.analysis-trend-view .atr-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(32px, auto); gap: 2px 20px; font-size: 14px; line-height: 16px; }
.analysis-trend-view .atr-details dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: 0 8px; }
.analysis-trend-view .atr-details dt { min-width: 0; overflow-wrap: anywhere; }
.analysis-trend-view .atr-details dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px; min-width: 0; margin: 0; text-align: right; font-size: 17px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.atr-details dd small { display: block; color: var(--atr-muted); font-size: 13px; font-weight: 400; line-height: 14px; }
.atr-summary-range { font-size: inherit; }
.atr-summary-hint { position: relative; cursor: help; }
.atr-summary-hint > [role=tooltip] { display: none; position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); width: 260px; max-width: 80vw; padding: 8px 10px; border: 1px solid var(--atr-border); border-radius: 6px; background: #09242a; color: #e1ecec; font-size: 13px; line-height: 1.4; text-align: left; font-weight: 400; }
.atr-summary-hint:is(:hover, :focus) > [role=tooltip] { display: block; }
.atr-selection-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.atr-selection-actions button { padding: 0; border: 0; background: none; color: #91cbd2; font-size: 14px; text-align: left; }
.atr-filters { padding: 13px 16px 10px; container-type: inline-size; container-name: atr-filters; }
.atr-filter-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.atr-filter-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.atr-filter-heading h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.atr-filter-heading h3 .atr-track-icon { width: 26px; height: 26px; flex-basis: 26px; }
.atr-filter-heading p { font-size: 14px; color: var(--atr-muted); }
.atr-filter-heading > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #b1c5c7; font-size: 14px; }
.atr-filter-heading button { border: 1px solid #466167; border-radius: 5px; padding: 5px 10px; color: #c0d2d4; background: #18373c; }
.atr-filter-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 12px; }
.atr-filter-controls label { display: grid; gap: 4px; color: #b3c7c9; font-size: 14px; }
.atr-filter-controls select, .atr-filter-controls input:not([type=checkbox]) { width: 100%; height: 42px; padding-left: 42px; font-size: 16px; }
.atr-filter-controls .atr-filter-field { position: relative; flex: 1 1 175px; min-width: 0; }
.atr-filter-field .atr-track-icon { position: absolute; z-index: 1; left: 10px; top: 8px; width: 26px; height: 26px; pointer-events: none; }
.atr-filter-controls .atr-artifact-filter { --atr-artifact-number-width: 6.5rem; display: grid; grid-template-columns: 2.75rem minmax(0, var(--atr-artifact-number-width)) 2.75rem; justify-content: start; gap: 4px; flex-basis: 230px; }
.atr-filter-controls .atr-artifact-caption { grid-column: 2; justify-self: center; width: max-content; white-space: nowrap; display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.3; }
.atr-filter-controls .atr-artifact-caption .atr-track-icon { position: static; width: 20px; height: 20px; flex: 0 0 20px; }
.atr-artifact-editor { grid-column: 1 / -1; display: grid; grid-template-columns: 2.75rem minmax(0, var(--atr-artifact-number-width)) 2.75rem; align-items: center; justify-content: start; gap: 4px; min-width: 0; }
.atr-filter-controls .atr-artifact-filter input { grid-column: 2; grid-row: 1; box-sizing: border-box; min-width: 0; height: 44px; padding: .4rem .5rem; text-align: center; appearance: textfield; }
.atr-artifact-filter:has(.atr-filter-unit:not([hidden])) input { padding-right: 1.5rem; }
.atr-artifact-filter input::-webkit-inner-spin-button, .atr-artifact-filter input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.atr-artifact-step { min-width: 0; min-height: 44px; padding: 0; border: 1px solid var(--atr-line); border-radius: 5px; color: var(--atr-text-primary); background: var(--atr-surface-raised); font-size: 22px; cursor: pointer; }
.atr-artifact-step[data-artifact-step="-1"] { grid-column: 1; grid-row: 1; }
.atr-artifact-step[data-artifact-step="1"] { grid-column: 3; grid-row: 1; }
.atr-artifact-step:hover:not(:disabled) { border-color: var(--atr-active-line); }
.atr-artifact-step:focus-visible { outline: 2px solid var(--atr-active-line); outline-offset: 2px; }
.atr-artifact-step:disabled { opacity: .45; cursor: default; }
.atr-artifact-filter .atr-filter-unit { grid-column: 2; grid-row: 1; justify-self: end; margin-right: .5rem; z-index: 1; color: var(--atr-text-secondary); pointer-events: none; }
.atr-filter-unit[hidden] { display: none; }
.atr-filter-controls .atr-comparable { display: flex; flex: 0 1 230px; align-items: center; align-self: center; gap: 8px; color: #d2dfe0; font-size: 14px; }
.atr-comparable input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: #d6b36a; }
.atr-comparable small { display: block; margin-top: 4px; color: #8ca8ac; font-size: 14px; }
.atr-method-info { position: relative; }
.atr-method-info summary { list-style: none; padding: 5px 8px; border: 1px solid #466167; border-radius: 5px; color: #c0d2d4; cursor: pointer; white-space: nowrap; }
.atr-method-info summary::-webkit-details-marker { display: none; }
.atr-method-info summary:focus-visible { outline: 2px solid var(--atr-gold); outline-offset: 2px; }
.atr-method-info[open] summary { background: #18373c; }
.atr-method-info p { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 8px); width: min(360px, calc(100vw - 64px)); padding: 14px 16px; border: 1px solid #466167; border-radius: 8px; background: #102d32; box-shadow: 0 6px 22px #0005; color: #c5d7d9; font-size: 14px; line-height: 1.6; white-space: normal; }

/* Standalone synthetic preview uses the same component and existing brand asset. */
.analysis-demo-page { margin: 0; min-width: 0; min-height: 100dvh; color: #e5efef; background: #071f25; font: 16px system-ui, sans-serif; }
.analysis-demo-brand { margin-bottom: 28px; padding: 0 2px; font-family: Arial, sans-serif; }
.analysis-demo-wordmark { display: flex; align-items: baseline; gap: 8px; width: fit-content; max-width: 100%; padding-bottom: 1px; border-bottom: 3px solid #dbb76b; font-size: 36px; line-height: 1.15; letter-spacing: -1.3px; }
.analysis-demo-wordmark strong { color: #e5efef; font-weight: 700; }
.analysis-demo-wordmark span { color: #35bdc6; font-weight: 400; }
.analysis-demo-edition-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 4px; margin-top: 16px; }
.analysis-demo-version { color: #afc4c7; font-size: 13px; line-height: 1; transform: translateY(-3px); white-space: nowrap; }
.analysis-demo-edition { display: block; color: #dbb76b; font-size: 17px; line-height: 1.3; letter-spacing: 2.3px; }
/* Fixed width fits the longest Expert name plus EXP, unit, indentation and padding.
   Opening groups or switching Simple/Expert must not resize the chart. */
.analysis-demo-layout { display: grid; grid-template-columns: var(--demo-sidebar-width, 330px) minmax(0, 1fr); gap: 12px; margin: 14px; }
.analysis-demo-parameters { display: flex; flex-direction: column; padding: 20px 13px; border: 1px solid #285057; border-radius: 10px; background: #0c2a30; }
.analysis-demo-parameters h2 { margin: 12px 8px 18px; color: #e0ecec; font-size: 14px; font-weight: 400; letter-spacing: 1.3px; }
.analysis-demo-parameters button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 43px; margin: 3px 0; padding: 10px; color: #afc6ca; border: 0; border-radius: 5px; background: transparent; text-align: left; font: 16px system-ui, sans-serif; cursor: pointer; }
.analysis-demo-parameters button[aria-pressed=true] { color: #e6c583; background: #283b34; box-shadow: inset 2px 0 #dbb76b; }
.analysis-demo-parameters button:hover { background: #1c3b40; }
.analysis-demo-parameters button small { color: #819ea4; font-size: 14px; }
#demo-parameters button { min-height: 32px; margin: 1px 0; padding: 5px 10px; }
#demo-parameters button small { flex-shrink: 0; }
.analysis-demo-parameters .atr-parameter-group-title, .analysis-results-host .atr-parameter-group-title { margin: 10px 8px 4px; padding-top: 8px; border-top: 1px solid #285057; color: #e0ecec; font-size: 14px; font-weight: 600; line-height: 1.4; }
.atr-parameter-mode { display: flex; gap: 4px; margin: 0 0 10px; padding: 3px; border: 1px solid #36575d; border-radius: 7px; }
.atr-parameter-mode button, .analysis-demo-parameters .atr-parameter-mode button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; width: auto; min-height: 32px; margin: 0; padding: 5px 8px; border: 0; border-radius: 4px; font: inherit; color: #c5d7d9; background: transparent; box-shadow: none; }
.atr-parameter-mode button[aria-pressed=true], .analysis-demo-parameters .atr-parameter-mode button[aria-pressed=true] { background: #23444a; color: #e5efef; box-shadow: none; }
.atr-parameter-mode button:disabled, .analysis-demo-parameters .atr-parameter-mode button:disabled { cursor: not-allowed; color: #91a9ad; background: transparent; }
.atr-parameter-mode button small { font-size: 12px; color: #91a9ad; }
.atr-parameter-mode button:focus-visible { outline: 2px solid #63bc86; outline-offset: 2px; }
.analysis-demo-actions { margin-top: auto; padding: 14px 9px 0; }
.analysis-demo-actions button { border: 1px solid #36575d; margin-top: 0; min-height: 33px; justify-content: center; }

/* Keep readable text at narrower desktop widths; controls get room instead of shrinking. */
@media (max-width: 1500px) {
  .atr-time-controls { margin-left: auto; }
  .atr-hero-art { width: 70%; }
}

/* Shared typography at every viewport width; summary columns follow their own container. */
:is(.analysis-trend-view, .analysis-demo-parameters, .analysis-results-host .results-parameter-panel) {
  --atr-text-primary: #e5efef; --atr-text-secondary: #c5d7d9; --atr-text-detail: #afc4c7;
  --atr-surface: #0c2a30; --atr-surface-raised: #102d32; --atr-surface-hover: #1c3b40;
  --atr-line: #285057; --atr-active-line: #796842; --atr-accent: #dbb76b;
  --atr-space-inline: 16px; --atr-space-group: 12px; --atr-space-small: 8px;
  --atr-type-label: 14px; --atr-type-value: 16px; --atr-type-detail: 13px;
}
.atr-details { gap: var(--atr-space-group); }
.atr-details > div { container: atr-summary / inline-size; display: grid; align-content: start; row-gap: 6px; padding: 10px var(--atr-space-inline); border-color: color-mix(in srgb, var(--atr-line) 70%, transparent); }
.atr-details .atr-summary-comparison { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.atr-summary-comparison .atr-summary-heading { row-gap: 14px; }
.atr-details h4 { font-size: 19px; line-height: 22px; font-weight: 600; color: var(--atr-text-primary); }
.atr-details .atr-summary-description { font-size: 14px; line-height: 18px; font-weight: 400; color: var(--atr-text-secondary); }
.analysis-trend-view .atr-details dl { align-self: start; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 10px var(--atr-space-inline); margin-top: 2px; font-size: var(--atr-type-label); line-height: 18px; }
.analysis-trend-view .atr-details dl > div { grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 2; align-content: start; gap: 3px; }
.analysis-trend-view .atr-details dt { align-self: end; color: var(--atr-text-secondary); }
.analysis-trend-view .atr-details dd { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 2px; font-size: var(--atr-type-value); line-height: 20px; font-weight: 600; color: var(--atr-text-primary); }
.atr-details dd small { align-self: baseline; font-size: var(--atr-type-detail); line-height: 18px; color: var(--atr-text-detail); }
/* Retain the previous two-line space, keeping the card height stable with inline details. */
.analysis-trend-view .atr-details :is([data-summary=mean-distance], [data-summary=trend-distance]) dd { flex-direction: row; align-items: baseline; align-content: start; column-gap: 6px; min-height: 40px; }
.analysis-trend-view .atr-summary-comparison :is([data-summary=mean-distance], [data-summary=trend-distance]) dd { min-height: 29px; }
.analysis-trend-view .atr-summary-comparison dl { margin-top: 0; }
.analysis-trend-view .atr-summary-comparison dl > div { row-gap: 6px; }
.atr-details .atr-summary-period { grid-template-columns: minmax(0, 1fr) 76px; column-gap: var(--atr-space-small); row-gap: 10px; }
.atr-summary-period > h4 { grid-area: 1 / 1 / 2 / -1; }
.atr-summary-period > p { grid-area: 2 / 1; }
.atr-summary-period > dl { grid-area: 3 / 1; }
.atr-summary-period > .atr-trend-direction { grid-area: 1 / 2 / 4 / 3; }
.atr-details .atr-summary-period > h4 { margin-bottom: 4px; }
.analysis-trend-view .atr-summary-period dl { margin-top: 0; }
.analysis-trend-view .atr-summary-period dl > div { row-gap: 6px; }
.analysis-trend-view .atr-summary-period dd { min-height: 29px; }
.atr-details .atr-period-meta { color: var(--atr-text-secondary); }
.atr-period-meta, .atr-selection-date, .atr-summary-description, .atr-filter-heading [role=status], .atr-dates, .atr-filter-field input, .atr-filter-field select { font-variant-numeric: tabular-nums; }
.atr-selection-panel { border-color: var(--atr-line); border-left-width: 2px; padding-left: 13px; background: var(--atr-surface); }
.atr-selection-panel[data-selected=true] { border-left-color: var(--atr-gold); background: var(--atr-surface-raised); }
.atr-point:hover circle:not(.atr-hit) { stroke-width: 2; fill: var(--atr-cyan); }
.atr-point.selected:hover circle:not(.atr-hit) { fill: var(--atr-gold); }
.atr-filter-heading p, .atr-filter-heading > div:last-child, .atr-filter-controls label { font-size: var(--atr-type-label); }
.atr-filter-heading h3 { font-size: 19px; font-weight: 600; }
.atr-filters { padding-bottom: 9px; }
.atr-filter-controls .atr-comparable { font-size: var(--atr-type-label); gap: var(--atr-space-small); color: var(--atr-text-secondary); border-radius: 5px; }
.atr-comparable:has(input:checked) { color: var(--atr-text-primary); font-weight: 600; background: var(--atr-surface-raised); outline: 1px solid var(--atr-active-line); outline-offset: 3px; }
.atr-comparable input { accent-color: var(--atr-gold); }
.atr-comparable:has(input:disabled) { color: var(--atr-text-detail); cursor: default; }
.atr-comparable:not(:has(input:disabled)):hover { background: var(--atr-surface-hover); }
.atr-filter-field select:not(:focus), .atr-filter-field input:not(:focus), .atr-dates input:not(:focus), .atr-dates select:not(:focus) { border-color: var(--atr-line); }
.atr-filter-field[data-active=true] select:not(:focus), .atr-artifact-filter[data-has-limit=true] input:not(:focus) { border-color: var(--atr-active-line); background: var(--atr-surface-raised); color: var(--atr-text-primary); font-weight: 500; }
.atr-filter-field select:hover, .atr-filter-field input:hover, .atr-dates input:hover, .atr-dates select:hover { background-color: var(--atr-surface-hover); }
.atr-filter-heading button:hover, .atr-method-info summary:hover { background: var(--atr-surface-hover); }
.analysis-results-host #result-parameter-list button:not(.active):hover, #demo-parameters button:not([aria-pressed=true]):hover { background: var(--atr-surface-hover); color: var(--atr-text-primary); }
#demo-parameters button[aria-pressed=true]:hover { background: #283b34; }
#demo-parameters button small, .analysis-results-host #result-parameter-list button small { color: var(--atr-text-detail); font-variant-numeric: tabular-nums; }
.atr-parameter-mode { border-color: color-mix(in srgb, var(--atr-line) 70%, transparent); }
/* Use a single row of label/value groups only when the actual card has room. */
@container atr-summary (min-width: 740px) {
  .analysis-trend-view .atr-details dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .analysis-trend-view .atr-summary-period dl { grid-column: 1 / -1; grid-template-columns: repeat(4, fit-content(22%)) 76px; justify-content: space-between; column-gap: 10px; }
  /* The fifth track reserves the arrow width, so all four intervening gaps share the free space. */
  .analysis-trend-view .atr-summary-comparison dl { grid-column: 1; grid-template-columns: fit-content(16%) fit-content(28%) fit-content(28%) max-content; justify-content: space-between; column-gap: 10px; }
}
.atr-details[hidden] { display: none; }
.atr-parameter-search { display: grid; gap: 4px; margin-block: 10px; font-size: .8rem; }
.atr-parameter-search input { width: 100%; min-width: 0; box-sizing: border-box; }
.atr-parameter-mode [aria-pressed="true"] { color: var(--accent, #e9be66); border-color: currentColor; }
.atr-selection-secondary { margin: 4px 0 10px; font-size: .8rem; }

.atr-parameter-section { min-width: 0; margin-block: 5px; }
.atr-parameter-section > summary { cursor: pointer; padding: 7px 4px; font-size: .85rem; font-weight: 700; }
.atr-parameter-section .atr-parameter-section { margin-inline-start: 20px; }
.atr-parameter-section .atr-parameter-section > summary { font-size: .8rem; font-weight: 400; }
:is(#demo-parameters, #result-parameter-list) .atr-parameter-section > button {
  margin-inline-start: 14px;
  width: calc(100% - 14px);
  box-sizing: border-box;
}
.atr-parameter-section button span { min-width: 0; overflow-wrap: anywhere; }

/* Keep related filters together; the bracket uses the existing gap above the controls. */
.atr-quality-filter-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: span 2; align-items: end; gap: 10px; min-width: 0; }
.atr-filter-and { position: absolute; top: -12px; left: 50%; width: min(55%, 220px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: var(--atr-muted, #b3c7c9); font-size: 10px; line-height: 10px; letter-spacing: .06em; cursor: help; }
.atr-filter-and::before, .atr-filter-and::after { content: ''; flex: 1; height: 6px; border-top: 1px solid #466167; }
.atr-filter-and::before { border-left: 1px solid #466167; border-top-left-radius: 3px; }
.atr-filter-and::after { border-right: 1px solid #466167; border-top-right-radius: 3px; }
.atr-filter-and:focus-visible { outline: 1px solid var(--atr-muted, #b3c7c9); outline-offset: 2px; border-radius: 3px; }


/* Reflow whole filter groups by available card width; every box uses the same track. */
@container atr-filters (max-width: 1250px) {
  .atr-filter-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}
@container atr-filters (max-width: 800px) {
  .atr-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Reserve the last row for the connected pair; protocol fills the preceding row. */
  .atr-quality-filter-pair { grid-row: 3; }
}
@container atr-filters (max-width: 440px) {
  .atr-filter-controls { grid-template-columns: minmax(0, 1fr); }
  .atr-quality-filter-pair { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr); }
}

.atr-parameter-badge { display: inline-block; margin-inline-start: .45em; padding: 0 .3em; border: 1px solid currentColor; border-radius: 3px; font-size: .65em; font-weight: 400; vertical-align: middle; color: inherit; }

/* Keep the badge with the name, outside the dedicated unit column. */
:is(#demo-parameters, #result-parameter-list) .atr-parameter-label {
  display: inline-flex; align-items: flex-start; flex-wrap: nowrap; min-width: 0;
}
:is(#demo-parameters, #result-parameter-list) .atr-parameter-name {
  min-width: 0; white-space: nowrap; overflow-wrap: normal;
}
:is(#demo-parameters, #result-parameter-list) .atr-parameter-badge {
  flex: 0 0 auto; margin-block-start: .12em; padding: .12em .3em;
  font-size: .6em; line-height: 1.1; white-space: nowrap;
  border-radius: 2px; border-color: transparent; background: rgb(150 180 185 / 14%);
  box-shadow: none; color: inherit;
}
:is(#demo-parameters, #result-parameter-list) .atr-parameter-unit {
  flex: 0 0 auto; margin-inline-start: auto;
}

/* Touch explanations live in the top layer, including inside the results dialog.
   Existing mouse titles and layout are untouched. */
.atr-touch-help {
  position: fixed; inset: auto 12px 12px; margin: 0 auto; box-sizing: border-box;
  width: min(440px, calc(100vw - 24px)); padding: 16px;
  border: 1px solid #557875; border-radius: 8px;
  background: #102d32; color: #e5eeec; box-shadow: 0 6px 24px #0006;
  font: 15px/1.5 system-ui, sans-serif; white-space: pre-line; overflow-wrap: anywhere;
}
.atr-touch-help button {
  display: block; margin: 12px 0 0 auto; min-height: 44px; padding: 8px 16px;
  border: 1px solid #557875; border-radius: 5px; background: #174342; color: inherit;
  font: inherit;
}

/* Readable, single-line parameter navigation; retain existing row padding and indents. */
:is(#demo-parameters, #result-parameter-list) .atr-parameter-section > summary {
  font-size: 15px; line-height: 20px; white-space: nowrap;
}
:is(#demo-parameters, #result-parameter-list) .atr-parameter-group-title {
  font-size: 15px; white-space: nowrap;
}
#demo-parameters button, .analysis-results-host #result-parameter-list button {
  font-size: 17px; line-height: 22px; white-space: nowrap;
}
:is(#demo-parameters, #result-parameter-list) .atr-parameter-label { flex-shrink: 0; }
:is(.analysis-demo-parameters, .results-parameter-panel) .atr-parameter-search { font-size: 14px; }

/* Local demo-only layout measuring aid; not part of the patient results view. */
.demo-width-review { margin: 14px; padding: 12px 16px; border: 1px solid #285057; border-radius: 8px; color: #b6cccf; font: 14px/1.5 system-ui, sans-serif; }
.demo-width-review label { margin-inline: 20px 8px; }
.demo-width-review input { width: 76px; padding: 5px; color: inherit; background: #09242a; border: 1px solid #557875; }
.demo-width-review button { padding: 5px 10px; color: inherit; background: #174342; border: 1px solid #557875; border-radius: 4px; }
.demo-width-review p { margin: 8px 0; font-variant-numeric: tabular-nums; }
body:has(.analysis-trend-view[data-mobile=true]) .demo-width-review { display: none; }

/* The host's available width controls navigation; chart reflow uses its own container. */
.atr-parameter-disclosure-toggle { display: none; }
.analysis-demo-parameters > .atr-parameter-disclosure { height: 100%; }
.analysis-demo-parameters .atr-parameter-disclosure-content { display: flex; flex-direction: column; min-height: 100%; }
.analysis-demo-layout[data-compact-parameters="true"],
.analysis-results-host #results-content[data-compact-parameters="true"]:not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
[data-compact-parameters="true"] > :is(.analysis-demo-parameters, .results-parameter-panel) { grid-column: 1; grid-row: auto; padding: 12px; }
[data-compact-parameters="true"] .atr-parameter-disclosure-toggle { display: list-item; cursor: pointer; font-size: 16px; padding: 8px; }
[data-compact-parameters="true"] .atr-parameter-disclosure-content { min-height: 0; padding-top: 12px; }
[data-compact-parameters="true"] :is(#demo-parameters, #result-parameter-list) .atr-parameter-name { white-space: normal; }
[data-compact-parameters="true"] :is(#demo-parameters, #result-parameter-list) .atr-parameter-label { flex-shrink: 1; }
.analysis-trend-view { container: atr-view / inline-size; }
@container atr-view (max-width: 1240px) {
  .atr-toolbar { grid-template-columns: minmax(0, 1fr); }
  .atr-time-grid { grid-template-columns: 180px minmax(0, 1fr); }
  .atr-main-labels { display: contents; }
  .atr-main-row .atr-selection-panel { grid-column: 1 / -1; grid-row: 1; min-height: 0; margin-bottom: 16px; }
  .atr-main-row .atr-axis { grid-column: 1; grid-row: 2; width: 72px; justify-self: end; }
  .atr-main-row .atr-main-plot { grid-column: 2; grid-row: 2; }
  .atr-selection-panel dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .atr-track-group strong { left: 0; gap: 4px; font-size: 14px; max-width: 108px; }
  .atr-track-group .atr-track-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .atr-track-group span { font-size: 13px; }
  .atr-dates { flex-wrap: wrap; }
  .atr-plot-heading { padding-left: 0; }
}

/* Very narrow summary cards keep complete labels above their values. */
@container atr-summary (max-width: 420px) {
  .analysis-trend-view .atr-details dl { grid-template-columns: minmax(0, 1fr); }
  .analysis-trend-view .atr-details dt { overflow-wrap: normal; }
}
/* Reduced AP6 mobile composition. The host-provided atr-view width is decisive. */
.atr-mobile-actions, .atr-mobile-presets, .atr-selection-mobile-title { display: none; }
.atr-mobile-details { display: contents; }
.atr-mobile-details > summary { display: none; }
.atr-mobile-details[hidden] { display: none; }
.atr-mobile-dialog:not([open]) { display: none; }
.atr-mobile-dialog {
  box-sizing: border-box; width: min(620px, calc(100% - 20px)); max-width: calc(100% - 20px);
  max-height: calc(100dvh - 20px); padding: 16px; margin: auto; overflow-y: auto;
  border: 1px solid #557875; border-radius: 10px; background: #0c2a30; color: #e5efef;
  font: 16px/1.45 system-ui, sans-serif; color-scheme: dark;
}
.atr-mobile-dialog::backdrop { background: #001014b8; }
.atr-mobile-dialog-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.atr-mobile-dialog-heading h2 { font: 600 20px/1.3 system-ui, sans-serif; margin: 0; }
.atr-mobile-dialog button, .atr-mobile-actions button, .atr-mobile-presets button {
  min-height: 44px; padding: 8px 12px; border: 1px solid #557875; border-radius: 5px;
  color: #e5efef; background: #102d32; font: inherit; cursor: pointer; overflow-wrap: anywhere;
}
.atr-mobile-dialog :is(input, select) { max-width: 100%; min-height: 44px; font: inherit; }
.atr-mobile-dialog .atr-dates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
.atr-mobile-dialog .atr-dates::before { content: 'Exakter Zeitraum'; font-weight: 600; }
.atr-mobile-dialog .atr-dates input, .atr-mobile-dialog .atr-dates select { width: 100% !important; }
.atr-mobile-dialog .atr-dates > span { display: none; }
.atr-mobile-dialog .atr-filter-controls, .atr-mobile-dialog .atr-quality-filter-pair { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; gap: 14px; }
.atr-mobile-dialog .atr-filter-heading { display: grid; gap: 12px; }
.atr-mobile-dialog .atr-filter-heading > div { display: flex; flex-wrap: wrap; gap: 10px; }
.atr-mobile-dialog .atr-filters { padding: 0; border: 0; }
.atr-mobile-dialog .atr-filter-field { min-height: 44px; min-width: 0; }
.atr-mobile-dialog .atr-filter-field select { width: 100%; }
.atr-mobile-dialog .atr-method-info p { position: static; width: auto; max-width: 100%; }
.atr-mobile-dialog .atr-parameter-disclosure-content { padding-top: 0; }
.atr-mobile-dialog :is(.brand, .analysis-demo-brand, #demo-regenerate) { display: none; }
.atr-mobile-dialog :is(#demo-parameters, #result-parameter-list) button { width: 100%; white-space: normal; min-height: 44px; }
.atr-mobile-dialog :is(#demo-parameters, #result-parameter-list) .atr-parameter-label { flex-shrink: 1; }
.atr-mobile-dialog :is(#demo-parameters, #result-parameter-list) .atr-parameter-name { white-space: normal; overflow-wrap: anywhere; }
.atr-mobile-dialog :is(#demo-parameters, #result-parameter-list) summary { min-height: 44px; padding-block: 12px; white-space: normal; }
.atr-mobile-dialog :focus-visible { outline: 2px solid #dbb76b; outline-offset: 2px; }
/* The only JS width state manages modal lifecycle and the external parameter panel. */
:is(.analysis-demo-parameters, .results-parameter-panel)[data-mobile=true] { display: contents !important; }
:is(.analysis-demo-parameters, .results-parameter-panel)[data-mobile=true] > .atr-parameter-disclosure { display: none; }
@container atr-view (max-width: 750px) {
  .atr-hero { min-height: 0; }
  .atr-hero-art, .analysis-trend-view .atr-hero-motto { display: none; }
  .atr-hero-copy { padding: 14px; }
  .atr-hero-title { gap: 8px; margin-bottom: 12px; }
  .analysis-trend-view h2 { font-size: 24px; }
  .atr-demo-badge { font-size: 12px; letter-spacing: 0; }
  .atr-metadata { width: 100%; padding: 0; gap: 10px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; }
  .atr-metadata > div { min-height: 0; }
  .atr-metadata span { margin-bottom: 2px; font-size: 13px; }
  .atr-metadata strong { font-size: 15px; }
  .atr-chart { display: flex; flex-direction: column; padding: 12px; }
  .atr-toolbar { display: contents; }
  .atr-toolbar > h3 { display: none; }
  .atr-plot-heading { order: 2; margin: 12px 0 4px; gap: 6px; }
  .atr-time-controls { flex: 1 1 auto; }
  .atr-toolbar .atr-dates { display: none; }
  .atr-main-row { order: 1; display: contents; }
  .atr-main-row .atr-selection-panel { order: 0; margin: 0; min-height: 0; }
  .atr-selection-desktop-title { display: none; }
  .atr-selection-mobile-title { display: inline; }
  .atr-selection-panel {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto; column-gap: 16px; padding: 16px;
  }
  .atr-selection-panel h4 { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; font-size: 18px; margin-bottom: 6px; }
  .atr-selection-value { grid-column: 1; grid-row: 2; font-size: 36px; margin: 8px 0; }
  .atr-selection-date { grid-column: 1; grid-row: 3; margin: 0; }
  .atr-selection-secondary { grid-column: 1; grid-row: 4; }
  .atr-selection-actions { grid-column: 1 / -1; grid-row: 5; }
  .atr-selection-panel dl {
    grid-column: 2; grid-row: 1 / 5; align-content: center; margin: 0;
    grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: 14px;
    padding-left: 16px; border-left: 1px solid var(--atr-line);
  }
  .atr-selection-panel dl > div { min-width: 0; }
  .atr-selection-panel dd { overflow-wrap: anywhere; }
  .atr-selection-panel .atr-track-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .atr-mobile-presets { display: flex; flex-wrap: wrap; gap: 6px; order: 1; margin-top: 12px; }
  .atr-mobile-presets button { flex: 1 1 44px; padding-inline: 6px; border-radius: 999px; font-size: 16px; }
  .atr-mobile-presets button[aria-pressed=true] { border-color: #dbb76b; background: #3a3927; color: #f2cf88; }
  .atr-main-labels { display: contents; }
  .atr-main-row .atr-axis { order: 3; width: 60px; height: 280px; align-self: flex-start; }
  .atr-main-row .atr-main-plot { order: 4; margin-left: 60px; margin-top: -280px; }
  .atr-main, .atr-axis svg { height: 280px; }
  .atr-chart-legend { gap: 12px; font-size: 13px; flex-wrap: wrap; }
  .atr-navigator-row { order: 5; grid-template-columns: 60px minmax(0, 1fr); }
  .atr-navigator-row .atr-track-title { grid-column: 1 / -1; height: auto; justify-content: flex-start; padding: 0 0 6px; font-size: 14px; }
  .atr-navigator-wrap { grid-column: 2; min-width: 0; }
  .atr-context-row, .atr-chart-footer { display: none; }
  .atr-mobile-details { display: block; min-width: 0; }
  .atr-mobile-details > summary { display: list-item; min-height: 44px; padding: 12px; border: 1px solid #285057; border-radius: 6px; cursor: pointer; }
  .atr-mobile-details > .atr-details { margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
  .analysis-trend-view .atr-details dl { grid-template-columns: minmax(0, 1fr); }
  .atr-details .atr-summary-period { grid-template-columns: minmax(0, 1fr); }
  .atr-summary-period > .atr-trend-direction { grid-area: auto; justify-self: end; }
  .atr-summary-period > h4, .atr-summary-period > p, .atr-summary-period > dl { grid-area: auto; }
  .analysis-trend-view > .atr-filters { display: none; }
  .atr-mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .atr-mobile-dialog .atr-filters { display: block; }
}
/* Keep the sketch's two columns only while both retain readable space. */
@container atr-view (min-width: 540px) and (max-width: 750px) {
  .atr-metadata { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.2fr); }
  .atr-metadata > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .atr-metadata > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .atr-metadata > div:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .atr-metadata > div:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
}
@container atr-view (max-width: 420px) {
  .atr-selection-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .atr-selection-panel dl {
    grid-column: 1; grid-row: 5; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0; border-top: 1px solid var(--atr-line); padding: 12px 0 0; margin-top: 12px;
  }
  .atr-selection-actions { grid-row: 6; }
}
@container atr-view (max-width: 380px) {
  .atr-metadata { grid-template-columns: minmax(0, 1fr); }
  .atr-selection-panel dl { grid-template-columns: minmax(0, 1fr); }
}
:is(#demo-parameters, #result-parameter-list) button.atr-mobile-parameter-info { display: none; }
.atr-mobile-dialog :is(#demo-parameters, #result-parameter-list) button.atr-mobile-parameter-info {
  display: block; width: auto; min-width: 60px; margin: 0 0 10px auto; font-size: 14px;
}
.atr-mobile-dialog .atr-touch-help { max-height: calc(100dvh - 24px); overflow: auto; }
/* Text enlargement grows lines and cards instead of overlapping or clipping them. */
@container atr-view (max-width: 750px) {
  .analysis-trend-view h2 { overflow-wrap: anywhere; min-width: 0; }
  .analysis-trend-view .atr-details :is(h4, p, dl, dt, dd, small),
  .atr-selection-panel :is(h4, p, dl, dt, dd) { line-height: 1.4; }
  .atr-period-title { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .atr-period-heading { flex-wrap: wrap; }
  .atr-summary-hint { white-space: normal; }
  .atr-mobile-details > summary { overflow-wrap: anywhere; }
}

/* Explore is one quiet navigation target, independent of the selected HRV parameter. */
.atr-selection-panel { position: relative; }
.atr-selection-panel:has(.atr-explore) h4 { padding-right: 94px; }
.atr-selection-panel .atr-explore {
  position: absolute; top: 4px; right: 8px; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 88px; padding: 6px 8px;
  border: 0; border-radius: 4px; background: none; box-shadow: none;
  color: var(--atr-gold); font: 600 16px/1.3 system-ui, sans-serif; cursor: pointer;
}
.atr-explore::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 65% 50%, #dbb76b26, transparent 70%),
    radial-gradient(ellipse at 24% 70%, #44c5d410, transparent 60%),
    radial-gradient(circle at 80% 25%, #e6c77566 0 1px, transparent 2px),
    radial-gradient(circle at 20% 65%, #e6c77544 0 1px, transparent 2px);
  opacity: .7; transition: opacity 180ms ease;
}
.atr-explore span { transition: transform 180ms ease; }
@media (hover: hover) {
  .atr-selection-panel .atr-explore:hover { color: #ffe0a0; background: none; }
  .atr-explore:hover::before { opacity: 1; }
  .atr-explore:hover span { transform: translateX(2px); }
}
.atr-selection-panel .atr-explore:focus-visible { outline: 2px solid #63bc86; outline-offset: 2px; box-shadow: 0 0 0 4px #63bc8626; }
@container atr-view (max-width: 750px) {
  .atr-selection-panel:has(.atr-explore) h4 { padding-right: 0; }
  .atr-selection-panel .atr-explore { position: relative; top: auto; right: auto; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .atr-selection-panel:has(.atr-explore) dl { grid-row: 2 / 5; }
}
@container atr-view (max-width: 420px) {
  .atr-selection-panel .atr-explore { grid-column: 1; grid-row: 7; }
  .atr-selection-panel:has(.atr-explore) dl { grid-row: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .atr-explore::before, .atr-explore span { transition: none; }
  .atr-explore:hover span { transform: none; }
}

/* Shared reference art direction: the mist intentionally extends beyond the card border. */
:is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel .atr-explore {
  font-size: 18px; color: #efc878; overflow: visible;
  min-width: 44px; padding-inline: 4px; gap: 0;
  text-shadow: 0 0 12px #edbc5833;
}
:is(.analysis-demo-page, .analysis-results-host) .atr-explore::before {
  inset: auto; width: var(--atr-point-art-width, 224px); height: var(--atr-point-art-height, 126px); right: -14px; top: 50%;
  transform: translateY(-50%);
  background: url('./assets/explore-mist.svg') center / contain no-repeat;
  opacity: .85;
}
:is(.analysis-demo-page, .analysis-results-host) .atr-explore span { display: none; }
/* Keep the date intact; the compact entry accompanies the selected value. */
@container atr-view (min-width: 1241px) {
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-content: start; column-gap: 6px;
  }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) h4 {
    grid-column: 1 / -1; grid-row: 1; padding-right: 0;
  }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) .atr-selection-date {
    grid-column: 1 / -1; grid-row: 2; align-self: center; margin: 0; min-width: 0;
  }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel .atr-explore {
    position: relative; top: auto; right: auto; grid-column: 2; grid-row: 3;
    align-self: center; justify-self: end; padding-inline: 4px;
  }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) .atr-selection-value { grid-column: 1; grid-row: 3; }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) .atr-selection-secondary { grid-column: 1 / -1; grid-row: 4; }
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel:has(.atr-explore) dl { grid-column: 1 / -1; grid-row: 5; }
}
@media (hover: hover) {
  :is(.analysis-demo-page, .analysis-results-host) .atr-explore:hover::before { opacity: 1; }
}

/* Reference: a fine arrow below the label keeps the entry narrow. */
@container atr-view (min-width: 751px) and (max-width: 1240px) {
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel .atr-explore { top: 14px; }
}
:is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel .atr-explore { flex-direction: column; gap: 0; padding-block: 2px; }
:is(.analysis-demo-page, .analysis-results-host) .atr-explore span { display: block; font-size: 23px; font-weight: 400; line-height: .8; }
@keyframes atr-explore-reveal {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.analysis-demo-page, .analysis-results-host) .atr-selection-panel .atr-explore { animation-duration: 1ms !important; }
}

/* Reference desktop: the same Explore entry sits between parameter and date controls. */
:is(.analysis-demo-page, .analysis-results-host) :is(.atr-plot-heading > .atr-explore, .atr-point-explore) {
  position: relative; isolation: isolate; flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 2px 10px;
  border: 0; border-radius: 4px; background: none; box-shadow: none;
  color: #efc878; font: 600 18px/1.3 system-ui, sans-serif;
  text-shadow: 0 0 12px #edbc5833; cursor: pointer; overflow: visible;
}
:is(.analysis-demo-page, .analysis-results-host) :is(.atr-plot-heading > .atr-explore, .atr-point-explore):focus-visible { outline: 2px solid #63bc86; outline-offset: 2px; }
@media (hover: hover) {
  :is(.analysis-demo-page, .analysis-results-host) :is(.atr-plot-heading > .atr-explore, .atr-point-explore):hover { color: #ffe0a0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.analysis-demo-page, .analysis-results-host) :is(.atr-plot-heading > .atr-explore, .atr-point-explore) { animation-duration: 1ms !important; }
}

.analysis-trend-view[data-point-explore="true"] .atr-chart { position: relative; }
.analysis-trend-view[data-point-explore="true"] .atr-point-explore {
  position: absolute; z-index: 5; right: auto; animation: atr-explore-reveal 250ms ease both;
}
.analysis-results-host .atr-point-explore::before { pointer-events: auto; cursor: pointer; }

@container atr-view (min-width: 1241px) {
  :is(.analysis-demo-page, .analysis-results-host) .atr-plot-heading:has(> .atr-explore) { flex-wrap: nowrap; }
  :is(.analysis-demo-page, .analysis-results-host) .atr-plot-heading > .atr-explore { margin-inline: auto; }
  :is(.analysis-demo-page, .analysis-results-host) .atr-plot-heading:has(> .atr-explore) > .atr-time-controls {
    flex: 0 1 auto; margin-left: 0;
  }
}

/* Product integration: one AP6 view in the existing page or patient dialog.
   Reset all legacy chart grid tracks, including those from compact-height rules. */
#patient-results-dialog.results-dialog {
  width: calc(var(--dialog-viewport-width, 100vw) - 28px); max-width: none;
}
:is(#personal-results-overview, #patient-results-dialog) #results-content:not([hidden]) {
  display: grid; grid-template: "parameters analysis" auto / 330px minmax(0, 1fr);
  align-items: start; align-content: start; gap: 12px; flex: none;
  min-width: 0; min-height: 0; overflow: visible;
}
:is(#personal-results-overview, #patient-results-dialog) #results-content[data-compact-parameters="true"]:not([hidden]) {
  grid-template: "parameters" auto "analysis" auto / minmax(0, 1fr);
}
:is(#personal-results-overview, #patient-results-dialog) #results-content:has(.results-parameter-panel[data-mobile="true"]):not([hidden]) {
  grid-template: "analysis" auto / minmax(0, 1fr);
}
:is(#personal-results-overview, #patient-results-dialog) #results-content[data-parameters-in-sidebar="true"]:not([hidden]) {
  grid-template: "analysis" auto / minmax(0, 1fr);
}
#analysis-results-view { grid-area: analysis; min-width: 0; }
:is(#personal-results-overview, #patient-results-dialog) .results-parameter-panel {
  grid-area: parameters; min-width: 0; margin: 0; padding: 18px 12px;
  color: #e5efef; background: #0c2a30; border: 1px solid #285057; border-radius: 10px;
}
.analysis-results-host .results-parameter-panel .section-label {
  margin: 0 0 12px; color: #d1e0e2; font-size: 16px; text-transform: none; letter-spacing: 0;
}
.analysis-results-host .atr-parameter-group-title { display: block; }
.analysis-results-host #result-parameter-list { display: grid; gap: 2px; margin-top: 10px; }
.analysis-results-host #result-parameter-list button {
  min-height: 32px; padding: 5px 10px; color: #b6cccf; font-size: 17px; line-height: 22px;
}
.analysis-results-host #result-parameter-list button.active {
  color: #e8c780; background: #283b34; box-shadow: inset 2px 0 #dbb76b;
}
.analysis-results-host #result-parameter-list button small { font-size: 14px; }
.analysis-results-host .results-parameter-panel input[type="search"] { width: 100%; min-width: 0; }
.analysis-results-host #result-parameter-list .atr-mobile-parameter-info { display: none; }
.analysis-results-host .atr-mobile-dialog #result-parameter-list .atr-mobile-parameter-info { display: block; }
.analysis-results-host .atr-mobile-dialog #result-parameter-list button { min-height: 44px; white-space: normal; }

/* The AP6 header is the results page header once measurements are available.
   Keep the introduction for loading/empty/access states; it must not push the
   actual analysis down by a second banner. These rules affect only this page. */
#page-results:has(#personal-results-overview:not([hidden]) #results-content:not([hidden])) > .results-hero {
  display: none;
}
#page-results:has(#personal-results-overview:not([hidden]) #results-content:not([hidden])) > #results-page-content {
  padding: 0;
}
#page-results:has(#personal-results-overview:not([hidden]) #results-content:not([hidden])) #results-page-content > #results-profile-toolbar > label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  flex: 0 1 36rem; margin: 0;
}
#page-results:has(#personal-results-overview:not([hidden]) #results-content:not([hidden])) #results-page-content > #results-profile-toolbar > label > :is(select, .custom-select) {
  flex: 1 1 15rem; min-width: 0; max-width: 100%;
}
#page-results:has(#personal-results-overview:not([hidden]) #results-content:not([hidden])) #personal-results-overview {
  margin-top: 0;
}

/* Use the demo's typography inside its two existing cards. Their original
   surfaces, artwork and container queries remain the shared AP6 source. */
#personal-results-overview :is(#analysis-results-view, #results-empty-view) > :is(.atr-hero, .atr-chart) {
  color: #e5efef; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.4;
}

/* Product-only profile selection reuses the original toolbar and its select. */
#personal-results-overview .atr-metadata:has(.atr-profile-slot) {
  grid-template-columns: minmax(0, 1.95fr) minmax(0, .7fr) minmax(0, 1.1fr) minmax(0, 1.6fr);
}
#personal-results-overview .atr-profile-slot > :is(span, strong) { display: none; }
#personal-results-overview .atr-profile-slot #results-profile-toolbar {
  display: block; width: 100%; min-width: 0; margin: 0; padding: 0;
}
#personal-results-overview .atr-profile-slot #results-profile-toolbar > label {
  display: grid; gap: 8px; width: 100%; min-width: 0; margin: 0;
  color: #afc4c7; font-size: 14px; line-height: 1.4;
}
#measure-profile-label, #results-profile-label { margin: 0; color: inherit; font: inherit; }
#personal-results-overview .atr-profile-slot #results-profile-toolbar > label > :is(select, .custom-select) {
  width: 100%; max-width: 420px; min-width: 0;
}
#personal-results-overview .atr-profile-slot :is(select, .custom-select-trigger) {
  min-width: 0; height: 42px; font-size: 18px; font-weight: 500;
}
#personal-results-overview .atr-profile-slot :is(.custom-select-value, .custom-select-chevron) {
  margin: 0; color: inherit; font: inherit;
}
#personal-results-overview .atr-metadata:has(.atr-profile-slot) > :is(:nth-child(2), :nth-child(3)) > strong {
  display: flex; align-items: center; min-height: max(42px, 3rem); line-height: 1.4;
}
@container atr-hero (max-width: 1100px) {
  #personal-results-overview .atr-metadata:has(.atr-profile-slot) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container atr-hero (max-width: 560px) {
  #personal-results-overview .atr-metadata:has(.atr-profile-slot) { grid-template-columns: minmax(0, 1fr); }
  #personal-results-overview .atr-metadata:has(.atr-profile-slot) > :is(:nth-child(2), :nth-child(3)) > strong { min-height: 0; }
}

/* Relocate the original account controls into the results card, preserving
   their handlers and the mobile navigation entry. Other pages retain the topbar. */
#dashboard-shell[data-results-header-actions="true"] > .workspace > .topbar { display: none; }
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 12px; margin-left: auto; min-width: 0; max-width: 100%;
}
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions .account-menu {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 12px; min-width: 0; max-width: 100%;
}
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions button {
  flex-shrink: 0; width: auto; min-height: 42px; padding: 10px 17px;
  border: 1px solid #cfb47966; border-radius: 6px;
  color: #e5eeec; background: #10262a; box-shadow: none; font: 15px/1.4 system-ui, sans-serif;
}
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions button:hover { background: #214343; }
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions .fullscreen-button {
  padding: 9px 12px; border-color: #338c87; color: #81c7bb;
}
:is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions #mobile-menu { display: none; }
@media (max-width: 950px) {
  :is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions #mobile-menu { display: block; }
}
@container atr-hero (max-width: 560px) {
  :is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions { flex-basis: 100%; margin-left: 0; }
}

/* An empty profile retains the same AP6 header and one empty history card.
   The real empty-state message/action are moved here, not copied. */
#page-results:has(#results-empty-view) > #results-page-content { padding: 0; }
#page-results:has(#results-empty-view) #personal-results-overview { margin-top: 0; }
#personal-results-overview #results-empty-view > :not(.atr-hero, .atr-chart),
#personal-results-overview #results-empty-view .atr-chart > :not(.results-empty-chart-heading, #results-empty) { display: none; }
#personal-results-overview #results-empty-view .atr-chart { min-height: 340px; }
#personal-results-overview #results-empty-view .results-empty-chart-heading { margin: 0 0 12px; }
#personal-results-overview #results-empty-view #results-empty {
  display: grid; justify-items: center; align-content: center; gap: 12px;
  width: 100%; max-width: none;
  min-height: 260px; margin: 0; padding: 24px 12px; border: 0; background: transparent;
}
#personal-results-overview #results-empty-view #results-empty > :is(h3, p) { margin: 0; }

/* One stable header frame across Results (including empty profiles), Setup and
   Measure. Narrow or short workspaces use natural height instead of clipping. */
#dashboard-shell { --app-header-height: 196px; --app-header-inset: 26px; --app-header-top: 22px; }
#dashboard-shell > .workspace { container: app-header-space / inline-size; }
#dashboard-shell[data-measure-header-actions="true"] > .workspace > .topbar { display: none; }
#dashboard-shell :is(#personal-results-overview .atr-hero, #page-setup .setup-hero, #page-measure .measurement-hero, #page-patients .patients-page-header) {
  box-sizing: border-box; height: var(--app-header-height); min-height: var(--app-header-height);
  align-items: flex-start; margin: 0; border: 1px solid #285057; border-radius: 10px;
  background-color: #0c2a30; font: 16px/1.4 system-ui, sans-serif;
}
#dashboard-shell :is(#personal-results-overview .atr-hero-copy, #page-setup .setup-hero > .setup-hero-copy, #page-measure .measurement-hero-copy, #page-patients .patients-hero-copy) {
  position: relative; left: auto; top: auto; width: 100%; min-width: 0;
  padding: var(--app-header-top) var(--app-header-inset);
}
#dashboard-shell :is(#personal-results-overview .atr-hero-title, #page-setup .setup-hero-title, #page-measure .measurement-hero-title, #page-patients .patients-hero-title) {
  display: flex; align-items: center; flex-wrap: wrap; min-height: 42px;
  margin: 0 0 20px; padding-right: 220px;
}
#dashboard-shell :is(#personal-results-overview, #page-setup, #page-measure, #page-patients) .atr-header-actions {
  position: absolute; top: var(--app-header-top); right: var(--app-header-inset);
  margin: 0; flex-basis: auto;
}
#dashboard-shell #page-measure #measure-heading {
  margin: 0; padding: 0; color: #e4bf74; font: 650 28px/1.4 system-ui, sans-serif;
  letter-spacing: -.5px; text-shadow: none;
}
#dashboard-shell #page-measure #measure-heading::after { display: none; }
#dashboard-shell #page-measure .measurement-hero,
#dashboard-shell #page-patients .patients-page-header { margin-bottom: 12px; }
#dashboard-shell #page-measure .measurement-hero-foreground { top: 50%; width: min(35%, 22rem); }
#dashboard-shell #page-measure .measurement-hero-background {
  inset: 0 0 0 auto; width: 65%; object-position: right center;
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
#dashboard-shell #page-measure .measurement-hero::after {
  z-index: 0; background: rgba(12, 42, 48, .35); pointer-events: none;
}
#dashboard-shell #page-measure .measurement-hero-copy { z-index: 1; }

/* Name and birth date share the measurement select, with management beside it. */
#dashboard-shell #page-measure .measure-profile-metadata {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-end; width: min(100%, 1120px); padding: 10px 0;
  border-radius: 6px; background: linear-gradient(90deg, #0c2a30ed 55%, #0c2a30b8 88%, #0c2a3000);
}
#dashboard-shell #page-measure .measure-profile-metadata > div { min-width: 0; }
#dashboard-shell #page-measure .measure-profile-choice { flex: 1 1 24rem; max-width: 32rem; padding: 0; }
#dashboard-shell #page-measure .measure-profile-choice > label {
  display: grid; gap: 8px; margin: 0; color: #afc4c7; font: 14px/1.4 system-ui, sans-serif;
}
#dashboard-shell #page-measure .measure-profile-choice > label > :is(select, .custom-select) { width: 100%; max-width: none; min-width: 0; }
#dashboard-shell #page-measure .measure-profile-choice :is(select, .custom-select-trigger) {
  min-width: 0; height: auto; min-height: 42px; font-size: 18px; font-weight: 500;
}
#dashboard-shell #page-measure .measure-profile-choice :is(.custom-select-value, .custom-select-option) {
  white-space: normal; overflow-wrap: normal; word-break: normal;
}
#dashboard-shell #page-measure #measure-profile-toolbar {
  flex: 0 1 auto; width: auto; align-items: flex-end; justify-content: flex-start;
  margin: 0; padding: 0;
}
#dashboard-shell #page-measure #measure-manage-profiles {
  width: auto; max-width: 100%; min-width: 0; min-height: 42px; height: auto;
  padding-block: 0; line-height: 1.25; white-space: normal;
  border-color: #36575d; color: #c5d7d9; background: transparent; box-shadow: none;
}
#dashboard-shell #page-measure #measure-manage-profiles:hover:not(:disabled) {
  border-color: #63bc86; color: #eef4f2; background: transparent; box-shadow: none;
}
#dashboard-shell #personal-results-overview .atr-metadata > div:not(.atr-profile-slot) > strong {
  min-height: 2.8em;
}
/* Include the card border/insets around the hero's own 1100px reflow point. */
@container app-header-space (max-width: 1120px) {
  #dashboard-shell :is(#personal-results-overview .atr-hero, #page-setup .setup-hero, #page-measure .measurement-hero, #page-patients .patients-page-header) {
    height: auto; min-height: clamp(100px, 22dvh, var(--app-header-height));
  }
}
@container app-header-space (max-width: 560px) {
  #dashboard-shell :is(#personal-results-overview .atr-hero-title, #page-setup .setup-hero-title, #page-measure .measurement-hero-title, #page-patients .patients-hero-title) {
    padding-right: 0; padding-top: 56px;
  }
  #dashboard-shell #personal-results-overview .atr-metadata > div:not(.atr-profile-slot) > strong { min-height: 0; }
}
@media (max-height: 600px) {
  #dashboard-shell :is(#personal-results-overview .atr-hero, #page-setup .setup-hero, #page-measure .measurement-hero, #page-patients .patients-page-header) {
    height: auto; min-height: 100px;
  }
  #dashboard-shell :is(#page-setup .setup-hero > .setup-hero-copy, #page-measure .measurement-hero-copy, #page-patients .patients-hero-copy) {
    padding-top: var(--app-header-top); padding-bottom: 12px;
  }
}

/* Measurement choices keep the header's edges, with a compact preferred ratio.
   Content can increase both cards' height without clipping notices/actions. */
#dashboard-shell[data-active-page="measure"] .workspace-content { padding-bottom: 0; }
#dashboard-shell #page-measure:not([hidden]) {
  display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 100%;
}
#dashboard-shell #page-measure .measurement-hero { flex: 0 0 auto; margin-bottom: 0; }
#dashboard-shell #page-measure .measure-profile-content:not(:has(#measure-first-profile:not([hidden]), #measure-profile-message:not([hidden]):not(:empty))) {
  display: none;
}
#dashboard-shell #page-measure #measure-actions {
  flex: 0 0 auto; width: 100%; max-width: none; margin: 0;
  gap: 12px; grid-auto-rows: minmax(min-content, 1fr);
}
#dashboard-shell #page-measure #measure-actions > :is(.measurement-option, .measurement-live-option) {
  aspect-ratio: 5 / 2; height: auto; min-height: min-content;
}
#dashboard-shell #page-measure #measure-actions .measurement-live-option > .measurement-option {
  flex: 1 0 auto; height: auto; min-height: min-content;
}
/* A blocked live tile also contains a notice and setup action below the entry.
   Let that content determine its height instead of the preferred card ratio. */
#dashboard-shell #page-measure #measure-actions > .measurement-live-option.locked {
  aspect-ratio: auto;
}
#dashboard-shell #page-measure #measure-actions .measurement-availability {
  flex: 0 0 auto;
}
@container app-header-space (max-width: 760px) {
  #dashboard-shell #page-measure #measure-actions { grid-template-columns: minmax(0, 1fr); }
  #dashboard-shell #page-measure #measure-actions > :is(.measurement-option, .measurement-live-option) {
    aspect-ratio: auto;
  }
}