/* The explainer frame — the parts every explainer has and none of them owns.
 * ===========================================================================
 *
 * CSS Pass C, for the one component that most needed it.
 *
 * Nine explainers were written one at a time, and Pass A moved each one's
 * <style> block into a page sheet verbatim -- which was a provable no-op and
 * also nine copies of the same page frame. Five of them stayed byte-identical.
 * Two drifted in small ways that are invisible on the page and obvious between
 * pages: body text at 13px on the trilogue and 12.8px everywhere else, a wrap
 * of 1040 or 1080 against 1000, a lede measure of 78ch against 80ch. And the
 * two newest explainers never got the frame at all, so their headings rendered
 * at the browser's own h1 size of 32px and their eyebrow and tab bar were
 * unstyled -- a 16px tab label beside an 11px one on the page before it.
 *
 * /dev/consistency.php is what found this. It frames every explainer and asks
 * the browser what it actually computed for a fixed set of roles, which is the
 * comparison an eye cannot make by moving between two pages a minute apart.
 *
 * So: one copy, here, at the majority values. Where a page genuinely needs
 * something else it overrides in its own sheet with a note saying why -- the
 * trilogue's `.kick` is a row of chips rather than a label, and that is a
 * structural difference, not drift.
 *
 * WHAT IS NOT HERE, and deliberately: the interactive machinery. Steps, tabs'
 * behaviour, the lead-in, the verdict and the one-object rules live in
 * components.css and were shared from the start -- the consistency check finds
 * them identical across every page, which is why the drift showed up in the
 * frame and nowhere else.
 *
 * STILL TO DO (Pass B): every explainer sheet also carries a `:root` block
 * restating the tokens that tokens.css already defines. Their values agree
 * today -- verified, not assumed -- so they are harmless, and removing them is
 * a separate change with its own risk, because several of those blocks also
 * declare page-specific tokens in the same braces.
 *
 * LOAD ORDER: before the page's own sheet, and therefore before bare.css,
 * which overrides body layout on purpose. See the note in bare.css.
 */

/* --- The page ---------------------------------------------------------- */

body {
  margin: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  min-height: 100vh;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 20px 14px 50px; }

a { color: var(--line); }
.hidden { display: none !important; }

/* --- The masthead ------------------------------------------------------ */

header.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: 13px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--line);
  text-transform: uppercase;
}

h1 { font-family: var(--disp); font-weight: 700; font-size: 23px; margin: 4px 0 0; }

/* --- The tab bar ------------------------------------------------------- */

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.navbtn {
  background: transparent;
  border: 1px solid var(--line-dim);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 13px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.navbtn:hover { border-color: var(--line); color: var(--line); }
.navbtn.on    { border-color: var(--drill); color: var(--drill); }

/* --- Running text ------------------------------------------------------ */

.lede {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-dim);
  margin: 0 0 16px;
  max-width: 80ch;
}
.lede b { color: var(--ink); }

p.body { font-size: 12.8px; line-height: 1.78; margin: 0 0 12px; }

.meta { font-size: 10.5px; color: var(--ink-dim); margin: 0 0 14px; line-height: 1.6; }

.sect-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 22px 0 11px;
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: 7px;
}

.pinbox {
  border-left: 2px solid var(--drill);
  padding-left: 12px;
  font-size: 12px;
  line-height: 1.72;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
.pinbox b { color: var(--ink); }

/* --- The framed panel, and the board it sometimes holds ---------------- */

.frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-dim);
  border-radius: 2px;
  padding: 20px 20px 17px;
  margin-bottom: 16px;
}

.frame::before, .frame::after, .tick-bl, .tick-br {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--line);
  border-style: solid;
}
.frame::before { top: -1px;    left: -1px;  border-width: 2px 0 0 2px; }
.frame::after  { top: -1px;    right: -1px; border-width: 2px 2px 0 0; }
.tick-bl       { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.tick-br       { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.kick {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--drill);
}

h2.title { font-family: var(--disp); font-size: 19px; line-height: 1.35; margin: 0 0 4px; }

.board {
  position: relative;
  background: var(--dark);
  border: 1px solid var(--line-dim);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.board::before, .board::after, .bd-bl, .bd-br {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--line);
  border-style: solid;
  z-index: 6;
  pointer-events: none;
}
.board::before { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.board::after  { top: 0;    right: 0; border-width: 2px 2px 0 0; }
.bd-bl         { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.bd-br         { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

svg.viz { display: block; width: 100%; height: auto; }

/* --- Defined terms ------------------------------------------------------
 *
 * Every explainer that opens on a model rather than on prose has the same
 * problem: the model is labelled in the vocabulary of the subject, and the
 * reader meets those words before anything has defined them. Accession showed
 * "chapter" in every count and defined it on another tab; the trilogue labels
 * its diagram "rapporteur + shadows" and "Coreper -> Council" and defines
 * neither until the tab after it.
 *
 * So: the terms go first, in this. Deliberately NOT cards. A definition is
 * prose with a term in front of it, and a row of bordered boxes above the
 * thing you are meant to operate would make the glossary look like the main
 * event. A left rule is what defined and quoted material wears everywhere
 * else on this site.
 * ---------------------------------------------------------------------- */

.vocab { margin: 0 0 14px; }

.vc {
  font-size: 12.3px;
  line-height: 1.72;
  color: var(--ink-dim);
  margin: 0 0 9px;
  padding-left: 13px;
  border-left: 2px solid var(--line-dim);
}

/* The term itself, on its own line above its definition. */
.vc b:first-child {
  display: block;
  color: var(--line);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.vc b { color: var(--ink); }

/* --- The button -------------------------------------------------------- */

/* Flatter and quieter than the site-wide .btn in components.css, which is a
   13px Space Grotesk pill built for the hub. On an explainer a button is a
   control inside a model you are operating, not a call to action, so it is
   monospaced, square and the same weight as the text around it. This sheet
   loads after components.css and therefore wins on explainer pages only.

   Six of the seven sheets that had one agreed on these values; the Atlas was
   at 11px with tighter padding and uppercase, which is the same drift the rest
   of this file exists to end. */
.btn {
  background: transparent;
  border: 1px solid var(--line-dim);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  padding: 9px 15px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: .05em;
  transition: border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--line); color: var(--line); transform: none; filter: none; }
.btn.primary { border-color: var(--line); color: var(--line); }
.btn.on      { border-color: var(--drill); color: var(--drill); }

/* --- Back and on, at the foot of an explainer ----------------------------
 *
 * A pair, because there was only "next" and the browser button. And it walks
 * tabs before pages, so pressing next repeatedly reads the section in the
 * order the section is in -- which is what the tab bar at the top of the page
 * has always implied and what the footer used to contradict by skipping
 * straight to the following explainer.
 *
 * Two columns that become one on a narrow screen, and the forward one is the
 * emphasised half: it is the direction almost everybody is going.
 * ------------------------------------------------------------------------- */
.nextup { margin: 30px 0 4px; border-top: 1px solid var(--line-dim); padding-top: 16px; }
.nu-d { font-size: 12px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 12px; max-width: 60ch; }

.nu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.nu-a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--line-dim); border-radius: 2px;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.nu-a:hover { border-color: var(--line); }
.nu-a:focus-visible { outline: 2px solid var(--drill); outline-offset: 2px; }

.nu-b { display: grid; gap: 1px; min-width: 0; }
.nu-l { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.nu-t { font-family: var(--disp); font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.nu-sub { font-size: 10px; color: var(--ink-dim); }
.nu-go { color: var(--line); font-size: 14px; flex: 0 0 auto; }

.nu-a:hover .nu-t { color: var(--line); }

/* Forward is where almost everybody is going, so it gets the accent and the
   right-hand edge. Back is available and quiet. */
.nu-fwd { justify-content: space-between; border-left: 2px solid var(--line); }
.nu-back { justify-content: flex-start; }
.nu-back .nu-t { font-size: 12.5px; color: var(--ink-dim); }
.nu-back:hover .nu-t { color: var(--line); }

/* The first stop in the section has nothing before it. Shown rather than
   hidden, so the pair does not become one lonely button on page one and the
   forward half does not move. */
.nu-a.is-off { border-style: dashed; opacity: .45; }
.nu-a.is-off .nu-t { font-family: var(--mono); font-weight: 400; font-size: 11.5px; }

@media (max-width: 560px) {
  .nu-pair { grid-template-columns: 1fr; }
  /* Forward first when they stack: it is the one being reached for. */
  .nu-fwd { order: -1; }
}

/* --- The case tile ---------------------------------------------------------
 *
 * CSS Pass C. `.cases` / `.case-b` / `.case-t` / `.case-s` is the tile used
 * wherever an explainer asks you to choose between named options -- pick a
 * case, pick a route, pick what the Court should hold. Four explainers emit it.
 * TWO defined it, in their own page sheets, and neither of those sheets is
 * loaded by the other two.
 *
 * So Direct Effect and Enforcing EU Law were both shipping the browser's
 * default button: flat mid-grey, Arial, 13.3px, a white 2px bevel. Against
 * every other tile on the site -- dark panel, mono, cyan hairline -- it read as
 * a different site. That is what "the make-up is not consistent here" was.
 *
 * Promoted once, which is the only way to stop it happening again, and the two
 * copies deleted. They had already drifted by half a pixel of type size; the
 * 13.5px one wins because it is the one two of the four pages were built
 * against.
 *
 * ep-votes keeps its own `.votes` grid -- a different container with a wider
 * minimum -- and enforcement keeps its `.tw-real` modifier. Those are real
 * local differences, and promoting a component does not mean deleting the
 * things that are genuinely per-page.
 * ------------------------------------------------------------------------- */
.cases {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 7px; margin-bottom: 12px;
}
.case-b {
  display: grid; gap: 2px; text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--line-dim); border-radius: 3px;
  background: var(--panel); color: inherit; cursor: pointer;
  font-family: var(--mono);
  transition: border-color .12s, background .12s;
}
.case-b:hover { border-color: var(--line); background: var(--panel-2); }
.case-b.on { border-color: var(--drill); background: var(--panel-2); }
.case-b:focus-visible { outline: 1px solid var(--drill); outline-offset: 2px; }
.case-t { font-family: var(--disp); font-weight: 700; font-size: 13.5px; }
.case-b.on .case-t { color: var(--drill); }
.case-s { font-size: 9.5px; color: var(--ink-dim); line-height: 1.4; }