/* A1 lesson layout refinements; scoped to the lesson workspace only. */
body.lesson-layout-active { overflow-x: hidden; }
body.lesson-layout-active #subjectStudyContent {
  width: 100%; max-width: 1500px; margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: clamp(14px, 1.8vw, 24px); align-items: start;
}
body.lesson-layout-active #lessonLayoutMain { width: 100%; min-width: 0; font-family: inherit; }
body.lesson-layout-active #lessonLayoutMain .sectionhead {
  align-items: center; gap: 12px; margin: 0 0 14px; padding: 2px 0;
}
body.lesson-layout-active #lessonLayoutMain .sectionhead h2 {
  margin: 0; font-size: clamp(21px, 2vw, 27px); line-height: 1.5; overflow-wrap: anywhere;
}
body.lesson-layout-active #lessonLayoutMain .sectionhead p { margin: 4px 0 0; line-height: 1.7; }
body.lesson-layout-active #lessonLayoutSidebar {
  width: 100%; min-width: 0; max-height: calc(100vh - 28px); border-radius: 18px;
  scrollbar-gutter: stable; overscroll-behavior: contain; transform: none !important;
}
body.lesson-layout-active #lessonLayoutSidebar:hover { transform: none !important; }
body.lesson-layout-active #lessonLayoutSidebar {
  background: #10243a !important; border-color: #294c68 !important; color: #edf6fc !important;
}
body.lesson-layout-active #lessonLayoutSidebar > summary {
  background: #10243a !important; border-bottom-color: #294c68; color: #edf6fc;
}
body.lesson-layout-active #lessonLayoutSidebar > summary {
  min-height: 72px; padding: 15px 17px; border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0; font-family: inherit; line-height: 1.5;
}
body.lesson-layout-active #lessonLayoutSidebar > summary b { font-size: 16px; font-weight: 700; }
body.lesson-layout-active #lessonLayoutSidebar > summary small { font-size: 13px; line-height: 1.5; }
body.lesson-layout-active #lessonLayoutSidebar .lesson-layout-count { font-size: 13px; font-weight: 700; }
body.lesson-layout-active .lesson-layout-items { gap: 7px; padding: 10px 11px 12px; }
body.lesson-layout-active .lesson-layout-item {
  width: 100%; min-height: 64px; padding: 9px 11px;
  grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 9px; border-radius: 13px;
  font-family: inherit; line-height: 1.45; touch-action: manipulation;
}
body.lesson-layout-active .lesson-layout-item:hover { transform: translateY(-1px); }
body.lesson-layout-active .lesson-layout-item:active { transform: scale(.99); }
body.lesson-layout-active .lesson-layout-ordinal { width: 32px; height: 32px; font-size: 13px; }
body.lesson-layout-active .lesson-layout-copy { gap: 3px; }
body.lesson-layout-active .lesson-layout-copy b { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
body.lesson-layout-active .lesson-layout-status { font-size: 12px; line-height: 1.45; }
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px;
}
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button {
  min-width: 0; min-height: 58px; padding: 9px 10px; border-radius: 13px;
  font-family: inherit; font-size: clamp(13px, 1vw, 15px); font-weight: 600;
  line-height: 1.5; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button:hover { transform: translateY(-1px); }
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button:active { transform: scale(.985); }
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button.is-active {
  font-weight: 700; box-shadow: 0 3px 10px rgba(18, 96, 123, .12);
}
body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button:focus-visible,
body.lesson-layout-active #lessonLayoutSidebar .lesson-layout-item:focus-visible,
body.lesson-layout-active #lessonLayoutSidebar > summary:focus-visible {
  outline: 3px solid #168fc0; outline-offset: 3px;
}
body.lesson-layout-active #lessonLayoutMain #sectionContent { width: 100%; min-width: 0; margin: 0; }
body.lesson-layout-active #lessonLayoutMain #sectionContent > .card,
body.lesson-layout-active #lessonLayoutMain #sectionContent > .examsetup,
body.lesson-layout-active #lessonLayoutMain #sectionContent > .examresults {
  width: 100%; max-width: none; margin-inline: 0;
}
body.lesson-layout-active #lessonLayoutMain #sectionContent .contentgrid,
body.lesson-layout-active #lessonLayoutMain #sectionContent .exam-layout {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); gap: 14px; align-items: start;
}
body.lesson-layout-active #lessonLayoutMain #sectionContent .card {
  min-width: 0; padding: clamp(16px, 1.8vw, 23px); border-radius: 17px; transform: none;
}
body.lesson-layout-active #lessonLayoutMain #sectionContent .card:hover { transform: none; }
body.lesson-layout-active #lessonLayoutMain #sectionContent h2,
body.lesson-layout-active #lessonLayoutMain #sectionContent h3,
body.lesson-layout-active #lessonLayoutMain #sectionContent h4 {
  line-height: 1.55; overflow-wrap: anywhere;
}
body.lesson-layout-active #lessonLayoutMain #sectionContent p { line-height: 1.8; overflow-wrap: anywhere; }
body.lesson-layout-active .video-player-panel { width: 100%; max-width: 1100px; margin-inline: auto; }
body.lesson-layout-active .video-shell { width: 100%; aspect-ratio: 16 / 9; }
body.lesson-layout-active .lesson-layout-empty {
  min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 24px;
}
body.lesson-layout-active .lesson-layout-empty h3 { font-size: 19px; line-height: 1.6; }
body.lesson-layout-active .lesson-layout-empty p { max-width: 52ch; line-height: 1.8; }
body.lesson-layout-active .lesson-layout-unavailable {
  min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 5px;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutSidebar,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .card,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .examsetup,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .examresults,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #lessonLayoutEmpty {
  background: #10243a !important; border-color: #294c68 !important; color: #edf6fc !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutSidebar > summary {
  background: #10243a !important; border-bottom-color: #294c68; color: #edf6fc;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutSidebar > summary small,
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-status { color: #c4d5e1 !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent p { color: #c8d9e5; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutSidebar,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .card,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .examsetup,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent > .examresults,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #lessonLayoutEmpty {
  background: #f5f8fc !important; border-color: #c8d8e4 !important; color: #19334f !important;
  box-shadow: 0 7px 20px rgba(27, 65, 91, .08);
}
html[data-theme="light"] body.lesson-layout-active #lessonLayoutSidebar > summary {
  background: #f5f8fc !important; border-bottom-color: #c8d8e4; color: #19334f;
}
html[data-theme="light"] body.lesson-layout-active #lessonLayoutSidebar > summary small,
html[data-theme="light"] body.lesson-layout-active .lesson-layout-status { color: #4e667b !important; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent p { color: #405c70; }
@media (max-width: 1120px) {
  body.lesson-layout-active #lessonLayoutMain #sectionContent .contentgrid,
  body.lesson-layout-active #lessonLayoutMain #sectionContent .exam-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body.lesson-layout-active #subjectStudyContent { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); gap: 14px; }
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.lesson-layout-active #subjectStudyContent { gap: 12px; padding-top: 0; }
  body.lesson-layout-active #lessonLayoutSidebar { max-height: none; position: static; border-radius: 15px; }
  body.lesson-layout-active #lessonLayoutSidebar > summary { min-height: 64px; border-radius: 14px; padding: 12px 14px; }
  body.lesson-layout-active .lesson-layout-items { padding: 9px; }
  body.lesson-layout-active .lesson-layout-item { min-height: 60px; }
  body.lesson-layout-active #lessonLayoutMain .sectionhead { align-items: flex-start; flex-direction: row; }
  body.lesson-layout-active #lessonLayoutMain .sectionhead h2 { font-size: 22px; }
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button { min-height: 58px; font-size: 14px; }
  body.lesson-layout-active #lessonLayoutMain #sectionContent .card { padding: 17px; }
  body.lesson-layout-active .lesson-layout-empty { min-height: 160px; padding: 20px; }
}
@media (max-width: 420px) {
  body.lesson-layout-active #lessonLayoutMain .sectionhead { flex-direction: column; align-items: stretch; }
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button { min-height: 62px; padding: 8px 7px; font-size: 13px; }
  body.lesson-layout-active .lesson-layout-copy b { font-size: 14px; }
  body.lesson-layout-active .lesson-layout-status { font-size: 11px; }
}
@media (max-width: 359px) {
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs { grid-template-columns: 1fr; }
  body.lesson-layout-active #lessonLayoutMain #lessonLayoutTabs button { min-height: 48px; }
}


/* Keep the sidebar header legible in the default dark palette and reveal the existing empty state. */
body.lesson-layout-active #lessonLayoutSidebar { background: #10243a !important; border-color: #294c68 !important; color: #edf6fc !important; }
body.lesson-layout-active #lessonLayoutSidebar > summary { background: #10243a !important; border-bottom-color: #294c68; color: #edf6fc; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutSidebar { background: #f5f8fc !important; border-color: #c8d8e4 !important; color: #19334f !important; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutSidebar > summary { background: #f5f8fc !important; border-bottom-color: #c8d8e4; color: #19334f; }
body.lesson-layout-active #lessonLayoutMain:has(#sectionContent[hidden]) #lessonLayoutEmpty { display: grid !important; }
body.lesson-layout-active #lessonLayoutMain:has(#sectionContent:not([hidden])) #lessonLayoutEmpty { display: none !important; }

/* Visible prompt while no lesson is selected (tabs stay hidden in this state). */
body.lesson-layout-active #lessonLayoutMain:has(#lessonLayoutTabs[hidden])::after {
  content: "اختر درسًا من القائمة لبدء التعلم\A ستظهر هنا فيديوهات الدرس وتدريباته واختباره بعد اختياره.";
  display: grid; place-content: center; min-height: 190px; margin-top: 14px; padding: 24px;
  border: 1px solid #294c68; border-radius: 17px; background: #10243a; color: #c8d9e5;
  text-align: center; white-space: pre-line; line-height: 1.9; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain:has(#lessonLayoutTabs[hidden])::after {
  border-color: #c8d8e4; background: #f5f8fc; color: #405c70; box-shadow: 0 7px 20px rgba(27, 65, 91, .08);
}

/* Keep saved attempt history consistent with both themes. */
body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory,
body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview,
body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat,
body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem { border-radius: 14px; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem {
  background: #f5f8fc !important; border-color: #c8d8e4 !important; color: #19334f !important;
}
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory h3,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem b { color: #19334f !important; }
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory > p,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem small,
html[data-theme="light"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview p { color: #405c70 !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem {
  background: #10243a !important; border-color: #294c68 !important; color: #edf6fc !important;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory h3,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem b { color: #edf6fc !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory > p,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem small,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview p { color: #c8d9e5 !important; }

/* A1 results and error review — night palette only. */
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review { gap: 14px; }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review > header,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examresults,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory {
  background: #0d1b30 !important; border: 1px solid #31516d !important; color: #edf6fc !important;
  border-radius: 17px; box-shadow: 0 9px 24px rgba(0,0,0,.2);
}
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review > header { padding: 20px; }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review h3,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory h3,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examresults h2,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examresults h3 { color: #f2f8ff !important; }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review p,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory > p,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examresults > p { color: #c7d8e5 !important; }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review-errors {
  min-height: 44px; padding: 10px 17px; border: 1px solid #36c7c2; border-radius: 11px;
  background: #167f87 !important; color: #f3ffff !important; font: inherit; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: background-color .16s, transform .16s, box-shadow .16s;
}
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review-errors:hover { background: #199ba0 !important; transform: translateY(-1px); }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review-errors:active { transform: scale(.985); }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-review-errors:focus-visible,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory button:focus-visible,
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay button:focus-visible,
html[data-theme="dark"] body.lesson-layout-active .mistakefilter select:focus-visible { outline: 3px solid #62e1df; outline-offset: 3px; }
html[data-theme="dark"] body.lesson-layout-active .lesson-layout-history:empty:after,
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examhistory:empty:after {
  display: block; margin-top: 10px; padding: 16px 18px; border: 1px dashed #52718b; border-radius: 13px;
  background: #10243a; color: #d0deea !important; line-height: 1.8;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem {
  grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-top: 10px; padding: 14px;
  background: #10243a !important; border: 1px solid #365773 !important; border-radius: 13px; color: #edf6fc !important;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem b { color: #f1f7fc !important; line-height: 1.55; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem small { color: #c4d4e0 !important; line-height: 1.6; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyscore { color: #ffe080 !important; font-size: 21px; font-weight: 800; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem button {
  min-height: 40px; padding: 8px 12px; border: 1px solid #378ba0; border-radius: 10px;
  background: #173c53 !important; color: #eaf8ff !important; font: inherit; font-weight: 700;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem button:hover { background: #1b5367 !important; border-color: #5cc9d3; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstats { gap: 10px; margin: 16px 0; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat {
  padding: 15px; border: 1px solid #365773 !important; border-radius: 13px;
  background: #10243a !important; color: #edf6fc !important; text-align: center;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat small { color: #c4d4e0 !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examstat b { color: #63dfd4 !important; font-size: 25px; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examavailability {
  padding: 12px 14px; border: 1px solid #365773; border-radius: 12px;
  background: #10243a !important; color: #d3e2ed !important; line-height: 1.8;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview {
  margin-top: 12px; padding: 16px; border: 1px solid #365773 !important;
  background: #10243a !important; color: #edf6fc !important; border-radius: 14px;
}
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview h4 { color: #f2f8ff !important; line-height: 1.7; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview p { color: #cbdbe7 !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview.correct { border-inline-start: 4px solid #58d9a8 !important; background: #102d32 !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview.wrong { border-inline-start: 4px solid #ff938c !important; background: #30212e !important; }
html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .examreview.unanswered { border-inline-start: 4px solid #f4cf69 !important; background: #302b20 !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakemodal {
  background: #0d1b30 !important; border-color: #31516d !important; color: #edf6fc !important;
}
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakehead h2 { color: #f2f8ff !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem,
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .empty-mistakes {
  background: #10243a !important; border-color: #365773 !important; color: #d5e2ec !important;
}
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem h3 { color: #f2f8ff !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem p { color: #cbdbe7 !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem .answerlabel { color: #ffe080 !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakefilter { background: #0d1b30 !important; border-color: #365773 !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakefilter label,
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakefilter .filtercount { color: #d5e2ec !important; }
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakefilter select {
  background: #10243a !important; border-color: #52718b !important; color: #f1f7fc !important;
}
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem button,
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .closemistakes {
  min-height: 40px; background: #173c53 !important; border-color: #378ba0 !important; color: #eaf8ff !important;
}
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .mistakeitem button:hover,
html[data-theme="dark"] body.lesson-layout-active .mistakeoverlay.show .closemistakes:hover { background: #1b5367 !important; }
@media (max-width: 520px) {
  html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem { grid-template-columns: minmax(0,1fr); }
  html[data-theme="dark"] body.lesson-layout-active #lessonLayoutMain #sectionContent .historyitem button { justify-self: start; }
}