/* The guide pages: the specs' plain style, plus callouts and labs. */
:root {
  --mt-s1: #2a78d6;
  --mt-s2: #eb6834;
  --mt-s3: #1baf7a;
  --mt-ink: #222;
  --mt-profit: #2a78d6;
  --mt-loss: #e34948;
  --mt-good: #0ca30c;
  --mt-warn: #c98500;
  --mt-danger: #d03b3b;
  --mt-muted: #8a8984;
  --mt-surface: #fcfcfb;
}

/* Callouts: ::: blocks in a guide. */
.callout { margin: 1.25rem 0; padding: 0.75rem 1rem; border: 1px solid var(--color-rule); border-left-width: 4px; border-radius: 4px; background: #fff; }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; color: #000; margin: 0 0 0.35rem; }
.callout-title .icon { display: inline-block; width: 1.3rem; text-transform: none; }
.callout-eli5 { border-left-color: var(--mt-s1); background: #f6f9fe; }
.callout-use { border-left-color: var(--mt-good); }
.callout-avoid { border-left-color: var(--mt-danger); }
.callout-risk { border-left-color: var(--mt-danger); background: #fdf7f7; }
.callout-note { border-left-color: var(--mt-muted); }
.callout-example { border-left-color: var(--mt-s2); }
.callout-glance { border-left-color: #000; }
.callout-glance ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.35rem 1.5rem; font-size: 0.92rem; }
.callout-check { border-left-color: var(--mt-s3); }
.callout-check summary { cursor: pointer; font-weight: 600; }
.callout-check summary::marker { color: var(--mt-s3); }
.callout-check[open] summary { margin-bottom: 0.5rem; }
.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem 1rem; margin: 1.25rem 0; }
.callouts > .callout { margin: 0; }

/* Labs: ```lab blocks in a guide. */
.mt-lab { margin: 1.75rem 0; padding: 1rem 1rem 0.75rem; border: 1px solid var(--color-rule); border-radius: 4px; background: var(--mt-surface); }
.mt-lab-title { font-weight: 700; color: #000; margin: 0 0 0.25rem; }
.mt-lab-lede { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--color-muted); }
.mt-lab figcaption { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.5rem; border-top: 1px solid var(--color-rule); padding-top: 0.5rem; }
.mt-lab figcaption p { margin: 0.25rem 0; }
.mt-error { color: var(--mt-danger); }

.mt-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
.mt-presets button, .mt-choice button {
  font: inherit; font-size: 0.82rem; padding: 0.25rem 0.65rem; border: 1px solid var(--color-rule); border-radius: 999px;
  background: #fff; color: var(--color-text); cursor: pointer;
}
.mt-presets button:hover, .mt-choice button:hover { border-color: var(--color-link); }
.mt-presets button[aria-pressed="true"], .mt-choice button[aria-checked="true"] { background: #000; border-color: #000; color: #fff; }
.mt-preset-note { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--color-muted); min-height: 1.4em; }

.mt-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem 1.25rem; margin-bottom: 0.9rem; }
.mt-control { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.mt-control-head { display: flex; justify-content: space-between; gap: 0.5rem; }
.mt-control-label { color: var(--color-muted); }
.mt-control-value { font-size: 0.85rem; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.mt-control-hint { font-size: 0.75rem; color: var(--color-muted); }
.mt-control input[type="range"] { width: 100%; accent-color: #000; margin: 0.2rem 0; }
.mt-control-wide { grid-column: span 2; }
@media (max-width: 600px) { .mt-control-wide { grid-column: auto; } }
.mt-choice { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.mt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.mt-stat { padding: 0.45rem 0.6rem; border: 1px solid var(--color-rule); border-radius: 4px; background: #fff; }
.mt-stat-label { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mt-stat-value { font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 600; color: #000; }
.mt-stat-hint { font-size: 0.75rem; color: var(--color-muted); }
.mt-stat-good { border-color: var(--mt-good); }
.mt-stat-good .mt-stat-icon { color: var(--mt-good); }
.mt-stat-bad { border-color: var(--mt-danger); }
.mt-stat-bad .mt-stat-icon { color: var(--mt-danger); }
.mt-stat-warn { border-color: var(--mt-warn); }
.mt-stat-warn .mt-stat-icon { color: var(--mt-warn); }
.mt-note { font-size: 0.88rem; margin: 0.25rem 0 0.5rem; }

.mt-panel { margin-top: 0.75rem; }
.mt-panel-title { font-size: 0.85rem; font-weight: 600; color: #000; }
.mt-frame { position: relative; width: 100%; }
.mt-frame svg { display: block; max-width: 100%; height: auto; overflow: visible; font-family: inherit; }
.mt-grid { stroke: #ecebe8; stroke-width: 1; }
.mt-zero { stroke: #9a9994; stroke-width: 1; }
.mt-axis { stroke: #c9c8c3; stroke-width: 1; }
.mt-tick { font-size: 11px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.mt-axis-label { font-size: 11px; fill: var(--color-muted); }
.mt-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mt-fill-profit { fill: var(--mt-profit); opacity: 0.14; }
.mt-fill-loss { fill: var(--mt-loss); opacity: 0.16; }
.mt-band { opacity: 0.1; }
.mt-band-danger { fill: var(--mt-danger); }
.mt-band-warn { fill: var(--mt-warn); }
.mt-band-good, .mt-band-profit { fill: var(--mt-profit); }
.mt-band-loss { fill: var(--mt-loss); }
.mt-band-muted { fill: var(--mt-muted); }
.mt-hatch { stroke: var(--mt-danger); stroke-width: 1; opacity: 0.35; }
.mt-band-label { font-size: 11px; font-weight: 600; fill: var(--color-text); }
.mt-rule { stroke-width: 1.25; stroke-dasharray: 4 3; }
.mt-rule-label, .mt-dot-label { font-size: 11px; fill: var(--color-text); paint-order: stroke; stroke: var(--mt-surface); stroke-width: 3px; }
.mt-dot { stroke: var(--mt-surface); stroke-width: 2; }
.mt-cross line { stroke: #555; stroke-width: 1; }
.mt-cross circle { stroke: var(--mt-surface); stroke-width: 2; }
.mt-hit { fill: transparent; cursor: crosshair; outline: none; touch-action: pan-y; }
.mt-hit:focus-visible { stroke: var(--color-link); stroke-width: 1; }
.mt-tip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 8rem; padding: 0.35rem 0.55rem; font-size: 0.78rem;
  background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mt-tip-head { color: var(--color-muted); margin-bottom: 0.15rem; }
.mt-tip-row { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.mt-tip-row strong { font-weight: 600; font-variant-numeric: tabular-nums; color: #000; }
.mt-tip-name { color: var(--color-muted); }
.mt-key { display: inline-block; width: 12px; border-top: 2px solid; }
.mt-key-dash { border-top-style: dashed; }
.mt-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--color-muted); margin: 0.2rem 0; }
.mt-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.mt-table { margin-top: 0.5rem; font-size: 0.82rem; }
.mt-table summary { cursor: pointer; color: var(--color-link); }
.mt-table table { font-size: 0.8rem; display: table; }
.mt-table caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
.mt-table td { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .mt-lab { padding: 0.75rem 0.6rem 0.5rem; margin-left: -0.4rem; margin-right: -0.4rem; }
}

/* Glossary terms, linked by terms.js, and their definitions on hover. */
a.term { color: inherit; text-decoration: underline dotted #8a8984; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.term:hover, a.term:focus-visible { color: var(--color-link); text-decoration-color: var(--color-link); }
.term-pop {
  position: absolute; z-index: 10; padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.5;
  background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.term-pop p { margin: 0 0 0.4rem; }
.term-pop-title { font-weight: 700; color: #000; }
.term-pop-more { font-size: 0.8rem; }
.callout-history { border-left-color: #a07a3c; background: #fcfaf5; }
.callout-history .callout-title { color: #6b5028; }