/* Tutor LMS theme layer (Phase 4, Guide §2.7 / §2.9). Loaded ONLY on Tutor pages (dwp_is_tutor_page()),
   after every Tutor stylesheet on the page (inc/tutor.php declares the enqueued Tutor handles as deps).
   Verified against Tutor LMS + Pro 4.0.9 on 2026-09-26 (classes/Assets.php + assets/css/*.min.css):
   - Legacy CSS (tutor.min.css / tutor-rtl.min.css "tutor", tutor-front.min.css "tutor-frontend"; course list,
     cart, checkout, course single) reads --tutor-color-primary(-hover|-rgb), --tutor-body-color(-rgb),
     --tutor-border-color, --tutor-color-gray, --tutor-color-muted, --tutor-color-success/-danger(-rgb).
     Tutor prints them inline on "tutor-frontend" as :root{…} (brand option unset → #3E64DE / #2B49CA).
   - 4.0 design system (tutor-core / tutor-dashboard / tutor-learning; dashboard, lesson/quiz learning area,
     registration) reads --tutor-brand-100…950 (only defined when a brand colour is set; otherwise the
     var() fallbacks), --tutor-font-family-body / -heading (fallback "Inter"), --tutor-input-radius,
     --tutor-text-*, --tutor-surface-*, --tutor-border-*.
   `:root:root` outranks Tutor's own :root blocks whatever their order. The -rgb values can't be derived
   from var(), so they are the literal RGB of the mapped tokens (update both if tokens.css changes).
   Physical left/right below only UNDO Tutor's own physical values under [dir="rtl"]. */

/* ---------- 1. Colour + font variables ---------- */
:root:root {
  /* Legacy Tutor palette */
  --tutor-color-primary:           var(--dwp-color-primary);        /* #F8B800 */
  --tutor-color-primary-rgb:       248, 184, 0;
  --tutor-color-primary-hover:     var(--dwp-color-primary-hover);  /* #D39C00 */
  --tutor-color-primary-hover-rgb: 211, 156, 0;
  --tutor-body-color:              var(--dwp-text-primary);         /* #2E2A27 */
  --tutor-body-color-rgb:          46, 42, 39;
  --tutor-border-color:            var(--dwp-border-default);
  --tutor-color-gray:              var(--dwp-border-default);
  --tutor-color-muted:             var(--dwp-text-muted);
  --tutor-color-hints:             var(--dwp-text-muted);
  --tutor-color-subdued:           var(--dwp-text-muted);
  --tutor-color-secondary:         var(--dwp-color-secondary);
  --tutor-color-success:           var(--dwp-success);              /* #3B6E52 */
  --tutor-color-success-rgb:       59, 110, 82;
  --tutor-color-danger:            var(--dwp-warning);              /* #A63A2B: errors per Guide §2.7 */
  --tutor-color-danger-rgb:        166, 58, 43;

  /* Tutor 4 design system: brand scale → DWP primary scale */
  --tutor-brand-100: var(--dwp-primary-50);
  --tutor-brand-200: var(--dwp-primary-100);
  --tutor-brand-300: var(--dwp-primary-200);
  --tutor-brand-400: var(--dwp-primary-300);
  --tutor-brand-450: var(--dwp-focus-ring);   /* Tutor uses 450 only for focus rings */
  --tutor-brand-500: var(--dwp-primary-500);  /* charts/visuals only */
  --tutor-brand-600: var(--dwp-color-primary);
  --tutor-brand-700: var(--dwp-color-primary-hover);
  --tutor-brand-800: var(--dwp-color-primary-active);
  --tutor-brand-900: var(--dwp-primary-900);
  --tutor-brand-950: var(--dwp-primary-900);
  --tutor-text-primary:     var(--dwp-text-primary);
  --tutor-text-secondary:   var(--dwp-text-muted);
  --tutor-text-subdued:     var(--dwp-text-muted);
  --tutor-text-brand:       var(--dwp-color-primary-text);  /* orange AS text = 700 (contrast) */
  --tutor-text-brand-hover: var(--dwp-text-link-hover);
  --tutor-text-critical:    var(--dwp-warning);
  --tutor-icon-critical:    var(--dwp-warning);
  --tutor-border-error-secondary: var(--dwp-warning);
  --tutor-surface-base:     var(--dwp-bg-page);
  --tutor-surface-l1:       var(--dwp-bg-card);
  --tutor-border-idle:      var(--dwp-border-default);
  --tutor-input-radius:     var(--dwp-radius-md);

  /* Font: Tutor 4 sets font-family: var(--tutor-font-family-body,"Inter") on ~280 rules */
  --tutor-font-family-body:    var(--dwp-font-sans);
  --tutor-font-family-heading: var(--dwp-font-sans);

  /* Layout: same container width + side gap as the theme (.dwp-container / --dwp-gutter) */
  --tutor-gutter-x: var(--dwp-gutter);
  --tutor-gutter-y: 0;
}

/* Legacy Tutor inherits the body font; form controls don't inherit by default. */
.dwp-tutor-page :is(input, select, textarea, button):not([class*="tutor-icon"]) { font-family: var(--dwp-font-sans); }

/* ---------- 1b. Container width + side gap = theme (.dwp-container / --dwp-page-pad / --dwp-gutter) ---------- */
/* Bootstrap-style .tutor-container* (cart, course list, legacy pages) → same outer box as .dwp-container. */
.dwp-tutor-page :is(
	.tutor-container,
	.tutor-container-sm,
	.tutor-container-md,
	.tutor-container-lg,
	.tutor-container-xl,
	.tutor-container-xxl
) {
	max-width: calc(var(--dwp-container) + 2 * var(--dwp-page-pad));
	padding-inline: var(--dwp-page-pad);
	padding-left: var(--dwp-page-pad);
	padding-right: var(--dwp-page-pad);
}

/* Dashboard / account content column + sticky header: same side gap; width = theme narrow → full container. */
.dwp-tutor-page :is(
	.tutor-dashboard-layout .tutor-dashboard-page,
	.tutor-dashboard-header-inner,
	.tutor-account-container
) {
	max-width: var(--dwp-container-narrow);
	padding-inline: var(--dwp-page-pad);
	margin-inline: auto;
}
@media (min-width: 1280px) {
	.dwp-tutor-page :is(
		.tutor-dashboard-layout .tutor-dashboard-page,
		.tutor-dashboard-header-inner,
		.tutor-account-container
	) {
		max-width: var(--dwp-container);
	}
}

/* Checkout + order surfaces */
.dwp-tutor-page :is(
	.tutor-checkout-page .tutor-checkout-container,
	.tutor-order-summery-wrapper,
	.tutor-cart-page .tutor-container
) {
	max-width: var(--dwp-container);
	margin-inline: auto;
}

/* Learning / quiz summary bands that hard-code ~1220 */
.dwp-tutor-page :is(
	.tutor-quiz-summary-page .tutor-quiz-summary-body,
	.tutor-quiz-review-feedback-wrapper
) {
	max-width: var(--dwp-container);
	padding-inline: var(--dwp-page-pad);
}

/* ---------- 2. Forms (Guide §2.7) — Tutor controls only ---------- */
.dwp-tutor-page :is(.tutor-form-control, .tutor-input, .tutor-form-select, .tutor-billing-fields input, .tutor-billing-fields select, .tutor-billing-fields textarea) {
  min-block-size: 48px;
  padding-block: 10px;
  padding-inline: 14px;
  border: 1.5px solid var(--dwp-border-strong) !important; /* Tutor sets the legacy border with !important */
  border-radius: var(--dwp-radius-md);
  background-color: var(--dwp-bg-card);
  color: var(--dwp-text-primary);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
}
.dwp-tutor-page textarea:is(.tutor-form-control, .tutor-input) { min-block-size: 120px; }
.dwp-tutor-page :is(.tutor-form-control, .tutor-input)::placeholder { color: var(--dwp-text-muted); opacity: 1; }
.dwp-tutor-page :is(.tutor-form-control, .tutor-input, .tutor-form-select):focus,
.dwp-tutor-page .tutor-input-field .tutor-input:focus {
  border-color: var(--dwp-color-primary) !important;
  outline: 3px solid var(--dwp-focus-ring);
  outline-offset: 1px;
  box-shadow: none;
}
/* Labels above the field, start-aligned (placeholder is never the label). */
.dwp-tutor-page :is(.tutor-form-label, .tutor-label, .tutor-checkout-billing label) {
  display: block;
  margin-block-end: var(--dwp-space-2);
  color: var(--dwp-text-heading);
  font-size: var(--dwp-fs-small);
  font-weight: var(--dwp-fw-semibold);
  text-align: start;
}
.dwp-tutor-page :is(.tutor-form-check-input, .tutor-checkbox, .tutor-radio, input[type="checkbox"], input[type="radio"]) { accent-color: var(--dwp-color-primary); }
.dwp-tutor-page label:has(> :is(input[type="checkbox"], input[type="radio"])) { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--dwp-fw-regular); }
/* Errors: colour + icon/text, never colour alone (Tutor alerts already carry an icon). */
/* Only the error TEXT gets the "!" badge: .tutor-input-field-error is also the field WRAPPER class in Tutor 4, so it
   must not match (P4 QA #12: double badge above the label). */
.dwp-tutor-page .tutor-error-text { color: var(--dwp-warning); font-weight: var(--dwp-fw-medium); font-size: var(--dwp-fs-small); }
.dwp-tutor-page .tutor-error-text:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; inline-size: 1.25em; block-size: 1.25em; margin-inline-end: 6px; border-radius: 50%; background: var(--dwp-warning); color: #fff; font-size: .75em; font-weight: 700; }
.dwp-tutor-page :is(.tutor-alert.tutor-danger, .tutor-alert-danger, .tutor-login-error .tutor-alert) { border-radius: var(--dwp-radius-md); }
.dwp-tutor-page .tutor-input-field .tutor-input[aria-invalid="true"] { border-color: var(--dwp-warning) !important; }

/* ---------- 3. Buttons ---------- */
/* .tutor-btn.tutor-btn (0,3,0) beats Tutor 4's button.tutor-btn:not([class*=tutor-btn-link]) (0,2,1, min-height 38px)
   and the icon-button sizes (.tutor-btn-icon.tutor-btn-x-small 32px). Tap targets: 44px, primary/large/block 52px (P4 QA #4). */
.dwp-tutor-page .tutor-btn.tutor-btn { border-radius: var(--dwp-radius-md); font-weight: var(--dwp-fw-semibold); min-block-size: 44px; font-size: var(--dwp-fs-small); justify-content: center; }
.dwp-tutor-page .tutor-btn.tutor-btn:is(.tutor-btn-lg, .tutor-btn-block, .tutor-btn-primary) { min-block-size: 52px; }
.dwp-tutor-page .tutor-btn.tutor-btn.tutor-btn-icon { min-inline-size: 44px; min-block-size: 44px; }
.dwp-tutor-page .tutor-btn-primary { background-color: var(--dwp-color-primary); border-color: var(--dwp-color-primary); color: var(--dwp-text-on-primary); }
.dwp-tutor-page .tutor-btn-primary:is(:hover, :focus-visible) { background-color: var(--dwp-color-primary-hover); border-color: var(--dwp-color-primary-hover); color: var(--dwp-text-on-primary); }
.dwp-tutor-page .tutor-btn-primary:active { background-color: var(--dwp-color-primary-active); }
.dwp-tutor-page .tutor-btn-outline-primary {
	border: 1.5px solid var(--dwp-border-strong);
	background-color: var(--dwp-bg-card);
	color: var(--dwp-text-heading);
}
.dwp-tutor-page .tutor-btn-outline-primary:is(:hover, :focus-visible, :active) {
	background-color: var(--dwp-color-primary-hover);
	border-color: var(--dwp-color-primary-hover);
	color: var(--dwp-text-on-primary); /* white on orange — beats base color that was winning over Tutor's hover */
}

/* ---------- 4. Focus (Guide §2.8): 3px ring, Tutor replaces outlines with a 2px box-shadow ---------- */
.dwp-tutor-page :is(a, button, [role="button"], summary, [tabindex]:not([tabindex="-1"]), .tutor-btn, .tutor-tabs-tab, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid var(--dwp-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------- 5. Links ---------- */
.dwp-tutor-page :is(.tutor-lesson-content, .tutor-course-details-content, .tutor-checkout-page, .tutor-cart-page) a:not(.tutor-btn) { color: var(--dwp-text-link); text-underline-offset: .25em; }
.dwp-tutor-page :is(.tutor-lesson-content, .tutor-course-details-content, .tutor-checkout-page, .tutor-cart-page) a:not(.tutor-btn):hover { color: var(--dwp-text-link-hover); }

/* ---------- 6. Course single (legacy markup) ---------- */
.dwp-tutor-page :is(.tutor-course-details-page, .tutor-single-course) :is(.tutor-card, .tutor-sidebar-card, .tutor-course-sidebar-card) {
  border: 1px solid var(--dwp-border-default);
  border-radius: var(--dwp-radius-lg);
  box-shadow: none;
  overflow: hidden; /* clip children so top corners stay rounded */
}
/* Sidebar entry card: Tutor only rounds .tutor-card-body at 6px (physical top-left/right); match theme radius. */
.dwp-tutor-page .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body {
  border-start-start-radius: var(--dwp-radius-lg);
  border-start-end-radius: var(--dwp-radius-lg);
  border-top-left-radius: var(--dwp-radius-lg);
  border-top-right-radius: var(--dwp-radius-lg);
}
.dwp-tutor-page .tutor-course-details-title { color: var(--dwp-text-heading); line-height: 1.4; }
.dwp-tutor-page .tutor-course-details-content { max-inline-size: 72ch; line-height: var(--dwp-lh-body); }

/* Space under the site header and above the site footer on the course template. */
.dwp-tutor-page .tutor-course-details-page.tutor-container {
	padding-block-start: var(--dwp-space-8);
	padding-block-end: var(--dwp-space-12);
}

/* Featured image / video: Tutor's radius rule targets .tutor-course-details-page-main (unused); template uses .tutor-course-details-page. */
.dwp-tutor-page .tutor-course-details-page :is(.tutor-course-thumbnail, .tutor-video-player, .plyr--video) {
  border-radius: var(--dwp-radius-lg);
  overflow: hidden;
}
.dwp-tutor-page .tutor-course-details-page .tutor-course-thumbnail img {
  display: block;
  inline-size: 100%;
  border-radius: var(--dwp-radius-lg);
}

/* ---------- 7. Lesson / quiz learning area (Guide §2.9) ---------- */
.dwp-tutor-page .tutor-learning-area { background-color: var(--dwp-bg-page); }
.dwp-tutor-page .tutor-lesson-content {
  max-inline-size: 68ch;
  margin-inline: auto;
  font-size: var(--dwp-fs-body);   /* 16 → 18 */
  line-height: var(--dwp-lh-body); /* 1.8 */
  color: var(--dwp-text-primary);
}
.dwp-tutor-page .tutor-learning-sidebar {
  background-color: var(--dwp-bg-card);
  border: 1px solid var(--dwp-border-default);
  border-radius: var(--dwp-radius-lg);
}
.dwp-tutor-page .tutor-learning-nav-item[aria-current], .dwp-tutor-page .tutor-learning-nav-item.is-active { background-color: var(--dwp-color-primary-soft); }

/* ---------- 8. Dashboard: neutral cards, success only for completion ---------- */
.dwp-tutor-page :is(.tutor-stat-card, .tutor-dashboard-welcome-card, .tutor-dashboard-courses-card, .tutor-dashboard-home-task) {
  background-color: var(--dwp-bg-card);
  border: 1px solid var(--dwp-border-default);
  border-radius: var(--dwp-radius-lg);
  box-shadow: none;
}
.dwp-tutor-page .tutor-stat-card-icon { color: var(--dwp-text-muted); }
.dwp-tutor-page :is(.tutor-stat-card-completed, .tutor-stat-card-passed) .tutor-stat-card-icon { color: var(--dwp-success); }

/* ---------- 9. Cart / checkout (Tutor native, monetize_by=tutor) ---------- */
.dwp-tutor-page :is(.tutor-checkout-details, .tutor-checkout-billing-inner, .tutor-checkout-summary, .tutor-cart-page-wrapper .tutor-card, .tutor-checkout-payment-item) {
  border: 1px solid var(--dwp-border-default);
  border-radius: var(--dwp-radius-lg);
  background-color: var(--dwp-bg-card);
}
.dwp-tutor-page :is(.tutor-checkout-grand-total, .tutor-checkout-summary-item) { font-variant-numeric: tabular-nums; }
.dwp-tutor-page :is(.tutor-checkout-grand-total, .tutor-checkout-discount-price, .tutor-checkout-tax-amount) { unicode-bidi: isolate; }
.dwp-tutor-page .tutor-checkout-payment-item:has(input:checked) { border-color: var(--dwp-color-primary); background-color: var(--dwp-bg-tint); }
.dwp-tutor-page .tutor-login-wrap, .dwp-tutor-page .tutor-login-form-wrapper { border-radius: var(--dwp-radius-lg); }
/* Login and reset-password cards use inline width:100% / max-width:520px, so on a phone they sit flush. */
@media (max-width: 639px) {
	.dwp-tutor-page :is(.tutor-login-wrap, .tutor-card:has(.lost_reset_password)) {
		box-sizing: border-box;
		inline-size: calc(100% - (2 * var(--dwp-gutter))) !important;
		width: calc(100% - (2 * var(--dwp-gutter))) !important;
		max-inline-size: 520px;
		max-width: 520px !important;
		margin-inline: auto !important;
	}
}

/* ---------- 10. RTL fixes (Tutor 4 core/dashboard/learning ship no -rtl file) ---------- */
[dir="rtl"] .dwp-tutor-page .tutor-input-field :is(.tutor-switch, .tutor-switch-md)::after { left: auto; right: 2px; }
[dir="rtl"] .dwp-tutor-page .tutor-input-field .tutor-switch:checked::after { transform: translate(-16px); }
[dir="rtl"] .dwp-tutor-page .tutor-input-field .tutor-switch-md:checked::after { transform: translate(-20px); }
[dir="rtl"] .dwp-tutor-page .tutor-input-field .tutor-label-required::after { margin-left: 0; margin-inline-start: 2px; }
[dir="rtl"] .dwp-tutor-page :is(.tutor-popover-header, .tutor-popover-body, .tutor-popover-footer) { padding-left: 0; padding-inline-start: 6px; }
[dir="rtl"] .dwp-tutor-page .tutor-stat-card-hover-card { left: auto; right: 100%; }
[dir="rtl"] .dwp-tutor-page .tutor-learning-sidebar .tutor-learning-sidebar-pages .tutor-sidebar-restore-dropdown button::after { right: auto; left: -8px; }
/* Login password field: Tutor pins the show/hide eye with inline styles (span right:15px, input padding-right:45px),
   so in RTL it sits at the START of the field. Move both to the inline end (left in RTL); !important beats inline style. */
[dir="rtl"] .dwp-tutor-page .tutor-input-field[x-data] > span[style*="right: 15px"] { right: auto !important; left: 15px !important; }
[dir="rtl"] .dwp-tutor-page .tutor-input-field[x-data] > input[style*="padding-right"] { padding-right: 14px !important; padding-left: 45px !important; }
/* Mixed-direction values stay readable in RTL (emails, URLs, prices). */
.dwp-tutor-page :is(input[type="email"], input[type="url"], input[type="tel"]) { direction: ltr; text-align: end; }

/* ==========================================================================
   P4 fix round 1 (Ziad's QA of deploy-20260926-0256, qa/tutor/NOTES.md). Item numbers = NOTES cross-page findings.
   ========================================================================== */

/* ---------- 11. Remaining Tutor 4 variables → DWP tokens ---------- */
:root:root {
  /* Completion / success: Tutor green #24983F / #1C7731 / #24A148 → --dwp-success #3B6E52 (white on it 5.94) (#5) */
  --tutor-actions-success-primary:   var(--dwp-success);
  --tutor-actions-success-secondary: var(--dwp-success-soft);
  --tutor-actions-success-tertiary:  var(--dwp-success-soft);
  --tutor-actions-success-exception: var(--dwp-success);
  --tutor-button-success:            var(--dwp-success);
  --tutor-button-success-hover:      var(--dwp-success);
  --tutor-button-success-focused:    var(--dwp-success);
  --tutor-icon-success-primary:      var(--dwp-success);
  --tutor-icon-success-secondary:    var(--dwp-success);
  --tutor-text-success:              var(--dwp-success);
  --tutor-border-success:            var(--dwp-success);
  --tutor-border-success-secondary:  var(--dwp-success);
  --tutor-surface-success:           var(--dwp-success-soft);
  --tutor-visual-success-1:          var(--dwp-success);
  --tutor-visual-success-2:          var(--dwp-success);

  /* Cool greys → warm DWP neutrals (#6) */
  --tutor-surface-l1-hover:     var(--dwp-neutral-100);  /* #F5F5F6 → #F5EFE7 */
  --tutor-surface-l2:           var(--dwp-neutral-200);  /* #ECECED → #EEE6DC */
  --tutor-surface-l2-hover:     var(--dwp-neutral-300);  /* #CECFD2 → #E4DBD0 */
  --tutor-surface-l3:           var(--dwp-neutral-100);  /* #F5F5F6 → #F5EFE7 (inputs: white, below) */
  --tutor-surface-sidebar-l1:   var(--dwp-bg-card);      /* #FCFCFC → #FFFFFF */
  --tutor-actions-gray-empty:   var(--dwp-neutral-100);
  --tutor-actions-gray-secondary: var(--dwp-neutral-100);
  --tutor-actions-gray-tertiary:  var(--dwp-neutral-200);
  --tutor-actions-gray-quaternary: var(--dwp-border-default); /* progress track #E0E0E1 → #E4DBD0 */
  --tutor-button-secondary:         var(--dwp-neutral-200);
  --tutor-button-secondary-focused: var(--dwp-neutral-200);
  --tutor-button-secondary-hover:   var(--dwp-neutral-300);
  --tutor-button-disabled:      var(--dwp-neutral-100);
  --tutor-border-idle2:         var(--dwp-border-default);
  --tutor-border-hover:         var(--dwp-neutral-400);
  --tutor-tab-l3-active-hover:  var(--dwp-neutral-100);  /* hovers #F0F1F1 → #F5EFE7 */
  --tutor-icon-idle:            var(--dwp-text-primary); /* #333741 → #2E2A27 */
  --tutor-icon-secondary:       var(--dwp-text-muted);   /* #73767D → #6B645E */
  --tutor-visual-gray-2:        var(--dwp-neutral-200);
  --tutor-visual-gray-3:        var(--dwp-neutral-300);
  --tutor-button-primary-soft-hover: var(--dwp-primary-200);
}

/* Completed check icon (Tutor icon completed-colorize, inline SVG with hard-coded fill #0BB01B / stroke #007E0C). */
.dwp-tutor-page svg circle[fill="#0BB01B" i] { fill: var(--dwp-success); }
.dwp-tutor-page svg path[stroke="#007E0C" i] { stroke: var(--dwp-success); }

/* ---------- 12. HIGH 2 + #13: exact-breakpoint gaps (Tutor uses max-width:N and min-width:N for the same N) ---------- */
/* 768: Tutor hides the sidebar (max-width:768px) AND the bottom nav (min-width:768px) → show the bottom nav. */
@media (width: 768px) { .tutor-dashboard-nav-mobile { display: block; } }
/* 992: the curriculum is already a drawer (max-width:992px) but the toggle is hidden (min-width:992px) → show the toggle. */
@media (width: 992px) { .tutor-learning-header-toggle-mobile { display: flex; } }

/* ---------- 13. HIGH 3: closed curriculum drawer out of the Tab order (≤992px) ---------- */
/* visibility:hidden removes every link/button inside from the Tab order and the a11y tree. On close, visibility flips
   only after the .3s slide (delayed transition); on open it flips immediately so Alpine's x-trap can focus inside. */
@media (max-width: 992px) {
  .dwp-tutor-page .tutor-learning-sidebar { transition: transform .3s ease-in-out, visibility 0s linear .3s; }
  .dwp-tutor-page .tutor-learning-sidebar:not(.is-open) { visibility: hidden; }
  .dwp-tutor-page .tutor-learning-sidebar.is-open { visibility: visible; transition-delay: 0s; }
}

/* ---------- 14. HIGH 4 / 5: text contrast (legacy hard-coded colours, dashboard stat values) ---------- */
/* #757C8E (4.17 white / 3.94 cream / 3.86 on #F4F6F9) → --dwp-text-muted #6B645E (5.82 / 5.49); #24A148 (3.35) → --dwp-success #3B6E52 (5.94 / 5.60) */
.dwp-tutor-page :is(.tutor-color-muted, .tutor-color-hints, .tutor-course-content-list-item-duration, .tutor-enrolled-info-text) { color: var(--dwp-text-muted); }
.dwp-tutor-page .tutor-course-details-actions :is(.tutor-btn-ghost, .tutor-btn-ghost:is(a, button)) { color: var(--dwp-text-muted); }
.dwp-tutor-page .tutor-color-success { color: var(--dwp-success); }
.dwp-tutor-page .tutor-color-secondary { color: var(--dwp-color-secondary); }
.dwp-tutor-page .tutor-avatar-text { color: #fff; }                        /* #F2D9CE on #F8B800 3.92 → white 5.28 */
/* Stat values: #00ACC2 (2.73) / #FDB022 (1.84) → --dwp-text-heading #1E1B18 (17.14); icons neutral. */
.dwp-tutor-page .tutor-stat-card .tutor-stat-card-value { color: var(--dwp-text-heading); }
.dwp-tutor-page .tutor-stat-card :is(.tutor-stat-card-icon, svg) { color: var(--dwp-color-secondary); }

/* ---------- 15. HIGH 6: control boundaries ≥3:1 (--dwp-border-strong #8F8780 = 3.53 on white) ---------- */
.dwp-tutor-page .tutor-input-field :is(.tutor-checkbox, .tutor-checkbox-md, .tutor-radio, .tutor-radio-md):not(:checked):not(:disabled),
.dwp-tutor-page :is(.tutor-form-check-input, input[type="checkbox"]:not([class*="tutor-switch"]), input[type="radio"]):not(:checked):not(:disabled) { border-color: var(--dwp-border-strong); }
.dwp-tutor-page .tutor-input-field .tutor-switch:not(:checked):not(:disabled) { background-color: var(--dwp-border-strong); } /* track #CECFD2 1.56 → 3.53 */
.dwp-tutor-page .tutor-switch input:not(:checked) + .slider { background-color: var(--dwp-border-strong); }          /* legacy switch */
.dwp-tutor-page .tutor-switch input:checked + .slider { background-color: var(--dwp-color-primary); }

/* ---------- 16. Tap targets (#4): 44px (primary 52px, section 3) ---------- */
.dwp-tutor-page :is(.tutor-tabs-tab, .tutor-learning-nav-header, .tutor-pagination-item, .tutor-pagination .page-numbers) { min-block-size: 44px; }
.dwp-tutor-page :is(.tutor-pagination-item, .tutor-pagination .page-numbers) { min-inline-size: 44px; justify-content: center; }
.dwp-tutor-page .tutor-dashboard-header-user-avatar { min-inline-size: 44px; min-block-size: 44px; }
.dwp-tutor-page .tutor-dashboard-nav-mobile-list > li { flex: 1 1 0; }
.dwp-tutor-page .tutor-dashboard-nav-mobile-list > li > :is(a, button) { inline-size: 100%; min-inline-size: 44px; min-block-size: 44px; }
.dwp-tutor-page .tutor-course-content-list-item-title a { display: block; padding-block: 10px; }

/* Curriculum rows: play vs quiz glyphs differ in width; Tutor also uses physical margins
   (tutor-mr-12 / tutor-mt-4) which mis-align the icon column under dir=rtl. Fixed square + gap. */
.dwp-tutor-page .tutor-course-content-list-item {
	align-items: center;
}
.dwp-tutor-page .tutor-course-content-list-item > .tutor-d-flex:first-child {
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
	flex: 1 1 auto;
}
.dwp-tutor-page .tutor-course-content-list-item-icon {
	flex: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0 !important; /* kill tutor-mr-12 / tutor-mt-4 */
	font-size: 1.125rem;
	line-height: 1;
}
.dwp-tutor-page .tutor-course-content-list-item-icon::before {
	margin: 0;
	line-height: 1;
}
.dwp-tutor-page .tutor-course-content-list-item-title {
	flex: 1 1 auto;
	min-inline-size: 0;
	text-align: start;
}
.dwp-tutor-page .tutor-course-content-list-item-status.tutor-ml-20 {
	margin-left: 0;
	margin-inline-start: 20px;
}
/* Lesson footer: Tutor's ≤576px rule .tutor-learning-area-footer[data-lesson] button.tutor-btn (0,3,1) pins 38px. */
.dwp-tutor-page .tutor-learning-area-footer .tutor-btn.tutor-btn { min-block-size: 44px; }
/* doubled class (0,4,0) beats Tutor's .tutor-lesson-content button.tutor-mark-as-complete-button:not([class*=tutor-btn-link]) (0,3,1). */
.dwp-tutor-page .tutor-lesson-content .tutor-mark-as-complete-button.tutor-mark-as-complete-button {
  block-size: auto;
  min-block-size: 44px;
  border-radius: var(--dwp-radius-md);                               /* pill 1000px → 12 */
  font-size: var(--dwp-fs-small);
}
.dwp-tutor-page .tutor-lesson-content .tutor-mark-as-complete-button.completed { color: #fff; } /* white on --dwp-success 5.94 */
/* Course archive sort: keep the native <select> (keyboard + screen reader) instead of Tutor's div.tutor-js-form-select
   (tabindex -1, no role). !important beats the inline display:none Tutor's JS puts on the select. */
.dwp-tutor-page .tutor-course-filter select.tutor-form-select { display: block !important; min-inline-size: 240px; }
.dwp-tutor-page .tutor-course-filter .tutor-js-form-select { display: none !important; }

/* ---------- 17. Dropdowns (#7): Tutor 4 custom select trigger ---------- */
.dwp-tutor-page .tutor-select .tutor-select-trigger {
  min-block-size: 44px;
  border: 1.5px solid var(--dwp-border-strong);                       /* #E4DBD0 1.37 → #8F8780 3.53 */
  border-radius: var(--dwp-radius-md);
  background-color: var(--dwp-bg-card);
  color: var(--dwp-text-primary);                                    /* was #000 / 12px */
  font-size: 1rem;
  direction: rtl;
  text-align: right;
}
.dwp-tutor-page .tutor-select .tutor-select-value {
  flex: 1 1 auto;
  min-inline-size: 0;
  justify-content: flex-start;
  direction: rtl;
  text-align: right;
}
.dwp-tutor-page .tutor-select .tutor-select-value-text,
.dwp-tutor-page .tutor-select-option,
.dwp-tutor-page .tutor-select-option-label,
.dwp-tutor-page .tutor-select-search-input {
  direction: rtl;
  text-align: right;
  inline-size: 100%;
}

/* ---------- 18. Surfaces (#6): inputs white, active lesson item primary-soft, legacy course-page greys ---------- */
/* Tutor: .tutor-input-field .tutor-input:placeholder-shown:not(:focus) (0,4,0) = --tutor-surface-l3 → white card (0,5,0). */
.dwp-tutor-page .tutor-input-field .tutor-input.tutor-input:not(:focus) { background-color: var(--dwp-bg-card); }
.dwp-tutor-page .tutor-learning-sidebar .tutor-learning-nav .tutor-learning-nav-item.active { background-color: var(--dwp-color-primary-soft); }
.dwp-tutor-page .tutor-learning-sidebar .tutor-learning-nav .tutor-learning-nav-item.active::before { background-color: var(--dwp-color-primary); }
.dwp-tutor-page :is(.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body, .tutor-single-course-sidebar .tutor-course-single-info-card, .tutor-single-course-sidebar-more > div) { background-color: var(--dwp-bg-card); }
.dwp-tutor-page :is(.tutor-accordion-item-header, .tutor-accordion-item-header.is-active, .tutor-course-content-list-item:hover, .tutor-card-list-item:nth-child(2n)) { background-color: var(--dwp-neutral-100); }
.dwp-tutor-page .tutor-progress-bar { background-color: var(--dwp-border-default); }  /* legacy track #E3E5EB */
.dwp-tutor-page .tutor-lesson-content .tutor-mark-as-complete-button:hover:not(.completed):not(:disabled) { background-color: var(--dwp-primary-200); } /* was white (weaker) */
.dwp-tutor-page .tutor-btn-secondary:not(.tutor-btn-icon) { background-color: var(--dwp-bg-card); border: 1.5px solid var(--dwp-border-strong); color: var(--dwp-text-heading); }

/* ---------- 19. Default cover photo (blue gradient) → neutral brand background ---------- */
.dwp-tutor-page [style*="assets/images/cover-photo.webp"] { background-image: none !important; background-color: var(--dwp-color-primary-soft) !important; }
.dwp-tutor-page img[src*="tutor/assets/images/cover-photo.webp"] { visibility: hidden; }
.dwp-tutor-page :has(> img[src*="tutor/assets/images/cover-photo.webp"]) { background-color: var(--dwp-color-primary-soft); }

/* ---------- 20. Preview flag (theme, open-build) clears the dashboard bottom nav (≤768px) ---------- */
@media (max-width: 768px) {
  .tutor-screen-frontend-dashboard .dwp-preview-flag { inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 21. Lesson body (Guide §2.9): 17→18px, line-height 1.8, body text colour (was 16px/1.375 muted) ---------- */
.dwp-tutor-page .tutor-lesson-content .tutor-lesson-wrapper,
.dwp-tutor-page .tutor-lesson-content .tutor-lesson-wrapper :is(p, li) {
  font-size: clamp(1.0625rem, 1.0154rem + 0.2vw, 1.125rem);
  line-height: var(--dwp-lh-body);
  color: var(--dwp-text-primary);
}

/* ---------- 22. Dead ends + image sizes (cart, registration disabled, empty state) ---------- */
.dwp-tutor-page .tutor-cart-empty-state img { inline-size: min(100%, 280px); block-size: auto; aspect-ratio: 560 / 282; }
.dwp-tutor-page .tutor-disabled-wrapper img { inline-size: 150px; block-size: auto; aspect-ratio: 3 / 2; }
.dwp-tutor-page .tutor-disabled-wrapper { padding-inline: var(--dwp-space-4, 16px); }
.dwp-tutor-page .tutor-disabled-wrapper h3 { color: var(--dwp-text-heading); font-size: var(--dwp-fs-lead); font-weight: var(--dwp-fw-semibold); }
.dwp-tutor-page .tutor-disabled-wrapper p { color: var(--dwp-text-muted); font-size: var(--dwp-fs-body); line-height: var(--dwp-lh-body); }
.dwp-tutor-page .tutor-disabled-wrapper .tutor-btn.tutor-btn { min-block-size: 52px; padding-inline: 24px; background-color: var(--dwp-color-primary); border: 0; color: var(--dwp-text-on-primary); font-size: var(--dwp-fs-button); }
.dwp-tutor-page .tutor-disabled-wrapper .tutor-btn.tutor-btn:is(:hover, :focus-visible) { background-color: var(--dwp-color-primary-hover); color: var(--dwp-text-on-primary); }
/* emptystate.svg: theme copy with the Tutor-blue flag (#3E64DE) swapped for --dwp-primary-500 #F8B800 (illustration token). */
.dwp-tutor-page .tutor-empty-state img[src$="tutor/assets/images/emptystate.svg"] { content: url("../images/tutor/emptystate.svg"); }

/* ---------- 23. Social URL fields: LTR (placeholder/URLs no longer reordered in RTL) ---------- */
.dwp-tutor-page input[name^="_tutor_profile_"] { direction: ltr; text-align: end; }

/* ---------- 24. RTL gaps (O7: site stays en_US with forced lang="ar" dir="rtl"; no language pack) ---------- */
/* English Tutor strings inside the RTL page get their direction from their own first strong character, so
   "2 of 196 lessons" / "No Notes Found!" are no longer reordered ("of 196 lessons 2", "!No Notes Found") (NOTES #15). */
.dwp-tutor-page :is(.tutor-progress-card-details, .tutor-flex-center-col > .tutor-text-subdued, .tutor-empty-state > div) { unicode-bidi: plaintext; }

/* ---------- 25. Spotlight learning view ≤576px: preview flag clears Tutor's fixed prev/next bar and the Take Note button ---------- */
@media (max-width: 576px) {
  .dwp-tutor-page:has(.tutor-learning-area-footer) .dwp-preview-flag { inset-block-end: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 26. Lesson resource links (a.dwp-html-tool → uploads/dwp-html/*.html, new tab) ---------- */
/* AttachmentCard-like cards; icon = soft app squircle. Grid (.dwp-html-tool-grid via the_content) puts 2+ side by side.
   (0,3,1) beats the §5 content-link rule. */
.dwp-tutor-page .dwp-html-tool-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-block: var(--dwp-space-6);
}
.dwp-tutor-page .dwp-html-tool-grid > p {
	margin: 0;
	min-inline-size: 0;
}
@media (min-width: 640px) {
	.dwp-tutor-page .dwp-html-tool-grid:has(> :nth-child(2)) {
		grid-template-columns: 1fr 1fr;
	}
}
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	box-sizing: border-box;
	margin-block: 0;
	padding-block: 10px;
	padding-inline: 12px;
	border: 1px solid var(--dwp-border-default);
	border-radius: var(--dwp-radius-md);
	background-color: var(--dwp-bg-card);
	color: var(--dwp-text-primary);
	font-size: var(--dwp-fs-small);
	font-weight: var(--dwp-fw-medium, 500);
	line-height: 1.375;
	text-align: start;
	text-decoration: none;
	vertical-align: middle;
	box-shadow: none;
	transition:
		background-color 0.25s ease-in-out,
		border-color 0.25s ease-in-out,
		color 0.25s ease-in-out;
}
/* App-icon tile: squircle, soft peach wash, brand glyph (not a document file). */
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool::before {
	content: "";
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 12px;
	background-color: var(--dwp-primary-50);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4.5' stroke='%23BF410B' stroke-width='1.6'/%3E%3Cpath d='M8 9.5h8M8 12.5h5.5' stroke='%23BF410B' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='16.2' cy='15.8' r='1.35' fill='%23BF410B'/%3E%3C/svg%3E"),
		linear-gradient(160deg, var(--dwp-primary-50) 0%, var(--dwp-neutral-100) 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: 22px 22px, cover;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--dwp-color-primary) 12%, transparent),
		0 1px 2px color-mix(in srgb, var(--dwp-neutral-900) 6%, transparent);
	-webkit-mask: none;
	mask: none;
}
/* Trailing open affordance (hidden until hover/focus). */
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool::after {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	margin-inline-start: auto;
	opacity: 0;
	background-color: var(--dwp-text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity 0.25s ease-in-out;
}
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:hover,
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:focus-visible {
	background-color: var(--dwp-neutral-100);
	border-color: var(--dwp-border-default);
	color: var(--dwp-text-primary);
	text-decoration: none;
}
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:hover::after,
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:focus-visible::after {
	opacity: 1;
}
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:active {
	background-color: var(--dwp-neutral-200);
	color: var(--dwp-text-primary);
}
.dwp-tutor-page a.dwp-html-tool.dwp-html-tool:focus-visible {
	outline: 3px solid var(--dwp-focus-ring) !important;
	outline-offset: 2px !important;
}
/* Fallback when grid wrap is absent: keep spacing tidy for lone / consecutive tool paragraphs. */
.dwp-tutor-page p:has(> a.dwp-html-tool:only-child) { margin-block: 0; }
.dwp-tutor-page p:has(> a.dwp-html-tool:only-child) > a.dwp-html-tool.dwp-html-tool { margin-block: 0; }
.dwp-tutor-page :not(.dwp-html-tool-grid) > :not(p:has(> a.dwp-html-tool:only-child)) + p:has(> a.dwp-html-tool:only-child) {
	margin-block-start: var(--dwp-space-6);
}
.dwp-tutor-page :not(.dwp-html-tool-grid) > p:has(> a.dwp-html-tool:only-child):not(:last-child):not(:has(+ p > a.dwp-html-tool:only-child)) {
	margin-block-end: var(--dwp-space-6);
}

/* ---------- 27. Links: UI links no underline (beats Tutor's hover-underline utilities); prose links underlined ---------- */
/* Prose = lesson Overview content (.tutor-lesson-wrapper) and the course description. Buttons/card links excluded. */
.dwp-tutor-page a:is(:link, :visited, :hover, :focus, :active),
.dwp-tutor-page .tutor-text-hover-underline:hover,
.dwp-tutor-page .tutor-text-decoration-underline { text-decoration-line: none; }
.dwp-tutor-page :is(.tutor-lesson-wrapper, .tutor-course-details-content) a:not(.dwp-html-tool, .tutor-btn, .dwp-btn, [role="button"]) {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--dwp-color-primary); text-underline-offset: 3px;
}
.dwp-tutor-page :is(.tutor-lesson-wrapper, .tutor-course-details-content) a:not(.dwp-html-tool, .tutor-btn, .dwp-btn, [role="button"]):hover {
  text-decoration-thickness: 2px; text-decoration-color: var(--dwp-color-primary-hover);
}

/* ---------- 28. Dashboard with the site header/footer: Tutor's layout grid is min 100vh and stretches the sticky
   mobile nav row (252px white block at 768 on short pages). Keep the nav its own height, at the bottom of the grid. ---------- */
.dwp-tutor-page .tutor-dashboard-layout.tutor-has-site-shell > .tutor-dashboard-nav-mobile { align-self: end; }

/* ---------- 29. Fix round 2 (Ziad's re-check of deploy-20260926-1042) ---------- */
/* M1 tap targets. Tutor's ≤576px `.tutor-learning-area-footer[data-lesson] a.tutor-btn:not([class*="tutor-btn-link"])`
   (0,4,1) pinned Previous/Next at 32px; dashboard sub-tabs 34, sidebar links 38 (≥1024), Timezone clear 20×20. */
.dwp-tutor-page .tutor-learning-area-footer[data-lesson] :is(a, button).tutor-btn.tutor-btn:not([class*="tutor-btn-link"]) { min-height: 44px; }
.dwp-tutor-page .tutor-nav.tutor-nav-small .tutor-nav-item.tutor-nav-item { min-block-size: 44px; }
.dwp-tutor-page .tutor-dashboard-sidebar li > a { min-block-size: 44px; }
.dwp-tutor-page .tutor-select-actions .tutor-select-clear { min-inline-size: 44px; min-block-size: 44px; margin-block: -12px; justify-content: center; align-items: center; }
/* M2 Completed check: Tutor's hard-coded stroke #1C7731 → currentColor, with the icon colour set to the DWP success
   token (#3B6E52 on the white badge = 5.94). */
.dwp-tutor-page .tutor-learning-area-footer button.tutor-mark-as-complete-button.completed svg:not([class]) { color: var(--dwp-success); } /* beats Tutor's :disabled svg grey (0,4,2) */
.dwp-tutor-page .tutor-learning-area-footer button.completed svg path[stroke] { stroke: currentColor; }
/* M3 visible labels (login: inc/tutor.php; notes search: tutor-a11y.js). */
.dwp-tutor-page .dwp-tutor-label {
  display: block; margin-block-end: var(--dwp-space-2); color: var(--dwp-text-primary);
  font-size: var(--dwp-fs-small, .9375rem); font-weight: var(--dwp-fw-semibold, 600); line-height: 1.5; text-align: start;
}
/* The password eye is positioned at top:50% of the field wrapper, which now also holds the label: centre it on the input. */
.dwp-tutor-page #tutor-login-form .tutor-input-field:has(> .dwp-tutor-label) > span[style*="absolute"] { top: auto !important; bottom: 24px; transform: translateY(50%) !important; }
/* M4 "Forgot Password?": brand link colour, visible hover (UI link: no underline). #AE8100 on white 6.50, hover #886500. */
.dwp-tutor-page a.tutor-btn.tutor-btn-link-gray { color: var(--dwp-text-link); }
.dwp-tutor-page a.tutor-btn.tutor-btn-link-gray:hover { color: var(--dwp-text-link-hover); background-color: var(--dwp-color-primary-soft); }
/* M5 short dashboard/account pages: Tutor's wrappers are min 100vh below the 72px site header, so the footer always
   sat 72px below the fold. Flex column from body to the wrapper: the wrapper fills what is left of the viewport and the
   footer lands at the bottom on short pages. The sidebar stretches with its row instead of forcing 100dvh. */
body.dwp-tutor-page:has(> .dwp-main) { display: flex; flex-direction: column; min-block-size: 100dvh; } /* every Tutor page with the site shell (archive, course, cart, login too) */
body.dwp-tutor-page:has(> .dwp-main) > .dwp-main { display: flex; flex-direction: column; flex: 1 0 auto; }
.dwp-tutor-page .dwp-main :is(.tutor-dashboard-layout, .tutor-account-page-wrapper, .tutor-dashboard-isolated-page-wrapper).tutor-has-site-shell { min-height: 0; flex: 1 0 auto; }
.dwp-tutor-page .tutor-dashboard-layout.tutor-has-site-shell .tutor-dashboard-sidebar { min-height: 0; align-self: stretch; }

/* ---------- 30. Dashboard without the site header/footer for logged-in users (Hesham, 2026-09-26) ---------- */
/* Way home: Tutor's own sidebar logo link (≥769px) as the DWP wordmark, and .dwp-dash-home in the dashboard header
   (≤768px, where Tutor hides the sidebar). Both 44px+ targets, logical properties only (RTL). */
.dwp-tutor-page .tutor-dashboard-sidebar-logo { padding-block: 10px; padding-inline: var(--dwp-space-6); block-size: 80px; /* 80px keeps the divider level with the dashboard top bar */ text-decoration: none; }
.dwp-tutor-page .tutor-dashboard-sidebar-logo .tutor-brand-logo { display: block; max-inline-size: 100%; max-width: 100%; }
.dwp-tutor-page .tutor-dashboard-sidebar-logo .tutor-brand-logo img {
	display: block;
	block-size: 58px;
	height: 58px;
	inline-size: auto;
	width: auto;
	max-inline-size: 100%;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center;
}
.dwp-tutor-page .tutor-dashboard-sidebar-logo .site-title { font-family: var(--dwp-font-sans); font-weight: var(--dwp-fw-bold); font-size: var(--dwp-fs-h4); color: var(--dwp-text-heading); white-space: nowrap; }
.dwp-tutor-page .dwp-dash-home { display: none; align-items: center; min-block-size: 44px; padding-inline: var(--dwp-space-2); border-radius: var(--dwp-radius-sm); font-weight: var(--dwp-fw-bold); font-size: var(--dwp-fs-body); line-height: 1.2; color: var(--dwp-text-heading); text-decoration: none; white-space: nowrap; }
.dwp-tutor-page :is(.dwp-dash-home, .tutor-dashboard-sidebar-logo):hover .site-title,
.dwp-tutor-page .dwp-dash-home:hover { color: var(--dwp-text-link-hover); }
.dwp-tutor-page :is(.dwp-dash-home, .tutor-dashboard-sidebar-logo):focus-visible { outline: 2px solid var(--dwp-focus-ring); outline-offset: 2px; }
@media (max-width: 768px) { .dwp-tutor-page .dwp-dash-home { display: inline-flex; } }
.dwp-tutor-page .tutor-dashboard-header-right > div:has(> .dwp-dash-home) { display: flex; align-items: center; }

/* Bare dashboard (no site chrome): fill the *small* viewport so mobile browser chrome doesn't create a phantom
   scroll gap below the content. Tutor's default min-height:100vh overshoots on iOS/Android URL-bar layouts. */
.dwp-tutor-page .tutor-dashboard-layout:not(.tutor-has-site-shell) {
	min-height: 100%;
	min-height: 100svh;
}
body.dwp-tutor-page:has(> .tutor-dashboard-layout:not(.tutor-has-site-shell)) {
	min-height: 100%;
	min-height: 100svh;
	margin: 0;
}

/* Fixed bottom nav clearance when site footer is off. Match Tutor's 88px (≤576) and extend through 768 where
   the nav still shows; include safe-area only (no extra overshoot that reads as an empty scroll gap). */
@media (max-width: 768px) {
	.dwp-tutor-page .tutor-dashboard-layout:not(.tutor-has-site-footer) .tutor-dashboard-page {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- 31. WooCommerce orders and downloads inside the dashboard ---------- */
.dwp-tutor-page .dwp-tutor-wc {
	display: flex;
	flex-direction: column;
	gap: var(--dwp-space-4);
	min-inline-size: 0;
	color: var(--dwp-text-primary);
	font-family: var(--dwp-font-sans);
	font-size: var(--dwp-fs-body);
	line-height: var(--dwp-lh-body);
}
.dwp-tutor-page .dwp-tutor-wc__title {
	margin: 0;
	font-size: var(--dwp-fs-h3);
	font-weight: var(--dwp-fw-bold);
	line-height: var(--dwp-lh-heading);
	color: var(--dwp-text-heading);
}
.dwp-tutor-page .dwp-tutor-wc__back { margin: 0; }
.dwp-tutor-page .dwp-tutor-wc__back a:is(:link, :visited) {
	color: var(--dwp-text-link);
	font-size: var(--dwp-fs-small);
	font-weight: var(--dwp-fw-semibold);
	line-height: var(--dwp-lh-small);
	text-decoration: none;
}
.dwp-tutor-page .dwp-tutor-wc__back a:hover { color: var(--dwp-text-link-hover); }
.dwp-tutor-page .dwp-tutor-wc__back a:focus-visible {
	outline: 3px solid var(--dwp-focus-ring);
	outline-offset: 2px;
}

/* WooCommerce account CSS floats this at 68%. Keep it in normal flow, full column. */
.dwp-tutor-page .dwp-tutor-wc .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }
.dwp-tutor-page .dwp-tutor-wc .woocommerce-MyAccount-content > p {
	margin: 0;
	color: var(--dwp-text-primary);
}
.dwp-tutor-page .dwp-tutor-wc mark {
	background: transparent;
	color: var(--dwp-text-heading);
	font-weight: var(--dwp-fw-semibold);
}
.dwp-tutor-page .dwp-tutor-wc h2 {
	margin: var(--dwp-space-6) 0 var(--dwp-space-3);
	color: var(--dwp-text-heading);
	font-size: var(--dwp-fs-h4);
	font-weight: var(--dwp-fw-semibold);
	line-height: var(--dwp-lh-heading);
}
.dwp-tutor-page .dwp-tutor-wc a:not(.button, .woocommerce-button):is(:link, :visited) {
	color: var(--dwp-text-link);
	font-weight: var(--dwp-fw-semibold);
	text-decoration: none;
}
.dwp-tutor-page .dwp-tutor-wc a:not(.button, .woocommerce-button):hover { color: var(--dwp-text-link-hover); }

.dwp-tutor-page .dwp-tutor-wc :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--dwp-space-3);
	margin: 0 0 var(--dwp-space-4);
	padding: var(--dwp-space-4);
	border: 1px solid var(--dwp-border-default);
	border-radius: var(--dwp-radius-md);
	background: var(--dwp-bg-card);
	color: var(--dwp-text-primary);
	list-style: none;
	box-shadow: var(--dwp-shadow-1);
}
.dwp-tutor-page .dwp-tutor-wc :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before { content: none; }
.dwp-tutor-page .dwp-tutor-wc .woocommerce-info {
	border-color: var(--dwp-primary-200);
	background: var(--dwp-primary-50);
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-message {
	border-color: var(--dwp-success);
	background: var(--dwp-success-soft);
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-error {
	border-color: var(--dwp-warning);
	background: var(--dwp-warning-soft);
}
.dwp-tutor-page .dwp-tutor-wc :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button {
	flex: none;
	order: 1;
	float: none;
	margin-inline-start: auto;
}

.dwp-tutor-page .dwp-tutor-wc :is(a.button, a.woocommerce-button, .woocommerce-pagination a) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	margin: 0;
	padding-block: var(--dwp-space-2);
	padding-inline: var(--dwp-space-4);
	border: 1.5px solid var(--dwp-border-strong);
	border-radius: var(--dwp-radius-md);
	background: var(--dwp-bg-card);
	box-shadow: var(--dwp-shadow-1);
	color: var(--dwp-color-secondary);
	font-family: var(--dwp-font-sans);
	font-size: var(--dwp-fs-small);
	font-weight: var(--dwp-fw-semibold);
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--dwp-duration) var(--dwp-ease), border-color var(--dwp-duration) var(--dwp-ease);
}
.dwp-tutor-page .dwp-tutor-wc :is(a.button, a.woocommerce-button, .woocommerce-pagination a):is(:hover, :focus-visible) {
	border-color: var(--dwp-color-secondary);
	background: var(--dwp-neutral-100);
	color: var(--dwp-color-secondary);
}
.dwp-tutor-page .dwp-tutor-wc :is(a.button, a.woocommerce-button):focus-visible {
	outline: 3px solid var(--dwp-focus-ring);
	outline-offset: 3px;
}
.dwp-tutor-page .dwp-tutor-wc :is(a.wc-forward, a.pay):is(:link, :visited, :hover, :focus, :active) {
	border-color: transparent;
	background: var(--dwp-color-primary);
	color: var(--dwp-text-on-primary);
}
.dwp-tutor-page .dwp-tutor-wc :is(a.wc-forward, a.pay):hover {
	background: var(--dwp-color-primary-hover);
	color: var(--dwp-text-on-primary);
}
.dwp-tutor-page .dwp-tutor-wc :is(a.wc-forward, a.pay):active {
	background: var(--dwp-color-primary-active);
	color: var(--dwp-text-on-primary);
}

.dwp-tutor-page .dwp-tutor-wc table.shop_table {
	inline-size: 100%;
	margin: 0;
	border: 1px solid var(--dwp-border-default);
	border-radius: var(--dwp-radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--dwp-bg-card);
	box-shadow: var(--dwp-shadow-1);
}
.dwp-tutor-page .dwp-tutor-wc table.shop_table :is(th, td) {
	padding: var(--dwp-space-4);
	border: 0;
	border-block-end: 1px solid var(--dwp-border-default);
	background: transparent;
	color: var(--dwp-text-primary);
	text-align: start;
	vertical-align: middle;
}
.dwp-tutor-page .dwp-tutor-wc table.shop_table tr:last-child :is(th, td) { border-block-end: 0; }
.dwp-tutor-page .dwp-tutor-wc table.shop_table thead th {
	background: var(--dwp-neutral-100);
	color: var(--dwp-text-muted);
	font-size: var(--dwp-fs-caption);
	font-weight: var(--dwp-fw-semibold);
	line-height: var(--dwp-lh-small);
}
.dwp-tutor-page .dwp-tutor-wc :is(.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table__cell-order-actions) {
	text-align: end;
	white-space: nowrap;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-orders-table__cell-order-actions .button { margin-inline-start: var(--dwp-space-2); }
.dwp-tutor-page .dwp-tutor-wc .woocommerce-table--order-details td:has(.order-actions-button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--dwp-space-2);
}
.dwp-tutor-page .dwp-tutor-wc .order-actions-button {
	float: none;
	margin: 0;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-orders-table__cell-order-total,
.dwp-tutor-page .dwp-tutor-wc .product-total {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-Price-amount,
.dwp-tutor-page .dwp-tutor-wc .woocommerce-Price-amount bdi {
	direction: ltr;
	unicode-bidi: isolate;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-Price-currencySymbol {
	margin-inline-start: var(--dwp-space-1);
	color: var(--dwp-text-muted);
	font-size: 0.75em;
	font-weight: var(--dwp-fw-semibold);
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status {
	display: inline-flex;
	align-items: center;
	gap: var(--dwp-space-2);
	padding-block: var(--dwp-space-1);
	padding-inline: var(--dwp-space-3);
	border: 1px solid transparent;
	border-radius: var(--dwp-radius-pill);
	background: var(--dwp-neutral-200);
	color: var(--dwp-text-muted);
	font-size: var(--dwp-fs-caption);
	font-weight: var(--dwp-fw-semibold);
	line-height: 1.4;
	white-space: nowrap;
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status::before {
	content: "";
	flex: none;
	inline-size: 6px;
	block-size: 6px;
	border-radius: var(--dwp-radius-pill);
	background: currentColor;
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status--processing {
	border-color: var(--dwp-primary-200);
	background: var(--dwp-color-primary-soft);
	color: var(--dwp-color-primary-text);
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status--pending {
	border-color: var(--dwp-color-accent);
	background: var(--dwp-color-accent-soft);
	color: var(--dwp-primary-900);
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status--on-hold {
	border-color: var(--dwp-neutral-300);
	background: var(--dwp-neutral-100);
	color: var(--dwp-color-secondary);
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status--completed {
	border-color: transparent;
	background: var(--dwp-success-soft);
	color: var(--dwp-success);
}
.dwp-tutor-page .dwp-tutor-wc :is(.dwp-tutor-wc__status--cancelled, .dwp-tutor-wc__status--failed) {
	border-color: transparent;
	background: var(--dwp-warning-soft);
	color: var(--dwp-warning);
}
.dwp-tutor-page .dwp-tutor-wc .dwp-tutor-wc__status--refunded {
	border-color: var(--dwp-neutral-300);
	background: var(--dwp-neutral-100);
	color: var(--dwp-text-muted);
}

.dwp-tutor-page .dwp-tutor-wc .product-quantity {
	margin-inline-start: var(--dwp-space-2);
	color: var(--dwp-text-muted);
	font-weight: var(--dwp-fw-regular);
}
.dwp-tutor-page .dwp-tutor-wc address {
	margin: 0;
	padding: var(--dwp-space-4);
	border: 1px solid var(--dwp-border-default);
	border-radius: var(--dwp-radius-md);
	background: var(--dwp-bg-card);
	box-shadow: var(--dwp-shadow-1);
	color: var(--dwp-text-primary);
	font-style: normal;
}
.dwp-tutor-page .dwp-tutor-wc address p { margin: 0; }
.dwp-tutor-page .dwp-tutor-wc .woocommerce-OrderUpdates {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-OrderUpdate {
	margin: 0 0 var(--dwp-space-3);
	padding: var(--dwp-space-4);
	border: 1px solid var(--dwp-border-default);
	border-radius: var(--dwp-radius-md);
	background: var(--dwp-bg-card);
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-OrderUpdate-meta {
	margin: 0 0 var(--dwp-space-2);
	color: var(--dwp-text-muted);
	font-size: var(--dwp-fs-caption);
}
.dwp-tutor-page .dwp-tutor-wc .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dwp-space-3);
	margin-block-start: var(--dwp-space-4);
}

@media (max-width: 640px) {
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive {
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive thead { display: none; }
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive :is(tbody, tr, td, th) {
		display: block;
		inline-size: 100%;
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive tr {
		margin-block-end: var(--dwp-space-4);
		border: 1px solid var(--dwp-border-default);
		border-radius: var(--dwp-radius-md);
		overflow: hidden;
		background: var(--dwp-bg-card);
		box-shadow: var(--dwp-shadow-1);
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive tr:last-child { margin-block-end: 0; }
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive :is(td, th) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dwp-space-3);
		text-align: end;
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive :is(td, th)::before {
		content: attr(data-title);
		flex: none;
		color: var(--dwp-text-muted);
		font-size: var(--dwp-fs-caption);
		font-weight: var(--dwp-fw-semibold);
		text-align: start;
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
		text-align: end;
	}
	.dwp-tutor-page .dwp-tutor-wc table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before { margin-inline-end: auto; }
}

/* ---------- 27. Brand yellow as TEXT → text-safe tone ----------
   Tutor paints active tabs, accordion headers and "more" links with --tutor-color-primary (#F8B800), which is
   ~1.8:1 on the beige/white surfaces. Guide §2.1: vivid brand yellow is for fills/icons only; yellow used AS text
   is --dwp-color-primary-text (#886500). Underlines / indicators stay vivid yellow. */
.dwp-tutor-page :is(.tutor-nav-link.is-active, .tutor-nav-link.is-active:hover, .tutor-dropdown-item.is-active,
	.tutor-accordion-item-header.is-active, .tutor-accordion-item-header.is-active:hover,
	.tutor-accordion-item-header.is-active :is(span, a, h4)) {
	color: var(--dwp-color-primary-text);
}
.dwp-tutor-page .tutor-nav-link.is-active { border-color: var(--dwp-color-primary); }
.dwp-tutor-page .tutor-accordion-item-header.is-active::after,
.dwp-tutor-page .tutor-accordion-item-header.is-active .tutor-icon-chevron-down { color: var(--dwp-color-primary-text); }