/* ============================================================
   THE CODEX — Skills module design system  (D1)
   Single source of design tokens + fonts + apparatus color-coding.
   Loaded by every public page: browse / skill / event / events / question
   (and skill_details).

   Editorial gymnastics almanac: warm chalk paper, charcoal ink, brand
   gold as the through-line, one refined jewel accent per apparatus.

   NOTE: :root tokens live HERE only. The scoped component files
   (skill_sections.css, skill_forms.css, event_sections.css,
   skill_picker.css) consume these variables — keep names stable.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Roboto+Mono:wght@400;500;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --paper: #f7f4ef;        /* warm chalk paper — the module canvas */
  --paper-2: #efeadf;      /* slightly deeper inset panel */
  --card: #ffffff;
  --bg: var(--paper);      /* back-compat alias (older rules referenced --bg) */

  /* Ink */
  --ink: #1a1b20;          /* primary text — charcoal */
  --ink-soft: #4b4e58;     /* secondary text */
  /* ⚠️ --muted is checked against EVERY surface it lands on, not just --card/--paper. It also sits
     on --gold-soft, --paper-2 and --vp-a-bg, and a first X3 pass tuned it only against the first
     two — which left the front page's program chips at 4.12–4.20:1, passing nothing but looking
     fixed. #6e6a5b clears 4.5:1 on all five. */
  --muted: #6e6a5b;        /* warm muted / captions — X3: was #86816f (3.56:1 on paper, WCAG fail) */
  --text: var(--ink);      /* back-compat alias */

  /* Lines — warm, not cold gray */
  --line: #e6e0d1;
  --line-2: #d8d0bd;

  /* Brand gold — ties the module to the OG header */
  --gold: #c4942f;
  --gold-deep: #88651c;    /* X3: was #9c7420 (3.62:1 on --gold-soft, WCAG fail) */
  --gold-bright: #e2b85a;
  --gold-soft: #f6ecd4;
  --gold-line: #e7d3a3;

  /* Deep secondary ink (from the site chrome navy) */
  --ink-navy: #14243f;
  --blue-dark: var(--ink-navy);   /* back-compat alias */
  --blue-soft: #e8eef7;           /* back-compat alias */

  /* Feedback hues (kept restrained) */
  --good: #2f6b3d;
  --good-soft: #e2efe3;
  --bad: #b0452e;          /* X3: was #b4472f (4.33:1 on --bad-soft, WCAG fail) */
  --bad-soft: #f6e2dc;
  --green: #2f6b3d;          /* back-compat alias (accepted-answer accents) */
  --green-soft: #e2efe3;

  /* Apparatus jewel accents — used wherever an event appears.
     Each .ev-<name> class sets --ev / --ev-soft / --ev-line locally,
     and components read var(--ev, var(--gold)). */
  --ev-vault: #925e23;  --ev-vault-soft: #f4e8d6;  --ev-vault-line: #e6cfa8;  /* X3: was #b0722a (3.28:1) */
  --ev-bars:  #1e7675;  --ev-bars-soft:  #dcefee;  --ev-bars-line:  #b3ddda;  /* X3: was #1f7a78 (4.28:1) */
  --ev-beam:  #9c3a63;  --ev-beam-soft:  #f5e1ea;  --ev-beam-line:  #e7c0d2;
  --ev-floor: #2f6b3d;  --ev-floor-soft: #e0efe1;  --ev-floor-line: #bcdcc0;

  /* Value-part ramp (A→D) — warm difficulty scale */
  /* ⚠️ X3 (2026-07-25) — EVERY foreground token above and below was checked against the surface it
     actually renders on, and seven were darkened to clear WCAG AA 4.5:1. The darkening is a UNIFORM
     RGB SCALE (~0.87), which preserves hue and saturation exactly — the palette reads the same, it
     is just legible. Do not "restore" a lighter value: `temporary/verify_x3_lighthouse.cjs` scores
     the rendered pages and will fail. If a NEW colour pair is added, check it there first — the
     ones that failed (3.28–4.33:1) all looked perfectly fine to a sighted designer on a good
     monitor, which is exactly why they survived until something measured them. */
  --vp-a: #6b6858;  --vp-a-bg: #f1eee6;
  --vp-b: #88651c;  --vp-b-bg: #f6ecd4;   /* X3: was #9c7420 (3.62:1) */
  --vp-c: #9b541c;  --vp-c-bg: #f4e2cf;   /* X3: was #a65a1e (4.05:1) */
  --vp-d: #8a3a2a;  --vp-d-bg: #f2ddd6;

  /* Radii */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Shadows — soft, warm-tinted */
  --shadow-sm: 0 1px 2px rgba(26,27,32,.04), 0 1px 3px rgba(26,27,32,.05);
  --shadow-md: 0 6px 20px rgba(26,27,32,.06), 0 2px 6px rgba(26,27,32,.05);
  --shadow-lg: 0 18px 48px rgba(26,27,32,.12);

  /* Layout */
  --max: 1080px;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: var(--font-body);   /* back-compat alias */
  --mono: var(--font-mono);   /* back-compat alias */
}

/* ---- Apparatus theming classes -------------------------------------- */
/* ⚠️ `--ev-on` is the READABLE TEXT COLOUR *on top of* a solid `--ev` fill — X3, 2026-07-25.
   All four apparatus hues are dark enough to need WHITE text (5.1–6.6:1), while the `--gold`
   FALLBACK used when no `.ev-*` class is present is light and needs the dark ink instead
   (white on gold is 2.75:1). One token expresses that difference; hardcoding either colour at a
   call site gets one of the two cases wrong. The event page's active nav pill was doing exactly
   that with `color:#14161c` and failing at 2.75–3.5:1 on beam/floor/bars long before this pass. */
.ev-vault { --ev: var(--ev-vault); --ev-soft: var(--ev-vault-soft); --ev-line: var(--ev-vault-line); --ev-on: #fff; }
.ev-bars  { --ev: var(--ev-bars);  --ev-soft: var(--ev-bars-soft);  --ev-line: var(--ev-bars-line);  --ev-on: #fff; }
.ev-beam  { --ev: var(--ev-beam);  --ev-soft: var(--ev-beam-soft);  --ev-line: var(--ev-beam-line);  --ev-on: #fff; }
.ev-floor { --ev: var(--ev-floor); --ev-soft: var(--ev-floor-soft); --ev-line: var(--ev-floor-line); --ev-on: #fff; }

/* ============================================================
   Module canvas — the warm "paper" surface the pages sit on.
   The site chrome wraps everything in a white panel, so we paint the
   paper (and a faint chalk speckle) on the module's own containers.
   ============================================================ */
.showskills-container,
.wizard-container,
.wrap {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paint the paper full-bleed behind the module without touching the
   shared site panel: a fixed backdrop layer + subtle chalk grain. */
body:has(.showskills-container),
body:has(.wizard-container),
body:has(.wrap) {
  background:
    radial-gradient(rgba(26,27,32,.018) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--paper);
}
/* The shared white site panel — nudge it to the warm paper so the module
   blends edge to edge (scoped: only when a module container is present). */
body:has(.showskills-container) > center > div[style*="background-color: #fff"],
body:has(.wrap) > center > div[style*="background-color: #fff"],
body:has(.wizard-container) > center > div[style*="background-color: #fff"] {
  background: transparent !important;
}

::selection { background: var(--gold-soft); color: var(--ink); }

/* ============================================================
   Editorial masthead — shared page title treatment
   ============================================================ */
.codex-masthead {
  text-align: left;
  margin: 4px 0 22px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.codex-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 8px;
}
.codex-masthead h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.codex-masthead .codex-sub {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 60ch;
}

/* ============================================================
   BROWSE PAGE  (scoped under .showskills-container)
   Overrides the legacy css/skill.css look; admin pages untouched.
   ============================================================ */
.showskills-container {
  max-width: var(--max);
  margin: 22px auto;
  padding: 30px 30px 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-align: left;   /* site chrome wraps pages in <center>; opt back out */
}
.showskills-container > h1 {
  /* the bare <h1>Skills Overview</h1> becomes an editorial masthead */
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
  text-align: left;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.showskills-container > h1::before {
  content: 'Our Gymnastics · Skills Reference';
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}

/* ---- Filter bar: search (master filter) + level facet as one unit ---- */
.showskills-container .filter-bar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.showskills-container .skill-search-form {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 0; position: relative; align-items: center;
}
.showskills-container .search-ico {
  position: absolute; left: 15px; top: 21px; transform: translateY(-50%);
  font-size: 20px; color: var(--muted); pointer-events: none; z-index: 1;
}
.showskills-container .skill-search-input {
  flex: 1; min-width: 220px;
  padding: 13px 16px 13px 42px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.showskills-container .skill-search-input::placeholder { color: var(--muted); }
.showskills-container .skill-search-input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.showskills-container .skill-search-btn {
  padding: 13px 24px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: #201a08;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border: none; border-radius: var(--r-md);
  cursor: pointer;
  transition: box-shadow .18s, transform .1s, filter .15s;
}
.showskills-container .skill-search-btn:hover { box-shadow: 0 4px 16px rgba(196,148,47,.35); filter: brightness(1.03); }
.showskills-container .skill-search-btn:active { transform: translateY(1px); }
.showskills-container .skill-search-clear {
  display: inline-flex; align-items: center;
  padding: 13px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  transition: background .15s, border-color .15s;
}
.showskills-container .skill-search-clear:hover { background: var(--paper); border-color: var(--muted); }

/* ---- Level filter chips ---- */
.showskills-container .level-filter { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 0; }
.showskills-container .filter-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
.showskills-container .level-chip {
  padding: 7px 15px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.showskills-container .level-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.showskills-container .level-chip.active {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ---- Event tabs → results panel (the tab "opens into" the panel) ---- */
.showskills-container .browse-panel-wrap { margin-top: 2px; }
.showskills-container .event-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  position: relative; z-index: 1; padding-left: 2px;
}
.showskills-container .event-tab {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; font-size: 17px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 10px 20px 11px;
  margin-bottom: -1px;              /* sit on the panel's top border */
  text-decoration: none;
  transition: background .15s, color .15s;
}
.showskills-container .event-tab:hover { background: var(--card); color: var(--ev, var(--gold-deep)); }
.showskills-container .event-tab.active {
  background: var(--card);
  color: var(--ev, var(--ink));
  border-bottom-color: var(--card);   /* merge into panel */
  border-top: 3px solid var(--ev, var(--gold));
  padding-top: 8px;
  position: relative; z-index: 3;
}
.showskills-container .results-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  position: relative; z-index: 2;
}

/* ---- Group facet (scoped inside the active event's panel) ---- */
.showskills-container .panel-groups {
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px dashed var(--line-2);
}
.showskills-container .panel-groups-label {
  display: block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.showskills-container .group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.showskills-container .group-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  text-decoration: none; color: var(--ink-soft);
  font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.showskills-container .group-chip:not(:has(.gc-num)) { padding-left: 14px; }
.showskills-container .group-chip:hover { background: var(--card); border-color: var(--ev, var(--gold)); color: var(--ink); }
.showskills-container .group-chip.active {
  background: var(--ev-soft, var(--gold-soft));
  border-color: var(--ev, var(--gold));
  color: var(--ev, var(--gold-deep));
  font-weight: 600;
}
.showskills-container .group-chip .gc-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  color: var(--ev, var(--gold-deep));
  background: var(--card); border: 1px solid var(--line-2);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.showskills-container .group-chip.active .gc-num { border-color: var(--ev, var(--gold)); }
.showskills-container .group-chip .gc-name { line-height: 1.2; }

/* ---- VP sections + skill list ---- */
.showskills-container .skills-list { margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }
.showskills-container .vp-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.showskills-container .vp-header {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-2);
  color: var(--ink);
  padding: 11px 20px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--gold);
}
.showskills-container .vp-skills { padding: 6px 20px 10px; }
.showskills-container .skill-group {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.showskills-container .skill-group:last-child { border-bottom: none; }
.showskills-container .skill-display-decimal {
  width: 64px; min-width: 64px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--muted);
}
.showskills-container .skill-group-items { flex: 1; display: flex; flex-direction: column; gap: 0; text-align: left; }
.showskills-container .skill-group-item { padding: 3px 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background .12s; }
.showskills-container .skill-group-item:hover { background: var(--gold-soft); }
.showskills-container .skill-group-separator { border: none; border-top: 1px dashed var(--line-2); margin: 4px 0; }
.showskills-container a.skill-item-link { text-decoration: none; color: inherit; display: block; text-align: left; }
.showskills-container .skill-display-name { font-weight: 600; color: var(--ink); }
.showskills-container a.skill-item-link:hover .skill-display-name { color: var(--gold-deep); }
/* X6d — .skill-display-name now holds the NICKNAME (the primary name); .skill-display-cop is
   the demoted CoP prose. .skill-display-nickname is retired — the roles swapped, so reusing the
   old class would have meant "primary" styling on secondary text. */
.showskills-container .skill-display-cop { font-style: italic; color: var(--muted); font-size: .92em; }

/* Badges (dance / na / level) — refined, not saturated */
.showskills-container .skill-badge {
  display: inline-block; padding: 1px 8px; margin-left: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: var(--r-pill); vertical-align: middle;
  border: 1px solid transparent;
}
.showskills-container .skill-badge.level { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold-line); }
.showskills-container .skill-badge.dance { background: var(--ev-beam-soft); color: var(--ev-beam); border-color: var(--ev-beam-line); }
.showskills-container .skill-badge.na { background: var(--vp-c-bg); color: var(--vp-c); border-color: #e6c9a6; }
.showskills-container .no-skills { color: var(--muted); font-style: italic; padding: 12px 0; }

/* ---- Search results (flat ranked list) ---- */
.showskills-container .search-results-header {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 700;
}
.showskills-container .search-results-list { display: flex; flex-direction: column; gap: 7px; }
.showskills-container .search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ev, var(--line-2));
  border-radius: var(--r-md);
  background: var(--card);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.showskills-container .search-result-item:hover {
  background: var(--paper);
  border-left-color: var(--ev, var(--gold));
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.showskills-container .srr-decimal {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); min-width: 54px;
}
.showskills-container .srr-name { flex: 1; font-size: 15px; font-weight: 600; }
/* X6d — .srr-name holds the nickname; .srr-cop is the demoted CoP prose (was .srr-nick). */
.showskills-container .srr-cop { color: var(--muted); font-style: italic; font-weight: 500; }
.showskills-container .srr-event {
  flex-shrink: 0; font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ev, var(--gold-deep));
  background: var(--ev-soft, var(--gold-soft));
  border: 1px solid var(--ev-line, var(--gold-line));
  border-radius: var(--r-pill); padding: 3px 11px;
}
.showskills-container .srr-levels { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ============================================================
   EVENTS WIZARD  (scoped under .wizard-container)
   ============================================================ */
.wizard-container {
  max-width: 820px; margin: 22px auto; padding: 34px 30px 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.wizard-container h1 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -.015em;
  text-align: center; color: var(--ink); margin: 0 0 6px;
}
.wizard-container h1::before {
  content: 'Our Gymnastics · Requirements';
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.wizard-container .subtitle { text-align: center; color: var(--ink-soft); margin: 0 auto 34px; font-size: 15px; }

.wizard-step { margin-bottom: 26px; }
.wizard-step.hidden { display: none; }
.step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step-number {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper-2); color: var(--muted);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1.5px solid var(--line-2); transition: all .2s;
}
.step-number.active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.step-number.completed { background: var(--gold); color: #201a08; border-color: var(--gold); }
.step-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: 19px; font-weight: 600; color: var(--ink); }
.step-title.muted { color: var(--muted); }

.options-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; padding-left: 42px; }
.option-btn {
  padding: 13px 24px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  cursor: pointer; min-width: 96px;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.option-btn:hover { background: var(--paper); border-color: var(--gold); color: var(--gold-deep); transform: translateY(-1px); }
.option-btn.active {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.level-btn { padding: 10px 16px; min-width: 78px; }
.event-btn { padding: 15px 26px; min-width: 100px; }

/* B2b (A7): a program that exists in the taxonomy but has no requirements yet renders as a
   visible, deliberately inert card — the honest answer to "is DP coming?" instead of the old
   dead-end that let you click through to an empty page. Rendered as a <span>, so it is
   unclickable by construction rather than by a JS guard. */
.option-btn.coming-soon {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted);
  background: var(--paper);
  border-style: dashed;
  border-color: var(--line-2);
  cursor: default;
}
.option-btn.coming-soon:hover {
  background: var(--paper); border-color: var(--line-2); color: var(--muted); transform: none;
}
.soon-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 2px 7px;
}

@media (max-width: 640px) {
  .showskills-container, .wizard-container { padding: 20px 16px 32px; margin: 12px auto; border-radius: var(--r-md); }
  .options-row { padding-left: 0; }
  .option-btn { padding: 11px 16px; font-size: 14px; min-width: 76px; }
  .level-btn { padding: 8px 12px; min-width: 60px; }
  /* Keep the event tab strip on one line so the active tab still merges
     into the panel below it (wrapping would split them across rows). */
  .showskills-container .event-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .showskills-container .event-tabs::-webkit-scrollbar { display: none; }
  .showskills-container .event-tab { flex: 0 0 auto; }
  .showskills-container .results-panel { padding: 16px; }
}

/* ── F11 · Contributor name → profile link ───────────────────────────────
   Rendered by user_lib.php's renderUsername(). Deliberately understated: a
   username appears dozens of times on a busy skill page, so full link styling
   would turn the page into a wall of blue. Inherits colour, underlines on
   hover only. Always emitted when the user has a username — even when their
   profile is private (profile.php renders an explicit private state; a MISSING
   link would read as the site being broken, which is the whole point). */
.contributor-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent);
}
.contributor-link:hover,
.contributor-link:focus-visible {
  color: var(--gold-deep, #8a6d1f);
  border-bottom-color: currentColor;
}
.contributor-link:focus-visible { outline: 2px solid var(--gold-line, #d4b978); outline-offset: 2px; }

/* ── C3 · Certified Judge badge ──────────────────────────────────────────
   Inline chip beside a contributor's name (rendered by user_lib.php's
   renderUsername()). Navy = scholarly authority, distinct from the gold
   contribution accents. Only appears for verified, non-expired judges. */
.judge-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.55;
  vertical-align: middle;
  white-space: nowrap;
}
.judge-badge-icon { font-size: 0.95em; }

/* 🛑 THE `.trust-tier` RULES ARE GONE — five selectors (.trust-tier, -2, -3, -4) styling the C2
   activity pill that user_lib.php's trustBadge() rendered beside a contributor's name. `G9b`
   (`SK_14036`, 2026-09-14) deleted trustBadge() and the whole tier engine on Alex's decision
   (🔔 ① of ../CLAUDE/plans/g9/design.md), so nothing in the module emits the class any more and
   the rules were unreachable. Do not re-add them for the award mark: that has its own
   `.award-mark` / `.award-ctl` styling and is a different claim. */

/* SK_13183 · platform verified-org chip — rendered by user_lib.php's orgBadge(), third and last
   in renderUsername(). Says the contributor is attached to an org account whose gym passed the
   platform verification check (ogVerified('account', id, 'org')); it is NOT an endorsement and
   NOT an entitlement.
   Green (--good/--good-soft, the module's existing designed pair) so it reads as a third,
   independent axis: navy = judging authority, quiet grey/gold = activity, green = verified.
   Soft-filled rather than solid so it stays lighter than the navy judge badge — the judge
   credential is the stronger claim about the person, this one is about their gym. */
.org-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--good, #2f6b3d) 30%, transparent);
  background: var(--good-soft, #e2efe3);
  color: var(--good, #2f6b3d);
  font-family: var(--font-body);
  font-size: 0.64em;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.7;
  vertical-align: middle;
  white-space: nowrap;
}
.org-badge-icon { font-size: 0.95em; line-height: 1; }

/* ============================================================
   SKILLS FRONT PAGE  (M3 — scoped under .skills-home)
   The page is `class="wrap skills-home"`: `.wrap` is the existing canvas hook (it triggers the
   paper backdrop and neutralises the shared white site panel), so this block only has to supply
   layout. Adding a class here rather than extending the three `.showskills-container,
   .wizard-container, .wrap` selectors keeps every existing page byte-identical.
   ============================================================ */
.skills-home {
  max-width: var(--max);
  margin: 22px auto;
  padding: 30px 30px 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-align: left;   /* site chrome wraps pages in <center>; opt back out */
}

/* Primary/secondary calls to action. */
.skills-home .home-shell-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}
.skills-home .home-primary,
.skills-home .home-secondary {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow .15s ease, filter .15s ease;
}
.skills-home .home-primary {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold-deep);
}
.skills-home .home-primary:hover { box-shadow: 0 4px 16px rgba(196,148,47,.35); filter: brightness(1.03); }
.skills-home .home-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.skills-home .home-secondary:hover { background: var(--paper-2); }
.skills-home .home-primary:active,
.skills-home .home-secondary:active { transform: translateY(1px); }

/* ---- M3.2 · evergreen modules: search, apparatus tiles, level chips, switchboard ---- */
.skills-home .home-section { margin: 34px 0 0; }
.skills-home .home-section-h,
.skills-home .home-search-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.skills-home .home-section-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Search — the widest single target on the page. */
.skills-home .home-search { margin: 26px 0 0; }
.skills-home .home-search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.skills-home .home-search-input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;              /* 16px avoids iOS Safari's focus zoom */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.skills-home .home-search-input::placeholder { color: var(--muted); }
.skills-home .home-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.skills-home .home-search-hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.skills-home .home-search-hint a { color: var(--gold-deep); text-decoration: underline; }

/* Apparatus tiles — each carries its own .ev-<slug> tint via apparatusClass(). */
.skills-home .home-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.skills-home .home-event {
  display: flex;
  flex-direction: column;      /* name over its M3.4 skill-count subtitle */
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 92px;
  padding: 16px;
  border-radius: var(--r-md);
  text-decoration: none;
  /* Falls back to neutral paper when apparatusClass() returned '' (unknown event) — untinted
     rather than mis-tinted, matching eventSlug()'s own contract. */
  background: var(--ev-soft, var(--paper-2));
  border: 1px solid var(--ev-line, var(--line-2));
  color: var(--ev, var(--ink));
  transition: transform .12s ease, box-shadow .15s ease;
}
.skills-home .home-event:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.skills-home .home-event-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.skills-home .home-event-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* ⚠️ NO `opacity` here — X3, 2026-07-25. `opacity:.75` blended the apparatus hue toward its own
     tinted background and took these counts to 2.89–3.33:1, the worst contrast on the site. Opacity
     is the trap: it looks like a subtlety knob and is actually a contrast knob, and unlike a colour
     token nothing about the declaration says which pair it is damaging. If these ever need to read
     softer, pick a lighter TOKEN and measure it — don't reach for opacity. */
}

/* Level chips. */
.skills-home .home-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.skills-home .home-level {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.skills-home .home-level:hover { background: var(--gold-soft); border-color: var(--gold-line); }

/* Program switchboard. `.is-soon` is a <div>, not an <a> — see the A7 note in index.php. */
.skills-home .home-programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.skills-home .home-program {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
}
.skills-home .home-program.is-live { border-color: var(--gold-line); background: var(--gold-soft); }
.skills-home .home-program.is-live:hover { box-shadow: var(--shadow-md); }
.skills-home .home-program.is-soon { background: var(--paper-2); color: var(--ink-soft); }
.skills-home .home-program-org {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.skills-home .home-program-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}
.skills-home .home-program-meta { font-size: 13px; color: var(--ink-soft); }

/* ---- M3.3 · community modules: activity, popular, unanswered, needs-content ---- */
.skills-home .home-modules {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}
.skills-home .home-module {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
/* The needs-content strip reads best full-width under the three cards. */
.skills-home .home-module--wide { grid-column: 1 / -1; }
.skills-home .home-module-lede { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.skills-home .home-empty { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.skills-home .home-empty a { color: var(--gold-deep); text-decoration: underline; }

/* Recent activity feed. */
.skills-home .home-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.skills-home .home-feed-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.skills-home .home-feed-item:last-child { padding-bottom: 0; border-bottom: none; }
.skills-home .home-feed-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.skills-home .home-feed-gist { color: var(--ink); text-decoration: none; }
a.skills-home .home-feed-gist:hover, .skills-home a.home-feed-gist:hover { text-decoration: underline; }
.skills-home .home-feed-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Popular skills — an ordered list with its own numerals. */
.skills-home .home-poplist { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.skills-home .home-poplist-item { font-size: 14px; }
.skills-home .home-poplist-item a { color: var(--ink); font-weight: 600; text-decoration: none; }
.skills-home .home-poplist-item a:hover { text-decoration: underline; }
.skills-home .home-poplist-count { display: block; font-size: 12px; color: var(--muted); }

/* Unanswered questions. */
.skills-home .home-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.skills-home .home-qlist-item { font-size: 14px; line-height: 1.4; }
.skills-home .home-qlist-item a { color: var(--ink); text-decoration: none; }
.skills-home .home-qlist-item a:hover { text-decoration: underline; color: var(--gold-deep); }

/* Needs-content chips — each tinted by apparatus, same .ev-<slug> tokens as the tiles. */
.skills-home .home-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.skills-home .home-needs-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--ev-soft, var(--paper-2));
  border: 1px solid var(--ev-line, var(--line-2));
}
.skills-home .home-needs-item a { color: var(--ev, var(--ink)); font-weight: 600; text-decoration: none; }
.skills-home .home-needs-item a:hover { text-decoration: underline; }
.skills-home .home-needs-ev {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- M3.4 · quick-start chips + rules timeline (both hidden until their source has data) ---- */
.skills-home .home-quickstart { display: flex; flex-wrap: wrap; gap: 8px; }
.skills-home .home-quick-chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-deep);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease, box-shadow .15s ease;
}
.skills-home .home-quick-chip:hover { box-shadow: var(--shadow-md); }

.skills-home .home-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.skills-home .home-rules-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.skills-home .home-rules-item:last-child { padding-bottom: 0; border-bottom: none; }
.skills-home .home-rules-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.skills-home .home-rules-summary { flex: 1 1 220px; color: var(--ink); }
.skills-home .home-rules-summary a { color: var(--ink); text-decoration: none; }
.skills-home .home-rules-summary a:hover { text-decoration: underline; color: var(--gold-deep); }

/* ==== F7 — shared copy-link affordance + deep-link flash ==============
   Used by skill.php, skill/skill_details.php and event.php (permalink_lib.php's
   renderCopyLink + js/copylink.js). One home so every surface matches. */
.sp-copylink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12.5px; line-height: 1;
  opacity: .5; flex-shrink: 0;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
}
.sp-copylink:hover { opacity: 1; background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-deep) }
.sp-copylink:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 1px }
.sp-copylink.is-copied { opacity: 1; background: var(--good-soft); border-color: #a9cfae; color: var(--good) }
.sp-copylink-icon { pointer-events: none }
.answer-actions { margin-top: 6px }

/* brief highlight when an F7 #<type>-<id> deep link lands on an item (also in
   skill/skill_tabs.css for the skill page; identical rule, harmless duplicate). */
.sp-anchor-flash { animation: sp-anchor-flash 1.6s ease-out; }
@keyframes sp-anchor-flash {
  0%, 40% { box-shadow: 0 0 0 3px var(--gold-soft), 0 0 0 4px var(--gold); }
  100% { box-shadow: 0 0 0 3px transparent, 0 0 0 4px transparent; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   F14c — ACCOUNT-OWNED CUSTOM SKILLS: the my-skills page, browse's Community
   control, and the "community-contributed" badge on skill.php.

   ⚠️ IT LIVES IN codex.css, THE SHARED SHEET, AND THAT IS WHY IT MOVES NO GOLDEN.
   The goldens compare HTML; adding rules here changes no markup. The same reasoning
   put renderCopyLink()'s .sp-copylink here at F7.

   ⚠️ EVERY COLOUR PAIR BELOW WAS MEASURED, NOT EYEBALLED (X3's rule — seven palette
   tokens shipped at 2.89–4.33:1 and every one of them looked fine). Checked against
   each surface it actually lands on, WCAG AA 4.5:1:
     --gold-deep  #88651c on --gold-soft #f6ecd4 ....... 5.09:1
     --gold-deep  #88651c on --card     #ffffff ........ 5.75:1
     --ink-soft   #4b4e58 on --paper-2  #efeadf ........ 7.29:1
     --muted      #6e6a5b on --card     #ffffff ........ 5.28:1
     --bad        (see below) on --card ................ inherited, unchanged
   ⚠️ No `opacity` is used to soften any text here — it blends the foreground toward
   whatever is behind it and is a contrast knob wearing a subtlety knob's clothes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the community-contributed badge ─────────────────────────────────────────
   ⚠️ NOT decoration and not a warning. Publishing is IMMEDIATE and unreviewed
   (design decision #5), so this chip is the ONLY thing telling a reader that a
   skill is not part of the Code of Points catalog. It is deliberately styled like
   the canonical `.alias--canonical` family — informative, not alarming — because a
   community skill is legitimate content, not a defect. */
.skill-community-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  color: var(--gold-deep);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  vertical-align: middle;
}
.skill-community-badge--private { background: var(--paper-2); border-color: var(--line-2); color: var(--ink-soft) }

/* ── browse.php's per-event Community control ────────────────────────────────
   A chip in the group-chip row, because it answers the same question those chips
   do ("which slice of this apparatus?"). ⚠️ It is NOT a group: community skills
   have no decimal_code, so selecting it CLEARS the group filter rather than adding
   to it. Styled to read as a sibling of the group chips but distinguishable — same
   shape, gold fill instead of the neutral one. */
.group-chip--community { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-deep) }
.group-chip--community.active { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff }
.group-chip--community .gc-num { font-variant-numeric: tabular-nums }

.community-note {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.5;
}
.community-list { display: flex; flex-direction: column; gap: 2px }

/* ── /skills/my ──────────────────────────────────────────────────────────────
   Wide content (the action row) scrolls inside its own container rather than
   letting the page body scroll horizontally — X3 §8 checks 390px both ways. */
.skills-my { max-width: 900px }
.cs-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; margin: 0 0 20px;
}
.cs-h2 { margin: 0 0 6px; font-size: 18px; color: var(--ink) }
.cs-note, .cs-empty { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55 }
.cs-empty { margin-bottom: 0 }
.cs-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }
.cs-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px }
.cs-field--grow { flex: 1 1 260px }
.cs-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft) }
.cs-field input, .cs-field select {
  padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px;
  max-width: 100%;
}
.cs-btn {
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px;
  cursor: pointer; white-space: nowrap;
}
.cs-btn:hover { background: var(--paper-2) }
.cs-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px }
.cs-btn--primary { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff }
.cs-btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink) }
.cs-btn--danger { color: var(--bad, #8c2f2f); border-color: var(--line-2) }

.cs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.cs-item {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--ev, var(--gold));
  border-radius: var(--r-sm); background: var(--paper);
}
.cs-item-main { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0 }
.cs-item-name { font-weight: 600; color: var(--ink); text-decoration: none }
.cs-item-name:hover { text-decoration: underline }
.cs-item-ev { font-size: 12.5px; color: var(--muted) }
.cs-item-actions { display: flex; gap: 6px; flex-wrap: wrap }
.cs-chip { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600 }
.cs-chip--public  { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-deep) }
.cs-chip--private { background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-soft) }
.cs-foot { margin: 6px 0 0; font-size: 14px }

/* F14c follow-on — the "+ Add a skill" entry point on browse. Sits in the filter bar and reuses
   .level-chip's shape so it reads as a sibling control rather than a call to action shouting over
   the directory. Logged-in only, so it never appears in a golden. */
.browse-mine { display: flex; align-items: center }
.browse-mine .level-chip { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold-deep); font-weight: 600 }
.browse-mine .level-chip:hover { background: var(--gold-line) }

/* ── F8d — the clip-request block (skill page Overview) and the board rows ──────────────────
   Lives in the SHARED stylesheet on purpose, exactly as F7's .sp-copylink does: codex.css is
   already linked by every page that renders these, so adding rules here emits no markup and
   moves no golden by itself. (F8a's clips.css is a separate file because its block is
   $clipCount-gated and must ship ZERO bytes on a clip-less page; this block is the opposite —
   it renders on every clip-less skill, which is nearly all of them.)
   ⚠️ NO NEW COLOUR TOKENS. Every value below is an existing measured one (X3: WCAG AA is
   4.5:1, and --muted in particular is checked against --paper, --paper-2 AND --gold-soft).
   Never soften text with `opacity` — that blends toward whatever is behind it. */
/* 🛑 THE SURFACE IS `--card`, AND IT WAS `--paper-2` UNTIL LIGHTHOUSE SCORED IT. Measured, not
   eyeballed: `--gold-deep` on `--paper-2` is **4.46:1** — under the 4.5 AA floor — and this block
   puts two gold-deep links on its own background (the `.loginPrompt` log-in link and the board
   link). It took the skill page from 100 to 97 and it looked completely fine on a good monitor,
   which is exactly the X3 lesson: a foreground must be checked against EVERY surface it lands on,
   not just --card/--paper. On `--card` the same two links measure 5.35:1.
   ⚠️ The 4.46 is a LATENT PALETTE GAP, not this block's bug — `--gold-deep` was tuned against
   --paper / --card / --gold-soft, and nothing had put it on --paper-2 before. Fixed here rather
   than by darkening the token, because a site-wide colour change is not F8d's to make; the
   measurement is recorded so the next panel does not rediscover it. */
.sp-clipreq {
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.sp-clipreq-count { margin: 4px 0 10px; font-size: 14.5px; color: var(--ink-soft) }
.sp-clipreq-count strong { color: var(--ink) }
.sp-clipreq .clipRequestForm { display: inline-block; margin: 0 }
.sp-clipreq-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold-deep);
}
.sp-clipreq-btn:hover { background: var(--gold-line) }
.sp-clipreq-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px }
.sp-clipreq-btn[disabled] { cursor: progress }
/* Already asked: quieter, because the interesting state is the one you can still act on. */
.sp-clipreq-btn--on { background: var(--paper-2); border-color: var(--line-2); color: var(--ink-soft) }
.sp-clipreq-btn--on:hover { background: var(--paper-2) }
.sp-clipreq-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted) }
.sp-clipreq-more { margin: 10px 0 0; font-size: 13px }
.sp-clipreq-more a { color: var(--gold-deep) }
/* Fulfilled: the request succeeded, so the block stops asking and just says thank you. */
.sp-clipreq--done { background: var(--good-soft, var(--paper-2)); border-color: var(--line) }
.sp-clipreq--done .sp-clipreq-count { margin-bottom: 0 }

/* The board at /skills/requests. One row per skill, ranked by how many people asked. */
.reqboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.reqboard-item {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--ev, var(--gold));
  border-radius: var(--r-sm); background: var(--paper);
}
.reqboard-main { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; min-width: 0 }
.reqboard-rank { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums }
.reqboard-name { font-weight: 600; color: var(--ink); text-decoration: none }
.reqboard-name:hover { text-decoration: underline }
.reqboard-ev { font-size: 12.5px; color: var(--muted) }
.reqboard-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.reqboard-count {
  padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-deep);
  white-space: nowrap;
}
.reqboard-empty { margin: 12px 0; color: var(--ink-soft) }
.reqboard-foot { margin: 14px 0 0; font-size: 14px }

/* ── F10 — resource kind (FORMAT) chips + the direct-text body ──────────────────────────────
   Lives in the SHARED stylesheet on purpose (the F7 .sp-copylink precedent): codex.css is
   already linked by every page that renders a resource item — skill.php, skill_details.php,
   connection.php — so adding rules here emits no markup and moves no golden by itself.
   The chip states FORMAT (kind); the .tag chips beside it state PURPOSE (Drill/Cue) — two
   axes, two chip families, never merged (D5).
   ⚠️ COLOUR PAIRS MEASURED, NOT EYEBALLED (X3: WCAG AA 4.5:1, against the chip's own opaque
   background — the only surface each foreground lands on):
     link      --ink-soft #4b4e58 on --paper-2  #efeadf  = 6.92:1
     video     --gold-deep #88651c on --gold-soft #f6ecd4 = 4.55:1
     document  --ink-navy #14243f on --blue-soft #e8eef7  = 13.30:1
     text      --good     #2f6b3d on --good-soft #e2efe3  = 5.37:1
   🛑 never --gold-deep on --paper-2 (4.46:1 — the recorded latent palette gap), and never
   `opacity` to soften text. */
.res-kind {
  padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
}
.res-kind--link     { background: var(--paper-2);   border: 1px solid var(--line-2);   color: var(--ink-soft) }
.res-kind--video    { background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-deep) }
.res-kind--document { background: var(--blue-soft); border: 1px solid #c7d5e8;          color: var(--ink-navy) }
.res-kind--text     { background: var(--good-soft); border: 1px solid #a9cfae;          color: var(--good) }

/* The write-up payload inside an item's detail area. Escaped plaintext + nl2br — the renderer
   guarantees that; this only spaces it. Separated from the optional description above it. */
.res-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); white-space: normal }