/* Прозорецът на платформата в началния екран: пренесен 1:1 от стария сайт
   (site/index.html, apply-hero.mjs + apply-ui.mjs) от redesign/port-hero.py.
   Промените за новия дизайн са в края на файла, под „── новият дизайн". */

/* ── стъклото ── */
.sana-hw,.sana-hwm{
  --glass-bg:rgba(255,255,255,.72);
  /* Рамката вече не е бяла: върху бяло платно бял ръб е невидим и картите
     висяха само на сянката. Хайрлайнът е синкав, от същата линия като мрежата. */
  --glass-border:1px solid #E2E8F0;
  --glass-shadow:0 8px 32px rgba(15,23,42,.05);
  --glass-blur:blur(16px);
  --lift-shadow:0 25px 50px -12px rgba(15,23,42,.10);
  --accent-grad:linear-gradient(135deg,#0EA5E9 0%,#2563A8 100%);
  --accent-shadow:0 10px 15px -3px rgba(37,99,168,.20),0 4px 6px -4px rgba(37,99,168,.20);
  --line:#E2E8F0;
}
[class$="-hw-in"]{background:#fff!important;border:1px solid #E2E8F0!important;
  border-radius:16px!important;box-shadow:var(--lift-shadow)!important;overflow:hidden}
.sana-hw .hw-b{border-radius:6px}
.s-cite,.hw-cite,.sc-cite,.sana-precise-cite,
.s-mob .s-cite,.sana-ui-frame .s-cite,.sana-hw .hw-cite{
  display:inline!important;font-size:.85em!important;vertical-align:.36em!important;
  font-weight:700!important;letter-spacing:-.01em!important;color:#2563A8!important;
  background:none!important;border:0!important;border-radius:0!important;
  min-width:0!important;width:auto!important;height:auto!important;
  line-height:1!important;padding:0!important;margin:0 0 0 -.02em!important;
  box-shadow:none!important;text-decoration:none!important;
  font-variant-numeric:tabular-nums;font-family:inherit!important}
.sana-hwm-c,.hwm-in.sana-hwm-c{
  display:inline!important;font-size:.85em!important;vertical-align:.36em!important;
  font-weight:700!important;color:#2563A8!important;background:none!important;
  border:0!important;border-radius:0!important;padding:0!important;
  min-width:0!important;height:auto!important;line-height:1!important;
  box-shadow:none!important;font-family:inherit!important;
  font-variant-numeric:tabular-nums!important}
.hw-src-r i,.hw-src-r i.mono,.hw-src-r .mono{
  font-family:inherit!important;font-weight:700!important;color:#2563A8!important;
  font-size:.85em!important;vertical-align:.36em!important;letter-spacing:-.01em!important}
.hw-cite.mono{font-family:inherit!important}
.s-cite::before,.hw-cite::before,.sc-cite::before,
.sana-hwm-c::before,.sana-precise-cite::before,
.s-cite::after,.hw-cite::after,.sc-cite::after,
.sana-hwm-c::after,.sana-precise-cite::after{content:none!important}

/* ── прозорецът ───────────────────────────────────────────────────────────── */
.sana-hw{
  --ink:#111827; --ink-2:#334155; --ink-3:#475569; --ink-4:#64748B;
  --line:#E2E8F0; --line-2:#EFF3F9;
  /* Три степени, три цвята, и нито един не се ползва за друго: синьото е
     интеракция и цитат, кехлибареното е „умерено", червеното е „силно" и
     „противопоказано". */
  --link:#2563A8; --risk:#B42318; --warn:#B45309;
  /* Кривата и времето на прехода между екраните стоят на едно място: смени ги
     тук и се сменят и в CSS, и в изчакването на JS (--hw-swap в ms). */
  --hw-ease:cubic-bezier(.32,.72,.28,1); --hw-swap:420ms;
  /* Колко пътува курсорът до целта. Стои и в CSS, и в паузите на сценария:
     скриптът чака точно толкова, преди да „натисне". */
  --hw-travel:900ms;
  --font:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  /* ЗАПОВЕД НА СОБСТВЕНИКА: моноширинният шрифт пада от целия сайт. Токенът
     остава само защото apply-workflow.mjs строи собствени екрани със същите
     .hw-* класове и разчита на правилата тук — стойността му обаче вече е
     Plex Sans, тоест в прозореца няма нито една моноширинна буква. Колоните с
     числа се държат подравнени от табулярните цифри, не от шрифта. */
  --mono:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  /* overflow остава видим: меката сянка на рамката (var(--lift-shadow)) излиза
     извън габарита ѝ и вътре в кутия с overflow:hidden щеше да се отреже. */
  position:relative; width:100%; overflow:visible;
}
/* Рамката се движи ЗАЕДНО със сцената. Височината ѝ идва от скрипта и следва
   активния екран; ако тя скачаше мигновено, докато сцената се плъзга, колоната
   щеше да се пречентрира преди прозорецът да е стигнал новия си размер. */
.sana-hw.hw-fit{transition:height .45s var(--hw-ease)}
/* Изгледът е изваден от потока: 700-те му пиксела иначе разпъват flex родителя
   и мащабирането няма ефект. Височината на рамката се задава от JS.
   БАЗОВАТА ШИРИНА Е 700px и стои на две места — тук и в делителя на fit() в
   скрипта отдолу. При 840 слотът от 54% (≈717px) даваше мащаб под 1 и целият
   текст в прозореца ставаше ситен. */
.sana-hw-in{
  position:absolute; top:0; left:0; width:700px;
  /* --hw-dx е отместването надясно, когато височината е ограничила мащаба и
     прозорецът е станал по-тесен от слота: така десният му ръб остава на
     ръба на колоната, а разликата отива в средата, между двете колони.
     Редът е важен: при transform-origin:top left точката p се изобразява на
     dx + scale × p, тоест преместването е в НЕмащабирани пиксели на слота. */
  transform-origin:top left;
  transform:translate3d(var(--hw-dx,0px),0,0) scale(var(--hw-scale,.85));
  font-family:var(--font); font-size:14px; line-height:1.5; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); box-sizing:border-box;
}
/* Числата са с чиста нула: Plex Mono носи точка в нулата, която на едър кегел
   дразни. Табулярните цифри на Plex Sans пазят колоните подравнени; --mono
   остава само за версалните етикети, където нули почти няма. */
.sana-hw .mono{font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ── горна лента: марка и контекст, разделена само с косъм ────────────────── */
.sana-hw .hw-bar{display:flex;align-items:center;padding:0 20px;height:44px;
  border-bottom:1px solid var(--line)}
.sana-hw .hw-mark{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1}
.sana-hw .hw-mark sup{font-size:.45em;font-weight:500;color:var(--link);vertical-align:super;margin-left:.06em}
/* Контекстът горе вдясно вече не е версален ред: главните букви останаха само
   в самата абревиатура, а тя е и единственото, което ги заслужава. */
.sana-hw .hw-org{margin-left:auto;font-size:12.5px;letter-spacing:0;color:var(--ink-4)}

/* ── табовете: текстови, отгоре ───────────────────────────────────────────── */
.sana-hw .hw-steps{display:flex;border-bottom:1px solid var(--line);background:#fff}
.sana-hw .hw-step{position:relative;display:flex;align-items:baseline;gap:7px;
  padding:12px 20px;border:0;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:400;color:var(--ink-3);
  -webkit-appearance:none;appearance:none;white-space:nowrap}
.sana-hw .hw-step i{font-style:normal;font-size:11px;color:var(--ink-4)}
.sana-hw .hw-step:hover{color:var(--ink)}
.sana-hw .hw-step.on{color:var(--ink);font-weight:500}
.sana-hw .hw-step.on i{color:var(--link)}
.sana-hw .hw-step u{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--link)}
.sana-hw .hw-step.on u{width:100%;transition:width var(--hw-dur,6s) linear}
.sana-hw .hw-step.on.paused u{transition:none}
.sana-hw .hw-step:focus-visible{outline:2px solid var(--link);outline-offset:-3px}

/* ── сцената ──────────────────────────────────────────────────────────────── */
/* Височината следва АКТИВНИЯ екран и се мери от JS — иначе всяка промяна в
   текста реже долния ред на някой от четирите. Обща височина по най-високия
   екран (както беше) оставяше под по-късите цяло празно поле: екран 1 е 688px,
   екран 4 — 444px, тоест четвърт екран нищо.
   Сцената носи лек пастелен градиент: backdrop-filter няма какво да размие над
   плътно бяло, а стъклените карти вътре трябва да прозират към нещо. */
.sana-hw .hw-stage{position:relative;background:linear-gradient(160deg,#FFFFFF 0%,#F0F9FF 100%);
  overflow:hidden;min-height:380px}
/* Преходът се закача с отделен клас, СЛЕД като първата височина е зададена:
   иначе при първото рисуване сцената щеше да се разлива от min-height нагоре. */
.sana-hw .hw-stage.hw-fit{transition:height .45s var(--hw-ease)}
/* Четирите екрана лежат ЕДИН ВЪРХУ ДРУГ, а не един след друг. Причината е
   преходът: display:none изважда елемента от рендера и никакъв transition не
   тръгва по него, затова старият вариант можеше само да гасне рязко. Върху
   абсолютно позициониране изходящият и входящият екран съществуват
   едновременно за 420 ms и се разминават — единият излиза наляво, другият
   влиза отдясно.
   Височината на сцената идва от JS и следва активния екран. При РАСТЕЖ тя се
   задава веднага — влизащият екран е по-висок и иначе долният му край би
   останал под ръба. При СВИВАНЕ тръгва със закъснение колкото прехода:
   излизащият екран още се вижда и последният му ред не бива да изчезне.
   visibility, а не само opacity: прозрачният екран остава четим за екранни
   четци и хваща фокус с Tab. Гаси се със закъснение, колкото е преходът. */
.sana-hw .hw-screen{position:absolute;top:0;left:0;right:0;
  min-height:100%;padding:22px 20px;box-sizing:border-box;
  opacity:0;transform:translate3d(8px,0,0);visibility:hidden;pointer-events:none;
  transition:opacity var(--hw-swap) var(--hw-ease),
             transform var(--hw-swap) var(--hw-ease),
             visibility 0s linear var(--hw-swap)}
.sana-hw .hw-screen.on{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  z-index:2;transition-delay:0s,0s,0s}
/* Изходящият екран: държи се видим един преход и се измества в обратната
   посока на влизащия. Класът се сваля от JS, след като преходът свърши. */
.sana-hw .hw-screen.was{opacity:0;transform:translate3d(-8px,0,0);visibility:visible;z-index:1}
/* Екран, който не участва в текущата смяна, не анимира нищо. Без това
   изходящият екран, след като изгуби .was, тръгваше обратно от -8px към +8px
   още цял преход: невидим, но жив в дървото за екранни четци. Правилото важи
   за състоянието СЛЕД смяната на класа, затова влизането и излизането пак се
   анимират — само връщането в изходна позиция е мигновено. */
.sana-hw .hw-screen:not(.on):not(.was){transition:none}

/* ── общи градивни части ──────────────────────────────────────────────────── */
/* Баджът вече не се ползва от екраните ТУК (те носят иконите и кутиите на
   платформата), но остава в стила: apply-workflow.mjs го рисува в своите. */
.sana-hw .hw-b{display:inline-block;font-family:var(--font);font-size:12.5px;font-weight:600;
  padding:3px 9px;border:1px solid var(--line);color:var(--ink-3);background:#fff;
  letter-spacing:0;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Строгият вариант: противопоказание. Червеното е единственият цвят с тежест
   в целия прозорец, затова го носи само този бадж и лявата линия на модула. */
.sana-hw .hw-b-risk{color:var(--risk);border-color:rgba(180,35,24,.4);
  background:rgba(180,35,24,.06);font-weight:600;white-space:normal}
/* Стадият по KDIGO се пише G3b с малко „b": версалната обработка го правеше
   G3B, което е друга номенклатура. Още една причина версалните етикети да ги
   няма — те не само дразнят, а и променят смисъла на кодовете. */
.sana-hw .hw-stage-b .hw-b{font-family:var(--font);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:.02em}
.sana-hw .hw-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:#475569;margin:0 0 10px}
.sana-hw .hw-h1{font-size:23px;font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.sana-hw .hw-h1s{margin:0 0 14px}
.sana-hw .hw-h1 em{font-style:normal;font-family:var(--font);font-size:17px;color:var(--ink-3)}
.sana-hw .hw-h2{font-size:13px;color:var(--ink-3);margin-top:3px}
.sana-hw .hw-h2 i{font-style:italic;color:var(--ink-4)}
/* Двете колони се делят от косъм, не от две кутии. */
.sana-hw .hw-split{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 16px}
.sana-hw .hw-split>div{padding:16px 0 16px 22px}
.sana-hw .hw-split>div:first-child{padding-left:0;padding-right:22px;border-right:1px solid var(--line)}
.sana-hw .hw-row{display:flex;justify-content:space-between;gap:12px;padding-top:9px;
  font-size:12.5px;color:var(--ink-3)}
.sana-hw .hw-row b{color:var(--ink);font-weight:500}

/* ── екран 1: Питай ───────────────────────────────────────────────────────── */
.sana-hw .hw-q{display:flex;justify-content:flex-end;margin:0 0 16px}
.sana-hw .hw-q span{border:1px solid var(--line);padding:9px 13px;font-size:14px;
  color:var(--ink);max-width:76%}
.sana-hw .hw-type{margin:0 0 16px;font-size:14px;color:var(--ink-2);position:relative}
.sana-hw .hw-type span{opacity:0}
.sana-hw .hw-caret{display:inline-block;width:2px;height:14px;background:var(--link);
  vertical-align:-2px;opacity:0}
/* Цитатът е чип, а не бледо номерче. Сивата рамка го правеше да изглежда като
   бележка под линия — нещо, което се чете, но не се пипа. Цялото обещание на
   продукта е, че всяко изречение води до документа, затова чипът е син, плътен
   и с показалец: вижда се, че се отваря.
   Кегелът е 10px, не 9: под 10 табулярните цифри на Plex Sans се замазват при
   мащабиране на прозореца. */
/* БРАНДОВИЯТ МАРКЕР (както скобата в логото): надредна, дребна, без кутия. */
.sana-hw .hw-cite{display:inline;font-size:.85em;line-height:1;
  vertical-align:.36em;color:#2563A8;font-weight:700;cursor:pointer;
  letter-spacing:-.02em;background:none;border:0;
  border-radius:0;padding:.35em .25em;margin-left:-.02em;text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.sana-hw .hw-cite:hover{background:none;color:#0EA5E9;
  color:#12457A}
/* Ограничението на продукта се казва под отговора, не се крие. */
.sana-hw .hw-dis{margin:12px 0 0;font-size:13px;color:var(--ink-4);line-height:1.5}
/* Модулът с реакциите е стъклена карта: през нея се вижда пастелът на сцената,
   а самата тя стои над него, вместо да се слива с бялото. */
.sana-hw .hw-mod{background:var(--glass-bg,rgba(255,255,255,.6));
  backdrop-filter:var(--glass-blur,blur(16px));-webkit-backdrop-filter:var(--glass-blur,blur(16px));
  border:var(--glass-border,1px solid rgba(255,255,255,.8));
  box-shadow:var(--glass-shadow,0 8px 32px rgba(17,24,39,.04));
  border-radius:12px;overflow:hidden;opacity:0}
.sana-hw .hw-mod-h{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  border-bottom:1px solid rgba(17,24,39,.07)}
.sana-hw .hw-mod-hh{min-width:0}
/* Шапката на модула е като в продукта: нормален sans, не версални mono —
   това е заглавие на съдържание, а не етикет. */
.sana-hw .hw-mod-t{font-family:var(--font);font-size:14px;font-weight:600;
  letter-spacing:-.005em;color:var(--ink);line-height:1.3}
.sana-hw .hw-mod-sub{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.sana-hw .hw-mod-x{margin-left:auto;color:var(--ink-4);font-size:14px;line-height:1;
  transform-origin:center;flex:0 0 auto;padding-top:4px}
.sana-hw .hw-mod-b{max-height:0;overflow:hidden}
.sana-hw .hw-mod-p{padding:14px}
.sana-hw .hw-fr{display:flex;align-items:baseline;gap:9px;margin:0 0 4px}
/* Честотният етикет: нормален текст в Plex Sans 600, без версални букви и без
   разредка. Цветът остава — той кодира честотата и е единственото, което
   отличава трите групи една от друга. */
.sana-hw .hw-fr-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--ink)}
.sana-hw .hw-fr-r{font-family:var(--font);font-size:11.5px;color:var(--ink-4)}
.sana-hw .hw-fr-v{margin:0 0 13px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.sana-hw .hw-fr-v:last-of-type{margin-bottom:0}
.sana-hw .hw-fn{margin:10px 0 0;font-size:10.5px;color:var(--ink-4);line-height:1.5}
.sana-hw .hw-mod-s{font-family:var(--font);font-size:10.5px;color:var(--ink-4);
  border-top:1px solid var(--line);padding-top:11px;margin-top:13px}

/* Изписване дума по дума. Буквеното изписване със steps() работи само на
   един ред — този текст се пренася. */
.sana-hw .hw-screen.on .hw-type span{animation:hwWord .26s ease forwards;
  animation-delay:calc(.30s + var(--i) * .042s)}
.sana-hw .hw-screen.on .hw-caret{animation:hwCaret .8s steps(1) .2s 3}
.sana-hw .hw-s1 .hw-dis{opacity:0}
.sana-hw .hw-screen.on .hw-mod{animation:hwUp .45s cubic-bezier(.2,.7,.3,1) 1.55s forwards}
.sana-hw .hw-screen.on .hw-dis{animation:hwUp .4s cubic-bezier(.2,.7,.3,1) 1.9s forwards}
.sana-hw .hw-screen.on .hw-mod-b{animation:hwOpen .65s cubic-bezier(.2,.7,.3,1) 2.15s forwards}
.sana-hw .hw-screen.on .hw-mod-x{animation:hwTurn .45s cubic-bezier(.2,.7,.3,1) 2.15s forwards}
@keyframes hwWord{to{opacity:1}}
@keyframes hwCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hwUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Таванът е нарочно по-висок от съдържанието (≈300px при база 700): max-height
   не приема auto в анимация, а опре ли таванът в съдържанието, последните
   редове остават отрязани завинаги (animation-fill-mode:forwards). */
@keyframes hwOpen{from{max-height:0}to{max-height:460px}}
@keyframes hwTurn{to{transform:rotate(180deg)}}

/* ── измерване на сцената ─────────────────────────────────────────────────── */
/* Сянката, върху която се мери височината. measure() мереше истинския DOM,
   докато модулът е СВИТ (max-height:0) и влизащите елементи още не са тръгнали
   — сцената излизаше 502px при екран от 533px и overflow:hidden режеше
   последните редове.
   Мери се върху КОПИЕ, а не върху истинския прозорец: принудим ли крайното
   състояние на място, махането на принудата рестартира всички анимации и при
   всяко преоразмеряване изписването тръгва отначало.
   visibility:hidden (а не display:none) — иначе клонингът няма размери. */
.sana-hw .hw-ghost{visibility:hidden!important;pointer-events:none!important;
  transform:none!important}
.sana-hw .hw-ghost .hw-mod-b{max-height:none!important}
/* В сянката екраните се връщат в потока и без min-height: така scrollHeight на
   всеки е точно височината на СЪДЪРЖАНИЕТО му. Абсолютните екрани биха се
   опрели в min-height:100% на сцената и трите по-къси щяха да мерят колкото
   тавана, а не колкото са. Не се пипа visibility: сянката е скрита от родителя
   си, а видим наследник вътре в нея би я извадил на екрана. */
.sana-hw .hw-ghost .hw-screen{position:static!important;min-height:0!important;
  display:block!important}
.sana-hw .hw-ghost *{animation:none!important;opacity:1!important;transform:none!important;
  transition:none!important}

/* ── екран 2: Лекарства ───────────────────────────────────────────────────── */
.sana-hw .hw-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 12px}
.sana-hw .hw-head-b{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.sana-hw .hw-meta{display:flex;gap:24px;font-size:12px;color:var(--ink-3);margin:0 0 14px}
.sana-hw .hw-meta b{color:var(--ink);font-weight:500}
.sana-hw .hw-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:0 0 4px;font-size:13px}
.sana-hw .hw-tabs span{padding:0 0 9px;color:var(--ink-3);white-space:nowrap}
.sana-hw .hw-tabs .on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--link)}
/* Седем таба на един ред: кеглата и разстоянието слизат само толкова, колкото
   да не се пренася редът. */
.sana-hw .hw-s2 .hw-tabs{gap:15px;font-size:12.5px}
/* Модулът за бременност и кърмене: стъклена карта като тази с реакциите, но с
   червена лява линия — противопоказанието е абсолютно, а не степенувано. */
.sana-hw .hw-safe{background:var(--glass-bg,rgba(255,255,255,.6));
  backdrop-filter:var(--glass-blur,blur(16px));-webkit-backdrop-filter:var(--glass-blur,blur(16px));
  border:var(--glass-border,1px solid rgba(255,255,255,.8));
  background-image:linear-gradient(rgba(185,28,28,.045),rgba(185,28,28,.045));
  box-shadow:var(--glass-shadow,0 8px 32px rgba(17,24,39,.04));
  border-radius:12px;overflow:hidden;margin:16px 0 0}
.sana-hw .hw-safe-h{display:flex;align-items:baseline;gap:12px;padding:11px 15px;
  border-bottom:1px solid rgba(17,24,39,.07)}
/* Етикетът на модула е нормален текст: без квадратни скоби, без версални букви
   и без моноширинен шрифт. Той е заглавие на съдържание, а не код. */
.sana-hw .hw-safe-lab{font-family:var(--font);font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--ink)}
.sana-hw .hw-safe-c{font-family:var(--font);font-size:11.5px;color:var(--ink-4);
  margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.sana-hw .hw-safe-b{padding:13px 15px 14px}
.sana-hw .hw-safe-badge{margin:0 0 10px}
.sana-hw .hw-safe-t{margin:0 0 11px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.sana-hw .hw-safe-r{font-size:12.5px;color:var(--ink-2);line-height:1.55;
  border-top:1px solid rgba(17,24,39,.07);padding-top:10px}
.sana-hw .hw-safe-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:#475569;margin-right:9px}
.sana-hw .hw-safe-s{font-family:var(--font);font-size:11px;color:var(--ink-4);margin-top:10px}
/* Препращания, не твърдения: заглавие на раздел отляво, номерът му отдясно. */
.sana-hw .hw-refs{margin:18px 0 0}
.sana-hw .hw-ref{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.sana-hw .hw-ref b{color:var(--ink-3);font-weight:400;font-size:12px;white-space:nowrap}

/* ── екран 3: Взаимодействия ──────────────────────────────────────────────── */
.sana-hw .hw-search{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);
  padding:0 0 10px;margin:0 0 14px;font-size:13px}
.sana-hw .hw-mag{color:var(--ink-4)}
.sana-hw .hw-ph{color:var(--ink-4)}
.sana-hw .hw-subs{display:flex;align-items:center;gap:7px;margin:0 0 16px}
.sana-hw .hw-sub{border:1px solid var(--line);padding:5px 11px;font-size:12.5px;color:var(--ink)}
.sana-hw .hw-sub i{font-style:normal;color:var(--link);margin-left:7px}
.sana-hw .hw-cnt{margin-left:auto;font-size:11px;color:var(--ink-4)}
/* Предупреждението е ОБИКНОВЕНА стъклена карта: една и съща рамка от четирите
   страни, без цветна лента отстрани. Тежестта я носят две неща и нищо друго:
   1) тониран фон на цялата карта — слага се като background-image, за да легне
      НАД стъкления фон, вместо да го изтрие (backdrop-filter остава на място);
   2) заглавният ред: плътен квадрат 8x8 и версален mono етикет.
   Тонът е толкова слаб (5%), че се хваща с крайчеца на окото и не спори с
   текста — точно това се иска от степен, която е умерена, а не силна. */
.sana-hw .hw-alert{background:var(--glass-bg,rgba(255,255,255,.6));
  background-image:linear-gradient(rgba(180,83,9,.05),rgba(180,83,9,.05));
  backdrop-filter:var(--glass-blur,blur(16px));-webkit-backdrop-filter:var(--glass-blur,blur(16px));
  border:var(--glass-border,1px solid #E2E8F0);
  box-shadow:var(--glass-shadow,0 8px 32px rgba(17,24,39,.04));
  border-radius:12px;padding:14px 16px;margin:0 0 16px}
.sana-hw .hw-alert-h{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.sana-hw .hw-alert-t{font-size:15px;font-weight:500;color:var(--ink)}
/* Степента: плътен квадрат и версален етикет. Версалният изглед е на CSS, а не
   в разметката — текстът в HTML остава нормално изречение и екранните четци го
   четат като такова, а не буква по буква. */
.sana-hw .hw-sev{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--warn);white-space:nowrap}
.sana-hw .hw-sev .sq{width:8px;height:8px;flex:0 0 8px;background:var(--warn)}
.sana-hw .hw-alert-p{font-size:12.5px;color:var(--ink-3);margin:0 0 8px}
.sana-hw .hw-alert-p a{color:var(--link)}
.sana-hw .hw-alert-p em{font-style:normal;color:var(--ink-4);margin:0 4px}
.sana-hw .hw-alert-m{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.sana-hw .hw-alert-f{font-size:12.5px;color:var(--ink-2);
  border-top:1px solid rgba(17,24,39,.07);padding-top:9px}
/* Етикетът на реда с ефекта вече не е цветен: цветът остава само за заглавния
   ред, иначе на една карта излизат два сигнала за едно и също нещо. */
.sana-hw .hw-alert-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:#475569;margin-right:9px}
.sana-hw .hw-alert-src{font-family:var(--font);font-size:11px;color:var(--ink-4);margin-top:9px}
.sana-hw .hw-grp{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.sana-hw .hw-grp b{margin-left:auto;font-size:12px;color:var(--ink-4);font-weight:400}
.sana-hw .sq{width:7px;height:7px;display:inline-block;flex:0 0 7px}
.sana-hw .sq.danger{background:var(--risk)} .sana-hw .sq.warn{background:var(--warn)}
.sana-hw .sq.info{background:var(--link)}

/* Второто вещество влиза при показване на екрана — това е самото действие. */
.sana-hw .hw-s3 .hw-new,.sana-hw .hw-s3 .hw-alert{opacity:0}
.sana-hw .hw-screen.on .hw-new{animation:hwUp .4s cubic-bezier(.2,.7,.3,1) .35s forwards}
.sana-hw .hw-screen.on .hw-alert{animation:hwUp .5s cubic-bezier(.2,.7,.3,1) .85s forwards}
/* Групите излизат след второто вещество: първо се добавя веществото, после
   излиза резултатът от проверката. Правилото носи .hwx — .hw-cat го има само
   по екраните на този прозорец, но предпазителят пази реда еднакъв навсякъде. */
.sana-hw .hwx.hw-s3 .hw-cat{opacity:0}
.sana-hw .hw-screen.on.hwx.hw-s3 .hw-cat{
  animation:hwUp .45s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:.85s}
.sana-hw .hw-screen.on.hwx.hw-s3 .hw-cat+.hw-cat{animation-delay:1.05s}

/* ── екран 4: Инструменти ─────────────────────────────────────────────────── */
.sana-hw .hw-field{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.sana-hw .hw-field:last-child{border-bottom:0}
.sana-hw .hw-field b{color:var(--ink);font-weight:500;font-size:14px}
.sana-hw .hw-field i{font-style:normal;font-size:11px;color:var(--ink-4);font-weight:400;margin-left:4px}
.sana-hw .hw-big{display:flex;align-items:baseline;gap:9px;margin:0 0 12px}
.sana-hw .hw-big b{font-family:var(--font);font-size:46px;font-weight:400;color:var(--ink);
  line-height:1;letter-spacing:-.02em}
.sana-hw .hw-big span{font-size:12px;color:var(--ink-3)}
.sana-hw .hw-stage-b{margin:0 0 14px}
.sana-hw .hw-form{font-size:10.5px;color:var(--ink-4);border-top:1px solid var(--line-2);
  padding-top:10px;line-height:1.7}
.sana-hw .hw-tie{border:1px solid #E2E8F0;border-radius:12px;
  background-image:linear-gradient(rgba(37,99,168,.05),rgba(37,99,168,.05));
  padding:12px 16px}
.sana-hw .hw-tie-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:var(--link);display:block;margin:0 0 6px}
.sana-hw .hw-tie p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.sana-hw .hw-tie b{color:var(--ink);font-weight:500}
.sana-hw .hw-tie-s{font-family:var(--font);font-size:10.5px;color:var(--ink-4);display:block;margin-top:8px}

/* Резултатът се появява, защото е резултат — не за украса. */
.sana-hw .hw-s4 .hw-big b,.sana-hw .hw-s4 .hw-stage-b,.sana-hw .hw-s4 .hw-tie{opacity:0}
.sana-hw .hw-screen.on .hw-big b{animation:hwUp .4s cubic-bezier(.2,.7,.3,1) .25s forwards}
.sana-hw .hw-screen.on .hw-stage-b{animation:hwUp .4s cubic-bezier(.2,.7,.3,1) .7s forwards}
.sana-hw .hw-screen.on .hw-tie{animation:hwUp .45s cubic-bezier(.2,.7,.3,1) 1s forwards}

/* Часовникът на екрана с калкулатора. Селекторите носят .hwx — класът стои само
   по екраните на ТОЗИ прозорец. Същите .hw-* класове се преизползват и другаде
   в страницата, а там екраните стоят вечно отворени и разтеглените закъснения
   нямаше да имат смисъл.
   Редът е: четирите полета се попълват (0,42 s едно от друго), после числото се
   отброява (JS, започва на 1,95 s), после стадият, накрая връзката с казуса. */
.sana-hw .hwx.hw-s4 .hw-field{opacity:0}
.sana-hw .hw-screen.on.hwx.hw-s4 .hw-field{
  animation:hwUp .34s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.30s + var(--i,0) * .42s)}
.sana-hw .hw-screen.on.hwx.hw-s4 .hw-big b{animation-delay:1.95s}
.sana-hw .hw-screen.on.hwx.hw-s4 .hw-stage-b{animation-delay:3.25s}
.sana-hw .hw-screen.on.hwx.hw-s4 .hw-tie{animation-delay:3.7s}

/* ── излизане на екрана ───────────────────────────────────────────────────── */
/* Вътрешните анимации висят на .on. Свали ли се класът, те се нулират в
   МИГА, а не плавно: модулът с реакциите щеше да изчезне преди самия екран и
   изходът щеше да мига. Затова .was замразява всичко в крайното му състояние
   и екранът си отива като едно цяло.
   Селекторите носят и класа на екрана (.hw-s1.was), за да имат тегло над
   базовите правила, които държат тези елементи на opacity:0. */
.sana-hw .hw-s1.was .hw-type span,
.sana-hw .hw-s1.was .hw-mod,
.sana-hw .hw-s1.was .hw-dis,
.sana-hw .hw-s3.was .hw-new,
.sana-hw .hw-s3.was .hw-alert,
.sana-hw .hwx.hw-s3.was .hw-cat,
.sana-hw .hw-s4.was .hw-big b,
.sana-hw .hw-s4.was .hw-stage-b,
.sana-hw .hw-s4.was .hw-tie,
.sana-hw .hw-s1.was .hw-src,
.sana-hw .hwx.hw-s4.was .hw-field{opacity:1}
.sana-hw .hw-s1.was .hw-mod-b{max-height:460px}
.sana-hw .hw-s1.was .hw-mod-x{transform:rotate(180deg)}

/* ── честотните групи: малко цвят, колкото да се хващат с крайчеца на окото ── */
/* Цветните леви ленти паднаха (дизайн правило: без цветни леви ленти). Носителят
   на групата е същият, който платформата ползва за тежестта: плътен квадрат от
   8px пред етикета, самият етикет в цвета и едва доловим тониран фон на цялата
   група. Цветът кодира ЧЕСТОТА, не риск: кехлибар за най-честите, синьо за
   средните, slate за редките. Червено тук няма — то остава само за
   противопоказанието на екран 2. Съдържанието е дословно и не се пипа. */
.sana-hw .hwx-row{padding:8px 11px;margin:0 0 9px;border-radius:8px}
.sana-hw .hwx-row:last-of-type{margin-bottom:0}
.sana-hw .hwx-row .hw-fr{margin-bottom:5px}
.sana-hw .hwx-row .hw-fr-k{display:inline-flex;align-items:center;gap:7px;line-height:1.4}
.sana-hw .hwx-row .hw-fr-k::before{content:"";width:8px;height:8px;flex:0 0 8px;
  background:currentColor}
.sana-hw .hwx-c{background:rgba(180,83,9,.05)}
.sana-hw .hwx-c .hw-fr-k{color:#B45309}
.sana-hw .hwx-u{background:rgba(37,99,168,.05)}
.sana-hw .hwx-u .hw-fr-k{color:#2563A8}
.sana-hw .hwx-s{background:rgba(71,85,105,.05)}
.sana-hw .hwx-s .hw-fr-k{color:#475569}

/* ── източниците под отговора ─────────────────────────────────────────────── */
/* Блокът е крайната точка на обещанието: отговорът свършва с документите, от
   които е съставен, и всеки от тях се отваря. Затова редовете изглеждат като
   нещо, което се натиска — курсорът после наистина натиска реда за Таблица 3. */
.sana-hw .hw-src{margin:14px 0 0;opacity:0}
.sana-hw .hw-src-h{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.sana-hw .hw-src-k{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;
  color:#475569}
.sana-hw .hw-src-h b{font-family:var(--font);font-size:12.5px;font-weight:600;color:#64748B;
  font-variant-numeric:tabular-nums}
.sana-hw .hw-src-r{display:flex;align-items:baseline;gap:9px;padding:8px 11px;margin:0 0 6px;
  border:1px solid #E2E8F0;border-radius:8px;background:rgba(255,255,255,.72);
  font-size:12px;line-height:1.45;color:#334155;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.sana-hw .hw-src-r:last-child{margin-bottom:0}
.sana-hw .hw-src-r i{font-style:normal;font-size:11px;font-weight:600;color:#2563A8;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.sana-hw .hw-screen.on .hw-src{animation:hwUp .45s cubic-bezier(.2,.7,.3,1) 3.4s forwards}

/* ── двете състояния на екран 2 ───────────────────────────────────────────── */
/* Панелите се сменят с display, а не с прозрачност: и двата трябва да могат да
   мерят реалната си височина в сянката, а неактивният не бива да краде място. */
.sana-hw .hw-pane{display:none}
.sana-hw .hw-pane.on{display:block}
.sana-hw .hw-screen.on .hw-pane.on{animation:hwUp .36s cubic-bezier(.2,.7,.3,1) forwards}
/* Под-табовете само изглеждат натискаеми: тук ги натиска сценарият, не зрителят
   — ръчното управление е лентата със стъпките отгоре. */
.sana-hw .hw-tab{cursor:default}

/* ══ екрани 2, 3 и 4 такива, каквито са в платформата ═══════════════════════ */
/* ВНИМАНИЕ ПРИ ПИПАНЕ. Класовете .hw-* от този файл се преизползват и от
   apply-workflow.mjs — той строи собствени екрани в собствени .sana-hw рамки и
   разчита на правилата отгоре. Затова НИЩО от старите правила не е изтрито, а
   всяко ново правило, което пипа СПОДЕЛЕН клас (.hw-search, .hw-sub, .hw-big,
   .hw-field, .hw-subs), носи и .hwx — този клас го има само по екраните на
   началния прозорец. Изцяло новите класове (.hw-p-*, .hw-sec*, .hw-ind*,
   .hw-ix*, .hw-cat*, .hw-ixr*, .hw-cm*, .hw-res*) са само тук и нямат нужда от
   такъв предпазител. */

/* ── екран 2: шапката на продукта ─────────────────────────────────────────── */
/* Редът и пропорциите са от hero-то на продуктовата страница: горен ред с
   връщането и двете действия, после име, концентрация и иконите на състоянието
   в един ред, после подзаглавието с веществото. */
.sana-hw .hw-p-top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 12px}
.sana-hw .hw-p-back{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
  color:#334155;padding:5px 11px;border:1px solid #E2E8F0;background:#fff}
.sana-hw .hw-p-topr{display:inline-flex;align-items:center;gap:8px}
.sana-hw .hw-p-inn{font-size:12px;font-weight:600;color:#475569;padding:5px 11px;
  border:1px solid #E2E8F0}
.sana-hw .hw-p-ask{font-size:12.5px;font-weight:600;color:#fff;padding:6px 12px;
  background:linear-gradient(135deg,#0EA5E9,#2563A8)}
.sana-hw .hw-p-title{display:flex;align-items:center;gap:5px 12px;flex-wrap:wrap}
.sana-hw .hw-p-name{font-size:24px;font-weight:600;letter-spacing:-.012em;line-height:1.1;
  color:var(--ink)}
.sana-hw .hw-p-str{font-size:16px;font-weight:500;color:var(--ink-3);line-height:1.1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sana-hw .hw-p-flags{display:inline-flex;align-items:center;gap:10px;margin-left:2px}
/* Иконите са контурни и цветът им кодира какво казват — точно както в
   приложението: зелено за разрешението, синьо за режима на отпускане, тихо
   slate за наличната бъбречна корекция, светло синьо за процедурата на EMA. */
.sana-hw .hw-mk{display:inline-flex;width:19px;height:19px;flex:0 0 19px}
.sana-hw .hw-ico{display:block;width:100%;height:100%}
.sana-hw .hw-mk.ok{color:#146C33}
.sana-hw .hw-mk.rx{color:var(--link)}
.sana-hw .hw-mk.renal{color:#64748B}
.sana-hw .hw-mk.eu{color:#0EA5E9}
.sana-hw .hw-p-sub{font-size:13.5px;color:var(--ink-3);margin-top:5px}
.sana-hw .hw-p-sub i{font-style:italic;color:var(--ink-4)}
.sana-hw .hw-kf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;
  margin:11px 0 0;font-size:12.5px}
.sana-hw .hw-kf-i .k{color:var(--ink-4);margin-right:5px}
.sana-hw .hw-kf-i .v{color:var(--ink);font-weight:600}
.sana-hw .hw-kf-i .v .s{color:var(--ink-4);font-weight:400;margin-left:6px}
.sana-hw .hw-p-docs{display:flex;gap:8px;margin:10px 0 10px}
.sana-hw .hw-doc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:#334155;padding:5px 11px;border:1px solid #E2E8F0;background:#fff}
.sana-hw .hw-doc .hw-ico{width:15px;height:15px;flex:0 0 15px;color:#64748B}

/* ── екран 2: секция от таб ───────────────────────────────────────────────── */
/* Заглавие отляво, номерът на точката отдясно, откъс и бутонът за разгъване —
   формата на renderCollapsedKhp() в платформата. */
.sana-hw .hw-sec{padding:10px 0;border-bottom:1px solid var(--line-2)}
.sana-hw .hw-sec:first-child{padding-top:6px}
.sana-hw .hw-sec:last-child{border-bottom:0}
.sana-hw .hw-sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.sana-hw .hw-sec-r{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-4);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sana-hw .hw-khp p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sana-hw .hw-more{display:inline-block;margin:8px 0 0;padding:0;border:0;
  border-bottom:1px dotted var(--link);background:transparent;-webkit-appearance:none;
  appearance:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--link);
  cursor:default}
/* Редът-индикатор срещу заглавието: същата кутия, която платформата ползва за
   бъбречната корекция и за бременността. Тежестта е квадрат и текст в цвета,
   плюс едва доловим тониран фон — без цветна лента отстрани. */
.sana-hw .hw-ind{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:9px 13px;margin:0 0 10px;border:1px solid;font-size:13px;font-weight:600}
.sana-hw .hw-ind .hw-ico{width:17px;height:17px;flex:0 0 17px}
.sana-hw .hw-ind .sq{width:8px;height:8px;flex:0 0 8px;background:currentColor}
.sana-hw .hw-ind-l{flex:1;color:var(--ink)}
.sana-hw .hw-ind-s{font-weight:400;font-size:11.5px;color:var(--ink-4)}
.sana-hw .hw-ind-v{font-size:11.5px;font-weight:600;padding:1px 9px;border:1px solid currentColor}
.sana-hw .hw-ind-c{display:inline-flex;width:14px;height:14px;flex:0 0 14px;opacity:.75}
.sana-hw .hw-ind-renal{color:var(--link);background:rgba(37,99,168,.05);
  border-color:rgba(37,99,168,.22)}
.sana-hw .hw-ind-preg{color:var(--risk);background:rgba(180,35,24,.06);
  border-color:rgba(180,35,24,.28)}
/* Останалите точки на раздела: заглавията им стоят, но избледняват надолу —
   така се вижда, че табът продължава под ръба на прозореца, вместо да свършва. */
.sana-hw .hw-fold{margin-top:4px;
  -webkit-mask-image:linear-gradient(#000 6px,rgba(0,0,0,.22));
  mask-image:linear-gradient(#000 6px,rgba(0,0,0,.22))}
.sana-hw .hw-fold .hw-sec-h{margin:0;padding:7px 0;border-top:1px solid var(--line-2)}

/* ── екран 3: проверката на взаимодействия ────────────────────────────────── */
.sana-hw .hw-ix-t{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  text-align:center;margin:0 0 14px}
/* Полето за търсене е кутия с рамка от 1,5px, както в приложението — не долна
   линия. Правилото носи .hwx: старият изглед остава за екраните на друг файл. */
.sana-hw .hwx.hw-s3 .hw-search{height:38px;padding:0 13px;margin:0 0 12px;
  border:1.5px solid #E2E8F0;background:#fff;font-size:13.5px}
.sana-hw .hwx.hw-s3 .hw-search .hw-ico{width:18px;height:18px;flex:0 0 18px;color:var(--ink-4)}
/* Чиповете на избраните вещества: капсули с кирилското име, латинското в
   курсив, кръгло броене и бутон за махане. */
.sana-hw .hwx .hw-subs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 11px}
.sana-hw .hwx .hw-sub{display:inline-flex;align-items:center;gap:7px;height:32px;
  padding:0 7px 0 13px;border:1px solid #E2E8F0;border-radius:999px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink)}
.sana-hw .hwx .hw-sub i{font-style:italic;font-weight:400;font-size:11.5px;color:var(--ink-4);
  margin:0}
.sana-hw .hwx .hw-sub b{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#EFF3F9;
  font-size:11px;font-weight:700;color:#475569;font-variant-numeric:tabular-nums}
.sana-hw .hwx .hw-sub u{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;color:var(--ink-4);text-decoration:none}
.sana-hw .hwx .hw-sub u .hw-ico{width:11px;height:11px}
.sana-hw .hw-ix-meta{display:flex;align-items:baseline;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);padding:0 0 11px;border-bottom:1px solid var(--line)}
.sana-hw .hw-ix-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sana-hw .hw-ix-clear{color:var(--link);border-bottom:1px dotted var(--link)}
.sana-hw .hw-ix-bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 0 8px}
.sana-hw .hw-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid #E2E8F0;
  border-radius:999px}
.sana-hw .hw-seg i{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;
  border-radius:999px;font-style:normal;font-size:12px;font-weight:600;color:var(--ink-3)}
.sana-hw .hw-seg i.on{background:var(--ink);color:#fff}
.sana-hw .hw-seg .hw-ico{width:13px;height:13px;flex:0 0 13px}
.sana-hw .hw-ix-cnt{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Групата по тежест: плътен квадрат 10x10 в цвета, етикет, брояч и стрелка.
   Тук е единственото място, където тежестта се назовава — редовете под нея
   мълчат, точно както в приложението. */
.sana-hw .hw-cat{border-top:1px solid var(--line-2)}
.sana-hw .hw-cat-h{display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.sana-hw .hw-cat-h.on{background:rgba(37,99,168,.035)}
.sana-hw .hw-cat-h .sq{width:10px;height:10px;flex:0 0 10px;border-radius:2px}
.sana-hw .hw-cat-n{font-size:12px;font-weight:600;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.sana-hw .hw-cat-c{margin-left:auto;display:inline-flex;width:14px;height:14px;color:var(--ink-4)}
.sana-hw .hw-cat-c.up{transform:rotate(180deg)}
/* Един запис от списъка. Отстъпът вляво повтаря този на приложението, свит в
   мащаба на прозореца: двойката е под етикета на групата, не до него. */
.sana-hw .hw-ixr{border-top:1px solid var(--line-2)}
.sana-hw .hw-ixr-h{display:flex;align-items:center;gap:12px;padding:8px 4px 8px 38px;
  background:#EFF3F9;box-shadow:inset 3px 0 0 var(--link)}
.sana-hw .hw-ixr-p{flex:0 0 auto;font-size:13.5px;color:var(--ink);white-space:nowrap}
.sana-hw .hw-ixr-p b{font-weight:600;color:var(--link)}
.sana-hw .hw-ixr-p em{font-style:normal;color:#CBD5E1;margin:0 7px}
.sana-hw .hw-ixr-s{flex:1;min-width:0;font-size:12.5px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sana-hw .hw-ixr-c{display:inline-flex;width:14px;height:14px;flex:0 0 14px;color:var(--link);
  transform:rotate(90deg)}
.sana-hw .hw-ixr-b{border-top:1px solid var(--line-2);background:#F6FAFF;
  padding:10px 12px 12px 48px}
.sana-hw .hw-att{margin:0 0 9px}
.sana-hw .hw-att:last-of-type{margin-bottom:7px}
/* „Ефект", „Механизъм": нормален текст, не версален етикет. Източникът стои
   веднага след името на къса — приложението го изписва точно така. */
.sana-hw .hw-att-k{font-size:12.5px;font-weight:600;color:#475569}
.sana-hw .hw-att-k span{font-weight:400;color:var(--ink-4);border-bottom:1px dotted #CBD5E1}
.sana-hw .hw-att-k span::before{content:", "}
.sana-hw .hw-att p{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.sana-hw .hw-att-s{font-size:11.5px;color:var(--ink-3)}

/* ── екран 4: прозорецът на калкулатора ───────────────────────────────────── */
/* Без синя лента отгоре: прозорецът се държи от сивата рамка и сянката. */
.sana-hw .hw-cm{border:1px solid #E2E8F0;background:#fff;
  box-shadow:0 10px 30px rgba(15,20,26,.08);margin:0 0 14px}
.sana-hw .hw-cm-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line-2)}
.sana-hw .hw-cm-hh{min-width:0}
.sana-hw .hw-cm-t{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15;
  color:var(--ink);font-variant-numeric:tabular-nums}
.sana-hw .hw-cm-s{margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.sana-hw .hw-cm-a{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.sana-hw .hw-cm-pin{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border:1px solid #E2E8F0;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sana-hw .hw-cm-pin .hw-ico{width:14px;height:14px;flex:0 0 14px}
.sana-hw .hw-cm-i{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--line-2);color:var(--ink-4)}
.sana-hw .hw-cm-i .hw-ico{width:16px;height:16px}
.sana-hw .hw-cm-b{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px}
.sana-hw .hw-cm-f{border-top:1px solid var(--line-2);background:#F6FAFF;padding:8px 16px;
  text-align:center;font-size:11.5px;color:var(--ink-3)}
/* Полетата: етикет отгоре, стойност в кутия отдолу — както ги рисува
   EgfrCalculator.tsx. Класът .hw-field се преизползва от друг файл, затова
   пренареждането е под .hw-calc. */
.sana-hw .hw-calc .hw-field{display:block;padding:0;border:0;margin:0 0 13px}
.sana-hw .hw-calc .hw-field:last-child{margin-bottom:0}
.sana-hw .hw-cf-l{font-size:12.5px;font-weight:600;color:#475569;margin:0 0 5px}
.sana-hw .hw-cf-in{display:flex;align-items:center;gap:7px}
.sana-hw .hw-cf-in b{flex:1;min-width:0;border:1px solid #CBD5E1;border-radius:8px;
  padding:7px 11px;font-size:14px;font-weight:400;color:var(--ink);background:#fff}
.sana-hw .hw-cf-u{flex:0 0 auto;border:1px solid #CBD5E1;border-radius:8px;padding:7px 9px;
  font-size:12px;font-weight:500;color:var(--ink-3);background:#fff}
.sana-hw .hw-cf-sex{display:flex;gap:8px}
.sana-hw .hw-cf-sex span{flex:1;text-align:center;padding:7px 0;border:2px solid #E2E8F0;
  border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sana-hw .hw-cf-sex .on{border-color:var(--link);color:var(--link);background:rgba(37,99,168,.06)}
/* Картата с резултата. Синята лента отгоре, числото по средата, стадият в бяла
   кутия и справката с шестте нива отдолу — редът е на платформата. */
.sana-hw .hw-res{border:1px solid #E2E8F0;border-radius:12px;background:#F6FAFF;
  overflow:hidden;display:flex;flex-direction:column}
.sana-hw .hw-res-m{flex:1;padding:14px 12px;text-align:center}
.sana-hw .hw-res-k{font-size:12.5px;font-weight:600;color:#475569;margin:0 0 8px}
.sana-hw .hwx .hw-res .hw-big{flex-direction:column;align-items:center;gap:2px;margin:0 0 10px}
.sana-hw .hwx .hw-res .hw-big b{font-size:44px;font-weight:600}
.sana-hw .hwx .hw-res .hw-big span{font-size:12px;color:var(--ink-3)}
.sana-hw .hw-res .hw-stage-b{margin:0}
.sana-hw .hw-res-st{display:inline-block;padding:7px 14px;border:1px solid #E2E8F0;
  border-radius:8px;background:#fff}
.sana-hw .hw-res-st b{display:block;font-size:14.5px;font-weight:600;color:#EA580C}
.sana-hw .hw-res-st span{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.sana-hw .hw-res-l{border-top:1px solid #E2E8F0;padding:10px 12px}
.sana-hw .hw-res-lk{font-size:12.5px;font-weight:600;color:#475569;margin:0 0 6px}
.sana-hw .hw-res-lg{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:11px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.sana-hw .hw-res-lg span{display:flex;align-items:center;gap:6px}
.sana-hw .hw-res-lg i{width:7px;height:7px;flex:0 0 7px;border-radius:50%}

/* ── курсорът ─────────────────────────────────────────────────────────────── */
/* Един-единствен елемент за целия прозорец. Кутията е с нулев размер, а
   стрелката виси от горния ѝ ляв ъгъл: така transform-ът мести ТОЧКАТА на
   натискане, а не някакъв правоъгълник около нея. */
.sana-hw .hw-cur{position:absolute;left:0;top:0;width:0;height:0;z-index:6;
  pointer-events:none;opacity:0;
  transition:transform var(--hw-travel) cubic-bezier(.3,.62,.2,1),opacity .3s ease}
.sana-hw .hw-cur.on{opacity:1}
.sana-hw .hw-cur svg{position:absolute;left:-2px;top:-2px;display:block;
  transform-origin:top left;transition:transform .16s ease;
  filter:drop-shadow(0 2px 3px rgba(15,23,42,.32))}
.sana-hw .hw-cur.click svg{transform:scale(.84)}
/* Вълничката: кръг, който тръгва от върха на стрелката и се разсейва. */
.sana-hw .hw-cur-ring{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;
  border:2px solid #2563A8;border-radius:50%;opacity:0;transform:scale(.2)}
.sana-hw .hw-cur.ripple .hw-cur-ring{animation:hwRipple .6s cubic-bezier(.2,.7,.3,1)}
@keyframes hwRipple{0%{opacity:.7;transform:scale(.2)}100%{opacity:0;transform:scale(1.2)}}

/* ── притискане на целта ──────────────────────────────────────────────────── */
/* Курсорът не може да натисне сам: няма истинско събитие, което елементът да
   усети. Затова натиснатият елемент получава клас за кратко. */
.sana-hw .hw-src-r.hw-press{background:rgba(37,99,168,.12);
  border-color:rgba(37,99,168,.45);transform:scale(.985)}
/* Под-табовете нямат вътрешно поле: текстът им опира ръба на кутията и тонът
   лепнеше по буквите. Ореолът е box-shadow, а не padding — padding би разместил
   реда с табовете точно в мига на натискане. */
.sana-hw .hw-tab.hw-press{background:rgba(37,99,168,.10);border-radius:6px 6px 0 0;
  box-shadow:inset 0 -2px 0 #2563A8}
.sana-hw .hw-step.hw-press{background:rgba(37,99,168,.10)}

@media (max-width:900px){
  .sana-hw .hw-step{padding:12px 12px;font-size:12px}
}

/* ══ мобилният макет ═══════════════════════════════════════════════════════ */
/* Скрит на десктоп и НИЩО от стила му не живее извън медиа заявката отдолу:
   правило, което достига изгледа над 900px, е провал, а най-сигурната защита е
   да няма такова правило. */
.sana-hwm{display:none}

@media (max-width:900px){
  /* Свитият прозорец пада. Скрива се САМО този в hero-то: същите .sana-hw рамки
     се строят и в други секции от друга стъпка на билда и те не са наша работа.
     Затова селекторът минава през слота на hero-то. */
  .hw-slot .sana-hw{display:none}

  .sana-hwm{
    --m-ink:#111827; --m-ink-2:#334155; --m-ink-3:#475569; --m-ink-4:#64748B;
    --m-line:#E2E8F0; --m-link:#2563A8;
    display:block;position:relative;
    font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
    line-height:1.5;color:var(--m-ink-2);
    /* overflow-wrap се наследява: една декларация тук пази ВСЯКА кутия в картата
       от дълга българска дума, която иначе би излязла от нея. */
    overflow-wrap:break-word;
    background:#fff;border:1px solid var(--m-line);border-radius:14px;
    box-shadow:0 10px 30px rgba(15,23,42,.07);overflow:hidden;
    opacity:0;transform:translate3d(0,14px,0);
    animation:sanaHwmIn .55s cubic-bezier(.2,.7,.3,1) .15s forwards}
  @keyframes sanaHwmIn{to{opacity:1;transform:none}}

  /* ── горната лента ─────────────────────────────────────────────────────── */
  .sana-hwm-bar{display:flex;align-items:center;gap:10px;padding:0 14px;height:46px;
    border-bottom:1px solid var(--m-line)}
  .sana-hwm-mark{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--m-ink);
    line-height:1}
  .sana-hwm-mark sup{font-size:.45em;font-weight:500;color:var(--m-link);
    vertical-align:super;margin-left:.06em}
  /* Горната лента носи само марката: бутонът „Питай" беше декорация, която
     повтаряше активната стъпка отдолу и ядеше височина от макета. */

  /* ── четирите екрана: една и съща клетка ───────────────────────────────── */
  /* Мрежа с една клетка, а не абсолютно позициониране: екраните лежат един върху
     друг и се преливат, без да местят нищо под себе си.
     align-items:start — всеки екран е висок колкото СВОЕТО съдържание, а не
     колкото клетката. Иначе всичките четири мерят колкото най-високия и не може
     да се разбере кой колко иска.
     Височината на кутията следва АКТИВНИЯ екран и я задава скриптът (както на
     десктоп): при обща височина по най-високия под късите зее празно дъно —
     „Взаимодействия" е с около една трета по-нисък от „Питай".
     Преходът се включва чак след първото рисуване (клас .hwm-fit), за да не се
     разлее кутията от нулата при зареждането. */
  .sana-hwm-body{display:grid;align-items:start;overflow:hidden;
    background:linear-gradient(160deg,#FFFFFF 0%,#F0F9FF 100%)}
  .sana-hwm-body.hwm-fit{transition:height .42s cubic-bezier(.32,.72,.28,1)}
  .sana-hwm-scr{grid-area:1/1;padding:14px;
    opacity:0;visibility:hidden;transform:translate3d(0,6px,0);pointer-events:none;
    transition:opacity .42s cubic-bezier(.32,.72,.28,1),
               transform .42s cubic-bezier(.32,.72,.28,1),
               visibility 0s linear .42s}
  .sana-hwm-scr.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition-delay:0s,0s,0s}

  /* ── разкриването вътре в екрана ───────────────────────────────────────── */
  /* На десктоп през прозореца минава видим курсор: той посочва, натиска и с това
     разказва как работи продуктът. На телефон показалец НЯМА, затова разказът се
     носи от реда, по който съдържанието се появява — същия ред, по който го
     произвежда самият продукт: първо въпросът, после отговорът, после цитатите,
     накрая източниците.
     Кое се разкрива, кога и на кой екран стои В СКРИПТА (масивът ACT) — той е и
     единственият списък: скриптът маркира оттам самите елементи с .sana-hwm-rv,
     тук стои само как изглежда скритото и как се връща на място. Затова и без
     скрипт (или при изключена анимация) картата е цяла: класът .hwm-play се
     слага от скрипта и без него нито едно от правилата отдолу не важи. */
  .sana-hwm.hwm-play .sana-hwm-rv{opacity:0;transform:translate3d(0,7px,0)}
  .sana-hwm.hwm-play .sana-hwm-rv.hwm-in{opacity:1;transform:none;
    transition:opacity .36s cubic-bezier(.32,.72,.28,1),
               transform .36s cubic-bezier(.32,.72,.28,1)}
  /* Изписването: контейнерът е на място от самото начало (полето е празно поле,
     не изникващ елемент), появяват се само буквите — всяка със своето закъснение
     по --n. Преходът е с нулева дължина: буквата не избледнява, тя се появява,
     иначе редът чете като мъгла, а не като писане. */
  .sana-hwm.hwm-play .sana-hwm-qc{opacity:1;transform:none}
  .sana-hwm.hwm-play .sana-hwm-qc span{opacity:0}
  .sana-hwm.hwm-play .sana-hwm-qc.hwm-in span{opacity:1;
    transition:opacity .01s linear calc(var(--n,0) * 24ms)}
  /* Записът за взаимодействието не изплува, а се РАЗГЪВА — това е жестът, с
     който се отваря в самия продукт. max-height, а не height: истинската му
     височина зависи от пренасянето и не се знае предварително.
     260px е таван с запас, а не мярка: измереното е 178px и на 360, и на 390,
     и на 430. Таванът не бива да е много над мярката — разгъването свършва в
     мига, в който max-height подмине истинската височина, тоест при 420px
     жестът щеше да се изчерпва за 220ms от 520-те. */
  .sana-hwm.hwm-play .sana-hwm-ix{max-height:0;overflow:hidden;transform:none}
  .sana-hwm.hwm-play .sana-hwm-ix.hwm-in{max-height:260px;
    transition:max-height .52s cubic-bezier(.32,.72,.28,1),opacity .3s ease}
  /* Под-табовете се превключват пред очите на четящия, затова смяната е плавна.
     Дебелината на буквата не се преживява — тя щраква, и точно това е знакът, че
     е натиснат друг таб. */
  .sana-hwm.hwm-play .sana-hwm-tabs span{
    transition:color .26s ease,box-shadow .26s ease}

  /* ── сянката, върху която се мери височината ───────────────────────────── */
  /* Кутията се заключва на КРАЙНАТА височина на екрана, преди разкриването да
     тръгне: инак елементите идват един по един, кутията расте под пръста и целият
     документ се тътри надолу, докато човекът чете.
     Мери се върху копие встрани — точно както прави десктоп частта с .hw-ghost.
     Прозрачността и преместването не менят височина, но разгъващият се запис я
     мени: свит, от него остават само рамката и полето — 26px срещу 178, тоест
     кутията щеше да се заключи 152px по-ниска от истинския екран и последните
     му редове щяха да останат отрязани.
     Затова в сянката всичко е принудено в крайното си състояние.
     Копие, а не принуда на място: принудата се сваля с клас, а това рестартира
     започналото разкриване.
     display:block на сянката — истинската кутия е мрежа с ЕДНА клетка и там
     четирите екрана лежат един върху друг; в сянката те трябва да се наредят,
     за да измери всеки колкото е сам. */
  .sana-hwm .hwm-ghost{position:absolute!important;left:0;top:0;width:100%;
    display:block!important;height:auto!important;
    visibility:hidden!important;pointer-events:none!important;
    transition:none!important}
  .sana-hwm .hwm-ghost .sana-hwm-scr{position:static!important;display:block!important;
    opacity:1!important;transform:none!important;transition:none!important}
  .sana-hwm .hwm-ghost .sana-hwm-rv{opacity:1!important;transform:none!important}
  .sana-hwm .hwm-ghost .sana-hwm-qc span{opacity:1!important}
  .sana-hwm .hwm-ghost .sana-hwm-ix{max-height:none!important}

  /* ── екран „Питай" ─────────────────────────────────────────────────────── */
  .sana-hwm-q{margin:0 0 12px;padding:10px 13px;border:1px solid var(--m-line);
    border-radius:12px 12px 4px 12px;background:#fff;font-size:14px;
    color:var(--m-ink)}
  .sana-hwm-a{margin:0 0 13px;font-size:14px;line-height:1.6;color:var(--m-ink-2)}
  /* Цитат-чипът е надстрочен и затова е по-дребен от прозата, но не пада под
     12px: това е долната граница за целия макет и надстрочното не е изключение —
     тъкмо то се чете най-трудно. */
  .sana-hwm-c{display:inline-block;font-size:12px;line-height:1.25;vertical-align:super;
    color:#1B5FA6;font-weight:600;background:rgba(14,165,233,.14);
    border:1px solid rgba(37,99,168,.42);border-radius:5px;padding:0 5px;margin-left:2px;
    font-variant-numeric:tabular-nums}
  /* Модулът е САМО сгънат ред с шеврон: дословните редове от Таблица 3 на 360px
     дават стена от нечетими букви. Редът казва какво има вътре и че се отваря. */
  .sana-hwm-mod{display:flex;align-items:center;gap:10px;padding:11px 13px;margin:0 0 13px;
    border:1px solid var(--m-line);border-radius:10px;background:rgba(255,255,255,.75)}
  .sana-hwm-mod-t{min-width:0;font-size:13.5px;font-weight:600;color:var(--m-ink);
    line-height:1.35}
  .sana-hwm-mod-t i{display:block;font-style:normal;font-size:13px;font-weight:400;
    color:var(--m-ink-4);margin-top:2px}
  .sana-hwm-cx{margin-left:auto;flex:0 0 16px;width:16px;height:16px;color:var(--m-ink-4)}
  .sana-hwm-cx .hw-ico{display:block;width:100%;height:100%}
  .sana-hwm-src{border-top:1px solid var(--m-line);padding-top:12px}
  .sana-hwm-src-k{display:block;font-size:13px;font-weight:600;color:#475569;margin:0 0 8px}
  .sana-hwm-src-r{display:flex;align-items:baseline;gap:8px;padding:8px 11px;margin:0 0 6px;
    border:1px solid var(--m-line);border-radius:8px;background:rgba(255,255,255,.72);
    font-size:13px;line-height:1.45;color:#334155}
  .sana-hwm-src-r:last-child{margin-bottom:0}
  .sana-hwm-src-r i{font-style:normal;font-weight:600;color:var(--m-link);flex:0 0 auto;
    font-variant-numeric:tabular-nums}

  /* ── екран „Инструменти" ───────────────────────────────────────────────── */
  .sana-hwm-ct{margin:0 0 11px;font-size:15px;font-weight:600;letter-spacing:-.01em;
    color:var(--m-ink)}
  .sana-hwm-fields{display:grid;gap:7px;margin:0 0 13px}
  .sana-hwm-fields span{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;padding:9px 12px;border:1px solid var(--m-line);border-radius:8px;
    background:#fff;font-size:13px}
  .sana-hwm-fields b{min-width:0;font-weight:500;color:#475569}
  .sana-hwm-fields u{flex:0 0 auto;text-decoration:none;font-weight:600;color:var(--m-ink);
    font-variant-numeric:tabular-nums}
  .sana-hwm-res{padding:14px 12px;border:1px solid var(--m-line);border-radius:10px;
    background:#F6FAFF;text-align:center}
  .sana-hwm-res-k{display:block;font-size:13px;font-weight:600;color:#475569;margin:0 0 7px}
  .sana-hwm-res-v{display:flex;align-items:baseline;justify-content:center;gap:8px;
    font-size:13px;color:var(--m-ink-3)}
  .sana-hwm-res-v b{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.02em;
    color:var(--m-ink);font-variant-numeric:tabular-nums}
  .sana-hwm-res-st{display:block;margin-top:11px;padding:8px 11px;border:1px solid var(--m-line);
    border-radius:8px;background:#fff;font-size:13px;color:var(--m-ink-3)}
  .sana-hwm-res-st b{display:block;font-size:14px;font-weight:600;color:#EA580C}
  .sana-hwm-f{margin-top:11px;font-size:13px;color:var(--m-ink-4);text-align:center}

  /* ── екран „Лекарства" ─────────────────────────────────────────────────── */
  /* Шапката на продукта, свита до един ред: име, сила и трите знака. Мерките са
     от S2, само че тук името е 17px вместо 20px — на 360px шапката трябва да
     се събере на ЕДИН ред, иначе силата увисва сама под името. */
  .sana-hwm-ph{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin:0 0 6px}
  .sana-hwm-pn{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--m-ink);
    line-height:1.2}
  .sana-hwm-pstr{font-size:13px;font-weight:600;color:#475569;
    font-variant-numeric:tabular-nums}
  /* Знаците стоят на десния край: така мястото между силата и тях расте, вместо
     иконите да се долепят до текста. */
  .sana-hwm-pmk{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
    align-self:center}
  .sana-hwm-mk{display:inline-flex;width:18px;height:18px;flex:0 0 18px}
  .sana-hwm-mk .hw-ico{display:block;width:100%;height:100%}
  /* Същите цветове като в прозореца горе — знакът значи едно и също нещо на
     двете ширини. „ЕС" (Certificate) отпада: три знака стигат, четвъртият
     повтаря разрешението. */
  .sana-hwm-mk.ok{color:#146C33}
  .sana-hwm-mk.rx{color:var(--m-link)}
  .sana-hwm-mk.renal{color:#64748B}
  .sana-hwm-psub{font-size:13px;color:#475569;line-height:1.45;margin:0 0 10px}
  .sana-hwm-psub i{font-style:italic;color:var(--m-ink-4)}
  /* Ключовите факти: два реда етикет → стойност. Мрежа с две колони на 360px
     реже „антитромботични средства" на срички, затова редовете са един под друг
     както в списък, а не един до друг. */
  .sana-hwm-kf{display:grid;gap:6px;margin:0 0 12px}
  .sana-hwm-kf span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:8px 12px;border:1px solid var(--m-line);border-radius:8px;background:#fff;
    font-size:13px}
  .sana-hwm-kf b{font-weight:500;color:#475569}
  .sana-hwm-kf u{text-decoration:none;font-weight:600;color:var(--m-ink);
    font-variant-numeric:tabular-nums}
  /* Под-табовете: три от седемте. Останалите четири не се показват, защото на
     360px лента от седем имена или се реже, или се превръща в хоризонтален
     скрол — а хоризонтален скрол в макет е дефект, не жест. */
  .sana-hwm-tabs{display:flex;gap:14px;margin:0 0 12px;padding-bottom:1px;
    border-bottom:1px solid var(--m-line)}
  .sana-hwm-tabs span{padding:0 0 8px;font-size:13px;color:var(--m-ink-4);
    white-space:nowrap}
  .sana-hwm-tabs span.on{color:var(--m-link);font-weight:600;
    box-shadow:inset 0 -2px 0 var(--m-link)}
  .sana-hwm-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin:0 0 8px}
  .sana-hwm-sec-h span{font-size:13.5px;font-weight:600;color:var(--m-ink);line-height:1.35}
  .sana-hwm-sec-h i{flex:0 0 auto;font-style:normal;font-size:12.5px;color:var(--m-ink-4);
    white-space:nowrap}
  /* Абсолютното ограничение: плътен квадрат, етикет в цвета на риска и едва
     доловим тониран фон — без цветна лява лента, точно както е в прозореца. */
  .sana-hwm-ind{display:flex;align-items:center;gap:9px;padding:11px 12px;
    border:1px solid rgba(180,35,24,.28);border-radius:9px;background:rgba(180,35,24,.06);
    color:#B42318;font-size:13px}
  .sana-hwm-sq{width:8px;height:8px;flex:0 0 8px;display:inline-block}
  .sana-hwm-sq.danger{background:#B42318}
  .sana-hwm-sq.warn{background:#B45309}
  .sana-hwm-ind-l{flex:1;min-width:0;color:var(--m-ink);font-weight:500}
  .sana-hwm-ind-v{flex:0 0 auto;font-weight:600}

  /* ── екран „Взаимодействия" ────────────────────────────────────────────── */
  .sana-hwm-subs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 9px}
  .sana-hwm-sub{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;
    border:1px solid var(--m-line);border-radius:999px;background:#fff;font-size:13px;
    font-weight:600;color:var(--m-ink)}
  .sana-hwm-sub i{font-style:italic;font-weight:400;font-size:12.5px;color:var(--m-ink-4)}
  .sana-hwm-ixmeta{margin:0 0 12px;font-size:12.5px;color:var(--m-ink-3)}
  .sana-hwm-ixmeta b{font-weight:600;color:var(--m-ink);font-variant-numeric:tabular-nums}
  .sana-hwm-ix{padding:12px;border:1px solid var(--m-line);border-radius:10px;
    background:rgba(255,255,255,.8)}
  .sana-hwm-ix-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
    color:#B45309}
  .sana-hwm-ix-t{margin:9px 0 6px;font-size:14px;font-weight:600;color:var(--m-ink);
    line-height:1.35}
  .sana-hwm-ix-p{margin:0 0 9px;font-size:13px;line-height:1.55;color:#334155}
  .sana-hwm-ix-s{padding-top:9px;border-top:1px solid var(--m-line);font-size:12.5px;
    color:var(--m-ink-4)}

  /* ── мини лентата с четирите стъпки ────────────────────────────────────── */
  /* Четири номера, но само АКТИВНИЯТ носи името си: четири изписани имена не се
     събират на 360px, а четирите точки казват същото — процесът има четири
     стъпки и в момента гледаме една от тях.
     Стъпките са БУТОНИ, не надписи: и четирите отварят своя екран при тап.
     Височината е 44px — под нея палецът не улучва. Ширината на неактивните е
     също 44px: кръгчето е 22px, останалото е чувствителна площ.
     min-width:0 + overflow:hidden на лентата: ако на 360px името на активната
     стъпка не се събере, то се подрязва ВЪТРЕ в картата, вместо да избута
     страницата настрани. */
  .sana-hwm-steps{display:flex;align-items:center;gap:6px;padding:2px 10px;
    border-top:1px solid var(--m-line);background:#fff;overflow:hidden}
  .sana-hwm-step{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-width:44px;min-height:44px;padding:0;margin:0;border:0;background:none;
    font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
    -webkit-appearance:none;appearance:none}
  .sana-hwm-step i{display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;flex:0 0 22px;border:1px solid var(--m-line);border-radius:50%;
    font-style:normal;font-size:13px;font-weight:600;color:var(--m-ink-4);
    font-variant-numeric:tabular-nums;
    transition:background .3s ease,color .3s ease,border-color .3s ease}
  .sana-hwm-step.on i{border-color:transparent;color:#fff;
    background:linear-gradient(135deg,#0EA5E9,#2563A8)}
  .sana-hwm-step b{display:none;font-size:13px;font-weight:600;color:var(--m-ink);
    white-space:nowrap}
  /* Активната клетка получава мястото, което ѝ трябва за името, и е тази, която
     се свива първа, ако мястото не стигне. */
  .sana-hwm-step.on{flex:0 1 auto;min-width:0;padding-right:6px}
  .sana-hwm-step.on b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .sana-hwm-step:focus-visible{outline:2px solid #0EA5E9;outline-offset:-2px;
    border-radius:10px}
  .sana-hwm-step:active i{transform:scale(.94)}
}
/* Помолен ли е човекът за покой: картата стои в крайното си състояние, автоматична
   смяна няма (стъпките пак се отварят при тап) и неактивните екрани изобщо не
   участват в мрежата. Височината пак следва активния екран, само че скача. */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .sana-hwm{opacity:1;transform:none;animation:none}
  .sana-hwm-scr{transition:none}
  .sana-hwm-scr:not(.on){display:none}
  .sana-hwm-body{transition:none}
  .sana-hwm-step i{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .sana-hw .hw-screen.on,.sana-hw .hw-screen.on *{animation:none!important}
  /* Смяната става мигновено: екраните пак се сменят, но без движение. */
  .sana-hw .hw-screen{transition:none!important;transform:none!important}
  /* Височината пак следва активния екран — само че скача, а не се плъзга. */
  .sana-hw,.sana-hw .hw-stage{transition:none!important}
  .sana-hw .hw-type span,.sana-hw .hw-mod,.sana-hw .hw-dis,.sana-hw .hw-new,.sana-hw .hw-alert,
  .sana-hw .hw-src,.sana-hw .hwx.hw-s4 .hw-field,.sana-hw .hwx.hw-s3 .hw-cat,
  .sana-hw .hw-s4 .hw-big b,.sana-hw .hw-s4 .hw-stage-b,.sana-hw .hw-s4 .hw-tie{opacity:1}
  /* Няма сценарий, няма и кой да го води. */
  .sana-hw .hw-cur{display:none}
  /* Няма преход, който да се доизчака: неактивният екран се скрива веднага и
     от очите, и от екранните четци. */
  .sana-hw .hw-screen:not(.on){opacity:0;visibility:hidden}
  .sana-hw .hw-mod-b{max-height:none}
  .sana-hw .hw-caret{display:none}
  .sana-hw .hw-step.on u{transition:none;width:100%}
}

/* ══ новият дизайн ══════════════════════════════════════════════════════════ */
/* Обвивката около всичко в прозореца (от hero-window.js): спрямо нея се мери курсорът. */
.sana-hw .hw-cam{position:relative}
.sana-hw .hw-ghost .hw-cam{transform:none!important}
/* Смяната на екрана минава през леко размиване: излизащият се размива, докато
   се изтегля, влизащият се изостря, докато влиза. */
.sana-hw .hw-screen{filter:blur(3px);
  transition:opacity var(--hw-swap) var(--hw-ease),transform var(--hw-swap) var(--hw-ease),
             filter var(--hw-swap) var(--hw-ease),visibility 0s linear var(--hw-swap)}
.sana-hw .hw-screen.on{filter:none}
.sana-hw .hw-screen.was{filter:blur(3px)}
.sana-hw .hw-ghost .hw-screen{filter:none!important}
/* Тъмният начален екран: рамката е без светла линия, сянката е по-дълбока. */
/* Светлият начален екран (посока А): тънка рамка и мека синя сянка. */
.hero .sana-hw-in{border-color:#E3E8EF!important;box-shadow:0 1px 2px rgba(22,28,36,.05),0 30px 70px -30px rgba(37,99,168,.35)!important}
.hero .sana-hwm{border-color:#E3E8EF;box-shadow:0 24px 60px -28px rgba(37,99,168,.35)}
@media (prefers-reduced-motion:reduce){
  .sana-hw .hw-cam{transition:none;transform:none!important}
  .sana-hw .hw-screen{filter:none!important}
}
/* Знакът „⌄" стана истинската CaretDown на Phosphor, както в платформата. */
.sana-hw .hw-mod-x .hw-ico{width:14px;height:14px}
.sana-hw .hw-cf-u .hw-ico{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-left:4px}

/* Шапката на продукта по стандарта на платформата от 27.09.2026: пътеката
   заменя бутона „назад", действията са на реда на заглавието, с Phosphor икони. */
.sana-hw .hw-crumb{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;font-size:12.5px;color:var(--ink-4)}
.sana-hw .hw-crumb i{font-style:normal;color:#CBD5E1}.sana-hw .hw-crumb b{font-weight:400;color:var(--ink-3)}
.sana-hw .hw-p-acts{display:flex;gap:6px;margin-left:auto}
.sana-hw .hw-act{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid #E2E8F0;border-radius:6px;background:#F1F5F9;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sana-hw .hw-act .hw-ico{width:14px;height:14px;flex:none}
.sana-hw .hw-act.ask{color:var(--link);background:#EFF6FF;border-color:var(--link)}
.sana-hw .hw-p-title{display:flex;align-items:center}
.sana-hw .hw-inn{font-weight:500;color:var(--ink)}
.sana-hwm .sana-hwm-psub b{font-weight:500;color:var(--m-ink)}

/* Първият екран има по-дълъг отговор: думите идват по-често, за да свършат,
   когато излиза картата. Чертата за писане се води от hero-window.js (caretRun):
   видима, докато се пише, после мига и изчезва. Отрицателното поле пази реда
   от подскачане, докато чертата се мести между думите. */
.sana-hw .hw-screen.on .hw-type span{animation-delay:calc(.30s + var(--i) * .028s)}
.sana-hw .hw-caret{margin-right:-2px}
.sana-hw .hw-screen.on .hw-caret{animation:none}
.sana-hw .hw-caret.typing{opacity:1}
.sana-hw .hw-caret.blink{animation:hwCaret .8s steps(1) 0s 3}

/* Логото в прозореца и в мобилната карта: същият цитатен маркер като в платформата. */
.sana-hw .hw-mark,.sana-hwm .sana-hwm-mark{letter-spacing:-.012em}
.sana-hw .hw-mark sup,.sana-hwm .sana-hwm-mark sup{font-size:.45em;font-weight:500;line-height:1;vertical-align:.85em;
  letter-spacing:-.02em;margin-left:-.02em;color:#2563A8;background:none;-webkit-text-fill-color:#2563A8}


/* новият дизайн: логото на Wardside в заглавната лента на прозореца */
.sana-hw .hw-mark img,.sana-hwm .sana-hwm-mark img{display:block;height:14px;width:auto}