/* MiraFloor interactive tools — shared by articles, service pages and the home page.
   Built on the claude-skin tokens (ivory paper, near-black ink, one red accent,
   hairlines instead of shadows). Every class is prefixed .mft so nothing here
   can collide with the Tailwind subset or lp.css.
   Inner rules are written as ".mft .mft-x" on purpose: articles and landings
   style ".article-body p", ".article-body td" (white cells), ".article-body a",
   ".mf-prose p" — one class plus a tag, which beats a lone ".mft-x" and would
   paint slate text and white cells into the dark result band. Text on the dark
   band also carries !important, because claude-skin.css repaints ".card p"
   with !important.
   Lead cards (MFTools.leadCard) are ".mft.mft-card": same tokens and scoped
   rules, without the tool frame.
   No opacity/transform transitions on purpose: on this site they have stuck
   mid-animation before and left elements invisible. */

.mft{
  --mft-paper:var(--paper,#FAF9F6);
  --mft-paper-2:var(--paper-2,#F3F1EB);
  --mft-line:var(--paper-3,#E9E6DE);
  --mft-ink:var(--ink,#141413);
  --mft-ink-2:var(--ink-2,#43413D);
  --mft-ink-3:var(--ink-3,#6B6862);
  --mft-accent:var(--accent,#E31E24);
  --mft-accent-ink:#D4191E;
  --mft-night:var(--night,#141413);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--mft-ink-2);
  background:var(--mft-paper-2);
  border:1px solid var(--mft-line);
  border-radius:6px;
  padding:24px;
  margin:32px 0;
  line-height:1.5;
  font-size:15px;
  max-width:100%;
}
.mft *,.mft *::before,.mft *::after{box-sizing:border-box}
.mft[hidden],.mft [hidden]{display:none!important}
/* Jump target of "#mft-tool" links and of the mobile bar (scrollIntoView):
   keep the tool's heading below the sticky site header (articles ≈65 px,
   landings 73 px; on phones the landing header wraps to two lines, ≈101 px). */
#mft-tool,.mft[data-mf-tool]{scroll-margin-top:88px}
@media (max-width:420px){#mft-tool,.mft[data-mf-tool]{scroll-margin-top:110px}}

.mft .mft-eyebrow{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;line-height:1.4;
  text-transform:uppercase;color:var(--mft-accent-ink);margin:0 0 8px
}
.mft .mft-title{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--mft-ink);margin:0 0 6px;padding:0;border:0}
.mft .mft-sub{margin:0;color:var(--mft-ink-3);font-size:14.5px;line-height:1.5;max-width:62ch}
.mft .mft-hint{margin:8px 0 0;color:var(--mft-ink-3);font-size:13px;line-height:1.45;max-width:62ch}

.mft .mft-q{margin-top:20px;border:0;padding:0;min-width:0}
.mft .mft-q-label{display:block;font-weight:700;font-size:14px;color:var(--mft-ink);margin:0 0 10px;padding:0;line-height:1.35}
.mft .mft-q-hint{display:block;font-weight:500;font-size:12.5px;color:var(--mft-ink-3);margin-top:3px}

.mft .mft-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.mft .mft-chip{
  appearance:none;font:inherit;font-size:14px;font-weight:700;color:var(--mft-ink-2);
  background:var(--mft-paper);border:1px solid var(--mft-line);border-radius:4px;
  min-height:44px;padding:9px 14px;cursor:pointer;text-align:left;line-height:1.25;text-decoration:none
}
.mft .mft-chip small{display:block;font-weight:500;font-size:12px;color:var(--mft-ink-3)}
.mft .mft-chip:hover{border-color:var(--mft-ink)}
.mft .mft-chip[aria-pressed="true"]{background:var(--mft-ink);border-color:var(--mft-ink);color:var(--mft-paper)}
.mft .mft-chip[aria-pressed="true"] small{color:#CFCBC2}

.mft .mft-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}
.mft .mft-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.mft .mft-field > span{font-weight:700;font-size:14px;line-height:1.3;color:var(--mft-ink)}
.mft .mft-step{display:inline-flex;align-items:stretch;border:1px solid var(--mft-line);border-radius:4px;background:var(--mft-paper);height:46px;max-width:100%}
.mft .mft-step button{
  appearance:none;border:0;background:transparent;width:44px;min-width:44px;padding:0;font-size:20px;font-weight:700;
  color:var(--mft-ink);cursor:pointer;line-height:1
}
.mft .mft-step button:hover{background:var(--mft-paper-2)}
.mft .mft-step input{
  width:78px;min-width:0;margin:0;padding:0;border:0;border-radius:0;
  border-left:1px solid var(--mft-line);border-right:1px solid var(--mft-line);
  text-align:center;font:inherit;font-size:16px;font-weight:800;color:var(--mft-ink);
  background:transparent;font-variant-numeric:tabular-nums;-moz-appearance:textfield
}
.mft .mft-step input::-webkit-outer-spin-button,.mft .mft-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mft .mft-unit{align-self:center;padding:0 10px 0 6px;font-size:13px;color:var(--mft-ink-3);font-weight:700}
.mft .mft-date{
  height:46px;max-width:100%;border:1px solid var(--mft-line);border-radius:4px;background:var(--mft-paper);
  font:inherit;font-size:16px;font-weight:700;color:var(--mft-ink);padding:0 12px
}

/* checkbox row: the whole label is the tap target */
.mft .mft-check{
  display:flex;gap:12px;align-items:center;min-height:44px;margin:14px 0 0;padding:4px 0;cursor:pointer;
  font-weight:700;font-size:14px;line-height:1.35;color:var(--mft-ink)
}
.mft .mft-check input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--mft-ink);cursor:pointer}

/* ---------- result: inverted band, numbers first ---------- */
.mft .mft-result{
  margin-top:22px;background:var(--mft-night);color:#FAF9F6;border-radius:6px;padding:22px
}
.mft .mft-result-kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:#B9B5AC!important;margin:0 0 6px;max-width:none}
.mft .mft-result-kicker.mft-gap{margin-top:22px}
.mft .mft-result-main{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;font-variant-numeric:tabular-nums;color:#FAF9F6!important;max-width:none}
.mft .mft-result-main em{font-style:normal;color:#FF6B6F}
.mft .mft-result-sub{margin:0 0 16px;color:#CFCBC2!important;font-size:14.5px;line-height:1.5}
/* hydro: "Матеріали · Робота · Разом" line under the area */
.mft .mft-result-sub .mft-sum{display:inline-block;margin-top:4px;color:#FAF9F6!important;font-weight:800;font-variant-numeric:tabular-nums}
.mft .mft-result-sub .mft-sum > span{display:inline-block}

.mft .mft-tl{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.mft .mft-tl li{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;margin:0;padding:10px 0 0;
  border-top:1px solid rgba(250,249,246,.14);color:#E9E6DE;list-style:none
}
.mft .mft-tl li::before{content:none}
.mft .mft-tl li:first-child{border-top:0;padding-top:0}
.mft .mft-tl .l{color:#E9E6DE;font-weight:700;font-size:14.5px;min-width:0}
.mft .mft-tl .v{color:#FAF9F6;font-weight:800;font-size:15px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mft .mft-tl .d{grid-column:1/-1;font-size:12.5px;color:#B9B5AC}
.mft .mft-tl .bar{grid-column:1/-1;height:4px;background:rgba(250,249,246,.12);border-radius:2px;overflow:hidden}
.mft .mft-tl .bar i{display:block;height:100%;background:#FF6B6F}
.mft .mft-tl li.mft-hit .l,.mft .mft-tl li.mft-hit .v{color:#fff}
.mft .mft-tl li.mft-hit .bar i{background:#FAF9F6}

/* material tables: name (+ small detail lines) | sum */
.mft .mft-table{
  width:100%;border-collapse:collapse;margin:4px 0 8px;font-variant-numeric:tabular-nums;font-size:inherit;
  text-align:left;background:transparent;border-radius:0;overflow:visible
}
.mft .mft-table td{
  padding:8px 0;border:0;border-top:1px solid;border-color:rgba(250,249,246,.14)!important;background:transparent;
  color:#E9E6DE;font-size:14.5px;line-height:1.4;vertical-align:top
}
.mft .mft-table td small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.4;color:#B9B5AC}
.mft .mft-table td:last-child{text-align:right;font-weight:800;color:#FAF9F6;white-space:nowrap;padding-left:12px}
.mft .mft-table td.mft-tbd{color:#B9B5AC;font-weight:700}
.mft .mft-table tr:first-child td{border-top:0}
.mft .mft-table tr.mft-total td{border-top-width:1px;border-top-color:rgba(250,249,246,.4)!important;font-size:16px;color:#FAF9F6;font-weight:800;padding-top:10px}
.mft .mft-table tr.mft-total td:last-child{white-space:normal;min-width:7.5em}
/* subtotal (hydro: materials before the work row) */
.mft .mft-table tr.mft-subtotal td{border-top-color:rgba(250,249,246,.3)!important;color:#FAF9F6;font-weight:800}
.mft .mft-table tr.mft-subtotal td:last-child{white-space:normal;min-width:7.5em}

.mft .mft-note{font-size:12.5px;color:#B9B5AC!important;margin:10px 0 0;line-height:1.5}
.mft .mft-note a{color:#FAF9F6;text-decoration:underline}
.mft .mft-warn{margin:12px 0 0;padding:10px 12px;border:1px solid rgba(255,107,111,.45);border-radius:4px;color:#FFD9DA!important;font-size:13.5px;line-height:1.5}

/* ---------- lead capture, inside the dark result ---------- */
.mft .mft-lead{margin-top:18px;padding-top:16px;border-top:1px solid rgba(250,249,246,.2)}
.mft .mft-lead-title{font-weight:800;font-size:16px;line-height:1.35;color:#FAF9F6!important;margin:0 0 4px}
.mft .mft-lead-sub{font-size:13.5px;line-height:1.5;color:#CFCBC2!important;margin:0 0 12px}
.mft .mft-lead-form{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.mft .mft-lead-form label{display:flex;flex-direction:column;gap:5px;flex:1 1 180px;min-width:0;margin:0}
.mft .mft-lead-form label span{font-size:12.5px;font-weight:700;color:#CFCBC2}
.mft .mft-lead-form input[type=tel],.mft .mft-lead-form input[type=text]{
  height:48px;width:100%;margin:0;border:1px solid rgba(250,249,246,.3);border-radius:4px;
  background:rgba(250,249,246,.06);color:#FAF9F6;font:inherit;font-size:16px;padding:0 12px
}
.mft .mft-lead-form input::placeholder{color:#8F8B84;opacity:1}
.mft .mft-lead-form input[aria-invalid=true]{border-color:#FF6B6F}
.mft-hp,.mft .mft-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mft .mft-btn{
  appearance:none;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:16px;
  min-height:48px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;line-height:1.2
}
/* claude-skin sets button{border-radius:0!important}; keep the site's primary curve */
.mft .mft-btn-primary{background:var(--mft-accent);color:#fff;border-radius:0 0 10px 10px!important;flex:1 1 200px;align-self:flex-end}
.mft .mft-btn-primary:hover{background:#C2181D}
.mft .mft-btn-primary[disabled]{background:#6B6862;cursor:progress}
.mft .mft-btn-ghost{
  margin-top:14px;min-height:44px;padding:10px 16px;border:1px solid rgba(250,249,246,.35);border-radius:4px!important;
  background:transparent;color:#FAF9F6;font-size:14.5px
}
.mft .mft-btn-ghost:hover{border-color:#FAF9F6}
.mft .mft-btn-calc{background:var(--mft-ink);color:var(--mft-paper);border-radius:0 0 10px 10px!important;margin-top:20px;width:100%}
.mft .mft-btn-calc:hover{background:#2A2926}
.mft .mft-alt{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.mft .mft-alt span{font-size:12.5px;color:#B9B5AC;margin-right:2px}
.mft .mft-alt a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid rgba(250,249,246,.35);
  border-radius:4px;color:#FAF9F6;font-weight:700;font-size:13.5px;text-decoration:none
}
.mft .mft-alt a:hover{border-color:#FAF9F6}
.mft .mft-err{flex-basis:100%;margin:0;color:#FFB3B5!important;font-size:13px;font-weight:700;line-height:1.45}
.mft .mft-err:empty{display:none}
.mft .mft-ok{margin-top:16px;padding:14px 16px;border:1px solid rgba(250,249,246,.35);border-radius:4px;color:#FAF9F6;line-height:1.5}
.mft .mft-ok b{display:block;font-size:16px;margin-bottom:4px;color:#FAF9F6}
.mft .mft-privacy{font-size:12px;line-height:1.45;color:#A29E96!important;margin:10px 0 0}
.mft .mft-privacy a{color:#CFCBC2;text-decoration:underline}

/* ---------- stand-alone lead card (MFTools.leadCard): no tool frame ---------- */
.mft.mft-card{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.mft.mft-card .mft-result{margin-top:0;border:1px solid rgba(250,249,246,.14)}
.mft.mft-card .mft-lead{margin-top:0;padding-top:0;border-top:0}
.mft.mft-card .mft-lead-title{font-size:18px;line-height:1.3}

/* ---------- compact teaser (links into an existing wizard) ---------- */
.mft.mft-teaser .mft-chips{margin-top:14px}
.mft.mft-teaser a.mft-chip{text-decoration:none;display:inline-flex;align-items:center}

@media (max-width:560px){
  .mft{padding:18px 16px;margin:26px 0}
  .mft .mft-title{font-size:20px}
  .mft .mft-result{padding:18px 16px}
  .mft .mft-result-main{font-size:26px}
  .mft .mft-row{gap:12px 14px}
  .mft .mft-chip{flex:1 1 calc(50% - 8px)}
  .mft .mft-btn-primary{flex-basis:100%}
  /* Timeline: the date goes under its label, so a long label
     ("Можна наносити гідроізоляцію Mira 4400") never runs over the date. */
  .mft .mft-tl li{grid-template-columns:1fr}
  .mft .mft-tl .l{overflow-wrap:break-word}
  .mft .mft-tl .v{text-align:left;white-space:normal}
}
/* ---------- mobile bottom bar (articles) ---------- */
.mft-bar{display:none}
@media (max-width:768px){
  .mft-has-bar .float{display:none!important}
  .mft-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#141413;border-top:1px solid #2A2926;
    font-family:'Manrope',system-ui,sans-serif
  }
  .mft-bar[hidden]{display:none}
  .mft-bar a{
    display:flex;align-items:center;justify-content:center;min-height:46px;padding:6px 8px;text-align:center;
    font-weight:800;font-size:14.5px;text-decoration:none;border-radius:4px;line-height:1.15
  }
  .mft-bar-main{background:#E31E24;color:#fff}
  .mft-bar-btn{border:1px solid rgba(250,249,246,.35);color:#FAF9F6}
  .mft-has-bar body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}

@media print{.mft .mft-lead,.mft .mft-alt,.mft .mft-btn-ghost,.mft.mft-card,.mft-bar{display:none}}