:root{
	--img-scale:1;  /* for resizing images when LC_img_resize class is used*/

	/* Themeable palette. Every colour a lesson renders is read from one of these tokens so
	   the admin CSS-workbench variables panel can drive the theme from a single place and the
	   dark-mode block below only has to override the tokens, not every rule. The values here are
	   the LIGHT defaults (what lessons have always looked like); the .dark override block near the
	   bottom of this file redefines the same tokens for dark backgrounds. */
	--lc-bg: #ffffff;             /* lesson page/content background */
	--lc-text: #1f2937;           /* default body text */
	--lc-inline-code-bg: #fafafa; /* .code-inline background */
	--lc-inline-code-fg: #336699; /* .code-inline text */
	--lc-inline-code-border: #dddddd;
	--lc-table-head-bg: #eef2ff;  /* th background */
	--lc-table-head-fg: navy;     /* th text */
	--lc-table-border: #dddddd;   /* td/th borders */
	--lc-h2-fg: #005099;
	--lc-h2-bg: #f5f7fc;
	--lc-h2-border: #cde;
	--lc-h3-fg: #002090;
	--lc-h4-fg: #0080a0;
	--lc-terminology-fg: #800080;
	--lc-muted-fg: #444444;       /* the darker greys (LC-color9) that vanish on dark bg */
	--lc-faint-fg: #777777;       /* the light greys (LC-color6) that vanish on light bg */

	/* Stored-HTML code blocks (.code-block-syntax / -pseudo) authored with light backgrounds. These
	   are hand-written lesson HTML (NOT the CM6 viewers, which follow the page theme in JS), so on a
	   dark card their pale panels became bright islands; token them so the dark block can recolour them.
	   The -example / -output blocks are already dark (#333) and read fine on both themes, so they stay
	   hard-coded. */
	--lc-code-syntax-bg: #F6FFF6;
	--lc-code-syntax-fg: #003366;
	--lc-code-syntax-border: #33CC33;
	--lc-code-pseudo-bg: #E9E9E9;
	--lc-code-pseudo-fg: #0070C0;
	--lc-code-pseudo-border: #808080;
}

body{
	font-family: Calibri;
	line-height:150%;
}

/* Lesson body background/text. Scoped to `.lesson-content` (NOT the global `body`): this stylesheet is
   injected app-wide on the lesson route, so a `body{ background }` here painted the whole app shell —
   and because the token defaulted to white, it overrode the app's own `dark:bg-zinc-900` body and left
   the page white in dark mode. Scoping it to the lesson wrapper keeps the app shell's Tailwind
   background intact; the `.dark .lesson-content` override below still recolours the lesson body itself. */
.lesson-content{
	background-color: var(--lc-bg);
	color: var(--lc-text);
}

img {
  margin:0.7rem  
  
/*below is old styling - was used for scaling image based on its size, but it left large white margin around it*/
/*use --img-scale=1 by default, otherwise use the value passed from html. To pass value, use <img style="--img-scale:0.5" */

/*    -moz-transform: scale(var(--img-scale)); /* FF3.5+ */
/*    -ms-transform: scale(var(--img-scale)); /* IE9 */
/*    -o-transform: scale(var(--img-scale)); /* Opera 10.5+ */
/*    -webkit-transform:scale(var(--img-scale));
/*    transform: scale(var(--img-scale)); /* IE6–IE9 */
/*    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
	/*margin: calc(12% * (var(--img-scale) - 1) );	/*scaling happens after rendering the img, so we need to remove white space*/
}



/* CODE */
.code-inline {
	border: .05em solid var(--lc-inline-code-border);
	border-radius: .3em;
	font-family: Consolas;
	padding: 0 .2em 0 .2em;
	background-color: var(--lc-inline-code-bg);
	color: var(--lc-inline-code-fg);
	font-size: 90%;
}
.code-block-syntax{
	border-radius: .4em;
	padding: .5em;
	/* margin: .7em 3em .7em 3em; */
	font-family: Consolas;
	color: var(--lc-code-syntax-fg);
	background-color: var(--lc-code-syntax-bg);
	border: 1px dashed var(--lc-code-syntax-border);
	display: block;	/*try inline-block*/
    width: fit-content;
    max-width:100%;
	}
.code-block-pseudo{
	border-radius:.4em;
	padding: .5em;
	/*margin: .7em 2.2em 2.2em 3em;*/
	display: inline-block;
	font-family: consolas;
	color: var(--lc-code-pseudo-fg);
	background-color: var(--lc-code-pseudo-bg);
	border:1px var(--lc-code-pseudo-border) solid

}
.code-block-example{
	border-radius: .4em;
	padding: .5em;
	/*margin: .7em 3em .7em 3em;*/
	font-family: Consolas;
	color: #aaeeff;
	background-color: #333333;
	border: 1px solid #00FFFF;
	display: block;	/*try inline-block*/
    width: fit-content;
    max-width:100%;
}
.inline-block{
	display: inline-block;
}
.code-block-output{
	border-radius: .6em;
	padding: .7em;
	/*margin: .7em 3em .7em 3em;*/
	font-family: Consolas;
	color: #ffffff;
	background-color: #333;
	border: 1px solid #FF9900;
	display: block;	/*try inline-block*/
    width:fit-content;
    max-width:100%;
}
ol.code-block-example{
	padding: .7em .7em .7em 3.5em;
	list-style-type: decimal;
}

 
/*EnlighterJS*/
.enlighter-v-standard{	
	/*margin:auto	;*/	/* uncomment to center code*/
	padding:1em; 
	border-radius:.6em; 
}
/* color of comments */
.enlighter-t-monokai .enlighter-c0,
.enlighter-t-monokai .enlighter-c1{  
  color: #79c34f;
}
/* hidding some buttons, chaning their background image (broken) */
.enlighter-default .enlighter-btn {
  background-color: #444;
}
.enlighter-default .enlighter-toolbar .enlighter-btn-raw,
.enlighter-default .enlighter-toolbar .enlighter-btn-copy {
  background-image: none;
}
.enlighter-default .enlighter-toolbar .enlighter-btn-website,
.enlighter-default .enlighter-toolbar .enlighter-btn-window,
.enlighter-btn.enlighter-btn-collapse {
  display: none;
}

/*Monaco Editor HACK - !!! remove after configuring style in source code */
/*
.margin-view-overlays, .block-body {
  background-color: #e5f5ff;
}
.monaco-editor.no-user-select .lines-content, 
.monaco-editor.no-user-select .view-line, 
.monaco-editor.no-user-select .view-lines {
  font-size: 1.1em;
  padding-left: 0.3em;
}
.minimap-decorations-layer {
  display: none;
  background-color: #e5f5ff;
}
.monaco-editor .minimap-slider, .monaco-editor 
.minimap-slider .minimap-slider-horizontal {
  background: rgba(92, 227, 241, 0.2) !important;
}
.monaco-editor .minimap-slider:hover, 
.monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
  background: rgba(147, 255, 189, 0.2) !important;
}
.monaco-editor .minimap-slider:active, 
.monaco-editor .minimap-slider:active .minimap-slider-horizontal {
  background: rgba(255, 147, 147, 0.2) !important;
}
*/


/*COLORS*/
.LC-color1 {
	color: #FF66FF;
}
.LC-color2 {
	color: #FF7700;
}
.LC-color3 {
	color: #7030A0;
}
.LC-color4 {
	color: #00BB00;
}
.LC-color5 {
	color: #00FFFF;
}
.LC-color6 {
	color: var(--lc-faint-fg);
}
.LC-color7 {
	color: #f00;
}
.LC-color8 {
	color: yellow;
}
.LC-color9 {
	color: var(--lc-muted-fg);
}

.LC-example {
	padding: 0.8em 0em 0em 0em;
	font-size: 1em;
	color: #e80;
	font-weight: bold;
}

h2 {
    text-align: center;
	padding: .5em 0em .5em 0em;
	font-size: 1.8em;
	color: var(--lc-h2-fg);
    background: var(--lc-h2-bg);
    border-top: none; /*2px solid var(--lc-h2-border);*/
    border-bottom: 2px solid var(--lc-h2-border);
}
h2 + * {
    padding-top: 1em;
}

h3{
	padding: 1em 0em 0em 0em;
	font-size: 1.2em;
	color: var(--lc-h3-fg);
	font-weight: bold;
}
h4{
	font-size: 1.2em;
	color: var(--lc-h4-fg);
	padding-top: .7em;
	padding-right: 0em;
	padding-left: 0em;
}

/*fractions*/
.LC_frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.LC_frac > span {
    display: block;
    padding: 0.1em;
}
.LC_frac span.symbol {
    display: none;
} 
.LC_frac span.bottom {
	/* The fraction bar. `currentColor` (not the hard-coded black it used to be) so the rule follows the
	   surrounding text: on the dark theme a black bar was a near-invisible dark line across the
	   equation (reported on the BMI formula in lesson 12's Quiz 1-B). No token needed -- a fraction bar
	   should always match the text it divides, in either theme. */
    border-top: thin solid currentColor;
}
 
/*tables*/
table{
	margin: auto;
	width: auto;
	/* Cap at the reading column: WYSIWYG table resizes bake inline pixel widths into the stored
	   HTML (e.g. style="width: 2894px"), which used to stretch the whole lesson page. max-width
	   beats an inline width, so such tables wrap to fit the column instead. */
	max-width: 100%;
	border-radius: .6em;
	border-collapse: collapse; /*no double borders*/

}
td, th {
	border: 1px solid var(--lc-table-border);
	padding: 8px;
	margin: 0.3em 0.5em 0.3em 0.5em;
	/*vertical-align:middle;*/
}
th {
    background: var(--lc-table-head-bg);
	color: var(--lc-table-head-fg);
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
}
tr {
	display: table-row;
}
table.LC_noborder, table.LC_noborder td, table.LC_noborder th{
	border: none;
}
table.LC_plain, table.LC_plain td, table.LC_plain th{
	background: transparent;
	border:1px gray solid;
} 

.terminology {
	color: var(--lc-terminology-fg);
	font-weight: bold;
	font-style: italic;
}
.center {
	margin: auto;
	max-width:1000px;
}

.TODO {
	color: #FF0000;
	background-color: #FFFF00;
}



table.quiz {
	background-color:#eee
}
table.quiz th, table.quiz td{
	border: thin lightgray solid
}
table.quiz th:first-child{
	background-color:red; 
	color:yellow;
}
table.quiz th, table.quiz td:first-child{
	background-color:gray;
	color:white;
	font-weight:bold
}


/* =====================================================================================
   DARK MODE
   -------------------------------------------------------------------------------------
   Lesson content is wrapped in `.lesson-content` (see the lesson player's <main>). We scope
   every dark rule under that wrapper so this globally-injected stylesheet can never recolour
   the surrounding admin/app chrome.

   ONE trigger, deliberately: `.dark .lesson-content`. The app's Flux theme toggle puts `.dark` on
   <html>, so this follows the in-app light/dark switch AND the workbench preview's own toggle.

   There used to be a second trigger, an `@media (prefers-color-scheme: dark)` fallback "for contexts
   with no `.dark` class". It was removed: every surface that renders lesson HTML lives inside a shell
   that manages `.dark` itself, so the media query only ever fired when the two DISAGREED — a reader
   whose OS is dark but who has the app in light mode got dark h2 banners and dark `.code-inline`
   chips stranded on a white page, while everything keyed to `.dark` (the card, the body text, the
   CodeMirror viewers) stayed light. The app toggle is the single source of truth; don't re-add an
   OS-level fallback here.

   Most rules just redefine the palette tokens; a few low-contrast greys and the plain-table
   borders/quiz table are fixed directly because they aren't token-driven.
   ===================================================================================== */

/* Token overrides: recolour the whole lesson by redefining the light defaults. */
.dark .lesson-content {
	--lc-bg: #18181b;             /* zinc-900, matches the app's dark body */
	--lc-text: #e5e7eb;
	--lc-inline-code-bg: #1f2430;
	--lc-inline-code-fg: #7fb0e6;
	--lc-inline-code-border: #3a4250;
	--lc-table-head-bg: #1e2a3a;
	--lc-table-head-fg: #cfe3ff;
	--lc-table-border: #3a4250;
	--lc-h2-fg: #7fb8ef;
	--lc-h2-bg: #12202f;
	--lc-h2-border: #24405c;
	--lc-h3-fg: #9ec2ff;
	--lc-h4-fg: #66c7dd;
	--lc-terminology-fg: #e29bff;
	--lc-muted-fg: #a1a1aa;       /* lift the dark grey so LC-color9 stays readable on dark */
	--lc-faint-fg: #6b7280;       /* dim the light grey so LC-color6 isn't glaring on dark */

	/* Recolour the light stored-HTML code panels to dark surfaces (kept green/blue accents so the
	   syntax vs pseudo distinction survives). */
	--lc-code-syntax-bg: #14210f;
	--lc-code-syntax-fg: #b7e6a0;
	--lc-code-syntax-border: #3d7a2e;
	--lc-code-pseudo-bg: #1f2430;
	--lc-code-pseudo-fg: #7fb0e6;
	--lc-code-pseudo-border: #3a4250;
}

/* The lesson body itself: the player's white card is what actually paints the background, so
   pin the wrapper to the dark background token and text colour too. */
.dark .lesson-content {
	background-color: var(--lc-bg);
	color: var(--lc-text);
}

/* Plain/no-border tables and the quiz table carry hard-coded light borders/greys; nudge them
   to sit correctly on a dark surface without changing their light appearance. */
.dark .lesson-content table.LC_plain,
.dark .lesson-content table.LC_plain td,
.dark .lesson-content table.LC_plain th{
	border-color:#4b5563;
}
.dark .lesson-content table.quiz{
	background-color:#27272a;
}
.dark .lesson-content table.quiz th,
.dark .lesson-content table.quiz td{
	border-color:#3f3f46;
}

/* .TODO is an intentionally loud red-on-yellow marker; keep it loud but legible on dark. */
.dark .lesson-content .TODO{
	color:#feeaca;
	background-color:#7f1d1d;
}

/* PASTED BLACK TEXT.
   A lot of stored lesson/quiz HTML was pasted in from Word/Docs/another editor and carries inline
   paste noise on every run: `color: rgb(0, 0, 0)` alongside `caret-color`, px font-sizes and
   `font-weight: 400`. An inline style beats our palette tokens, so those runs stayed BLACK on the dark
   surface and became unreadable (e.g. the "Important (Python): ..." note in lesson 12's case study).
   Nothing selected them, because the colour isn't coming from a class.

   We neutralise them in DARK MODE ONLY, and only when the element does not declare its own
   background: black text on an author-chosen highlight (a yellow `background-color` run, say) is
   deliberate and must keep its own contrast. Known limitation: a black run NESTED inside a
   highlighted parent is still flipped, since CSS can't see the ancestor's background here; that
   combination doesn't occur in the current content.

   `!important` is unavoidable (we're overriding an inline style) and is scoped as tightly as
   possible. The real fix is cleaning the paste noise out of the stored HTML: this rule only keeps it
   readable meanwhile, and can't restore the styling those spans trample (the lesson-12 note is an
   <h3> whose spans override colour, size AND weight, so it renders as body text either way).

   The `#000` spellings are matched with a trailing `;` or in full (`#000000`) on purpose: a bare
   `[style*="color: #000"]` would also match `color: #0000ff`. */
.dark .lesson-content [style*="color: rgb(0, 0, 0)"]:not([style*="background"]),
.dark .lesson-content [style*="color:rgb(0,0,0)"]:not([style*="background"]),
.dark .lesson-content [style*="color: #000;"]:not([style*="background"]),
.dark .lesson-content [style*="color:#000;"]:not([style*="background"]),
.dark .lesson-content [style*="color: #000000"]:not([style*="background"]),
.dark .lesson-content [style*="color:#000000"]:not([style*="background"]),
.dark .lesson-content [style*="color: black"]:not([style*="background"]),
.dark .lesson-content [style*="color:black"]:not([style*="background"]){
	color: var(--lc-text) !important;
}

/* INLINE HIGHLIGHTS (the mirror problem).
   The opposite case: a run that sets its own inline BACKGROUND but no colour. Authors highlighted text
   the way they would on paper -- yellow marker, pale-cyan callout box -- and let the text default to
   black, which is what a light page gives you. In dark mode the text inherits our light `--lc-text`
   instead, so the run rendered near-white on yellow (reported on the "For this exercise, the result
   must be displayed as a single word..." highlight in lesson 12's Quiz 1-B).

   Every inline background in the stored content is a LIGHT one -- surveyed across lesson_contents +
   quizzes: #cff pale cyan, near-whites (rgb(250,250,250), rgb(255,255,254), #fffffe), yellow
   rgb(255,255,0), #D3D3D3, rgb(240,240,240), gray -- so "has an inline background" reliably means "is
   a light island on the dark card", and its text has to go dark again.

   Deliberately NOT applied to descendants (`[style*="background"] *`): a nested run that carries its
   own colour keeps it, which is what we want -- black paste noise inside a highlight stays black (it
   is readable there, and that is the nested case the rule above admits it cannot judge), and authored
   accents such as .LC-color7 red inside a callout box survive. Only text with no colour of its own
   inherits this. If a DARK inline background is ever introduced in content, this rule needs revisiting. */
.dark .lesson-content [style*="background"]{
	color: #18181b !important;
}

/* LC-CONTRAST-GENERATED:BEGIN (regenerated from the Standard tokens on every publish; edits here are discarded) */
[data-lc-contrast='more'] .lesson-content {
	--lc-text: #1f2937;
	--lc-muted-fg: #444444;
	--lc-faint-fg: #6e6e6e;
	--lc-h3-fg: #002090;
	--lc-h4-fg: #0080a0;
	--lc-terminology-fg: #800080;
	--lc-inline-code-fg: #336699;
	--lc-table-head-fg: navy;
	--lc-h2-fg: #005099;
	--lc-code-syntax-fg: #003366;
	--lc-code-pseudo-fg: #0064ad;
	--lc-inline-code-border: #888888;
	--lc-table-border: #8b8b8b;
	--lc-h2-border: #8291a1;
	--lc-code-syntax-border: #00ab0d;
	--lc-code-pseudo-border: #808080;
}
.dark[data-lc-contrast='more'] .lesson-content {
	--lc-text: #e5e7eb;
	--lc-muted-fg: #a1a1aa;
	--lc-faint-fg: #79818f;
	--lc-h3-fg: #9ec2ff;
	--lc-h4-fg: #66c7dd;
	--lc-terminology-fg: #e29bff;
	--lc-inline-code-fg: #7fb0e6;
	--lc-table-head-fg: #cfe3ff;
	--lc-h2-fg: #7fb8ef;
	--lc-code-syntax-fg: #b7e6a0;
	--lc-code-pseudo-fg: #7fb0e6;
	--lc-inline-code-border: #656e7d;
	--lc-table-border: #5c6574;
	--lc-h2-border: #4e6c8a;
	--lc-code-syntax-border: #3d7a2e;
	--lc-code-pseudo-border: #656e7d;
}
[data-lc-contrast='max'] .lesson-content {
	--lc-text: #000000;
	--lc-muted-fg: #000000;
	--lc-faint-fg: #000000;
	--lc-h3-fg: #002090;
	--lc-h4-fg: #00617a;
	--lc-terminology-fg: #800080;
	--lc-inline-code-fg: #1f5284;
	--lc-table-head-fg: navy;
	--lc-h2-fg: #005099;
	--lc-code-syntax-fg: #003366;
	--lc-code-pseudo-fg: #004980;
	--lc-inline-code-border: #6c6c6c;
	--lc-table-border: #6e6e6e;
	--lc-h2-border: #5d6c7b;
	--lc-code-syntax-border: #007f07;
	--lc-code-pseudo-border: #696969;
}
.dark[data-lc-contrast='max'] .lesson-content {
	--lc-text: #ffffff;
	--lc-muted-fg: #ffffff;
	--lc-faint-fg: #ffffff;
	--lc-h3-fg: #9ec2ff;
	--lc-h4-fg: #66c7dd;
	--lc-terminology-fg: #e29bff;
	--lc-inline-code-fg: #85b6ec;
	--lc-table-head-fg: #cfe3ff;
	--lc-h2-fg: #7fb8ef;
	--lc-code-syntax-fg: #b7e6a0;
	--lc-code-pseudo-fg: #85b6ec;
	--lc-inline-code-border: #828b9b;
	--lc-table-border: #788191;
	--lc-h2-border: #6a89a8;
	--lc-code-syntax-border: #559347;
	--lc-code-pseudo-border: #828b9b;
}
/* LC-CONTRAST-GENERATED:END */