/* IPM Lab calculator wizard. Needs ../style.css (tokens, fonts) loaded first.
   Every selector starts with .ipm-calc: the markup produced by calc-core.js uses short generic class names (.card, .btn, .row, .nav …)
   that must not touch the rest of the site. Colours come from the site tokens only, so both themes work without extra rules. */

/* ---------- root ---------- */
.ipm-calc{position:relative;display:block;text-align:left;color:var(--ink);font:400 16px/1.55 var(--font-body);-webkit-text-size-adjust:100%}
.ipm-calc *,.ipm-calc *::before,.ipm-calc *::after{box-sizing:border-box}
.ipm-calc button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ipm-calc button:disabled{cursor:not-allowed}
.ipm-calc :focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.ipm-calc input:focus-visible{outline-offset:1px}
.ipm-calc .muted{color:var(--muted);font-size:14px;line-height:1.45}
.ipm-calc .hint{color:var(--muted);font-size:13px;line-height:1.45;margin:8px 0 0}
.ipm-calc b{font-weight:600}
.ipm-calc [hidden]{display:none!important}

/* ---------- mode switch ---------- */
/* Выбор режима — первое, что видит клиент: крупная плашка с вопросом и пояснением под каждым вариантом */
.ipm-calc .ipm-modes-title{margin:0 0 8px;font:600 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.ipm-calc .ipm-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;margin:0 0 20px;border-radius:var(--r-lg);background:var(--field);border:2px solid var(--accent)}
.ipm-calc .ipm-modes button{display:grid;gap:4px;align-content:center;min-height:68px;padding:12px 18px;border-radius:var(--r-md);text-align:left;color:var(--ink);background:var(--card);border:1px solid var(--line);transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.ipm-calc .ipm-modes button b{font-size:17px;font-weight:700;line-height:1.2}
.ipm-calc .ipm-modes button small{font-size:13px;line-height:1.3;color:var(--muted)}
.ipm-calc .ipm-modes button:hover{border-color:var(--accent-text);transform:translateY(-1px)}
.ipm-calc .ipm-modes button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ipm-calc .ipm-modes button.on small{color:var(--on-accent);opacity:.8}
.ipm-calc .ipm-later{display:grid;gap:10px}
.ipm-calc .ipm-later p{margin:0}

/* ---------- buttons ---------- */
.ipm-calc .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--accent);border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;line-height:1.2;text-align:center;transition:transform .3s var(--ease),border-color .25s,background .25s}
.ipm-calc .btn:hover:not(:disabled){transform:translateY(-1px)}
.ipm-calc .btn:active:not(:disabled){transform:scale(.98)}
.ipm-calc .btn:disabled{opacity:.45}
.ipm-calc .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.ipm-calc .btn.ghost:hover:not(:disabled){border-color:var(--accent-text)}
.ipm-calc .btn.mini{min-height:40px;padding:6px 14px;font-size:14px;margin:8px 0 0}

/* ---------- file block (dropzone) ---------- */
.ipm-calc .ipm-file{margin:0 0 16px}
.ipm-calc .ipm-drop{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;row-gap:2px;padding:14px 18px;border:1.5px dashed color-mix(in srgb,var(--ink) 28%,transparent);border-radius:var(--r-lg);cursor:pointer;transition:border-color .3s,background .3s}
.ipm-calc .ipm-drop:hover{border-color:var(--accent-text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ipm-calc .ipm-drop.dragover{border-style:solid;border-color:var(--accent-text);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.ipm-calc .ipm-drop-icon{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:20px;font-weight:700}
.ipm-calc .ipm-drop-title{font:600 16px/1.3 var(--font-display);word-break:break-word}
.ipm-calc .ipm-drop-sub{font:500 12px/1.4 var(--font-mono);color:var(--muted)}
.ipm-calc .ipm-file-actions{display:flex;gap:12px;margin-top:8px}
.ipm-calc .ipm-file-actions .btn.mini{margin:0}
.ipm-calc .ipm-file-msg{margin:8px 0 0;font-size:14px;color:var(--muted)}
.ipm-calc .ipm-file-msg:empty{display:none}
.ipm-calc .ipm-file-msg.is-error{color:var(--danger);font-weight:600;padding-left:10px;border-left:3px solid var(--danger)}
.ipm-calc .ipm-file-info{margin-top:8px;font-size:14px;font-variant-numeric:tabular-nums}
.ipm-calc .ipm-file-info:empty{display:none}
.ipm-calc .ipm-file-info .tip{margin-top:8px}

/* ---------- cards and layout ---------- */
.ipm-calc .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.ipm-calc .top{margin:0 0 16px}
.ipm-calc .top>.card{padding:14px}
.ipm-calc .row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ipm-calc .main{min-width:0}

/* ---------- steps tree ---------- */
.ipm-calc .tree{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;align-content:start;min-height:calc(3 * 52px + 2 * 8px)}   /* room for three rows: the window below keeps its place */
.ipm-calc .node{display:block;height:52px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:13px;font-weight:500;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .25s,background .25s,color .25s}
.ipm-calc .node:hover{border-color:var(--accent-text)}
.ipm-calc .node small{display:block;margin-top:1px;font:500 11px/1.3 var(--font-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipm-calc .node .ipm-idx{margin-right:6px;font:500 12px/1 var(--font-mono);color:var(--muted)}
.ipm-calc .node.done{border-color:var(--accent-text)}
.ipm-calc .node.skip{border-style:dashed;color:var(--muted)}
.ipm-calc .node.cur{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ipm-calc .node.cur small,.ipm-calc .node.cur .ipm-idx{color:var(--on-accent);opacity:.75}

/* ---------- question window: fixed height, the list scrolls inside, the nav stays put ---------- */
.ipm-calc .step-card{display:flex;flex-direction:column;height:clamp(360px,52vh,520px);padding:0;overflow:hidden}
.ipm-calc .step-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:auto;padding:20px 22px 14px}
.ipm-calc .step-body>.muted:first-child{font:500 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ipm-calc .qt{display:flex;align-items:center;gap:10px;margin:8px 0 8px;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.02em}
.ipm-calc .info{position:relative;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--field);color:var(--accent-text);font:600 13px/1 var(--font-mono);cursor:help;transition:border-color .25s}
.ipm-calc .info::after{content:"";position:absolute;inset:-10px}   /* a bigger touch area than the icon */
.ipm-calc .info:hover{border-color:var(--accent-text)}
.ipm-calc .nav{flex:none;display:flex;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--line);background:var(--card)}
.ipm-calc .nav .btn{min-width:128px}

/* ---------- options ---------- */
.ipm-calc .opts{display:grid;gap:8px;margin:14px 0 4px}
.ipm-calc .opt{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--field);color:var(--ink);font-size:15px;line-height:1.3;text-align:left;transition:border-color .25s,background .25s,color .25s}
.ipm-calc .opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);transition:border-color .25s,background .25s,box-shadow .25s}
.ipm-calc .opt:hover{border-color:var(--accent-text)}
.ipm-calc .opt.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.ipm-calc .opt.on::before{border-color:var(--on-accent);background:var(--on-accent);box-shadow:inset 0 0 0 3.5px var(--accent)}
.ipm-calc .opt.skip{min-height:44px;background:transparent;border-style:dashed;color:var(--muted);font-size:14px}
.ipm-calc .opt.skip.on{border-style:solid;border-color:var(--muted);background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--ink);font-weight:500}
.ipm-calc .opt.skip.on::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3.5px var(--card)}
.ipm-calc .dot{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line)}

/* ---------- numeric fields, sizes ---------- */
.ipm-calc .num{width:130px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font:500 15px/1.3 var(--font-mono);transition:border-color .25s}
.ipm-calc .num:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.ipm-calc .num.big{width:160px;font-size:18px}
.ipm-calc .num.dim{width:116px}
.ipm-calc .dims{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:8px 0}
.ipm-calc .fld{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.ipm-calc .fld .num{width:130px}

/* ---------- colour palette ---------- */
.ipm-calc .chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.ipm-calc .sw{flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:2px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.ipm-calc .sw:hover{transform:scale(1.1)}
.ipm-calc .sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}

/* ---------- notes and warnings ---------- */
.ipm-calc .tip{margin-top:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--field);background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:14px;line-height:1.45}
.ipm-calc .warn-box{margin-top:12px;padding:10px 12px;border:1px solid var(--danger);border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:13.5px;line-height:1.45}
.ipm-calc .warn-box .btn.mini{margin:6px 6px 0 0}
.ipm-calc .warn{margin-top:8px;padding:2px 0 2px 10px;border-left:3px solid var(--accent-text);font-size:13.5px;line-height:1.45}
.ipm-calc .bad{padding:10px 12px;border:1px solid currentColor;border-radius:var(--r-md);font-weight:600}

/* ---------- summary table ("Итог") ---------- */
.ipm-calc table.bd{width:100%;border-collapse:collapse;font-size:14px}
.ipm-calc table.bd td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ipm-calc table.bd td:last-child{padding-left:12px;text-align:right}
.ipm-calc table.sum tr[data-step]{cursor:pointer}
.ipm-calc table.sum tr[data-step]:hover td{color:var(--accent-text)}

/* ---------- price panel ---------- */
.ipm-calc .panel{position:sticky;top:calc(var(--header, 68px) + 16px);max-height:calc(100vh - var(--header, 68px) - 32px);overflow-y:auto;padding:22px;border-color:transparent;background:var(--surface);color:var(--on-surface);box-shadow:var(--shadow)}
.ipm-calc .panel .muted,.ipm-calc .panel .hint{color:var(--on-surface-muted)}
.ipm-calc .panel .ipm-panel-body>.muted:first-child{font:500 12px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--on-surface-muted)}
.ipm-calc .price{margin:8px 0 6px;font:600 clamp(26px,2.4vw,32px)/1.1 var(--font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--accent)}
.ipm-calc .price .next{display:block;margin-top:4px;font:300 14px/1.45 var(--font-body);letter-spacing:0;color:var(--on-surface-muted)}
.ipm-calc .rec{margin-top:12px;padding:12px;border:1px solid color-mix(in srgb,var(--on-surface) 22%,transparent);border-radius:var(--r-md);font-size:14px}
.ipm-calc .rec b{display:block;margin-bottom:4px}
.ipm-calc .panel .btn.ghost{border-color:color-mix(in srgb,var(--on-surface) 32%,transparent);color:var(--on-surface)}
.ipm-calc .panel .btn.ghost:hover:not(:disabled){border-color:var(--accent)}
.ipm-calc .panel .tip,.ipm-calc .panel .warn-box{color:var(--on-surface)}
.ipm-calc .panel .warn-box,.ipm-calc .panel .warn{border-color:var(--accent)}
.ipm-calc .panel :focus-visible{outline-color:var(--accent)}
.ipm-calc .ipm-bar{display:none}

/* ---------- floating tooltip ---------- */
.ipm-calc .ipm-tip{position:fixed;left:0;top:0;z-index:calc(var(--z-float, 50) + 1);display:none;max-width:min(300px,calc(100vw - 16px));padding:8px 11px;border:1px solid color-mix(in srgb,var(--on-surface) 14%,transparent);border-radius:var(--r-sm);background:var(--surface);color:var(--on-surface);font-size:13px;line-height:1.4;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);pointer-events:none}
.ipm-calc .ipm-tip.is-on{display:block}

/* ---------- narrow screens: one column, the price becomes a bar fixed to the bottom ---------- */
@media (max-width:899px){
  .ipm-calc{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  .ipm-calc .ipm-modes{grid-template-columns:1fr;width:100%}
  .ipm-calc .row{display:block}
  .ipm-calc .panel{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:var(--z-float, 50);display:flex;flex-direction:column;max-height:80vh;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));border-width:1px 0 0;border-color:color-mix(in srgb,var(--on-surface) 16%,transparent);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -12px 30px -12px rgba(0,0,0,.5);overflow:visible}
  .ipm-calc .ipm-bar{order:2;display:flex;align-items:center;gap:12px}
  .ipm-calc .ipm-bar-toggle{flex:1 1 auto;min-width:0;display:grid;gap:1px;min-height:44px;padding:2px 0;text-align:left}
  .ipm-calc .ipm-bar-label{font:500 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-muted)}
  .ipm-calc .ipm-bar-label::after{content:" \25B4";display:inline-block;transition:transform .3s var(--ease)}
  .ipm-calc .panel.is-open .ipm-bar-label::after{transform:rotate(180deg)}
  .ipm-calc .ipm-bar-price{font:600 18px/1.15 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:balance}
  .ipm-calc .ipm-bar .btn{flex:none;padding:10px 16px;white-space:nowrap}
  .ipm-calc .ipm-panel-body{order:1;display:none;max-height:min(60vh, 520px);overflow-y:auto;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--on-surface) 16%,transparent)}
  .ipm-calc .panel.is-open .ipm-panel-body{display:block}
  .ipm-calc .ipm-panel-body [data-send]{display:none}   /* the bar already carries the button */
  .ipm-calc .ipm-tip{max-width:calc(100vw - 16px)}
}

@media (max-width:700px){
  .ipm-calc .top>.card{padding:10px}
  .ipm-calc .tree{display:flex;gap:6px;min-height:0;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}   /* one scrolling row keeps the window above the fold */
  .ipm-calc .node{flex:none;width:136px;scroll-snap-align:start}
  .ipm-calc .step-body{padding:16px 16px 12px}
  .ipm-calc .nav{padding:12px 16px}
  .ipm-calc .nav .btn{min-width:0;flex:1 1 0}
  .ipm-calc .ipm-drop{padding:12px 14px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ipm-calc *,.ipm-calc *::before,.ipm-calc *::after{transition:none!important;animation:none!important}
  .ipm-calc .btn:hover:not(:disabled),.ipm-calc .btn:active:not(:disabled),.ipm-calc .sw:hover{transform:none}
}