/* ============================================================
   AI Literacy Hub — violet theme.

   The Hub is themed after the SalesHookAI landing template
   (21st.dev/@timmoreiti), which is a near-black ground with a
   violet accent and a purple glow behind the hero.

   This is a RETHEME, not a reskin. diego.css says of its palette
   "Theme: Magenta + Cyan (default). Swap these four to retheme",
   and every accent in the system — nav, cards, buttons, focus
   ring, the two hero glows — derives from those four tokens. So
   the whole Hub turns violet by redefining them, and keeps the
   chrome, the Two Voices type rule and the focus system that
   fe34a30 brought the site onto.

   Deliberately NOT taken from the template:
     - Rounded corners. diego.css enforces `border-radius:0
       !important` because corners in this system are clip-path
       notches. The template's 11-16px radii would need to fight
       an !important rule that exists on purpose.
     - system-ui type. The Two Voices rule (Grotesk headings,
       Mono everywhere else) is the site's strongest brand signal.

   Loads after diego.css on the five Hub pages, so these win.
   Nothing outside /ai-literacy-hub/ links this file.
   ============================================================ */

:root{
  /* Measured against this system's actual usage, not picked by eye.
     diego.css uses each neon BOTH as text on --dead-air (#07070c) AND as a
     button background carrying dark --on-signal text, so a token has to clear
     4.5:1 in both directions. The template's signature violet-600 (#7c3aed)
     manages only 3.53:1 / 3.55:1 and fails WCAG AA on both counts, so it
     cannot be a foreground token here. These two can:
        #a78bfa  violet-400   7.39:1 as text   7.44:1 behind dark text
        #c084fc  purple-400   7.61:1 as text   7.66:1 behind dark text  */
  --neon1: #a78bfa;
  --neon2: #c084fc;
  --rgb1: 167,139,250;
  --rgb2: 192,132,252;

  /* The saturated violet-600 the template is built on still gets used — but
     only in glows and gradients, where nothing has to be legible against it. */
  --violet-deep: 124,58,237;

  /* Concept Library difficulty ramp.
     diego.css bridges literacy.css's old accent names onto the two brand neons
     (--mint and --cyan both become --neon2), which left Beginner and
     Intermediate rendering the identical cyan. Three explicit steps restore
     the distinction as a violet -> fuchsia ramp. All clear AA on the ground:
     7.39:1, 7.61:1, 11.42:1. */
  --level-beginner: #a78bfa;
  --level-intermediate: #c084fc;
  --level-advanced: #f0abfc;
}

/* The template's signature: a violet bloom behind the hero. The
   system already composes its hero glow from --rgb1/--rgb2, so
   this only deepens it over the Hub's hero rather than redefining
   the geometry. */
.hero::before{
  content:"";
  position:absolute;
  inset:-10% -20% auto -20%;
  height:120%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(var(--violet-deep), .30), transparent 68%),
    radial-gradient(520px 320px at 18% 18%, rgba(var(--rgb2), .10), transparent 70%);
}
.hero{position:relative;isolation:isolate}
/* The bloom reaches 20% past each side of the hero. On a phone that widened
   the page (mobile browsers lay out to fit the overflow and zoom out), so keep
   it inside the viewport there. */
@media (max-width:700px){.hero::before{left:0;right:0}}

@media (prefers-reduced-motion: reduce){
  .hero::before{transition:none}
}

/* ---- Literacy Tests: retone the sheet that predates the system ----------
   tests/assets/hub.css was written against the old blue/teal Hub and still
   carries literal magenta + cyan. diego.css bridged its token names but not
   its hardcoded values, so the tests hero stayed off-palette. */
.hub-hero{
  background:linear-gradient(135deg, rgba(var(--violet-deep), .34), rgba(var(--rgb2), .12));
  border:1px solid var(--carrier-edge);
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}
/* .hub-hero p (0,1,1) outranks a bare .kicker (0,1,0), so this has to
   match on both classes to win. */
.hub-hero .kicker{color:var(--neon2)}

/* hub.css animates the body background on a 14s infinite loop. diego.css
   replaced that background with a flat surface, so the animation now paints
   nothing at all — it just keeps the compositor busy forever and ignores the
   reduced-motion floor. Stop it. */
body{animation:none}

/* Difficulty and grade chips shared their green/amber/red with .option.correct
   / .option.wrong / .feedback.good / .feedback.bad, so green meant both
   "advanced" and "right answer" and red meant both "beginner" and "wrong".
   Putting difficulty on the Concept Library's violet ramp separates the two
   meanings and makes "Beginner" the same colour in the quiz as in the Library.
   Correct/incorrect deliberately stay green/red — that semantic is not ours
   to recolour. */
.difficulty-beginner,.grade-beginner{
  border-color:color-mix(in srgb, var(--level-beginner) 55%, transparent);
  color:var(--level-beginner);
}
.difficulty-intermediate,.grade-intermediate{
  border-color:color-mix(in srgb, var(--level-intermediate) 55%, transparent);
  color:var(--level-intermediate);
}
.difficulty-advanced,.grade-advanced{
  border-color:color-mix(in srgb, var(--level-advanced) 55%, transparent);
  color:var(--level-advanced);
}

/* ---- Glossary auto-links -------------------------------------------------
   A concept mentioned in running text links to its Concept Library card. These
   sit inside body copy, so they are marked with a dotted underline rather than
   the accent colour — a paragraph with six accent-coloured words in it stops
   being readable, and the point is to be findable without shouting. */
.glossary-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb, var(--neon1) 60%, transparent);
  cursor:help;
}
.glossary-link:hover,
.glossary-link:focus-visible{
  color:var(--neon1);
  border-bottom-style:solid;
}

/* ---- Learning paths ------------------------------------------------------
   Three routes into the hub for someone who does not yet know which of the
   library, the tests or the lab is theirs. Steps live behind <details> so the
   section stays a scannable three-card row until someone commits to a path. */
.paths-section{margin:2.5rem 0 1rem}
.paths-head{max-width:44rem;margin-bottom:1.25rem}

.paths-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:1rem;
  align-items:start;
}

.path-card{
  padding:1.15rem 1.25rem 1.25rem;
  border:1px solid var(--carrier-edge);
  border-top:2px solid var(--neon1);
  background:var(--signal-floor);
}

.path-card h3{margin:.15rem 0 .5rem;font-size:1.25rem;line-height:1.2}
.path-who{margin:0 0 .6rem;color:var(--ink-lede);font-weight:700;font-size:.92rem}
.path-lead{margin:0 0 .8rem;font-size:.94rem}

.path-meta{
  margin:0;color:var(--ink-quiet);font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}

.path-steps{margin-top:.9rem;border-top:1px solid var(--carrier-edge-soft);padding-top:.75rem}
.path-steps summary{cursor:pointer;color:var(--neon1);font-weight:700;font-size:.9rem}
.path-steps summary:focus-visible{outline:2px solid var(--neon2);outline-offset:3px}
.path-steps[open] summary{margin-bottom:.75rem}

.path-list{margin:0;padding-left:1.15rem}
.path-list > li{margin-bottom:.85rem;font-size:.92rem;line-height:1.55}
.path-list > li:last-child{margin-bottom:0}
.path-list strong{display:block;color:var(--ink);margin-bottom:.25rem}

.path-concepts{margin:.35rem 0 0;padding-left:1rem}
.path-concepts li{margin:.2rem 0;font-size:.9rem}

/* Path links are navigation, not prose, so unlike .glossary-link they carry
   the accent colour outright. */
.path-card a{color:var(--neon1);border-bottom:1px solid transparent}
.path-card a:hover,
.path-card a:focus-visible{border-bottom-color:var(--neon1)}