:root {
    color-scheme: light;
    --ink: #253047;
    --muted: #667085;
    --line: #e4e7ec;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --primary: #39735a;
    --primary-soft: #e9f3ed;
    --danger: #b42318;
    --chart-mood: #1976d2;
    --chart-focus: #8e44ad;
    --chart-sleep: #00897b;
    --chart-duration: #e76f00;
    --chart-taken: #39735a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100dvh;
    background: #f2f5f7;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

#app { min-height: 100dvh; }

.loading-container,
.error-container {
    width: min(560px, calc(100% - 32px));
    margin: 0 auto;
    padding-top: 28vh;
    text-align: center;
}

.spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border: 4px solid #d8dee8;
    border-left-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}

.error-text { color: var(--danger); font-weight: 650; }
.error-help { color: var(--muted); font-size: 0.9rem; }

.report {
    width: min(840px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 28px 22px 48px;
    background: var(--surface);
}

.report-header {
    padding: 18px 0 26px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-header h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.25rem); }
.generated-at { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }

.report-section { margin-top: 34px; }
.report-section > h2 {
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 4px solid var(--primary);
    color: var(--primary);
    font-size: 1.08rem;
}

.patient-grid,
.fact-grid { margin: 0; }

.patient-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
}

.definition-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

dt { color: var(--muted); font-size: 0.82rem; }
dd { margin: 0; overflow-wrap: anywhere; }

.notice-box {
    margin: 0;
    padding: 15px 16px;
    border: 1px solid #d9e6de;
    border-radius: 10px;
    background: #f5faf7;
    color: #3f4c45;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
}

.fact-card {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.fact-label { margin-bottom: 4px; }
.fact-value { color: var(--ink); font-weight: 650; }

.trend-charts {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.trend-chart {
    min-width: 0;
    margin: 0;
    padding: 13px 14px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.trend-chart-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.trend-chart-caption strong { font-size: 0.9rem; }
.trend-chart-caption span { color: var(--muted); font-size: 0.76rem; }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.75rem;
}

.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-line { width: 20px; border-top: 2px solid; }
.chart-legend-line.chart-series-dashed { border-top-style: dashed; }
.chart-legend-line.chart-series-mood { border-color: var(--chart-mood); }
.chart-legend-line.chart-series-focus { border-color: var(--chart-focus); }
.chart-legend-line.chart-series-sleep { border-color: var(--chart-sleep); }
.chart-legend-line.chart-series-duration { border-color: var(--chart-duration); }
.chart-legend-line.chart-series-taken { border-color: var(--chart-taken); }

.trend-chart-svg {
    display: block;
    width: 100%;
    height: 190px;
    overflow: visible;
}

.trend-chart-svg-compact { height: 160px; }
.chart-grid-line { stroke: #dfe4e9; stroke-width: 1; }
.chart-axis-line { stroke: #b8c0cc; stroke-width: 1; }
.chart-axis-label,
.chart-date-label,
.chart-no-data {
    fill: var(--muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
}
.chart-date-label { dominant-baseline: middle; text-anchor: middle; }
.chart-no-data { font-size: 12px; }

.chart-data-line {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.trend-chart-density-medium .chart-data-line { stroke-width: 1.6; }
.trend-chart-density-high .chart-data-line { stroke-width: 1.35; }
.chart-data-line.chart-series-dashed { stroke-dasharray: 5 4; }
.chart-data-point {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.trend-chart-density-medium .chart-data-point { stroke-width: 1.5; }
.trend-chart-density-high .chart-data-point { stroke-width: 1.25; }
.chart-data-line.chart-series-mood,
.chart-data-point.chart-series-mood { stroke: var(--chart-mood); }
.chart-data-point.chart-series-mood { fill: var(--chart-mood); }
.chart-data-line.chart-series-focus,
.chart-data-point.chart-series-focus { stroke: var(--chart-focus); }
.chart-data-point.chart-series-focus { fill: var(--surface); }
.chart-data-line.chart-series-sleep,
.chart-data-point.chart-series-sleep { stroke: var(--chart-sleep); }
.chart-data-point.chart-series-sleep { fill: var(--chart-sleep); }
.chart-data-line.chart-series-duration,
.chart-data-point.chart-series-duration { stroke: var(--chart-duration); }
.chart-data-point.chart-series-duration { fill: var(--surface); }
.chart-data-line.chart-series-taken,
.chart-data-point.chart-series-taken { stroke: var(--chart-taken); }
.chart-data-point.chart-series-taken { fill: var(--chart-taken); }

.trend-table-hint {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.76rem;
}

.trend-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    scrollbar-gutter: stable;
}

.trend-table-wrap:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.trend-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.84rem; }
.trend-table th,
.trend-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.trend-table thead th { color: var(--muted); font-weight: 650; }
.trend-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}
.trend-table thead th:first-child { z-index: 2; }
.trend-date { width: 72px; min-width: 72px; white-space: nowrap; }
.trend-row-no-entry { background: #fafafa; }
.trend-row-no-entry th:first-child { background: #fafafa; }

.record-summary-row td { vertical-align: middle; }
.record-date-value { display: block; white-space: nowrap; }
.record-disclosure {
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 2px 14px 2px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.record-disclosure::after {
    content: "▾";
    position: absolute;
    top: 3px;
    right: 1px;
    color: var(--primary);
    font-size: 0.72rem;
}
.record-disclosure[aria-expanded="true"]::after { content: "▴"; }
.record-disclosure:hover { color: var(--primary); }
.record-disclosure:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.record-status-label {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}
.record-status-no-entry { color: #667085; }
.record-context-indicators {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 3px;
    white-space: normal;
}
.record-context-indicators span {
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.2;
}
.record-context-side-effect { color: #912018; }
.record-context-emotion { color: #53389e; }
.record-context-function { color: #9c2a10; }
.record-detail-cell {
    padding: 10px 12px 12px !important;
    background: var(--surface-soft);
    text-align: left !important;
    white-space: normal !important;
}
.record-detail-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.record-detail-title {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
}
.record-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.metric-meter {
    appearance: none;
    display: inline-block;
    width: 72px;
    height: 7px;
    margin-right: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #e6ebef;
    vertical-align: middle;
}

.metric-meter::-webkit-meter-bar {
    border: 0;
    border-radius: inherit;
    background: #e6ebef;
}

.metric-meter::-webkit-meter-optimum-value {
    border-radius: inherit;
    background: var(--primary);
}

.metric-meter::-moz-meter-bar {
    border-radius: inherit;
    background: var(--primary);
}
.metric-value { white-space: nowrap; }
.metric-missing { color: #98a2b3; }

.clinical-summary {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.clinical-summary h3 { margin: 22px 0 8px; color: var(--primary); font-size: 1rem; }
.clinical-summary h3:first-child { margin-top: 0; }
.clinical-summary p { margin: 8px 0; }
.summary-item { padding-left: 14px; position: relative; }
.summary-item::before { content: "•"; position: absolute; left: 1px; color: var(--primary); }

.chip {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: #315c49;
    font-size: 0.78rem;
}
.chip-side-effect { background: #fef3f2; color: #912018; }
.chip-emotion { background: #f4f3ff; color: #53389e; }
.chip-function { background: #fff6ed; color: #9c2a10; }
.empty-state { color: var(--muted); font-size: 0.85rem; }

.report-footer {
    margin-top: 42px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] { display: none !important; }

@media (max-width: 620px) {
    .report {
        padding: calc(20px + env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            calc(56px + env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
    }
    .patient-grid { grid-template-columns: 1fr; }
    .report-section { margin-top: 28px; }
    .trend-chart { padding: 10px 8px 5px; }
    .trend-chart-caption { gap: 3px 8px; }
    .trend-chart-caption strong { font-size: 0.86rem; }
    .trend-chart-caption span { font-size: 0.72rem; }
    .chart-legend { margin-top: 6px; font-size: 0.7rem; }
    .trend-chart-svg { height: 164px; }
    .trend-chart-svg-compact { height: 136px; }
    .trend-table-wrap {
        overflow-x: visible;
        scrollbar-gutter: auto;
    }
    .trend-table {
        min-width: 0;
        table-layout: fixed;
        font-size: 0.72rem;
    }
    .trend-table th,
    .trend-table td {
        padding: 7px 2px;
        text-align: center;
        white-space: nowrap;
    }
    .trend-table th:first-child {
        position: static;
        box-shadow: none;
    }
    .trend-date { width: 52px; min-width: 0; }
    .trend-table th:nth-child(2) { width: 52px; }
    .trend-table th:nth-child(3) { width: 44px; }
    .trend-table th:nth-child(4),
    .trend-table th:nth-child(5) { width: 34px; }
    .trend-table th:nth-child(6) { width: 56px; }
    .metric-meter { display: none; }
    .record-disclosure { min-height: 44px; padding-right: 11px; text-align: center; }
    .record-disclosure::after { right: 0; }
    .record-context-indicators { align-items: center; }
    .record-detail-content { display: block; }
    .record-detail-title { display: block; margin-bottom: 7px; }
}

@media print {
    body { background: #fff; }
    .report { width: 100%; padding: 0; }
    .report-section { break-inside: avoid; }
    .trend-chart { break-inside: avoid; }
    .records-section { break-inside: auto; }
    .records-section .trend-table-wrap { overflow: visible; }
    .records-section .trend-table { min-width: 0; }
    .records-section .trend-table thead { display: table-header-group; }
    .record-detail-row[hidden] { display: table-row !important; }
    .record-summary-row-has-detail { break-after: avoid; }
    .record-detail-row { break-before: avoid; break-inside: avoid; }
    .record-disclosure { min-height: 0; padding: 0; cursor: default; }
    .record-disclosure::after { display: none; }
}