/* One palette and component language from the homepage through the EchoLab. */
:root {
  --home-ink: #182a24; --home-green: #245b49; --home-muted: #657169;
  --home-line: #dfe4da; --home-paper: #fafbf7;
  --bg: #fafbf7; --surface: #ffffff; --surface-muted: #f1f4ed; --surface-strong: #e4ecd9;
  --text: #182a24; --text-muted: #657169; --line: #dfe4da; --line-strong: #a3b494;
  --mint: #b9cb91; --mint-soft: #edf2e8; --teal: #245b49; --teal-strong: #245b49;
  --success: #245b49; --radius: 8px; --radius-small: 5px; --shadow: 0 12px 30px #203c240a;
}
html { min-width: 0; background: var(--bg); }
body, body.is-home { color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #77a882; outline-offset: 3px; }
.site-skip { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 12px; transform: translateY(-150%); color: #fff; background: var(--home-green); text-decoration: none; }
.site-skip:focus { transform: translateY(0); }
.site-header-action { display: flex; align-items: center; gap: 10px; }
.site-language { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--home-line); border-radius: 5px; background: #fff; }
.site-language button { min-width: 32px; min-height: 32px; border: 0; border-radius: 3px; color: var(--home-muted); background: transparent; padding: 5px; font-size: 10px; font-weight: 600; }
.site-language button[aria-pressed="true"] { color: #fff; background: var(--home-green); }
.home-header { box-shadow: none; }
.home-header .home-nav a { font-weight: 550; }
.home-header .home-nav a.nav-records { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid #b8cbb0; border-radius: 5px; color: var(--home-green); background: #edf2e8; font-weight: 700; }
.home-header .home-nav a.nav-records:hover, .home-header .home-nav a.nav-records.is-current { border-color: var(--home-green); background: #dcebd5; }
.home-header .home-nav a.nav-records.is-current::after { display: none; }
.home-header .home-nav .nav-records .home-icon { width: 16px; height: 16px; }
.site-header-action .chat-visibility-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 41px; padding: 10px 15px; border: 1px solid #c4d1b8; border-radius: 5px; color: var(--home-green); background: #edf2e8; font-size: 11px; font-weight: 600; }
.site-header-action .chat-visibility-toggle.is-active { border-color: var(--home-green); background: #e1ead7; }
.site-header-action .toolbar-icon { width: 17px; height: 17px; }
.home-main .learning-preview-link { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 20px 23px; margin-top: 25px; border: 1px solid var(--line); border-radius: 5px; background: #edf2e8; }
.learning-preview-link > div { max-width: 710px; }
.learning-preview-link h2 { margin: 8px 0; font-size: 25px; font-weight: 550; letter-spacing: -.6px; }
.learning-preview-link p:not(.home-kicker) { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.8; }
.learning-preview-link .home-button { flex-shrink: 0; }
.records-page { width: min(1180px, calc(100% - 88px)); padding: 45px 0 70px; gap: 30px; }
.records-intro { padding: 0 0 35px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); background: transparent; }
.records-intro .eyebrow { color: var(--home-green); font-size: 10px; letter-spacing: 1.6px; margin-bottom: 15px; }
.records-intro h1 { font-size: 34px; line-height: 1.2; letter-spacing: -1px; font-weight: 550; }
.records-intro p:not(.eyebrow) { color: var(--text-muted); font-size: 14px; line-height: 1.8; }
.records-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 12px; }
.records-flow span:not(.records-flow-arrow) { display: inline-flex; align-items: center; gap: 9px; }
.records-flow strong { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--home-green); font-size: 11px; }
.records-flow-arrow { color: var(--home-muted); font-size: 17px; }
.ingest-panel { border-color: var(--line); border-radius: 6px; background: #edf2e8; }
.ingest-panel span { color: var(--home-green); font-size: 10px; letter-spacing: .8px; }
.ingest-panel code { color: var(--text-muted); font-size: 11px; }
.record-card { overflow: hidden; gap: 16px; padding: 20px; border-color: var(--line); border-radius: 7px; box-shadow: none; }
.record-card.is-selected { border-color: #97ab7e; box-shadow: none; }
.record-card-preview { display: block; width: calc(100% + 40px); height: 160px; margin: -20px -20px 0; padding: 10px; object-fit: contain; background: #000; }
.record-card h3 { color: var(--home-green); font-weight: 600; font-size: 16px; }
.record-card-recent { width: fit-content; margin-top: -9px; padding: 5px 8px; border-radius: 3px; color: var(--home-green); background: #edf2e8; font-size: 10px; font-weight: 600; }
.record-card p { font-size: 12px; line-height: 1.75; }
.record-card-topline { color: var(--text-muted); font-size: 10px; }
.record-card-topline strong { border-color: var(--line); color: var(--home-green); background: #edf2e8; font-weight: 600; }
.record-card-meta dt, .record-card-meta dd { font-size: 11px; }
.open-record-button, .check-answer-button, .chat-composer button, .structure-form button:not(:disabled) { border-color: var(--home-green); color: #fff; background: var(--home-green); font-weight: 600; border-radius: 5px; }
.open-record-button:hover:not(:disabled), .check-answer-button:hover, .chat-composer button:hover:not(:disabled), .structure-form button:hover:not(:disabled) { background: #173f32; }
.open-record-button:disabled, .chat-composer button:disabled { color: var(--text-muted); background: var(--surface-muted); border-color: var(--line); }
.evaluation-section { padding: 24px; border-radius: 7px; background: #fff; box-shadow: none; }
.evaluation-table thead th { color: var(--home-green); background: #edf2e8; font-size: 10px; letter-spacing: .3px; }
.table-check-button { border-color: var(--line-strong); font-weight: 600; }
.evaluation-badge, .evaluation-summary span { font-weight: 600; }
.workspace-grid { width: min(1480px, 100%); padding-top: 30px; gap: 20px; min-height: calc(100vh - 85px); }
body[data-page="analysis"] .home-header .home-container { width: min(1416px, calc(100% - 64px)); }
.case-panel, .detail-panel, .viewer-panel { border-color: var(--line); border-radius: 8px; background: #fff; box-shadow: none; }
.viewer-toolbar { border-bottom-color: var(--line); background: #fff; }
.workspace-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 2px 4px 5px; color: var(--home-muted); font-size: 11px; }
.workspace-breadcrumb a { color: var(--home-green); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.workspace-breadcrumb a:hover { color: #173f32; }
.viewer-context h1 { font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
.viewer-context .eyebrow, .checklist-heading .eyebrow, .case-context .eyebrow { color: var(--home-green); font-size: 9px; letter-spacing: 1px; }
.tool-button, .zoom-control button, .frame-control button, .drawing-control button, .measure-control button, .zoom-mode-control button { border-radius: 4px; font-weight: 600; }
.tool-button.is-active, .zoom-control button.is-active, .frame-control button.is-active, .drawing-control button.is-active, .zoom-mode-control button.is-active { color: var(--home-green); background: #e6eedb; border-color: #a9bc90; }
.viewer-tool-hint { color: var(--text-muted); background: #f0f4eb; font-size: 12px; }
.viewer-panel .echo-stage { border-radius: 5px; }
.measurement-dock, .record-check-panel { border-color: var(--line); border-radius: 6px; background: #f1f4ed; }
.clinical-reference, .structure-quiz { border-color: #cddbbb; border-radius: 6px; background: #f1f4ed; }
.clinical-fact, .clinical-fact.is-primary { border-color: var(--line); border-radius: 4px; background: #fff; }
.evidence-badge, .structure-quiz-heading > span { border-color: var(--line-strong); font-weight: 600; }
.structure-target { background: var(--home-green); box-shadow: 0 0 0 3px #245b4940, 0 3px 12px #0004; }
.chat-messages, .chat-message.is-user, .scope-banner, .paired-view-summary figcaption { background: #f1f4ed; }
.checklist-heading h2, .clinical-reference-heading h3, .structure-quiz-heading h3 { font-weight: 600; }
.characteristic-form label, .structure-form label { font-weight: 600; }
.characteristic-form input, .characteristic-form select, .structure-form select, .chat-composer textarea, .table-select, .table-input { border-radius: 4px; }
.scope-banner { border-color: var(--line); }
.check-item.is-correct { background: #edf2e8; border-color: #d7e0cc; }
.scan-status .playback-status.is-playing { color: #d1e7a6; background: #40563a; }
@media (max-width: 1050px) { .records-page { width: calc(100% - 56px); } }
@media (max-width: 760px) {
  .home-header-inner { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding-top: 14px; }
  .home-header-inner .home-brand { grid-column: 1; grid-row: 1; }
  .home-header-inner .site-header-action { display: contents; }
  .home-header-inner .site-language { grid-column: 2; grid-row: 1; }
  .home-header-inner .site-header-action > a, .home-header-inner .site-header-action > .chat-visibility-toggle { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; }
  .home-header-inner .home-nav { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .home-header-inner .site-header-action { margin-left: auto; }
  .records-page { padding-top: 30px; }
  .records-intro { grid-template-columns: 1fr; gap: 22px; }
  .records-intro h1 { font-size: 29px; }
  .home-main .learning-preview-link { flex-direction: column; align-items: flex-start; gap: 10px; }
  body[data-page="analysis"] .home-header .home-container { width: calc(100% - 40px); }
  .site-header-action .chat-visibility-toggle { font-size: 10px; }
  .workspace-grid { padding-top: 20px; }
}
@media (max-width: 420px) {
  .records-flow { gap: 9px; }
  .records-flow-arrow { display: none; }
  .home-header .home-nav a.nav-records { gap: 5px; min-height: 32px; padding: 6px 8px; }
  .home-header .home-nav .nav-records .home-icon { width: 14px; height: 14px; }
  .records-page { width: calc(100% - 36px); }
  .records-grid { grid-template-columns: 1fr; }
  .evaluation-section { padding: 15px; }
  .site-header-action .home-button-small { max-width: 175px; font-size: 9px; }
  .site-header-action .chat-visibility-toggle { min-height: 38px; padding: 8px 10px; }
  .viewer-context h1 { font-size: 18px; }
  .frame-control { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frame-control button { order: 1; min-width: 0; padding: 6px 4px; }
  .frame-control input[type="range"] { order: 0; min-width: 0; margin: 8px 0; }
  .frame-control #playToggle, .frame-control #freezeToggle { order: 2; grid-column: span 2; }
  .frame-control > .frame-counter { order: 3; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }