/* ==========================================================================
   v6.css — loaded after modern.css.
   1. "Iris" accent (purple + navy on warm off-white) — the new default.
   2. Calmer surfaces: lighter background mesh, crisper cards, navy headings.
   3. Section tabs and section headers for the toolkit, estimating page layout,
      house schematic and line-item tables.
   ========================================================================== */
[data-accent="iris"] { --purple: #5b3cc4; --purple-ink: #4527a8; --accent-2: #1e3a8a; --accent-3: #7c3aed; --glow: 91, 60, 196; --navy: #1b2150; }
[data-mode="light"][data-accent="iris"] { --bg: #f7f5f0; --bg-2: #ece8f3; --ink: #171a33; --muted: #5a5d72; --line: #e2dded; --glass: rgba(255, 255, 255, .74); --mesh-a: rgba(91, 60, 196, .10); --mesh-b: rgba(30, 58, 138, .07); }
[data-mode="dark"][data-accent="iris"] { --bg: #0c0f22; --bg-2: #161a33; --surface: #12162c; --line: #262b4d; --purple: #7b5cf0; --purple-ink: #b8a6ff; --accent-2: #7d9cf5; --navy: #c9d1ff; --mesh-a: rgba(123, 92, 240, .18); --mesh-b: rgba(125, 156, 245, .10); }
[data-mode="light"] { --mesh-a: rgba(var(--glow), .10); }
[data-mode="light"][data-accent="iris"] h1, [data-mode="light"][data-accent="iris"] h2 { color: var(--navy); }

/* calmer page background: one soft glow, faint survey grid */
body { background-attachment: fixed; }
[data-mode="light"] body { background-color: var(--bg); }

/* nav: thin accent underline on the current page */
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--purple); }
.brand img { border-radius: 9px; }

/* crisper cards */
.tk-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 22, 40, .04); }
.tk-card:hover, .tk-card:focus-visible { border-color: color-mix(in srgb, var(--purple) 55%, var(--line)); box-shadow: 0 10px 28px -12px rgba(var(--glow), .45); }
.tk-card .tk-ic { color: var(--purple); }
.tk-card b { color: var(--ink); }
.btn.primary { background: linear-gradient(135deg, var(--purple), var(--accent-2)); border: 0; }

/* ---------- section tabs (toolkit & estimating) ---------- */
.tk-tabs, .est-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; padding: 6px; background: var(--bg-2); border-radius: 16px; width: fit-content; max-width: 100%; }
.tk-tab, .est-nav a, .est-nav button { border: 0; background: transparent; color: var(--muted); font: 600 .9rem/1 var(--font-body); padding: 10px 14px; border-radius: 11px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.tk-tab span, .est-nav span { font: 600 .72rem var(--font-mono); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 2px 7px; border-radius: 99px; }
.tk-tab:hover, .est-nav a:hover, .est-nav button:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tk-tab.on, .est-nav .on, .est-nav [aria-pressed="true"] { background: var(--surface); color: var(--purple-ink); box-shadow: var(--shadow); }
.tk-tab.ext { color: var(--accent-2); }
.tk-tab.ext::after { content: "↗"; font-size: .8em; }

/* ---------- toolkit section blocks ---------- */
.tk-sec { margin: 0 0 34px; }
.tk-sec + .tk-sec { padding-top: 26px; border-top: 1px dashed var(--line); }
.tk-sec-h { display: grid; gap: 12px; margin-bottom: 16px; }
.tk-sec-h h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 4px 0 6px; }
.tk-sec-h p.muted { margin: 0; max-width: 70ch; }
.tk-subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-subnav button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 6px 11px; font: 500 .8rem/1 var(--font-body); cursor: pointer; }
.tk-subnav button span { color: var(--muted); font: 600 .7rem var(--font-mono); margin-left: 4px; }
.tk-subnav button:hover { border-color: var(--purple); color: var(--purple-ink); }
body.tk-solo .tk-tabs { display: none; }

/* ---------- estimating page ---------- */
.est-section { margin-top: 30px; }
.est-section > header { margin-bottom: 12px; }
.est-section > header h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 4px 0 6px; }
.est-panel[hidden] { display: none !important; }
.est-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.est-actions .btn { font-size: .85rem; }
.schem-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.schem-wrap svg { width: 100%; height: auto; display: block; }
.etable tr.grp th { text-align: left; background: var(--bg-2); font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
.etable tr.grp th.n, .etable tr.tot th.n { text-align: right; }
.etable tr.tot th { text-align: left; background: var(--purple-soft); color: var(--purple-ink); font-size: 1.02rem; }
.qgrid div small { color: var(--muted); font-weight: 500; }

/* house schematic (theme-aware; svg-export.js inlines these for downloads) */
.hs-h { font: 700 15px var(--font-display); fill: var(--ink); }
.hs-note { font: 500 11px var(--font-body); fill: var(--muted); }
.hs-eave { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 6 4; }
.hs-slab { fill: color-mix(in srgb, var(--rock) 22%, var(--surface)); }
.hs-edge { fill: none; stroke: var(--ink); stroke-width: 4; }
.hs-beam { stroke: var(--c1); stroke-width: 3; stroke-dasharray: 8 4; }
.hs-ridge { fill: none; stroke: var(--purple); stroke-width: 2; }
.hs-dim line { stroke: var(--muted); stroke-width: 1; }
.hs-ah { fill: var(--muted); }
.hs-dbg { fill: var(--surface); stroke: var(--line); }
.hs-dt { font: 600 10.5px var(--font-mono); fill: var(--ink); }
.hs-ground { fill: color-mix(in srgb, var(--sand) 35%, var(--surface)); }
.hs-gl { stroke: var(--ink); stroke-width: 1.6; }
.hs-footing { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.hs-wall-b { fill: url(#hs-brick); stroke: var(--ink); stroke-width: 1.2; }
.hs-wall-l { fill: color-mix(in srgb, var(--c3) 18%, var(--surface)); stroke: var(--ink); stroke-width: 1.2; }
.hs-brk { fill: color-mix(in srgb, var(--c2) 30%, var(--surface)); }
.hs-mortar { stroke: var(--surface); stroke-width: 1; fill: none; }
.hs-win { fill: color-mix(in srgb, var(--c1) 30%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-door { fill: color-mix(in srgb, var(--peat) 55%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-gar { fill: color-mix(in srgb, var(--rock) 35%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-roofp { fill: url(#hs-tile); stroke: var(--ink); stroke-width: 1.4; }
.hs-roof { fill: color-mix(in srgb, var(--purple) 32%, var(--surface)); }
.hs-tl { stroke: color-mix(in srgb, var(--purple) 55%, var(--surface)); stroke-width: 1; }
.hs-tb { fill: var(--bg-2); }
.hs-tbt { font: 600 11px var(--font-body); fill: var(--ink); }

@media (max-width: 720px) {
  .tk-tabs, .est-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tk-tab, .est-nav a, .est-nav button { white-space: nowrap; }
}
@media print { .tk-tabs, .est-nav, .est-actions { display: none !important; } }
body.tk-solo #whole, body.tk-solo main > .est-nav { display: none; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1340px) { .nav-links a { padding-inline: 9px; } }
@media (max-width: 1240px) and (min-width: 901px) { .nav-links .opt { display: none; } }

/* ---------- v7: estimator gallery & generic panel ---------- */
.est-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 22px; }
.est-card { display: grid; gap: 4px; text-align: left; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.est-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--purple) 55%, var(--line)); box-shadow: 0 10px 26px -14px rgba(var(--glow), .5); }
.est-card[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 25%, transparent); background: var(--purple-tint); }
.est-card .est-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--purple-soft); color: var(--purple-ink); margin-bottom: 4px; }
.est-card .est-ic svg { width: 26px; height: 26px; }
.est-card b { font: 600 1rem/1.2 var(--font-display); }
.est-card small { color: var(--muted); font-size: .8rem; }
.est-card em { font: 500 .66rem/1.3 var(--font-mono); color: var(--accent-2); font-style: normal; letter-spacing: .02em; }
.est-ph { margin: 6px 0 12px; }
.est-ph h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 4px 0 6px; }
.est-ph p.muted { margin: 0; max-width: 80ch; }
.seg-wrap { flex-wrap: wrap; height: auto; }
.est-notes { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; display: grid; gap: 6px; }
.tk-badges .pill.warn { background: color-mix(in srgb, var(--c6) 22%, var(--surface)); color: var(--ink); }
.qgrid div b { text-align: right; }

/* schematic parts */
.hs-hl { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.hs-dot { fill: var(--muted); opacity: .6; }
.hs-mezz { fill: color-mix(in srgb, var(--c5) 25%, transparent); stroke: var(--c5); stroke-width: 1.2; stroke-dasharray: 5 3; }
.hs-frame { fill: none; stroke: var(--purple); stroke-width: 2.4; stroke-linejoin: round; }
.hs-wallg { fill: color-mix(in srgb, var(--silt) 22%, transparent); stroke: var(--ink); stroke-width: .8; }
.hs-roofs { fill: color-mix(in srgb, var(--rock) 40%, transparent); stroke: var(--ink); stroke-width: .8; }
.hs-roofs2 { fill: color-mix(in srgb, var(--rock) 60%, transparent); stroke: var(--ink); stroke-width: .8; }
.hs-sky { fill: color-mix(in srgb, var(--c6) 55%, var(--surface)); stroke: var(--ink); stroke-width: .6; }
.hs-rd { fill: color-mix(in srgb, var(--rock) 45%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-post { stroke: var(--ink); stroke-width: 2; }
.hs-body { fill: color-mix(in srgb, var(--surface) 85%, var(--rock)); stroke: var(--ink); stroke-width: 1.4; }
.hs-cab { fill: color-mix(in srgb, var(--c1) 22%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; }
.hs-eq-hot { fill: color-mix(in srgb, var(--c2) 35%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-eq-cold { fill: color-mix(in srgb, var(--c1) 30%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-eqt { font: 600 9px var(--font-mono); fill: var(--ink); }
.hs-hood { fill: none; stroke: var(--c4); stroke-width: 1.6; stroke-dasharray: 6 3; }
.hs-sink { fill: color-mix(in srgb, var(--c3) 35%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-hatch { stroke: var(--c3); stroke-width: 6; stroke-linecap: round; }
.hs-wheel { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.hs-barbg { fill: var(--bg-2); } .hs-bargood { fill: var(--good); } .hs-barwarn { fill: var(--c6); } .hs-barbad { fill: var(--bad); }
.hs-cont { fill: color-mix(in srgb, var(--c2) 22%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; }
.hs-corr { stroke: color-mix(in srgb, var(--c2) 55%, var(--surface)); stroke-width: 1; }
.hs-op-w { stroke: var(--c1); stroke-width: 6; } .hs-op-d { stroke: var(--peat); stroke-width: 6; } .hs-op-b { stroke: var(--c3); stroke-width: 6; }
.hs-pier { fill: var(--rock); stroke: var(--ink); stroke-width: 1; }
.hs-deck { fill: color-mix(in srgb, var(--peat) 35%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-glass { fill: color-mix(in srgb, var(--c3) 28%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-lintel { fill: var(--purple); }
.hs-pierE { fill: color-mix(in srgb, var(--rock) 55%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-solar { fill: color-mix(in srgb, var(--c1) 55%, var(--ink)); stroke: var(--ink); stroke-width: .8; }
.hs-house { fill: url(#sx-hatch); stroke: var(--ink); stroke-width: 1.2; }
.hs-roofplan { fill: color-mix(in srgb, var(--rock) 25%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; }
.hs-purl { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.hs-beamP { stroke: var(--purple); stroke-width: 4; }
.hs-postsq { fill: var(--ink); }
.hs-postE { fill: color-mix(in srgb, var(--ink) 70%, var(--surface)); }
.hs-footE { fill: color-mix(in srgb, var(--rock) 45%, var(--surface)); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.hs-roofline { fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hs-deckP { fill: color-mix(in srgb, var(--peat) 22%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; }
.hs-bearer { stroke: var(--purple); stroke-width: 3.2; }
.hs-joist { stroke: var(--c2); stroke-width: 1.2; stroke-dasharray: 5 3; }
.hs-bearerE { fill: var(--purple); } .hs-joistE { fill: color-mix(in srgb, var(--c2) 60%, var(--surface)); } .hs-boardE { fill: var(--peat); }
.hs-rail { stroke: var(--ink); stroke-width: 3; } .hs-baluster { stroke: var(--muted); stroke-width: 1; }
.hs-fence { fill: none; stroke: var(--c4); stroke-width: 1.6; stroke-dasharray: 6 4; }
.hs-coping { fill: color-mix(in srgb, var(--rock) 35%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-waterP { stroke: var(--ink); stroke-width: 1.2; }
.hs-w1 { stop-color: color-mix(in srgb, var(--c1) 25%, var(--surface)); } .hs-w2 { stop-color: color-mix(in srgb, var(--c1) 70%, var(--surface)); }
.hs-water { fill: color-mix(in srgb, var(--c1) 40%, var(--surface)); }
.hs-shell { fill: color-mix(in srgb, var(--rock) 60%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-copingE { fill: var(--ink); }
.hs-gw { stroke: var(--c1); stroke-width: 1.6; stroke-dasharray: 8 4; }
.hs-sleeper { fill: color-mix(in srgb, var(--rock) 45%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-retained { fill: color-mix(in srgb, var(--sand) 45%, var(--surface)); }
.hs-agg { stroke: var(--muted); stroke-width: .8; }
.hs-agpipe { fill: var(--surface); stroke: var(--c1); stroke-width: 2; }
.hs-press { fill: color-mix(in srgb, var(--c4) 30%, transparent); stroke: var(--c4); stroke-width: 1.2; }

/* interactive lab as its own toolkit view */
body.lab-view .tk-layout, body.lab-view .lib-tools, body.lab-view .tk-more, body.lab-view .lab-teaser { display: none !important; }
body.lab-view #lab { margin-top: 6px; }
.tk-tab.lab { color: var(--accent-2); }
.lab-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 18px; margin: 0 0 18px; border-radius: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(120deg, var(--purple-tint), color-mix(in srgb, var(--accent-2) 10%, var(--surface))); border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); }
.lab-teaser b { font: 700 1.05rem var(--font-display); color: var(--purple-ink); }
.lab-teaser span { color: var(--muted); font-size: .9rem; }
.lab-teaser em { font-style: normal; font-weight: 600; color: var(--purple-ink); white-space: nowrap; }
.lab-teaser:hover { border-color: var(--purple); }
@media (max-width: 720px) { .lab-teaser { grid-template-columns: 1fr; } }
body.tk-solo .lab-teaser { display: none; }
@media (max-width: 720px) { .est-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .est-card { padding: 10px; } .est-card em { display: none; } .est-card .est-ic { width: 34px; height: 34px; } .est-card b { font-size: .92rem; } }

/* ---- Interactive lab page ---- */
.lab-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 18px 0; }
.lab-search input { min-width: 260px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-brd); background: var(--surface); color: var(--ink); }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-chips .chip { border: 1px solid var(--glass-brd); background: var(--glass); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .82rem; cursor: pointer; }
.lab-chips .chip.on { background: var(--c1); color: #fff; border-color: var(--c1); }
.lab-page .lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.lab-card { min-height: 120px; }
.lab-sl { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; font-size: .84rem; }
.lab-sl span { flex: 0 0 46%; color: var(--muted); } .lab-sl input[type=range] { flex: 1; accent-color: var(--c1); } .lab-sl output { min-width: 3.5em; text-align: right; font: 600 .82rem var(--font-mono, monospace); }
.lab-sl select { flex: 1 1 0; min-width: 0; max-width: 100%; text-overflow: ellipsis; } .lab-sl { min-width: 0; } .lab-card { min-width: 0; } .lab-note { font-size: .78rem !important; color: var(--muted); border-top: 1px dashed var(--glass-brd); padding-top: 6px; margin-top: 6px !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- v6 customisation bar, scenarios, print header ---- */
.tk-cx { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .tk-cx .btn { font-size: .82rem; padding: 6px 12px; }
.tk-scen, .tk-proj { margin: 10px 0; padding: 14px; } .tk-scen h3, .tk-proj h3 { margin: 0 0 4px; font-size: 1rem; }
.tk-scen-add { display: flex; gap: 8px; margin: 8px 0; } .tk-scen-add input { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--glass-brd); background: var(--surface); color: var(--ink); }
.tk-scen-tbl { overflow-x: auto; } .tk-scen table { border-collapse: collapse; font-size: .82rem; width: 100%; } .tk-scen th, .tk-scen td { border-bottom: 1px solid var(--glass-brd); padding: 4px 8px; text-align: left; vertical-align: top; }
.tk-proj-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .tk-proj-g label { display: flex; flex-direction: column; font-size: .8rem; gap: 2px; } .tk-proj-g input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--glass-brd); background: var(--surface); color: var(--ink); }
.print-head { display: none; }
@media print { .print-head { display: block; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; font-size: 11px; } .tk-cx, .tk-scen button, .tk-proj, .ft-boq { display: none !important; } }
.lab-card svg text.lab-leg { fill: var(--ink); }
/* v9 commercial site plans */
.hs-site { fill: color-mix(in srgb, var(--rock) 10%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 10 4 2 4; }
.hs-asph { fill: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
.hs-land { fill: color-mix(in srgb, var(--good) 26%, var(--surface)); }
.hs-lane { fill: none; stroke: color-mix(in srgb, var(--rock) 45%, var(--surface)); stroke-linejoin: round; stroke-linecap: round; }
.hs-lanec { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-dasharray: 6 5; }
.hs-bay { fill: color-mix(in srgb, var(--ink) 6%, var(--surface)); stroke: var(--ink); stroke-width: .8; stroke-opacity: .55; }
.hs-bayacc { fill: color-mix(in srgb, var(--c1) 35%, var(--surface)); stroke: var(--ink); stroke-width: .8; stroke-opacity: .55; }
.hs-bldg { fill: color-mix(in srgb, var(--purple) 26%, var(--surface)); stroke: var(--ink); stroke-width: 1.6; }
.hs-dine { fill: color-mix(in srgb, var(--c6) 30%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-canopy { fill: color-mix(in srgb, var(--c2) 18%, transparent); stroke: var(--c2); stroke-width: 1.6; }
.hs-island { fill: color-mix(in srgb, var(--c2) 55%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-tank { fill: color-mix(in srgb, var(--c4) 20%, transparent); stroke: var(--c4); stroke-width: 1.4; stroke-dasharray: 6 3; }
.hs-tankS { fill: color-mix(in srgb, var(--c4) 22%, var(--surface)); stroke: var(--ink); stroke-width: 1.4; }
.hs-wt { stroke: var(--c1); stroke-width: 1.6; stroke-dasharray: 8 4; }
.hs-arrow { stroke: var(--ink); stroke-width: 1.6; fill: none; marker-end: url(#sx-arr); }
.hs-arrowh { fill: var(--ink); }
.hs-tanker { fill: none; stroke: var(--c4); stroke-width: 1.4; stroke-dasharray: 3 4; marker-end: url(#sx-arr); }
.hs-bfill { fill: color-mix(in srgb, var(--sand) 18%, var(--surface)); stroke: var(--muted); stroke-width: .8; stroke-dasharray: 3 3; }
.hs-kv { font: 600 11px var(--font-body); fill: var(--ink); } .hs-kk { font: 500 10.5px var(--font-body); fill: var(--muted); }
/* v10 estimator gallery groups + schematics */
.est-gcat { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; font: 700 .98rem/1.2 var(--font-display); color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; }
.est-gcat:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.est-gcat small { font: 500 .72rem var(--font-mono); color: var(--muted); }
.hs-conc { fill: color-mix(in srgb, var(--rock) 48%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-rock { fill: color-mix(in srgb, var(--rock) 72%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-rockU { fill: color-mix(in srgb, var(--rock) 34%, var(--surface)); stroke: var(--ink); stroke-width: .6; }
.hs-geo { fill: none; stroke: var(--c5); stroke-width: 2.2; stroke-dasharray: 3 2; }
.hs-pipe { fill: none; stroke: var(--c1); stroke-width: 2.4; }
.hs-sewer { fill: none; stroke: var(--peat); stroke-width: 2.4; stroke-dasharray: 9 3; }
.hs-elec { fill: none; stroke: var(--c2); stroke-width: 2; stroke-dasharray: 3 3; }
.hs-cl { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.hs-lot { fill: color-mix(in srgb, var(--c6) 14%, var(--surface)); stroke: var(--ink); stroke-width: .6; stroke-opacity: .6; }
.hs-road { fill: color-mix(in srgb, var(--ink) 20%, var(--surface)); }
.hs-park { fill: color-mix(in srgb, var(--good) 34%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-lay1 { fill: color-mix(in srgb, var(--ink) 72%, var(--surface)); }
.hs-lay2 { fill: color-mix(in srgb, var(--c2) 34%, var(--surface)); stroke: var(--ink); stroke-width: .6; }
.hs-lay3 { fill: color-mix(in srgb, var(--sand) 55%, var(--surface)); stroke: var(--ink); stroke-width: .6; }
.hs-lay4 { fill: color-mix(in srgb, var(--rock) 30%, var(--surface)); stroke: var(--ink); stroke-width: .6; }
.hs-strand { fill: none; stroke: var(--c4); stroke-width: 1.4; }
.hs-steel { fill: color-mix(in srgb, var(--c1) 38%, var(--surface)); stroke: var(--ink); stroke-width: 1; }
.hs-grid { fill: none; stroke: var(--c5); stroke-width: 2; }
.hs-joint { stroke: var(--muted); stroke-width: .7; stroke-dasharray: 3 3; }
.hs-play { fill: color-mix(in srgb, var(--c3) 22%, var(--surface)); stroke: var(--ink); stroke-width: .8; }
.hs-shade { fill: color-mix(in srgb, var(--c4) 16%, transparent); stroke: var(--c4); stroke-width: 1; stroke-dasharray: 4 3; }
.hs-sep { stroke: var(--bad); stroke-width: 4; }
.hs-best { fill: color-mix(in srgb, var(--good) 18%, transparent); stroke: var(--good); stroke-width: 1.6; }
.hs-sel { fill: none; stroke: var(--purple); stroke-width: 2; stroke-dasharray: 6 3; }
.hs-load { stroke: var(--bad); stroke-width: 2; fill: none; marker-end: url(#sx-arr); }
/* v10 project analysis panel */
.est-x { margin-top: 18px; }
.x-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
.x-set label { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); min-width: 0; }
.x-set select, .x-set input, .x-row input, .x-in { padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; min-width: 0; max-width: 100%; }
.x-set .x-chk { flex-direction: row; align-items: center; gap: 8px; }
.x-sum, .x-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.x-chip, .x-kv > div { padding: 10px 12px; border-radius: 12px; background: var(--purple-tint); border: 1px solid color-mix(in srgb, var(--purple) 20%, var(--line)); display: grid; gap: 2px; min-width: 0; }
.x-chip span, .x-kv span { font-size: .72rem; color: var(--muted); } .x-chip b, .x-kv b { font: 600 .98rem/1.2 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.x-tabs { margin: 4px 0 12px; } .x-body h4 { margin: 14px 0 6px; font: 600 .95rem var(--font-display); }
.x-chart { width: 100%; height: auto; display: block; margin: 6px 0; }
.x-tk { font: 500 10.5px var(--font-body); fill: var(--muted); } .x-grid { stroke: var(--line); stroke-width: 1; }
.x-b1 { fill: color-mix(in srgb, var(--purple) 60%, var(--surface)); } .x-b2 { fill: color-mix(in srgb, var(--c1) 55%, var(--surface)); } .x-b3 { fill: color-mix(in srgb, var(--c3) 50%, var(--surface)); } .x-b4 { fill: color-mix(in srgb, var(--muted) 35%, var(--surface)); }
.x-gantt { fill: color-mix(in srgb, var(--purple) 45%, var(--surface)); rx: 4; }
.x-line { fill: none; stroke: var(--c4); stroke-width: 2.4; stroke-linejoin: round; }
.x-mk0, .x-mk1, .x-mk2, .x-mk3 { stroke-width: 1.6; stroke-dasharray: 5 3; } .x-mk0 { stroke: var(--muted); } .x-mk1 { stroke: var(--c1); } .x-mk2 { stroke: var(--bad); } .x-mk3 { stroke: var(--purple); }
.x-leg { font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 2px 0 10px; }
.x-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; } .x-leg i.x-b1 { background: color-mix(in srgb, var(--purple) 60%, var(--surface)); } .x-leg i.x-b2 { background: color-mix(in srgb, var(--c1) 55%, var(--surface)); } .x-leg i.x-b3 { background: color-mix(in srgb, var(--c3) 50%, var(--surface)); }
.x-leg i.x-ln { height: 3px; width: 18px; background: var(--c4); border-radius: 2px; }
.x-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; } .x-row input { flex: 1 1 220px; }
.x-tbl td, .x-tbl th { white-space: nowrap; } .x-tbl .x-in { width: 84px; text-align: right; padding: 4px 6px; } .x-tbl .x-wide { width: 100%; min-width: 220px; text-align: left; }
.x-link { background: none; border: 0; padding: 0; color: var(--purple-ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: .78rem; }
.x-det { margin: 6px 0; } .x-det summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
@media (max-width: 720px) { .x-set { grid-template-columns: 1fr 1fr; } .x-sum, .x-kv { grid-template-columns: 1fr 1fr; } }
.est-x { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.x-tbl td.x-rl { font-weight: 500; color: var(--ink); text-align: left; } .x-tbl tr.tot td { background: var(--purple-soft); color: var(--purple-ink); font-weight: 700; }
@media (max-width: 720px) { .est-x { padding: 12px; } }

/* ---------- v11 toolkit library index (Tedds / GEO5-style) ---------- */
.tk-libmap { margin: 14px 0 6px; }
.tk-libmap details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 12px 16px; }
.tk-libmap summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; list-style: none; }
.tk-libmap summary::-webkit-details-marker { display: none; }
.tk-libmap summary b { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; color: var(--ink); }
.tk-libmap summary small { color: var(--muted); font-size: .82rem; }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; margin-top: 14px; }
.lm-sec { min-width: 0; }
.lm-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; border: 0; border-bottom: 2px solid var(--purple); background: none; padding: 4px 0; cursor: pointer; color: var(--ink); font: inherit; text-align: left; }
.lm-head b { font-family: "Space Grotesk", sans-serif; font-size: .98rem; }
.lm-head span, .lm-sec li span { font: 500 .72rem "JetBrains Mono", ui-monospace, monospace; color: var(--muted); }
.lm-sec ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px; }
.lm-sec li button { width: 100%; display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; color: var(--ink); font: 400 .86rem/1.35 inherit; text-align: left; }
.lm-sec li button:hover, .lm-sec li button:focus-visible, .lm-head:hover { background: var(--purple-tint, rgba(106, 63, 216, .08)); color: var(--purple-ink); }

/* ===== v12 · Borehole log & soil profile studio (stratigraphy.html) ===== */
.strata-app { margin: 8px 0 28px; }
.strata-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.strata-bar .btn { padding: 9px 14px; font-size: .84rem; }
.strata-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.strata-status { margin-left: auto; font: 500 .78rem/1.2 var(--font-mono); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.strata-status.ok { color: #1f7a4a; border-color: color-mix(in srgb, #1f7a4a 40%, var(--line)); }
.strata-status.warn { color: #a15c00; border-color: color-mix(in srgb, #d98a1c 50%, var(--line)); background: color-mix(in srgb, #ffd58a 18%, var(--surface)); }
.strata-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 0 0 16px; }
.strata-kpis div { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.strata-kpis span { display: block; font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.strata-kpis b { display: block; margin-top: 4px; font: 700 1.02rem/1.15 var(--font-display); color: var(--purple-ink); overflow-wrap: anywhere; }
.strata-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 16px; background: var(--purple-tint); border: 1px solid color-mix(in srgb, var(--purple) 22%, var(--line)); margin: 0 0 16px; }
.strata-tabs button { flex: 1 1 auto; border: 0; background: transparent; padding: 10px 14px; border-radius: 12px; font: 600 .86rem/1 var(--font-body); color: var(--muted); cursor: pointer; }
.strata-tabs button[aria-selected="true"] { background: var(--purple); color: #fff; box-shadow: var(--shadow); }
.strata-tabs button:hover:not([aria-selected="true"]) { color: var(--purple-ink); background: var(--surface); }
.strata-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .strata-grid2 { grid-template-columns: 1fr; } }
.strata-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 0 0 14px; box-shadow: var(--shadow); min-width: 0; }
.strata-card-h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; }
.strata-card-h h3 { font-size: 1.02rem; color: var(--purple-ink); }
.strata-card-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.strata-card-acts .btn { padding: 7px 12px; font-size: .8rem; }
.strata-filter, .strata-ctrl label { font: 500 .8rem var(--font-body); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.strata-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 10px; }
.strata-form label { display: grid; gap: 3px; font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.strata-form label.wide { grid-column: 1 / -1; }
.strata-form input, .strata-table input, .strata-table select, .strata-table textarea, .strata-ctrl select, .strata-filter select { font: 500 .84rem var(--font-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.strata-form input { width: 100%; text-transform: none; letter-spacing: 0; }
.strata-valid { font-size: .86rem; }
.strata-valid ul { margin: 8px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }
.strata-valid li { margin: 3px 0; color: #8a4b00; }
.strata-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; max-height: 520px; overflow-y: auto; }
.strata-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.strata-table th { position: sticky; top: 0; z-index: 1; background: var(--purple); color: #fff; font: 600 .74rem/1.2 var(--font-body); text-align: left; padding: 8px 6px; white-space: nowrap; }
.strata-table td { padding: 3px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.strata-table tr:nth-child(even) td { background: color-mix(in srgb, var(--purple-tint) 55%, transparent); }
.strata-table input[type="number"] { width: 92px; }
.strata-table input[type="color"] { width: 44px; height: 30px; padding: 2px; }
.strata-table textarea { width: 100%; min-width: 300px; resize: vertical; font-size: .8rem; line-height: 1.35; }
.strata-uc { display: inline-flex; gap: 5px; align-items: center; }
.strata-uc i { width: 14px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); flex: none; }
.strata-del { border: 0; background: transparent; color: #b4432a; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.strata-del:hover { background: #fde8e3; }
.strata-note { font-size: .8rem; color: var(--muted); margin: 8px 2px 0; }
.strata-ctrl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; }
.strata-ctrl .btn { padding: 7px 12px; font-size: .8rem; }
.strata-ctrl-r { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.strata-chk { display: inline-flex; gap: 6px; align-items: center; font: 500 .82rem var(--font-body); color: var(--ink); }
.strata-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.strata-pick > span { font: 500 .8rem var(--font-body); color: var(--muted); margin-right: 4px; }
.strata-pick .chip { padding: 6px 11px; }
.strata-pick .chip.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.strata-pick .chip b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: #fff; color: var(--purple-ink); font-size: .7rem; }
.strata-draw { margin: 0 0 18px; }
.strata-paper { overflow: auto; border-radius: 10px; border: 1px solid var(--line); background: #e9e7f1; padding: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); -webkit-overflow-scrolling: touch; }
.strata-paper svg { display: block; margin: 0 auto; box-shadow: 0 6px 22px rgba(29, 23, 52, .16); background: #fff; }
.strata-draw.zoom-fit .strata-paper svg { width: 100%; height: auto; }
.strata-draw.zoom-fit .strata-paper svg[viewBox="0 0 840 1188"] { max-width: 820px; }
.strata-draw.zoom-1 .strata-paper svg { width: auto; }
.strata-draw.zoom-15 .strata-paper svg { width: 150%; max-width: none; height: auto; }
.strata-draw.zoom-2 .strata-paper svg { width: 200%; max-width: none; height: auto; }
.strata-draw figcaption { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; font: 500 .78rem var(--font-mono); color: var(--muted); }
.strata-draw figcaption span { margin-right: auto; }
.strata-empty { padding: 40px; text-align: center; }
.strata-tip { position: fixed; z-index: 50; max-width: 290px; padding: 8px 10px; border-radius: 10px; background: #1e2230; color: #fff; font: 500 .78rem/1.35 var(--font-body); pointer-events: none; white-space: pre-line; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.strata-3d .strata-tip { position: absolute; }
.strata-3d { position: relative; height: min(70vh, 620px); min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fbfaff; touch-action: none; }
.strata-3d canvas { display: block; }
.strata-3d-msg { padding: 40px; text-align: center; }
.strata-3d-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 .8rem var(--font-body); }
.strata-3d-key span { display: inline-flex; gap: 6px; align-items: center; }
.strata-3d-key i { width: 16px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }
.strata-dlg { border: 1px solid var(--line); border-radius: 18px; padding: 18px; max-width: min(720px, 94vw); width: 100%; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.strata-dlg::backdrop { background: rgba(29, 23, 52, .35); }
.strata-dlg textarea { width: 100%; font: 500 .8rem var(--font-mono); border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--bg); color: var(--ink); }
.strata-dlg menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 12px 0 0; }
.strata-cols { display: flex; flex-wrap: wrap; gap: 4px; }
.strata-cols code { font-size: .74rem; padding: 2px 6px; border-radius: 6px; background: var(--purple-tint); }
@media (max-width: 640px) { .strata-bar .btn { padding: 8px 11px; } .strata-status { margin-left: 0; } .strata-tabs button { padding: 9px 10px; font-size: .8rem; } .strata-ctrl-r { margin-left: 0; } }
.strata-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 18px; margin: 0 0 18px; border-radius: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(120deg, color-mix(in srgb, #f3d68f 30%, var(--surface)), var(--purple-tint)); border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); }
.strata-teaser b { font: 700 1.05rem var(--font-display); color: var(--purple-ink); }
.strata-teaser span { color: var(--muted); font-size: .9rem; }
.strata-teaser em { font-style: normal; font-weight: 600; color: var(--purple-ink); }
@media (max-width: 640px) { .strata-teaser { grid-template-columns: 1fr; } }
.strata-ctrl label { flex-wrap: wrap; max-width: 100%; }
.strata-ctrl select { max-width: min(100%, 70vw); }
.strata-ll { font: 500 .78rem var(--font-mono); white-space: nowrap; color: var(--muted); }