/* A focused working surface using the existing VisionBoard brand tokens. */
.personal-readout[hidden] { display:none; }
.personal-readout { padding:clamp(2rem,5vw,4.5rem) 0; border-bottom:1px solid var(--rule); }
.readout-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
.readout-heading h2 { font-size:clamp(2rem,5vw,3.75rem); line-height:1.07; letter-spacing:-.045em; margin:.65rem 0; }
.readout-heading p { max-width:42rem; font-size:1rem; color:var(--ink-2); line-height:1.65; }
.readout-actions { display:flex; gap:.75rem; flex-wrap:wrap; flex-shrink:0; }
.readout-status { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 0; border-top:1px solid var(--rule); font-size:.875rem; color:var(--ink-2); }
.signal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.readout-since { margin:0 0 1.5rem; padding:1rem 1.25rem; border-left:3px solid var(--brand); background:var(--brand-soft); border-radius:0 10px 10px 0; font-size:.9375rem; line-height:1.7; }
.signal-card { min-width:0; background:var(--surface); border:1px solid var(--rule); border-radius:18px; padding:1.4rem; transition:border-color .2s ease,box-shadow .2s ease; }
.signal-card:hover { border-color:var(--brand); box-shadow:0 12px 30px rgb(0 0 0 / .05); }
.signal-card-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.signal-cadence { color:var(--ink-2); font-size:.8125rem; letter-spacing:.035em; }
.signal-state { font-size:.75rem; padding:.25rem .5rem; border:1px solid var(--rule); border-radius:5px; }
.signal-state[data-state="older"],.signal-state[data-state="unavailable"] { color:var(--ink); background:var(--surface-2); }
.signal-card h3 { font-size:1rem; margin:1.4rem 0 .5rem; font-weight:600; }
.signal-value { font-variant-numeric:tabular-nums; font-size:clamp(2rem,3.5vw,2.8rem); letter-spacing:-.045em; line-height:1.25; }
.signal-value small { font-size:.875rem; margin-left:.5rem; color:var(--ink-2); letter-spacing:0; }
.signal-change { min-height:2.8em; font-size:.875rem; color:var(--ink-2); line-height:1.5; margin:.5rem 0 1rem; }
.signal-chart { width:100%; height:90px; overflow:visible; }
.signal-chart-line { fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.signal-chart-axis { fill:none; stroke:var(--rule); stroke-width:1; }
.signal-chart-dates { display:flex; justify-content:space-between; gap:.5rem; font-size:.75rem; color:var(--ink-2); }
.signal-why { font-size:.9375rem; line-height:1.7; margin:1.5rem 0; }
.signal-evidence { border-top:1px solid var(--rule); padding-top:.9rem; font-size:.875rem; line-height:1.65; }
.signal-evidence summary { cursor:pointer; font-weight:600; padding:.35rem 0; }
.signal-evidence a { color:var(--brand); text-underline-offset:3px; }
.signal-evidence table { border-collapse:collapse; width:100%; margin-top:1rem; font-variant-numeric:tabular-nums; }
.signal-evidence caption { text-align:left; margin-bottom:.5rem; color:var(--ink-2); }
.signal-evidence td,.signal-evidence th { text-align:left; padding:.5rem .25rem; border-bottom:1px solid var(--rule); }
.signal-evidence td:last-child,.signal-evidence th:last-child { text-align:right; }
.signal-history-empty { display:flex; align-items:center; min-height:105px; color:var(--ink-2); font-size:.875rem; line-height:1.6; }
.signal-loading { min-height:24rem; }
.signal-loading p { color:var(--ink-2); font-size:.9375rem; }
.has-personal-readout .hero { padding-top:2rem; }
.has-personal-readout .product-title { font-size:1.6rem; }
.has-personal-readout .product-copy,.has-personal-readout .hero-actions,.has-personal-readout .hero-trust:first-of-type { display:none; }
.score-observation { font-size:.875rem; color:var(--ink-2); line-height:1.6; margin:1rem 0; }
.score-observation a { color:var(--brand); text-underline-offset:3px; }
@media(min-width:900px) { .has-personal-readout .hero-grid { gap:3rem; } }
@media(max-width:1050px) { .signal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .readout-heading { align-items:flex-start; flex-direction:column; }.signal-grid { grid-template-columns:minmax(0,1fr); }.signal-card { padding:1.25rem; }.readout-actions { width:100%; }.readout-actions .btn { min-height:44px; }.signal-value { font-size:2.5rem; } }
@media(prefers-reduced-motion:reduce) { .signal-card { transition:none; } }