/* One bounded shell and one scrolling body for every application dialog. */
:root {
  --modal-viewport-height:100dvh;
  --modal-viewport-top:0px;
  --modal-top-gap:max(8px,env(safe-area-inset-top));
  --modal-bottom-gap:max(8px,env(safe-area-inset-bottom));
  --modal-available-height:calc(var(--modal-viewport-height) - var(--modal-top-gap) - var(--modal-bottom-gap));
}
dialog.modal-layout-surface[open] {
  position:fixed;
  top:calc(var(--modal-viewport-top) + var(--modal-top-gap)) !important;
  bottom:auto !important;
  left:0;
  right:0;
  margin:0 auto !important;
  max-height:var(--modal-available-height) !important;
  overflow:hidden;
}
.cloud-auth-backdrop.modal-layout-surface,
.cloud-subscription-lock.modal-layout-surface {
  top:var(--modal-viewport-top);
  bottom:auto;
  height:var(--modal-viewport-height);
  box-sizing:border-box;
  padding:var(--modal-top-gap) max(8px,env(safe-area-inset-right)) var(--modal-bottom-gap) max(8px,env(safe-area-inset-left));
  overflow:hidden;
  align-items:start;
}
:root [data-modal-shell][data-modal-shell] {
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  height:auto;
  min-height:0;
  max-height:var(--modal-available-height) !important;
  padding:0 !important;
  overflow:hidden !important;
  position:relative;
  top:auto;
  gap:0;
  margin:0 auto;
}
:root [data-modal-shell] > .modal-fixed-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex:0 0 auto;
  position:relative;
  top:auto;
  bottom:auto;
  margin:0;
  padding:12px max(15px,env(safe-area-inset-right)) 12px max(15px,env(safe-area-inset-left));
  gap:12px;
  width:auto;
  background:var(--surface,var(--panel,#071116));
  border-bottom:1px solid var(--line);
  border-radius:inherit;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  z-index:10;
  text-align:left;
}
.modal-fixed-header > :first-child { min-width:0; }
.modal-fixed-header h1,.modal-fixed-header h2 { margin:0; font-size:clamp(18px,3vw,25px); line-height:1.2; overflow-wrap:anywhere; }
:root .modal-fixed-header button[aria-label^="Close"] {
  position:static;
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
}
:root [data-modal-shell] > .modal-scroll-body {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:15px max(15px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left));
  scroll-padding-block:16px;
}
/* Actions remain in the scroll flow, without old negative sticky offsets. */
.modal-scroll-body .lesson-coverage-footer,
.modal-scroll-body .lesson-plan-workspace-actions,
.modal-scroll-body .profile-sticky-actions,
.modal-scroll-body .report-preview-actions,
.modal-scroll-body .finish-action-bar {
  position:static !important;
  margin:15px 0 0;
  max-width:100%;
}
.cloud-auth-experience > .modal-scroll-body { display:grid; grid-template-columns:minmax(280px,450px) minmax(0,900px); gap:24px; }
.cloud-auth-experience > .modal-scroll-body > .cloud-auth-card { position:static; }
@media(max-width:1050px) { .cloud-auth-experience > .modal-scroll-body { grid-template-columns:minmax(0,1fr); gap:12px; } }
@media(max-height:450px) {
  :root [data-modal-shell] > .modal-fixed-header { padding-top:6px; padding-bottom:6px; }
  .modal-fixed-header .eyebrow { margin-top:0; margin-bottom:3px; }
}

/* Status/action text wraps between words; compact controls wrap as whole items. */
:root button,
:root button :is(span,strong,small),
:root :is(.sync-badge,.pill,.legend-chip,.event-badge,.lesson-clock,.cloud-billing-status),
:root .cloud-billing-status :is(span,strong,small) {
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
:root :is(.primary-button,.secondary-button,.danger-button,.text-button) { min-width:min-content; }
:root :is(.sync-badge,.pill,.legend-chip) { flex-shrink:0; white-space:nowrap; }
.card-header { flex-wrap:wrap; }
.card-header > div:first-child { flex:1 1 220px; min-width:0; }
.card-header > :is(button,.sync-badge,.pill) { flex:0 0 auto; max-width:100%; }
.card-header > :is(button,.sync-badge) { white-space:nowrap; }
.button-row,.smart-plan-actions,.profile-head-badges,.cloud-billing-status { flex-wrap:wrap; }
@media(max-width:560px) {
  .pupil-pair-controls { grid-template-columns:minmax(0,1fr); }
  .pairing-result { flex-wrap:wrap; }
  .pupil-inbox-item { grid-template-columns:auto minmax(0,1fr); }
  .pupil-inbox-item > button { grid-column:2; justify-self:start; }
}