/* ============================================================================
   configurator.css — the price block, as a thing you build.

   NOT A DESIGN SYSTEM. Every colour, typeface, radius and step is a token
   from base.css. Two rules govern most of what follows:

     §02  two grounds, paper and ink. Madder is the accent — the price, the
          one filled button, the selected state — and NEVER a large field.
          The wireframe's salmon panels are placeholder fill, not a colour
          instruction; they are drawn here with a hairline and no fill at
          all — every wash tried over this paper read as dirt.
     §04  18px gutter, steps of 4 / 8 / 20, radii 5 / 8 / 10 / 14.

   The heading scale descends 20 → 18 → 14 → 14 across the four questions,
   which is the weight the decisions actually carry: how many is the
   commercial question, extras are the afterthought.
   ========================================================================== */

.cfg-mount{display:block}

/* The one colour not in base.css: the calendar's free-day green, already
   used at 40% for day borders. Named once so the confirmation mark and the
   day marker cannot drift apart — on :root, because the animations specimen
   loads this sheet without a .cfg-mount anywhere on the page. */
:root{--ok:#3d5c2e}
.cfg-fallback[hidden]{display:none!important}

/* --- The pop-up -----------------------------------------------------------
   The configurator opens in a dialog (owner, 2026-09-25; it had stood open
   in «Цена» since 2026-09-24). Large on a computer, the whole screen on a
   phone — a long task in a small box is the case NN/g warns about. Paper
   panel, hairline, the frame radius; the page behind dims to the scrim the
   reel player uses. Only opacity is animated: a transform on the dialog
   would make the phone's fixed price bar inside it stop being fixed. */
html.cfg-lock{overflow:hidden}
.cfg-dlg{width:min(1120px,calc(100vw - 48px));max-width:none;height:min(940px,calc(100vh - 48px));
  height:min(940px,calc(100svh - 48px));max-height:none;margin:auto;padding:0;
  border:1px solid var(--line-hard);border-radius:var(--r4);background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px -24px rgba(24,19,13,.5);overflow:hidden}
.cfg-dlg[open]{display:flex;flex-direction:column}
.cfg-dlg::backdrop{background:var(--scrim)}
.cfg-dlg-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 28px;border-bottom:1px solid var(--hair)}
.cfg-dlg-h{font:600 clamp(20px,2.2vw,26px)/1.1 var(--ff-display);letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink)}
.cfg-dlg-x{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-hard);border-radius:var(--r2);background:var(--paper-hi,#e9e1d0);color:var(--ink);
  box-shadow:0 1px 1px rgba(24,19,13,.05),0 1px 3px -1px rgba(24,19,13,.05)}
.cfg-dlg-x:hover{border-color:var(--ink)}
.cfg-dlg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg-dlg-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:26px 28px 32px}
/* the price column sticks to the top of the pop-up's own scroll, not under
   the page header, which is behind it */
.cfg-dlg .cfg-side{top:0}
@media(prefers-reduced-motion:no-preference){
  .cfg-dlg[open]{animation:cfgFadeIn .18s ease-out}
  .cfg-dlg[open]::backdrop{animation:cfgFadeIn .18s ease-out}
}
@keyframes cfgFadeIn{from{opacity:0}to{opacity:1}}

/* --- «Цена»: the three plans -----------------------------------------------
   Back at the owner's request (2026-09-25). The configurator card's tone,
   hairline, radius and shadow; the recommended one outlined in ink — chosen
   and recommended are ink, the accent stays on the prices (§02). Name, what
   it is, what it costs, and «Настроить», which opens the pop-up there. */
.cfg-plans-lead{margin:-10px 0 20px;text-wrap:pretty}
.cfg-plans{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.cfg-plan{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:20px 20px 22px;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--paper-hi,#e9e1d0);
  box-shadow:0 1px 1px rgba(24,19,13,.04),0 2px 6px -2px rgba(24,19,13,.07)}
.cfg-plan.is-rec{border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink),0 1px 1px rgba(24,19,13,.04),0 2px 6px -2px rgba(24,19,13,.07)}
.cfg-plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.cfg-plan-n{font:600 20px/1.1 var(--ff-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.cfg-plan-rec{flex:0 0 auto;padding:6px 8px;border-radius:var(--r1);background:var(--ink);color:var(--on-ink);
  font:400 10px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cfg-plan-sum{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-72)}
.cfg-plan-row{margin-top:16px;align-items:baseline}
.cfg-plan-from{font:400 11px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-72)}
/* A plan card's price is the card's size, not the dialog's: never larger
   than the plan's own name or the section title (owner, 2026-09-25 — at
   42 px it out-shouted both). Madder keeps it the thing the eye finds. */
.cfg-plan .cfg-total{margin-top:0;font-size:20px;line-height:1.1}
.cfg-plan-per{margin-bottom:18px}
/* the buttons of the three stand on one line whatever the text above them */
.cfg-plan-go{margin-top:auto}
.cfg-plan-own{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:10px 0;border:0;background:none;
  cursor:pointer;font:600 16px/1 var(--ff-display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.cfg-plan-own .btn-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:translate .16s}
.cfg-plan-own:hover{color:var(--accent)}
.cfg-plan-own:hover .btn-arrow{translate:3px 0}

/* --- The configurator: the questions, and the price card beside them ---- */
.cfg-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.cfg-left{display:flex;flex-direction:column;gap:30px;min-width:0}

/* --- One question -------------------------------------------------------- */

.cfg-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px}
.cfg-sec-h{font-family:var(--ff-display);font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.15}
/* The descending scale IS the hierarchy of the decisions. */
.cfg-sec-qty  .cfg-sec-h{font-size:20px}
.cfg-sec-edit .cfg-sec-h{font-size:18px}
.cfg-sec-raw  .cfg-sec-h,
.cfg-sec-add  .cfg-sec-h{font-size:14px}
/* §37: a local reset per block, so experimenting is reversible in place. */
.cfg-sec-reset{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r1);color:var(--ink-65)}
.cfg-sec-reset:hover{border-color:var(--accent);color:var(--accent)}
.cfg-sec-reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* A grouped block, and the third attempt at its ground. A 9% ink wash read
   as dirty olive — ink diluted into a warm paper goes grey-green, not
   lighter. `--paper-out` read dirtier still: it is the tone BEHIND the page,
   so using it on top inverts the two-grounds relationship and the panel
   looks like a hole rather than a card.
   No fill at all is the answer. The block is already grouped by its rule and
   its radius; a wash was never carrying meaning, only weight. */
.cfg-panel{padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r3);
  background:var(--paper-hi,#e9e1d0);display:flex;flex-direction:column;gap:18px}

/* --- Billing mode -------------------------------------------------------- */

.cfg-bill{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cfg-bill-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color .16s ease,background-color .16s ease}
.cfg-bill-t:hover{border-color:var(--line-hard)}
/* THE CHOSEN VALUE IS INK, NOT MADDER (design system, the pills: «Обводка —
   переключаемое значение, чернила — текущая версия, акцент — активное
   сравнение»). A madder outline over a madder wash read as an error (owner,
   2026-09-24: "it feels like error, use my design system"); madder stays on
   the prices. */
.cfg-bill-t.is-on{border-color:var(--ink);background:var(--ink)}
.cfg-bill-n{font:600 13px/1.1 var(--ff-display);letter-spacing:.05em;text-transform:uppercase}
.cfg-bill-t.is-on .cfg-bill-n{color:var(--on-ink)}
.cfg-bill-t.is-on .cfg-bill-note{color:var(--on-ink-60)}
.cfg-bill-note{font:400 10.5px/1.2 var(--ff-mono);letter-spacing:.08em;color:var(--ink-65)}

/* --- A number: slider, buttons and a field, none of them alone ----------- */

.cfg-row{display:flex;flex-direction:column;gap:10px}
.cfg-row.is-changed{animation:cfgLit .9s ease-out}
@keyframes cfgLit{0%{background:rgba(168,50,30,.12)}100%{background:transparent}}

.cfg-ctl{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cfg-step{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r2);background:var(--paper-hi,#e9e1d0);
  transition:border-color .16s ease,background-color .16s ease}
.cfg-step:hover{border-color:var(--accent);color:var(--accent)}
.cfg-step svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg-field{width:78px;height:42px;padding:0 8px;text-align:center;background:var(--paper-hi,#e9e1d0);
  border:1px solid var(--line);border-radius:var(--r2);
  font:600 17px/1 var(--ff-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.cfg-field::-webkit-outer-spin-button,.cfg-field::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.cfg-field:hover{border-color:var(--line-hard)}
.cfg-unit{font:600 13px/1 var(--ff-display);letter-spacing:.05em;text-transform:uppercase}
.cfg-hint{font-size:12.5px;line-height:1.4;color:var(--ink-65);margin-left:2px}

.cfg-range{position:relative;padding-bottom:6px}
.cfg-slider{-webkit-appearance:none;appearance:none;width:100%;height:34px;margin:0;
  background:transparent;cursor:pointer;display:block}
.cfg-slider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--line)}
.cfg-slider::-moz-range-track{height:3px;border-radius:2px;background:var(--line)}
.cfg-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9.5px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);
  transition:background-color .12s ease,transform .12s ease}
.cfg-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent)}
/* The thumb fills while it is being moved. The one piece of feedback that
   says the control is live under the finger — it is state, not decoration. */
.cfg-slider.is-drag::-webkit-slider-thumb{background:var(--accent);transform:scale(1.12)}
.cfg-slider.is-drag::-moz-range-thumb{background:var(--accent)}
.cfg-slider:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r1)}

/* §13: the included boundary, drawn on the control it belongs to, so nobody
   has to work out where the allowance ends. */
/* A BUTTON: pressing it snaps the value to exactly the allowance, so nobody
   has to hunt the same spot with +/− to find the boundary again. */
.cfg-free{position:absolute;bottom:0;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:2px;padding:0 6px 2px;cursor:pointer;
  background:none;border:0}
.cfg-free[hidden]{display:none}
.cfg-free i{display:block;width:1px;height:12px;background:var(--accent)}
.cfg-free span{font:400 9.5px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;border-bottom:1px solid transparent}
.cfg-free:hover span{border-bottom-color:var(--accent)}
.cfg-free:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)}

/* And the same fact in words, because a tick says «where» and not «am I
   paying for this, and how much». */
.cfg-raw-state{margin-top:2px;font:400 12px/1.45 var(--ff-mono);color:var(--ink-65);
  font-variant-numeric:tabular-nums}
.cfg-raw-state.is-over{color:var(--accent)}

/* --- The contextual pack offer ------------------------------------------- */

/* Left, aligned with everything above it. Pushed right it sat under nothing
   and read as a stray footer control; on the left it starts on the same
   vertical as the count it is an offer about. */
.cfg-offer{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--hair)}
.cfg-offer[hidden]{display:none}
.cfg-offer-go{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:11px 15px;
  border:1px solid var(--line-hard);border-radius:var(--r2);background:transparent;color:var(--ink);
  transition:border-color .16s ease}
.cfg-offer-go:hover{border-color:var(--ink)}
.cfg-offer-add{font:600 12.5px/1 var(--ff-display);letter-spacing:.06em;text-transform:uppercase}
.cfg-offer-save{font:600 14px/1 var(--ff-display);letter-spacing:.01em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.cfg-offer-note{font:400 11.5px/1.4 var(--ff-mono);color:var(--ink-65);
  font-variant-numeric:tabular-nums}

/* §24: taking the offer has to LOOK like it landed. Swapping straight to the
   next offer reads as the button having refused. The mark draws itself and
   the amount saved is the only word needed. */
.cfg-offer-done{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:11px 15px;border:1px solid var(--ok);border-radius:var(--r2);
  background:rgba(58,122,74,.09)}
.cfg-offer-done b{font:600 14px/1 var(--ff-display);letter-spacing:.01em;color:var(--ok);
  font-variant-numeric:tabular-nums}
.cfg-offer-tick{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--ok);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cfg-offer-tick path{stroke-dasharray:26;stroke-dashoffset:26;
  animation:cfg-tick .42s cubic-bezier(.32,.72,.35,1) forwards}
@keyframes cfg-tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .cfg-offer-tick path{animation:none;stroke-dashoffset:0}
}

/* --- Editing levels, side by side so they can be compared ---------------- */

.cfg-levels{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cfg-level{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:15px 14px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r3);
  transition:border-color .16s ease,background-color .16s ease}
.cfg-level:hover:not(:disabled){border-color:var(--line-hard)}
.cfg-level.is-on{border-color:var(--ink);background:var(--paper-hi,#e9e1d0);
  box-shadow:inset 0 0 0 1px var(--ink),var(--cfg-sh,0 0 0 transparent)}
.cfg-level.is-on::before{content:"";position:absolute;inset:-1px -1px auto;height:3px;
  border-radius:var(--r3) var(--r3) 0 0;background:var(--ink)}
.cfg-level:disabled{opacity:.42;cursor:not-allowed}
.cfg-level-n{font:600 15px/1.15 var(--ff-display);letter-spacing:.04em;text-transform:uppercase}
/* A fact about the set the visitor arrived from, and it goes the moment they
   pick a different level. */
.cfg-level-inc{font:400 10px/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-65)}
.cfg-level-inc[hidden]{display:none}
.cfg-level-list{flex:1 1 auto;display:flex;flex-direction:column;gap:5px;margin-top:2px}
.cfg-level-list li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.45;
  color:var(--ink-72)}
.cfg-level-list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;
  background:var(--line-hard)}
.cfg-level.is-on .cfg-level-list li::before{background:var(--ink)}
/* §11: a written description cannot show a non-editor what a cut feels like,
   and a permanent player would drown the choice. A small door instead — drawn
   as the configurator's own button, `.cfg-offer-go` («Добавить 5 роликов и
   сэкономить»; owner, 2026-09-24: "it should have same look like this
   button"). This rule only places it; the look is that button's. */
.cfg-level-ex{margin-top:4px;cursor:pointer;align-items:center;justify-content:center;
  text-align:center}
.cfg-level-play{width:10px;height:10px;flex:0 0 auto;fill:currentColor;stroke:none}

/* --- Additional ---------------------------------------------------------- */

.cfg-add-cap{font:400 11px/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-65);margin-bottom:10px}
.cfg-add-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.cfg-add{display:flex;align-items:flex-start;gap:10px;text-align:left;
  min-height:52px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r1);
  transition:border-color .16s ease,background-color .16s ease}
.cfg-add:hover{border-color:var(--line-hard)}
.cfg-add.is-on{border-color:var(--ink);background:var(--paper-hi,#e9e1d0);
  box-shadow:inset 0 0 0 1px var(--ink),var(--cfg-sh,0 0 0 transparent)}
.cfg-add-tick{flex:0 0 auto;width:17px;height:17px;margin-top:1px;border-radius:3px;
  border:1px solid var(--line-hard);position:relative}
.cfg-add.is-on .cfg-add-tick{border-color:var(--ink);background:var(--ink)}
.cfg-add.is-on .cfg-add-tick::after{content:"";position:absolute;left:5px;top:1.5px;
  width:5px;height:9px;border:solid var(--on-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cfg-add-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cfg-add-n{font-size:13px;line-height:1.35}
.cfg-add.is-on .cfg-add-n{font-weight:600}
.cfg-add-p{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.cfg-add-p b{font:600 12.5px/1 var(--ff-display);color:var(--accent)}
.cfg-add-p i{font:400 10.5px/1 var(--ff-mono);font-style:normal;color:var(--ink-65)}
.cfg-showall{margin-top:12px;min-height:44px;padding:10px 0;
  font:400 11px/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid transparent}
.cfg-showall:hover{border-bottom-color:var(--accent)}
.cfg-showall[hidden]{display:none}

/* --- The sticky column --------------------------------------------------- */

/* below the sticky site header, so the total stays in sight the whole way
   down the four questions */
.cfg-side{position:sticky;top:calc(var(--header) + 12px)}
.cfg-card{padding:20px 19px;border:1px solid var(--line);border-radius:var(--r3);
  background:var(--paper-hi,#e9e1d0)}
.cfg-total-l{font:400 11px/1 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-65)}
/* §17: the total carries the highest visual weight, because it answers the
   only question a change provokes. */
.cfg-total{margin-top:9px;font:600 clamp(30px,5vw,42px)/.92 var(--ff-display);
  letter-spacing:.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.cfg-total.is-na{font-size:19px;line-height:1.2;color:var(--ink)}
/* §18: per video is for comparing volumes; it stays secondary. */
.cfg-per{margin-top:6px;font:400 12px/1.4 var(--ff-mono);color:var(--ink-72);
  font-variant-numeric:tabular-nums}
.cfg-delta{margin-top:10px;font:400 12px/1.4 var(--ff-mono);letter-spacing:.02em}
.cfg-delta.is-up{color:var(--accent)}
.cfg-delta.is-down{color:var(--ink-72)}
/* THE CARD NEVER CHANGES HEIGHT WHEN SOMETHING CHANGES (owner, 2026-09-24:
   "when price changes the price menu layout jumps"). The note on the last
   change keeps its one line whether it is showing or not; the total row
   has one height whatever the figure and whether the term badge is there;
   the summary always holds two lines. */
.cfg-delta{min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* !important: base.css removes every [hidden] outright with !important;
   this one keeps its line and only goes invisible */
.cfg-delta[hidden]{display:block!important;visibility:hidden}
.cfg-delta:not([hidden]){animation:cfgIn .22s ease-out}
@keyframes cfgIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.cfg-gets-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.cfg-gets-l{font:400 11px/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-65)}
.cfg-gets-tldr{margin-top:8px;font-size:13.5px;line-height:1.5;min-height:3em}
.cfg-gets{margin-top:10px}
.cfg-gets[hidden]{display:none}
.cfg-gets li{position:relative;padding-left:16px;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--ink-72)}
.cfg-gets li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--accent)}
.cfg-gets-more{margin-top:10px;min-height:40px;padding:8px 0;
  font:400 10.5px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid transparent}
.cfg-gets-more:hover{border-bottom-color:var(--accent)}

/* §41: a date, not a calendar — until somebody asks for one. */
.cfg-avail{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.cfg-avail-l{font-size:13px;line-height:1.5}
/* A date is a control: the calendar and the day in a hairline box that
   opens the picker (owner, 2026-09-24). */
.cfg-date-v{display:inline-flex;align-items:center;gap:6px}
.cfg-date{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;
  border:1px solid var(--line-hard);border-radius:var(--r1);color:var(--ink);
  font:400 12.5px/1 var(--ff-mono);font-variant-numeric:tabular-nums;
  transition:border-color .16s ease,color .16s ease}
.cfg-date:hover,.cfg-date[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.cfg-date-ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cfg-date-x{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r1);color:var(--ink-65)}
.cfg-date-x:hover{border-color:var(--accent);color:var(--accent)}
.cfg-date-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg-cal{margin-top:10px}
.cfg-cal[hidden]{display:none}

/* The month was frozen on the current one, which makes a date more than four
   weeks out unreachable — and it opened on Sunday, which is not how a week
   is read here. */
.cfg-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px}
.cfg-cal-nav{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r1);color:var(--ink-65)}
.cfg-cal-nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cfg-cal-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cfg-cal-nav:disabled{opacity:.3}
.cfg-cal-title{font:600 12px/1 var(--ff-display);letter-spacing:.06em;
  text-transform:uppercase;text-align:center;flex:1 1 auto}
.cfg-cal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.cfg-cal-wd span{text-align:center;font:400 9.5px/1 var(--ff-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-65)}
.cfg-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cfg-cal-d{min-height:32px;border-radius:var(--r1);border:1px solid transparent;
  font:400 11.5px/1 var(--ff-mono);font-variant-numeric:tabular-nums}
.cfg-cal-d:disabled{opacity:.28}
.cfg-cal-d.is-free{border-color:rgba(61,92,46,.4)}
.cfg-cal-d.is-busy{border-color:rgba(138,90,16,.4)}
.cfg-cal-d.is-booked,.cfg-cal-d.is-off{opacity:.35}
.cfg-cal-d.is-today{font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.cfg-cal-d:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cfg-cal-x{min-height:32px}

.cfg-cta{width:100%;margin-top:18px;justify-content:center}

/* §26: the constraint, stated. It never moves the price. */
.cfg-min{margin-top:12px;padding:12px 13px;border:1px solid var(--accent);
  border-radius:var(--r2);background:rgba(168,50,30,.05)}
.cfg-min[hidden]{display:none}
.cfg-min-l{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:12.5px;line-height:1.5}
.cfg-min-l b{font:400 12.5px/1.4 var(--ff-mono);font-variant-numeric:tabular-nums}
.cfg-min-l + .cfg-min-l{margin-top:4px}
.cfg-min-l:last-of-type b{color:var(--accent)}
.cfg-min-note{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--ink-65)}

.cfg-say{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--ink-72)}
.cfg-say:empty{display:none}

/* «54 000 ₽» with no term is as misleading as «18 000 ₽» with no term, so
   the term sits on the same baseline as the figure, not in the small print. */
.cfg-total-row{display:flex;align-items:flex-end;gap:9px;flex-wrap:nowrap;
  min-height:calc(9px + .92 * clamp(30px,5vw,42px))}
.cfg-total{white-space:nowrap}
.cfg-total.is-long{font-size:clamp(26px,4vw,34px)}
.cfg-term{font:400 10.5px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);padding:4px 7px;border:1px solid var(--accent);border-radius:var(--r1)}
.cfg-term[hidden]{display:none}
/* on the number's baseline without adding its own depth to the row */
.cfg-term{flex:0 0 auto;margin-bottom:3px;white-space:nowrap}

/* Two dates, because they answer different questions: when the first cut
   lands, and when the whole order does. */
.cfg-avail-one{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-avail-one i{font-style:normal;font-size:12px;color:var(--ink-65)}
.cfg-avail-one + .cfg-avail-one{margin-top:6px}

.cfg-quote{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.cfg-quote[hidden]{display:none}
.cfg-quote.is-stale{opacity:.55}
.cfg-quote-l{font-size:12.5px;line-height:1.5;color:var(--ink-72)}
.cfg-quote-id{font:400 13px/1.4 var(--ff-mono);letter-spacing:.06em;color:var(--accent)}
/* §54: three intentions, three controls, never merged into one. */
.cfg-acts{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
  display:flex;gap:8px}
.cfg-act{flex:1 1 0;min-height:40px;padding:9px 8px;border:1px solid var(--line);
  border-radius:var(--r1);font:400 10px/1.3 var(--ff-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-72)}
.cfg-act:hover{border-color:var(--accent);color:var(--accent)}
.cfg-rec[hidden]{display:none}

/* --- The 15-second example ----------------------------------------------- */

.cfg-ex{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center}
.cfg-ex[hidden]{display:none!important}
.cfg-ex-scrim{position:absolute;inset:0;background:var(--scrim)}
/* Just the clip. A titled panel around fifteen seconds of video is a panel
   between somebody and the one thing they asked to see. */
.cfg-ex-box{position:relative;display:block;max-width:min(400px,88vw)}
.cfg-ex-v{display:block;width:100%;max-height:82vh;border-radius:var(--r3);
  background:var(--ink);aspect-ratio:9/16;object-fit:cover}
.cfg-ex-x{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;
  place-items:center;border-radius:50%;
  background:var(--scrim);color:var(--on-ink)}
.cfg-ex-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg-ex-x:hover{background:var(--accent)}

/* --- The phone's price rail ----------------------------------------------
   Sticks to the bottom of the screen while the configurator is in view and
   settles under it at the end — edge to edge, out of the section's gutter. */

.cfg-dlg-foot{position:sticky;bottom:0;z-index:5;margin:22px calc(-1 * var(--gut)) 0;display:none;background:var(--ink);color:var(--on-ink);
  padding-bottom:env(safe-area-inset-bottom);border-top:1px solid rgba(232,224,207,.18)}
.cfg-dlg-foot-in{display:flex;align-items:center;gap:12px;padding:10px var(--gut)}
.cfg-bar-l{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.cfg-bar-cap{font:400 10px/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-60);white-space:nowrap}
.cfg-bar-total{font:600 21px/1 var(--ff-display);letter-spacing:.01em;color:var(--accent-on-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg-bar-per{font:400 10.5px/1.2 var(--ff-mono);color:var(--on-ink-60);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg-bar-go{margin-left:auto;white-space:nowrap;flex:0 1 auto;min-width:0}

/* --- Depth ----------------------------------------------------------------
   A slight shadow under every box and every button of the configurator —
   never under text or a text link (owner, 2026-09-24). Boxes get the lift
   of the attention cards in Review Mode; buttons and fields a lighter one. */
/* Tight and faint (owner, same day: "make shadow less dirty" — the first
   12px, 8% spread read as a smudge on the paper). */
.cfg-inline{--cfg-sh:0 1px 1px rgba(24,19,13,.04),0 2px 6px -2px rgba(24,19,13,.07);
  --cfg-sh-b:0 1px 1px rgba(24,19,13,.05),0 1px 3px -1px rgba(24,19,13,.05)}
.cfg-panel,.cfg-level,.cfg-card,.cfg-add,.cfg-min{box-shadow:var(--cfg-sh)}
/* Sections and outlined buttons stand on the paper 5 points lighter than it
   (owner, 2026-09-24: the price card was a shade darker than the panel —
   "make it 5% lighter than the bg", then "same for each button"). A chosen
   value stays ink; hover stays as it was. */
.cfg-level,.cfg-add,.cfg-sec-reset,.cfg-bill-t,.cfg-offer-go,.cfg-act,
.cfg-date,.cfg-date-x,.cfg-cal-nav{background:var(--paper-hi,#e9e1d0)}
.cfg-bill-t,.cfg-sec-reset,.cfg-step,.cfg-field,.cfg-offer-go,.cfg-act,.cfg-cta,
.cfg-date,.cfg-date-x,.cfg-cal-nav{box-shadow:var(--cfg-sh-b)}

/* --- Viewports -----------------------------------------------------------
   §55: the layout changes, the product logic does not. The order of the four
   questions and the primacy of the total survive every width. */

@media(max-width:1023px){
  .cfg-grid{grid-template-columns:1fr;gap:22px}
  /* The summary moves ABOVE the controls rather than to the bottom of a long
     scroll: it is the answer, and an answer below four questions is an answer
     nobody reads. */
  .cfg-side{position:static;order:-1}
  .cfg-levels{grid-template-columns:1fr}
  .cfg-level{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
  .cfg-level-n{flex:0 0 auto}
  .cfg-level-inc{flex:1 1 auto}
  .cfg-level-list{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .cfg-level-ex{flex:0 0 auto;margin-top:0}
}

@media(max-width:759px){
  /* the pop-up is the whole screen; the body leaves room at its foot for
     the fixed price bar */
  .cfg-dlg{width:100vw;height:100vh;height:100dvh;border:0;border-radius:0}
  .cfg-dlg-head{padding:8px 8px 8px var(--gut)}
  .cfg-dlg-body{padding:18px var(--gut) 104px}
  .cfg-plans{grid-template-columns:1fr}
  .cfg-plan{padding:16px 15px 18px}
  /* THE PHONE (owner, 2026-09-24): the card comes AFTER the questions, with
     its own «Начать проект»; the dark bar floats at the bottom while the
     questions are on screen and slides away once the card is in view
     (configurator.js placeRail) — fixed, so it takes no room and leaves no
     second copy of the price under the card. */
  .cfg-side{order:0}
  .cfg-dlg-foot{display:block;position:fixed;left:0;right:0;bottom:0;margin:0;z-index:30;
    transform:translateY(100%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s}
  .cfg-dlg-foot.is-on{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
  .cfg-add-grid{grid-template-columns:1fr}
  .cfg-offer-note{flex:1 1 100%}
  .cfg-card{padding:16px 15px}
  .cfg-acts{flex-direction:column}
  .cfg-bill{grid-template-columns:1fr}
}

@media(max-width:400px){
  .cfg-ctl{gap:7px}
  .cfg-field{width:66px}
  .cfg-hint{flex:1 1 100%;margin-left:0}
}

/* --- Motion --------------------------------------------------------------
   base.css is explicit and it is worth restating where the animation lives:
   movement goes, FEEDBACK STAYS. A blanket transition:0 would also kill hover
   and focus, which is the only thing telling somebody the interface heard
   them. So the slide and the count go; the lit row, the filled thumb and
   every state change remain. */
@media(prefers-reduced-motion:reduce){
  .cfg-dlg-foot,.cfg-dlg-foot.is-on{transition:none}
  .cfg-delta:not([hidden]){animation:none}
  .cfg-slider::-webkit-slider-thumb{transition:none}
  .cfg-row.is-changed{animation:cfgLitStill 1.2s steps(1,end)}
  @keyframes cfgLitStill{0%{background:rgba(168,50,30,.12)}100%{background:transparent}}
}