/*
 * templates/method.css -- page-type-specific rules for the 'method' entity type.
 * Part 4 of the load order in docs/DESIGN_SYSTEM.md ("File architecture /
 * load order"): loads after tokens.css, base.css and components.css. Only
 * ADDS rules; every value references a tokens.css variable (var(--...)).
 * The shared page-module primitives this template relies on (.page-head,
 * .module-grid/.module, .stat/.stat-grid, .bullet-list, .related-grid,
 * .formula-block, .source-list, .not-available) already live in
 * components.css -- see docs/DESIGN_SYSTEM.md's "extend, don't duplicate"
 * rule. This file only holds the small flourishes unique to method pages:
 * the numbered step list and the formula block's monospace emphasis.
 */

/* step_by_step renders as an <ol class="bullet-list ordered"> (see
   includes/page-helpers.php render_bullet_list()) -- give method pages their
   own numbered marker treatment instead of the browser default. */
.module-body .bullet-list.ordered{list-style:none;counter-reset:step}
.module-body .bullet-list.ordered li{position:relative;padding-left:8px;counter-increment:step}
.module-body .bullet-list.ordered li:before{
  content:counter(step);
  position:absolute;left:-26px;top:0;
  width:18px;height:18px;border:1px solid var(--navy);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:10px;font-style:italic;color:var(--copper);
}
.module-body .bullet-list.ordered{margin-left:26px}

/* The formula module (identified via render_module()'s data-key attribute)
   gets a tighter title treatment, since it's the single most-referenced
   figure on a method page. */
.module[data-key="formula"] .module-title{letter-spacing:-.02em}
.formula-block{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:0}