/* Shared reading scale. Component text uses rem, including captions and forms.
   Both viewport dimensions matter: an ultrawide, short window stays usable.
   The sign-in composition keeps its own viewport-based sizing. */
:root {
  --text-caption: .8rem;
  --text-small: .9rem;
  --text-body: 1rem;
  --ui-font-size: 112.5%;
}
@media (min-width: 1600px) and (min-height: 850px) { :root { --ui-font-size: 125%; } }
@media (min-width: 2200px) and (min-height: 1100px) { :root { --ui-font-size: 137.5%; } }
@media (min-width: 3000px) and (min-height: 1200px) { :root { --ui-font-size: 150%; } }
@media (min-width: 3600px) and (min-height: 1800px) { :root { --ui-font-size: 175%; } }
html:has(.workspace) { font-size: var(--ui-font-size); }
html.large-text:has(.workspace) { font-size: calc(var(--ui-font-size) * 1.15); }
body { line-height: 1.5; }

/* Give larger text real room instead of stretching or clipping its container. */
:where(.workspace) #main { max-width: 100rem; width: 100%; }
.button, .text-button, .filter-tabs button, .demo-role-switch button { min-height: 2.5rem; }
.button { padding: .65rem 1rem; }
.icon { width: 1.2rem; height: 1.2rem; }
.page-heading, .heading-actions, .page-toolbar { flex-wrap: wrap; }
.page-heading p, .section-heading p, .news-card p, .task-card p,
.task-description p, .answer-box, .feedback-box p, .event-description,
.family-next strong, .family-result strong, .next-step-copy p { font-size: 1rem; line-height: 1.65; }
.task-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.news-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.demo-role-bar { flex-wrap: wrap; }
.demo-role-caption small { line-height: 1.45; }
.demo-role-switch { max-width: 100%; }
.demo-role-switch button { padding: .5rem .75rem; }
.form-stack input, .form-stack select, .form-stack textarea { font-size: 1rem; min-height: 2.6rem; }
dialog { width: 36rem; }
.modal-header, .modal-body, .modal-footer { overflow-wrap: anywhere; }
.fm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.fm-item-name strong { line-height: 1.5; }
.fm-item-name small, .fm-item-access { line-height: 1.5; }
.fm-toolbar, .fm-section-heading { flex-wrap: wrap; }
.family-overview-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); }
.family-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-metrics button { padding: .8rem .6rem; min-height: 6rem; }
.family-metrics span { overflow-wrap: anywhere; }
.family-metrics .icon { display: none; }
.diary-metric, .diary-filter-row, .diary-quick-filters { min-width: 0; }
.diary-quick-filters { flex-wrap: wrap; }
.review-queue-row strong, .family-child-name strong { font-size: 1rem; }
.calendar-panel { min-width: 0; }

/* Conversation text and controls share the same scale as the rest of the school. */
.chat-text, .chat-workspace .chat-compose-input textarea { font-size: 1rem; line-height: 1.6; }
.chat-workspace .thread strong, .chat-workspace .conversation-header strong { font-size: 1rem; }
.chat-workspace .thread small { font-size: .85rem; }
.chat-workspace .thread-list-heading h2 { font-size: 1.15rem; }
.chat-workspace .chat-search input { font-size: .9rem; }
.chat-workspace .chat-filters button { font-size: .8rem; min-height: 2.4rem; }
.chat-workspace .thread { min-height: 4.8rem; gap: .65rem; padding: .8rem .6rem; }
.chat-workspace .thread .avatar, .chat-workspace .conversation-header .avatar { width: 2.5rem; height: 2.5rem; }
.chat-workspace .conversation-header { padding: .65rem 1rem; min-height: 4rem; }
.chat-workspace .conversation-header span:not(.avatar) { font-size: .85rem; }
.chat-workspace .message-history { padding: 1rem 1.25rem; gap: .8rem; }
.chat-message { max-width: min(86%, 46rem); padding: .7rem .9rem; }
.chat-attachments { max-width: 22rem; }
.chat-workspace .chat-compose-input textarea { padding: .55rem .35rem; min-height: 2.8rem; max-height: 8rem; }
.chat-workspace .chat-tool { width: 2.2rem; flex-basis: 2.2rem; height: 2.6rem; min-height: 44px; }
.chat-workspace .chat-send { width: 2.6rem; height: 2.6rem; min-width: 44px; min-height: 44px; flex-shrink: 0; }
.chat-workspace .chat-tool>.icon, .chat-workspace .chat-send>.icon { width: 1.3rem; height: 1.3rem; }
.chat-workspace .chat-draft-line { font-size: .8rem; }
.chat-account { font-size: .8rem; padding: .75rem 1rem; }
.chat-attach-menu, .chat-workspace .chat-emoji-picker { width: min(20rem, calc(100% - 24px)); }
.chat-workspace .chat-emoji-grid button { min-height: 2.5rem; }

@media (min-width: 761px) {
  html:has(.workspace), html:has(.workspace) .sidebar { --sidebar: 15rem; }
  .sidebar { padding: 1.8rem 1rem .9rem; }
  .sidebar .nav-item { min-height: 2.8rem; padding: .7rem .8rem; font-size: 1rem; gap: .7rem; }
  .sidebar .school-year { margin: 1.3rem .5rem; font-size: .8rem; }
  .sidebar .nav-caption { font-size: .75rem; }
  .sidebar .sidebar-bottom { padding-top: 1.25rem; }
  .sidebar .support-button { padding: .6rem .5rem; }
  .sidebar .profile strong { font-size: .9rem; }
  .topbar { padding: 0 1.5rem; height: 4.3rem; min-height: 4.3rem; }
  .topbar-actions { gap: .7rem; }
  .topbar .text-size { display: inline-flex; }
  :where(.workspace) #main { padding: 1.75rem 2rem; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.4rem; }
  .fm-shell { grid-template-columns: 13rem minmax(0, 1fr); }
  #main:has(.chat-workspace) { padding: 1rem 1.35rem; }
  #main>.chat-workspace { grid-template-columns: 18rem minmax(0, 1fr); }
  #main:has(.chat-workspace)>.page-heading h1 { font-size: 1.65rem; }
  .chat-workspace .chat-composer { padding: .6rem .75rem; }
  .chat-workspace .chat-compose-input { gap: .15rem; }
}
@media (min-width: 761px) and (max-width: 1399px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  :where(.workspace) #main { padding: 1.5rem; }
  #main>.chat-workspace { grid-template-columns: 16rem minmax(0, 1fr); }
  .fm-shell { grid-template-columns: 11rem minmax(0, 1fr); }
  .diary-search-row { min-width: 0; flex-basis: 100%; }
  .demo-role-caption small { max-width: 22rem; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  html:has(.workspace), html:has(.workspace) .sidebar { --sidebar: 13.5rem; }
  .topbar .breadcrumb-home { display: none; }
  :where(.workspace) #main { padding: 1rem; }
  .fm-shell { display: block; }
  .fm-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-workspace .thread .avatar { width: 2rem; height: 2rem; }
  #main>.chat-workspace { grid-template-columns: 13rem minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --ui-font-size: 112.5%; }
  .workspace #main { padding: 18px 12px; }
  .workspace .topbar .text-size { display: inline-flex; width: 36px; min-width: 36px; }
  .workspace .topbar .breadcrumb { flex: 1; }
  .workspace .topbar .breadcrumb strong { font-size: .85rem; }
  .workspace .topbar-actions { gap: 0; }
  .workspace .topbar .global-search { min-width: 32px; width: 32px; }
  .workspace .topbar .theme-toggle { padding: 2px; gap: 0; }
  .workspace .topbar .theme-toggle-light, .workspace .topbar .theme-toggle-dark { width: 28px; }
  .workspace .demo-role-switch { min-width: 0; width: 100%; }
  .workspace .demo-role-switch button { font-size: .8rem; gap: 4px; padding: .5rem .3rem; }
  .workspace .demo-role-switch .icon { display: none; }
  .mobile-rail-label { font-size: 9px; }
  .mobile-rail-link { min-height: 52px; }
  .chat-workspace .message-history { padding: .6rem; }
  .chat-message { max-width: 97%; padding: .6rem; }
  .chat-workspace .conversation-header { padding: .5rem; gap: .4rem; }
  .chat-workspace .conversation-header .avatar { width: 2rem; height: 2rem; }
  .chat-workspace .chat-tool { width: 28px; flex-basis: 28px; }
  .chat-workspace .chat-tool>.icon { width: 21px; height: 21px; }
  .chat-workspace .chat-compose-input textarea { padding-left: 3px; padding-right: 3px; }
  .chat-workspace .chat-send { width: 40px; min-width: 40px; flex-basis: 40px; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
  .family-overview-grid, .dashboard-aside { grid-template-columns: minmax(0, 1fr); }
  .family-metrics { gap: 5px; }
  .family-metrics span { font-size: .8rem; }
  .workspace .metric-label { font-size: .8rem; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .workspace .topbar .header-avatar { display: none; }
}