/* ---------------------------------------------------------------------
   rf-lesson-polish.css

   Readability pass for the code in the LEFT lesson panel. Audience is
   young students on small (14") laptops, so: bigger text, and bright
   "neon" colors that pop on the dark code blocks. Loaded after each
   stage's own styles; !important is used to reliably beat the many
   per-stage inline color definitions and inline legend-dot colors.

   Neon palette, consistent by role across every stage's class names:
     tag / code    -> neon blue   #5AD1FF   (the easy-to-read chip color)
     attribute     -> neon green  #5EF08A
     value/string  -> neon amber  #FFD866
     link text     -> near-white  #EDEDED
--------------------------------------------------------------------- */

/* Base example blocks: bigger + high contrast */
.code-instruction { color: #F2F2F2 !important; font-size: 1.02rem !important; line-height: 2.1 !important; }
.code-instruction strong,
.code-instruction .ci-label { color: #8CE8A6 !important; font-size: 0.9rem !important; }   /* "type this" label */
.anatomy-diagram { font-size: 1.05rem !important; line-height: 2 !important; }

/* ---- TAGS + inline code chips + heading ladder: the bright blue ---- */
code,
.vs-tag,
.tag-color,
.heading-tag { color: #5AD1FF !important; }
code { font-size: 0.95em !important; }
.heading-tag { background: #1e1e1e !important; font-size: 0.95rem !important; padding: 3px 9px !important;
  font-family: 'SF Mono','Monaco','Courier New',monospace !important; }

/* ---- ATTRIBUTES: neon green ---- */
.vs-attr, .vs-prop, .attr-color { color: #5EF08A !important; }

/* ---- VALUES / STRINGS: neon amber (was hard-to-read purple/coral) ---- */
.vs-val, .vs-sel, .val-color { color: #FFD866 !important; }

/* ---- numbers, punctuation, link text ---- */
.vs-num { color: #B6F09C !important; }
.vs-brace, .text-color { color: #EDEDED !important; }
.vs-cmt { color: #86E0A0 !important; font-style: italic !important; }

/* ---- legend dots: remap the old hardcoded colors to the same neons ---- */
.dot[style*="FF8A65"] { background: #5AD1FF !important; }   /* tag   coral  -> neon blue  */
.dot[style*="6B9BD1"] { background: #5EF08A !important; }   /* attr  blue   -> neon green */
.dot[style*="B565D8"] { background: #FFD866 !important; }   /* value purple -> neon amber */

/* ---- consistent monospace: SF Mono across every lesson code display ---- */
.code-instruction, code,
.heading-tag, .nesting-diagram, .skill-chip, .element-tag, .css-anatomy,
.anatomy-diagram, .url-display, .fit-demo-label, .file-tree, .commit-text,
.code-url, .code-inline {
  font-family: 'SF Mono','Monaco','Courier New',monospace !important;
}