/* Operation LAPIS Teacher Guide -- visual skin
   Brand tokens from the Pericles Group Foundation page.
   Purple is the structural primary; LAPIS green marks CODEX / LAPIS-specific elements. */

:root {
  --lapis-purple: #442F5A;
  --lapis-purple-hover: #7A48AD;
  --lapis-green: #8cc63e;
  --lapis-green-tint: #f1f8e6;

  /* Approach colors. These mark the three approaches everywhere they appear:
     the key on the landing page and the tabs on every mission page. */
  --ap-latin-edge: #8cc63e;            /* Latin RPG: green */
  --ap-latin-fill: rgba(140, 198, 62, 0.16);
  --ap-latin-fill-strong: rgba(140, 198, 62, 0.30);
  --ap-english-edge: #d4a017;          /* English RPG: gold */
  --ap-english-fill: rgba(212, 160, 23, 0.16);
  --ap-english-fill-strong: rgba(212, 160, 23, 0.30);
  --ap-cyop-edge: #7A48AD;             /* Latin CYOP: purple */
  --ap-cyop-fill: rgba(122, 72, 173, 0.16);
  --ap-cyop-fill-strong: rgba(122, 72, 173, 0.30);
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #442F5A;
  --md-primary-fg-color--light: #7A48AD;
  --md-primary-fg-color--dark: #33234a;
  --md-accent-fg-color: #7A48AD;
  --md-typeset-a-color: #442F5A;
}

/* Dark scheme: lift the plum so it reads on slate */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #7A48AD;
  --md-primary-fg-color--light: #9b6fc7;
  --md-primary-fg-color--dark: #442F5A;
  --md-accent-fg-color: #9b6fc7;
  --md-typeset-a-color: #b692e0;
}

/* Header logo: override Material's 24px cap */
.md-header__button.md-logo img {
  height: 40px;
  width: auto;
}

/* Episode Overview blocks */
.md-typeset .ep-eq {
  background: var(--ap-english-fill-strong);
  border-left: 4px solid var(--ap-english-edge);
  padding: 0.875rem 1.25rem;
  margin: 0.75rem 0 1.25rem;
}
.md-typeset .ep-eq p {
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  color: var(--lapis-purple);
}
.md-typeset .ep-block {
  border-left: 4px solid transparent;
  padding: 0.75rem 1.25rem;
  margin: 0.75rem 0;
}
.md-typeset .ep-block > :last-child { margin-bottom: 0; }
.md-typeset .ep-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
}
.md-typeset .ep-targets {
  background: var(--ap-latin-fill);
  border-left-color: var(--ap-latin-edge);
}
.md-typeset .ep-targets .ep-label { color: #3b6d11; }
.md-typeset .ep-eq .ep-label { color: #7a5500; }
.md-typeset .ep-grammar {
  background: var(--ap-cyop-fill);
  border-left-color: var(--ap-cyop-edge);
}
.md-typeset .ep-grammar .ep-label { color: var(--lapis-purple); }
.md-typeset .ep-actfl {
  background: rgba(33, 120, 209, 0.10);
  border-left-color: rgba(33, 120, 209, 0.65);
}
.md-typeset .ep-actfl .ep-label { color: #0c447c; }
.md-typeset .ep-narrative {
  background: rgba(68, 47, 90, 0.07);
  border-left-color: var(--lapis-purple);
}
.md-typeset .ep-narrative .ep-label { color: var(--lapis-purple); }
[data-md-color-scheme="slate"] .md-typeset .ep-eq .ep-label { color: #d4a017; }
[data-md-color-scheme="slate"] .md-typeset .ep-targets .ep-label { color: #8cc63e; }
[data-md-color-scheme="slate"] .md-typeset .ep-grammar .ep-label { color: var(--lapis-purple-hover); }
[data-md-color-scheme="slate"] .md-typeset .ep-eq p { color: var(--lapis-purple-hover); }
[data-md-color-scheme="slate"] .md-typeset .ep-actfl {
  background: rgba(56, 140, 220, 0.15);
  border-left-color: rgba(56, 140, 220, 0.7);
}
[data-md-color-scheme="slate"] .md-typeset .ep-actfl .ep-label { color: #85b7eb; }
[data-md-color-scheme="slate"] .md-typeset .ep-narrative .ep-label { color: var(--lapis-purple-hover); }

/* Headings: brand purple across all levels */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--lapis-purple);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: var(--lapis-purple-hover);
}

/* CODEX backbone heading: green left accent (the LAPIS product mark) */
.md-typeset .lapis-codex {
  border-left: 4px solid var(--lapis-green);
  padding-left: 0.6rem;
}

/* Green-accented highlight box, echoing the Foundation .ol-highlight (VERBA etc.) */
.md-typeset .admonition.lapis,
.md-typeset details.lapis {
  border-left: 4px solid var(--lapis-green);
}
.md-typeset .lapis > .admonition-title,
.md-typeset .lapis > summary {
  background-color: var(--lapis-green-tint);
}
.md-typeset .lapis > .admonition-title::before,
.md-typeset .lapis > summary::before {
  background-color: var(--lapis-green);
  -webkit-mask-image: var(--md-admonition-icon--note);
          mask-image: var(--md-admonition-icon--note);
}

/* Slightly roomier reading measure, closer to the Foundation line-height */
.md-typeset { line-height: 1.7; }

/* ---- Approach key on the landing page ----
   A color legend, not buttons: no full border, no shadow, no hover lift. */
.approach-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 1rem 0 1.25rem;
}
.md-typeset .approach {
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 5px solid transparent;
}
.md-typeset .approach > :first-child { margin-top: 0; }
.md-typeset .approach > :last-child { margin-bottom: 0; }
.md-typeset .approach-latin   { background: var(--ap-latin-fill);   border-left-color: var(--ap-latin-edge); }
.md-typeset .approach-english { background: var(--ap-english-fill); border-left-color: var(--ap-english-edge); }
.md-typeset .approach-cyop    { background: var(--ap-cyop-fill);    border-left-color: var(--ap-cyop-edge); }

/* ---- Approach tabs on every mission page ----
   Tabs nest: an outer RPG / CYOP set, with an inner Latin / English set inside
   the RPG tab. Latin RPG is green, English RPG gold, Latin CYOP purple. The
   inner labels sit inside .tabbed-content, which lets us tell English (inner,
   second label, gold) from CYOP (outer, second label, purple) even though both
   are the second label of their set. */

/* Resting wash: first label green, second label gold ... */
.md-typeset .tabbed-labels > label:nth-child(1) { background: var(--ap-latin-fill); }
.md-typeset .tabbed-labels > label:nth-child(2) { background: var(--ap-english-fill); }
/* ... except the outer set's second label, which is CYOP: purple. */
.md-typeset > .tabbed-set > .tabbed-labels > label:nth-child(2) { background: var(--ap-cyop-fill); }

/* Rollover: each pill deepens to its own color (backgrounds below). Force the
   label text to the normal color in every state. Material tints tab labels with
   the accent (purple) on focus-visible, and its global link-hover rule plus our
   own link pill would tint any <a> inside a linked label; !important beats those
   without a specificity arms race, and the pill background carries the hue. */
.md-typeset .tabbed-labels > label,
.md-typeset .tabbed-labels > label a { color: var(--md-default-fg-color) !important; }
.md-typeset .tabbed-labels > label a,
.md-typeset .tabbed-labels > label a:hover,
.md-typeset .tabbed-labels > label a:focus { background: transparent !important; }
.md-typeset .tabbed-labels > label:nth-child(1):hover { background: var(--ap-latin-fill-strong); }
.md-typeset .tabbed-labels > label:nth-child(2):hover { background: var(--ap-english-fill-strong); }
.md-typeset > .tabbed-set > .tabbed-labels > label:nth-child(2):hover { background: var(--ap-cyop-fill-strong); }

/* Active tab: stronger wash and an underline in the approach color. */
.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1) {
  background: var(--ap-latin-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-latin-edge);
}
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) {
  background: var(--ap-english-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-english-edge);
}
.md-typeset > .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2) {
  background: var(--ap-cyop-fill-strong);
  box-shadow: inset 0 -3px 0 var(--ap-cyop-edge);
}

/* ---- Content links: light pill treatment ----
   So inline links read as links without underlines fighting the prose.
   Scoped to .md-typeset, so nav, tabs, and chrome are untouched; the
   permalink and footnote anchors are excluded. */
.md-typeset a:not(.headerlink):not(.footnote-backref) {
  background: rgba(68, 47, 90, 0.08);
  padding: 0.1em 0.5em;
  border-radius: 1em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.md-typeset a:not(.headerlink):not(.footnote-backref):hover {
  background: var(--ap-cyop-fill);
  color: var(--md-primary-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset a:not(.headerlink):not(.footnote-backref) {
  background: rgba(182, 146, 224, 0.16);
}
[data-md-color-scheme="slate"] .md-typeset a:not(.headerlink):not(.footnote-backref):hover {
  background: rgba(182, 146, 224, 0.26);
}

/* ---- CODEX section pills ----
   Each of the six CODEX sections echoes the color of its tab on the live
   CODEX, so a resource link reads as a quiet category tag: gold KEY-TEXT, blue
   Informational Text, cyan GRAMMATICA, orange VERBA, magenta CULTURALIA, violet
   ATTUNEMENT. Link text keeps the normal color; the hue rides a soft fill and a
   small left accent, kept gentle and roughly even in weight so no one section
   shouts. The hexes are provisional, eyeballed against the live tabs; retune a
   token here and every matching pill follows. */
:root {
  --codex-keytext:    #E3A72C;
  --codex-infotext:   #2E6FD6;
  --codex-grammatica: #1FA5A5;
  --codex-verba:      #E4682A;
  --codex-culturalia: #C63C93;
  --codex-attunement: #7B4FD1;
}
.md-typeset a.codex-keytext:not(.headerlink):not(.footnote-backref),
.md-typeset a.codex-infotext:not(.headerlink):not(.footnote-backref),
.md-typeset a.codex-grammatica:not(.headerlink):not(.footnote-backref),
.md-typeset a.codex-verba:not(.headerlink):not(.footnote-backref),
.md-typeset a.codex-culturalia:not(.headerlink):not(.footnote-backref),
.md-typeset a.codex-attunement:not(.headerlink):not(.footnote-backref) {
  border-radius: 0.35em;
  border-left: 3px solid;
}
.md-typeset a.codex-keytext:not(.headerlink):not(.footnote-backref)    { border-left-color: var(--codex-keytext);    background: color-mix(in srgb, var(--codex-keytext) 11%, transparent); }
.md-typeset a.codex-infotext:not(.headerlink):not(.footnote-backref)   { border-left-color: var(--codex-infotext);   background: color-mix(in srgb, var(--codex-infotext) 13%, transparent); }
.md-typeset a.codex-grammatica:not(.headerlink):not(.footnote-backref) { border-left-color: var(--codex-grammatica); background: color-mix(in srgb, var(--codex-grammatica) 11%, transparent); }
.md-typeset a.codex-verba:not(.headerlink):not(.footnote-backref)      { border-left-color: var(--codex-verba);      background: color-mix(in srgb, var(--codex-verba) 12%, transparent); }
.md-typeset a.codex-culturalia:not(.headerlink):not(.footnote-backref) { border-left-color: var(--codex-culturalia); background: color-mix(in srgb, var(--codex-culturalia) 12%, transparent); }
.md-typeset a.codex-attunement:not(.headerlink):not(.footnote-backref) { border-left-color: var(--codex-attunement); background: color-mix(in srgb, var(--codex-attunement) 13%, transparent); }

.md-typeset a.codex-keytext:not(.headerlink):not(.footnote-backref):hover    { background: color-mix(in srgb, var(--codex-keytext) 20%, transparent); }
.md-typeset a.codex-infotext:not(.headerlink):not(.footnote-backref):hover   { background: color-mix(in srgb, var(--codex-infotext) 22%, transparent); }
.md-typeset a.codex-grammatica:not(.headerlink):not(.footnote-backref):hover { background: color-mix(in srgb, var(--codex-grammatica) 20%, transparent); }
.md-typeset a.codex-verba:not(.headerlink):not(.footnote-backref):hover      { background: color-mix(in srgb, var(--codex-verba) 21%, transparent); }
.md-typeset a.codex-culturalia:not(.headerlink):not(.footnote-backref):hover { background: color-mix(in srgb, var(--codex-culturalia) 21%, transparent); }
.md-typeset a.codex-attunement:not(.headerlink):not(.footnote-backref):hover { background: color-mix(in srgb, var(--codex-attunement) 22%, transparent); }

/* Hold pill text at the resting link color on hover. The general content-link
   hover rule flips text to purple; without this, every colored pill (info,
   grammatica, culturalia, key-text) would roll over purple. Only the fill
   deepens; the text stays steady. */
.md-typeset a.codex-keytext:not(.headerlink):not(.footnote-backref):hover,
.md-typeset a.codex-infotext:not(.headerlink):not(.footnote-backref):hover,
.md-typeset a.codex-grammatica:not(.headerlink):not(.footnote-backref):hover,
.md-typeset a.codex-verba:not(.headerlink):not(.footnote-backref):hover,
.md-typeset a.codex-culturalia:not(.headerlink):not(.footnote-backref):hover,
.md-typeset a.codex-attunement:not(.headerlink):not(.footnote-backref):hover {
  color: var(--md-typeset-a-color);
}

/* Section 2 CODEX backbone labels wear the section color on the bold label
   itself, so the section name and its resource pills share a hue. Text only, no
   fill or accent: a label is a header, not a tag. */
.md-typeset strong.codex-keytext    { color: var(--codex-keytext); }
.md-typeset strong.codex-infotext   { color: var(--codex-infotext); }
.md-typeset strong.codex-grammatica { color: var(--codex-grammatica); }
.md-typeset strong.codex-verba      { color: var(--codex-verba); }
.md-typeset strong.codex-culturalia { color: var(--codex-culturalia); }
.md-typeset strong.codex-attunement { color: var(--codex-attunement); }

/* ---- CYOP Story Atlas ---- */
/* Maps sit on a white card so the pastel node palette stays legible in the
   slate (dark) scheme; tall maps scroll within the page column. */
.md-typeset img.atlas-map,
.atlas-overview svg {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  max-width: 100%;
  height: auto;
  display: block;
}
.atlas-overview {
  overflow-x: auto;
}
.atlas-overview a:hover rect:first-of-type {
  stroke: #1565c0;
  stroke-width: 2.5;
}
/* the pill-style link styling looks wrong on SVG blocks */
.atlas-overview a {
  background: none !important;
  padding: 0 !important;
}

/* glightbox image links must not get the global pill link styling */
.md-typeset a.glightbox,
.md-typeset a.glightbox:hover,
.md-typeset a:has(> img.atlas-map),
.md-typeset a:has(> img.atlas-map):hover {
  background: none !important;
  padding: 0 !important;
  border-radius: 0;
}