/* Analyses is a normalized timeline of measurements. Base remains the source browser. */
#analysesView { padding: 0; background: #f2f5f2; }
.analyses-page, .biomarker-detail-page { min-height: 100%; padding: 28px 30px 64px; }
.analyses-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.analyses-title-row h1, .biomarker-detail-head h1 { margin: 0; color: var(--deep); font: 700 34px/1.15 "PT Serif", Georgia, serif; letter-spacing: -.025em; }
.analyses-title-row p { margin: 6px 0 0; color: var(--muted); font-size: var(--font-small); }
.analysis-total { flex: 0 0 auto; color: var(--muted); font-size: var(--font-caption); }
.analysis-total strong { color: var(--ink); font-size: var(--font-ui); }
.analysis-mobile-summary, .mobile-marker-list, .biomarker-mobile-tabs { display: none; }
.analysis-section-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.analysis-section-head h2, .detail-section-title h2 { margin: 0; color: var(--deep); font-size: 1.25rem; line-height: 1.3; }
.analysis-section-head p, .detail-section-title p { margin: 3px 0 0; color: var(--muted); font-size: var(--font-caption); }

.pinned-dashboard { margin-bottom: 32px; }
.dashboard-marker-grid { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 13px; margin-top: 11px; }
.dashboard-marker-card { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 2px 5px rgba(28,57,57,.035); }
.dashboard-marker-card::before { content: ""; width: 4px; position: absolute; z-index: 2; inset: 0 auto 0 0; background: #8ea09d; }
.dashboard-marker-card.status-ok::before { background: var(--teal); }
.dashboard-marker-card.status-attention::before { background: var(--rose); }
.dashboard-marker-card.status-stale::before { background: var(--amber); }
.dashboard-marker-link { min-height: 230px; display: flex; flex-direction: column; padding: 17px 18px 13px 20px; color: inherit; text-decoration: none; }
.dashboard-marker-link:hover { background: #fbfcfb; }
.dashboard-marker-top { min-height: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 10px; padding-right: 43px; color: var(--muted); font-size: var(--font-caption); }
.dashboard-marker-card h3 { max-width: calc(100% - 34px); margin: 7px 0 7px; overflow: hidden; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-marker-value { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dashboard-marker-value > strong { color: var(--deep); font-size: 1.85rem; line-height: 1.25; }
.dashboard-marker-value > strong small, .compact-marker-result strong small, .detail-latest strong small, .measurement-row > strong small { margin-left: 5px; color: var(--muted); font-size: var(--font-caption); font-weight: 600; }
.dashboard-marker-value > span { color: var(--muted); font-size: var(--font-caption); font-weight: 700; }
.marker-sparkline { width: 100%; height: 75px; display: block; margin: auto 0 0; overflow: visible; }
.spark-area { fill: rgba(33,143,131,.075); stroke: none; }
.spark-line { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.marker-sparkline circle { fill: #f7faf9; stroke: #7f918e; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.marker-sparkline circle.status-ok { fill: var(--teal); stroke: #176d64; }
.marker-sparkline circle.status-attention { fill: var(--rose); stroke: #963f46; }
.marker-sparkline circle.status-stale { fill: var(--amber); stroke: #94651f; }
.marker-sparkline circle.latest-point { stroke-width: 3.5; filter: drop-shadow(0 1px 2px rgba(28,57,57,.22)); }
.sparkline-empty { min-height: 75px; display: grid; place-items: center; margin-top: auto; color: var(--faint); font-size: var(--font-caption); text-align: center; }
.dashboard-marker-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 10px; padding-top: 8px; color: var(--muted); font-size: var(--font-caption); }
.marker-date { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.marker-freshness { min-height: 24px; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; background: var(--amber-soft); color: #7c541b; font-size: var(--font-caption); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pin-button { width: 44px; height: 44px; position: absolute; z-index: 3; top: 8px; right: 7px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #849491; font-size: 21px; line-height: 1; }
.pin-button:hover { background: var(--surface-soft); color: var(--teal); }
.pin-button.pinned { color: #c58b24; }
.empty-dashboard { min-height: 164px; grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #b9c8c4; border-radius: 14px; background: rgba(255,255,255,.45); color: var(--muted); }
.empty-dashboard span { color: #b98526; font-size: 30px; }
.empty-dashboard strong { color: var(--ink); }
.empty-dashboard small { font-size: var(--font-caption); }

.all-markers { scroll-margin-top: 16px; }
.all-markers-head { align-items: end; }
.analysis-search { width: min(410px, 42vw); min-height: 46px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.analysis-search:focus-within { border-color: #7bad9f; box-shadow: 0 0 0 3px rgba(33,143,131,.09); }
.analysis-search > span { color: var(--faint); font-size: 23px; }
.analysis-search input { width: 100%; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--font-small); }
.analysis-filters { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 13px 0 14px; padding-bottom: 3px; scrollbar-width: none; }
.analysis-filters::-webkit-scrollbar { display: none; }
.analysis-filters button { min-height: 38px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 19px; background: white; color: var(--muted); font-size: var(--font-caption); font-weight: 600; }
.analysis-filters button:hover { border-color: #a8c0bb; color: var(--ink); }
.analysis-filters button.active { border-color: var(--deep); background: var(--deep); color: white; }
.analysis-filters button small { margin-left: 4px; font-size: .8125rem; opacity: .75; }
.filter-divider { width: 1px; height: 26px; flex: 0 0 auto; margin: 0 3px; background: var(--line); }
.marker-columns { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.marker-column { min-width: 0; overflow: hidden; border-radius: 13px; background: #e5ebe7; }
.marker-column > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.marker-column > header h3 { margin: 0; color: var(--ink); font-size: var(--font-small); line-height: 1.3; }
.marker-column > header span { min-width: 27px; height: 27px; display: grid; place-items: center; padding: 0 7px; border-radius: 14px; background: rgba(255,255,255,.72); color: var(--faint); font-size: .8125rem; font-weight: 700; }
.marker-column > div { display: grid; gap: 7px; padding: 0 7px 7px; }
.compact-marker-card { min-width: 0; position: relative; overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 1px 2px rgba(28,57,57,.11); }
.compact-marker-card:hover { box-shadow: 0 5px 13px rgba(28,57,57,.11); }
.compact-marker-link { min-height: 105px; display: grid; grid-template-rows: auto auto 1fr; gap: 7px; padding: 12px 46px 11px 13px; color: inherit; text-decoration: none; }
.compact-marker-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.compact-marker-name { overflow: hidden; color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.compact-marker-result { display: flex; align-items: baseline; gap: 9px; }
.compact-marker-result strong { color: var(--deep); font-size: 1.25rem; line-height: 1.3; }
.compact-marker-result > small { overflow: hidden; color: var(--muted); font-size: var(--font-caption); text-overflow: ellipsis; white-space: nowrap; }
.compact-marker-state { display: flex; flex-wrap: wrap; align-self: end; align-items: center; justify-content: space-between; gap: 6px 9px; color: var(--muted); font-size: var(--font-caption); }
.compact-marker-state > span:first-child { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.compact-marker-state i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #768885; }
.status-ok .compact-marker-state i { background: var(--teal); }
.status-attention .compact-marker-state i { background: var(--rose); }
.status-stale .compact-marker-state i { background: var(--amber); }
.marker-value-empty { color: var(--muted); font-size: var(--font-caption); font-weight: 600; }
.marker-status { min-height: 24px; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; color: #526563; background: var(--surface-soft); font-size: var(--font-caption); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.marker-status.status-ok { color: #1f7469; background: var(--teal-soft); }
.marker-status.status-attention { color: #a5434a; background: var(--rose-soft); }
.marker-status.status-stale { color: #90611e; background: var(--amber-soft); }
.analysis-empty { min-height: 170px; grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: 5px; padding: 24px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }
.analysis-empty p { margin: 0; font-size: var(--font-caption); }

.biomarker-detail-page { background: #f2f5f2; }
.biomarker-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.biomarker-category { display: block; margin-bottom: 5px; color: var(--teal); font-size: var(--font-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail-latest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 11px; color: var(--faint); font-size: var(--font-caption); }
.detail-latest > strong { color: var(--deep); font-size: 1.65rem; line-height: 1.2; }
.detail-pin-button { min-height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--muted); font-size: var(--font-caption); font-weight: 700; }
.detail-pin-button span { color: #86938f; font-size: 20px; }
.detail-pin-button:hover { border-color: #a8c0bb; color: var(--ink); }
.detail-pin-button.pinned { border-color: #e7c078; color: #885e17; background: #fffaf0; }
.detail-pin-button.pinned span { color: #c58b24; }
.stale-data-note { min-height: 42px; display: flex; align-items: center; gap: 9px; margin: -8px 0 16px; padding: 9px 12px; border: 1px solid #ecd7ac; border-radius: 10px; background: #fffaf0; color: #765b2c; font-size: var(--font-caption); line-height: 1.45; }
.stale-data-note > span:first-child { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #f3dfb7; color: #8b611b; font-weight: 800; }
.biomarker-detail-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(310px, .75fr); gap: 14px; align-items: start; }
.chart-card, .marker-insights, .measurement-history { border: 1px solid var(--line); border-radius: 14px; background: white; }
.chart-card { min-width: 0; padding: 18px 18px 12px; }
.detail-section-title { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.reference-caption { max-width: 50%; color: var(--muted); font-size: var(--font-caption); line-height: 1.35; text-align: right; }
.full-chart-wrap { min-width: 0; margin-top: 13px; }
.chart-selected-reading { min-height: 58px; display: grid; grid-template-columns: 40px minmax(150px, 1fr) auto 40px; align-items: center; gap: 10px; margin-bottom: 10px; padding: 7px 10px; border-radius: 11px; background: #f6f9f7; }
.chart-selected-copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; }
.chart-selected-copy > span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.chart-selected-copy > strong { color: var(--deep); font-size: 1.45rem; line-height: 1.2; }
.chart-selected-copy > strong small { color: var(--muted); font-size: 14px; font-weight: 600; }
.chart-step-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 25px; line-height: 1; }
.chart-step-button:hover:not(:disabled) { border-color: #8cb9ae; background: var(--teal-soft); }
.chart-step-button:disabled { opacity: .34; cursor: default; }
.chart-stage { --chart-plot-height: 190px; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: var(--chart-plot-height) 34px; min-width: 0; }
.chart-y-axis { position: relative; grid-row: 1; grid-column: 1; color: #536668; font-size: 14px; font-variant-numeric: tabular-nums; }
.chart-y-axis span { position: absolute; top: var(--chart-y); right: 9px; max-width: 43px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); }
.chart-plot { min-width: 0; position: relative; grid-row: 1; grid-column: 2; margin: 0 14px; }
.full-marker-chart { width: 100%; height: 100%; display: block; overflow: hidden; }
.reference-zone { fill: rgba(117,139,134,.16); stroke: rgba(92,118,112,.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.optimal-zone { fill: rgba(33,143,131,.25); stroke: rgba(23,109,100,.58); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.chart-grid-line { stroke: #e1e9e5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: #d2dcda; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; vector-effect: non-scaling-stroke; }
.chart-segment { stroke: #748582; stroke-linecap: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-segment.status-ok { stroke: #24a270; }
.chart-segment.status-attention { stroke: #c71f2d; }
.chart-segment.status-stale { stroke: #ca8b1b; }
.chart-point-layer { position: absolute; inset: 0; }
.chart-point-button { width: 40px; height: 40px; position: absolute; z-index: 2; top: var(--chart-y); left: var(--chart-x); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); }
.chart-point-button > span { width: 13px; height: 13px; border: 3px solid #6d817e; border-radius: 50%; background: #f7faf9; box-shadow: 0 1px 2px rgba(28,57,57,.12); transition: width .14s ease, height .14s ease, box-shadow .14s ease; }
.chart-point-button.status-attention > span { border-color: #963f46; background: var(--rose); }
.chart-point-button.status-ok > span { border-color: #176d64; background: var(--teal); }
.chart-point-button.status-stale > span { border-color: #94651f; background: var(--amber); }
.chart-point-button.latest-point { z-index: 3; }
.chart-point-button.latest-point > span { width: 22px; height: 22px; border-width: 4px; box-shadow: 0 2px 4px rgba(28,57,57,.22); }
.chart-point-button.selected { z-index: 4; }
.chart-point-button.selected > span { box-shadow: 0 0 0 5px rgba(33,143,131,.14), 0 2px 4px rgba(28,57,57,.2); }
.chart-point-button:hover > span { width: 20px; height: 20px; }
.chart-point-button.latest-point:hover > span { width: 22px; height: 22px; }
.chart-point-button:focus-visible { outline: 3px solid #187d72; outline-offset: 1px; }
.chart-x-axis { min-width: 0; position: relative; grid-row: 2; grid-column: 2; margin: 0 14px; color: #536668; font-size: 14px; font-variant-numeric: tabular-nums; }
.chart-x-axis span { position: absolute; top: 7px; left: var(--chart-x); white-space: nowrap; transform: translateX(-50%); }
.chart-x-axis span.first { transform: none; }
.chart-x-axis span.last { transform: translateX(-100%); }
.chart-x-axis span.single { transform: translateX(-50%); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; min-height: 28px; align-items: center; color: var(--muted); font-size: var(--font-caption); }
.chart-legend span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.chart-legend i { width: 18px; height: 8px; flex: 0 0 auto; border-radius: 3px; }
.chart-legend i.reference { border: 1px solid rgba(92,118,112,.32); background: rgba(117,139,134,.12); }
.chart-legend i.optimal { border: 1px dashed rgba(33,143,131,.7); background: rgba(33,143,131,.18); }
.chart-legend i.observed { height: 3px; background: #174f51; }
.range-position { margin: 13px 0 4px; padding: 12px 13px 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: #f8faf9; }
.range-position-head, .range-position-scale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.range-position-head { margin-bottom: 9px; color: var(--muted); font-size: var(--font-caption); }
.range-position-head strong { color: var(--ink); font-size: var(--font-caption); }
.range-position-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-position-track { height: 12px; position: relative; margin: 0 4px; border-radius: 6px; background: #dfe6e3; }
.range-reference, .range-optimal { height: 100%; position: absolute; left: var(--range-left); width: var(--range-width); border-radius: inherit; }
.range-reference { background: #c2cfcb; }
.range-optimal { height: 6px; top: 3px; background: var(--teal); }
.range-current { width: 2px; height: 20px; position: absolute; z-index: 2; top: -4px; left: var(--range-point); transform: translateX(-50%); background: #687b78; color: #687b78; }
.range-current i { width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; border: 2px solid white; border-radius: 50%; background: currentColor; box-shadow: 0 1px 3px rgba(28,57,57,.22); transform: translate(-50%,-50%); }
.range-current.status-ok { background: #176d64; color: var(--teal); }
.range-current.status-attention { background: #963f46; color: var(--rose); }
.range-current.status-stale { background: #94651f; color: var(--amber); }
.range-position-scale { margin-top: 7px; color: var(--muted); font-size: var(--font-caption); }
.range-position-scale strong { color: var(--ink); font-size: 1rem; }
.range-position-scale strong small { color: var(--muted); font-size: var(--font-caption); font-weight: 600; }
.sr-only { width: 1px !important; height: 1px !important; position: absolute !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.mixed-unit-note { margin: 8px 0 2px; padding: 9px 11px; border-radius: 8px; background: #f4f6f5; color: var(--muted); font-size: var(--font-caption); line-height: 1.45; }
.full-chart-empty { min-height: 330px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); text-align: center; }
.full-chart-empty p { margin: 0; font-size: var(--font-caption); }
.marker-insights { display: flex; flex-direction: column; overflow: hidden; }
.marker-insights > section { flex: 1; padding: 18px; }
.marker-insights > section + section { border-top: 1px solid var(--line-soft); }
.marker-insights h2 { margin: 3px 0 10px; color: var(--deep); font-size: 1.0625rem; }
.marker-insights p, .insight-copy { margin: 0; color: #43585a; font-size: .9375rem; line-height: 1.58; }
.insight-copy p { margin: 0 0 8px; }
.insight-index { color: var(--teal); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; }
.recommendation-list { display: grid; gap: 9px; }
.recommendation-list article { padding: 10px 11px; border-left: 3px solid #9ec7be; border-radius: 0 8px 8px 0; background: #f4f8f6; }
.recommendation-list strong { display: block; color: var(--ink); font-size: .875rem; }
.recommendation-list p { margin-top: 4px; font-size: .875rem; }
.measurement-history { margin-top: 14px; padding: 18px; }
.measurement-list { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.measurement-row { min-height: 61px; display: grid; grid-template-columns: 160px 150px 150px minmax(180px,1fr); gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); }
.measurement-row time { color: var(--muted); font-size: .875rem; }
.measurement-row > strong { color: var(--ink); font-size: 1rem; }
.measurement-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.measurement-row > div a, .measurement-row > div span, .all-marker-sources a { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; color: #39726a; font-size: .875rem; font-weight: 700; text-decoration: none; }
.measurement-row > div a:hover, .all-marker-sources a:hover { color: var(--teal); text-decoration: underline; }
.all-marker-sources { margin-top: 12px; }
.all-marker-sources > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--teal); font-size: .875rem; font-weight: 700; list-style: none; }
.all-marker-sources > summary::-webkit-details-marker { display: none; }
.all-marker-sources > summary span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 12px; background: var(--teal-soft); font-size: .72rem; }
.all-marker-sources > div { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 7px; }
.analysis-loading { min-height: 55vh; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.analysis-loading span { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: analysis-spin .8s linear infinite; }
.analysis-error { min-height: 55vh; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }
.analysis-error > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 11px; background: var(--rose-soft); color: var(--rose); font-size: 20px; font-weight: 800; }
.analysis-error strong { color: var(--ink); font-size: var(--font-ui); }
.analysis-error p { max-width: 460px; margin: 0 0 8px; font-size: var(--font-small); }
@keyframes analysis-spin { to { transform: rotate(360deg); } }

@media (max-width: 1500px) {
  .marker-columns { grid-template-columns: repeat(3, minmax(250px, 1fr)); }
}
@media (max-width: 1180px) {
  .dashboard-marker-grid { grid-template-columns: repeat(2, minmax(270px, 1fr)); }
  .marker-columns { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .biomarker-detail-grid { grid-template-columns: 1fr; }
  .marker-insights { display: grid; grid-template-columns: repeat(2, 1fr); }
  .marker-insights > section + section { border-top: 0; border-left: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
  .analyses-page, .biomarker-detail-page { padding: 20px 15px 44px; }
  .analyses-title-row, .biomarker-detail-head { align-items: flex-start; }
  .analyses-title-row h1, .biomarker-detail-head h1 { font-size: 29px; }
  .analyses-title-row p, .analysis-total { display: none; }
  .dashboard-marker-grid { display: flex; overflow-x: auto; margin-right: -15px; padding: 0 15px 6px 0; scroll-snap-type: x proximity; }
  .dashboard-marker-card { min-width: 82vw; scroll-snap-align: start; }
  .all-markers-head { display: grid; grid-template-columns: 1fr; align-items: start; }
  .analysis-search { width: 100%; margin-top: 11px; }
  .marker-columns { display: flex; overflow-x: auto; margin-right: -15px; padding: 0 15px 9px 0; scroll-snap-type: x proximity; }
  .marker-column { width: 82vw; min-width: 82vw; scroll-snap-align: start; }
  .biomarker-detail-head { gap: 12px; }
  .detail-pin-button { width: 48px; padding: 0; overflow: hidden; font-size: 0; }
  .detail-pin-button span { font-size: 22px; }
  .chart-card { padding: 14px 10px 10px; }
  .reference-caption { display: none; }
  .chart-selected-reading {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 8px;
  }
  .chart-selected-reading > [data-chart-step="-1"] { grid-column: 1; grid-row: 1 / span 2; }
  .chart-selected-copy { grid-column: 2; grid-row: 1; display: grid; gap: 2px; }
  .chart-selected-reading > .marker-status { max-width: 100%; grid-column: 2; grid-row: 2; justify-self: start; line-height: 1.3; white-space: normal; }
  .chart-selected-reading > [data-chart-step="1"] { grid-column: 3; grid-row: 1 / span 2; }
  .chart-stage { --chart-plot-height: 172px; grid-template-columns: 62px minmax(0, 1fr); }
  .chart-y-axis, .chart-x-axis { font-size: 14px; line-height: 1.25; }
  .chart-y-axis span { right: 8px; max-width: none; overflow: visible; text-overflow: clip; }
  .chart-plot, .chart-x-axis { margin-right: 12px; margin-left: 12px; }
  .chart-legend { gap: 8px 12px; font-size: 14px; line-height: 1.35; }
  .range-position-head { align-items: flex-start; }
  .range-position-head span { min-width: 0; flex: 1; overflow: visible; text-align: right; text-overflow: clip; white-space: normal; }
  .marker-insights { display: block; }
  .marker-insights > section + section { border-top: 1px solid var(--line-soft); border-left: 0; }
  .measurement-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 12px 3px; }
  .measurement-row .marker-status { justify-self: start; }
  .measurement-row > div { justify-content: flex-start; }
}
@media (max-width: 470px) {
  .detail-latest .marker-status { order: 3; }
  .chart-selected-reading { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .chart-step-button { width: 38px; height: 38px; }
  .chart-stage { --chart-plot-height: 160px; grid-template-columns: 58px minmax(0, 1fr); }
  .chart-y-axis span { right: 7px; }
}

/* InsideTracker-inspired mobile feed and marker detail. */
@media (max-width: 900px) {
  #analysesView { overflow-x: hidden; background: #f3f6f4; scroll-behavior: smooth; }
  .analyses-page, .biomarker-detail-page { min-height: 100%; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); background: #f3f6f4; }
  .analyses-title-row { display: none; }

  .analysis-mobile-summary { min-height: 112px; display: grid; grid-template-columns: 42px minmax(0,1fr) 44px; gap: 11px; align-items: center; margin: 0; padding: 16px 14px; border-bottom: 1px solid #cfe4dd; background: #e6f4ef; }
  .analysis-mobile-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: white; color: #078675; font-size: 24px; box-shadow: 0 2px 9px rgba(20,69,61,.08); }
  .analysis-mobile-summary div { min-width: 0; }
  .analysis-mobile-summary small, .analysis-mobile-summary strong, .analysis-mobile-summary p { display: block; }
  .analysis-mobile-summary small { margin-bottom: 2px; color: #3a746b; font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .analysis-mobile-summary strong { overflow: hidden; color: var(--deep); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
  .analysis-mobile-summary p { margin: 3px 0 0; color: #5f7774; font-size: .8125rem; }
  .analysis-mobile-summary button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; background: #0a5b54; color: white; font-size: 24px; }

  .pinned-dashboard { margin: 0; padding: 18px 14px 20px; background: white; }
  .analysis-section-head { min-height: 38px; }
  .analysis-section-head h2, .detail-section-title h2 { font-size: 1.1875rem; }
  .analysis-section-head p { font-size: .75rem; }
  .dashboard-marker-grid { display: grid; grid-template-columns: 1fr; gap: 10px; overflow: visible; margin: 9px 0 0; padding: 0; }
  .dashboard-marker-card { min-width: 0; border-radius: 15px; box-shadow: 0 5px 18px rgba(25,58,56,.08); scroll-snap-align: none; }
  .dashboard-marker-link { min-height: 166px; padding: 14px 16px 12px 18px; }
  .dashboard-marker-top { min-height: 24px; padding-right: 42px; font-size: .75rem; }
  .dashboard-marker-card h3 { margin: 5px 0; font-size: 1rem; }
  .dashboard-marker-value > strong { font-size: 1.55rem; }
  .marker-sparkline { height: 48px; }
  .dashboard-marker-foot { padding-top: 5px; font-size: .75rem; }
  .pin-button { width: 44px; height: 44px; top: 5px; right: 4px; }

  .all-markers { padding: 20px 14px 0; background: #f3f6f4; scroll-margin-top: 0; }
  .all-markers-head { display: block; }
  .analysis-search { width: 100%; min-height: 48px; margin-top: 11px; border-radius: 13px; box-shadow: 0 2px 8px rgba(20,52,50,.04); }
  .analysis-search input { height: 46px; font-size: 1rem; }
  .analysis-filters { position: sticky; z-index: 8; top: 0; margin: 12px -14px 14px; padding: 8px 14px; background: rgba(243,246,244,.96); box-shadow: 0 7px 12px rgba(22,51,50,.03); backdrop-filter: blur(12px); }
  .analysis-filters button { min-height: 40px; padding: 0 13px; border-radius: 20px; font-size: .8125rem; }
  .marker-columns { display: none; }
  .mobile-marker-list { display: grid; gap: 22px; }
  .mobile-marker-section > header { min-height: 34px; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .mobile-marker-section > header::after { content: ""; height: 1px; flex: 1; background: #dce4e1; }
  .mobile-marker-section > header h3 { margin: 0; color: #526669; font-size: .8125rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
  .mobile-marker-section > header span { order: 3; color: #80908e; font-size: .75rem; }
  .mobile-marker-section > div { display: grid; gap: 10px; }
  .compact-marker-card { position: relative; overflow: hidden; border: 1px solid #e2e8e5; border-radius: 15px; background: white; box-shadow: 0 5px 16px rgba(23,55,53,.07); }
  .compact-marker-card::before { content: ""; width: 4px; position: absolute; z-index: 2; inset: 0 auto 0 0; background: #879794; }
  .compact-marker-card.status-attention::before { background: #cf1e2d; }
  .compact-marker-card.status-ok::before { background: #21a271; }
  .compact-marker-card.status-stale::before { background: #d39a20; }
  .compact-marker-link { min-height: 112px; display: grid; grid-template-rows: auto auto auto; gap: 7px; padding: 13px 52px 12px 16px; }
  .compact-marker-heading { gap: 8px; }
  .compact-marker-name { min-width: 0; flex: 1; font-size: 1rem; line-height: 1.35; white-space: normal; }
  .compact-marker-heading .marker-status { max-width: 48%; min-height: 26px; flex: 0 0 auto; padding: 3px 8px; font-size: .6875rem; line-height: 1.25; text-align: center; white-space: normal; }
  .compact-marker-result { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .compact-marker-result > small { min-width: 0; color: #788886; font-size: .75rem; }
  .compact-marker-result strong { flex: 0 0 auto; color: var(--deep); font-size: 1.1875rem; }
  .compact-marker-state { justify-content: flex-start; gap: 7px; color: #778784; font-size: .75rem; }
  .compact-marker-state .marker-freshness { min-height: 21px; padding: 2px 7px; font-size: .6875rem; }
  .compact-marker-card > .pin-button { top: auto; right: 4px; bottom: 5px; color: #82918e; }

  .biomarker-mobile-tabs { min-height: 48px; position: sticky; z-index: 9; top: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid #dfe6e3; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
  .biomarker-mobile-tabs a { min-width: 0; min-height: 48px; position: relative; display: grid; place-items: center; padding: 0 6px; overflow: hidden; color: #68787a; font-size: .75rem; font-weight: 700; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
  .biomarker-mobile-tabs a.active { color: #087d70; }
  .biomarker-mobile-tabs a.active::after { content: ""; height: 3px; position: absolute; right: 8px; bottom: 0; left: 8px; border-radius: 3px 3px 0 0; background: #0d967e; }
  .biomarker-detail-head { min-height: 58px; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; background: white; }
  .biomarker-detail-head > div { min-width: 0; flex: 1; }
  .biomarker-category { margin: 0 0 2px; font-size: .6875rem; }
  .biomarker-detail-head h1 { display: none; }
  .detail-latest { gap: 6px 9px; margin: 0; font-size: .75rem; }
  .detail-latest > strong { font-size: 1.25rem; }
  .detail-latest .marker-status { order: initial; max-width: 48%; font-size: .6875rem; line-height: 1.2; white-space: normal; }
  .detail-pin-button { width: 44px; min-height: 44px; border-radius: 13px; }
  .stale-data-note { margin: 8px 14px 12px; padding: 9px 11px; border: 0; border-radius: 12px; background: #fff4d9; font-size: .75rem; }
  .biomarker-detail-grid { display: block; }
  .chart-card, .marker-insights, .measurement-history { border: 1px solid #e1e7e4; border-radius: 15px; box-shadow: 0 4px 16px rgba(24,54,53,.05); }
  .chart-card { margin: 0 12px 12px; padding: 14px 10px 11px; scroll-margin-top: 58px; }
  .reference-caption { display: none; }
  .full-chart-wrap { margin-top: 11px; }
  .chart-selected-reading { min-height: 72px; grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-rows: auto auto; gap: 2px 8px; margin-bottom: 8px; padding: 7px 5px; border-radius: 13px; background: #f5f8f7; }
  .chart-selected-reading > [data-chart-step="-1"] { grid-column: 1; grid-row: 1 / span 2; }
  .chart-selected-copy { grid-column: 2; grid-row: 1; display: grid; gap: 1px; justify-items: center; text-align: center; }
  .chart-selected-copy > span { font-size: .75rem; }
  .chart-selected-copy > strong { font-size: 1.35rem; }
  .chart-selected-reading > .marker-status { max-width: 100%; grid-column: 2; grid-row: 2; justify-self: center; min-height: 23px; font-size: .6875rem; line-height: 1.2; text-align: center; white-space: normal; }
  .chart-selected-reading > [data-chart-step="1"] { grid-column: 3; grid-row: 1 / span 2; }
  .chart-step-button { width: 44px; height: 44px; border-radius: 12px; }
  .chart-stage { --chart-plot-height: 174px; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: var(--chart-plot-height) 34px; }
  .chart-y-axis, .chart-x-axis { font-size: .6875rem; }
  .chart-y-axis span { right: 6px; max-width: 48px; overflow: hidden; }
  .chart-plot, .chart-x-axis { margin-right: 10px; margin-left: 10px; }
  .chart-point-button { width: 44px; height: 44px; }
  .chart-point-button > span { width: 11px; height: 11px; border-width: 2px; }
  .chart-point-button.latest-point > span { width: 20px; height: 20px; border-width: 4px; }
  .reference-zone { fill: rgba(98,194,44,.13); stroke: rgba(72,159,31,.48); stroke-dasharray: 5 4; }
  .optimal-zone { fill: rgba(94,196,39,.22); stroke: rgba(63,151,25,.62); }
  .chart-grid-line { stroke: #e5ebe8; }
  .chart-legend { min-height: 24px; gap: 6px 10px; font-size: .6875rem; line-height: 1.3; }
  .chart-legend i { width: 15px; }
  .chart-legend i.observed { background: linear-gradient(90deg, #24a270 0 50%, #c71f2d 50%); }
  .range-position { margin-top: 10px; padding: 10px 10px 8px; }
  .range-position-head { font-size: .6875rem; }
  .range-position-scale { font-size: .6875rem; }
  .range-position-scale strong { font-size: .875rem; }
  .mixed-unit-note { font-size: .75rem; }
  .marker-insights { display: block; margin: 0 12px 12px; overflow: hidden; }
  .marker-insights > section { padding: 16px; scroll-margin-top: 58px; }
  .marker-insights > section + section { border-top: 1px solid var(--line-soft); border-left: 0; }
  .marker-insights h2 { font-size: 1rem; }
  .marker-insights p, .insight-copy { font-size: .875rem; line-height: 1.55; }
  .measurement-history { margin: 0 12px; padding: 16px; }
  .measurement-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 12px 2px; }
  .measurement-row time { font-size: .75rem; }
  .measurement-row > strong { font-size: .9375rem; }
  .measurement-row .marker-status { justify-self: end; max-width: 48vw; font-size: .6875rem; line-height: 1.25; text-align: right; white-space: normal; }
  .measurement-row > div { grid-column: 1 / -1; justify-content: flex-start; }
  .measurement-row > div a, .measurement-row > div span { min-height: 40px; font-size: .75rem; }
}

@media (max-width: 359px) {
  .all-markers, .pinned-dashboard { padding-right: 10px; padding-left: 10px; }
  .analysis-filters { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; }
  .chart-card, .marker-insights, .measurement-history { margin-right: 8px; margin-left: 8px; }
  .chart-stage { grid-template-columns: 49px minmax(0,1fr); }
  .chart-plot, .chart-x-axis { margin-right: 8px; margin-left: 8px; }
}