/* SDK Motors — the customs calculator (assets/calc.js) on the home page.
   Uses the page's own tokens; the result card is the old .calc-out card. */

.cc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-48);align-items:start}
@media(max-width:900px){.cc{grid-template-columns:minmax(0,1fr);gap:var(--spacing-32)}}

.cc-form{display:grid;gap:var(--spacing-24);min-width:0}
.cc-f{display:grid;gap:var(--spacing-8);min-width:0;border:0;padding:0;margin:0}
.cc-f[hidden],.cc-two[hidden],.cc [hidden]{display:none}
.cc-f>label,.cc-f>legend,.cc-bank>label{font-size:var(--text-fine);color:var(--color-steel);letter-spacing:normal;padding:0}
.cc-f>legend{margin-bottom:var(--spacing-8)}
.cc-hint{font-size:var(--text-fine);line-height:var(--leading-fine);color:var(--color-fog);letter-spacing:normal}
.cc-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-16)}
@media(max-width:420px){.cc-two{grid-template-columns:minmax(0,1fr)}}

/* segmented choice: radios under the labels, the chosen one lit */
.cc-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;
  background:var(--color-charcoal);border-radius:12px}
.cc-seg label{position:relative;display:block;cursor:pointer}
.cc-seg input,.cc-unit input,.cc-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cc-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 4px;border-radius:9px;
  font-size:var(--text-body);font-weight:var(--w-medium);letter-spacing:normal;color:var(--color-steel);
  text-align:center;white-space:nowrap;transition:background-color .18s,color .18s}
.cc-seg label:hover span{color:var(--color-graphite)}
.cc-seg input:checked+span{background:var(--color-graphite);color:var(--color-paper)}
.cc-seg input:focus-visible+span,.cc-unit input:focus-visible+span,.cc-check input:focus-visible+span::before{
  outline:2px solid var(--color-accent);outline-offset:2px}
@media(max-width:420px){.cc-seg span{font-size:13px;padding:6px 2px}}

/* a field: the input and whatever sits at its right edge share one frame */
.cc-in{display:flex;align-items:center;min-width:0;background:var(--color-charcoal);
  border:1px solid var(--color-charcoal);border-radius:var(--radius-inputs);transition:border-color .2s}
.cc-in:focus-within{border-color:var(--color-accent)}
.cc-in.bad{border-color:var(--color-accent-text)}
.cc-in input{flex:1;min-width:0;width:100%;background:transparent;border:0;color:var(--color-graphite);
  padding:12px var(--spacing-16);font:inherit;font-size:var(--text-body-lg);letter-spacing:normal;
  font-variant-numeric:tabular-nums}
.cc-in input:focus{outline:none}
.cc-in input::placeholder{color:var(--color-fog)}
.cc-in select{flex:none;align-self:stretch;background:transparent;border:0;border-left:1px solid var(--color-concrete);
  color:var(--color-graphite);font:inherit;font-size:var(--text-body);font-weight:var(--w-medium);
  padding:0 34px 0 14px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3aeb8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.cc-in select:focus{outline:none}
.cc-in select option{background:var(--color-charcoal);color:var(--color-graphite)}
.cc-unit{flex:none;display:flex;gap:2px;padding:4px;margin-right:4px;background:var(--color-paper);border-radius:8px}
.cc-unit label{position:relative;cursor:pointer}
.cc-unit span{display:block;padding:5px 9px;border-radius:6px;font-size:var(--text-fine);font-weight:var(--w-medium);
  letter-spacing:normal;color:var(--color-fog);transition:background-color .18s,color .18s}
.cc-unit input:checked+span{background:var(--color-concrete);color:var(--color-graphite)}
/* кВт in red: л.с. and кВт were easy to mix up */
.cc-unit input[value=kw]+span{color:var(--color-accent-text)}
.cc-unit input[value=kw]:checked+span{background:var(--color-accent);color:var(--color-accent-ink)}

/* check boxes */
.cc-check{position:relative;display:block;cursor:pointer;font-size:var(--text-body);letter-spacing:normal;color:var(--color-graphite)}
.cc-check>span{display:block;position:relative;padding-left:32px;line-height:22px}
.cc-check>span::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--color-ash);background:var(--color-charcoal);transition:background-color .18s,border-color .18s}
.cc-check>span::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:10px;
  border:solid var(--color-accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .18s}
.cc-check input:checked+span::before{background:var(--color-accent);border-color:var(--color-accent)}
.cc-check input:checked+span::after{opacity:1}
.cc-check small{display:block;margin-top:2px;font-size:var(--text-fine);line-height:var(--leading-fine);color:var(--color-fog)}
.cc-personal{padding:var(--spacing-16);border:1px solid var(--color-concrete);border-radius:12px}

/* exchange rates */
.cc-rates{display:grid;gap:var(--spacing-16);padding-top:var(--spacing-24);border-top:1px solid var(--color-concrete)}
.cc-cbr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:var(--text-fine);
  letter-spacing:normal;color:var(--color-steel)}
.cc-cbr b{font-weight:var(--w-medium);color:var(--color-graphite);font-variant-numeric:tabular-nums}
.cc-bank{display:grid;gap:var(--spacing-8)}

/* the result card */
.cc-out{position:sticky;top:84px;min-width:0}
@media(max-width:900px){.cc-out{position:static}}
.cc-out .total{font-variant-numeric:tabular-nums;margin-bottom:var(--spacing-16)}
.cc-out .brk{align-items:baseline}
.cc-out .brk>span:first-child{min-width:0}
.cc-out .brk>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.cc-out .brk small{display:block;margin-top:2px;font-size:var(--text-fine);line-height:var(--leading-fine);color:var(--color-fog)}
.cc-notes{list-style:none;margin:var(--spacing-8) 0 0;padding:0;display:grid;gap:var(--spacing-8)}
.cc-notes:empty{display:none}
.cc-notes li{position:relative;padding:10px 12px 10px 34px;border-radius:10px;background:var(--color-paper);
  font-size:var(--text-fine);line-height:var(--leading-fine);letter-spacing:normal;color:var(--color-steel)}
.cc-notes li::before{content:"i";position:absolute;left:11px;top:10px;width:16px;height:16px;border-radius:50%;
  background:var(--color-concrete);color:var(--color-graphite);font-size:11px;font-weight:700;line-height:16px;text-align:center;font-style:normal}
.cc-notes li.warn::before{content:"!";background:var(--color-accent);color:var(--color-accent-ink)}
.cc-sum{margin-top:var(--spacing-24);padding-top:var(--spacing-8);border-top:1px solid var(--color-ash)}
.cc-sum .brk:first-child{border-top:0}
.cc-grand>span{font-size:var(--text-body-lg);color:var(--color-graphite)!important;font-weight:var(--w-semibold)}
.cc-sum .cc-hint{display:block;margin-top:4px}
.cc-cta{width:100%;margin-top:var(--spacing-16)}
.cc-cta+.cc-cta{margin-top:var(--spacing-8)}
.cc-fine{margin-top:var(--spacing-16);font-size:var(--text-fine);line-height:var(--leading-fine);color:var(--color-fog);letter-spacing:normal}
.cc-empty .total,.cc-empty .brk>span:last-child{color:var(--color-fog)}