/* Screen appearance only. Assessment and PDF layout keep their existing styles. */
:root { --portal-blue: #194d87; --portal-ink: #203e60; }
body { background: #f4f7fb; color: var(--portal-ink); }
.site-header { border-bottom: 1px solid #dce5ef; box-shadow: 0 3px 18px #173f6a06; }
.header-inner { min-height: 84px; }
.header-title strong { font-size: 15px; }
.app-navigation nav a { min-height: 50px; }
.button, .record-actions button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
.button.primary { box-shadow: 0 3px 7px #194d871a; }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #4588cc; outline-offset: 3px; }
.portal-heading h1 { letter-spacing: -.6px; }
.portal-heading p { max-width: 64ch; line-height: 1.8; }
.portal-card, .stat-card, .form-main, .form-sidebar { box-shadow: 0 4px 20px #183e6805; }
.portal-card-heading h2 { line-height: 1.55; }
.stat-card > small, .record-table td small, .records-summary small { color: #5f7187; }
.stat-card { position: relative; overflow: hidden; border-top: 3px solid #b9cfe6; }
.stat-completed { border-top-color: #3e77b1; }
.stat-draft { border-top-color: #e8ba55; }
.record-tabs button, .record-filters label, .dashboard-filter label { font-size: 12px; }
.record-filters input, .record-filters select { min-height: 44px; }
.record-table { min-width: 880px; }
.record-table thead th { font-size: 12px; }
.record-table td { line-height: 1.65; }
.record-actions button { min-height: 40px; font-size: 12px; }
.record-more > summary { min-height: 40px; }
.record-badge { white-space: nowrap; }
.form-main { min-width: 0; }
.form-heading h1 { line-height: 1.5; }
.form-guidance, .active-record-bar { line-height: 1.7; }
.form-main input:not([type='radio']):not([type='checkbox']), .form-main textarea, .form-main select { font-size: 14px; line-height: 1.6; }
.form-main textarea { min-height: 112px; resize: vertical; }
.form-bottom { gap: 14px; }
.embed-bar { max-width: 1440px; margin: auto; padding: 17px 44px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13px; }
.embed-bar[hidden] { display: none; }
.embed-bar strong { color: #194d87; }
.embed-bar strong span { font-weight: 400; color: #657a93; }
.embed-bar a { color: #194d87; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.embedded .header-inner { display: none; }
.embedded .site-header { position: static; }
.embedded .portal-view { padding-top: 24px; }
@media (max-width: 1020px) {
  .embed-bar { padding-inline: 24px; }
}
@media (max-width: 760px) {
  .header-inner { min-height: 74px; }
  .embed-bar { padding: 14px 18px; flex-wrap: wrap; font-size: 12px; }
  .embed-bar a { font-size: 11px; }
  .record-table { min-width: 0; }
  .portal-heading h1 { font-size: 27px; line-height: 1.35; }
  .portal-heading-actions .button { min-height: 44px; }
  .form-main input:not([type='radio']):not([type='checkbox']), .form-main textarea, .form-main select { font-size: 16px; }
  .form-main textarea { min-height: 120px; }
  .form-bottom { flex-wrap: wrap; }
  .embedded .app-navigation nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .record-actions button { transition: none; }
}
/* The calculated age stays selectable and readable, including on mobile. */
#field-chronological_age[readonly] { background: #f1f5fa; color: #23456c; font-weight: 600; cursor: text; }
.field-hint { display: block; margin-top: 7px; color: #566b83; font-size: 11px; line-height: 1.6; }