/* v7 figure kit: SKYSCRAPERS-style clear, flat, high-contrast figures. Scoped to figure containers. */
:root, [data-mode="light"] {
  --fk-bg: #ffffff; --fk-ink: #14182b; --fk-mute: #5b6280; --fk-grid: #e2e5ef;
  --fk-a: #2f5bea; --fk-b: #0ea5a4; --fk-warn: #d97706; --fk-good: #059669; --fk-bad: #dc2626;
}
[data-mode="dark"] {
  --fk-bg: #151a30; --fk-ink: #e8ebf7; --fk-mute: #9aa3c4; --fk-grid: #2a3252;
  --fk-a: #7c9cff; --fk-b: #2dd4bf; --fk-warn: #fbbf24; --fk-good: #34d399; --fk-bad: #fb7185;
}
.tk-diagram, .demo svg, .post-fig, .lab-card svg, .fk {
  --ink: var(--fk-ink); --muted: var(--fk-mute); --line: var(--fk-grid); --plot-bg: var(--fk-bg); --bg2: var(--fk-grid);
  --c1: var(--fk-a); --c2: var(--fk-warn); --c3: var(--fk-b); --good: var(--fk-good); --bad: var(--fk-bad);
  /* flat material tints */
  --rock: #dde3ef; --sand: #f6e4b8; --silt: #c9ece2; --clay: #e2dafb; --gravel: #f8d3b9; --fill: #f9d5e0; --peat: #eadac6;
}
[data-mode="dark"] .tk-diagram, [data-mode="dark"] .demo svg, [data-mode="dark"] .post-fig, [data-mode="dark"] .lab-card svg, [data-mode="dark"] .fk {
  --rock: #34405f; --sand: #5b4a22; --silt: #1f4a44; --clay: #3e3570; --gravel: #5e3a25; --fill: #5a2d3d; --peat: #4a3b2b;
}
.tk-diagram { background: var(--fk-bg) !important; border: 1px solid var(--fk-grid); border-radius: 14px; padding: 14px 12px; }
.tk-diagram svg { max-height: none; overflow: visible; }
.tk-diagram svg + svg { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--fk-grid); }
.tk-diagram text, .demo svg text, .post-fig text, .lab-card svg text {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600;
  fill: var(--fk-ink); paint-order: stroke fill; stroke: var(--fk-bg); stroke-width: 3.5px; stroke-linejoin: round;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.tk-diagram text[fill="var(--muted)"], .tk-diagram text.pl-tick, .tk-diagram .pl-ax text { fill: var(--fk-mute); font-weight: 500; }
.tk-diagram line, .tk-diagram path, .tk-diagram rect, .tk-diagram circle, .tk-diagram polyline, .tk-diagram polygon,
.demo svg line, .demo svg path, .demo svg rect, .demo svg circle { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tk-diagram path[fill-opacity="0.45"] { fill-opacity: .3; }
.tk-diagram rect[stroke="var(--ink)"], .tk-diagram circle[stroke="var(--ink)"] { stroke: color-mix(in srgb, var(--fk-ink) 75%, transparent); }
.tk-diagram .pl-grid line, .tk-diagram line.pl-grid { stroke: var(--fk-grid); }
/* results headline card (SKYSCRAPERS .out pattern) */
.fk-sum { background: var(--fk-bg); border: 1px solid var(--fk-grid); border-radius: 14px; padding: 14px 16px; }
.fk-sum .fk-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.fk-sum .fk-big b { font-size: 2rem; font-weight: 800; color: var(--fk-a); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fk-sum .fk-big span { color: var(--fk-mute); font-size: .9rem; }
.fk-sum .fk-st { margin-left: auto; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fk-good) 15%, transparent); color: var(--fk-good); }
.fk-sum .fk-st.bad { background: color-mix(in srgb, var(--fk-bad) 15%, transparent); color: var(--fk-bad); }
.fk-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.fk-kv div { border: 1px solid var(--fk-grid); border-radius: 10px; padding: 7px 10px; background: color-mix(in srgb, var(--fk-grid) 25%, transparent); min-width: 0; }
.fk-kv span { display: block; font-size: .74rem; color: var(--fk-mute); line-height: 1.3; overflow-wrap: anywhere; }
.fk-kv b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .tk-diagram { padding: 10px 6px; } .fk-sum .fk-big b { font-size: 1.6rem; } }
@media print { .tk-diagram text { stroke: #fff; } }
/* SKYSCRAPERS tab in nav */
.nav a.sky-tab { font-weight: 700; letter-spacing: .04em; }

.tk-diagram .dm-line, .tk-diagram .dm-ext, .demo .dm-line { stroke: var(--fk-mute); stroke-width: 1.2; }
.tk-diagram .dm-ah { fill: var(--fk-mute); }
.tk-diagram .dm-bg { fill: var(--fk-bg); stroke: none; }
.tk-diagram .dm-t { font: 600 12.5px/1 Inter, system-ui, sans-serif; fill: var(--fk-ink); stroke: none; }
.tk-diagram .fk-l { font-weight: 600; }
@media (max-width: 1560px) and (min-width: 861px) { .nav-links li.opt { display: none; } }
.tk-diagram .pl-tk, .post-fig .pl-tk { font-size: 12px; fill: var(--fk-mute); font-weight: 500; }
.tk-diagram .pl-note, .post-fig .pl-note { font-size: 12px; fill: var(--fk-mute); }
.tk-diagram .pl-note.pl-strong, .tk-diagram .pl-leg { fill: var(--fk-ink); font-weight: 600; }
.tk-diagram .pl-lab, .post-fig .pl-lab { font-size: 13px; fill: var(--fk-ink); font-weight: 600; }
.tk-diagram .pl-bg { fill: var(--fk-bg); stroke: var(--fk-grid); }
.tk-diagram .pl-grid { stroke: var(--fk-grid); stroke-width: 1; }
.tk-diagram .pl-line { stroke-width: 2.6; }
.tk-diagram .pl-mark { fill: var(--fk-bg); stroke-width: 2.6; }
.tk-diagram .ft-boq .btn { font-size: .9rem; }
/* v7.1 nav "More" dropdown (861–1560 px; nav no longer overflows at 1441–1560) */
.nav-more { display: none; position: relative; }
.nav-more-btn { font: inherit; font-weight: 500; color: var(--muted); background: none; border: 0; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-more-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index: 60; }
.nav-more-menu[hidden] { display: none; }
.nav-more-menu a { display: block; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 1560px) and (min-width: 861px) { .nav-more { display: block; } }
.fk-gov { margin: 8px 0 0; font-size: .85rem; color: var(--fk-bad); font-weight: 600; }
.tk-res tr.fk-key th, .tk-res tr.fk-key td { background: color-mix(in srgb, var(--fk-a) 8%, transparent); }
.tk-res tr.fk-key th { font-weight: 700 !important; }

/* v7.1: lab demos re-render every animation frame; keep a floor on text size that survives innerHTML swaps */
.lab-card svg text[font-size="7"]:not([style*="font-size"]) { font-size: max(7px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="7.5"]:not([style*="font-size"]) { font-size: max(7.5px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="8"]:not([style*="font-size"]) { font-size: max(8px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="8.5"]:not([style*="font-size"]) { font-size: max(8.5px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="9"]:not([style*="font-size"]) { font-size: max(9px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="9.5"]:not([style*="font-size"]) { font-size: max(9.5px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="10"]:not([style*="font-size"]) { font-size: max(10px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="10.5"]:not([style*="font-size"]) { font-size: max(10.5px, var(--fk-min, 0px)); }
.lab-card svg text[font-size="11"]:not([style*="font-size"]) { font-size: max(11px, var(--fk-min, 0px)); }

/* v7.1: tighten the nav just above the hamburger breakpoint so the More button fits */
@media (min-width: 861px) and (max-width: 1040px) { .nav-links { gap: .55rem !important; } .nav-links a, .nav-more-btn { font-size: .86rem; } }
.nav-more-menu a.m2 { display: none; }
@media (min-width: 861px) and (max-width: 1040px) { .nav-links li.opt2 { display: none; } .nav-more-menu a.m2 { display: block; } .depth { display: none !important; } .cmdk-btn kbd, .cmdk-btn .k { display: none; } }