/* Shared clinical reading controls and resilient form layout. */
html[data-clinical-reading="large"] { font-size: 22px; }
.chart-page { overflow-wrap: anywhere; }
.chart-page .chart-appbar { height: auto; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.chart-page .chart-toolbar { flex-wrap: wrap; }
.chart-page .button, .chart-page select, .chart-page summary { min-height: 44px; }
.chart-page .button { white-space: normal; font-size: .94rem; }
.chart-page .chart-section-title { flex-wrap: wrap; }
.chart-page .chart-filters { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.chart-page .chart-filters label { min-width: 0; flex: 1 1 10rem; }
.chart-page .chart-filters select { width: 100%; max-width: 100%; }
.chart-page .chart-rail nav a, .chart-page .chart-rail-bottom a { white-space: normal; }
.chart-page .chart-brand { font-size: clamp(18px, 1.3rem, 24px); white-space: nowrap; }
.chart-page .chart-reading-toggle { width: 100%; text-align: left; color: #fff; border: 1px solid #6586a6; background: #193c60; margin-top: 12px; }
.chart-page .form-note, .chart-page .chart-sheet-source, .chart-page .chart-stamp,
.chart-page .chart-focus-source, .chart-page .chart-trend-date, .chart-page .chart-comparison-caption,
.chart-page .chart-scroll-hint, .chart-page .chart-review-details dt { color: #496078; }
.chart-page .chart-dialog { width: min(900px, calc(100% - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; }
#chart-editor, #chart-review { overflow: auto; overscroll-behavior: contain; scroll-padding-block: 16px; }
#chart-editor-form { max-height: none; }
#chart-editor-form > :not(#chart-editor-body) { flex-shrink: 0; }
#chart-editor-body { overflow: visible; min-height: 0; padding-right: 0; }
#chart-editor-form > #chart-editor-body { flex: 1 1 auto; }
#chart-fields { overflow: visible; padding: 0; }
.chart-editor-person { color: #174b78; font-size: .94rem; font-weight: 600; margin: 0 0 10px; }
.chart-editor-guide { margin: 0 0 14px; font-size: .88rem; }
.chart-editor-guide summary { cursor: pointer; padding: 8px 0; }
.chart-editor-guide p { margin-top: 8px; }
.chart-editor-outline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; color: #294d6a; font-size: .94rem; }
#chart-editor-outline { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 4px; }
#chart-editor-outline select { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.chart-editor-state { font-size: .82rem; color: #496078; margin: 10px 0 0; }
.chart-page .chart-editor-actions { margin-top: 10px; padding-top: 12px; }
.chart-page .chart-dialog .field label { font-size: .94rem; color: #294d6a; }
.chart-page .chart-dialog input, .chart-page .chart-dialog textarea, .chart-page .chart-dialog select { font-size: 1rem; min-width: 0; max-width: 100%; }
.chart-page .chart-dialog input[type="checkbox"] { min-width: 20px; }
.chart-page .chart-field-error { color: #a12c47; font-size: .88rem; }
.chart-page [aria-invalid="true"] { border-color: #a12c47; }
.chart-page .chart-error-list { padding-left: 20px; margin: 8px 0; }
.chart-page .chart-error-link { background: none; border: 0; color: #8d2841; text-decoration: underline; text-align: left; font: inherit; padding: 8px 0; min-height: 44px; cursor: pointer; }
.chart-page .chart-review-details { max-height: none; overflow: visible; }
#chart-review-form { display: flex; flex-direction: column; max-height: none; }
#chart-review-body { overflow: visible; min-height: 0; padding-right: 0; }
#chart-review-form > :not(#chart-review-body) { flex-shrink: 0; }
.chart-page .chart-field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.chart-page .chart-sheet-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); }
.chart-page .chart-table-wrap { max-width: 100%; }
.chart-page .chart-dialog-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; }
.chart-page .chart-dialog-head h2 { flex: 1 1 14rem; min-width: 0; font-size: 1.24rem; line-height: 1.4; overflow-wrap: normal; }
.chart-page .chart-dialog-head .button { flex-shrink: 0; white-space: nowrap; }
.chart-page .practice-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); font-size: .94rem; }
.chart-page .practice-dialog-head .button { flex-shrink: 0; white-space: nowrap; }
.chart-page .practice-toolbar input, .chart-page .practice-toolbar select, .chart-page .practice-finder input { font-size: 1rem; min-height: 44px; }
.chart-page .practice-filter, .chart-page .practice-pager .button { min-height: 44px !important; }
.chart-page .practice-finder-result { flex-wrap: wrap; }
.chart-page .practice-finder-result .practice-avatar { flex-shrink: 0; }
@media (max-width: 600px) {
  .chart-page .chart-appbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .chart-page .chart-dialog { padding: 14px; }
  #chart-editor-form, #chart-review-form { max-height: none; }
  .chart-page .chart-editor-actions { gap: 8px; }
  .chart-page .chart-editor-actions .button { flex: 1 1 auto; }
  .chart-page .chart-editor-actions .primary { flex-basis: 100%; }
  #chart-editor .chart-editor-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  #chart-editor .chart-editor-actions .primary { grid-column: 1 / -1; }
  #chart-editor-outline { position: static; }
  .chart-page .chart-patient-identity { min-width: 0; }
}
@media print {
  .chart-reading-toggle, #chart-unsaved-dialog { display: none !important; }
  html[data-clinical-reading="large"] { font-size: 17px; }
}
/* Keep the reading control compact when the desktop rail is collapsed. */
.chart-page.rail-collapsed .chart-reading-toggle{font-size:0;padding:.55rem;min-height:44px}
.chart-page.rail-collapsed .chart-reading-toggle::before{content:"Aa";font-size:1rem}