/* ============================================================
   procedures-pills.css — Version C "Catalogue Index Entries"
   ------------------------------------------------------------
   ADDITIVE · PAGE-SCOPED (body.page-procedures) · loaded AFTER style.css.

   Promotes the approved Version C treatment for the procedure pills on
   procedures.html + ru/procedures.html. The current pills read as filter
   chips / SaaS tags; this re-frames them as the typeset entries of a
   surgical-monograph index — quiet, editorial, medically credible.

   GOVERNANCE
     · Edits NOTHING. Every rule is scoped under `.page-procedures` and this
       sheet is linked last, so it overrides the (frozen) base pill rules in
       style.css by ordinary cascade — style.css / procedures.css / main.js /
       style.ru.css are untouched. Same opt-in page-scope pattern as
       about.css (body.page-about) and rhythm.css (body.rhythm-tuned).
     · Linked ONLY on the two procedures pages. `.tag-study` / `.proc-card`
       exist only there, so there is zero risk of bleed elsewhere.

   DIRECTION (locked)
     · no enclosing capsule / no 999px radius / no chip
     · hairline underline = the clickable (index/link) affordance
     · leading "study available" ring marker (hollow → filled)
     · active state = clay text + 2px clay underline + filled marker
       (the old solid-clay fill is retired)
     · no nude/skin tone · no shadow · no glow · no animation
     · palette unchanged: tokens reused from style.css :root

   ACCESSIBILITY
     · markup, <button> semantics, aria-expanded, and the study-panel JS
       (main.js, keyed off data-study/aria-expanded) are untouched
     · focus-visible ring preserved (re-declared with a larger offset to
       suit the borderless form)
     · tap rows ≈ 27–28px tall (≥ WCAG 2.2 AA 24px minimum)
   ============================================================ */

/* Index spacing for both pill lists (study + plain) */
.page-procedures .proc-card ul.tags,
.page-procedures .tags--study { gap: .3rem 1.1rem; align-items: baseline; }

/* Keep the study <li> as an invisible wrapper — the .tag-study button
   carries the look (re-asserts the base intent at higher specificity so the
   underline is never doubled on wrapper + button). */
.page-procedures .proc-card .tags--study li { border: 0; padding: 0; background: none; list-style: none; }

/* Editorial index-entry treatment — study buttons + PLAIN tags only */
.page-procedures .tag-study,
.page-procedures .proc-card .tags:not(.tags--study) li {
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.3;
  padding: .42rem 0 .3rem;
  border-bottom: 1px solid var(--border-strong);   /* hairline underline affordance */
}
.page-procedures .tag-study {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.page-procedures .proc-card .tags:not(.tags--study) li {
  color: var(--text-muted);
  border-bottom-color: var(--border);              /* softer rule for non-interactive entries */
}

/* Leading "study available" ring marker (study buttons only); retire the trailing dot */
.page-procedures .tag-study::after { display: none; }
.page-procedures .tag-study::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  background: transparent;
  flex: 0 0 auto;
}

/* Hover — quiet: text to graphite, underline + marker to clay (no fill / shadow / glow) */
.page-procedures .tag-study:hover { color: var(--text); border-bottom-color: var(--accent); }
.page-procedures .tag-study:hover::before { background: var(--accent); border-color: var(--accent); }

/* Focus-visible — preserved (larger offset suits the borderless entry) */
.page-procedures .tag-study:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Active = "opened surgical study": clay text + 2px clay underline + filled marker */
.page-procedures .tag-study[aria-expanded="true"] {
  color: var(--accent);
  background: transparent;
  border-bottom: 2px solid var(--accent);
}
.page-procedures .tag-study[aria-expanded="true"]::before { background: var(--accent); border-color: var(--accent); }