/* =========================================================================
   netex · /method/ (templates/method.php) · PATH as an engineering drawing
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero (Indigo) ---------------------------------------------------------- */
.me-hero { --hero-pad: var(--s-6); padding-bottom: calc(var(--ch-v) + var(--s-7)); }
.me-hero__grid { row-gap: var(--s-7); align-items: center; }
.me-hero__copy { display: grid; align-content: start; }
.me-hero .nx-crumbs { margin-bottom: var(--s-4); }
.me-hero .nx-eyebrow { margin-bottom: var(--s-3); }
.me-hero__h1 { display: grid; gap: var(--s-5); max-width: none; font: inherit; letter-spacing: 0; }
.me-hero__kicker { display: block; max-width: 30ch; font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; color: var(--fg); }
.me-hero__display {
	display: block;
	--flar: 0;
	max-width: 12ch;
	font-size: clamp(2.375rem, 1rem + 4.1vw, 5rem);
	font-weight: var(--w-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
	color: var(--fg);
	font-variation-settings: "FLAR" 0, "VOLM" 0;
}
.me-hero__sub { margin-top: var(--s-6); max-width: 50ch; }
.me-hero__actions { margin-top: var(--s-6); }
.me-hero__fig { margin: var(--s-3) 0 0; }
.me-hero__fig .nx-crop { --rule: rgb(241 238 230 / .5); }
@media (min-width: 1024px) {
	.me-hero__copy { grid-column: 1 / span 7; }
	.me-hero__fig { grid-column: 9 / -1; }
}

/* ---- s2 why --------------------------------------------------------------------- */
.me-why__body { margin-top: var(--s-7); max-width: 52ch; }

/* ---- s3 PATH: the diagonal and the stage sheets --------------------------------------- */
.me-path__grid { display: grid; gap: var(--s-7); align-items: start; }
.me-path__draw { display: grid; gap: var(--s-5); }
.me-diag { width: 100%; height: auto; max-width: 34rem; overflow: visible; }
.me-diag__grid path { fill: none; stroke: var(--rule-light); stroke-width: 1; }
.me-diag__bar { fill: none; stroke-width: 12; stroke-linecap: square; }
.me-diag__pt circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; transition: fill var(--dur-ui) var(--ease-mech); }
.me-diag__pt .me-diag__cross { stroke: var(--ink); stroke-width: 1.5; }
/* The stage codes (0 · P · A · T · H) are set in Commissioner: JetBrains Mono's dotted zero reads as a Greek Θ. */
.me-diag__code { font: 700 22px var(--f-sans); fill: var(--ink); }
.me-code { font-family: var(--f-sans); font-weight: 700; letter-spacing: 0; }
.me-diag__dim { font: 500 11px var(--f-mono); fill: var(--steel-dark); letter-spacing: .04em; }
.me-diag__dim--inf { font-size: 19px; } /* «∞» comes from a fallback face (no theme font has it): a size up to match the other dimensions */
.me-diag__pt.is-on circle { fill: var(--indigo); stroke: var(--indigo); }
.me-diag__pt.is-on .me-diag__code { fill: var(--indigo); }
.me-diag__pt { cursor: pointer; }
.me-path__nav { display: grid; gap: 0; border-top: var(--bw) solid var(--rule); }
.js .me-path__nav { display: grid; }
.me-path__nav button { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--rule); text-align: left; color: var(--fg); transition: background-color var(--dur-ui) var(--ease-mech); }
.me-path__nav button b { font: 700 1.125rem/1 var(--f-sans); color: var(--fg-2); }
.me-path__nav button span { font: var(--w-ui) .9375rem/1.25 var(--f-sans); }
.me-path__nav button[aria-selected="true"] { background: var(--indigo); color: var(--paper); }
.me-path__nav button[aria-selected="true"] b { color: var(--cyan); }
@media (hover: hover) { .me-path__nav button:not([aria-selected="true"]):hover { background: var(--bg-2); } }
.me-path__nav button:focus-visible { outline-offset: -3px; }

.me-path__stages { display: grid; gap: var(--s-6); }
.js .me-path.is-tabs .me-stage:not(.is-current) { display: none; }
.me-stage { display: grid; gap: var(--s-4); }
.me-path.is-tabs .me-stage.is-current { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; filter: drop-shadow(10px 10px 0 var(--indigo)); }
html.rm .me-path .me-stage.is-current { animation: none; }
.me-stage__title { font-size: var(--t-h3); line-height: 1.1; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.me-stage__code { font: 700 .9em/1 var(--f-sans); color: var(--indigo); }
.me-stage__dim { display: grid; grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr); align-items: center; gap: var(--s-2); font: 500 .75rem/1 var(--f-mono); color: var(--fg-2); letter-spacing: .04em; }
.me-stage__dim i { position: relative; height: 1px; background: var(--fg-2); }
.me-stage__dim i::before, .me-stage__dim i::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--fg-2); transform: rotate(43deg); }
.me-stage__dim i:first-child::before { left: 0; }
.me-stage__dim i:last-child::after { right: 0; }
.me-stage__rows { margin: 0; display: grid; gap: 0; container-type: inline-size; }
.me-stage__rows div { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.me-stage__rows dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.me-stage__rows dd { margin: 0; line-height: 1.5; }
.me-stage__gate dd { font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; color: var(--indigo); }
@container (min-width: 540px) { .me-stage__rows div { grid-template-columns: 10rem minmax(0, 1fr); } }

.me-sample summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; font: var(--w-ui) .9375rem/1.3 var(--f-sans); color: var(--link); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.me-sample summary::-webkit-details-marker { display: none; }
.me-sample__off { display: none; }
.me-sample[open] .me-sample__on { display: none; }
.me-sample[open] .me-sample__off { display: inline; }
.me-sample__page { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-5); background: var(--paper-2); border: 1px solid var(--rule); background-image: linear-gradient(var(--rule-light) 1px, transparent 1px), linear-gradient(90deg, var(--rule-light) 1px, transparent 1px); background-size: 24px 24px; }
.me-sample[open] .me-sample__page { animation: nx-wipe-in var(--dur-cut) var(--ease-cut) backwards; }
.me-sample__head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); }
.me-sample__title { font-size: var(--t-h4); font-weight: var(--w-h3); }
.me-sample__lines { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.me-sample__fine { font-size: var(--t-small); color: var(--fg-2); }
.me-sample__verdict .xr-contract__stamp { position: static; display: inline-flex; max-width: 100%; white-space: normal; line-height: 1.35; text-transform: none; letter-spacing: 0; font: 600 .875rem/1.35 var(--f-sans); }
.me-sample__table { font-size: .875rem; background: var(--paper); }
/* the process names read as names (as on the X-Ray sample map), not as mono column labels */
.me-sample__table tbody th { font: var(--w-strong) .875rem/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.me-sample__counter .nx-readout__value { font-size: clamp(3rem, 2rem + 3vw, 5rem); color: var(--indigo); }
.me-quad { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: var(--s-5) 0 var(--s-6) var(--s-6); }
.me-quad__cell { display: grid; gap: var(--s-1); align-content: start; min-height: 7rem; padding: var(--s-3); background: var(--paper); border: 1px solid var(--rule); font-size: var(--t-small); line-height: 1.4; }
.me-quad__cell b { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.me-quad__cell--quick { border: 1.5px solid var(--indigo); }
.me-quad__cell--no span { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--fg-2); }
.me-quad__y { position: absolute; left: 0; top: 50%; transform: rotate(-90deg) translate(50%, 0); transform-origin: left top; font: 500 .6875rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.me-quad__x { position: absolute; right: 0; bottom: 0; font: 500 .6875rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.me-charter { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-family: var(--f-serif); }
.me-charter li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.me-charter__box { width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--ink); background: var(--paper); }
.me-charter__sign { margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px dashed var(--fg-2); font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); letter-spacing: .04em; }

@media (min-width: 1024px) {
	.me-path__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
	.me-path__draw { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* ---- s4 the formula tree --------------------------------------------------------------- */
.me-tree { position: relative; display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.me-tree__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.me-tree__wires path { fill: none; stroke: var(--rule-dark); stroke-width: 1.5; transition: stroke var(--dur-ui) var(--ease-mech); }
.me-tree__wires path.is-hot { stroke: var(--cyan); }
.me-tree__col { display: grid; gap: var(--s-4); align-content: center; position: relative; z-index: 1; }
.me-tree__side { display: grid; gap: var(--s-4); position: relative; z-index: 1; }
.me-node { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--ink-2); border: 1px solid var(--rule); transition: border-color var(--dur-ui) var(--ease-mech), background-color var(--dur-ui) var(--ease-mech); }
.me-node:focus-visible { outline-offset: 3px; }
.me-node.is-hot { border-color: var(--cyan); background: var(--ink-3); }
.me-node__name { font: var(--w-h3) 1rem/1.3 var(--f-sans); color: var(--fg); }
.me-node__f { font: 500 .8125rem/1.55 var(--f-mono); color: var(--cyan); }
.me-node__note { font-size: .8125rem; line-height: 1.5; color: var(--fg-2); }
.me-node--side { border-style: dashed; }
@media (min-width: 1024px) {
	.me-tree { grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.6fr) minmax(0, 2.6fr) minmax(0, 2.4fr); column-gap: var(--s-7); row-gap: var(--s-6); }
	.me-tree__side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}
.me-example { display: grid; gap: var(--s-4); max-width: 62rem; }
.me-example__body { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.45; max-width: 60ch; }
.me-example__steps { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.4em; font: 500 .875rem/1.6 var(--f-mono); }
.me-example__steps li::marker { color: var(--sig); }
.me-example__sanity { font-size: var(--t-small); color: var(--fg-2); max-width: 70ch; }

/* ---- s5 rules: a numbered spec sheet ----------------------------------------------------- */
.me-rules__head { margin-bottom: var(--s-7); }
.me-spec { margin: 0; padding: var(--s-5) var(--s-6) calc(var(--s-6) + var(--ch-sheet) * .5); list-style: none; display: grid; }
.me-spec__rule { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.me-spec__rule:first-child { border-top: 0; }
.me-spec__no { font: 700 1rem/1.5 var(--f-mono); color: var(--indigo); }
.me-spec__rule p { line-height: 1.55; max-width: 64ch; }
@media (min-width: 1024px) {
	.me-rules__head { grid-column: 1 / span 4; margin: 0; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
	.me-spec { grid-column: 6 / -1; }
}

/* ---- s6 limits -------------------------------------------------------------------------- */
.me-limits__list { display: grid; gap: var(--s-4); align-content: start; margin-bottom: var(--s-7); }
.me-strike { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.me-strike li { position: relative; padding-left: var(--s-6); font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans); }
.me-strike li::before { content: ""; position: absolute; left: 4px; top: .15em; width: 2px; height: 1.1em; background: var(--molten); transform: rotate(43deg); }
.me-strike s { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--fg-2); color: var(--fg); }
.me-lesson { display: grid; gap: var(--s-3); max-width: 40rem; }
.me-lesson__title { font-size: var(--t-h3); }
.me-lesson__rule { font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; color: var(--indigo); }
@media (min-width: 1024px) {
	.me-limits__list { grid-column: 1 / span 6; margin: 0; }
	.me-lesson { grid-column: 8 / -1; align-self: start; }
}

/* ---- s7 trust ------------------------------------------------------------------------------ */
.me-trust__head { display: grid; gap: var(--s-4); align-content: start; margin-bottom: var(--s-7); }
.me-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.me-lines li { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-6); border-top: var(--bw) solid var(--rule); font-size: 1.0625rem; line-height: 1.5; }
.me-lines li::before { content: ""; position: absolute; left: 4px; top: calc(var(--s-4) + .2em); width: 1.5px; height: 14px; background: var(--sig); transform: rotate(43deg); }
@media (min-width: 1024px) {
	.me-trust__head { grid-column: 1 / span 5; margin: 0; }
	.me-lines { grid-column: 7 / -1; }
}

} /* end @layer pages */