/* =============================================================================
   locks.css — site-wide consistency locks. Loaded LAST on every page so it wins.

   Three things are pinned here:
     1. one corner-radius scale, because the site had grown 16 different values
     2. one UI accent, with the second hue reserved for diagrams where it encodes
        meaning rather than decoration
     3. text on the accent, which failed contrast in dark mode
   ========================================================================== */

:root{
  /* the only radii allowed: small chips, controls, containers, and pills */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-full:999px;

  /* Ink for text sitting ON the accent colour. White on the dark theme's
     lighter accent measures 2.41:1, which fails WCAG AA; near-black on the same
     swatch measures 7.85:1. The light theme's deeper accent passes with white. */
  --on-accent:#0b1220;
  --paper:#fbfcfe;          /* off-white, never #ffffff */
  --ink:#0b1220;            /* off-black, never #000000 */
}
:root[data-theme="light"]{ --on-accent:var(--paper); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --on-accent:var(--paper); }
}

/* ------------------------------------------------- 1. radius scale lock ---- */
.btn, .iconbtn, .tbtn, .chipbtn, .langbtn, .hl-copy,
select, textarea,
input[type=text], input[type=number], input[type=search]{ border-radius:var(--r-md) }

.lab, .card, .pane, .pstep, .narrate, .hl, pre,
.memgrid > *, .mc{ border-radius:var(--r-md) }

.lab, .card, .pstep, .hl{ border-radius:var(--r-lg) }

.badge, .bit, .cell, .fbit, .st, .cellwrap > .cell{ border-radius:var(--r-sm) }

.pill, .prog, .prog i, .langsw, .ready-dot{ border-radius:var(--r-full) }
.lamp, .dot{ border-radius:50% }        /* a circle is a shape, not a radius */

/* the accent-edged blocks keep their flat left edge but share the scale */
.callout{ border-radius:0 var(--r-lg) var(--r-lg) 0 }
.quiz{ border-radius:0 var(--r-lg) var(--r-lg) 0 }

/* ------------------------------------------------- 2. one UI accent -------
   The purple second hue stays ONLY where it carries information: control
   signals in the datapath and the ID stage in a pipeline chart. Everywhere it
   was merely decorating chrome, it becomes the single accent. */
.quiz{ border-left-color:var(--accent) }
.quiz .q::before{ color:var(--accent) }
.quiz .opt:hover{ border-color:var(--accent) }
.pill.advanced{ color:var(--accent); border-color:var(--accent) }

/* --------------------------------------- 3. readable text on the accent ---- */
.btn.primary, .btn.sel, .cta:not(.ghost),
.chipbtn.on, .langbtn.on{ color:var(--on-accent) }
.btn.primary, .btn.sel{ border-color:var(--accent) }
.cta:not(.ghost){ color:var(--on-accent) }

/* off-black and off-white only */
.hero h1{ color:var(--txt) }

/* ------------------------------------------------------- misc tidy-ups ----
   A control that reads as pressed should not also look hoverable-different. */
.btn.sel:hover, .chipbtn.on:hover{ filter:brightness(1.06) }

/* higher-specificity leftovers pulled onto the scale */
.filter input[type=search], .quiz .opt, .lab-body .narrate,
.play-log, .budg-bar, .np-scroll{ border-radius:var(--r-md) }