/*
 * Canonical UI foundation.
 *
 * Keep this file loaded after legacy and page-specific styles. It owns the
 * cross-site contracts that must stay consistent: page shell rhythm, form
 * control stacking, record/action card wrapping, notification semantics, and
 * shared upload/media-picker layout.
 */

:root {
  --ui-page-max-width: 1260px;
  --ui-admin-page-max-width: var(--ui-page-max-width);
  --ui-readable-page-max-width: 1120px;
  --ui-narrow-page-max-width: var(--ui-page-max-width);
  --ui-page-gutter: clamp(24px, 5vw, 64px);
  --ui-page-top-spacing: var(--ui-section-spacing, 64px);
  --ui-page-bottom-spacing: 88px;
  --ui-page-content-min-height: clamp(420px, 54vh, 720px);
  --ui-mobile-page-gutter: 14px;
  --ui-mobile-page-top-spacing: clamp(42px, 9vw, 64px);
  --ui-card-grid-min: 280px;
  --ui-admin-grid-min: 220px;
  --ui-card-radius: var(--ui-panel-radius, 6px);
  --site-home-mode-accent: #c95d48;
}

body :where(
  .courses-page,
  .announcements-page,
  .history-page,
  .messages-page,
  .practice-page,
  .course-page,
  .node-page,
  .account-page,
  .posts-page,
  .post-detail-page,
  .cms-page,
  .cms-page-shell
):not(.score-question-lab):not(.touch-score-lab):not(.attempt-page) {
  box-sizing: border-box;
  width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-page-max-width));
  max-width: var(--ui-page-max-width);
  margin-inline: auto;
  min-height: var(--ui-page-content-min-height);
  padding: var(--ui-page-top-spacing) 0 var(--ui-page-bottom-spacing) !important;
}

body :where(.cms-page, .post-detail-page) {
  --ui-page-max-width: var(--ui-readable-page-max-width);
}

body :where(.narrow-page):not(.booking-page):not(.score-question-lab):not(.touch-score-lab):not(.attempt-page) {
  box-sizing: border-box;
  width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-narrow-page-max-width)) !important;
  max-width: var(--ui-narrow-page-max-width);
  margin-inline: auto !important;
  min-height: var(--ui-page-content-min-height);
  padding: var(--ui-page-top-spacing) 0 var(--ui-page-bottom-spacing) !important;
}

body :where(.admin-page, .admin-page-shell):not(.score-question-lab):not(.touch-score-lab) {
  box-sizing: border-box;
  width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-admin-page-max-width)) !important;
  max-width: var(--ui-admin-page-max-width);
  margin-inline: auto !important;
  min-height: var(--ui-page-content-min-height);
  padding: var(--ui-page-top-spacing) 0 var(--ui-page-bottom-spacing) !important;
}

body :where(.booking-page) {
  --ui-page-max-width: 1260px;
  width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-page-max-width)) !important;
  margin-inline: auto !important;
  min-height: var(--ui-page-content-min-height);
  padding: var(--ui-page-top-spacing) 0 var(--ui-page-bottom-spacing) !important;
}

body :where(.narrow-page):not(.booking-page) {
  padding-top: var(--ui-page-top-spacing) !important;
  padding-bottom: var(--ui-page-bottom-spacing) !important;
}

body :where(.crumb):not(.score-question-lab *):not(.touch-score-lab *) {
  margin-block: 0 clamp(24px, 3.2vw, 43px);
}

body :where(.posts-page):not(.score-question-lab):not(.touch-score-lab) {
  background: transparent !important;
}

body :where(.posts-shell):not(.score-question-lab *):not(.touch-score-lab *) {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 0 !important;
}

body :where(.posts-crumb):not(.score-question-lab *):not(.touch-score-lab *) {
  margin-block-end: clamp(24px, 3.2vw, 43px) !important;
}

body :where(.site-header.has-header-banner .brand):not(.score-question-lab *):not(.touch-score-lab *) {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(14px, 2.2vw, 28px) !important;
}

body :where(.site-header.has-header-banner .brand img, .site-header.has-header-banner .brand b):not(.score-question-lab *):not(.touch-score-lab *) {
  flex: 0 0 auto !important;
}

body :where(.site-header.has-header-banner .brand .brand-copy):not(.score-question-lab *):not(.touch-score-lab *) {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

body :where(.admin-page-head, .admin-title):not(.score-question-lab *):not(.touch-score-lab *) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: var(--ui-space-5, 20px) !important;
  width: 100%;
}

body :where(.admin-title-actions, .admin-action-row, .admin-page-head .ui-action-row):not(.score-question-lab *):not(.touch-score-lab *) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-end;
  width: auto !important;
}

body :where(.admin-title-actions > *, .admin-action-row > *):not(.score-question-lab *):not(.touch-score-lab *) {
  width: auto !important;
}

body main:not(.attempt-page):not(.score-question-lab):not(.touch-score-lab) :where(
  label:not(.check):not(.check-row):not(.ui-check):not(.visually-hidden-honeypot)
),
body :where(.aural-modal, .language-modal) :where(
  label:not(.check):not(.check-row):not(.ui-check):not(.visually-hidden-honeypot)
) {
  display: grid !important;
  gap: 7px;
  align-content: start;
  min-width: 0;
  margin-top: 0;
  color: var(--ui-text, #173044);
  font-size: var(--type-form-label-size, 11px);
  font-weight: var(--type-form-label-weight, 800);
  line-height: 1.4;
}

body main:not(.attempt-page):not(.score-question-lab):not(.touch-score-lab) :where(
  label:has(> input[type="checkbox"]):not(.booking-choice),
  label:has(> input[type="radio"]):not(.booking-choice),
  .check,
  .check-row,
  .ui-check
) {
  display: flex !important;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--ui-space-2, 8px);
}

body main:not(.attempt-page):not(.score-question-lab):not(.touch-score-lab) label > :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .select-menu,
  .appearance-media-picker,
  .cms-generic-media-picker,
  .post-media-library-picker
),
body :where(.aural-modal, .language-modal) label > :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .select-menu
) {
  width: 100%;
  min-width: 0;
  margin-top: 0 !important;
}

body main:not(.attempt-page):not(.score-question-lab):not(.touch-score-lab) :where(input[type="file"]) {
  min-height: var(--ui-control-height, 40px);
  padding: 8px 10px !important;
  border: 1px dashed var(--ui-border-color, #bfd0da) !important;
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-empty-bg, #f7fbfc) !important;
  color: var(--ui-text, #173044);
}

body main:not(.attempt-page):not(.score-question-lab):not(.touch-score-lab) input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 0 var(--ui-button-padding-x, 12px);
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-surface, #fffdf7);
  color: var(--ui-text, #173044);
  font: inherit;
  font-weight: var(--type-button-weight, 800);
  cursor: pointer;
}

body :where(.form-pair, .pair, .home-block-body .two, .home-block-body .three, .mode-edit .three, .art-note-edit .three, .exercise-studio .two, .exercise-studio .three, .account-address-grid.two, .account-address-grid.three, .booking-grid.two, .booking-grid.three, .booking-admin-grid.two, .booking-admin-grid.three, .booking-admin-grid.four, .booking-admin-grid.five):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-admin-grid-min), 100%), 1fr)) !important;
}

body :where(.course-cards, .course-directory, .booking-directory, .booking-choice-grid):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-card-grid-min), 100%), 1fr)) !important;
  max-width: none !important;
}

body :where(.home-course-card, .directory-course-card, .booking-course-card):not(.score-question-lab *):not(.touch-score-lab *) {
  min-height: 0 !important;
  gap: var(--ui-space-3, 12px);
}

body :where(
  .home-course-card,
  .directory-course-card,
  .booking-course-card,
  .booking-choice,
  .auth-card,
  .post-card,
  .posts-categories a,
  .post-category-chips a,
  .course-node,
  .tree-panel,
  .resource-panel,
  .child-list,
  .home-learning-card,
  .home-block-card,
  .announcement-row,
  .resource-row,
  .history-record,
  .attempt-record,
  .message-row,
  .message-conversation,
  .manager-list,
  .table-card,
  .editor-form,
  .login-required-card
):not(.score-question-lab *):not(.touch-score-lab *) {
  border-radius: var(--ui-card-radius) !important;
}

body :where(.auth-card):not(.score-question-lab *):not(.touch-score-lab *) {
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
}

body :where(.directory-course-card h2, .booking-course-card h2, .home-course-card h3):not(.score-question-lab *):not(.touch-score-lab *) {
  margin-block: var(--ui-space-2, 8px) 0;
  overflow-wrap: anywhere;
}

body :where(.course-node > *, .home-course-card > *, .directory-course-card > *, .booking-course-card > *, .booking-choice > span):not(.score-question-lab *):not(.touch-score-lab *) {
  min-width: 0;
}

body :where(.directory-course-top, .booking-card-meta, .booking-status-row, .booking-confirm-actions):not(.score-question-lab *):not(.touch-score-lab *) {
  flex-wrap: wrap !important;
  min-width: 0;
}

body :where(.course-node):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
}

body :where(.course-node .node-open):not(.score-question-lab *):not(.touch-score-lab *) {
  white-space: normal;
  text-align: right;
}

body :where(.course-node.depth-1, .course-node.depth-2, .course-node.depth-3):not(.score-question-lab *):not(.touch-score-lab *) {
  margin-left: clamp(14px, 3vw, 56px);
}

body :where(.ui-action-grid, .admin-actions):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

body :where(.ui-action-card, .planned-card):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: minmax(24px, auto) minmax(0, 1fr) auto !important;
}

body .admin-page .stats:not(.score-question-lab *):not(.touch-score-lab *) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: var(--ui-space-3, 12px) !important;
  padding: var(--ui-space-3, 12px) !important;
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  border-radius: var(--ui-card-radius) !important;
  background: var(--ui-filter-bg, #f5fafb) !important;
}

body .admin-page .stats article:not(.score-question-lab *):not(.touch-score-lab *),
body .admin-page .stats article:last-child:not(.score-question-lab *):not(.touch-score-lab *) {
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  border-radius: var(--ui-card-radius) !important;
  background: color-mix(in srgb, var(--ui-surface-elevated, #fffdf7) 82%, var(--ui-input-bg, #fff) 18%) !important;
}

body .admin-page .admin-actions:not(.score-question-lab *):not(.touch-score-lab *) {
  gap: var(--ui-space-3, 12px) !important;
  border: 0 !important;
  background: transparent !important;
}

body .admin-page .admin-actions > a:not(.score-question-lab *):not(.touch-score-lab *),
body .admin-page .planned-card:not(.score-question-lab *):not(.touch-score-lab *) {
  grid-column: auto !important;
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  border-radius: var(--ui-card-radius) !important;
  background: var(--ui-surface-elevated, #fffdf7) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-text, #173044) 8%, transparent);
}

body .home-workbench:not(.score-question-lab):not(.touch-score-lab) {
  max-width: var(--ui-admin-page-max-width) !important;
}

body .home-workbench .home-workbench-intro:not(.score-question-lab *):not(.touch-score-lab *) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body .home-workbench .home-workbench-intro > :first-child:not(.score-question-lab *):not(.touch-score-lab *) {
  flex: 1 1 min(420px, 100%) !important;
  min-width: min(420px, 100%) !important;
}

body .home-workbench .home-workbench-intro > :last-child:not(.score-question-lab *):not(.touch-score-lab *) {
  flex: 0 1 min(430px, 100%) !important;
  max-width: 100% !important;
}

body .home-workbench .home-block-head:not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: 30px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
}

body .home-workbench .home-course-options:not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
}

body .home-workbench .promo-create:not(.score-question-lab *):not(.touch-score-lab *) {
  flex-flow: row wrap !important;
  align-items: center !important;
}

body .home-workbench .promo-create input:not(.score-question-lab *):not(.touch-score-lab *) {
  flex: 1 1 min(220px, 100%) !important;
  min-width: min(220px, 100%) !important;
}

body :where(.booking-section-head):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

body :where(.booking-admin-subsection-head, .booking-weekday-head, .booking-admin-course summary, .booking-admin-create summary):not(.score-question-lab *):not(.touch-score-lab *) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: space-between;
}

body :where(.booking-admin-resend-form, .booking-admin-notification-log li > div, .booking-admin-calendar-actions):not(.score-question-lab *):not(.touch-score-lab *) {
  flex-flow: row wrap !important;
  align-items: center !important;
}

body :where(.booking-admin-resend-form select, .booking-admin-resend-form button, .booking-admin-calendar-actions .quiet-button):not(.score-question-lab *):not(.touch-score-lab *) {
  width: auto !important;
}

body :where(.booking-choice):not(.score-question-lab *):not(.touch-score-lab *) {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: start !important;
}

body :where(.booking-choice > input):not(.score-question-lab *):not(.touch-score-lab *) {
  width: auto !important;
  min-width: 0 !important;
  margin: 3px 0 0 !important;
}

body :where(.booking-choice-grid, .booking-lesson-details):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

body :where(.booking-admin-filter-form, .booking-item-row, .booking-tier-row, .booking-member-row):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
}

body :where(.booking-admin-request, .booking-detail-head, .booking-admin-detail-grid, .booking-admin-detail-state):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

body :where(.booking-admin-detail-state > :first-child):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-row: auto !important;
}

body :where(.booking-time-row):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)) !important;
}

body :where(.booking-time-row .quiet-button):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-column: auto !important;
}

body :where(.course-studio .course-layout):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: minmax(min(300px, 100%), .34fr) minmax(min(520px, 100%), 1fr) !important;
}

body :where(.exercise-studio .exercise-shell):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: minmax(min(270px, 100%), 270px) minmax(min(520px, 100%), 1fr) !important;
}

body :where(.exercise-studio .pane-grid):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: minmax(min(280px, 100%), .85fr) minmax(min(420px, 100%), 1.15fr) !important;
}

body :where(.exercise-studio .question-board-title, .exercise-studio .hotspot-picker):not(.score-question-lab *):not(.touch-score-lab *) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-end !important;
}

body :where(.exercise-studio .question-board-actions, .exercise-studio .hotspot-picker button):not(.score-question-lab *):not(.touch-score-lab *) {
  width: auto !important;
}

body :where(.course-studio .course-resource-form):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
}

body :where(.course-studio .course-head, .course-studio .node-bar):not(.score-question-lab *):not(.touch-score-lab *) {
  flex-wrap: wrap;
}

body :where(.course-studio .tree-list .tree-list):not(.score-question-lab *):not(.touch-score-lab *) {
  margin-left: clamp(12px, 3vw, 25px) !important;
}

body :where(.user-row):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: 34px minmax(min(210px, 100%), 1fr) minmax(130px, .5fr) minmax(90px, .35fr) minmax(128px, auto) !important;
}

.appearance-media-picker,
.cms-generic-media-picker,
.cms-editorjs-field-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  align-items: center;
  gap: var(--ui-space-2, 8px);
}

.appearance-media-picker-summary,
.cms-editorjs-media-summary,
.ui-editor-media-summary {
  min-width: min(260px, 100%);
  overflow-wrap: anywhere;
}

.flash-stack {
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
}

.flash,
.aural-notification.flash {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 48px;
  padding: 12px 14px 12px 20px !important;
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  border-left-width: 6px !important;
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-info-bg, #edf6f8) !important;
  color: var(--ui-text, #173044) !important;
  text-align: left !important;
}

.flash-message {
  display: flex;
  align-items: center;
  min-height: 24px;
  text-align: left !important;
}

.flash-countdown {
  margin: 0 0 0 auto !important;
  align-self: center;
}

.flash-close {
  align-self: center;
}

.flash.success,
.aural-notification.flash.success {
  border-color: color-mix(in srgb, var(--ui-success, #287048) 45%, var(--ui-border-color, #bfd0da)) !important;
  border-left-color: var(--ui-success, #287048) !important;
  background: var(--ui-success-bg, #eefaf4) !important;
}

.flash.warning,
.aural-notification.flash.warning {
  border-color: color-mix(in srgb, var(--ui-warning, #c99945) 48%, var(--ui-border-color, #bfd0da)) !important;
  border-left-color: var(--ui-warning, #c99945) !important;
  background: var(--ui-warning-bg, #fff8e9) !important;
}

.flash.error,
.aural-notification.flash.error {
  border-color: color-mix(in srgb, var(--ui-danger, #b35243) 48%, var(--ui-border-color, #bfd0da)) !important;
  border-left-color: var(--ui-danger, #b35243) !important;
  background: var(--ui-danger-bg, #fff1ed) !important;
}

.message-toast,
.aural-notification.message-toast {
  border: 1px solid color-mix(in srgb, var(--ui-accent, #1676a8) 42%, var(--ui-border-color, #bfd0da)) !important;
  border-left: 6px solid var(--ui-accent, #1676a8) !important;
  background: color-mix(in srgb, var(--ui-accent, #1676a8) 9%, var(--ui-surface, #fffdf7)) !important;
}

.message-toast b {
  color: var(--ui-accent-text, #2d5368);
}

body :where(.home-announcements .notices, .announcements-page .notices, .announcement-feed .notices):not(.score-question-lab *):not(.touch-score-lab *) {
  border-top: 0 !important;
}

body :where(.home-announcements .notices article, .announcements-page .notices article, .announcement-feed .notices article):not(.score-question-lab *):not(.touch-score-lab *) {
  border-bottom: 0 !important;
}

body :where(.announcement-row):not(.score-question-lab *):not(.touch-score-lab *) {
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  padding: var(--ui-space-4, 16px) !important;
  background: var(--ui-surface, #fffdf7);
}

body :where(.home-modes):not(.score-question-lab *):not(.touch-score-lab *) {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap: var(--ui-space-4, 16px) !important;
  padding: clamp(34px, 5vw, 64px) var(--ui-page-gutter) !important;
  background: var(--site-page-bg, #eaf3f6) !important;
}

body :where(.home-modes article, .home-modes article + article):not(.score-question-lab *):not(.touch-score-lab *) {
  min-height: 0 !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid var(--ui-border-color, #bfd0da) !important;
  border-radius: var(--ui-card-radius) !important;
  background: var(--ui-surface, #fffdf7) !important;
}

body :where(.home-modes span):not(.score-question-lab *):not(.touch-score-lab *) {
  color: var(--site-home-mode-accent, #c95d48) !important;
  font-size: var(--site-home-mode-number-size, 30px) !important;
  font-weight: 900 !important;
  line-height: 1;
}

body :where(.home-modes h2):not(.score-question-lab *):not(.touch-score-lab *) {
  margin: 10px 0 8px !important;
  color: var(--ui-text, #173044) !important;
  font-size: var(--site-home-mode-title-size, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

body :where(.home-modes p):not(.score-question-lab *):not(.touch-score-lab *) {
  max-width: none !important;
  color: var(--ui-content-text, #506a76) !important;
  font-size: var(--site-home-mode-body-size, 16px) !important;
  line-height: 1.75 !important;
}

@media (max-width: 820px) {
  :root {
    --ui-page-gutter: var(--ui-mobile-page-gutter);
    --ui-page-top-spacing: var(--ui-mobile-page-top-spacing);
    --ui-card-grid-min: 245px;
    --ui-admin-grid-min: 180px;
  }

  body :where(
    .courses-page,
    .announcements-page,
    .history-page,
    .messages-page,
    .practice-page,
    .course-page,
    .node-page,
    .account-page,
    .posts-page,
    .post-detail-page,
    .cms-page,
    .cms-page-shell
  ):not(.score-question-lab):not(.touch-score-lab):not(.attempt-page),
  body :where(.narrow-page):not(.booking-page):not(.score-question-lab):not(.touch-score-lab):not(.attempt-page),
  body :where(.admin-page, .admin-page-shell):not(.score-question-lab):not(.touch-score-lab),
  body :where(.booking-page) {
    width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-admin-page-max-width)) !important;
    padding-top: var(--ui-page-top-spacing) !important;
  }

  body :where(.admin-page-head, .admin-title):not(.score-question-lab *):not(.touch-score-lab *) {
    align-items: flex-end !important;
  }

  body :where(.admin-title-actions, .admin-action-row, .admin-page-head .ui-action-row):not(.score-question-lab *):not(.touch-score-lab *) {
    justify-content: flex-start;
  }

  body :where(.course-studio .course-layout):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  }

  body :where(.exercise-studio .exercise-shell, .exercise-studio .pane-grid):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  }

  body :where(.user-row):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  body :where(.user-row .user-main, .user-row select, .user-row .user-row-active, .user-row > div):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-column: auto !important;
  }

  .flash-stack,
  .message-toast {
    right: var(--ui-page-gutter) !important;
    width: min(420px, calc(100vw - var(--ui-page-gutter) - var(--ui-page-gutter))) !important;
    max-width: calc(100vw - var(--ui-page-gutter) - var(--ui-page-gutter)) !important;
  }
}

@media (max-width: 520px) {
  body :where(.course-node):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  body :where(.course-node .node-open):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  body :where(.ui-action-card, .planned-card):not(.score-question-lab *):not(.touch-score-lab *) {
    grid-template-columns: minmax(24px, auto) minmax(0, 1fr) auto !important;
  }

  body :where(.booking-admin-subsection-head, .booking-weekday-head, .booking-admin-course summary, .booking-admin-create summary):not(.score-question-lab *):not(.touch-score-lab *) {
    align-items: flex-start !important;
  }
}