/* Pattern Recognition Sprint
   Scoped academic UI for the fourth course. The host document is RTL; this
   learning surface deliberately establishes its own LTR writing context. */

.pattern-view {
  --pr-primary: #4f46e5;
  --pr-primary-strong: #3730a3;
  --pr-primary-soft: #eef2ff;
  --pr-cyan: #0e7490;
  --pr-cyan-strong: #155e75;
  --pr-cyan-soft: #ecfeff;
  --pr-amber: #b45309;
  --pr-amber-strong: #92400e;
  --pr-amber-soft: #fffbeb;
  --pr-success: #15803d;
  --pr-success-soft: #f0fdf4;
  --pr-danger: #b91c1c;
  --pr-danger-soft: #fef2f2;
  --pr-info: #0369a1;
  --pr-info-soft: #eff6ff;
  --pr-ink: #172033;
  --pr-text: #344054;
  --pr-muted: #667085;
  --pr-canvas: #f7f8fc;
  --pr-surface: #ffffff;
  --pr-surface-2: #f3f5fb;
  --pr-border: #dfe3ef;
  --pr-border-strong: #c8cede;
  --pr-focus: #f59e0b;
  --pr-meter-core: #3730a3;
  --pr-shadow-sm: 0 2px 12px rgba(35, 41, 87, .07);
  --pr-shadow-md: 0 18px 50px rgba(35, 41, 87, .13);
  --pr-radius-sm: 12px;
  --pr-radius-md: 18px;
  --pr-radius-lg: 28px;
  direction: ltr;
  unicode-bidi: isolate;
  width: min(1280px, 100%);
  min-width: 0;
  color: var(--pr-text);
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
  text-align: left;
}

[data-theme="dark"] .pattern-view {
  --pr-primary: #a5b4fc;
  --pr-primary-strong: #c7d2fe;
  --pr-primary-soft: #252752;
  --pr-cyan: #67e8f9;
  --pr-cyan-strong: #a5f3fc;
  --pr-cyan-soft: #123640;
  --pr-amber: #fbbf24;
  --pr-amber-strong: #fde68a;
  --pr-amber-soft: #46320d;
  --pr-success: #86efac;
  --pr-success-soft: #123921;
  --pr-danger: #fca5a5;
  --pr-danger-soft: #451b1b;
  --pr-info: #7dd3fc;
  --pr-info-soft: #142f48;
  --pr-ink: #f5f7ff;
  --pr-text: #e0e5f2;
  --pr-muted: #aeb7cb;
  --pr-canvas: #111423;
  --pr-surface: #191d31;
  --pr-surface-2: #222740;
  --pr-border: #39405d;
  --pr-border-strong: #505a7c;
  --pr-focus: #fbbf24;
  --pr-meter-core: #252752;
  --pr-shadow-sm: 0 3px 14px rgba(0, 0, 0, .22);
  --pr-shadow-md: 0 20px 54px rgba(0, 0, 0, .34);
}

body.pattern-active {
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 70, 229, .13), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(8, 145, 178, .09), transparent 26rem),
    var(--canvas);
}

body.pattern-active .app-shell { grid-template-columns: minmax(0, 1fr); }
body.pattern-active .course-sidebar,
body.pattern-active .mobile-lesson-bar,
body.pattern-active .mobile-sheet-backdrop,
body.pattern-active .mobile-lessons-sheet { display: none !important; }
body.pattern-active main { width: min(1380px, 100%); margin-inline: auto; }

.pattern-view *,
.pattern-view *::before,
.pattern-view *::after { box-sizing: border-box; }

.pattern-view img,
.pattern-view svg,
.pattern-view canvas { max-width: 100%; }

.pattern-view h1,
.pattern-view h2,
.pattern-view h3,
.pattern-view h4 { color: var(--pr-ink); line-height: 1.25; text-wrap: balance; }

.pattern-view p,
.pattern-view li,
.pattern-view dd { overflow-wrap: anywhere; }

.pattern-view :is(button, a, input, select, textarea) { font: inherit; }

.pattern-view :is(button, [role="button"], a.pr-button, a.pattern-button) {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pattern-view :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pr-focus) 78%, transparent);
  outline-offset: 3px;
}

.pattern-view :is(button, a.pr-button, a.pattern-button) {
  transition: background-color .2s ease, border-color .2s ease,
    color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pattern-view :is(button, a.pr-button, a.pattern-button):active { transform: translateY(1px); }
.pattern-view :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .55; }

/* Site integration */
.course-switcher-card.course-pattern {
  --course-color: #4f46e5;
  --course-strong: #3730a3;
  --course-soft: #eef2ff;
  --course-on: #ffffff;
}

[data-theme="dark"] .course-switcher-card.course-pattern {
  --course-color: #a5b4fc;
  --course-strong: #c7d2fe;
  --course-soft: #252752;
  --course-on: #25234c;
}

.pattern-trigger {
  color: #3730a3;
  border-color: color-mix(in srgb, #4f46e5 42%, var(--border));
}

.pattern-trigger:hover,
.pattern-trigger.active {
  color: #ffffff;
  background: #3730a3;
  border-color: #3730a3;
}

[data-theme="dark"] .pattern-trigger { color: #c7d2fe; }
[data-theme="dark"] .pattern-trigger:hover,
[data-theme="dark"] .pattern-trigger.active {
  color: #25234c;
  background: #c7d2fe;
  border-color: #c7d2fe;
}

/* Page frame, hero, and internal navigation */
.pattern-view :is(.pr-shell, .pattern-shell) {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  min-width: 0;
}

.pattern-view :is(.pr-hero, .pattern-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(250px, .7fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  min-width: 0;
  padding: clamp(1.4rem, 4vw, 3.25rem);
  color: #eef2ff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), transparent 42%),
    linear-gradient(125deg, #312e81, #4338ca 56%, #0e7490);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-md);
}

.pattern-view :is(.pr-hero, .pattern-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.pattern-view :is(.pr-hero, .pattern-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 310px;
  height: 310px;
  right: -120px;
  top: -150px;
  border: 52px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.pattern-view :is(.pr-hero-copy, .pattern-hero-copy) { min-width: 0; max-width: 76ch; }
.pattern-view :is(.pr-kicker, .pattern-kicker) {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 .65rem;
  padding: .2rem .7rem;
  color: #cffafe;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pattern-view :is(.pr-hero, .pattern-hero) h1 {
  max-width: 16ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 4.35rem);
  letter-spacing: -.035em;
}

.pattern-view :is(.pr-hero, .pattern-hero) p {
  max-width: 68ch;
  margin: .9rem 0 0;
  color: #e0e7ff;
  font-size: clamp(.98rem, 1.8vw, 1.12rem);
}

.pattern-view :is(.pr-hero-actions, .pattern-hero-actions, .pr-actions, .pattern-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-top: 1.25rem;
}

.pattern-view :is(.pr-hero-meter, .pattern-hero-meter) {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 1.1rem;
  background: rgba(14, 18, 65, .3);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  backdrop-filter: blur(10px);
}

.pattern-view :is(.pr-meter-value, .pattern-meter-value) {
  display: grid;
  width: clamp(112px, 16vw, 154px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle, var(--pr-meter-core) 0 57%, transparent 58%),
    conic-gradient(#67e8f9 var(--progress, 0%), rgba(255,255,255,.16) 0);
  border-radius: 50%;
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  font-weight: 850;
}

.pattern-view :is(.pr-hero-meter, .pattern-hero-meter) small { margin-top: .65rem; color: #dbeafe; text-align: center; }

.pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav) {
  position: sticky;
  z-index: 20;
  top: 76px;
  display: flex;
  gap: .4rem;
  max-width: 100%;
  overflow-x: auto;
  padding: .45rem;
  background: color-mix(in srgb, var(--pr-surface) 92%, transparent);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  box-shadow: var(--pr-shadow-sm);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav)::-webkit-scrollbar { display: none; }

.pattern-view :is(.pr-nav-button, .pattern-nav-button) {
  flex: 0 0 auto;
  min-height: 44px;
  padding: .55rem .85rem;
  color: var(--pr-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: .84rem;
  font-weight: 750;
  white-space: nowrap;
}

.pattern-view :is(.pr-nav-button, .pattern-nav-button):hover {
  color: var(--pr-primary-strong);
  background: var(--pr-primary-soft);
}

.pattern-view :is(.pr-nav-button, .pattern-nav-button).active,
.pattern-view :is(.pr-nav-button, .pattern-nav-button)[aria-current="page"] {
  color: #ffffff;
  background: var(--pr-primary-strong);
  border-color: var(--pr-primary-strong);
}

[data-theme="dark"] .pattern-view :is(.pr-nav-button, .pattern-nav-button).active,
[data-theme="dark"] .pattern-view :is(.pr-nav-button, .pattern-nav-button)[aria-current="page"] { color: #24214b; }

/* Shared headings, cards, status, and controls */
.pattern-view :is(.pr-section, .pattern-section) { min-width: 0; scroll-margin-top: 148px; }

.pattern-view :is(.pr-section-heading, .pattern-section-heading) {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .85rem;
}

.pattern-view :is(.pr-section-heading, .pattern-section-heading) > div { max-width: 74ch; }
.pattern-view :is(.pr-section-heading, .pattern-section-heading) h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.05rem); }
.pattern-view :is(.pr-section-heading, .pattern-section-heading) p { margin: .25rem 0 0; color: var(--pr-muted); }

.pattern-view :is(.pr-panel, .pattern-panel, .pr-card, .pattern-card) {
  min-width: 0;
  padding: clamp(1rem, 2.3vw, 1.4rem);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  box-shadow: var(--pr-shadow-sm);
}

.pattern-view :is(.pr-panel, .pattern-panel) > :first-child,
.pattern-view :is(.pr-card, .pattern-card) > :first-child { margin-top: 0; }
.pattern-view :is(.pr-panel, .pattern-panel) > :last-child,
.pattern-view :is(.pr-card, .pattern-card) > :last-child { margin-bottom: 0; }

.pattern-view :is(.pr-stats, .pattern-stats) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.pattern-view :is(.pr-stat, .pattern-stat) {
  min-width: 0;
  padding: 1rem;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  box-shadow: var(--pr-shadow-sm);
}

.pattern-view :is(.pr-stat, .pattern-stat) strong {
  display: block;
  color: var(--pr-primary-strong);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.2;
}

.pattern-view :is(.pr-stat, .pattern-stat) span { display: block; margin-top: .25rem; color: var(--pr-muted); font-size: .78rem; }

.pattern-view :is(.pr-progress, .pattern-progress) {
  height: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pr-border) 72%, var(--pr-surface));
  border-radius: 999px;
}

.pattern-view :is(.pr-progress, .pattern-progress) > span {
  display: block;
  width: var(--progress, 0%);
  max-width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--pr-primary), var(--pr-cyan));
  border-radius: inherit;
  transition: width .25s ease;
}

.pattern-view :is(.pr-chip-row, .pattern-chip-row, .pr-badges, .pattern-badges) {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.pattern-view :is(.pr-chip, .pattern-chip, .pr-badge, .pattern-badge) {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: .2rem .58rem;
  color: var(--pr-primary-strong);
  background: var(--pr-primary-soft);
  border: 1px solid color-mix(in srgb, var(--pr-primary) 30%, var(--pr-border));
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
}

.pattern-view :is(.priority-a, .pr-priority-a, [data-priority="A"]) { --priority: var(--pr-danger); --priority-soft: var(--pr-danger-soft); }
.pattern-view :is(.priority-b, .pr-priority-b, [data-priority="B"]) { --priority: var(--pr-amber); --priority-soft: var(--pr-amber-soft); }
.pattern-view :is(.priority-c, .pr-priority-c, [data-priority="C"]) { --priority: var(--pr-cyan); --priority-soft: var(--pr-cyan-soft); }

.pattern-view :is(.pr-priority, .pattern-priority, [data-priority]) {
  color: var(--priority, var(--pr-primary-strong));
  background: var(--priority-soft, var(--pr-primary-soft));
  border-color: color-mix(in srgb, var(--priority, var(--pr-primary)) 34%, var(--pr-border));
}

.pattern-view :is(.pr-button, .pattern-button, .pr-primary-button, .pr-secondary-button, .pr-ghost-button, .pr-danger-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 46px;
  padding: .62rem .95rem;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.pattern-view :is(.pr-button, .pattern-button, .pr-primary-button) {
  color: #ffffff;
  background: var(--pr-primary-strong);
  border: 1px solid var(--pr-primary-strong);
}

.pattern-view :is(.pr-button, .pattern-button, .pr-primary-button):hover { background: var(--pr-primary); box-shadow: 0 8px 22px rgba(79, 70, 229, .2); }
.pattern-view .pr-secondary-button { color: var(--pr-cyan-strong); background: var(--pr-cyan-soft); border: 1px solid color-mix(in srgb, var(--pr-cyan) 34%, var(--pr-border)); }
.pattern-view .pr-secondary-button:hover { border-color: var(--pr-cyan); box-shadow: var(--pr-shadow-sm); }
.pattern-view .pr-ghost-button { color: var(--pr-text); background: var(--pr-surface); border: 1px solid var(--pr-border); }
.pattern-view .pr-ghost-button:hover { color: var(--pr-primary-strong); border-color: var(--pr-primary); }
.pattern-view .pr-danger-button { color: var(--pr-danger); background: var(--pr-danger-soft); border: 1px solid color-mix(in srgb, var(--pr-danger) 32%, var(--pr-border)); }
[data-theme="dark"] .pattern-view :is(.pr-button, .pattern-button, .pr-primary-button) { color: #24214b; }

.pattern-view :is(.pr-toolbar, .pattern-toolbar) {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 15px;
}

.pattern-view :is(.pr-search, .pattern-search) { position: relative; flex: 1 1 260px; min-width: 0; }
.pattern-view :is(.pr-search, .pattern-search) input,
.pattern-view :is(.pr-input, .pattern-input),
.pattern-view :is(.pr-field, .pattern-field) :is(input, select, textarea) {
  width: 100%;
  min-height: 46px;
  padding: .65rem .8rem;
  color: var(--pr-ink);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border-strong);
  border-radius: 11px;
}

.pattern-view :is(.pr-search, .pattern-search) input::placeholder,
.pattern-view :is(.pr-field, .pattern-field) input::placeholder { color: var(--pr-muted); opacity: .9; }
.pattern-view :is(.pr-field, .pattern-field) { display: grid; gap: .32rem; min-width: 0; }
.pattern-view :is(.pr-field, .pattern-field) label { color: var(--pr-ink); font-size: .8rem; font-weight: 750; }
.pattern-view :is(.pr-field, .pattern-field) small { color: var(--pr-muted); font-size: .72rem; }

/* Fourteen-day roadmap and lesson catalogue */
.pattern-view :is(.pr-day-grid, .pattern-day-grid, .pr-plan-grid, .pattern-plan-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.pattern-view :is(.pr-day-card, .pattern-day-card) {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  min-width: 0;
  padding: 1rem;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 17px;
  box-shadow: var(--pr-shadow-sm);
}

.pattern-view :is(.pr-day-card, .pattern-day-card)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  z-index: 0;
  width: 2px;
  background: var(--pr-border);
}

.pattern-view :is(.pr-day-number, .pattern-day-number) {
  position: relative;
  z-index: 1;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  color: #ffffff;
  background: var(--pr-primary-strong);
  border: 4px solid var(--pr-surface);
  border-radius: 15px;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
}

.pattern-view :is(.pr-day-card, .pattern-day-card).is-complete { border-color: color-mix(in srgb, var(--pr-success) 45%, var(--pr-border)); }
.pattern-view :is(.pr-day-card, .pattern-day-card).is-complete :is(.pr-day-number, .pattern-day-number) { color: #ffffff; background: var(--pr-success); }
[data-theme="dark"] .pattern-view :is(.pr-day-card, .pattern-day-card).is-complete :is(.pr-day-number, .pattern-day-number) { color: #082516; }
.pattern-view :is(.pr-day-copy, .pattern-day-copy) { min-width: 0; }
.pattern-view :is(.pr-day-copy, .pattern-day-copy) h3 { margin: .05rem 0 .3rem; font-size: 1rem; }
.pattern-view :is(.pr-day-copy, .pattern-day-copy) p { margin: 0; color: var(--pr-muted); font-size: .82rem; }
.pattern-view :is(.pr-day-meta, .pattern-day-meta) { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .55rem; color: var(--pr-muted); font-size: .72rem; }

.pattern-view :is(.pr-lesson-grid, .pattern-lesson-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.pattern-view :is(.pr-lesson-card, .pattern-lesson-card) {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  flex-direction: column;
  padding: 1rem;
  color: var(--pr-text);
  background: linear-gradient(160deg, var(--pr-surface), color-mix(in srgb, var(--pr-primary-soft) 45%, var(--pr-surface)));
  border: 1px solid var(--pr-border);
  border-top: 4px solid var(--priority, var(--pr-primary));
  border-radius: 18px;
  box-shadow: var(--pr-shadow-sm);
  text-align: left;
}

.pattern-view button:is(.pr-lesson-card, .pattern-lesson-card):hover,
.pattern-view a:is(.pr-lesson-card, .pattern-lesson-card):hover {
  border-color: color-mix(in srgb, var(--priority, var(--pr-primary)) 48%, var(--pr-border));
  box-shadow: var(--pr-shadow-md);
  transform: translateY(-2px);
}

.pattern-view :is(.pr-lesson-card, .pattern-lesson-card).is-complete::after {
  content: "Mastered";
  position: absolute;
  top: .68rem;
  right: .7rem;
  padding: .16rem .48rem;
  color: var(--pr-success);
  background: var(--pr-success-soft);
  border: 1px solid color-mix(in srgb, var(--pr-success) 35%, var(--pr-border));
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 850;
}

.pattern-view :is(.pr-lesson-index, .pattern-lesson-index) { color: var(--priority, var(--pr-primary-strong)); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pattern-view :is(.pr-lesson-card, .pattern-lesson-card) h3 { margin: .45rem 0 .3rem; font-size: 1.12rem; }
.pattern-view :is(.pr-lesson-card, .pattern-lesson-card) p { flex: 1; margin: 0; color: var(--pr-muted); font-size: .8rem; }
.pattern-view :is(.pr-lesson-meta, .pattern-lesson-meta) { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }

/* Lesson reading surface */
.pattern-view :is(.pr-lesson-header, .pattern-lesson-header) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(145deg, var(--pr-primary-soft), var(--pr-surface) 58%, var(--pr-cyan-soft));
  border: 1px solid var(--pr-border);
  border-radius: 22px;
}

.pattern-view :is(.pr-lesson-header, .pattern-lesson-header) h1 { margin: .25rem 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.pattern-view :is(.pr-lesson-header, .pattern-lesson-header) p { max-width: 72ch; margin: 0; color: var(--pr-muted); }

.pattern-view :is(.pr-tabs, .pattern-tabs) {
  position: sticky;
  z-index: 19;
  top: 135px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(130px, max-content);
  justify-content: start;
  gap: .4rem;
  max-width: 100%;
  overflow-x: auto;
  margin-block: .8rem;
  padding: .4rem;
  background: color-mix(in srgb, var(--pr-surface) 94%, transparent);
  border: 1px solid var(--pr-border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  scrollbar-width: none;
}

.pattern-view :is(.pr-tabs, .pattern-tabs)::-webkit-scrollbar { display: none; }
.pattern-view :is(.pr-tab, .pattern-tab) { min-height: 44px; padding: .5rem .85rem; color: var(--pr-muted); background: transparent; border: 1px solid transparent; border-radius: 10px; font-weight: 800; }
.pattern-view :is(.pr-tab, .pattern-tab):hover { color: var(--pr-primary-strong); background: var(--pr-primary-soft); }
.pattern-view :is(.pr-tab, .pattern-tab).active,
.pattern-view :is(.pr-tab, .pattern-tab)[aria-selected="true"] { color: #ffffff; background: var(--pr-primary-strong); border-color: var(--pr-primary-strong); }
[data-theme="dark"] .pattern-view :is(.pr-tab, .pattern-tab).active,
[data-theme="dark"] .pattern-view :is(.pr-tab, .pattern-tab)[aria-selected="true"] { color: #24214b; }

.pattern-view :is(.pr-content-grid, .pattern-content-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
  gap: 1rem;
  align-items: start;
  min-width: 0;
}

.pattern-view :is(.pr-content-main, .pattern-content-main) { display: grid; gap: 1rem; min-width: 0; }
.pattern-view :is(.pr-content-aside, .pattern-content-aside) { position: sticky; top: 200px; display: grid; gap: .75rem; min-width: 0; }
.pattern-view :is(.pr-reading, .pattern-reading) { max-width: 75ch; }
.pattern-view :is(.pr-reading, .pattern-reading) p { margin-block: .6rem; }
.pattern-view :is(.pr-reading, .pattern-reading) ul,
.pattern-view :is(.pr-reading, .pattern-reading) ol { padding-left: 1.35rem; }

.pattern-view :is(.pr-concept-grid, .pattern-concept-grid, .pr-example-grid, .pattern-example-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.pattern-view :is(.pr-concept-card, .pattern-concept-card, .pr-example-card, .pattern-example-card) {
  min-width: 0;
  padding: 1rem;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-left: 4px solid var(--pr-cyan);
  border-radius: 14px;
}

.pattern-view :is(.pr-concept-card, .pattern-concept-card, .pr-example-card, .pattern-example-card) h3 { margin: 0 0 .35rem; font-size: 1rem; }
.pattern-view :is(.pr-concept-card, .pattern-concept-card, .pr-example-card, .pattern-example-card) p { margin: 0; color: var(--pr-muted); font-size: .86rem; }

.pattern-view :is(.pr-formula-grid, .pattern-formula-grid) { display: grid; gap: .7rem; }
.pattern-view :is(.pr-formula-card, .pattern-formula-card) {
  min-width: 0;
  overflow: hidden;
  background: var(--pr-surface);
  border: 1px solid color-mix(in srgb, var(--pr-primary) 28%, var(--pr-border));
  border-radius: 15px;
}

.pattern-view :is(.pr-formula-title, .pattern-formula-title) { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .85rem; color: var(--pr-primary-strong); background: var(--pr-primary-soft); font-size: .78rem; font-weight: 850; }
.pattern-view :is(.pr-formula, .pattern-formula, .math, [data-math]) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  padding: .85rem;
  color: var(--pr-ink);
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: clamp(.79rem, 2vw, .94rem);
  line-height: 1.7;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}

.pattern-view :is(.pr-formula-note, .pattern-formula-note) { padding: 0 .85rem .8rem; color: var(--pr-muted); font-size: .78rem; }

.pattern-view :is(.pr-callout, .pattern-callout, .pr-trap, .pattern-trap) {
  min-width: 0;
  padding: .85rem 1rem;
  color: var(--pr-text);
  background: var(--pr-amber-soft);
  border: 1px solid color-mix(in srgb, var(--pr-amber) 32%, var(--pr-border));
  border-left: 5px solid var(--pr-amber);
  border-radius: 14px;
}

.pattern-view :is(.pr-callout, .pattern-callout, .pr-trap, .pattern-trap) h3 { margin: 0 0 .25rem; color: var(--pr-amber-strong); font-size: .95rem; }
.pattern-view :is(.pr-callout, .pattern-callout, .pr-trap, .pattern-trap) p { margin: 0; font-size: .84rem; }
.pattern-view :is(.pr-callout, .pattern-callout).is-info { background: var(--pr-info-soft); border-color: color-mix(in srgb, var(--pr-info) 32%, var(--pr-border)); border-left-color: var(--pr-info); }
.pattern-view :is(.pr-callout, .pattern-callout).is-info h3 { color: var(--pr-info); }

/* Exam-scope notices stay fully readable while remaining unmistakable without
   relying on red alone. Use .is-mixed for a lesson that contains both included
   and excluded material. */
.pattern-view .pr-scope-note {
  display: grid;
  gap: .4rem;
  min-width: 0;
  padding: .85rem 1rem;
  color: var(--pr-text);
  background: var(--pr-danger-soft);
  border: 1px solid color-mix(in srgb, var(--pr-danger) 42%, var(--pr-border));
  border-inline-start: 5px solid var(--pr-danger);
  border-radius: 14px;
}

.pattern-view .pr-scope-note-head {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  align-items: center;
  min-width: 0;
}

.pattern-view .pr-scope-note-head strong { color: var(--pr-ink); }
.pattern-view .pr-scope-note :is(p, ul) { margin: 0; }
.pattern-view .pr-scope-note ul { padding-inline-start: 1.25rem; }

.pattern-view .pr-scope-badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: .22rem .58rem;
  color: var(--pr-danger);
  background: var(--pr-surface);
  border: 2px solid var(--pr-danger);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.pattern-view .pr-scope-note.is-mixed {
  background: var(--pr-amber-soft);
  border-color: color-mix(in srgb, var(--pr-amber) 42%, var(--pr-border));
  border-inline-start-color: var(--pr-amber);
}

.pattern-view .pr-scope-badge.is-mixed,
.pattern-view .pr-scope-note.is-mixed .pr-scope-badge {
  color: var(--pr-amber-strong);
  border-color: var(--pr-amber);
}

.pattern-view details:is(.pr-details, .pattern-details) { background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: 14px; }
.pattern-view details:is(.pr-details, .pattern-details) + details { margin-top: .55rem; }
.pattern-view details:is(.pr-details, .pattern-details) summary { min-height: 48px; padding: .7rem 2.25rem .7rem .85rem; color: var(--pr-ink); cursor: pointer; font-weight: 800; }
.pattern-view details:is(.pr-details, .pattern-details) > :not(summary) { margin-inline: .85rem; }
.pattern-view details:is(.pr-details, .pattern-details) > :last-child { margin-bottom: .85rem; }

.pattern-view :is(.pr-table-wrap, .pattern-table-wrap) { max-width: 100%; overflow-x: auto; border: 1px solid var(--pr-border); border-radius: 14px; scrollbar-width: thin; }
.pattern-view :is(.pr-table, .pattern-table) { width: 100%; min-width: 610px; border-collapse: collapse; color: var(--pr-text); background: var(--pr-surface); font-size: .82rem; }
.pattern-view :is(.pr-table, .pattern-table) th,
.pattern-view :is(.pr-table, .pattern-table) td { padding: .7rem .8rem; border-bottom: 1px solid var(--pr-border); text-align: left; vertical-align: top; }
.pattern-view :is(.pr-table, .pattern-table) th { color: var(--pr-ink); background: var(--pr-surface-2); font-size: .75rem; letter-spacing: .02em; }
.pattern-view :is(.pr-table, .pattern-table) tr:last-child td { border-bottom: 0; }

.pattern-view :is(.pr-flashcard-grid, .pattern-flashcard-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pattern-view :is(.pr-flashcard, .pattern-flashcard) {
  display: grid;
  min-height: 150px;
  place-items: center;
  padding: 1rem;
  color: var(--pr-ink);
  background: linear-gradient(145deg, var(--pr-surface), var(--pr-primary-soft));
  border: 1px solid color-mix(in srgb, var(--pr-primary) 30%, var(--pr-border));
  border-radius: 16px;
  text-align: center;
}
.pattern-view button:is(.pr-flashcard, .pattern-flashcard):hover { border-color: var(--pr-primary); box-shadow: var(--pr-shadow-sm); }
.pattern-view :is(.pr-flashcard, .pattern-flashcard) small { color: var(--pr-muted); }

/* Quiz and review queue */
.pattern-view :is(.pr-quiz-stack, .pattern-quiz-stack, .pr-review-list, .pattern-review-list) { display: grid; gap: .85rem; }
.pattern-view :is(.pr-quiz-card, .pattern-quiz-card, .pr-question-card, .pattern-question-card, .pr-review-card, .pattern-review-card) {
  min-width: 0;
  padding: clamp(.9rem, 2.2vw, 1.25rem);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 17px;
  box-shadow: var(--pr-shadow-sm);
}

.pattern-view :is(.pr-question-head, .pattern-question-head) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.pattern-view :is(.pr-question-number, .pattern-question-number) { display: grid; width: 38px; height: 38px; place-items: center; color: #ffffff; background: var(--pr-primary-strong); border-radius: 11px; font-size: .78rem; font-weight: 850; }
[data-theme="dark"] .pattern-view :is(.pr-question-number, .pattern-question-number) { color: #24214b; }
.pattern-view :is(.pr-question-prompt, .pattern-question-prompt) { margin: .1rem 0 0; color: var(--pr-ink); font-size: .98rem; font-weight: 720; }

.pattern-view :is(.pr-options, .pattern-options) { display: grid; gap: .55rem; margin-top: .85rem; }
.pattern-view :is(.pr-option, .pattern-option) {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .62rem .75rem;
  color: var(--pr-text);
  background: var(--pr-surface-2);
  border: 1px solid var(--pr-border);
  border-radius: 12px;
  text-align: left;
}

.pattern-view :is(.pr-option, .pattern-option):hover { color: var(--pr-ink); border-color: var(--pr-primary); }
.pattern-view :is(.pr-option, .pattern-option).is-selected,
.pattern-view :is(.pr-option, .pattern-option)[aria-checked="true"] { background: var(--pr-primary-soft); border-color: var(--pr-primary); box-shadow: inset 4px 0 0 var(--pr-primary); }
.pattern-view :is(.pr-option, .pattern-option).is-correct { background: var(--pr-success-soft); border-color: var(--pr-success); box-shadow: inset 4px 0 0 var(--pr-success); }
.pattern-view :is(.pr-option, .pattern-option).is-wrong { background: var(--pr-danger-soft); border-color: var(--pr-danger); box-shadow: inset 4px 0 0 var(--pr-danger); }
.pattern-view :is(.pr-option, .pattern-option).is-correct::after { content: "Correct"; color: var(--pr-success); font-size: .67rem; font-weight: 850; }
.pattern-view :is(.pr-option, .pattern-option).is-wrong::after { content: "Review"; color: var(--pr-danger); font-size: .67rem; font-weight: 850; }
.pattern-view :is(.pr-option, .pattern-option):disabled { cursor: default; opacity: 1; }
.pattern-view :is(.pr-option-marker, .pattern-option-marker) { display: grid; width: 28px; height: 28px; place-items: center; color: var(--pr-primary-strong); background: var(--pr-surface); border: 1px solid var(--pr-border-strong); border-radius: 8px; font-size: .72rem; font-weight: 850; }

.pattern-view :is(.pr-feedback, .pattern-feedback) { margin-top: .75rem; padding: .75rem .85rem; background: var(--pr-info-soft); border: 1px solid color-mix(in srgb, var(--pr-info) 30%, var(--pr-border)); border-radius: 12px; }
.pattern-view :is(.pr-feedback, .pattern-feedback).is-correct { background: var(--pr-success-soft); border-color: color-mix(in srgb, var(--pr-success) 40%, var(--pr-border)); }
.pattern-view :is(.pr-feedback, .pattern-feedback).is-wrong { background: var(--pr-danger-soft); border-color: color-mix(in srgb, var(--pr-danger) 40%, var(--pr-border)); }
.pattern-view :is(.pr-feedback, .pattern-feedback) strong { display: block; color: var(--pr-ink); }
.pattern-view :is(.pr-feedback, .pattern-feedback) p { margin: .2rem 0 0; font-size: .82rem; }

.pattern-view :is(.pr-quiz-summary, .pattern-quiz-summary) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; background: var(--pr-primary-soft); border: 1px solid color-mix(in srgb, var(--pr-primary) 30%, var(--pr-border)); border-radius: 16px; }
.pattern-view :is(.pr-score, .pattern-score) { color: var(--pr-primary-strong); font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 900; line-height: 1; }

/* Interactive labs */
.pattern-view :is(.pr-lab-grid, .pattern-lab-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.pattern-view :is(.pr-lab-card, .pattern-lab-card) { min-width: 0; padding: 1rem; background: linear-gradient(155deg, var(--pr-surface), var(--pr-cyan-soft)); border: 1px solid color-mix(in srgb, var(--pr-cyan) 30%, var(--pr-border)); border-radius: 18px; box-shadow: var(--pr-shadow-sm); }
.pattern-view :is(.pr-lab-card, .pattern-lab-card) h3 { margin: 0 0 .25rem; font-size: 1.08rem; }
.pattern-view :is(.pr-lab-card, .pattern-lab-card) > p { margin: 0 0 .85rem; color: var(--pr-muted); font-size: .82rem; }
.pattern-view :is(.pr-lab-fields, .pattern-lab-fields) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pattern-view :is(.pr-lab-result, .pattern-lab-result) { min-width: 0; margin-top: .85rem; padding: .8rem; color: var(--pr-cyan-strong); background: var(--pr-surface); border: 1px solid color-mix(in srgb, var(--pr-cyan) 35%, var(--pr-border)); border-radius: 12px; font-family: "Cascadia Mono", Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }

/* Exam room */
.pattern-view :is(.pr-exam-grid, .pattern-exam-grid) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.pattern-view :is(.pr-exam-card, .pattern-exam-card) { display: flex; min-width: 0; min-height: 220px; flex-direction: column; padding: 1rem; background: var(--pr-surface); border: 1px solid var(--pr-border); border-top: 4px solid var(--pr-primary); border-radius: 18px; box-shadow: var(--pr-shadow-sm); }
.pattern-view :is(.pr-exam-card, .pattern-exam-card) h3 { margin: .35rem 0; font-size: 1.1rem; }
.pattern-view :is(.pr-exam-card, .pattern-exam-card) p { flex: 1; margin: 0; color: var(--pr-muted); font-size: .82rem; }
.pattern-view :is(.pr-exam-meta, .pattern-exam-meta) { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin-block: .75rem; color: var(--pr-muted); font-size: .72rem; }

.pattern-view :is(.pr-exam-toolbar, .pattern-exam-toolbar) {
  position: sticky;
  z-index: 20;
  top: 76px;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--pr-surface) 94%, transparent);
  border: 1px solid var(--pr-border);
  border-radius: 15px;
  box-shadow: var(--pr-shadow-sm);
  backdrop-filter: blur(14px);
}

.pattern-view :is(.pr-timer, .pattern-timer) { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; padding: .45rem .7rem; color: var(--pr-primary-strong); background: var(--pr-primary-soft); border: 1px solid color-mix(in srgb, var(--pr-primary) 28%, var(--pr-border)); border-radius: 11px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 1rem; font-weight: 850; }
.pattern-view :is(.pr-timer, .pattern-timer).is-warning { color: var(--pr-amber-strong); background: var(--pr-amber-soft); border-color: var(--pr-amber); }
.pattern-view :is(.pr-timer, .pattern-timer).is-critical { color: var(--pr-danger); background: var(--pr-danger-soft); border-color: var(--pr-danger); }

.pattern-view :is(.pr-exam-result, .pattern-exam-result) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: clamp(1rem, 3vw, 1.6rem); background: linear-gradient(145deg, var(--pr-primary-soft), var(--pr-surface), var(--pr-cyan-soft)); border: 1px solid var(--pr-border); border-radius: 20px; }
.pattern-view :is(.pr-result-mark, .pattern-result-mark) { display: grid; width: 96px; aspect-ratio: 1; place-items: center; color: #fff; background: var(--pr-primary-strong); border-radius: 26px; font-size: 1.55rem; font-weight: 900; }
[data-theme="dark"] .pattern-view :is(.pr-result-mark, .pattern-result-mark) { color: #24214b; }

/* Formula sheet, glossary, coverage, prompt, and empty states */
.pattern-view :is(.pr-formula-sheet, .pattern-formula-sheet) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.pattern-view :is(.pr-glossary-grid, .pattern-glossary-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pattern-view :is(.pr-glossary-item, .pattern-glossary-item) { min-width: 0; padding: .8rem; background: var(--pr-surface); border: 1px solid var(--pr-border); border-radius: 13px; }
.pattern-view :is(.pr-glossary-item, .pattern-glossary-item) dt { color: var(--pr-primary-strong); font-weight: 850; }
.pattern-view :is(.pr-glossary-item, .pattern-glossary-item) dd { margin: .2rem 0 0; color: var(--pr-muted); font-size: .8rem; }

.pattern-view :is(.pr-prompt, .pattern-prompt) { min-width: 0; padding: 1rem; background: #15182b; border: 1px solid #343b62; border-radius: 16px; box-shadow: var(--pr-shadow-sm); }
.pattern-view :is(.pr-prompt, .pattern-prompt) pre { max-width: 100%; max-height: 68vh; overflow: auto; margin: 0; color: #e4e8ff; font-family: "Cascadia Mono", Consolas, monospace; font-size: .78rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }

.pattern-view :is(.pr-empty, .pattern-empty, .pr-empty-state, .pattern-empty-state) { display: grid; min-height: 220px; place-items: center; padding: 2rem 1rem; color: var(--pr-muted); background: var(--pr-surface); border: 1px dashed var(--pr-border-strong); border-radius: 18px; text-align: center; }
.pattern-view :is(.pr-empty, .pattern-empty, .pr-empty-state, .pattern-empty-state) h2,
.pattern-view :is(.pr-empty, .pattern-empty, .pr-empty-state, .pattern-empty-state) h3 { margin: 0; }
.pattern-view :is(.pr-empty, .pattern-empty, .pr-empty-state, .pattern-empty-state) p { max-width: 52ch; margin: .4rem auto 0; }

.pattern-view :is(.pr-pager, .pattern-pager) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .65rem; align-items: center; margin-top: 1rem; }
.pattern-view :is(.pr-pager, .pattern-pager) > :last-child { justify-self: end; }
.pattern-view :is(.pr-pager, .pattern-pager) > span { color: var(--pr-muted); font-size: .75rem; text-align: center; }

/* Kept after component rules so the scope treatment remains visible on every
   supported card type, including details, formulas, and quiz questions. */
.pattern-view .pr-out-of-exam {
  color: var(--pr-text);
  background: color-mix(in srgb, var(--pr-danger-soft) 64%, var(--pr-surface));
  border-color: color-mix(in srgb, var(--pr-danger) 45%, var(--pr-border));
  border-inline-start: 5px solid var(--pr-danger);
  box-shadow: inset 5px 0 0 color-mix(in srgb, var(--pr-danger) 18%, transparent), var(--pr-shadow-sm);
}

.pattern-view .pr-out-of-exam:is(a, button):hover {
  border-color: var(--pr-danger);
  box-shadow: inset 5px 0 0 color-mix(in srgb, var(--pr-danger) 18%, transparent), var(--pr-shadow-md);
}

.pattern-view .pr-out-of-exam > .pr-scope-badge { margin-block-end: .45rem; }

/* Responsive layouts */
@media (max-width: 1100px) {
  .pattern-view :is(.pr-lesson-grid, .pattern-lesson-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pattern-view :is(.pr-exam-grid, .pattern-exam-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pattern-view :is(.pr-hero, .pattern-hero) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-hero-meter, .pattern-hero-meter) { justify-self: stretch; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
  .pattern-view :is(.pr-hero-meter, .pattern-hero-meter) small { margin-top: 0; text-align: left; }
  .pattern-view :is(.pr-content-grid, .pattern-content-grid) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-content-aside, .pattern-content-aside) { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body.pattern-active { padding-bottom: 0; }
  body.pattern-active main { padding: 1rem; }
  .pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav),
  .pattern-view :is(.pr-exam-toolbar, .pattern-exam-toolbar) { top: 68px; }
  .pattern-view :is(.pr-tabs, .pattern-tabs) { top: 121px; }
  .pattern-view :is(.pr-stats, .pattern-stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .pattern-view { font-size: 16px; }
  .pattern-view :is(.pr-hero, .pattern-hero) { padding: 1.3rem; border-radius: 22px; }
  .pattern-view :is(.pr-hero, .pattern-hero) h1 { font-size: clamp(1.9rem, 10vw, 2.7rem); }
  .pattern-view :is(.pr-hero-meter, .pattern-hero-meter) { grid-template-columns: 1fr; }
  .pattern-view :is(.pr-meter-value, .pattern-meter-value) { width: 126px; }
  .pattern-view :is(.pr-hero-meter, .pattern-hero-meter) small { text-align: center; }
  .pattern-view :is(.pr-section-heading, .pattern-section-heading) { align-items: flex-start; flex-direction: column; }
  .pattern-view :is(.pr-day-grid, .pattern-day-grid, .pr-plan-grid, .pattern-plan-grid),
  .pattern-view :is(.pr-lesson-grid, .pattern-lesson-grid),
  .pattern-view :is(.pr-concept-grid, .pattern-concept-grid, .pr-example-grid, .pattern-example-grid),
  .pattern-view :is(.pr-flashcard-grid, .pattern-flashcard-grid),
  .pattern-view :is(.pr-lab-grid, .pattern-lab-grid),
  .pattern-view :is(.pr-exam-grid, .pattern-exam-grid),
  .pattern-view :is(.pr-formula-sheet, .pattern-formula-sheet),
  .pattern-view :is(.pr-glossary-grid, .pattern-glossary-grid) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-lesson-card, .pattern-lesson-card) { min-height: 0; }
  .pattern-view :is(.pr-lesson-header, .pattern-lesson-header) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-content-aside, .pattern-content-aside) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-lab-fields, .pattern-lab-fields) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-quiz-summary, .pattern-quiz-summary) { grid-template-columns: auto minmax(0, 1fr); }
  .pattern-view :is(.pr-quiz-summary, .pattern-quiz-summary) > :last-child { grid-column: 1 / -1; width: 100%; }
  .pattern-view :is(.pr-exam-result, .pattern-exam-result) { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .pattern-view :is(.pr-result-mark, .pattern-result-mark) { justify-self: center; }
  .pattern-view :is(.pr-exam-toolbar, .pattern-exam-toolbar) { position: static; align-items: stretch; flex-direction: column; }
  .pattern-view :is(.pr-exam-toolbar, .pattern-exam-toolbar) > * { max-width: 100%; }
}

@media (max-width: 480px) {
  body.pattern-active main { padding: .75rem; }
  .pattern-view :is(.pr-shell, .pattern-shell) { gap: .85rem; }
  .pattern-view :is(.pr-hero, .pattern-hero) { padding: 1.05rem; border-radius: 19px; }
  .pattern-view :is(.pr-kicker, .pattern-kicker) { letter-spacing: .04em; }
  .pattern-view :is(.pr-hero-actions, .pattern-hero-actions, .pr-actions, .pattern-actions) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-hero-actions, .pattern-hero-actions, .pr-actions, .pattern-actions) > :is(button, a) { width: 100%; }
  .pattern-view :is(.pr-stats, .pattern-stats) { gap: .55rem; }
  .pattern-view :is(.pr-stat, .pattern-stat) { padding: .75rem; }
  .pattern-view :is(.pr-panel, .pattern-panel, .pr-card, .pattern-card),
  .pattern-view :is(.pr-quiz-card, .pattern-quiz-card, .pr-question-card, .pattern-question-card, .pr-review-card, .pattern-review-card) { padding: .85rem; border-radius: 14px; }
  .pattern-view :is(.pr-day-card, .pattern-day-card) { grid-template-columns: 42px minmax(0, 1fr); gap: .65rem; padding: .8rem; }
  .pattern-view :is(.pr-day-number, .pattern-day-number) { width: 42px; height: 42px; border-radius: 12px; font-size: .72rem; }
  .pattern-view :is(.pr-day-card, .pattern-day-card)::after { left: 20px; }
  .pattern-view :is(.pr-option, .pattern-option) { grid-template-columns: auto minmax(0, 1fr); }
  .pattern-view :is(.pr-option, .pattern-option)::after { grid-column: 2; justify-self: start; }
  .pattern-view :is(.pr-pager, .pattern-pager) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-pager, .pattern-pager) > :last-child { justify-self: stretch; }
  .pattern-view :is(.pr-pager, .pattern-pager) > :is(button, a) { width: 100%; }
  .pattern-view .pr-scope-note { padding: .75rem; }
  .pattern-view .pr-scope-note-head { align-items: flex-start; }
  .pattern-view .pr-scope-badge { width: fit-content; white-space: normal; overflow-wrap: anywhere; }
  .pattern-view .pr-out-of-exam { border-inline-start-width: 4px; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--pr-danger) 18%, transparent), var(--pr-shadow-sm); }
}

@media (max-width: 390px) {
  .pattern-view :is(.pr-stats, .pattern-stats) { grid-template-columns: minmax(0, 1fr); }
  .pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav) { margin-inline: -.2rem; border-radius: 12px; }
  .pattern-view :is(.pr-question-head, .pattern-question-head) { grid-template-columns: 34px minmax(0, 1fr); gap: .55rem; }
  .pattern-view :is(.pr-question-number, .pattern-question-number) { width: 34px; height: 34px; }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body.pattern-active main { padding: .65rem 1rem; }
  .pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav),
  .pattern-view :is(.pr-exam-toolbar, .pattern-exam-toolbar) { top: 56px; }
  .pattern-view :is(.pr-tabs, .pattern-tabs) { top: 109px; }
  .pattern-view :is(.pr-hero, .pattern-hero) { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .55fr); padding: 1rem 1.25rem; }
  .pattern-view :is(.pr-hero, .pattern-hero) h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-view *,
  .pattern-view *::before,
  .pattern-view *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Formula-sheet print mode. The app adds .pattern-print-formulas before print. */
@media print {
  body.pattern-active { padding: 0; color: #111827; background: #ffffff; }
  body.pattern-active .topbar,
  body.pattern-active .course-sidebar,
  body.pattern-active .mobile-lesson-bar,
  body.pattern-active .toast,
  body.pattern-active .pattern-view :is(.pr-internal-nav, .pattern-internal-nav, .pr-nav, .pattern-nav),
  body.pattern-active .pattern-view :is(.pr-tabs, .pattern-tabs),
  body.pattern-active .pattern-view :is(.pr-actions, .pattern-actions),
  body.pattern-active .pattern-view button { display: none !important; }
  body.pattern-active .app-shell,
  body.pattern-active main { display: block; width: 100%; padding: 0; }
  body.pattern-active .pattern-view { width: 100%; margin: 0; color: #111827; }
  body.pattern-active .pattern-view :is(.pr-panel, .pattern-panel, .pr-card, .pattern-card, .pr-formula-card, .pattern-formula-card) { color: #111827; background: #ffffff; border-color: #cbd5e1; box-shadow: none; break-inside: avoid; }
  body.pattern-active .pattern-view :is(.pr-formula, .pattern-formula, .math, [data-math]) { color: #111827; overflow: visible; font-size: 9.5pt; }
  body.pattern-active .pattern-view :is(.pr-scope-note, .pr-out-of-exam) { color: #111827; background: #ffffff; border: 2px solid #111827; box-shadow: none; break-inside: avoid; }
  body.pattern-active .pattern-view .pr-scope-badge { color: #111827; background: #ffffff; border-color: #111827; }
  body.pattern-active.pattern-print-formulas .pattern-view > :not(.pr-formula-page):not(.pattern-formula-page),
  body.pattern-active.pattern-print-formulas .pattern-view :is(.pr-formula-page, .pattern-formula-page) > :not(.pr-formula-sheet):not(.pattern-formula-sheet):not(.pr-section-heading):not(.pattern-section-heading) { display: none !important; }
  body.pattern-active .pattern-view :is(.pr-formula-sheet, .pattern-formula-sheet) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7mm; }
  body.pattern-active .pattern-view a { color: #111827; text-decoration: none; }
  @page { size: A4; margin: 11mm; }
}