/* ---------- Field note ---------- */
.fn-how { margin:40px 0 0; padding:16px 20px; border-radius:12px; background:var(--mist); font-size:15px; line-height:23px; color:var(--ink-muted); }
.fn-how b { color:var(--ink); font-weight:600; }
.fn-fig { margin:36px -48px 0; padding:28px 32px 20px; border-radius:var(--r-md); background:var(--app-tint); }
.fn-fig h3 { margin:0 0 18px; font-size:15px; font-weight:600; color:var(--app-ink); }
.fn-fig figcaption { margin-top:16px; font-size:13px; line-height:19px; color:var(--ink-muted); }
.fn-path { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fn-path li { display:grid; grid-template-columns:150px minmax(0,1fr) 116px; gap:16px; align-items:center; font-size:15px; }
.fn-path .st { font-weight:600; line-height:20px; }
.fn-path .st small { display:block; font-size:12.5px; font-weight:500; color:var(--ink-muted); }
.fn-path .fn-bar { position:relative; height:30px; }
.fn-path .fn-bar i { position:absolute; inset:0 auto 0 0; width:calc(var(--w) * 1%); border-radius:8px; background:color-mix(in srgb, var(--app-ink) 22%, var(--paper)); transition:width 1s var(--ease); }
.fn-path .fn-bar b { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.fn-path .drop { font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums; text-align:right; }
.fn-path li.leak .fn-bar i { background:var(--risk-soft); box-shadow:inset 0 0 0 1.5px var(--risk); }
.fn-path li.leak .drop, .fn-path li.leak .fn-bar b { color:var(--risk); font-weight:600; }
.fn-fig.armed .fn-path .fn-bar i { width:0; }
.prose h3.fn-h3 { margin:0; font-size:21px; line-height:28px; font-weight:600; letter-spacing:-.012em; }
.fn-stalls { list-style:none; margin:28px 0 0; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:0; }
.fn-stalls > li { counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:0 8px; padding:28px 0; border-top:1px solid var(--line); }
.fn-stalls > li:last-child { border-bottom:1px solid var(--line); }
.fn-stalls > li::before { content:counter(s); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--app-tint); color:var(--app-ink); font-size:13.5px; font-weight:600; }
.fn-stalls p { margin:8px 0 0 !important; font-size:17.5px; line-height:28px; color:var(--ink-muted); }
.fn-meta { margin:16px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.fn-meta div { padding:12px 14px; border-radius:10px; background:var(--mist); }
.fn-meta dt { font-size:12.5px; font-weight:600; color:var(--ink-subtle); }
.fn-meta dd { margin:3px 0 0; font-size:14.5px; line-height:21px; color:var(--ink); }
.fn-track { display:flex; height:46px; border-radius:10px; overflow:hidden; background:var(--paper); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 18%, transparent); }
.fn-track span { flex:var(--d) 0 0; min-width:0; }
.fn-track .w { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--app-ink) 14%, var(--paper)) 0 6px, color-mix(in srgb, var(--app-ink) 7%, var(--paper)) 6px 12px); }
.fn-track .k { background:var(--app-ink); }
.fn-track .t { background:color-mix(in srgb, var(--app-ink) 32%, var(--paper)); }
.fn-track .m { flex:0 0 4px; background:var(--app-ink); }
.fn-tl { list-style:none; margin:18px 0 0; padding:0; columns:2; column-gap:32px; }
.fn-tl li { break-inside:avoid; display:grid; grid-template-columns:14px 74px 1fr; gap:10px; align-items:baseline; padding:7px 0; font-size:14px; line-height:20px; }
.fn-tl li::before { content:""; width:14px; height:10px; border-radius:3px; background:var(--app-ink); transform:translateY(1px); }
.fn-tl li.w::before { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--app-ink) 30%, var(--paper)) 0 3px, color-mix(in srgb, var(--app-ink) 10%, var(--paper)) 3px 6px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 25%, transparent); }
.fn-tl li.t::before { background:color-mix(in srgb, var(--app-ink) 32%, var(--paper)); }
.fn-tl li.t b { font-weight:500; color:var(--ink-muted); }
.fn-tl .dy { font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.fn-tl b { font-weight:600; } .fn-tl li.w b { font-weight:500; color:var(--ink-muted); }
.fn-sum { display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:20px; font-size:14px; line-height:20px; color:var(--ink-muted); }
.fn-sum b { display:block; font-size:30px; line-height:1.1; font-weight:500; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.fn-sum .wt b { color:var(--app-ink); }
.defcard.fn-def .dc-top { background:var(--app-tint); } .defcard.fn-def .dc-top span { color:var(--app-ink); }
.tests.fn-qs li::before { background:var(--app-tint); } .tests.fn-qs li::after { border-color:var(--app-ink); }
.fn-end { margin-top:28px !important; padding:22px 24px; border-left:3px solid var(--app-ink); background:var(--app-tint); border-radius:0 12px 12px 0; font-size:18px; line-height:29px; }
.fn-related { padding-block:24px 112px; }
.fn-related .read-grid { margin-top:32px; }
@media (max-width: 900px) { .fn-fig { margin-inline:0; } }
@media (max-width: 760px) {
  .fn-fig { padding:22px 18px 16px; }
  .fn-path li { grid-template-columns:1fr auto; gap:6px 12px; }
  .fn-path .st { grid-column:1; } .fn-path .drop { grid-column:2; grid-row:1; }
  .fn-path .fn-bar { grid-column:1 / -1; }
  .fn-meta { grid-template-columns:1fr; }
  .fn-stalls > li { grid-template-columns:1fr; gap:10px; }
  .fn-tl { columns:1; }
}
@media (prefers-reduced-motion: reduce) { .fn-path .fn-bar i { transition:none; } }