/* Стили страницы /kalkulyator-dostavki/, перенесены из tools/site/kalkulyator-dostavki/index.html. Подключаются после site.css. */
/* Layout: same ILFF identity as the landings. Left: inputs in the order a batch moves through the warehouse. Right: sticky receipt-style estimate. Tariffs come from 1С (/v2/tariffs). */
:root{
  --bg:#eef1f4; --paper:#ffffff; --ink:#14233a; --muted:#56657a; --line:#c9d1dc;
  --accent:#0f5bd8; --tape:#e2a400; --accent-ink:#ffffff; --soft:#e3eaf5; --warn:#b4570b;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d141f; --paper:#152030; --ink:#e7edf5; --muted:#9aa8bb; --line:#2a3a50;
  --accent:#5b9bff; --tape:#f2b824; --accent-ink:#0b1320; --soft:#1a2a40; --warn:#f0a35a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d141f; --paper:#152030; --ink:#e7edf5; --muted:#9aa8bb; --line:#2a3a50;
  --accent:#5b9bff; --tape:#f2b824; --accent-ink:#0b1320; --soft:#1a2a40; --warn:#f0a35a; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body);margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700}
p{margin:0}
.label{font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
header.top{padding-block:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font:700 1.15rem var(--f-display);color:var(--ink);text-decoration:none}
.logo span{color:var(--accent)}
.intro{padding-block:12px 28px;display:grid;gap:12px}
.intro p{color:var(--muted);max-width:68ch}
.src{font:.8rem var(--f-mono);color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding-bottom:40px}
.steps{display:grid;gap:18px;min-width:0}
fieldset.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px;margin:0;display:grid;gap:14px;min-width:0}
fieldset.card legend{font:600 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:0 6px}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.row.r2{grid-template-columns:repeat(2,1fr)}
label.f{display:grid;gap:5px;font-size:.88rem;font-weight:500;min-width:0}
input[type=number],input[type=text],select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px;width:100%;font-variant-numeric:tabular-nums}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:.86rem;cursor:pointer;background:var(--paper)}
.opt input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.opt input:focus-visible+span{outline:3px solid var(--tape);outline-offset:2px}
[hidden]{display:none!important}
.opt input:disabled+span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.hint{color:var(--muted);font-size:.84rem}
.derived{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 .84rem var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.derived b{color:var(--ink)}
aside.receipt{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.r-head{background:var(--ink);color:var(--bg);padding:16px 20px;display:grid;gap:4px}
.r-head .label{color:var(--tape)}
.r-total{font:700 2rem var(--f-display);font-variant-numeric:tabular-nums;color:var(--bg)}
.r-per{font:.85rem var(--f-mono);opacity:.8}
.lines{list-style:none;margin:0;padding:8px 20px 14px}
.lines li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.lines li:last-child{border-bottom:0}
.lines small{display:block;color:var(--muted);font:.76rem var(--f-mono)}
.lines .v{font:600 .92rem var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lines .v.warn{color:var(--warn);white-space:normal;max-width:12ch}
.r-foot{padding:0 20px 18px;display:grid;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 .95rem var(--f-body);padding:12px 18px;border-radius:4px;border:2px solid var(--accent);cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
footer{padding-block:24px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
@media (max-width:960px){.grid{grid-template-columns:1fr}aside.receipt{position:static}}
@media (max-width:620px){.row{grid-template-columns:repeat(2,1fr)}.row.r2{grid-template-columns:1fr}}
.ac{position:relative}
.ac ul{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.ac li{padding:8px 12px;cursor:pointer;font-size:.92rem}
.ac li small{display:block;color:var(--muted);font-size:.78rem}
.ac li[aria-selected=true],.ac li:hover{background:var(--soft)}
.res{display:grid;gap:10px}
.res .it{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.res .it b{font:700 1.25rem var(--f-display);font-variant-numeric:tabular-nums}
.res .it .k{font:600 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.res .it.best{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.res .msg{color:var(--muted);font-size:.9rem}
.res .err{color:var(--warn);font-size:.9rem}