/*
  Styles for markdown-rendered content: lesson/problem content
  (item.content|safe, produced by MarkdownReader) and discussion comment
  bodies (comment.body_html|safe, produced by _render_comment_body in
  views.py). Both emit bare <pre>/<code>/<table>/<h1-4> tags that Tailwind
  utility classes can't be attached to, so this is real CSS rather than
  Tailwind arbitrary-variant selectors -- everything else JS-driven on the
  item page (active, collapsed, revealed, has-error, placeholder) uses
  Tailwind's `[&.classname]:utility` / `[.classname_&]:utility` syntax
  instead, see item.html.

  Static and unchanging across every render, so it's a real stylesheet
  (cacheable, requested once) rather than inlined in <style> per page load.
*/
.tab-panel pre, .lesson-content pre {
  background: var(--color-base-200); border: 1px solid var(--color-base-300); border-radius: 0.5rem; padding: 0.75rem 1rem;
  overflow-x: auto; margin: 0 0 16px;
}
.tab-panel code, .lesson-content code {
  font-family: ui-monospace, monospace; font-size: 0.875rem;
}
.tab-panel pre code, .lesson-content pre code { background: none; padding: 0; border-radius: 0; }
.tab-panel :not(pre) > code, .lesson-content :not(pre) > code {
  background: var(--color-base-300); padding: 0.125rem 0.25rem; border-radius: 0.25rem;
}
.tab-panel table, .lesson-content table {
  border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 0.875rem;
}
.tab-panel th, .lesson-content th, .tab-panel td, .lesson-content td {
  border: 1px solid var(--color-base-300); padding: 8px 12px; text-align: left;
}
.tab-panel th, .lesson-content th { background: var(--color-base-200); font-weight: 600; }
.tab-panel h1, .lesson-content h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 28px 0 12px; }
.tab-panel h2, .lesson-content h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 24px 0 10px; }
.tab-panel h3, .lesson-content h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: 20px 0 8px; }
.tab-panel h4, .lesson-content h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 16px 0 8px; }
.tab-panel h1:first-child, .lesson-content h1:first-child,
.tab-panel h2:first-child, .lesson-content h2:first-child,
.tab-panel h3:first-child, .lesson-content h3:first-child,
.tab-panel h4:first-child, .lesson-content h4:first-child { margin-top: 0; }
.tab-panel p, .lesson-content p { margin: 0 0 14px; }
.tab-panel ul, .lesson-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 14px; }
.tab-panel ol, .lesson-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 14px; }
.tab-panel li, .lesson-content li { margin-bottom: 6px; }
.tab-panel li > ul, .lesson-content li > ul, .tab-panel li > ol, .lesson-content li > ol { margin-top: 6px; margin-bottom: 0; }
.tab-panel blockquote, .lesson-content blockquote {
  border-left: 3px solid var(--color-base-300); margin: 0 0 14px; padding: 2px 16px; opacity: 0.75;
}
.tab-panel a, .lesson-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.tab-panel hr, .lesson-content hr { border: none; border-top: 1px solid var(--color-base-300); margin: 24px 0; }

/*
  Vendored daisyui.css (fetched pre-built from jsDelivr, see the file's own
  header comment) ships with no @layer at-rules, so daisyUI's base .tab
  reset -- `.tab:is(.tabs>.tab)`, specificity (0,3,0) via the :is() wrapper
  -- beats .tabs-lift > .tab's own rules (specificity (0,2,0)) on plain
  specificity. Normally cascade layers would let the variant win regardless.
  Two properties get clobbered this way, not just border-color: the base
  rule also resets --tab-radius-ss/--tab-radius-se to 0, which is what
  .tabs-lift's border-start-start/end-radius read from, so the active
  tab's top corners silently lost their rounding too. --tab-border-colors
  and --tab-radius-limit themselves still resolve correctly per
  checked/hover state; only the properties consuming them need forcing
  back on.
*/
.tabs.tabs-lift > .tab {
  border-color: var(--tab-border-colors) !important;
  border-start-start-radius: var(--tab-radius-limit) !important;
  border-start-end-radius: var(--tab-radius-limit) !important;
}

/*
  Syntax highlighting for MarkdownReader's `codehilite` extension (Pygments).
  `.codehilite` is Pygments' own output class -- unlike pre/code/table above,
  it's distinctive enough that no dual .tab-panel/.lesson-content prefixing
  is needed. Token colors are custom properties, not a stock Pygments style
  (those hardcode one palette), so they can flip with the app's own
  light/dark toggle the same way daisyUI's --color-* tokens do.
*/
[data-theme='dark'] {
  --hl-keyword: oklch(72% 0.14 320); --hl-string: oklch(78% 0.13 145);
  --hl-number: oklch(78% 0.13 60); --hl-comment: oklch(60% 0.02 250);
  --hl-function: oklch(78% 0.13 230); --hl-class: oklch(80% 0.12 90);
  --hl-builtin: oklch(75% 0.12 200);
}
[data-theme='light'] {
  --hl-keyword: oklch(45% 0.16 320); --hl-string: oklch(42% 0.13 145);
  --hl-number: oklch(50% 0.14 60); --hl-comment: oklch(55% 0.02 250);
  --hl-function: oklch(45% 0.13 230); --hl-class: oklch(48% 0.13 90);
  --hl-builtin: oklch(45% 0.12 200);
}
.codehilite { margin: 0 0 16px; }
.codehilite pre { margin: 0; }
.codehilite .c, .codehilite .c1, .codehilite .cm, .codehilite .cp, .codehilite .cs {
  color: var(--hl-comment); font-style: italic;
}
.codehilite .k, .codehilite .kc, .codehilite .kd, .codehilite .kn,
.codehilite .kp, .codehilite .kr, .codehilite .kt, .codehilite .ow {
  color: var(--hl-keyword); font-weight: 600;
}
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb, .codehilite .sc,
.codehilite .sd, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sx,
.codehilite .sr, .codehilite .ss, .codehilite .sa {
  color: var(--hl-string);
}
.codehilite .m, .codehilite .mi, .codehilite .mf, .codehilite .mo, .codehilite .mh, .codehilite .mb {
  color: var(--hl-number);
}
.codehilite .nf, .codehilite .fm { color: var(--hl-function); }
.codehilite .nc { color: var(--hl-class); }
.codehilite .nb, .codehilite .bp { color: var(--hl-builtin); }