/* kalkulyator/ — ET calculator. The model is the home page's .et-model (home.css), here in normal flow. */
.kc{padding-top:calc(var(--head) + clamp(40px,6vw,88px));padding-bottom:clamp(80px,10vw,140px)}
.kc-head .display{font-size:clamp(32px,4vw,54px);max-width:14em}
.kc-head .lead{margin-top:16px;max-width:40em}
.kc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(28px,4vw,48px)}

.kc-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.kc-model.et-model{position:relative;inset:auto;display:block;aspect-ratio:1.2/1}
.kc-modes{display:inline-flex;gap:2px;margin-bottom:12px;padding:3px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.kc-modes button{height:30px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--text-2);font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.kc-modes button:hover{color:var(--text)}
.kc-modes button[aria-selected="true"]{background:var(--text);color:var(--bg)}

.kc-side{display:flex;flex-direction:column;gap:14px}
.kc-table{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.kc-row{display:grid;grid-template-columns:minmax(70px,1fr) minmax(0,128px) minmax(0,128px);align-items:center;gap:8px;min-height:42px}
.kc-row[hidden]{display:none}
.kc-th span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--muted)}
.kc-th span.after{color:var(--accent)}
.kc-th{min-height:26px}
.kc-lbl{font-size:14px;color:var(--text-2)}
.kc-cell{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;height:38px;border-radius:10px;background:var(--surface-2)}
.kc-cell.after{background:rgba(244,196,0,.07)}
.kc-cell.none{display:flex;justify-content:center;background:none;color:var(--muted)}
.kc-cell button{height:38px;padding:0;border:0;background:none;color:var(--text-2);font:inherit;font-size:18px;cursor:pointer;transition:color .2s}
.kc-cell button:hover{color:var(--text)}
.kc-cell button:active{color:var(--accent)}
.kc-cell label{display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:0}
.kc-cell input{width:3.4em;min-width:0;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:15px;font-variant-numeric:tabular-nums;text-align:right;outline:none}
.kc-cell em{font-style:normal;font-size:12px;color:var(--muted)}
.kc-cell input:focus{color:var(--accent)}
.kc-cell:focus-within{box-shadow:inset 0 0 0 1px var(--line-2)}
.kc-cell.changed input{color:var(--accent)}

.kc-verdict{margin:0;padding:14px 16px;border-radius:var(--r);font-size:15px;line-height:1.4;background:var(--surface);color:var(--text-2)}
.kc-verdict.ok{background:rgba(62,207,142,.1);color:#6fdcab}
.kc-verdict.tight{background:rgba(244,196,0,.1);color:var(--accent)}
.kc-verdict.risk{background:rgba(242,85,90,.12);color:#ff8a8d}
.kc-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kc-metrics.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.kc-metric{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.kc-metric span{font-size:12px;color:var(--muted)}
.kc-metric b{font-weight:500;font-size:18px;white-space:nowrap;color:var(--text)}
.kc-metric.tight b{color:var(--accent)}
.kc-metric.risk b{color:#ff8a8d}
.kc-foot{margin:0;font-size:13px;color:var(--muted)}
.kc-foot:empty{display:none}

.kc-how{margin-top:clamp(64px,8vw,112px);max-width:880px}
.kc-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 0}
.kc-dl dt{font-size:16px;color:var(--text)}
.kc-dl dd{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text-2)}
.kc-note{margin:28px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:44em}
.kc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:960px){
  .kc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .kc-dl{grid-template-columns:minmax(0,1fr);gap:18px}
  .kc-row{grid-template-columns:minmax(58px,1fr) minmax(0,118px) minmax(0,118px);gap:6px}
  .kc-model.et-model{aspect-ratio:1.05/1}
  .kc-cta .btn{flex:1 1 100%}
}