/* UI 09 — readable type, quiet semantic accents. Public demo only. */
:root {
  --text-secondary: #5d6c80;
  --text-on-dark: #c2cfe3;
  --chart-blue: #1761dc;
  --chart-teal: #287c73;
  --chart-amber: #9b6c2c;
  --chart-purple: #8064a5;
  --metric-accent: var(--chart-blue);
  --muted: var(--text-secondary);
}
body {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; font-size:16px; -webkit-text-size-adjust:100%;}
button, input, select, textarea {font-family:inherit;}
[data-metric-kind="stress"] {--metric-accent:var(--chart-amber);}
[data-metric-kind="calories"], [data-metric-kind="hrv"], [data-metric-kind="breath"] {--metric-accent:var(--chart-teal);}
.build-label {font-size:12px; color:var(--text-secondary);}
.brand-health {font-size:9px;}
.preview-banner {font-size:13px; line-height:1.5; padding:10px 12px;}
.preview-banner button {font-size:13px; flex-shrink:0; min-height:28px;}
.page-heading h1 {font-size:32px; font-weight:650;}
.health-date {font-family:inherit; font-size:14px; line-height:1.6; gap:10px; color:var(--text-secondary); font-variant-numeric:tabular-nums;}
.health-date button {font-family:inherit; font-size:14px; min-height:40px; flex-shrink:0;}
.real-badge {font-size:12px; color:var(--text-secondary);}
.page-back {font-size:14px; min-height:44px;}
.page-intro, .native-note, .form-note {font-size:14px; line-height:1.7; color:var(--text-secondary);}
.section-label h2, .daily-metrics h2, .day-section-heading h2, .night-curve-heading h2 {font-size:18px; font-weight:600; letter-spacing:0;}
.section-label>span, .section-label>button, .day-section-heading>span, .night-curve-heading>span {font-size:12px; color:var(--text-secondary);}
#nav .nav-item {font-size:12px; line-height:1.3; gap:6px; color:#626f84;}
#nav .nav-item.active {color:#1761ff;}
#nav .nav-item svg {width:22px; height:22px;}

/* Keep the one-ring / four-metric composition. Units get their own line. */
.circle-hero {padding:24px 14px 18px;}
.energy-value>span {font-size:15px; color:var(--text-on-dark); margin-bottom:9px;}
.energy-value>small {font-family:inherit; font-size:13px; line-height:1.4; color:var(--text-on-dark);}
.health-summary-item {justify-content:flex-start; padding:0 4px;}
.summary-metric-label {font-size:13px; line-height:1.5; color:var(--text-on-dark); white-space:normal; min-height:20px;}
.summary-metric-value {flex-direction:column; align-items:center; gap:5px; margin-top:12px;}
.summary-metric-value strong {font-size:27px; letter-spacing:-.8px; font-weight:600;}
.summary-metric-value small {font-family:inherit; font-size:12px; line-height:1.2; color:var(--text-on-dark);}
.health-summary-item .metric-mini-trend path {stroke:#91b4f9; stroke-width:1.8;}
.health-summary-item[data-metric-kind="hrv"] .metric-mini-trend path {stroke:#78c6b9;}
.metric-mini-trend {margin-top:9px;}

.daily-metric-card {padding:17px 14px 14px;}
.daily-metric-heading {font-size:14px; font-weight:500; line-height:1.5; white-space:normal; color:#36465b; align-items:flex-start;}
.daily-metric-heading svg {width:16px; height:16px; margin-top:2px; color:var(--metric-accent);}
.daily-metric-arrow {font-size:13px; color:var(--text-secondary);}
.daily-metric-value {gap:5px; flex-wrap:wrap; margin:17px 0 16px;}
.daily-metric-value strong {font-size:32px; font-weight:600;}
.daily-metric-value small, .daily-metric-caption {font-size:12px; line-height:1.5; color:var(--text-secondary);}
.daily-metric-graphic rect {fill:#a8bfe8;}
.daily-metric-graphic rect.current {fill:var(--metric-accent);}
.daily-metric-card .metric-mini-trend path {stroke:var(--metric-accent); stroke-width:1.4;}
.stress-fill {stroke:var(--metric-accent);}
.stress-scale circle {fill:var(--metric-accent);}

.day-section-heading {flex-wrap:wrap;}
.day-recap-stats span {font-size:13px; color:#495c74; line-height:1.5;}
.day-recap-stats strong {font-size:26px; font-weight:600; margin-top:12px;}
.day-recap-stats small {font-size:12px; color:var(--text-secondary);}
.day-stress-summary {font-size:14px; color:#495c74; line-height:1.5; gap:8px; flex-wrap:wrap;}
.day-stress-summary b {font-size:21px;}
.day-stress-summary small, .day-stress-summary>span:last-child {font-size:12px; color:var(--text-secondary);}
.day-stress-summary>span:last-child {color:#1761dc;}
.day-rhythm text {font-family:inherit; font-size:15px; fill:var(--text-secondary);}
.day-stress-line {stroke:var(--chart-amber); stroke-width:2.6;}
.day-rhythm rect {fill:#4e7fc8;}
.day-chart-key {font-size:12px; color:var(--text-secondary); gap:16px; flex-wrap:wrap; line-height:1.5;}
.day-chart-key i {width:16px; height:3px; background:var(--chart-amber);}
.day-chart-key span+span i {width:9px; height:9px; background:#4e7fc8;}
.day-event {gap:9px; padding:15px 0;}
.day-event time {font-family:inherit; font-size:13px; width:43px; color:var(--text-secondary); font-variant-numeric:tabular-nums;}
.day-event-icon {width:25px; height:25px;}
.day-event-icon svg {width:14px; height:14px;}
.day-event:after {left:64px; top:39px;}
.day-event b {font-size:14px; line-height:1.5;}
.day-event-value {font-size:15px; color:#354b65;}
.day-event-value small {font-size:12px; color:var(--text-secondary);}
.day-event-arrow {font-size:12px;}

.night-duration .hero-top>span {font-size:14px; color:var(--text-on-dark); letter-spacing:0;}
.night-duration .hero-caption {font-size:14px; color:#e0e7f3;}
.night-duration .hero-number small {color:var(--text-on-dark);}
.sleep-curve text {font-size:15px; fill:#596a81; font-weight:500;}
.stage-connector {stroke:#bac7db;}
.stage-awake {fill:var(--chart-amber);}
.stage-rem {fill:var(--chart-purple);}
.stage-light {fill:#4e86cc;}
.stage-deep {fill:#2c3c83;}
.stage-selector {font-size:14px; line-height:1.5; color:var(--text-secondary); gap:4px;}
.stage-selector>span {text-align:center;}
.stage-selector b {color:#2c3c52; font-weight:600;}
.stage-selector button {width:40px; height:44px; flex-shrink:0;}
.stage-detail-actions {font-size:12px; color:var(--text-secondary); flex-wrap:wrap;}
.stage-detail-actions button {font-size:14px; min-height:44px;}
.vital-label {font-size:14px; color:#495c74;}
.vital-label>svg:last-child, .vital-card:nth-child(2) .vital-label>svg:last-child {color:var(--metric-accent); width:15px; height:15px; margin-left:0;}
.vital-value small, .night-mean-label {font-size:12px; color:var(--text-secondary);}
.vital-value {font-size:36px;}
.real-chart path {vector-effect:non-scaling-stroke; stroke-width:1.8;}
.real-chart path:first-child {stroke-width:.8;}
.source-key {font-size:14px; gap:14px; flex-wrap:wrap;}
.source-key>span:before {height:0; width:17px; border-top:3px solid var(--chart-blue); background:none; border-radius:0; vertical-align:middle;}
.source-key .garmin-dot:before {background:none; border-color:var(--chart-teal); border-top-style:dashed;}
.source-key small, .chart-ends, .alignment-stats span {font-family:inherit; font-size:12px; line-height:1.5; color:var(--text-secondary);}

/* Detail pages keep the same type scale as their entry points. */
.detail-menu-row b {font-size:16px; line-height:1.5; font-weight:550;}
.detail-menu-row small {font-size:13px; color:var(--text-secondary); margin-top:5px;}
.detail-menu-row>span:last-child {font-size:14px;}
.personal-card b {font-size:19px;}
.personal-card small {font-size:14px; color:var(--text-secondary); line-height:1.5;}
.metric-detail-meta {font-size:14px; color:var(--text-secondary); gap:12px; line-height:1.5;}
.metric-demo-tag {font-size:12px; white-space:nowrap; color:#536f98;}
.metric-detail-value>span {font-family:inherit; font-size:13px; color:var(--text-secondary);}
.metric-detail-value>small {font-size:16px; color:var(--text-secondary);}
.metric-periods button {font-size:14px; min-height:40px; color:var(--text-secondary);}
.metric-summary span {font-size:13px; color:var(--text-secondary);}
.metric-summary b {font-size:25px;}
.metric-records summary {font-size:14px; padding:16px 0;}
.metric-records summary>span, .metric-records>div, .metric-source {font-size:12px; color:var(--text-secondary);}
.metric-records>div {font-size:14px; gap:12px; line-height:1.5;}
.night-report-row {font-size:16px;}
.night-report-row small, .night-report-row>span:last-child {font-size:13px; color:var(--text-secondary);}
.night-event-source time {font-family:inherit; font-size:13px; color:var(--text-secondary);}
.night-event-source b, .manual-note b {font-size:15px;}
.night-event-source small, .manual-badge, .manual-note button, .annotation-audit small, .annotation-reference small {font-size:12px; color:var(--text-secondary);}
.manual-note p, .annotation-audit {font-size:14px; color:#4b6283;}
.annotation-reference>span {font-size:13px; color:var(--text-secondary);}
.annotation-reference b {font-size:15px;}
.connection-row, .report-facts, .provider-line b {font-size:15px; line-height:1.7;}
.connection-row>span {color:var(--text-secondary);}
.connection-row b {font-size:14px; color:#495c74;}
.sensor-row strong {font-size:15px;}
.provider-line span, .provider-line small, .provider-line button {font-size:13px; color:var(--text-secondary);}
.provider-line button {color:#1761dc; min-height:44px;}
.provider-line.disabled {color:var(--text-secondary);}
.report-facts {color:var(--text-secondary);}

/* Bedside controls and forms: no tiny labels at the end of the flow. */
.control-kicker, .status-text, .control-card-head, .sound-deck-top>span, .sound-player>div>span, .sound-settings-line {font-size:13px; line-height:1.5;}
.control-kicker, .control-card-head {color:var(--text-secondary);}
.sound-deck-top>span, .sound-player>div>span, .sound-settings-line {color:var(--text-on-dark);}
.alarm-time small, .text-action, .real-mic>div>span, .real-mic .native-note, .mic-meta span, .mic-meta button, .unavailable span {font-size:13px; line-height:1.6;}
.alarm-time small, .real-mic>div>span, .unavailable {color:var(--text-secondary);}
.real-mic h2, .unavailable b {font-size:16px;}
.two-actions button, .session-button {font-size:14px; min-height:44px;}
.node-top, .node-bottom>span, .native-node .node-top>span:last-child, .sensor-row>span {font-size:12px; line-height:1.5;}
.node-top, .node-bottom>span, .native-node .node-top>span:last-child {color:var(--text-on-dark);}
.node-bottom>div>span {font-size:12px; color:var(--text-on-dark);}
#sheet .sheet-head h2 {font-size:22px;}
#sheet .sheet-head button {min-width:44px; min-height:44px;}
#sheet label {font-size:15px; line-height:1.5; color:#465c77;}
#sheet .form-note, #sheet .auth-steps span, .auth-steps li {font-size:15px; line-height:1.7; color:var(--text-secondary);}
#sheet input:not([type=checkbox]):not([type=range]), #sheet select, #sheet textarea {font-family:inherit; font-size:16px; line-height:1.5;}
#sheet .primary-button {font-size:15px; min-height:46px;}
.weekdays span {font-size:13px; height:40px;}
#notice, .error-text, .empty-state, .empty-chart {font-size:14px; line-height:1.6;}

@media(max-width:355px) {
  .preview-banner {margin-left:17px; margin-right:17px; font-size:12px;}
  .preview-banner button {font-size:12px;}
  .health-date {flex-wrap:wrap; font-size:13px; gap:2px 8px;}
  .health-date button {font-size:13px;}
  .summary-metric-label {font-size:12px;}
  .summary-metric-value strong {font-size:25px;}
  .daily-metric-card {padding:15px 11px 13px;}
  .daily-metric-heading {font-size:14px; gap:5px;}
  .daily-metric-heading svg {width:15px; height:15px;}
  .daily-metric-value strong {font-size:30px;}
  .daily-metric-value small {font-size:12px;}
  .day-recap-stats strong {font-size:25px;}
  .day-recap-stats span {font-size:13px;}
  .day-event {gap:7px;}
  .day-event b {font-size:14px;}
  .day-event-value {font-size:14px;}
  .day-event-value small {display:block; margin:2px 0 0;}
  .day-event:after {left:62px;}
  .night-duration .hero-caption {font-size:14px;}
  .stage-selector {font-size:14px;}
  .stage-selector b {display:block; margin:0;}
}