/* ═══════════════════════════════════════════════════════════════════════════════
   📏 „РАСТЕМ ПО СВОЙ РИТЪМ · МОИТЕ ИЗМЕРВАНИЯ“ (референция 16, 22.09.2026)
   Облеклото на блока от js/pl-rastezh.js, ВЪРХУ СЦЕНАТА на стаята (img/scene/bebe.webp):
     · плочка от филц с шев (.pl-felt) — серифното заглавие + жираф, който се мери до дървена
       линийка (сърцето е последният ръст); заглавието НЕ стои голо върху сцената — там е лицето
       на бебето (снимка ag2_rastezh_sega: подзаглавието беше нечетимо);
     · картата „Моите измервания“ = .pl-felt; хапчетата = .pl-soft, избраното = .pl-gel;
       редовете = .pl-soft (aria-pressed = розов филц); „+ Добави измерване“ = .pl-gel.
     МАТЕРИАЛИТЕ са от css/pl-ui.css — тук е само разположението (и нищо свое за гел/филц).
   🪤 Цифрите НЕ са на Georgia (старинните ѝ цифри: 0 се чете „о“, 7 пада под реда) — Nunito.
   Токените са от css/premium.css (--pl-*); тук има резервни стойности, ако файлът липсва.
   ПЪТ НАЗАД: махни <link href="css/pl-rastezh.css"> и <script src="js/pl-rastezh.js">.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 🪤 #roRoom е flex колона с фиксирана височина — без flex:none блокът се свива */
.pl-rz {
  flex: none; position: relative;
  margin: 4px 0 8px;
  color: var(--pl-ink, #3b3f5c);
  font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif;
}
.pl-rz[hidden] { display: none !important; }
.pl-rz [hidden] { display: none !important; }
/* :where() смъква теглото до (0,0,1) — иначе `font: inherit` бие класовете на бутоните (капанът от pl-bebe.css:20) */
:where(.pl-rz) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.pl-rz-lv, .pl-rz-svg text, .pl-rz-row, .pl-rz-sc b { font-variant-numeric: tabular-nums lining-nums; }

/* ═══ 1 · ПЛОЧКАТА: „Растем по свой ритъм“ + жирафът с линийката ═══ */
.pl-rz-top { display: flex; align-items: stretch; gap: 6px; margin: 0 0 14px; padding: 16px 14px 14px 20px; }
/* опашчица долу вляво, като плочката на стаята (premium.css .pl-rhero-t) */
html body .pl-rz .pl-rz-top.pl-felt { border-radius: 28px 28px 28px 12px !important; }
html body .pl-rz .pl-rz-top.pl-felt::after { border-radius: 23px 23px 23px 7px; }
.pl-rz-tt { flex: 1; min-width: 0; align-self: center; }
.pl-rz .pl-rz-t {
  margin: 0;
  font-family: var(--pl-serif, Georgia, 'Noto Serif', serif); font-weight: 700;
  font-size: 27px; line-height: 1.05; letter-spacing: -.5px;
  color: var(--pl-navy, #1d2a5c);
}
.pl-rz .pl-rz-tp { margin: 8px 0 0; font-size: 14px; line-height: 1.32; font-weight: 700; color: var(--pl-ink, #3b3f5c); }
.pl-rz-tp i { font-style: normal; font-family: var(--pl-serif, Georgia, serif); color: #c8457a; font-size: 20px; line-height: 0; }

/* фигурата: плюшеният жираф (ico-d [2,2]) и дървената линийка отдясно */
.pl-rz-fig { flex: none; position: relative; width: 112px; min-height: 122px; }
.pl-rz-gir {
  position: absolute; left: -30px; bottom: -12px; width: 124px; height: 124px;
  background-size: 400% 400%; background-repeat: no-repeat;
  mix-blend-mode: multiply;                  /* белият фон на рисунката изчезва във филца */
}
.pl-rz-rul {
  position: absolute; right: 2px; top: 0; bottom: 0; width: 34px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fbeedd 0, #f3dcbd 55%, #ecd0ab 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 108, .55), inset 1px 0 0 #fff8ee, 0 3px 6px rgba(110, 76, 52, .16);
}
/* скалата: 40 см, деление на всеки 2 см (20 черти), дълги черти с числата на всеки 10 */
.pl-rz-sc {
  position: absolute; left: 0; right: 0; top: 9px; bottom: 9px;
  background: repeating-linear-gradient(to top, rgba(120, 88, 58, .6) 0 1px, transparent 1px 5%) right 0 top 0 / 7px 100% no-repeat;
}
.pl-rz-sc > i { position: absolute; left: 0; right: 0; height: 0; font-style: normal; }
.pl-rz-sc > i::after { content: ''; position: absolute; right: 0; top: -.75px; width: 13px; height: 1.5px; background: rgba(110, 78, 50, .85); }
.pl-rz-sc b {
  position: absolute; left: 3px; top: -7px;
  font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif; font-weight: 800; font-size: 10.5px; line-height: 14px;
  color: #5c4631;
}
.pl-rz-hrt {
  position: absolute; left: -15px; margin-bottom: -8px;
  font: 16px/16px var(--pl-serif, Georgia, serif); color: #e56d99;
  text-shadow: 0 1.5px 0 #c8457a, 0 3px 6px rgba(200, 69, 122, .35);
}

/* ═══ 2 · КАРТАТА „Моите измервания“ (.pl-felt) ═══ */
/* 🪤 страничното поле е 11, не 14 px: страната на списъка иска 141 px (виж по-долу) и при 14 px
   за графиката и за бутона „Добави измерване“ оставаха 183 px — бутонът искаше 203 и белият
   кръг с „+“ опираше в ръба на хапчето (мерено, wf2_rz_sled3_390: запас −20 px).
   С 11 px тялото е 338 px и графиката става 189 px. */
.pl-rz-card { padding: 18px 11px 14px; }

.pl-rz .pl-rz-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px 4px;
  font-family: var(--pl-serif, Georgia, serif); font-weight: 700;
  font-size: 23px; line-height: 1.1; letter-spacing: -.3px;
  color: var(--pl-navy, #1d2a5c);
}
.pl-rz-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; flex: none; }
.pl-rz-bars i { display: block; width: 5.5px; border-radius: 3px; background: linear-gradient(180deg, #8fb3ee 0, #5b86d6 100%); box-shadow: 0 1px 0 #3f6bbd; }
.pl-rz-bars i:nth-child(1) { height: 10px; }
.pl-rz-bars i:nth-child(2) { height: 16px; }
.pl-rz-bars i:nth-child(3) { height: 24px; }
.pl-rz-bars i:nth-child(4) { height: 19px; }

/* ── сегментираните хапчета: материалът е .pl-soft / .pl-gel (pl-ui.css), тук само формата ── */
.pl-rz-seg { display: grid; grid-template-columns: 1fr .9fr 1.3fr; gap: 6px; margin: 0 0 12px; }
.pl-rz .pl-rz-tab {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 48px; padding: 4px 8px 4px 5px;
  border-radius: 999px;
  font-weight: 800; font-size: 15px; line-height: 1.1;
  cursor: pointer; touch-action: manipulation;
}
.pl-rz-tab > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rz .pl-rz-tab:focus-visible { outline: 3px solid var(--pl-navy, #1d2a5c); outline-offset: 2px; }
.pl-rz-ti {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background-size: 400% 400%; background-repeat: no-repeat;
  mix-blend-mode: multiply;                  /* белият фон на рисунката изчезва в кремавия филц */
}
/* в гела — бял кръг под плюшената иконка (като бялата чантичка в референцията) */
.pl-rz-tab.on .pl-rz-ti { mix-blend-mode: normal; background-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 2px 4px rgba(120, 20, 60, .25); }

/* 🪤 ИЗМЕРЕНО ПО ПИКСЕЛИ (wf2_rastezh_piksel.js — цветът ПОД текста, не background-color):
   белият надпис „Тегло“ върху общия гел е 4.12:1 средно и 3.62 най-ниско, а „Добави измерване“
   4.09 / 3.73 — под 4.5 за дребен текст. Виновна е СВЕТЛАТА част на отвесния преход: общият гел
   стига --ui-gel чак на 62% (pl-ui.css:34–50), тоест точно под буквите.
   Както съседът (pl-hranene.css:169–178): СЪЩИЯТ материал и СЪЩИТЕ цветове (--ui-gel-*), само
   преходът е по-бърз — --ui-gel вече на 28%, под него #c8457a…#b93a6e. Бликът (радиалният)
   е непокътнат: той свършва на 55% от 70% височина, тоест над буквите. pl-ui.css НЕ се пипа. */
html body .pl-rz .pl-rz-tab.pl-gel.pl-gel, html body .pl-rz .pl-rz-add.pl-gel.pl-gel {
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .62) 0, rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--ui-gel-top) 0%, var(--ui-gel-mid) 14%, var(--ui-gel) 28%, var(--ui-gel-bot) 100%) !important;
}

/* ── тялото: графика вляво, последен запис + списък вдясно (като в референцията) ── */
/* 🪤 ИЗМЕРЕНО (проверителят, ag2_rastezh_pv_rez.js; ПОВТОРЕНО в тази сесия, wf2_rastezh_mery):
   при 128 px страна редът има 90 px за текста, а „20 сеп · 10,75 кг“ иска 103 px → режеше се
   при ПОЧТИ ВСИЧКИ истински числа (3 от 4 реда на 1-годишно). Най-дългото възможно е 17 знака
   („20 фев · 29,75 кг“ при таван 30 кг, „20 фев · 119,5 см“ при таван 120 см).
   Страната е 141 px. Нужното НЕ се мери с scrollWidth и вече не с Range (редът стана flex —
   Range връща свитите части, тоест винаги „се побира“), а на КЛОНИНГ извън потока, вътре в
   същия <ul>, с width:max-content (wf2_rastezh_rez.js). Мерено на 390 px, цял ред с точката,
   разстоянията и „›“:
     „20 фев · 119,5 см“ иска 137 при 141 → запас 4 · „20 фев · 29,75 кг“ 135 → 6 ·
     „20 сеп · 10,75 кг“ 131 → 10 · „20 сеп · 7,2 кг“ 116 → 25.
   Режещи редове (многоточие или число извън кутията): 0 от 23 случая × 2 ширини.
   Под 380 px редът е още по-широк (151 px, двете колони) — виж долу. */
.pl-rz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 141px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "chart side" "add side" "msg msg";
  column-gap: 8px; row-gap: 12px;
  align-items: start;
}
.pl-rz-body.is-empty { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "empty" "add" "msg"; }
/* „Всички записи (N) ▾“: при 40 записа страната ставаше лента с ПРАЗНА лява половина
   (мерено от проверителя, pv_rz_40.png). Разгънат → всичко е на цял ред: графиката печели
   цялата ширина. Без вложен скрол (стаята си скролва сама). */
.pl-rz-body.is-all { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "chart" "side" "add" "msg"; }
.pl-rz-body.is-all .pl-rz-last { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; padding: 10px 12px; }
.pl-rz-body.is-all .pl-rz-lhd { flex: none; align-self: center; }
.pl-rz-body.is-all .pl-rz-lv { margin-top: 0; }
/* 🪤 ИЗМЕРЕНО (тази сесия, wf2_rz_predi_40 → wf2_rz_final_390): само „на цял ред“ не стига —
   40 записа на ЕДНА колона правеха блока 2854 px, а всеки ред пилееше по 166 px празно вдясно.
   Затова разгънатият списък е на ДВЕ колони: repeat(auto-fill, minmax(147px, 1fr)) дава по 166 px
   на 390 px и по 151 px на 360 px, а най-дългият възможен ред иска 139 px с обвивката си.
   След това: блокът е 1834 px (беше 2854), списъкът 1013 (беше 2033), режещи редове 0 от 40.
   Под ~300 px ширина auto-fill сам се връща на една колона — затова е auto-fill, не „2“. */
.pl-rz-body.is-all .pl-rz-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
  align-content: start; gap: 7px;
}
.pl-rz-body.is-all .pl-rz-list li { display: flex; }
.pl-rz-body.is-all .pl-rz-row { padding: 0 4px 0 8px; gap: 4px; }
/* листът с графиката — гладка хартия върху филца (без шев: шевът е само на голямата карта) */
.pl-rz-chart {
  grid-area: chart; position: relative; min-width: 0;
  height: 250px; overflow: hidden;
  border: 1px solid #ecdccb; border-radius: 18px;
  background: #fffcf8;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(214, 186, 158, .45), 0 6px 14px rgba(110, 76, 52, .08);
  cursor: pointer; touch-action: manipulation;
}
.pl-rz-svg { display: block; width: 100%; height: 250px; }
.pl-rz-svg text, .pl-rz-meas text { font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif; }
.pl-rz-unit { font-size: 12px; font-weight: 800; fill: #5d596f; }
.pl-rz-yl, .pl-rz-xl { font-size: 11px; font-weight: 700; fill: #5d596f; }
.pl-rz-gl { stroke: #f1e1e6; stroke-width: 1; }
.pl-rz-gm, .pl-rz-gv { stroke: #f6ecef; stroke-width: 1; }
.pl-rz-base { stroke: #e2c6d1; stroke-width: 1.2; }
.pl-rz-s1 { stop-color: #f7a9c4; stop-opacity: .5; }
.pl-rz-s2 { stop-color: #f7a9c4; stop-opacity: .14; }
.pl-rz-line { fill: none; stroke: #e56d99; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-rz-pt { fill: #e56d99; stroke: #fff; stroke-width: 2; }
.pl-rz-pt.last { stroke-width: 3; }
.pl-rz-halo { fill: #e56d99; opacity: .2; }
.pl-rz-ring { fill: none; stroke: #b33c70; stroke-width: 2; }
.pl-rz-vl {
  font-size: 11.5px; font-weight: 800; fill: #3b3f5c;
  paint-order: stroke; stroke: #fffcf8; stroke-width: 3px; stroke-linejoin: round;   /* ореол: четимо и върху линията */
}
/* последната стойност — едра, НО на Nunito (не Georgia: старинните цифри) */
.pl-rz-vl.last { font-size: 15.5px; font-weight: 900; fill: #1d2a5c; }
/* когато точките се сгъстят: етикетът се СМАЛЯВА, преди да бъде пропуснат (находка на проверителя:
   „7,2 кг“ изчезваше, щом 20.09 и 23.09 се доближат) */
.pl-rz-vl.sm { font-size: 10px; }
.pl-rz-vl.sel { fill: #a93a6d; }

/* 🔬 УРЕДЪТ: скрит <svg> в самия блок — истинската ширина на надпис се МЕРИ
   (getComputedTextLength), не се гади. Старите оценки („текст.length × 6.6“, „28 px за датата“)
   криеха етикети. 1×1 px, absolute в .pl-rz (то е position:relative) → нула в оформлението,
   без хоризонтален скрол; overflow:hidden само реже рисуването — мярката си остава вярна. */
.pl-rz-meas {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* ── страната: „Последен запис“ + записите ── */
.pl-rz-side { grid-area: side; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pl-rz-last {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 9px 4px 10px;
  border: 1px solid #ecdccb; border-radius: 18px;
  background: linear-gradient(180deg, #fffdf9 0, #fff6ee 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(214, 186, 158, .45), 0 6px 14px rgba(110, 76, 52, .08);
}
/* иконката и надписът в един ред (като „🧺 Примерен запис“ в референцията) */
.pl-rz-lhd { display: flex; align-items: center; justify-content: center; gap: 3px; align-self: stretch; }
.pl-rz-lico { flex: none; width: 24px; height: 24px; background-size: 400% 400%; background-repeat: no-repeat; mix-blend-mode: multiply; border-radius: 50%; }
.pl-rz-lk { font-size: 11.5px; font-weight: 700; line-height: 1.15; letter-spacing: -.1px; color: #5d596f; text-align: left; }
.pl-rz .pl-rz-lv {
  margin-top: 2px;
  font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif; font-weight: 900;
  font-size: 27px; line-height: 1.08; letter-spacing: -.4px; white-space: nowrap;
  color: var(--pl-navy, #1d2a5c);
}
.pl-rz-ld { font-size: 11.5px; font-weight: 800; color: var(--pl-navy, #1d2a5c); line-height: 1.25; white-space: nowrap; }
.pl-rz-la { font-size: 11.5px; font-weight: 700; color: #5d596f; }
.pl-rz-la:empty { display: none; }

.pl-rz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pl-rz-list li { margin: 0; padding: 0; }
/* редовете: материалът е .pl-soft (избраният — розов филц от pl-ui.css), тук само формата */
.pl-rz .pl-rz-row {
  display: flex; align-items: center; gap: 4px;
  width: 100%; min-height: 44px; padding: 0 3px 0 7px;
  border-radius: 16px;
  font-size: 13px; font-weight: 700; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.pl-rz-row > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e56d99; box-shadow: 0 0 0 2px rgba(229, 109, 153, .18); }
/* 🪤 ИЗМЕРЕНО (тази сесия, wf2_rastezh_mery / wf2_rastezh_rez): редът е ДВЕ части и се свива
   само едната. Досега целият надпис беше един text-overflow:ellipsis — многоточието падаше
   ОТЗАД, тоест точно върху стойността („20 сеп · 7,2 к…“), а тя е причината за реда.
   Сега датата е свиваемата част (min-width:0), а числото е flex:none — то не се реже НИКОГА;
   при недостиг се скъсява датата. Заедно с 141 px страна (виж по-горе) нито едното не се случва:
   най-дългият възможен ред („20 фев · 119,5 см“) иска 137 px, а има 141. Проверено и по двата
   независими признака: многоточие върху датата (scrollWidth > clientWidth) — няма;
   число, излязло извън кутията на реда — няма. */
.pl-rz-row > span { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
/* датата с 1 px по-дребна от числото — числото е важното и то не бива да се реже */
.pl-rz-rd { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pl-rz-row b { flex: none; font-weight: 900; }
.pl-rz-row em { flex: none; font-style: normal; font-size: 15px; line-height: 1; color: #5d596f; }
.pl-rz .pl-rz-row:focus-visible, .pl-rz .pl-rz-more:focus-visible, .pl-rz .pl-rz-add:focus-visible { outline: 3px solid var(--pl-navy, #1d2a5c); outline-offset: 2px; }
.pl-rz .pl-rz-more {
  min-height: 44px; padding: 0 6px;
  border-radius: 16px;
  font-size: 12.5px; font-weight: 800; cursor: pointer;
}

/* ── „+ Добави измерване“: материалът е .pl-gel, тук формата и кръгът с плюса ── */
/* 🪤 ИЗМЕРЕНО (wf2_rz_sled3_390 / wf2_rz_diag_add_360): „Добави измерване“ е Georgia и е дълъг
   надпис — на 15 px иска 146 px, а с кръгчето и полетата целият бутон искаше 203 px при 183
   налични. Понеже е white-space:nowrap с overflow:visible, нищо не се режеше — съдържанието
   просто излизаше извън хапчето (на 360 px с цели 6 px). Затова: по-тясна обвивка (кръг 24,
   отстъпи 8/10, разстояние 7) и 14 px букви → иска 178 при 189 налични.
   white-space:normal е ПРЕДПАЗИТЕЛЯТ: при друг шрифт надписът се пренася на два реда вътре
   в хапчето (то е 54 px високо и ги побира), вместо да излезе навън. */
.pl-rz .pl-rz-add {
  grid-area: add;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 54px; padding: 6px 10px 6px 8px; white-space: normal; text-align: center;
  border-radius: 999px;
  font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 14px; line-height: 1.12; letter-spacing: -.3px;
  cursor: pointer; touch-action: manipulation;
}
.pl-rz-plus { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(120, 20, 60, .28), inset 0 -2px 0 rgba(200, 69, 122, .15); }
.pl-rz-plus::before, .pl-rz-plus::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 3px; margin: -1.5px 0 0 -6px; border-radius: 2px; background: #c8457a;
}
.pl-rz-plus::after { transform: rotate(90deg); }
.pl-rz-msg { grid-area: msg; margin: 0; font-size: 13px; font-weight: 700; color: #9e2f5f; text-align: center; }

/* ── празно: още няма мерене (покана, не „0“) ── */
.pl-rz-empty {
  grid-area: empty;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 14px 16px;
  border: 1.5px dashed #e7bccd; border-radius: 18px;
  background: #fffcf8;
}
.pl-rz-eico {
  width: 76px; height: 76px; border-radius: 50%;
  background-color: var(--pl-pink-soft, #fde6ef); background-size: 400% 400%; background-repeat: no-repeat;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 3px #fff, 0 4px 10px rgba(110, 76, 52, .14);
}
.pl-rz-eb { font-family: var(--pl-serif, Georgia, serif); font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--pl-navy, #1d2a5c); }
.pl-rz-et { font-size: 14px; font-weight: 600; line-height: 1.4; color: #5d596f; }

/* ── ⓘ Личен дневник… ── */
.pl-rz .pl-rz-note {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  margin: 14px 6px 2px; font-size: 13px; line-height: 1.4; font-weight: 600; color: #4a4660;
}
.pl-rz-i {
  flex: none; width: 20px; height: 20px; margin-top: 0;
  display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  font: italic 700 12px/1 var(--pl-serif, Georgia, serif);
}

/* ── осветяването на истинското поле, до което скачаме ── */
#roRoom [data-pl-rz-spot] {
  outline: 3px solid #e56d99 !important; outline-offset: 3px;
  border-radius: 14px;
  animation: plRzSpot 1.3s ease-in-out 2;
}
@keyframes plRzSpot { 50% { outline-color: rgba(229, 109, 153, .25); } }

/* ── ПОД 380 px · ИЗМЕРЕНО в тази сесия (wf2_rz_prelivat_360 / wf2_rz_diag_add_360):
      на 360 px картата дава 302 px и в подредбата „графика + страна“ графиката падаше на 153 px.
      Тогава се РЕЖЕХА два надписа извън списъка:
        · хапчето „Обиколка“ — текстът иска 74 px, а има 68 (и „Ръст“ 34 срещу 32) → многоточие;
        · „Добави измерване“ — надписът е 136 px (Georgia 14 px), а с кръгчето и полетата бутонът
          иска 181 px при 153 налични: текстът излизаше 6 px ИЗВЪН хапчето (без многоточие, защото
          е white-space:nowrap с overflow:visible). Нито едно смаляване на шрифта не го побира,
          без да го направи нечетим.
      Затова под 380 px подредбата е на един ред: графиката печели цялата ширина (302 вместо
      153 px — и четирите дати се виждат), списъкът минава на ДВЕ колони, а бутонът е цял.
      Старата граница беше 359 px и точно 360 px (най-честата android ширина) оставаше необслужена.
      Хапчетата са в един ред винаги → само те се смаляват. ── */
@media (max-width: 379px) {
  .pl-rz-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "chart" "side" "add" "msg"; }
  /* страната е на цяла ширина → същите две колони, както при „Всички записи“
     (под ~300 px auto-fill сам се връща на една) — иначе всеки ред пилее половината празен */
  .pl-rz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(147px, 1fr)); align-content: start; gap: 7px; }
  .pl-rz-list li { display: flex; }
  .pl-rz .pl-rz-row { padding: 0 4px 0 8px; }
  /* съотношението 1 : .9 : 1.3 остава — то дава на „Обиколка“ (най-дългото) най-широкото хапче;
     равните колони (1fr 1fr 1fr) режеха точно него */
  .pl-rz .pl-rz-tab { font-size: 13.5px; gap: 3px; padding: 4px 5px; }
  .pl-rz-ti { width: 24px; height: 24px; }
}

/* ── съвсем тесен екран (под 360px): и заглавието, и жирафът се смаляват ── */
@media (max-width: 359px) {
  .pl-rz-top { padding-left: 16px; }
  .pl-rz .pl-rz-t { font-size: 24px; }
  .pl-rz-fig { width: 92px; }
  .pl-rz-gir { width: 84px; height: 84px; }
  .pl-rz .pl-rz-tab { font-size: 12.5px; gap: 3px; padding: 4px 4px; }
  .pl-rz-ti { width: 22px; height: 22px; }
}

/* ═══ НОЩ (21:00–7:00): нощно синьо; бели кръгове под плюшените иконки ═══
   (панелите и бутоните сменят цвета си сами — нощните правила на .pl-felt/.pl-soft са в pl-ui.css) */
html[data-theme="dark"] .pl-rz { color: #e3e5f5; }
html[data-theme="dark"] .pl-rz .pl-rz-t, html[data-theme="dark"] .pl-rz .pl-rz-h { color: #fff; }
html[data-theme="dark"] .pl-rz .pl-rz-tp { color: #d6d8ee; }
html[data-theme="dark"] .pl-rz-tp i { color: #f59cbb; }
html[data-theme="dark"] .pl-rz-gir { left: 2px; bottom: 2px; width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: normal; background-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16), 0 6px 16px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-rz-rul { background: linear-gradient(90deg, #3a4886 0, #33407a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 3px 6px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-rz-sc { background-image: repeating-linear-gradient(to top, rgba(255, 255, 255, .45) 0 1px, transparent 1px 5%); }
html[data-theme="dark"] .pl-rz-sc > i::after { background: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .pl-rz-sc b { color: #e3e5f5; }
html[data-theme="dark"] .pl-rz-hrt { color: #f59cbb; text-shadow: 0 1.5px 0 #b93a6e, 0 3px 6px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .pl-rz-ti { mix-blend-mode: normal; background-color: #fff; }
html[data-theme="dark"] .pl-rz .pl-rz-tab:focus-visible,
html[data-theme="dark"] .pl-rz .pl-rz-row:focus-visible,
html[data-theme="dark"] .pl-rz .pl-rz-more:focus-visible,
html[data-theme="dark"] .pl-rz .pl-rz-add:focus-visible { outline-color: #f59cbb; }
html[data-theme="dark"] .pl-rz-chart { background: #1d2757; border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .pl-rz-unit, html[data-theme="dark"] .pl-rz-yl, html[data-theme="dark"] .pl-rz-xl { fill: #c9cbe3; }
html[data-theme="dark"] .pl-rz-gl { stroke: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .pl-rz-gm, html[data-theme="dark"] .pl-rz-gv { stroke: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .pl-rz-base { stroke: rgba(255, 255, 255, .22); }
html[data-theme="dark"] .pl-rz-s1 { stop-color: #f59cbb; stop-opacity: .42; }
html[data-theme="dark"] .pl-rz-s2 { stop-color: #f59cbb; stop-opacity: .05; }
html[data-theme="dark"] .pl-rz-line { stroke: #f59cbb; }
html[data-theme="dark"] .pl-rz-pt { fill: #f59cbb; stroke: #1d2757; }
html[data-theme="dark"] .pl-rz-halo { fill: #f59cbb; opacity: .24; }
html[data-theme="dark"] .pl-rz-ring { stroke: #fff; }
html[data-theme="dark"] .pl-rz-vl { fill: #fff; stroke: #1d2757; }
html[data-theme="dark"] .pl-rz-vl.last { fill: #fff; }
html[data-theme="dark"] .pl-rz-vl.sel { fill: #ffd6e5; }
html[data-theme="dark"] .pl-rz-last { background: #2b3872; border-color: rgba(255, 255, 255, .14); box-shadow: 0 2px 0 #18214a; }
html[data-theme="dark"] .pl-rz-lico { mix-blend-mode: normal; background-color: #fff; }
html[data-theme="dark"] .pl-rz-lk, html[data-theme="dark"] .pl-rz-la { color: #d6d8ee; }
html[data-theme="dark"] .pl-rz .pl-rz-lv, html[data-theme="dark"] .pl-rz-ld { color: #fff; }
html[data-theme="dark"] .pl-rz-row i { background: #f59cbb; }
html[data-theme="dark"] .pl-rz-row em { color: #d6d8ee; }
html[data-theme="dark"] .pl-rz-msg { color: #ffc2d6; }
html[data-theme="dark"] .pl-rz-empty { background: #1d2757; border-color: rgba(245, 156, 187, .4); }
html[data-theme="dark"] .pl-rz-eico { background-color: #fff; background-blend-mode: normal; }
html[data-theme="dark"] .pl-rz-eb { color: #fff; }
html[data-theme="dark"] .pl-rz-et, html[data-theme="dark"] .pl-rz .pl-rz-note { color: #d6d8ee; }
html[data-theme="dark"] #roRoom [data-pl-rz-spot] { outline-color: #f59cbb !important; }

@media (prefers-reduced-motion: reduce) {
  #roRoom [data-pl-rz-spot] { animation: none; }
}

/* ── след скок до старата карта и ДОКАТО СТАЯТА Е ОТВОРЕНА картите се рисуват истински: mega.css:336
      ги държи по 220px „на ужким“ (content-visibility:auto) и целта подскачаше 3412 ↔ 3995 px
      (ag2_rastezh_diag2). Атрибутът се маха от js-а при затваряне на стаята. Като pl-dobavi.css:224. ── */
#roRoom[data-pl-rz-go] section.jr-card { content-visibility: visible !important; }

/* ═══ 20.10 · ЛИНИЙКАТА И ЛАКЪТ ═══
   Мерено (bb20_B_L.log, getComputedStyle): числата по линийката 50…90 бяха 10.5 px — под 11
   (дребните етикети са ≥ 11.5). Линийката е 34 px, числото стига до 17 px, чертите почват от 21 →
   11.5 px се побира. Линийката — същият кремав лак със златна обшивка като таблото (pl-bebe.css 20.10).
   ПЪТ НАЗАД: махни този блок. Предишният файл: dev/proba/bb20_predi_pl-rastezh.css */
#roRoom .pl-rz .pl-rz-sc b { font-size: 11.5px; left: 2px; letter-spacing: -.2px; }
/* числата по осите (4…8, „20.09“) — 11 → 11.5 px; ширината на датите се МЕРИ (уредът .pl-rz-meas
   ползва същия клас), значи разстоянията между тях следват сами */
#roRoom .pl-rz .pl-rz-yl, #roRoom .pl-rz .pl-rz-xl { font-size: 11.5px; }
#roRoom .pl-rz .pl-rz-rul {
  background: radial-gradient(140% 40% at 30% 0%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 70%), linear-gradient(90deg, #fffaf2 0, #f8ecda 55%, #f1e0c6 100%);
  box-shadow: inset 0 0 0 1px rgba(217, 185, 143, .8), inset 1px 0 0 #fff, 0 3px 8px rgba(110, 76, 52, .14);
}
/* нощем — нощната линийка отгоре (ред 368), със златна обшивка; иначе горното (с #roRoom) щеше да я бие */
html[data-theme="dark"] #roRoom .pl-rz .pl-rz-rul {
  background: linear-gradient(90deg, #3a4886 0, #33407a 100%);
  box-shadow: inset 0 0 0 1px rgba(240, 210, 137, .4), 0 3px 6px rgba(0, 0, 0, .3);
}
/* край 20.10 */