/* Current WEDER Flow interface: navy typography, readable sizing and defined controls. */
@media screen {
  :root {
    --ink: #111b31;
    --muted: #52647e;
    --canvas: #ffffff;
    --border: #d1dbe6;
    --green-action: #426f30;
    --sidebar: 260px;
    --topbar: 70px;
    --control-border: #7f92a8;
    font-size: 16px;
  }

  body { color: var(--ink); background: var(--canvas); }
  main { max-width: none; width: calc(100% - var(--sidebar)); }
  h1, h2, h3 { color: var(--ink); }
  h1 { font-size: 34px; }
  h2 { font-size: 22px; }
  small { font-size: 14px; }
  .icon { width: 23px; height: 23px; }
  .topbar { background: linear-gradient(110deg, #f6f8fa, #fbfcfd); }
  .sidebar { background: linear-gradient(110deg, #f5f7f9, #f7f9fb); padding-top: 20px; }
  .sidebar-caption, .nav-section > span {
    font-size: 12px; letter-spacing: .7px; color: #52647e;
  }
  .nav-item { font-size: 16px; gap: 15px; color: #152039; min-height: 46px; }
  .nav-item .icon { width: 24px; height: 24px; }
  .nav-item:hover { color: #111b31; background: #eaf0f5; }
  .nav-item.active {
    color: #111b31; background: linear-gradient(95deg, #e6efdf, #eaf2e3);
    box-shadow: inset 3px 0 #5a8b33;
  }
  .nav-item b { color: #263c21; font-size: 13px; }
  .nav-section { border-color: #dce4ee; }
  .icon-btn { color: #172039; width: 40px; height: 40px; }
  .icon-btn .icon { width: 23px; height: 23px; }
  .icon-btn:hover { background: #e6edf4; color: #111b31; }
  .profile strong { font-size: 14px; color: #172039; }
  .profile small { font-size: 13px; color: #52647e; }
  .sidebar-tip { background: #edf4e6; border-color: #d5e2c8; }
  .sidebar-tip strong { font-size: 14px; color: #263c21; }
  .sidebar-tip p { font-size: 13px; color: #465b3d; }
  .workspace-label { font-size: 14px; color: #52647e; }
  .global-search { background: #ffffff; border-color: var(--control-border); height: 42px; }
  .global-search input { font-size: 15px; color: #172039; }
  .global-search, .global-search kbd, .search-box { color: #52647e; }
  .global-search kbd { border-color: #a6b5c7; }
  .page-heading p { font-size: 17px; color: #52647e; }
  .eyebrow { font-size: 12px; color: #52647e; letter-spacing: 1.1px; }
  .date-label { font-size: 14px; color: #52647e; }
  .date-label .icon { width: 19px; height: 19px; }

  .btn { font-size: 16px; min-height: 44px; gap: 10px; }
  .btn .icon { width: 21px; height: 21px; }
  .btn.primary {
    background: linear-gradient(115deg, #426f30, #31583a);
    border-color: #31583a; box-shadow: inset 0 1px 0 #ffffff20, 0 1px 2px #18301212;
  }
  .btn.primary:hover { background: #284d2b; border-color: #284d2b; }
  .btn.secondary { color: #172039; border-color: var(--control-border); background: linear-gradient(#fff, #f7f9fc); }
  .btn.secondary:hover { background: #edf2f7; border-color: #52647e; }
  .btn.white { color: #263c21; border-color: #acbea2; }
  .text-btn { font-size: 15px; color: #315c24; }
  .text-btn .icon { width: 19px; height: 19px; }
  .danger-text { color: #a0322a; }
  :is(button, a, input, select, textarea, [contenteditable]):focus-visible {
    outline: 3px solid #007baf; outline-offset: 3px;
  }
  .panel, .stat, .course-card, .learning-card, .category-card {
    border-color: #d1dbe6; box-shadow: 0 1px 2px #26355006;
  }
  .panel-heading { border-bottom-color: #dce4ee; }
  .panel-heading h2 { font-size: 21px; color: #111b31; }
  .panel-heading p { font-size: 14px; color: #52647e; }
  .panel-heading .text-btn { font-size: 14px; }
  .due-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
  .due-period-label { margin: 0; font-size: 12px; color: #52647e; }
  .due-period-label select { margin-top: 3px; padding: 7px 10px; min-height: 38px; font-size: 14px; width: auto; max-width: 100%; }
  .count { font-size: 13px; color: #31542b; }
  .subtle, .list-summary { font-size: 14px; color: #52647e; }

  .welcome-banner { border-color: #ccdcbc; }
  .welcome-banner h2 { color: #233d2b; font-size: 36px; }
  .banner-label { font-size: 12px; color: #38552d; }
  .welcome-banner p { font-size: 16px; color: #38513a; }
  .welcome-banner .btn { font-size: 15px; min-height: 42px; }
  .stat { position: relative; padding: 21px 18px; display: block; }
  .stat > div:first-child { width: 100%; }
  .stat span { color: #172039; font-size: 15px; line-height: 1.35; padding-right: 43px; }
  .stat strong { color: #111b31; font-size: 38px; }
  .stat small { color: #52647e; font-size: 13px; }
  .stat-icon { position: absolute; right: 15px; top: 18px; width: 39px; height: 39px; color: #3b6b2d; }
  .stat-icon .icon { width: 24px; height: 24px; }
  .stat-icon.blue { color: #006f9e; }
  .stat-icon.amber { color: #805b20; }
  .stat-icon.violet { color: #71568c; }
  .due-item { padding: 19px 22px; border-bottom-color: #dce4ee; }
  .due-copy strong { font-size: 16px; color: #111b31; }
  .due-copy small, .due-right small { font-size: 13px; color: #52647e; }
  .due-item > .icon { color: #52647e; width: 19px; }
  .course-symbol { width: 46px; height: 47px; }
  .course-symbol .icon { width: 25px; height: 25px; }
  .badge { font-size: 13px; padding: 5px 9px; }
  .badge.success { color: #2d5c21; background: #eaf4e3; }
  .badge.warning { color: #684a12; background: #fff0cb; }
  .badge.danger { color: #8c2c22; background: #fbe5e1; }
  .badge.muted { color: #42516a; background: #edf1f6; }
  .progress-ring strong { color: #111b31; }
  .progress-ring span, .progress-legend > span, .progress-note { color: #52647e; font-size: 13px; }
  .progress-legend { flex-wrap: wrap; gap: 10px 15px; }
  .progress-note { padding-top: 18px; }
  .section-heading h2 { font-size: 24px; }
  .section-heading .eyebrow { font-size: 12px; }
  .course-card h3 { font-size: 23px; color: #111b31; }
  .course-card p, .category-card p { color: #52647e; font-size: 15px; }
  .course-kicker { font-size: 12px; color: #52647e; letter-spacing: .5px; }
  .art-category { color: #263c21; background: #ffffffef; font-size: 11px; }
  .duration { font-size: 12px; color: #172039; background: #fffffff5; }
  .duration .icon { width: 14px; height: 14px; }
  .course-card-bottom { color: #52647e; font-size: 13px; border-color: #dce4ee; }
  .course-card-bottom .text-btn { font-size: 14px; }
  .course-card-bottom .icon { width: 18px; height: 18px; }
  .learning-card h2 { color: #111b31; font-size: 24px; }
  .learning-card > p { font-size: 14px; color: #52647e; }
  .learning-card-meta, .repeat-note { color: #52647e; font-size: 13px; }
  .empty > .icon { color: #52647e; }
  .empty h3 { color: #172039; font-size: 21px; }
  .empty p { color: #52647e; font-size: 15px; }

  table { font-size: 15px; }
  th { font-size: 14px; color: #465672; background: #f0f4f8; border-color: #d1dbe6; }
  td { font-size: 15px; color: #172039; border-color: #dce4ee; }
  td strong { color: #111b31; font-size: 16px; }
  td small { font-size: 14px; color: #52647e; }
  .table-progress small { font-size: 13px; }
  .row-actions .icon-btn { width: 36px; height: 36px; }
  .row-actions .icon { width: 21px; height: 21px; }
  .person .avatar { width: 40px; height: 40px; font-size: 14px; }
  .overdue-text { color: #a0322a; }
  label { color: #172039; font-size: 15px; }
  input, select, textarea { color: #172039; font-size: 16px; font-weight: 400; border-color: var(--control-border); min-height: 44px; }
  input::placeholder, textarea::placeholder { color: #52647e; }
  .search-box { border-color: var(--control-border); height: 44px; }
  .search-box input { font-size: 15px; min-height: 0; }
  .search-box .icon { width: 21px; height: 21px; }
  .filters select { font-size: 15px; height: 44px; }
  .checkbox-label { color: #25334c; font-size: 15px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; }
  .field-help { color: #52647e; font-size: 14px; }
  .selection-heading { font-size: 15px; }
  .employee-option strong { font-size: 15px; color: #172039; }
  .employee-option small { font-size: 13px; color: #52647e; }
  .employee-option { border-color: #dce4ee; }
  .employee-selection { border-color: #a6b5c7; }
  .info-note { font-size: 14px; color: #30472c; background: #eef5e8; border-color: #c7d9b7; }
  .info-note > .icon { width: 21px; height: 21px; }
  .form-error { font-size: 15px; color: #a0322a; }
  dialog { border-color: #a6b5c7; }
  .modal-heading { background: #f5f7fa; }
  .modal-heading h2 { font-size: 24px; }
  .course-facts span { color: #25334c; font-size: 15px; }
  .account-card dt { font-size: 14px; color: #52647e; }
  .account-card dd { color: #172039; font-size: 16px; }
  .package-course-list li { font-size: 15px; }
  .package-course-list small, .package-warning { font-size: 13px; color: #934034; }
  .onboarding-card h2 { font-size: 23px; }

  .lesson-nav-title strong { font-size: 17px; color: #111b31; }
  .lesson-content { container-type: inline-size; container-name: lesson; }
  .lesson-body { min-width: 0; }
  .lesson-body.has-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .lesson-visual { margin: 0; min-width: 0; }
  .lesson-visual .lesson-media { display: block; width: 100%; height: auto; max-height: none; margin: 0; background: transparent; border-radius: 6px; }
  .lesson-visual video.lesson-media { max-height: 70vh; }
  .lesson-body > .rich-content { min-width: 0; max-width: 78ch; }
  .lesson-body > .rich-content > :first-child { margin-top: 0; }
  .lesson-body:not(.has-text) > .rich-content { display: none; }
  .lesson-body.has-media:not(.has-text) .lesson-visual { width: min(100%, 1100px); justify-self: center; }
  .lesson-nav-title small { color: #52647e; font-size: 14px; }
  .lesson-step { font-size: 15px; color: #25334c; }
  .lesson-step.active { color: #172039; }
  .step-number { color: #42516a; font-size: 12px; width: 29px; height: 29px; }
  .step-number.done { color: #fff; background: #426f30; border-color: #426f30; }
  .lesson-caption { color: #52647e; font-size: 13px; }
  .rich-content { color: #172039; font-size: 17px; }
  .rich-content p { color: #25334c; }
  .lesson-footer > span { color: #52647e; font-size: 13px; }
  .question legend { color: #111b31; }
  .question legend > span { color: #426f30; font-size: 14px; }
  .answer-option { color: #172039; border-color: var(--control-border); font-size: 16px; }
  .confirmation { color: #25334c; border-color: #c7d9b7; }
  .editor-languages > span, .language-tab { font-size: 14px; color: #42516a; }
  .language-tab { border-color: #a6b5c7; }
  .language-tab.active { color: #fff; }
  .editor-toolbar { background: #f0f4f8; border-color: #b5c3d3; }
  .editor-toolbar button { font-size: 14px; min-height: 34px; color: #25334c; }
  .wysiwyg { border-color: var(--control-border); }
  #rich-editor { font-size: 17px; }
  .slide-media-editor p { color: #52647e; font-size: 13px; }
  .slide-media-editor strong { color: #172039; font-size: 15px; }
  .editor-save-bar > span { color: #52647e; font-size: 14px; }
  .upload-label, .add-slide { font-size: 14px; }
  .certificate-label, .certificate-footer { color: #426f30; font-size: 13px; }
  .certificate p, .certificate dl { font-size: 15px; }
  .certificate dt { color: #52647e; }
  .app-footer { color: #52647e; font-size: 13px; }

  .auth-form label, .auth-note { font-size: 15px; color: #25334c; }
  .auth-form-inner > p { font-size: 16px; color: #52647e; }
  .password-field { border-color: var(--control-border); }
  .auth-form .password-field input { border: 0; }
  .auth-story-copy > p, .auth-features span { color: #38513a; }
  .auth-features span { font-size: 15px; }
  .auth-footer { color: #38513a; font-size: 12px; }
}

@container lesson (min-width: 800px) {
  .lesson-body.has-media.has-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; }
}

@media screen and (min-width: 761px) and (max-width: 1200px) {
  :root { --sidebar: 238px; }
  .nav-item { font-size: 15px; gap: 12px; }
  .profile strong { font-size: 13px; }
  .profile small { font-size: 12px; }
  .stat span { font-size: 14px; }
  .stat small { font-size: 13px; }
  .stat strong { font-size: 34px; }
  .overview-columns { grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); }
}

@media screen and (max-width: 980px) {
  .overview-columns { grid-template-columns: 1fr; }
  .page-actions .btn { font-size: 15px; }
  .welcome-banner h2 { font-size: 32px; }
  .welcome-banner p { max-width: 255px; }
  .learning-art { right: -45px; opacity: .5; }
  .auth-form { padding: 30px; }
}

@media screen and (max-height: 850px) {
  .sidebar-tip { display: none; }
}

@media screen and (max-width: 760px) {
  :root { --sidebar: 0px; --topbar: 66px; }
  .collapsed { --sidebar: 0px; }
  .topbar { padding: 0 10px; }
  .brand { width: 164px; }
  .brand img { width: 160px; }
  .header-actions { gap: 3px; }
  .icon-btn { width: 36px; height: 40px; }
  .app-shell.mobile-nav-open .sidebar { width: min(280px, calc(100vw - 30px)); }
  .nav-item { font-size: 16px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading p { font-size: 16px; }
  .page-actions .btn { font-size: 15px; }
  .welcome-banner { padding: 25px 20px; }
  .welcome-banner h2 { font-size: 30px; }
  .welcome-banner p { font-size: 15px; max-width: 100%; }
  .welcome-banner .btn { font-size: 15px; }
  .learning-art { opacity: .18; }
  .stat { padding: 17px 12px; }
  .stat span { font-size: 14px; padding-right: 0; }
  .stat strong { font-size: 33px; margin-top: 14px; }
  .stat small { font-size: 13px; }
  .stat-icon { top: 49px; right: 12px; width: 30px; height: 30px; }
  .stat-icon .icon { width: 20px; height: 20px; }
  .panel-heading { flex-wrap: wrap; padding: 17px; }
  .panel-heading h2 { font-size: 20px; }
  .panel-heading p { font-size: 14px; }
  .due-item { flex-wrap: wrap; padding: 17px; gap: 10px; }
  .due-copy { flex: 1 1 140px; }
  .due-copy strong { font-size: 16px; }
  .due-copy small, .due-right small { font-size: 13px; }
  .due-right { margin-left: auto; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .section-heading h2 { font-size: 23px; }
  .section-heading .text-btn { font-size: 14px; }
  .course-card h3 { font-size: 23px; }
  .course-card p { font-size: 15px; }
  .course-card-bottom .text-btn { font-size: 14px; }
  .learning-card > p { font-size: 14px; }
  .lesson-content { padding: 24px 20px; }
  .lesson-caption { flex-wrap: wrap; gap: 10px; }
  .rich-content { font-size: 17px; }
  .lesson-footer { flex-wrap: wrap; }
  .answer-option, .confirmation { font-size: 15px; }
  .question legend { font-size: 19px; }
  .modal-heading h2 { font-size: 23px; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { font-size: 15px; }
  .editor-languages { gap: 6px; }
  .language-tab { padding: 8px 10px; }
  .editor-toolbar { gap: 4px; }
  .editor-toolbar button { padding: 5px 8px; }
  .editor-slide-nav .add-slide { font-size: 13px; }
  .checkbox-label { font-size: 15px; }
  .package-option strong { overflow-wrap: anywhere; }
}

/* Course actions wrap on narrow cards. */
.course-card-bottom { flex-wrap: wrap; }

/* Keep course illustrations intact, including on wide screens. */
.course-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.course-art { height: auto; aspect-ratio: 16 / 10; }
.course-art:has(> img) { display: block; aspect-ratio: auto; }
.course-art > img { display: block; width: 100%; height: auto; min-height: 0; object-fit: contain; }
.category-preview { display: block; width: 100%; height: auto; object-fit: contain; }
.learning-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.learning-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.learning-card-cover > img { display: block; width: 100%; height: auto; }
.learning-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.learning-card-body > p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 14px; color: #52647e; margin-bottom: 25px; }
.learning-card-body > p .icon { width: 16px; height: 16px; }
.learning-card-body > .btn { width: 100%; margin-top: auto; }

/* Dialogs can have more actions than fit into a single row. */
.modal-footer { flex-wrap: wrap; }
.modal-footer .btn { max-width: 100%; white-space: normal; }

.course-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.course-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.course-detail-actions .btn { max-width: 100%; white-space: normal; }
.course-inline-preview > h2 { margin-bottom: 18px; }
@media (max-width: 900px) {
  .course-detail-layout { grid-template-columns: minmax(0, 1fr); }
}