/* MadTinker teaching palette: loaded AFTER each imported post stylesheet.
   Recolors presentation while preserving the original layouts and interactions. */
.teaching-article .teaching-content {
  --mt-bg:#0b1424; --mt-surface:#101d30; --mt-card:#16263b;
  --mt-line:#30445d; --mt-text:#e3eaf3; --mt-muted:#b2c1d4;
  --mt-lime:#b9ed68; --mt-sky:#8bc8f5; --mt-orange:#ff9b54; --mt-pink:#e3a2d6;
  color:var(--mt-text);
}
.teaching-article .teaching-content :is(.amde-grid-lesson,.amde-case,.amde477-campaign-guide,#amde477-campaign-guide,.wrap,.lesson,.lesson-wrap,.content-wrap) {
  --ink:var(--mt-text);--muted:var(--mt-muted);--line:var(--mt-line);
  --paper:var(--mt-bg);--cream:var(--mt-surface);--slate:var(--mt-sky);
  --blue:var(--mt-sky);--lime:var(--mt-lime);--coral:var(--mt-orange);
}
.teaching-article .teaching-content :is(.amde-grid-lesson,.amde-case,#amde477-campaign-guide) {
  background:var(--mt-bg)!important;color:var(--mt-text)!important;
  max-width:100%;min-width:0;
}
.teaching-article .teaching-content :is(.ag-section,.ag-card,.ag-callout,.ag-footer,.ag-grid,.card,.callout,.example,.bottom,.panel,.box,.note,.activity,.assignment,.assignment-box,.mt-assignment,.instructor-note,.mt-instructor,.mt-callout) {
  color:var(--mt-text)!important;
  border-color:var(--mt-line);
}
.teaching-article .teaching-content :is(.ag-card,.card,.example,.panel,.box,.activity,.assignment,.assignment-box) {
  background:var(--mt-card)!important;
}
.teaching-article .teaching-content :is(.ag-callout,.callout,.note,.mt-callout,.mt-assignment,.mt-instructor,.instructor-note) {
  background:var(--mt-surface)!important;
}
.teaching-article .teaching-content :is(.ag-hero,.hero,.ag-footer,.bottom) {
  background:var(--mt-surface)!important;color:var(--mt-text)!important;
}
.teaching-article .teaching-content :is(h1,h2,h3,h4,h5,h6) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content :is(p,li,dt,dd,td,th,figcaption,small,summary,label) {
  color:inherit;
}
.teaching-article .teaching-content :is(.ag-muted,.muted,.small,.subtitle,.lede) {
  color:var(--mt-muted)!important;
}
.teaching-article .teaching-content :is(.kicker,.ag-eyebrow,.eyebrow,.label,.ag-number) {
  color:var(--mt-orange)!important;
}
.teaching-article .teaching-content a {color:var(--mt-sky)!important}
.teaching-article .teaching-content a:hover {color:var(--mt-lime)!important}
.teaching-article .teaching-content :is(hr,table,td,th) {border-color:var(--mt-line)}
.teaching-article .teaching-content :is(input,textarea,select,button) {
  background:var(--mt-card);color:var(--mt-text);border-color:var(--mt-line);
}
.teaching-article .teaching-content :is(.ag-grid,.grid,.ag-section,.ag-card,.card,.example,.callout) {min-width:0;max-width:100%}
.teaching-article .teaching-content :is(pre,code,.highlight) {color:#e7f0fa}
@media (max-width:700px) {
  .teaching-article .teaching-content :is(.amde-grid-lesson,.amde-case) {padding:16px}
}
/* Keep intentional demonstrations, images, and embedded media untouched. */

/* Teaching headings are content, not Markdown syntax decoration. */
.teaching-article .teaching-content h2::before,
.teaching-article .teaching-content h3::before { content: none !important; }

/* Contrast correction: legacy paragraphs sometimes retain near-black ink on navy. */
.teaching-article .teaching-content :is(.amde-case,.amde-grid-lesson,#amde477-campaign-guide) p,
.teaching-article .teaching-content :is(.amde-case,.amde-grid-lesson,#amde477-campaign-guide) li,
.teaching-article .teaching-content :is(.amde-case,.amde-grid-lesson,#amde477-campaign-guide) dd {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content :is(.amde-case,.amde-grid-lesson,#amde477-campaign-guide) :is(.muted,.subtitle,.lede,.small,.secondary) {
  color:var(--mt-muted)!important;
}

/* Consistent MadTinker heading hierarchy across all imported teaching posts.
   Scope to lesson content, leaving site titles and card headings unchanged. */
.teaching-article .teaching-content h2,
.teaching-article .teaching-content :is(.amde-case,.amde-grid-lesson,#amde477-campaign-guide) h2 {
  color:var(--mt-sky)!important;
}
.teaching-article .teaching-content :is(.card,.ag-card,.panel,.box,.example) h2 {
  color:var(--mt-text)!important;
}

/* Gradients Part II (68303): beat legacy !important light-canvas rules.
   Do not override gradient demo swatches, syntax colors, or preview elements. */
.teaching-article .teaching-content .gradient-part-two {
  background:var(--mt-bg)!important;color:var(--mt-text)!important;
}
.teaching-article .teaching-content .gradient-part-two :is(h2,h3) {
  color:var(--mt-sky)!important;
}
.teaching-article .teaching-content .gradient-part-two :is(p,li,dd,dt) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content .gradient-part-two :is(.gp-card,.gp-section,.gp-callout,.gp-footer) {
  background-color:var(--mt-card)!important;color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content .gradient-part-two .gp-card :is(p,li,h3) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content .gradient-part-two .gp-kicker {
  color:var(--mt-orange)!important;
}
.teaching-article .teaching-content .gradient-part-two .gp-code {
  background:#070d18!important;color:#edf3ff!important;
}

/* AMDE 155/355 Week 1 and related grid lessons: legacy white sections
   were not covered by the first shared palette pass. */
.teaching-article .teaching-content .amde-grid-lesson {
  --ag-ink:var(--mt-text);--ag-muted:var(--mt-muted);
  --ag-paper:var(--mt-bg);--ag-line:var(--mt-line);
  --ag-blue:var(--mt-sky);--ag-green:var(--mt-lime);
  --ag-yellow:var(--mt-orange);
}
.teaching-article .teaching-content .amde-grid-lesson .ag-section {
  background:var(--mt-surface)!important;
  border-color:var(--mt-line)!important;
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-section > h2 {
  color:var(--mt-sky)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-section :is(p,li,dt,dd) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-callout,
.teaching-article .teaching-content .amde-grid-lesson .ag-callout.ag-green,
.teaching-article .teaching-content .amde-grid-lesson .ag-callout.ag-yellow {
  background:var(--mt-card)!important;
  color:var(--mt-text)!important;
  border-left-color:var(--mt-lime)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-card {
  background:var(--mt-card)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-card h3 {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content .amde-grid-lesson :is(.ag-number,.ag-code-label,.ag-html-label,.ag-css-label) {
  background:var(--mt-surface)!important;
  color:var(--mt-orange)!important;
  border:1px solid var(--mt-line);
}
.teaching-article .teaching-content .amde-grid-lesson code.ag-inline {
  background:var(--mt-card)!important;
  color:var(--mt-sky)!important;
}
.teaching-article .teaching-content .amde-grid-lesson .ag-chip {
  background:var(--mt-card)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
/* Preserve colored HTML/CSS tokens inside preformatted examples. */

/* AMDE 350 social-design lessons: recolor legacy paper sections. */
.teaching-article .teaching-content :is(.amde350-week1,.amde350-week2) {
  --sd-ink:var(--mt-text);--sd-paper:var(--mt-bg);
  --sd-orange:var(--mt-orange);--sd-teal:var(--mt-sky);
  --sd-muted:var(--mt-muted);
  background:var(--mt-bg)!important;color:var(--mt-text)!important;
}
.teaching-article .teaching-content :is(.amde350-week1,.amde350-week2) :is(.sd-hero,.sd-section,.sd-card,.sd-callout,.sd-panel) {
  background-color:var(--mt-surface)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content :is(.amde350-week1,.amde350-week2) :is(p,li) {color:var(--mt-text)!important}
.teaching-article .teaching-content :is(.amde350-week1,.amde350-week2) :is(h2,h3) {color:var(--mt-sky)!important}
.teaching-article .teaching-content :is(.amde350-week1,.amde350-week2) :is(.sd-kicker,.sd-number) {color:var(--mt-orange)!important}

/* AMDE 477 campaign overview: map its independent palette variables. */
.teaching-article .teaching-content #amde477-campaign-guide {
  --amde-ink:var(--mt-text);--amde-slate:var(--mt-sky);
  --amde-coral:var(--mt-orange);--amde-cream:var(--mt-surface);
  --amde-paper:var(--mt-bg);--amde-muted:var(--mt-muted);
  background:var(--mt-bg)!important;color:var(--mt-text)!important;
}
.teaching-article .teaching-content #amde477-campaign-guide :is(.amde-hero,.amde-card,.amde-section,.amde-callout,.amde-panel) {
  background-color:var(--mt-surface)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content #amde477-campaign-guide :is(p,li) {color:var(--mt-text)!important}
.teaching-article .teaching-content #amde477-campaign-guide :is(h2,h3) {color:var(--mt-sky)!important}
.teaching-article .teaching-content #amde477-campaign-guide .amde-kicker {color:var(--mt-orange)!important}

/* AMDE 477 case studies: keep colored examples, but normalize article panels. */
.teaching-article .teaching-content .amde-case {
  --ink:var(--mt-text);--slate:var(--mt-sky);
  --coral:var(--mt-orange);--cream:var(--mt-surface);
  --paper:var(--mt-bg);
}
.teaching-article .teaching-content .amde-case :is(.card,.bottom,.callout) {
  background:var(--mt-card)!important;color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content .amde-case :is(.card,.bottom,.callout) :is(p,li) {
  color:var(--mt-text)!important;
}

/* AMDE 477 overview: legacy #amde477-campaign-guide .amde-card background:#fff
   must be overridden explicitly; text and surface must change together. */
.teaching-article .teaching-content #amde477-campaign-guide .amde-card {
  background:var(--mt-card)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content #amde477-campaign-guide .amde-card :is(h2,h3,p,li) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content #amde477-campaign-guide .amde-card .amde-num {
  color:var(--mt-orange)!important;
}
.teaching-article .teaching-content #amde477-campaign-guide .amde-card a {
  color:var(--mt-sky)!important;
}

/* Shared legacy lesson cards: replace pale surfaces and their pale-on-pale
   text together. Limited to known instructional card/panel components;
   do not recolor CSS demonstrations, previews, or syntax examples. */
.teaching-article .teaching-content :is(
  .amde-grid-lesson,.amde-case,#amde477-campaign-guide,
  .amde350-week1,.amde350-week2
) :is(.ag-card,.amde-card,.sd-card,.card,.panel,.ag-callout,.amde-callout,.sd-callout) {
  background:var(--mt-card)!important;
  color:var(--mt-text)!important;
  border-color:var(--mt-line)!important;
}
.teaching-article .teaching-content :is(
  .amde-grid-lesson,.amde-case,#amde477-campaign-guide,
  .amde350-week1,.amde350-week2
) :is(.ag-card,.amde-card,.sd-card,.card,.panel,.ag-callout,.amde-callout,.sd-callout)
:is(p,li,h3,h4,small,span:not(.ag-tag):not(.ag-attr):not(.ag-value):not(.ag-text):not(.ag-comment):not(.ag-css-prop):not(.ag-css-value)) {
  color:var(--mt-text)!important;
}
.teaching-article .teaching-content :is(
  .amde-grid-lesson,.amde-case,#amde477-campaign-guide,
  .amde350-week1,.amde350-week2
) :is(.ag-card,.amde-card,.sd-card,.card,.panel) a {
  color:var(--mt-sky)!important;
}
.teaching-article .teaching-content :is(
  .amde-grid-lesson,.amde-case,#amde477-campaign-guide,
  .amde350-week1,.amde350-week2
) :is(.ag-number,.amde-num,.sd-number,.kicker,.sd-kicker,.amde-kicker) {
  color:var(--mt-orange)!important;
}