/* PYLI5 code highlighting + code-block UI.
   The .highlight rules below are generated from the Pygments 'friendly'
   style; regenerate with the snippet in this file's git history if needed. */

pre { line-height: 125%; }
td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f0f0f0; }
.highlight .c { color: #60A0B0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #F00 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888 } /* Generic.Output */
.highlight .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40A070 } /* Literal.Number */
.highlight .s { color: #4070A0 } /* Literal.String */
.highlight .na { color: #4070A0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60ADD5 } /* Name.Constant */
.highlight .nd { color: #555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287E } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #BB60D5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #40A070 } /* Literal.Number.Bin */
.highlight .mf { color: #40A070 } /* Literal.Number.Float */
.highlight .mh { color: #40A070 } /* Literal.Number.Hex */
.highlight .mi { color: #40A070 } /* Literal.Number.Integer */
.highlight .mo { color: #40A070 } /* Literal.Number.Oct */
.highlight .sa { color: #4070A0 } /* Literal.String.Affix */
.highlight .sb { color: #4070A0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070A0 } /* Literal.String.Char */
.highlight .dl { color: #4070A0 } /* Literal.String.Delimiter */
.highlight .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070A0 } /* Literal.String.Double */
.highlight .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070A0 } /* Literal.String.Heredoc */
.highlight .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #C65D09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070A0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #06287E } /* Name.Function.Magic */
.highlight .vc { color: #BB60D5 } /* Name.Variable.Class */
.highlight .vg { color: #BB60D5 } /* Name.Variable.Global */
.highlight .vi { color: #BB60D5 } /* Name.Variable.Instance */
.highlight .vm { color: #BB60D5 } /* Name.Variable.Magic */
.highlight .il { color: #40A070 } /* Literal.Number.Integer.Long */

/* ---- Code block container ---- */
.code-block { margin: 1.5rem 0; border: 1px solid var(--pyli5-border, #e2e8f0); border-radius: 8px; overflow: hidden; background: #fafafa; }
.code-block__bar { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.75rem; background: #eef1f5; border-bottom: 1px solid var(--pyli5-border, #e2e8f0); font-size: 0.85rem; }
.code-block__filename { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #475569; }
/* Auto-numbered "Example N" header. The counter resets per page (each document
   load), so every page numbers its static code blocks 1, 2, 3, … in document
   order. No stored data is involved — the number is derived purely at render time. */
body { counter-reset: code-example; }
.code-block__example { counter-increment: code-example; font-weight: 600; color: #334155; }
.code-block__example-number::before { content: counter(code-example); }
.code-block__sep { color: #94a3b8; }
.code-block__copy { border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; font-size: 0.8rem; }
.code-block__copy:hover { background: #f1f5f9; }
.code-block__copy.is-copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.code-block__pre, .highlight pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; line-height: 1.5; }
.code-block .highlight { background: transparent; }
.code-block .highlight .hll { background-color: #fff3bf; display: block; }
.code-block__output { border-top: 1px dashed var(--pyli5-border, #e2e8f0); padding: 0.6rem 1rem; background: #fff; }
.code-block__output-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.25rem; }
.code-block__output pre { margin: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; white-space: pre-wrap; }
.code-block__caption { padding: 0.4rem 1rem; font-size: 0.85rem; color: #64748b; font-style: italic; }
/* Walkthrough note: explains the code example directly above it. It tucks up
   against that example (removing the code block's bottom margin) and uses a
   small label instead of a section heading, so it reads as part of the example
   rather than a competing "What the code does" header. */
.code-block:has(+ .code-explanation) { margin-bottom: 0; }
.code-explanation { margin: 0.4rem 0 1.5rem; padding: 0.7rem 1rem 0.75rem 1.1rem; border-left: 4px solid var(--pyli5-primary, #2568A6); background: #f8fafc; border-radius: 0 8px 8px 0; }
.code-explanation__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.25rem; }
.code-explanation__body p { margin: 0.4rem 0; }
.code-explanation__body p:first-child { margin-top: 0; }
.code-explanation__body p:last-child { margin-bottom: 0; }

/* ---- Try-It ---- */
.try-it { margin: 1.75rem 0; border: 2px solid var(--pyli5-primary, #2568A6); border-radius: 10px; padding: 1rem; background: #f8fbff; }
.try-it__instructions { margin-bottom: 0.75rem; }
.try-it__editor { width: 100%; min-height: 8rem; font-family: ui-monospace, monospace; font-size: 0.9rem; padding: 0.6rem; border: 1px solid var(--pyli5-border, #e2e8f0); border-radius: 6px; }
.try-it__starter { margin: 0; font-family: ui-monospace, monospace; font-size: 0.9rem; padding: 0.6rem; border: 1px solid var(--pyli5-border, #e2e8f0); border-radius: 6px; background: #fff; overflow-x: auto; white-space: pre; }
.try-it__starter code { font-family: inherit; }
.try-it .CodeMirror { height: auto; border: 1px solid var(--pyli5-border, #e2e8f0); border-radius: 6px; font-size: 0.9rem; }
.try-it__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.try-it__controls .btn { margin: 0; }
.try-it__output { font-family: ui-monospace, monospace; font-size: 0.85rem; white-space: pre-wrap; background: #0f172a; color: #e2e8f0; padding: 0.75rem; border-radius: 6px; min-height: 2.5rem; overflow-x: auto; }
.try-it__output.is-error { background: #3b1213; color: #fecaca; }
.try-it__output.is-loading { color: #94a3b8; }
.try-it__output .friendly-error { display: block; margin-top: 0.5rem; color: #fde68a; }
.try-it__hint { margin-top: 0.6rem; padding: 0.6rem 0.8rem; background: #fff7ed; border-left: 4px solid #f59e0b; border-radius: 4px; }
.try-it__solution { margin-top: 0.6rem; }

/* ---- Quiz ---- */
.quiz { margin: 1.75rem 0; border: 1px solid var(--pyli5-border, #e2e8f0); border-radius: 10px; padding: 1rem 1.25rem; background: #fff; }
.quiz__question { font-weight: 600; }
.quiz__choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.quiz__choice { width: 100%; text-align: left; padding: 0.6rem 0.8rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; cursor: pointer; }
.quiz__choice:hover { background: #eef2f7; }
.quiz__choice.is-correct { background: #dcfce7; border-color: #16a34a; }
.quiz__choice.is-wrong { background: #fee2e2; border-color: #dc2626; }
.quiz__choice:disabled { cursor: default; }
.quiz__feedback { margin-top: 0.75rem; font-weight: 600; }
.quiz__feedback.is-correct { color: #16a34a; }
.quiz__feedback.is-wrong { color: #dc2626; }
.quiz__explanation { margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: #f1f5f9; border-radius: 6px; }

/* ---- Callouts ---- */
.callout { margin: 1.5rem 0; padding: 0.8rem 1rem; border-radius: 8px; border-left: 4px solid #94a3b8; background: #f8fafc; }
.callout__heading { font-weight: 700; margin: 0 0 0.4rem; }
.callout--tip { border-color: #0ea5e9; background: #f0f9ff; }
.callout--important { border-color: #6366f1; background: #eef2ff; }
.callout--warning { border-color: #f59e0b; background: #fffbeb; }
.callout--definition { border-color: #10b981; background: #ecfdf5; }
.callout--remember { border-color: #ec4899; background: #fdf2f8; }

/* ---- Misc lesson UI ---- */
.badge--difficulty { display: inline-block; background: var(--pyli5-secondary, #FEC32A); color: #1a1a1a; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.8rem; font-weight: 600; }
.common-mistake { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 8px; padding: 0.8rem 1rem; margin: 1.5rem 0; }
.lesson__nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }
.lesson-list__done { color: #16a34a; font-weight: 600; margin-left: 0.5rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; font-size: 0.85rem; color: #64748b; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: #cbd5e1; }