/* === The way in (legal pathway), compact in the drawer and full on the region page (MC-LEDGER, design 8.14) ===
   Qualitative orientation, not legal advice, never a rank and never a filter. Class names are the ones
   lib/evidence-render.js legalPathwayHtml emits: .way / .way.compact, .way-tag, .way-sum (dl), .chips / .chip, .dir,
   ol.way-steps with li.gate, .way-out, .way-gaps, .way-foot, .way-more, .way-src, .way-forms, .way-claims, .way-empty.
   The direction chip is one neutral outline whatever the direction: it is never coloured by permissiveness. */

.way { margin-top: var(--s5); border: 1px solid var(--rule-strong); border-radius: var(--r-leaf-s); padding: var(--s5); background: var(--sheet); color: var(--ink); }
.way-tag { font: 600 var(--t-label)/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.way h4 { font: 340 26px/1.15 var(--f-display); letter-spacing: -.012em; margin: var(--s2) 0 0; color: var(--ink); }

.way-sum { margin: var(--s4) 0 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); }
.way-sum dt {
  font: 600 var(--t-label)/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 12px 12px 12px 0; border-top: 1px solid var(--rule);
}
.way-sum dd { margin: 0; font: 400 15.5px/1.55 var(--f-text); color: var(--ink); padding: 9px 0; border-top: 1px solid var(--rule); min-width: 0; overflow-wrap: anywhere; }
.way-sum .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.way-sum .chip { font: 500 12px/1 var(--f-ui); padding: 6px 9px; border: 1px solid var(--rule-strong); border-radius: 11px; color: var(--ink-2); }
.way-sum .chip a { color: inherit; text-decoration: none; }
.way-sum .chip a:hover { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.way-sum .dir { display: inline-block; margin-left: 8px; font: 500 12px/1.3 var(--f-ui); color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 11px; padding: 3px 9px; }
.way-src { font: 400 12.5px/1.4 var(--f-ui); color: var(--ink-3); }
.way-src a, .way-sum a, .way-foot a { color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.way-src a:hover, .way-sum a:hover, .way-foot a:hover { color: var(--accent); }
.meta > .way-src a { display: inline-block; padding-block: 5px; margin-block: -5px; }    /* a source link on its own line is a 25px target (WCAG 2.5.8); the margin keeps the layout */
.way-forms, .way-claims { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.way-forms li, .way-claims li { padding: 3px 0; font: 400 15px/1.5 var(--f-text); }
.way-empty { font-style: italic; color: var(--gap); }   /* an empty first-claim list says so, in the gap colour */

/* full mode: ordered steps on a river-blue stem; a gate is an accent bar (someone else must say yes) */
.way-steps { --stem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='96' viewBox='0 0 12 96'%3E%3Cpath d='M6 0C10 12 2 24 6 36S10 60 6 72 2 90 6 96' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); list-style: none; position: relative; margin: var(--s5) 0 0; padding: 0 0 0 34px; }
.way-steps::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 12px; background: var(--river); opacity: .7; -webkit-mask: var(--stem) repeat-y 50% 0 / 12px 96px; mask: var(--stem) repeat-y 50% 0 / 12px 96px; }
.way-steps li { position: relative; padding: 0 0 var(--s4); }
.way-steps li::before { content: ""; position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--river); }
.way-steps li.gate::before { border-radius: 2px; width: 16px; height: 5px; top: 8px; left: -33px; background: var(--accent); border: 0; }
.way-steps .what { font: 400 15.5px/1.5 var(--f-text); color: var(--ink); }
.way-steps .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font: 400 12px/1.4 var(--f-ui); color: var(--ink-3); }
.way-steps .meta b { font-weight: 600; color: var(--ink-2); }

.way-out { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.way-out b { display: block; font: 600 var(--t-label)/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.way-out ul { list-style: none; margin: 0; padding: 0; }
.way-out li { position: relative; padding: 3px 0 3px 20px; font: 400 15px/1.5 var(--f-text); color: var(--ink); }
.way-out li::before { content: ""; position: absolute; left: 0; top: 1em; width: 11px; border-top: 2.5px solid var(--ink-3); }

.way-gaps { margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1px dashed var(--gap-line); background: var(--gap-wash); border-radius: var(--r-btn); font: 400 14px/1.5 var(--f-text); color: var(--ink-2); }
.way-gaps b { display: block; font: 600 var(--t-label)/1.4 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gap); margin-bottom: 3px; }
.way-gaps ul { margin: 0 0 4px; padding-left: 18px; }

.way-foot { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font: italic 400 14px/1.5 var(--f-text); color: var(--ink-3); }
.way-foot b { font: 600 var(--t-label) var(--f-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }

/* compact (drawer) */
.way.compact { padding: var(--s4); }
.way.compact h4 { font-size: 24px; }
.way-more { display: inline-block; margin-top: var(--s3); font: italic 400 15.5px var(--f-text); color: var(--accent); text-decoration: underline dotted; text-underline-offset: 4px; }
.way-more:hover { color: var(--ink); }

@media (max-width: 767px) {
  .way { padding: var(--s4); }
  .way-sum { grid-template-columns: 1fr; }
  .way-sum dt { padding: 12px 0 2px; }
  .way-sum dd { border-top: 0; padding: 0 0 10px; }
}

/* ==========================================================================
   RESTORED LOOK (2026-10-07): the legal pathway in the old drawer language (paper-2 panel, 2px rule, label/value rows).
   ========================================================================== */
.way { margin: 0 0 24px; padding: 16px 18px; border: 0; border-left: 2px solid var(--ink-3); border-radius: 0; background: var(--paper-2); }
.way-tag { font: 600 10.5px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0.08em; color: var(--ink-3); }
.way h4 { font: 500 17px/1.25 'Spectral', Georgia, serif; letter-spacing: -0.005em; margin: 6px 0 0; }
.way.compact { padding: 16px 18px; }
.way.compact h4 { font-size: 17px; }
.way-sum { grid-template-columns: 132px 1fr; margin: 12px 0 0; }
.way-sum dt { padding: 3px 12px 9px 0; border: 0; font: 600 10.5px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0.06em; }
.way-sum dd { padding: 0 0 9px; border: 0; font: 400 14px/1.55 'Spectral', Georgia, serif; color: var(--ink-2); }
.way-sum .chip { border-radius: 0; font: 500 11.5px/1 'Inter', sans-serif; border-color: var(--rule); background: var(--paper); }
.way-sum .dir { border-radius: 0; font: 500 11px/1.3 'Inter', sans-serif; border-color: var(--rule); }
.way-src { font: 400 11px/1.4 'Inter', sans-serif; }
.way-forms li, .way-claims li { font: 400 14px/1.5 'Spectral', Georgia, serif; }
.way-steps { padding-left: 22px; margin-top: 14px; }
.way-steps::before, .way-steps li::before { display: none; }
.way-steps { list-style: decimal; }
.way-steps li { display: list-item; padding: 0 0 10px 4px; }
.way-steps li.gate { border-left: 2px solid var(--accent); padding-left: 10px; margin-left: -12px; list-style-position: inside; }
.way-steps .what { font: 400 14px/1.5 'Spectral', Georgia, serif; display: inline; }
.way-steps .meta { font: 400 11px/1.4 'Inter', sans-serif; }
.way-out { border-top: 1px dotted var(--rule); }
.way-out li { font: 400 14px/1.5 'Spectral', Georgia, serif; }
.way-gaps { border-radius: 0; font: 400 13.5px/1.5 'Spectral', Georgia, serif; }
.way-foot { border-top: 1px dotted var(--rule); font: italic 400 12.5px/1.5 'Spectral', Georgia, serif; }
.way-more { font: italic 400 14px 'Spectral', Georgia, serif; text-decoration: underline dotted; }
@media (max-width: 767px) { .way { padding: 14px 16px; } .way-sum { grid-template-columns: 1fr; } .way-sum dt { padding-bottom: 0; } }