:root {
  --navy: #173b63;
  --navy-dark: #102d4c;
  --blue: #e9f2f9;
  --blue-strong: #d8e9f6;
  --page: #f6f8fa;
  --card: #ffffff;
  --text: #202b35;
  --muted: #657382;
  --border: #d8e0e7;
  --success: #2f7654;
  --success-bg: #edf7f1;
  --warning: #8a6418;
  --warning-bg: #fff8e5;
  --danger: #9b3434;
  --danger-bg: #fff1f1;
  --shadow: 0 8px 28px rgba(23, 59, 99, 0.09);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--page);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

a { color: var(--navy); }

.app-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 94px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px 18px;
}

.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-logo { width: 146px; height: auto; display: block; }
.brand-copy { border-left: 1px solid var(--border); padding-left: 14px; }
.brand-product { font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.brand-edition { color: var(--muted); font-size: .9rem; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.link-button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 8px;
}
.link-button:hover { background: var(--blue); }

.exit-app-button {
    border: 1px solid #9b2c2c;
    background: white;
    color: #9b2c2c;
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    font: inherit;
}

.exit-app-button:hover {
    background: #fff5f5;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.screen { display: none; }
.screen.active { display: block; }

.hero {
  padding: 54px 58px 48px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.hero-logo { width: min(330px, 76%); height: auto; margin: 0 auto 28px; display: block; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 750;
  color: var(--navy);
}
h1, h2, h3 { line-height: 1.2; }
.hero h1 { margin: 8px 0 8px; font-size: clamp(2rem, 5vw, 3rem); color: var(--navy-dark); }
.hero-subtitle { margin: 0 auto; max-width: 630px; color: var(--muted); font-size: 1.1rem; }

.session-card {
  width: min(620px, 100%);
  margin: 34px auto 0;
  padding: 24px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; margin-bottom: 7px; font-weight: 700; color: var(--navy-dark); }
.field small { display: block; margin-top: 5px; color: var(--muted); }
.field select, .field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #bcc9d4;
  border-radius: 9px;
  padding: 9px 11px;
  background: white;
}

.primary-button, .secondary-button, .danger-button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 20px;
  font-weight: 720;
}
.primary-button { background: var(--navy); color: white; }
.primary-button:hover:not(:disabled) { background: var(--navy-dark); }
.secondary-button { background: white; color: var(--navy); border-color: #aebdca; }
.secondary-button:hover:not(:disabled) { background: var(--blue); }
.danger-button { background: white; color: var(--danger); border-color: #d8aaaa; }
.button-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.full-width { width: 100%; margin-top: 20px; }

.screen-header {
  padding: 28px 34px 22px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.screen-header h1 { margin: 4px 0 4px; color: var(--navy-dark); font-size: 2rem; }
.screen-header p { margin: 0; color: var(--muted); }

.content { padding: 32px 36px 38px; }
.overview-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 24px; }
.assessment-list { display: grid; gap: 12px; }
.assessment-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
}
.assessment-number {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: var(--navy); font-weight: 800;
}
.assessment-item strong { color: var(--navy-dark); display: block; }
.assessment-item span { color: var(--muted); font-size: .94rem; }

.ra-box {
  background: var(--blue);
  border: 1px solid #c8ddeb;
  border-radius: 12px;
  padding: 18px 20px;
  font-size: .9rem;
  color: #39536a;
}
.ra-box h3 { margin: 0 0 10px; color: var(--navy); font-size: 1rem; }
.ra-box ul { margin: 0; padding-left: 20px; }
.ra-box li + li { margin-top: 6px; }

.progress-wrap { padding: 22px 32px 0; background: #fff; }
.progress-steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.progress-steps::before {
  content: ""; position: absolute; top: 16px; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--border); z-index: 0;
}
.progress-step { text-align: center; position: relative; z-index: 1; color: var(--muted); font-size: .82rem; }
.progress-dot {
  width: 34px; height: 34px; margin: 0 auto 7px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid #b7c4cf;
  color: var(--muted); font-weight: 800;
}
.progress-step.active .progress-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.progress-step.complete .progress-dot { background: var(--success); border-color: var(--success); color: #fff; }
.progress-step.active, .progress-step.complete { color: var(--navy-dark); font-weight: 650; }

.task-content { padding: 34px 44px 42px; text-align: center; min-height: 465px; display: flex; flex-direction: column; }
.task-kicker { color: var(--navy); font-weight: 750; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.task-content h1 { margin: 7px 0 22px; color: var(--navy-dark); font-size: 2.15rem; }
.instruction { max-width: 790px; margin: 0 auto; font-size: clamp(1.2rem, 2.7vw, 1.55rem); color: #273846; }
.prompt {
  margin: 25px auto 6px;
  padding: 18px 24px;
  border-radius: 12px;
  background: var(--blue);
  border: 1px solid #c7dcea;
  color: var(--navy-dark);
  font-weight: 780;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: .015em;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
}
.counting-prompt { word-spacing: .38em; }
.breath-prompt { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; white-space: normal; font-size: clamp(1rem, 2.4vw, 1.35rem); }
.breath-prompt span { padding: 7px 12px; border-radius: 999px; background: white; border: 1px solid #c7dcea; }
.task-tech-note { max-width: 760px; margin: 12px auto 0; padding: 10px 14px; border-radius: 9px; background: #f6f8fa; border: 1px solid var(--border); color: var(--muted); font-size: .88rem; text-align: left; }

.clock-wrap { margin: 26px auto 4px; }
.clock-face {
  --progress: 0deg;
  width: 150px; height: 150px; border-radius: 50%; padding: 7px;
  background: conic-gradient(var(--navy) var(--progress), var(--blue-strong) 0deg);
  box-shadow: 0 4px 18px rgba(23,59,99,.12);
}
.clock-inner {
  width: 100%; height: 100%; border-radius: 50%; background: white;
  display: grid; place-items: center;
}
.clock-number { font-size: 3.8rem; line-height: 1; color: var(--navy-dark); font-weight: 760; }
.clock-label { color: var(--muted); margin-top: 8px; }

.task-actions { margin-top: auto; padding-top: 28px; }
.status-message {
  min-height: 28px;
  margin-top: 16px;
  font-weight: 680;
  color: var(--muted);
}
.status-message.recording { color: var(--danger); }
.status-message.processing {
  color: var(--warning);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.status-message.processing::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}
@keyframes processing-spin {
  to { transform: rotate(360deg); }
}
.status-message.processing-expanded {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 11px;
  row-gap: 4px;
  max-width: 650px;
  padding: 14px 16px;
  border: 1px solid #ead69b;
  border-radius: 10px;
  background: var(--warning-bg);
  text-align: left;
  line-height: 1.45;
}
.status-message.processing-expanded::before {
  grid-row: 1 / span 2;
  margin-top: 2px;
}
.processing-message-title {
  color: var(--navy-dark);
  font-weight: 800;
}
.processing-message-detail {
  color: #684d18;
  font-size: .92rem;
  font-weight: 550;
}
.status-message.success { color: var(--success); }
.status-message.error { color: var(--danger); }

.completion-mark {
  width: 78px; height: 78px; border-radius: 50%; margin: 8px auto 18px;
  display: grid; place-items: center; background: var(--success-bg); color: var(--success);
  font-size: 2.5rem; font-weight: 800; border: 1px solid #c9e2d3;
}
.session-id {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 12px;
  background: var(--blue); border-radius: 999px; padding: 7px 13px; color: var(--navy);
  font-size: .92rem;
}

.status-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: #fff; border-top: 1px solid var(--border);
  min-height: 50px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px max(18px, calc((100vw - 1040px)/2));
  color: var(--muted); font-size: .84rem;
}
.status-left { display: flex; align-items: center; gap: 9px; }
.status-indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.status-indicator.busy { background: var(--warning); }
.status-indicator.error { background: var(--danger); }
.status-right { text-align: right; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(12, 30, 47, .45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  width: min(560px, 100%); background: white; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25); padding: 28px;
}
.modal h2 { margin-top: 0; color: var(--navy-dark); }
.modal-logo { width: 180px; height: auto; margin-bottom: 16px; }
.modal dl { display: grid; grid-template-columns: 140px 1fr; gap: 7px 12px; }
.modal dt { font-weight: 700; color: var(--navy); }
.modal dd { margin: 0; }

.results-shell { width: min(1120px, calc(100% - 32px)); margin: 26px auto 86px; }
.results-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px; }
.overall-card {
  background: linear-gradient(135deg, #173b63, #245d8e); color: white;
  padding: 24px 26px; border-radius: 14px; margin-bottom: 26px;
}
.overall-card h2 { margin: 0 0 7px; }
.overall-card p { margin: 0; opacity: .9; }
.task-result { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin: 18px 0; overflow: hidden; box-shadow: 0 5px 18px rgba(23,59,99,.06); }
.task-result-header { background: var(--blue); padding: 17px 20px; border-bottom: 1px solid #cbddea; }
.task-result-header h2 { margin: 0; color: var(--navy-dark); font-size: 1.35rem; }
.task-result-body { padding: 20px; }
.model-summary { display: grid; grid-template-columns: minmax(210px,.7fr) 1.3fr; gap: 18px; }
.model-output { border: 1px solid #cce1d5; background: var(--success-bg); border-radius: 11px; padding: 16px; }
.model-output .label { color: var(--muted); font-size: .84rem; }
.model-output .value { color: var(--success); font-size: 1.3rem; font-weight: 800; margin: 4px 0 10px; }
.score-row { display: flex; gap: 12px; flex-wrap: wrap; }
.score-chip { background: white; border: 1px solid #cbd9d0; border-radius: 999px; padding: 5px 9px; font-size: .86rem; }
.summary-block { color: #344858; }
.summary-block h3 { margin-top: 0; color: var(--navy-dark); }
.summary-heading { display: block; margin: 13px 0 5px; color: var(--navy-dark); }
.summary-line + .summary-line { margin-top: 5px; }

.spline-visualization {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcfd;
}
.spline-visualization-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.spline-visualization-heading h3 { margin: 0 0 4px; color: var(--navy-dark); }
.spline-visualization-heading p { margin: 0; color: var(--muted); }
.spline-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.spline-chart-card { min-width: 0; }
.spline-chart-card h4 { margin: 0 0 8px; color: var(--navy-dark); }
.breath-spline-chart {
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  padding: 8px;
}
.spline-svg { display: block; width: 100%; height: auto; }
.spline-grid-line { stroke: #dce4ea; stroke-width: 1; }
.spline-axis-line { stroke: #8295a5; stroke-width: 1.2; }
.spline-axis-label { fill: #667987; font-size: 12px; font-family: Arial, sans-serif; }
.spline-path-observed { fill: none; stroke: #7b8c99; stroke-width: 2; stroke-dasharray: 5 4; }
.spline-path-fitted { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spline-path-reference { fill: none; stroke: var(--warning); stroke-width: 2; stroke-dasharray: 2 5; }
.spline-chart-note, .spline-disclaimer { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.spline-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: #445867; font-size: .86rem; }
.spline-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.spline-chart-legend i { display: inline-block; width: 28px; height: 0; border-top: 3px solid; }
.spline-chart-legend .legend-observed { border-top-color: #7b8c99; border-top-style: dashed; }
.spline-chart-legend .legend-fitted { border-top-color: var(--navy); }
.spline-chart-legend .legend-reference { border-top-color: var(--warning); border-top-style: dotted; }
.spline-chart-unavailable { display: grid; place-items: center; color: var(--muted); }

.respiratory-visualization { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfd; }
.whole-recording-card, .phase-analysis-card { border: 1px solid var(--border); border-radius: 11px; background: white; padding: 14px; }
.whole-recording-card { margin-bottom: 16px; }
.phase-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.phase-card-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.phase-card-heading h4 { margin:0 0 3px; color:var(--navy-dark); }
.phase-card-heading p { margin:0; color:var(--muted); font-size:.9rem; }
.whole-breath-chart, .real-time-phase-chart, .raw-waveform-chart { min-height: 180px; border:1px solid var(--border); border-radius:10px; background:white; padding:8px; }
.phase-region-inspiration { fill:#dcefe8; opacity:.75; }
.phase-region-pause { fill:#f1f3f5; opacity:.95; }
.phase-region-expiration { fill:#e2ebf5; opacity:.78; }
.whole-envelope-path { fill:none; stroke:var(--navy-dark); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.phase-boundary-line { stroke:#687d8e; stroke-width:1.5; stroke-dasharray:5 4; }
.phase-chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 0; color:#445867; font-size:.86rem; }
.phase-chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.phase-chart-legend i { display:inline-block; width:22px; height:12px; border:1px solid #b7c5d0; border-radius:2px; }
.legend-inspiration { background:#dcefe8; } .legend-pause { background:#f1f3f5; } .legend-expiration { background:#e2ebf5; }
.waveform-details, .normalized-shape-details { margin-top:12px; }
.waveform-details summary, .normalized-shape-details summary { cursor:pointer; color:var(--navy); font-weight:750; }
.waveform-details[open] summary, .normalized-shape-details[open] summary { margin-bottom:10px; }
.waveform-zero-line { stroke:#9aabb7; stroke-width:1; }
.raw-waveform-path { fill:none; stroke:#344858; stroke-width:1.35; }

.analysis-details { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.analysis-details summary { cursor: pointer; color: var(--navy); font-weight: 750; }
.analysis-details pre { background: #f2f5f7; border-radius: 9px; padding: 15px; overflow-x: auto; white-space: pre-wrap; font-size: .82rem; }
.warning-box { background: var(--warning-bg); border: 1px solid #ead69b; border-radius: 9px; padding: 10px 12px; color: #684d18; font-size: .9rem; }
.empty-card { padding: 22px; color: var(--muted); border: 1px dashed #b7c5d0; border-radius: 11px; background: #fff; }

@media (max-width: 760px) {
  .app-shell, .results-shell { width: min(100% - 20px, 1040px); }
  .app-header { align-items: flex-start; }
  .brand-logo { width: 112px; }
  .brand-copy { display: none; }
  .hero { padding: 36px 22px; }
  .form-row, .overview-grid, .model-summary, .spline-chart-grid, .phase-chart-grid { grid-template-columns: 1fr; }
  .content, .task-content { padding: 26px 20px 34px; }
  .prompt { white-space: normal; }
  .status-right { display: none; }
  .results-top { align-items: flex-start; flex-direction: column; }
}

/* Version 0.1b: study, participant, sample-set, and repeat-attempt workflow */
.study-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.study-entry-card { border: 1px solid var(--border); border-radius: 13px; padding: 20px; background: #fff; }
.study-entry-card h2 { margin: 0 0 15px; color: var(--navy-dark); font-size: 1.15rem; }
.optional, .muted { color: var(--muted); }
.narrow-content { max-width: 680px; margin: 0 auto; }
.page-actions { padding: 0 36px 36px; }
.study-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.study-toolbar h2 { margin: 0 0 4px; color: var(--navy-dark); }
.study-toolbar p { margin: 0; }
.participant-list { display: grid; gap: 13px; }
.participant-card { border: 1px solid var(--border); border-radius: 12px; padding: 17px 18px; display: flex; justify-content: space-between; gap: 18px; align-items: center; background: #fff; }
.participant-card h3 { margin: 0 0 5px; color: var(--navy-dark); }
.participant-card p { margin: 0 0 9px; color: var(--muted); }
.participant-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.compact { padding: 8px 12px; font-size: .88rem; }
.status-pill { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: .79rem; font-weight: 750; }
.status-pill.complete { background: var(--success-bg); color: var(--success); border: 1px solid #c9e2d3; }
.status-pill.in-progress { background: var(--blue); color: var(--navy); border: 1px solid #cbddea; }
.mini-progress { width: min(360px, 100%); height: 7px; border-radius: 999px; background: #e7edf2; overflow: hidden; margin-bottom: 5px; }
.mini-progress span { display: block; height: 100%; background: var(--navy); }
.sample-choice { border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-top: 20px; }
.sample-choice legend { font-weight: 800; color: var(--navy-dark); padding: 0 7px; }
.sample-choice label { display: block; margin: 10px 0; font-weight: 650; }
.sample-choice small { display: block; color: var(--muted); margin-top: 12px; }
.identity-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.identity-row span { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 11px; }
.screen-header .identity-row span { background: var(--blue); border-color: #cbddea; color: var(--navy); }
.sample-banner { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; background: #eef5fa; border-bottom: 1px solid var(--border); color: var(--navy); font-size: .9rem; }
.pataka-prompt { display: flex; justify-content: center; gap: clamp(10px, 2vw, 25px); flex-wrap: nowrap; font-size: clamp(1.05rem, 2vw, 1.45rem); }
.completion-title { margin: 0; color: var(--navy-dark); }
.wrap-actions { flex-wrap: wrap; justify-content: center; }
.sample-matrix { margin: 22px auto; max-width: 610px; }
.sample-grid { display: grid; grid-template-columns: 1.1fr repeat(5, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.sample-grid > div { padding: 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.sample-grid > div:nth-child(6n) { border-right: 0; }
.sample-grid > div:nth-last-child(-n+6) { border-bottom: 0; }
.sample-grid-head { background: var(--blue); color: var(--navy-dark); font-weight: 800; }
.sample-grid-label { font-weight: 800; color: var(--navy); }
.sample-result-card { border: 1px solid var(--border); border-radius: 12px; padding: 17px; margin-bottom: 16px; background: #fff; }
.sample-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sample-result-heading h3 { margin: 0; color: var(--navy-dark); }
.current-attempt-label { color: var(--navy); font-weight: 750; font-size: .88rem; margin-bottom: 13px; }
.record-meta { color: var(--muted); font-size: .84rem; margin-top: 13px; }
.summary-heading { display: block; margin-top: 9px; }
.summary-line { margin-top: 5px; }
.earlier-attempts { margin-top: 15px; border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; background: #f8fafb; }
.earlier-attempts > summary { cursor: pointer; color: var(--navy); font-weight: 750; }
.earlier-attempt-card { border-top: 1px solid var(--border); margin-top: 11px; padding-top: 11px; color: #344858; }

@media (max-width: 760px) {
  .study-entry-grid { grid-template-columns: 1fr; }
  .study-toolbar, .participant-card, .sample-banner { align-items: flex-start; flex-direction: column; }
  .participant-actions { justify-content: flex-start; }
  .pataka-prompt { gap: 7px; font-size: .98rem; }
  .page-actions { padding: 0 20px 28px; }
}

/* Version 0.1c: preliminary lab-review workflow */
.optional-fields { margin: 18px 0; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #f8fafb; }
.optional-fields > summary { cursor: pointer; color: var(--navy); font-weight: 750; }
.metadata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 16px; }
.metadata-grid .full-span { grid-column: 1 / -1; }
textarea { width: 100%; resize: vertical; font: inherit; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: var(--text); background: white; }
.quality-result { max-width: 620px; margin: 14px auto 0; border-radius: 10px; padding: 11px 14px; text-align: left; }
.quality-result.good { background: var(--success-bg); border: 1px solid #c9e2d3; color: var(--success); }
.quality-result.review { background: var(--warning-bg); border: 1px solid #ead69b; color: #684d18; }
.quality-result ul { margin: 7px 0 0 20px; padding: 0; }
.quality-badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: .82rem; font-weight: 750; }
.quality-badge.good { background: var(--success-bg); color: var(--success); border: 1px solid #c9e2d3; }
.quality-badge.review { background: var(--warning-bg); color: #684d18; border: 1px solid #ead69b; }
.participant-metadata { margin-top: 15px; background: rgba(255,255,255,.12); padding: 12px 14px; border-radius: 10px; }
.participant-metadata dl { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 5px 12px; }
.participant-metadata dt { font-weight: 700; }
.participant-metadata dd { margin: 0; }
@media (max-width: 760px) { .metadata-grid { grid-template-columns: 1fr; } .metadata-grid .full-span { grid-column: auto; } }


.feasibility-note {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #cbddec;
  border-radius: 12px;
  background: #f2f7fb;
}
.feasibility-note p {
  margin: 6px 0 0;
  color: #40576b;
}


/* Version 0.1e: data integrity and model information */
.status-pill.label-required { background: #fff0d6; color: #7a4d00; border: 1px solid #e8c47f; }
.participant-detail { display:block; margin-top:-5px; margin-bottom:8px; color:var(--muted); }
.validation-report { margin: 0 0 18px; padding: 16px 18px; border:1px solid var(--border); border-radius:12px; background:#f8fbfd; }
.validation-report h3 { margin-top:0; color:var(--navy-dark); }
.validation-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0; }
.validation-grid span { background:white; border:1px solid var(--border); border-radius:9px; padding:10px; }
.success-text { color:var(--success); font-weight:700; }
.model-information { margin-top:12px; }
.model-information summary { cursor:pointer; font-weight:750; color:var(--navy); }
.model-info-table-wrap { overflow-x:auto; margin-top:10px; }
.model-info-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.model-info-table th, .model-info-table td { text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--border); }
.model-info-table th { width:210px; color:var(--navy-dark); background:#f5f9fc; }


.study-manager-card {
  max-width: 980px;
  margin: 22px auto 0;
  padding: 22px;
  border: 1px solid var(--border, #d8e1ea);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.study-manager-heading, .study-list-row, .import-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.all-studies-list { display: grid; gap: 10px; margin-top: 16px; }
.study-list-row {
  padding: 14px 16px;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  background: #f9fbfd;
}
.study-list-row > div:first-child { display: grid; gap: 3px; min-width: 210px; }
.study-list-row > div:first-child span, .study-list-meta { color: #5d6875; font-size: .9rem; }
.study-list-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; flex: 1; }
.import-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; }
.import-controls { justify-content: flex-end; flex-wrap: wrap; }
.import-controls input[type=file] { max-width: 330px; }
.error-text { color: #9e2b25; }
@media (max-width: 760px) {
  .study-manager-heading, .study-list-row, .import-card, .import-controls { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .study-list-meta { display: grid; }
}

/* Task navigation */
.task-exit-button {
  display: block;
  margin: 16px auto 0;
}

/* Version 0.1l: ensure the feasibility-study heading is readable. */
.feasibility-note strong {
  color: #17324d;
}


/* Phase I UI consistency */
.information-panel {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 18px 0 22px;
  padding: 15px 17px;
  border: 1px solid #c8ddea;
  border-radius: 12px;
  background: #eef6fb;
  color: #243f55;
  text-align: left;
}
.information-panel p { margin: 0; line-height: 1.48; }
.information-panel p + p { margin-top: 3px; }
.information-icon {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2f6f9f;
  color: #fff;
  font-weight: 800;
  font-family: Georgia, serif;
}
.information-panel.light-on-dark { background: rgba(255,255,255,.94); color: #243f55; border-color: rgba(255,255,255,.8); }
.task-information-panel { max-width: 760px; margin-left: auto; margin-right: auto; }
button:disabled { opacity: .55; cursor: not-allowed; }
.validation-report > p { color: var(--muted); margin-top: -4px; }

/* Version 0.2f: participant-selected task workflow */
.sample-choice > label { margin: 4px 0 7px; }
.sample-choice > input[type="number"] {
  width: 150px;
  min-height: 46px;
  border: 1px solid #bcc9d4;
  border-radius: 9px;
  padding: 9px 11px;
  background: white;
  font: inherit;
}
.task-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.task-choice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 220px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
}
.task-choice-card.complete {
  background: var(--success-bg);
  border-color: #c9e2d3;
}
.task-choice-copy h2 {
  margin: 9px 0 7px;
  color: var(--navy-dark);
  font-size: 1.2rem;
}
.task-choice-copy p { margin: 0; color: var(--muted); }
.task-choice-card button { align-self: flex-start; }
.task-choice-status {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .79rem;
  font-weight: 750;
}
.task-choice-status.available {
  background: var(--blue);
  color: var(--navy);
  border: 1px solid #cbddea;
}
.task-choice-status.complete {
  background: #fff;
  color: var(--success);
  border: 1px solid #c9e2d3;
}
.task-choice-actions { padding: 0; }
.task-choice-hint { margin: 12px 0 0; text-align: center; color: var(--muted); }
.task-status-heading {
  margin-bottom: 10px;
  color: var(--muted);
  text-align: center;
  font-size: .83rem;
  font-weight: 700;
}

@media (max-width: 700px) {
  .task-choice-grid { grid-template-columns: 1fr; }
  .task-choice-card { min-height: 0; }
}

/* Researcher correction of paired-breath phase boundaries */
.boundary-editor { margin-top:16px; padding:16px; border:1px solid #cbd6df; border-radius:10px; background:#f8fafb; }
.boundary-editor-copy p { margin:5px 0 12px; color:#4f6270; }
.boundary-values { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:12px; font-size:.95rem; }
.boundary-save-status { min-height:1.35em; margin-top:9px; font-weight:600; color:#365b4c; }
.phase-boundary-handle { stroke:#294e68; stroke-width:4; cursor:ew-resize; touch-action:none; }
.phase-boundary-hitbox { stroke:transparent; stroke-width:22; cursor:ew-resize; touch-action:none; }
.phase-boundary-label { fill:#294e68; font-size:13px; font-weight:700; pointer-events:none; }
.whole-breath-chart.editable-boundaries svg { user-select:none; }

/* Current Check-in task */
.checkin-prompt { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.checkin-prompt strong { font-size: 1.35rem; color: var(--navy-dark); }
.checkin-prompt span { color: var(--muted); }
@media (max-width: 760px) { .progress-steps { grid-template-columns: repeat(5, minmax(90px, 1fr)); overflow-x: auto; } .sample-grid { min-width: 720px; } }

/* Current Check-in transcript */
.checkin-transcript-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #d7dde5;
  border-radius: 10px;
  background: #ffffff;
}
.checkin-transcript-card h4 { margin: 0 0 10px; }
.checkin-transcript-text {
  margin: 0 0 8px;
  white-space: pre-wrap;
  line-height: 1.55;
}

/* Collapsed missing sample sets on results pages */
.task-result-header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.task-result-header-row > div { min-width: 0; }
.missing-samples-toggle { flex: 0 0 auto; white-space: nowrap; }
.missing-sample-card[hidden] { display: none !important; }
@media (max-width: 720px) {
  .task-result-header-row { align-items: flex-start; flex-direction: column; }
  .missing-samples-toggle { width: 100%; }
}


/* Phase II Build 1: Current Check-in language interpretation */
.checkin-language-card { margin-top: 14px; padding: 16px; border: 1px solid #d7e1e8; border-radius: 12px; background: #f8fbfc; }
.checkin-language-card h4 { margin-top: 0; }
.checkin-language-summary { font-size: 1.02rem; line-height: 1.55; }
.checkin-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.checkin-language-grid > div { padding: 12px; border-radius: 9px; background: white; border: 1px solid #e0e7eb; }
.checkin-language-grid p { margin: 6px 0 0; }
@media (max-width: 760px) { .checkin-language-grid { grid-template-columns: 1fr; } }

.definition-note { font-weight: 400; color: #52606d; font-size: 0.9em; }
.checkin-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; }
.checkin-feature-grid > div { border: 1px solid #d9e2ec; border-radius: 10px; padding: 12px; background: #fbfdff; }
.checkin-feature-grid h5 { margin: 0 0 8px; }
.checkin-feature-grid table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.checkin-feature-grid th, .checkin-feature-grid td { padding: 5px 4px; border-bottom: 1px solid #edf2f7; text-align: left; vertical-align: top; }
.checkin-feature-grid th { font-weight: 600; width: 58%; }


/* Phase II results navigation: latest result visible, earlier and missing results collapsed */
.result-visibility-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.earlier-results-toggle, .missing-samples-toggle { white-space: nowrap; }
.earlier-result-card[hidden], .missing-sample-card[hidden] { display: none !important; }
@media (max-width: 720px) {
  .result-visibility-controls { width: 100%; justify-content: stretch; }
  .earlier-results-toggle, .missing-samples-toggle { width: 100%; }
}

/* Phase II affect comparison: keep language and acoustic estimates together. */
.affect-comparison-wrap { margin: 16px 0 8px; }
.affect-comparison-wrap h5 { margin: 0 0 9px; color: var(--navy-dark); font-size: 1rem; }
.affect-comparison-table { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; }
.affect-comparison-table th, .affect-comparison-table td { text-align: left; vertical-align: top; padding: 10px 11px; border: 1px solid #dfe7eb; }
.affect-comparison-table thead th { background: #f3f8fb; color: var(--navy-dark); }
.affect-comparison-table tbody th { width: 24%; background: #f8fbfc; color: var(--navy-dark); }
.affect-comparison-table small { display: block; margin-top: 5px; color: #5f6f78; line-height: 1.35; }
@media (max-width: 760px) {
  .affect-comparison-table { font-size: .88rem; }
  .affect-comparison-table th, .affect-comparison-table td { padding: 8px; }
}


/* Patient-facing participant ID entry */
.participant-entry-page {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--page);
}

.participant-entry-shell {
  width: min(620px, 100%);
}

.participant-entry-card {
  padding: clamp(36px, 7vw, 64px);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.participant-entry-logo {
  display: block;
  width: min(300px, 78%);
  height: auto;
  margin: 0 auto 30px;
}

.participant-entry-card h1 {
  margin: 0;
  color: var(--navy-dark);
  font-size: clamp(2rem, 6vw, 3rem);
}

.participant-entry-prompt {
  max-width: 440px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 1.12rem;
}

.participant-entry-form {
  width: min(400px, 100%);
  margin: 34px auto 0;
  text-align: left;
}

.participant-entry-form input {
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.participant-entry-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--danger);
  text-align: center;
}

@media (max-width: 560px) {
  .participant-entry-page { padding: 16px; }
  .participant-entry-card { padding: 36px 24px; }
}

/* v0.3f participant-facing data collection */
.participant-page { padding: 0; background: var(--page); }
.patient-app-shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 18px; }
.patient-header { display: flex; align-items: center; gap: 18px; padding: 0 4px 18px; }
.patient-header-logo { width: 142px; height: auto; display: block; }
.patient-header-participant { margin-top: 3px; color: var(--muted); font-size: .94rem; }
.patient-not-you { padding: 3px 6px; text-decoration: underline; text-underline-offset: 2px; }
.patient-home-panel { overflow: hidden; }
.patient-home-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.patient-home-header .patient-not-you { flex: 0 0 auto; }
.patient-home-content { display: grid; gap: 26px; }
.patient-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.patient-task-card { display: flex; flex-direction: column; gap: 18px; min-height: 310px; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(23,59,99,.06); }
.patient-task-card.complete { border-color: #a9cdb8; background: var(--success-bg); }
.patient-task-card-copy { flex: 1; }
.patient-task-card h2 { margin: 9px 0 10px; color: var(--navy-dark); font-size: 1.55rem; }
.patient-task-card p { margin: 0; color: var(--muted); }
.patient-task-card .primary-button, .patient-task-card .secondary-button { width: 100%; }
.patient-task-state { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 750; }
.patient-task-state.available { color: var(--navy); background: var(--blue); }
.patient-task-state.complete { color: var(--success); background: #dff1e6; }
.patient-last-recording { margin-top: 20px !important; font-weight: 650; color: #435766 !important; }
.patient-completion-panel { padding: 30px; text-align: center; border: 1px solid #b8d7c4; border-radius: 14px; background: var(--success-bg); }
.patient-completion-panel h2 { margin: 10px 0 7px; color: var(--navy-dark); }
.patient-completion-panel p { margin: 0 0 20px; color: var(--muted); }
.patient-task-banner { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 28px; border-bottom: 1px solid var(--border); background: var(--blue); color: var(--navy-dark); }
.patient-progress-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 22px 34px 0; background: #fff; }
.patient-progress-step { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 650; }
.patient-progress-step span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #b7c4cf; background: white; font-size: .78rem; font-weight: 800; }
.patient-progress-step.active { color: var(--navy-dark); border-color: #9ebbd1; background: var(--blue); }
.patient-progress-step.active span { color: white; border-color: var(--navy); background: var(--navy); }
.patient-progress-step.complete { color: var(--success); border-color: #a9cdb8; background: var(--success-bg); }
.patient-progress-step.complete span { color: white; border-color: var(--success); background: var(--success); }
.patient-task-content { min-height: 540px; }
.patient-status-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 9px 24px; border-top: 1px solid var(--border); background: rgba(255,255,255,.97); color: var(--muted); font-size: .82rem; }
.participant-entry-status.processing { color: var(--navy); }
.participant-entry-status.success { color: var(--success); }
.participant-entry-status.error { color: var(--danger); }

@media (max-width: 720px) {
  .patient-app-shell { width: min(100% - 20px, 980px); padding-top: 12px; }
  .patient-header { padding: 0 2px 12px; }
  .patient-header-logo { width: 112px; }
  .patient-task-grid { grid-template-columns: 1fr; }
  .patient-home-header { flex-direction: column; gap: 8px; }
  .patient-home-header .patient-not-you { align-self: flex-start; }
  .patient-progress-wrap { grid-template-columns: 1fr; padding: 16px 18px 0; }
  .patient-task-content { min-height: 500px; padding-left: 22px; padding-right: 22px; }
  .patient-status-bar { flex-direction: column; align-items: flex-start; }
  .patient-app-shell { padding-bottom: 18px; }
}