/* DFT illustration, using the site's shared scientific-diagram palette. */
.dft-page .detail { max-width: none; }
.dft-vision h3 { margin: 25px 0 9px; font: 500 16px/1.5 var(--font-ui); color: #d9e1df; }
.dft-figure { margin: 27px 0 28px; }
.dft-demo { color: #e8e4dd; font-family: var(--font-ui); }
.dft-demo [hidden] { display: none !important; }
.dft-route-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dft-route-cards > div { position: relative; padding: 18px 18px 18px 51px; border: 1px solid #344642; border-radius: 5px; background: #0d1715; }
.dft-route-letter { position: absolute; top: 18px; left: 18px; font: 20px/1.3 var(--font-ui); }
.dft-route-cards h3 { margin: 0 0 8px; font: 500 14px/1.4 var(--font-ui); }
.dft-route-cards p { margin: 0; color:var(--prose); font: calc(14px + var(--prose-size-increase))/1.6 var(--font-body); }
.dft-step { display: flex; gap: 10px; align-items: baseline; margin: 26px 0 16px; font: 500 14px/1.5 var(--font-ui); }
.dft-step > span { color: var(--accent); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.dft-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 17px; }
.dft-controls button { padding: 9px 13px; min-height: 44px; border: 1px solid #344642; border-radius: 5px; background: #111919; color: #d6e1db; font: 13px/1.4 var(--font-ui); cursor: pointer; }
.dft-controls button:hover { background: #1a302b; }
.dft-controls button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: #142e2a; }
.dft-controls button:focus-visible, .dft-method summary:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.dft-chart { padding: 10px 6px 2px; background: #0a1211; border: 1px solid #283936; border-radius: 6px; overflow: hidden; }
.dft-chart svg { display: block; width: 100%; height: auto; font-family: var(--font-ui); }
.dft-chart-compact { display: none; }
.dft-grid { stroke: #233630; stroke-width: 1; }
.dft-axis { stroke: #53665e; stroke-width: 1; fill: none; }
.dft-axis-label { fill: #c5d4cd; font-size: 14px; }
.dft-tick { fill: #aebeb7; font-size: 13px; font-variant-numeric: tabular-nums; }
.dft-route-a { fill: none; stroke: #6cd4c8; stroke-width: 3; }
.dft-route-b { fill: none; stroke: #f3b887; stroke-width: 2.5; stroke-dasharray: 8 5; }
.dft-sample-a { fill: #0a1211; stroke: #6cd4c8; stroke-width: 1.5; }
.dft-sample-b { fill: #0a1211; stroke: #f3b887; stroke-width: 1.5; }
.dft-peak-a { fill: #6cd4c8; }
.dft-peak-b { fill: #f3b887; }
.dft-label-a { fill: #6cd4c8; color: #6cd4c8; }
.dft-label-b { fill: #f3b887; color: #f3b887; }
svg .dft-label-a, svg .dft-label-b { font-size: 15px; font-weight: 600; }
.dft-legend { display: flex; flex-wrap: wrap; gap: 9px 24px; color: #b1c0bd; font: 12px/1.5 var(--font-ui); margin-top: 15px; }
.dft-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.dft-key-a, .dft-key-b { width: 21px; height: 0; border-top: 3px solid #6cd4c8; }
.dft-key-b { border-top: 2px dashed #f3b887; }
.dft-chart-note, .dft-static-note { color:var(--prose); font: calc(13px + var(--prose-size-increase))/1.7 var(--font-body); margin: 11px 0 0; }
.dft-static-note { margin-bottom: 16px; }
.dft-evidence { width: 100%; border-collapse: collapse; margin-top: 19px; font: 13px/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
.dft-evidence caption { color: #b1c0bd; text-align: left; font-size: 12px; margin-bottom: 8px; }
.dft-evidence th, .dft-evidence td { border-bottom: 1px solid #283936; padding: 10px 8px; text-align: right; }
.dft-evidence th { color: #b1c0bd; font-weight: 400; }
.dft-evidence th:first-child { text-align: left; padding-left: 0; }
.dft-evidence td:last-child, .dft-evidence th:last-child { padding-right: 0; }
.dft-result { padding: 17px 19px; background: #122421; border-radius: 5px; min-height: 167px; }
.dft-decision-label { display: block; margin-bottom: 6px; color: #b1c0bd; font: 11px/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.dft-result strong { display: block; color: var(--accent); font: 500 16px/1.5 var(--font-ui); }
.dft-result p { margin: 8px 0 0; color:var(--prose); font: calc(14px + var(--prose-size-increase))/1.7 var(--font-body); }
.dft-result .dft-next { padding-top: 11px; margin-top: 13px; }
.dft-next span { color: #b1c0bd; font: 11px/1.5 var(--font-ui); margin-right: 7px; text-transform: uppercase; letter-spacing: .05em; }
.dft-figure > figcaption { margin: 13px 0 0; color:var(--prose); font: calc(12px + var(--prose-size-increase))/1.7 var(--font-body); max-width:var(--prose-width); }
.dft-method { max-width:var(--prose-width); color:var(--prose); font: calc(14px + var(--prose-size-increase))/1.8 var(--font-body); margin-top: 23px; }
.dft-method summary { font: 14px/1.7 var(--font-ui); color: #d9e1df; cursor: pointer; padding: 6px 0; }
.dft-method p { margin: 13px 0 0; }
@media (max-width: 1050px) and (min-width: 761px), (max-width: 600px) {
  .dft-chart-wide { display: none; }
  .dft-chart-compact { display: block; }
  .dft-route-cards { grid-template-columns: 1fr; gap: 10px; }
  .dft-route-cards > div { padding-top: 14px; padding-bottom: 14px; }
  .dft-route-letter { top: 14px; }
  .dft-route-cards h3 { margin-bottom: 5px; }
}
@media print {
  .dft-controls { display: none !important; }
  .dft-figure, .dft-chart, .dft-result { break-inside: avoid; }
}