/* =========================================================================
   Kuncham Engineering Tools — design system + motion
   Loaded after kc-glass-toolkit.css inside engineering-calculators/toolkit.
   Pure presentation: no calculation, markup or content is changed.
   ========================================================================= */
:root {
    --kt-blue: #1d6fa5;
    --kt-blue-2: #0e5583;
    --kt-cyan: #2fa6d8;
    --kt-indigo: #2c5fd0;
    --kt-ink: #12222e;
    --kt-ease: cubic-bezier(.22, .8, .24, 1);
    --text-dim: #566876;
    --text-faint: #7d8e9b;
    --radius: 14px;
}

body { font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; }

/* ---------- headings / eyebrow / description ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px 5px 10px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(214,236,250,.6));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 4px 12px rgba(14,85,131,.08);
    font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kt-blue-2);
}
.eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #39c0e8, #2c5fd0); box-shadow: 0 0 0 3px rgba(57,167,224,.20);
}
.tool-title { font-weight: 800; letter-spacing: -.022em; color: var(--kt-ink); font-size: clamp(23px, 2.5vw, 31px); line-height: 1.18; }
.tool-desc { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; max-width: 76ch; }

.panel h4, .sim-head h4, .panel-head-row h4 {
    display: flex; align-items: center; gap: 9px;
    font: 700 11px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--kt-blue-2);
}
.panel h4::before, .sim-head h4::before, .panel-head-row h4::before {
    content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px;
    background: linear-gradient(135deg, #3fc1ea, #2c5fd0); box-shadow: 0 0 0 3px rgba(57,167,224,.18);
}
.panel { border-radius: 20px !important; }

/* ---------- live pill with radar ping ---------- */
.live-pill {
    padding: 4px 11px 4px 10px; border-radius: 999px;
    background: rgba(26,138,95,.10); box-shadow: inset 0 0 0 1px rgba(26,138,95,.22);
    font: 700 9.5px var(--sans); letter-spacing: .1em;
}
.live-pill::before { animation: ktPing 1.9s ease-out infinite; box-shadow: 0 0 0 0 rgba(26,138,95,.5); }
@keyframes ktPing { to { box-shadow: 0 0 0 8px rgba(26,138,95,0); } }

/* ---------- simulation stage ---------- */
.simulation-stage {
    border-radius: 16px !important; overflow: hidden;
    background:
        radial-gradient(120% 90% at 8% 0%, rgba(90,150,200,.08), rgba(90,150,200,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(240,246,251,.52)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 14px 34px rgba(14,85,131,.05) !important;
}
.simulation-stage::before {
    background-image:
        linear-gradient(rgba(29,111,165,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,165,.045) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(130% 110% at 50% 45%, #000 45%, transparent 100%);
            mask-image: radial-gradient(130% 110% at 50% 45%, #000 45%, transparent 100%);
}
.simulation-stage::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
    transform: translateX(-120%); animation: ktSweep 9s ease-in-out infinite;
}
@keyframes ktSweep { 0%, 58% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.sim-scene-title { font: 700 10.5px var(--sans); letter-spacing: .14em; color: var(--text-faint); }

/* ---------- SVG: legibility + finish (attribute-driven so every scene benefits) ---------- */
.sim-svg text { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.sim-svg text[font-size="7"], .sim-svg text[font-size="7.5"] { font-size: 8.6px; }
.sim-svg text[font-size="8"], .sim-svg text[font-size="8.5"] { font-size: 9.6px; }
.sim-svg text[font-size="9"] { font-size: 10.4px; }
.sim-svg text[font-size="10"] { font-size: 11.4px; }
.sim-svg text[font-size="11"] { font-size: 12.4px; }
.sim-svg text[font-size="12"] { font-size: 13.4px; }
.sim-svg text[font-size="16"] { font-size: 18px; }
.sim-svg text[font-size="19"], .sim-svg text[font-size="20"] { font-size: 22px; }
.sim-svg text[fill="#6b7684"] { fill: #5b6e7c; letter-spacing: .04em; }
.sim-svg text[fill="#8b98a1"], .sim-svg text[fill="#9aa4ae"], .sim-svg text[fill="#8fa0ab"] { fill: #71828f; }
.sim-svg text[font-weight="700"] { font-weight: 800; }

.sim-svg text.kc-g-label { font-size: 7.6px; font-weight: 700; letter-spacing: .1em; fill: #6a7f8e; text-transform: uppercase; }
.sim-svg text.kc-g-value { font-family: var(--mono); font-size: 10.4px; font-weight: 700; fill: #8ff0d4; letter-spacing: 0; }
.sim-svg text.kc-halo { paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; }
.sim-svg .kc-card-val { font-size: 18px; letter-spacing: -.01em; }

/* legacy inline boxes/tracks in scene code */
.sim-svg rect[fill="#fff"][stroke="#cfd9df"],
.sim-svg rect[fill="#fff"][stroke="#aab7c0"],
.sim-svg rect[fill="#fff"][stroke="#b4c0c7"] { fill: url(#kcBox); stroke: #fff; stroke-width: 1.5; rx: 11px; }
.sim-svg rect[fill="#e4ebef"] { fill: #dfe9f0; }
.sim-svg rect[fill="#5aadd3"] { fill: url(#kcBar); filter: drop-shadow(0 0 4px rgba(45,140,220,.45)); }
.sim-svg circle[fill="#fff"][stroke="#9aaab4"] { fill: url(#kcFace); }
.sim-svg .sim-pulse-line { stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(29,111,165,.5)); }
.sim-svg .sim-particle { filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); }

/* motion inside SVG */
.sim-svg .kc-wave { fill: rgba(255,255,255,.42); animation: ktWave 3.4s linear infinite; }
@keyframes ktWave { to { transform: translateX(var(--kc-wl, 60px)); } }
.sim-svg .kc-led { animation: livePulse 1.4s ease-in-out infinite; }
.sim-svg .kc-bar-knob { filter: drop-shadow(0 2px 4px rgba(14,85,131,.35)); }
.sim-svg .kc-gauge-arc { filter: drop-shadow(0 0 3px rgba(47,166,216,.55)); }
.sim-svg .kc-needle { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }

/* ---------- chips & result cards (KPI tiles) ---------- */
.sim-chip, .outcard {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(236,246,253,.62)) !important;
    border: 0 !important; border-radius: 14px;
    box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.4), inset 0 0 14px rgba(255,255,255,.35), 0 1px 2px rgba(20,38,58,.05), 0 10px 22px rgba(20,38,58,.09) !important;
    transition: transform .3s var(--kt-ease), box-shadow .3s var(--kt-ease);
}
.sim-chip::before, .outcard::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3.5px; border-radius: 0 4px 4px 0;
    background: linear-gradient(#3fc1ea, #2c5fd0);
}
.sim-chip.good::before, .outcard.good::before { background: linear-gradient(#3fd6a0, #138a5f); }
.sim-chip.bad::before,  .outcard.bad::before  { background: linear-gradient(#f0806e, #c2402f); }
.sim-chip.good, .outcard.good { background: linear-gradient(160deg, rgba(246,253,250,.92), rgba(226,246,238,.66)) !important; }
.sim-chip.bad,  .outcard.bad  { background: linear-gradient(160deg, rgba(254,247,245,.92), rgba(252,234,230,.66)) !important; }
.sim-chip:hover, .outcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff, 0 14px 28px rgba(14,85,131,.14) !important; }
.sim-chip .k, .outlabel { font: 700 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.sim-chip .v { font-size: 16px; letter-spacing: -.01em; }
.outvalue { font-size: 24px !important; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kt-blue-2); }
.outcard.good .outvalue { color: #137a52; } .outcard.bad .outvalue { color: #b23a2b; }
.out-main small, .output-unit { font-weight: 700; }

/* count-up overlay (real text stays final for any script that reads it) */
.kc-tw { position: relative; color: transparent !important; }
.kc-tw::after { content: attr(data-kc-shown); position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--kt-blue-2); }
.outcard.good .kc-tw::after { color: #137a52; } .outcard.bad .kc-tw::after { color: #b23a2b; }
@keyframes ktFlash { 0% { box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 rgba(57,167,224,.55); } 100% { box-shadow: inset 0 0 0 1px #fff, 0 0 0 14px rgba(57,167,224,0); } }
.kc-flash { animation: ktFlash .85s ease-out; }

/* ---------- inputs ---------- */
.field > span, .field-label-row > span:first-child { font-weight: 600; color: #33495a; }
.field input, .field select {
    border-radius: 11px !important; border: 1px solid rgba(255,255,255,.9) !important;
    background: rgba(255,255,255,.62) !important;
    box-shadow: inset 0 2px 5px rgba(14,85,131,.07), 0 0 0 1px rgba(160,190,212,.35);
    transition: box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}
.field input:focus, .field select:focus {
    outline: none; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(47,166,216,.28), 0 0 0 1px rgba(29,111,165,.75), 0 6px 16px rgba(14,85,131,.10);
}
.field-control input { border-radius: 11px 0 0 11px !important; }
.field-control .unit-select { border-radius: 0 11px 11px 0 !important; background: rgba(214,232,246,.75) !important; color: var(--kt-blue-2); font-weight: 700; }
.field-control.single input { border-radius: 11px !important; }
.info-btn { transition: transform .2s ease, background-color .2s ease; }
.info-btn:hover { transform: scale(1.12); }

/* ---------- buttons ---------- */
.reset-btn, .sim-btn {
    border-radius: 999px !important; border: 0 !important; padding: 7px 13px !important; font-weight: 700;
    background: rgba(255,255,255,.72) !important; color: var(--kt-blue-2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 4px 12px rgba(14,85,131,.10);
    transition: transform .2s var(--kt-ease), box-shadow .2s, background-color .2s;
}
.reset-btn:hover, .sim-btn:hover { transform: translateY(-1px); background: #fff !important; box-shadow: inset 0 0 0 1px #fff, 0 8px 18px rgba(14,85,131,.16); }
.reset-btn:active, .sim-btn:active { transform: translateY(1px); }
.sim-btn.primary, .sim-btn.active {
    color: #fff !important; background: linear-gradient(160deg, #2f9bdc, #1c62b8) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(28,98,184,.32);
}

/* ---------- sliders ---------- */
input[type=range] {
    -webkit-appearance: none; appearance: none; height: 7px; border-radius: 99px; border: 0 !important; padding: 0 !important;
    background:
        linear-gradient(90deg, #3fc1ea, #2c5fd0) 0 / var(--kc-fill, 50%) 100% no-repeat,
        rgba(14,85,131,.14) !important;
    box-shadow: none !important; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 7px; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #e5f2fb); border: 2.5px solid #1d6fd0;
    box-shadow: 0 3px 10px rgba(14,85,131,.35), 0 0 0 5px rgba(57,167,224,.14);
    transition: transform .18s var(--kt-ease), box-shadow .18s;
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 4px 14px rgba(14,85,131,.45), 0 0 0 8px rgba(57,167,224,.18); }
input[type=range]::-moz-range-track { background: transparent; height: 7px; }
input[type=range]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid #1d6fd0;
    box-shadow: 0 3px 10px rgba(14,85,131,.35), 0 0 0 5px rgba(57,167,224,.14);
}
.sim-range-value, .live-slider label { font-weight: 800; color: var(--kt-blue-2); }

/* ---------- formula + explanation ---------- */
.formula-box {
    position: relative; border-radius: 14px !important; padding-left: 20px !important;
    background: linear-gradient(135deg, rgba(14,85,131,.07), rgba(255,255,255,.55)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}
.formula-box::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#3fc1ea, #2c5fd0); }
.explain-card { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 16px rgba(14,85,131,.06); }
.explain-card h5 { font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--kt-blue-2); }
.current-input-token { border-radius: 999px !important; font-weight: 600; }

/* ---------- sidebar ---------- */
.brand-mark { background: linear-gradient(140deg, #35b3e6, #2c5fd0) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(44,95,208,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.cat-title { font: 800 10px var(--sans); letter-spacing: .16em; color: #6b8194; }
.tool-btn { border-radius: 10px !important; position: relative; transition: background-color .2s, color .2s, transform .2s var(--kt-ease), padding-left .2s var(--kt-ease); }
.tool-btn:hover { transform: translateX(3px); background: rgba(255,255,255,.7) !important; }
.tool-btn.active {
    background: linear-gradient(90deg, rgba(57,167,224,.20), rgba(255,255,255,.55)) !important; color: var(--kt-blue-2) !important; font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kt-cyan), 0 6px 14px rgba(14,85,131,.08);
}
.search-wrap input { border-radius: 999px !important; }

/* ---------- entrance ---------- */
@keyframes ktRise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.kc-enter .eyebrow, .kc-enter .tool-title, .kc-enter .tool-desc,
.kc-enter .sim-panel, .kc-enter .inputs-panel, .kc-enter .result-panel, .kc-enter .formula-panel, .kc-enter .explain-panel {
    animation: ktRise .65s var(--kt-ease) both; animation-delay: var(--kt-d, 0ms);
}
.kc-enter .sim-chip, .kc-enter .outcard { animation: ktRise .55s var(--kt-ease) both; animation-delay: calc(var(--kt-d, 0ms) + 160ms); }

/* ---------- help dialog ---------- */
.help-dialog { border-radius: 20px !important; background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 0 0 1px #fff, 0 30px 80px rgba(8,36,60,.30) !important; }

@media (prefers-reduced-motion: reduce) {
    .simulation-stage::after, .sim-svg .kc-wave, .live-pill::after, .sim-svg .kc-led { animation: none !important; }
    .kc-enter * { animation: none !important; }
    .sim-chip, .outcard, .tool-btn, .reset-btn, .sim-btn { transition: none !important; }
}
@media (max-width: 620px) {
    .outvalue { font-size: 21px !important; }
    .sim-svg text[font-size="8"], .sim-svg text[font-size="8.5"] { font-size: 10.2px; }
}

/* ---------- spacing / rhythm ---------- */
.main { padding-top: 30px; padding-bottom: 56px; }
.tool-desc { margin-bottom: 22px; }
.workbench { gap: 22px; margin-bottom: 22px; }
.result-panel, .formula-panel, .explain-panel { margin-top: 22px; }
.sim-head { padding: 16px 20px 6px; }
.sim-scene { padding: 14px 20px 8px; }
.sim-chips { padding: 4px 20px 20px; gap: 10px; }
.sim-control-bar { padding: 14px 20px 18px; }
.inputs-panel { padding: 20px 22px; }
.inputs-grid { gap: 16px 14px; }
.result-panel, .formula-panel, .explain-panel { padding: 20px 22px !important; }
.outputs-grid { gap: 12px; }
.outcard { padding: 14px 16px 13px 18px; }
.sim-chip { padding: 10px 14px 10px 16px; }
.panel-head-row { margin-bottom: 16px; }
.explain-grid { gap: 16px; }
.explain-card { padding: 16px 18px; }
.formula-box { padding: 14px 18px 14px 22px !important; }
.sidebar { padding-left: 14px; padding-right: 14px; }
.tool-btn { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 1080px) { .workbench { gap: 18px; } }
@media (max-width: 620px) {
    .main { padding: 20px 14px 48px; }
    .sim-head { padding: 14px 16px 4px; }
    .sim-scene { padding: 12px 12px 6px; }
    .sim-chips { padding: 4px 12px 16px; gap: 8px; }
    .sim-control-bar { padding: 12px 16px 16px; }
    .inputs-panel, .result-panel, .formula-panel, .explain-panel { padding: 16px 16px !important; }
    .workbench, .result-panel, .formula-panel, .explain-panel { margin-top: 16px; gap: 16px; }
}
@media (max-width: 620px) {
    /* phone: keep scene text legible by letting the drawing scroll sideways instead of shrinking to 50% */
    .sim-scene { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sim-svg { min-width: 560px; max-height: none; }
}

/* embedded simulator: breathing room between the frame edge and the content */
body.kc-toolkit-embed .app .main { padding-left: 26px !important; padding-right: 26px !important; box-sizing: border-box; }
@media (max-width: 620px) { body.kc-toolkit-embed .app .main { padding-left: 14px !important; padding-right: 14px !important; } }