/* ============================================================
   Tuto — калькуляторы (/instrumenty/<calc>/)
   Надстройка над article.css: та же мера, типографика, хедер и футер. Здесь только форма
   и блок результата. Токены — из styles.css, своих hex нет.
   Калькулятор считает в браузере: страница ничего не отправляет на сервер.
   ============================================================ */

.calc{margin-top:clamp(1.8rem,4vw,2.4rem);padding:clamp(1.2rem,3.5vw,1.8rem);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1rem;}
.calc-field{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.calc-field--wide{grid-column:1/-1;}
.calc-label{font-family:'Onest',sans-serif;font-size:var(--fs-small);font-weight:600;color:var(--ink);}
.calc-hint{font-family:'Onest',sans-serif;font-size:var(--fs-caption);color:var(--ink-faint);line-height:1.45;}

/* поле ввода: единица измерения справа, внутри рамки */
.calc-input{display:flex;align-items:center;min-height:48px;padding:0 .9rem;border-radius:var(--r-sm);
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--outline);transition:box-shadow .2s var(--ease);}
.calc-input:focus-within{box-shadow:inset 0 0 0 2px var(--accent);}
.calc-input input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:'Onest',sans-serif;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.calc-input span{font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--ink-faint);margin-left:.4rem;}
.calc-input select{flex:1;min-width:0;border:0;background:transparent;outline:0;appearance:none;
  font-family:'Onest',sans-serif;font-size:1rem;color:var(--ink);padding-right:1.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 7px) 55%,calc(100% - 2px) 55%;background-size:5px 5px;background-repeat:no-repeat;}

/* сегменты «женщина / мужчина», «похудеть / держать / набрать» */
.calc-seg{display:flex;gap:.35rem;padding:.3rem;border-radius:var(--r-sm);background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--outline);}
.calc-seg label{flex:1;min-width:0;}
.calc-seg input{position:absolute;opacity:0;pointer-events:none;}
.calc-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 .5rem;
  border-radius:10px;font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--ink-muted);
  text-align:center;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.calc-seg input:checked+span{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm);}
.calc-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;}

.calc-more{margin-top:1rem;}
.calc-more summary{cursor:pointer;font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--ink-muted);
  list-style:none;display:inline-flex;align-items:center;gap:.4rem;}
.calc-more summary::-webkit-details-marker{display:none;}
.calc-more summary::before{content:"+";font-weight:700;color:var(--accent);}
.calc-more[open] summary::before{content:"−";}
.calc-more .calc-grid{margin-top:.9rem;}

.calc-actions{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}
.calc-note{font-family:'Onest',sans-serif;font-size:var(--fs-caption);color:var(--ink-faint);}
.calc-error{margin-top:.8rem;font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--accent);}

/* ---------- результат ---------- */
.calc-out{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--outline);}
.calc-out[hidden]{display:none;}
.calc-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;}
.calc-num{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(2.2rem,1.6rem + 2.4vw,3rem);
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;}
.calc-unit{font-family:'Onest',sans-serif;font-size:var(--fs-body);color:var(--ink-muted);}
.calc-sub{margin-top:.5rem;font-size:var(--fs-body);line-height:1.6;color:var(--ink);}
.calc-macros{margin-top:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;}
.calc-macro{padding:.75rem .8rem;border-radius:var(--r-sm);background:var(--bg);}
.calc-macro b{display:block;font-family:'Sansation',sans-serif;font-size:1.35rem;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.calc-macro small{font-family:'Onest',sans-serif;font-size:var(--fs-caption);color:var(--ink-muted);}
.calc-rows{margin-top:1rem;display:flex;flex-direction:column;gap:.35rem;}
.calc-row{display:flex;justify-content:space-between;gap:1rem;font-family:'Onest',sans-serif;
  font-size:var(--fs-small);color:var(--ink-muted);}
.calc-row[hidden]{display:none;}
.calc-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc-warn{margin-top:1rem;padding:.8rem .9rem;border-radius:var(--r-sm);background:var(--pos-light);
  font-size:var(--fs-small);line-height:1.55;color:var(--ink);}
.calc-warn[hidden]{display:none;}
/* формула с подставленными числами — «открытая формула» из брифа */
.calc-formula{margin-top:1rem;font-family:'Onest',sans-serif;font-size:var(--fs-caption);line-height:1.6;
  color:var(--ink-muted);}
.calc-formula code{font-family:inherit;color:var(--ink);font-variant-numeric:tabular-nums;}

/* таблица в тексте под калькулятором */
.art-table{margin-top:1rem;width:100%;border-collapse:collapse;font-family:'Onest',sans-serif;
  font-size:var(--fs-small);}
.art-table th,.art-table td{padding:.55rem .5rem;text-align:left;border-bottom:1px solid var(--outline);
  vertical-align:top;}
.art-table th{color:var(--ink-muted);font-weight:600;}
.art-table td{color:var(--ink);font-variant-numeric:tabular-nums;}
.art-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width:520px){
  .calc-grid{grid-template-columns:minmax(0,1fr);}
  .calc-macros{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;}
  .calc-macro{padding:.6rem .55rem;}
  .calc-macro b{font-size:1.15rem;}
}

/* числовые колонки таблиц не переносятся — на телефоне «0,7 / 2,0 / 5,1» разваливалось по строкам */
.art-table .num{white-space:nowrap;}

/* ============================================================
   Калькулятор калорий: результат как экран питания в приложении
   (кольцо по долям БЖУ, полосы в цветах приложения), детали — в раскрывашке.
   ============================================================ */
.kc-res{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:1.1rem 1.4rem;}
.kc-donut{grid-column:1;grid-row:1;width:clamp(132px,34vw,156px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--sph-health) 0 var(--p,30%),var(--caution) var(--p,30%) var(--f,60%),var(--sph-meds) var(--f,60%) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));}
.kc-num{grid-column:1;grid-row:1;justify-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;}
.kc-num b{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.1rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.kc-num small{margin-top:.3rem;font-family:'Onest',sans-serif;font-size:var(--fs-caption);color:var(--ink-muted);}
.kc-bars{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:.85rem;}
.kc-bar{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.35rem .6rem;font-family:'Onest',sans-serif;}
.kc-bar span{font-size:var(--fs-small);color:var(--ink);}
.kc-bar b{font-family:'Sansation',sans-serif;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.kc-bar i{grid-column:1/-1;height:8px;border-radius:99px;background:var(--surface-muted);overflow:hidden;}
.kc-bar em{display:block;height:100%;border-radius:inherit;transition:width .5s var(--ease);}
.kc-bar--p em{background:var(--sph-health);} .kc-bar--f em{background:var(--caution);} .kc-bar--c em{background:var(--sph-meds);}
.kc-goal{margin-top:1.1rem;font-family:'Onest',sans-serif;font-size:var(--fs-body);color:var(--ink);}
.calc-how{margin-top:1rem;border-top:1px solid var(--outline);padding-top:.8rem;}
.calc-how summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--ink-muted);}
.calc-how summary::-webkit-details-marker{display:none;}
.calc-how summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);}
.calc-how[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.calc-how .calc-rows{margin-top:.8rem;}
.calc-row[hidden]{display:none;}

/* ---------- блок «что даёт приложение» под любым калькулятором — тёмная плашка на всю колонку ----------
   Общий для всех калькуляторов сайта: калькулятор — прикидка, точность и параметры — в Tuto.
   Карточки справа — с экранов приложения, столбиком с зазором (не пересекаются): --a по центру,
   --b слева, --c справа (на телефоне прячется). Знак Tuto Plus — одним цветом, в правом верхнем углу; карточки ниже него и его не касаются. */
.calc-app{position:relative;margin-top:1.2rem;border-radius:var(--r-lg);overflow:hidden;color:var(--bg);
  background:var(--navy);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;
  box-shadow:0 18px 40px rgba(43,41,56,.22);}
.calc-app-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.5rem,4vw,2.2rem);}
.calc-app-title{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(1.35rem,1.2rem + .6vw,1.55rem);
  line-height:1.15;color:var(--bg);}
.calc-app-title span{color:var(--light-orange);}
.calc-app-list{margin:1.1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem;}
.calc-app-list li{display:flex;align-items:center;gap:.75rem;font-family:'Onest',sans-serif;font-size:var(--fs-small);
  line-height:1.4;color:rgba(239,238,233,.86);}
.calc-app-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(239,238,233,.08);box-shadow:inset 0 0 0 1px rgba(239,238,233,.08);}
.calc-app-ic i{width:18px;height:18px;background:var(--bg);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.calc-app-cta{margin-top:1.5rem;}
.calc-app-cta .btn{min-width:220px;}

.calc-app-art{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:76px 18px 26px 6px;}
/* знак Tuto Plus в углу, цветом кнопки с поправкой на тёмный фон (акцент + 14 % белого, чтобы на глаз совпал с кнопкой); карточки начинаются ниже него и его не касаются */
.calc-spark{position:absolute;top:20px;right:22px;width:40px;height:44px;background:color-mix(in srgb,var(--accent) 86%,#fff);
  -webkit-mask:url(/assets/pay/plus_mark.png) center/contain no-repeat;mask:url(/assets/pay/plus_mark.png) center/contain no-repeat;}
.calc-card{position:relative;width:244px;max-width:100%;background:var(--surface);color:var(--ink);border-radius:16px;
  padding:12px 13px 13px;font-family:'Onest',sans-serif;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.62),inset 0 0 0 1px var(--outline);}
.calc-card--a{align-self:center;transform:rotate(-3deg);}
.calc-card--b{align-self:flex-start;transform:rotate(2deg);}
.calc-card--c{align-self:flex-end;transform:rotate(-2deg);}

/* своя раскладка у каждого калькулятора (как .ps-1…3 на лендинге: разные стороны, сдвиги и наклоны) */
.calc-app--kcal .calc-card--a{align-self:flex-start;margin-left:4%;transform:rotate(-2deg);}
.calc-app--kcal .calc-card--b{align-self:flex-end;transform:rotate(3deg);}
.calc-app--kcal .calc-card--c{align-self:center;margin-right:10%;transform:rotate(-1.5deg);}
.calc-app--vy .calc-card--a{align-self:flex-end;margin-right:2%;transform:rotate(2deg);}
.calc-app--vy .calc-card--b{align-self:flex-start;transform:rotate(-3deg);}
.calc-app--vy .calc-card--c{align-self:center;margin-left:12%;transform:rotate(1.5deg);}

/* карточка в стиле лендинга (.ps): шапка «иконка · название · галочка» и одно молочное поле */
.cc-head{display:flex;align-items:center;gap:10px;}
.cc-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 11%,#fff);}
.cc-ic i{width:18px;height:18px;background:var(--accent);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.cc-head b{flex:1;min-width:0;font-size:.92rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-ck{width:22px;height:22px;flex:none;border-radius:50%;background:var(--sph-health);position:relative;}
.cc-ck::after{content:"";position:absolute;left:8px;top:5px;width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg);}
.cc-field{margin-top:10px;height:38px;border-radius:10px;background:var(--bg);display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:0 10px 0 12px;font-size:.9rem;font-weight:600;font-feature-settings:'tnum';white-space:nowrap;}
.cc-field small{font-size:.78rem;font-weight:500;color:var(--ink-muted);}
.cc-field .pos{color:#5E8A1B;} .cc-field .acc{color:var(--accent);}
.cc-bar{margin-top:9px;height:6px;border-radius:9px;background:var(--surface-muted);overflow:hidden;display:flex;}
.cc-bar em{display:block;height:100%;}
.cc-meter{display:flex;gap:3px;}
.cc-meter i{width:14px;height:6px;border-radius:3px;background:var(--surface-muted);}
.cc-meter i.on{background:var(--sph-health);}
.cc-chips{display:flex;gap:4px;}
.cc-chips em{font-style:normal;font-size:.68rem;font-weight:700;border-radius:99px;padding:3px 6px;}
.cc-chips .p{background:var(--pos-light);color:#5E8A1B;} .cc-chips .f{background:#FBF0D2;color:#A67C0C;}
.cc-chips .c{background:var(--neg-light);color:#B8394A;}

@media (max-width:620px){
  .calc-app{grid-template-columns:minmax(0,1fr);}
  .calc-app-art{order:-1;padding:30px 18px 30px;}
  .calc-spark{top:16px;right:16px;width:32px;height:35px;}
  .calc-card--b{align-self:flex-end;}
  .calc-card--c{display:none;}
  /* верхняя карточка не должна заходить под знак в правом углу */
  .calc-app--vy .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--vy .calc-card--b{align-self:flex-end;}
    .calc-app-text{padding-top:0;}
  .calc-app-cta{width:100%;}
  .calc-app-cta .btn{width:100%;min-width:0;}
}

/* ============================================================
   Шаблон для скачивания внутри статьи (.art-tpl) — Ш1 «трекер привычек», дальше Ш2/Ш3.
   Белая карточка сразу под первым абзацем: превью листа слева, что внутри и кнопка справа;
   на телефоне превью сверху по центру, кнопка на всю ширину. Превью — портрет А4 800×1131,
   с width/height и loading="lazy". Чужие блоки выше не трогает.
   ============================================================ */
.art-tpl{margin-top:clamp(1.8rem,4vw,2.4rem);padding:clamp(1.1rem,3vw,1.5rem);background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.1rem,3vw,1.6rem);align-items:center;}
.art-tpl-img{display:block;border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--outline),0 8px 20px -10px rgba(43,41,56,.3);}
.art-tpl-img img{display:block;width:100%;height:auto;}
.art-tpl-text{min-width:0;}
.art-tpl-title{font-family:'Sansation',sans-serif;font-weight:700;font-size:var(--fs-h3);line-height:1.2;color:var(--ink);}
.art-tpl-meta{margin-top:.35rem;font-family:'Onest',sans-serif;font-size:var(--fs-small);color:var(--ink-muted);}
.art-tpl-list{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem;}
.art-tpl-list li{position:relative;padding-left:1.1rem;font-family:'Onest',sans-serif;font-size:var(--fs-small);
  line-height:1.5;color:var(--ink);}
.art-tpl-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--accent);}
.art-tpl .btn{margin-top:1.2rem;}
@media (max-width:520px){
  .art-tpl{grid-template-columns:minmax(0,1fr);}
  .art-tpl-img{width:min(220px,70%);margin:0 auto;}
  .art-tpl .btn{width:100%;}
}

/* ============================================================
   Правило 50/30/20 (blog/pravilo-50-30-20): результат — полоса из трёх долей и три плитки
   в цветах сфер лендинга (обязательное — финансы, желания — задачи, сбережения — здоровье).
   На телефоне плитки становятся строками «доля · сумма». Блок приложения — раскладка calc-app--budget.
   ============================================================ */
.bg-strip{display:flex;gap:3px;height:12px;}
.bg-strip i{display:block;height:100%;}
.bg-strip i:first-child{border-radius:99px 0 0 99px;}
.bg-strip i:last-child{border-radius:0 99px 99px 0;}
.bg-strip .bg-n{flex:50;background:var(--sph-finance);}
.bg-strip .bg-w{flex:30;background:var(--sph-tasks);}
.bg-strip .bg-s{flex:20;background:var(--sph-health);}
.bg-tiles{margin-top:1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;}
.bg-tile{min-width:0;display:flex;flex-direction:column;gap:.35rem;padding:.8rem .85rem;border-radius:var(--r-sm);
  background:var(--bg);}
.bg-tile span{display:flex;align-items:center;gap:.4rem;font-family:'Onest',sans-serif;font-size:var(--fs-small);
  color:var(--ink-muted);}
.bg-tile span::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--bg-dot);}
.bg-tile small{font-size:var(--fs-caption);color:var(--ink-faint);}
.bg-tile b{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.15;
  color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.bg-tile--n{--bg-dot:var(--sph-finance);}
.bg-tile--w{--bg-dot:var(--sph-tasks);}
.bg-tile--s{--bg-dot:var(--sph-health);}
.bg-line{margin-top:1rem;font-size:var(--fs-body);line-height:1.6;color:var(--ink);}
@media (max-width:520px){
  .bg-tiles{grid-template-columns:minmax(0,1fr);gap:.4rem;}
  .bg-tile{flex-direction:row;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.65rem .8rem;}
  .bg-tile b{font-size:1.15rem;text-align:right;}
}

/* карточки: «Свободно» сдвинута к центру, лимит — к правому краю, операция — к левому;
   на телефоне верхняя уходит влево, чтобы не заходить под знак Plus в углу */
.calc-app--budget .calc-card--a{align-self:center;margin-left:7%;transform:rotate(-2.5deg);}
.calc-app--budget .calc-card--b{align-self:flex-end;transform:rotate(2deg);}
.calc-app--budget .calc-card--c{align-self:flex-start;transform:rotate(-1deg);}
.calc-app--budget .cc-bar em{background:var(--sph-finance);}
@media (max-width:620px){
  .calc-app--budget .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--budget .calc-card--b{align-self:flex-end;}
}

/* ============================================================
   Блоки приложения в статьях — у каждой темы свой раздел (раскладки карточек calc-app--<тема>).
   Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2 и скилл site-pages. Каждая статья — своя раскладка.
   ============================================================ */
/* == блоки: финансы-1 (подписки, долги) == */
/* подписки: сводка справа с отступом, «возможная подписка» ближе к центру, смена цены — у левого края;
   на телефоне сводка уходит влево, чтобы не заходить под знак Plus */
.calc-app--subs .calc-card--a{align-self:flex-end;margin-right:6%;transform:rotate(-1.5deg);}
.calc-app--subs .calc-card--b{align-self:center;margin-right:12%;transform:rotate(2.5deg);}
.calc-app--subs .calc-card--c{align-self:flex-start;margin-left:3%;transform:rotate(-2.5deg);}
/* долги: кредит по центру со сдвигом вправо, срок закрытия — у левого края, платёж — справа */
.calc-app--debts .calc-card--a{align-self:center;margin-left:10%;transform:rotate(2deg);}
.calc-app--debts .calc-card--b{align-self:flex-start;transform:rotate(-2.5deg);}
.calc-app--debts .calc-card--c{align-self:flex-end;margin-right:4%;transform:rotate(1.5deg);}
@media (max-width:620px){
  .calc-app--subs .calc-card--a,.calc-app--debts .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--subs .calc-card--b,.calc-app--debts .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /финансы-1 == */
/* == блоки: финансы-2 (копилка, как начать копить, 50/30/20) == */
/* копилка (blog/pochemu-kopilka-rabotaet): копилка левее центра, взнос у правого края, задача у левого;
   на телефоне верхняя уходит влево, чтобы не заходить под знак Plus */
.calc-app--kopilka .calc-card--a{align-self:center;margin-right:10%;transform:rotate(2deg);}
.calc-app--kopilka .calc-card--b{align-self:flex-end;margin-right:3%;transform:rotate(-2.5deg);}
.calc-app--kopilka .calc-card--c{align-self:flex-start;margin-left:5%;transform:rotate(1.5deg);}
/* подушка (blog/kak-nachat-kopit): копилка у правого края, прогноз правее центра, проценты у левого */
.calc-app--kopit .calc-card--a{align-self:flex-end;margin-right:4%;transform:rotate(-2deg);}
.calc-app--kopit .calc-card--b{align-self:center;margin-left:14%;transform:rotate(2.5deg);}
.calc-app--kopit .calc-card--c{align-self:flex-start;transform:rotate(-1.5deg);}
@media (max-width:620px){
  .calc-app--kopilka .calc-card--a,.calc-app--kopit .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--kopilka .calc-card--b,.calc-app--kopit .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /финансы-2 == */
/* == блоки: питание и активность (хочется есть, борщ, шаги) == */
/* «Хочется есть»: «Питание сегодня» сдвинута к центру, еда по фото — к левому краю, цикл — к правому */
.calc-app--hunger .calc-card--a{align-self:center;margin-left:12%;transform:rotate(-1.5deg);}
.calc-app--hunger .calc-card--b{align-self:flex-start;transform:rotate(2.5deg);}
.calc-app--hunger .calc-card--c{align-self:flex-end;margin-right:4%;transform:rotate(-2.5deg);}
/* Борщ: тарелка слева со сдвигом, комментарий — справа, сохранённый приём — снова слева (лесенка) */
.calc-app--borsch .calc-card--a{align-self:flex-start;margin-left:8%;transform:rotate(2deg);}
.calc-app--borsch .calc-card--b{align-self:flex-end;margin-right:3%;transform:rotate(-2deg);}
.calc-app--borsch .calc-card--c{align-self:flex-start;margin-left:2%;transform:rotate(1.5deg);}
/* Шаги: шаги справа, челлендж — слева со сдвигом, цель — справа */
.calc-app--steps .calc-card--a{align-self:flex-end;margin-right:6%;transform:rotate(-2deg);}
.calc-app--steps .calc-card--b{align-self:flex-start;margin-left:10%;transform:rotate(2.5deg);}
.calc-app--steps .calc-card--c{align-self:flex-end;transform:rotate(-1deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus в правом углу не заходит */
  .calc-app--hunger .calc-card--a,.calc-app--borsch .calc-card--a,.calc-app--steps .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--hunger .calc-card--b,.calc-app--borsch .calc-card--b,.calc-app--steps .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /питание == */
/* == блоки: сон и анализы (сон, анализ крови, чекап) == */
/* сон: «Прошлая ночь» — ближе к центру со сдвигом влево, «Что помешало» — к левому краю, «Баланс сна» — к правому */
.calc-app--sleep .calc-card--a{align-self:center;margin-right:12%;transform:rotate(2deg);}
.calc-app--sleep .calc-card--b{align-self:flex-start;transform:rotate(-2.5deg);}
.calc-app--sleep .calc-card--c{align-self:flex-end;transform:rotate(1deg);}
/* анализ крови: PDF — со сдвигом вправо от центра, витамин D — у левого края, глюкоза — у правого с отступом */
.calc-app--labs .calc-card--a{align-self:center;margin-left:14%;transform:rotate(-1.5deg);}
.calc-app--labs .calc-card--b{align-self:flex-start;transform:rotate(2.5deg);}
.calc-app--labs .calc-card--c{align-self:flex-end;margin-right:4%;transform:rotate(-2.5deg);}
/* чекап: история — у правого края, ТТГ — левее центра, новый результат — у левого края с отступом */
.calc-app--checkup .calc-card--a{align-self:flex-end;transform:rotate(-2deg);}
.calc-app--checkup .calc-card--b{align-self:center;margin-right:16%;transform:rotate(1.5deg);}
.calc-app--checkup .calc-card--c{align-self:flex-start;margin-left:6%;transform:rotate(-1deg);}
@media (max-width:620px){
  /* верхняя карточка уходит влево, чтобы не заходить под знак Plus в правом углу */
  .calc-app--sleep .calc-card--a,.calc-app--labs .calc-card--a,.calc-app--checkup .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--sleep .calc-card--b,.calc-app--labs .calc-card--b,.calc-app--checkup .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /сон == */
/* == блоки: привычки и продуктивность (21 день, трекер, курение, не успеваю, мышление, 10 000 часов) == */
/* шесть раскладок: у каждой статьи свои стороны, сдвиги и наклоны. На ПК колонка карточек (~231 px) уже карточки
   (244 px, max-width:100%), поэтому сдвиги там малые: вправо до ~5 % (в пределах отступа 18 px), от правого края
   влево — до 1 %, иначе карточка уйдёт за край блока или в колонку текста. На телефоне (≤620) запас ~73 px:
   верхняя карточка всегда слева — правый верхний угол занят знаком Plus, вторая вправо или к центру, третья прячется */
.calc-app--habit21 .calc-card--a{align-self:center;margin-right:4%;transform:rotate(-1.5deg);}
.calc-app--habit21 .calc-card--b{align-self:flex-end;transform:rotate(2.5deg);}
.calc-app--habit21 .calc-card--c{align-self:flex-start;margin-left:5%;transform:rotate(-2deg);}
.calc-app--tracker .calc-card--a{align-self:flex-start;margin-left:5%;transform:rotate(2deg);}
.calc-app--tracker .calc-card--b{align-self:flex-end;margin-right:1%;transform:rotate(-2deg);}
.calc-app--tracker .calc-card--c{align-self:center;margin-left:8%;transform:rotate(1deg);}
.calc-app--quit .calc-card--a{align-self:flex-start;transform:rotate(-3deg);}
.calc-app--quit .calc-card--b{align-self:center;margin-left:8%;transform:rotate(1.5deg);}
.calc-app--quit .calc-card--c{align-self:flex-end;transform:rotate(3deg);}
.calc-app--tasks .calc-card--a{align-self:flex-end;margin-right:1%;transform:rotate(-2deg);}
.calc-app--tasks .calc-card--b{align-self:flex-start;margin-left:3%;transform:rotate(3deg);}
.calc-app--tasks .calc-card--c{align-self:center;margin-right:4%;transform:rotate(-1deg);}
.calc-app--growth .calc-card--a{align-self:center;margin-left:8%;transform:rotate(2.5deg);}
.calc-app--growth .calc-card--b{align-self:flex-start;transform:rotate(-1.5deg);}
.calc-app--growth .calc-card--c{align-self:flex-end;margin-right:1%;transform:rotate(2deg);}
.calc-app--practice .calc-card--a{align-self:flex-start;margin-left:5%;transform:rotate(-1deg);}
.calc-app--practice .calc-card--b{align-self:flex-end;transform:rotate(2deg);}
.calc-app--practice .calc-card--c{align-self:flex-start;margin-left:2%;transform:rotate(-3deg);}
@media (max-width:620px){
  .calc-app--habit21 .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--habit21 .calc-card--b{align-self:flex-end;}
  .calc-app--tracker .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--tracker .calc-card--b{align-self:flex-end;margin-right:0;}
  .calc-app--quit .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--quit .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--tasks .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--tasks .calc-card--b{align-self:center;margin:0 0 0 12%;}
  .calc-app--growth .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--growth .calc-card--b{align-self:flex-end;margin-right:3%;}
  .calc-app--practice .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--practice .calc-card--b{align-self:center;margin-left:14%;}
}
/* == /привычки == */
/* == калькулятор: ИМТ (У1) == */
/* «До цели» — к левому краю, «Вес за месяц» — к правому, норма калорий — ближе к центру */
.calc-app--imt .calc-card--a{align-self:flex-start;margin-left:6%;transform:rotate(1.5deg);}
.calc-app--imt .calc-card--b{align-self:flex-end;margin-right:2%;transform:rotate(-2.5deg);}
.calc-app--imt .calc-card--c{align-self:center;margin-left:4%;transform:rotate(2deg);}
@media (max-width:620px){
  .calc-app--imt .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--imt .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /ИМТ == */
/* == калькулятор: сон (У3) == */
/* «Время сна» — у правого края, «Засыпание» — у левого с небольшим отступом, «Баланс сна» — правее центра
   (у статьи о недосыпе .calc-app--sleep порядок другой: центр → лево → право) */
.calc-app--sleepcalc .calc-card--a{align-self:flex-end;transform:rotate(-2deg);}
.calc-app--sleepcalc .calc-card--b{align-self:flex-start;margin-left:3%;transform:rotate(2.5deg);}
.calc-app--sleepcalc .calc-card--c{align-self:center;margin-left:6%;transform:rotate(-1deg);}
@media (max-width:620px){
  /* верхняя карточка уходит влево, чтобы не заходить под знак Plus в правом углу */
  .calc-app--sleepcalc .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--sleepcalc .calc-card--b{align-self:flex-end;margin:0;}
}
/* == /калькулятор сна == */
/* == калькулятор: сложный процент (У5) == */
/* поля другого режима прячутся атрибутом hidden: .calc-field{display:flex} его перебивает */
.calc-field[hidden]{display:none;}
/* «по годам» в «Как посчитали» — отдельной группой под итогом */
.cp-years{margin-top:.8rem;padding-top:.7rem;border-top:1px dashed var(--outline);}
.cp-years:empty{display:none;}
.calc-formula sup{font-size:.72em;line-height:0;}
/* блок: счёт правее центра, цель к сроку у левого края, прогноз у правого;
   на телефоне верхняя уходит влево, чтобы не заходить под знак Plus */
.calc-app--compound .calc-card--a{align-self:center;margin-left:8%;transform:rotate(-1.5deg);}
.calc-app--compound .calc-card--b{align-self:flex-start;transform:rotate(2.5deg);}
.calc-app--compound .calc-card--c{align-self:flex-end;margin-right:3%;transform:rotate(-2.5deg);}
@media (max-width:620px){
  .calc-app--compound .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--compound .calc-card--b{align-self:flex-end;}
}
/* == /сложный процент == */
/* == блоки: планирование (планер Ш2, цели на год Л1) == */
/* две раскладки, которых ещё нет в tools.css: у планера «право — центр — право», у целей «лево — центр — лево».
   На ПК колонка карточек (~231 px) уже карточки, поэтому сдвиги малые, как в разделе «привычки».
   На телефоне (≤620) верхняя карточка слева — правый верхний угол занят знаком Plus, вторая уходит вправо или к центру, третья прячется */
/* планер (instrumenty/planer): задача с напоминанием — у правого края, «Просрочено» — к центру со сдвигом, папка — снова справа */
.calc-app--planner .calc-card--a{align-self:flex-end;margin-right:1%;transform:rotate(2.5deg);}
.calc-app--planner .calc-card--b{align-self:center;margin-left:4%;transform:rotate(-2deg);}
.calc-app--planner .calc-card--c{align-self:flex-end;transform:rotate(1.5deg);}
/* цели (blog/celi-na-god): заметка «Цель» — у левого края с отступом, челлендж марта — к центру, апрель — снова слева */
.calc-app--goals .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-2.5deg);}
.calc-app--goals .calc-card--b{align-self:center;margin-left:5%;transform:rotate(1.5deg);}
.calc-app--goals .calc-card--c{align-self:flex-start;margin-left:1%;transform:rotate(-1deg);}
@media (max-width:620px){
  .calc-app--planner .calc-card--a{align-self:flex-start;margin:0 0 0 6%;}
  .calc-app--planner .calc-card--b{align-self:flex-end;margin:0 5% 0 0;}
  .calc-app--goals .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--goals .calc-card--b{align-self:center;margin:0 0 0 10%;}
}
/* == /планирование == */
/* == блоки: калорийность блюд-1 (салат из огурцов и помидоров, оливье, пицца, шаурма) == */
/* Салат (blog/kaloriynost-salata-iz-ogurcov-i-pomidorov): комментарий к фото у правого края, салат левее центра,
   «Мои приёмы» — снова у правого края (правая лесенка) */
.calc-app--salad .calc-card--a{align-self:flex-end;margin-right:8%;transform:rotate(1.5deg);}
.calc-app--salad .calc-card--b{align-self:center;margin-right:10%;transform:rotate(-2.5deg);}
.calc-app--salad .calc-card--c{align-self:flex-end;margin-right:2%;transform:rotate(2deg);}
/* Оливье (blog/kaloriynost-olive): тарелка по центру со сдвигом вправо, комментарий у левого края,
   порция — по центру со сдвигом влево */
.calc-app--olivier .calc-card--a{align-self:center;margin-left:6%;transform:rotate(-2.5deg);}
.calc-app--olivier .calc-card--b{align-self:flex-start;margin-left:2%;transform:rotate(1.5deg);}
.calc-app--olivier .calc-card--c{align-self:center;margin-right:8%;transform:rotate(-1deg);}
/* Пицца (blog/kaloriynost-piccy): два куска у левого края, комментарий правее центра, «Питание сегодня» — слева со сдвигом */
.calc-app--pizza .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-1.5deg);}
.calc-app--pizza .calc-card--b{align-self:center;margin-left:12%;transform:rotate(3deg);}
.calc-app--pizza .calc-card--c{align-self:flex-start;margin-left:7%;transform:rotate(-2deg);}
/* Шаурма (blog/kaloriynost-shaurmy): запись словами по центру со сдвигом влево, результат у правого края,
   сохранённый приём — по центру со сдвигом вправо */
.calc-app--shawarma .calc-card--a{align-self:center;margin-right:6%;transform:rotate(2.5deg);}
.calc-app--shawarma .calc-card--b{align-self:flex-end;margin-right:5%;transform:rotate(-1.5deg);}
.calc-app--shawarma .calc-card--c{align-self:center;margin-left:10%;transform:rotate(1deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus в правом углу не заходит; вторая — вправо или к центру */
  .calc-app--salad .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--salad .calc-card--b{align-self:flex-end;margin:0;}
  .calc-app--olivier .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--olivier .calc-card--b{align-self:center;margin:0 0 0 10%;}
  .calc-app--pizza .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--pizza .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--shawarma .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--shawarma .calc-card--b{align-self:center;margin:0 0 0 14%;}
}
/* == /калорийность блюд-1 == */
/* == блоки: деньги-3 (куда уходят деньги, выписка в PDF, таблица доходов и расходов) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. На ПК колонка карточек уже карточки, поэтому сдвиги малые;
   на телефоне (≤620) верхняя карточка слева — правый верхний угол занят знаком Plus, вторая уходит вправо или к центру,
   третья прячется (общее правило .calc-card--c). Порядки сторон не повторяют занятые: право-центр-право, лево-центр-лево,
   центр-право-центр. */

/* куда уходят деньги (blog/kuda-uhodyat-dengi): «Главный рост» у правого края, «Самый дорогой день» левее центра,
   «В среднем за день» снова у правого края */
.calc-app--leaks .calc-card--a{align-self:flex-end;margin-right:3%;transform:rotate(2deg);}
.calc-app--leaks .calc-card--b{align-self:center;margin-right:10%;transform:rotate(-2.5deg);}
.calc-app--leaks .calc-card--c{align-self:flex-end;transform:rotate(1deg);}

/* выписка в PDF (blog/kak-skachat-vypisku-pdf): загруженная выписка у левого края, проверка операций правее центра,
   вторая выписка с пропущенными дублями — снова у левого края с отступом */
.calc-app--statement .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-1deg);}
.calc-app--statement .calc-card--b{align-self:center;margin-left:12%;transform:rotate(2deg);}
.calc-app--statement .calc-card--c{align-self:flex-start;margin-left:6%;transform:rotate(-2.5deg);}

/* таблица доходов и расходов (instrumenty/tablica-dohodov-i-rashodov): «Потрачено» чуть правее центра,
   лимит «Продукты» у правого края, перерасход «Рестораны и кафе» левее центра */
.calc-app--ledger .calc-card--a{align-self:center;margin-left:5%;transform:rotate(1.5deg);}
.calc-app--ledger .calc-card--b{align-self:flex-end;transform:rotate(-3deg);}
.calc-app--ledger .calc-card--c{align-self:center;margin-right:8%;transform:rotate(2.5deg);}

@media (max-width:620px){
  .calc-app--leaks .calc-card--a{align-self:flex-start;margin:0 0 0 8%;}
  .calc-app--leaks .calc-card--b{align-self:flex-end;margin:0 6% 0 0;}
  .calc-app--statement .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--statement .calc-card--b{align-self:center;margin:0 0 0 18%;}
  .calc-app--ledger .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--ledger .calc-card--b{align-self:flex-end;margin:0 4% 0 0;}
}
/* == /деньги-3 == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */

/* == шаблон с двумя кнопками (.art-tpl--two, instrumenty/tablica-dohodov-i-rashodov): Excel и PDF рядом,
   на телефоне — друг под другом во всю ширину (ширину даёт общее правило .art-tpl .btn) == */
.art-tpl--two .btn + .btn{margin-left:.6rem;}
@media (max-width:520px){
  .art-tpl--two .btn + .btn{margin-left:0;margin-top:.6rem;}
}
/* == /шаблон с двумя кнопками == */
/* == блоки: подписки-2 (как отключить, вернуть деньги, незнакомое списание) == */
/* три раскладки, которых ещё нет в tools.css: у каждой своя последовательность сторон и наклонов.
   На ПК колонка карточек уже карточки, поэтому сдвиги малые (до ~10 %); на телефоне (≤620) верхняя карточка
   всегда слева — правый верхний угол занят знаком Plus, вторая уходит вправо или к центру, третья прячется */
/* как отключить (blog/kak-otklyuchit-podpisku): «Регулярные платежи» у левого края, «возможно отменена» — у правого,
   годовая «Книги» — тоже справа, но со сдвигом к центру (лесенка лево → право → правее центра) */
.calc-app--unsub .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(1deg);}
.calc-app--unsub .calc-card--b{align-self:flex-end;margin-right:1%;transform:rotate(-3deg);}
.calc-app--unsub .calc-card--c{align-self:flex-end;margin-right:9%;transform:rotate(2deg);}
/* вернуть деньги (blog/vernut-dengi-za-podpisku): итог по подписке справа, одно списание — правее центра,
   смена цены — у левого края */
.calc-app--refund .calc-card--a{align-self:flex-end;margin-right:1%;transform:rotate(1.5deg);}
.calc-app--refund .calc-card--b{align-self:flex-end;margin-right:10%;transform:rotate(-2deg);}
.calc-app--refund .calc-card--c{align-self:flex-start;margin-left:4%;transform:rotate(2.5deg);}
/* незнакомое списание (blog/neznakomoe-spisanie-s-karty): выписка и «Возможные подписки» — обе у центра,
   но со сдвигами в разные стороны (зигзаг), годовая сумма — у левого края */
.calc-app--unknown .calc-card--a{align-self:center;margin-left:6%;transform:rotate(-2.5deg);}
.calc-app--unknown .calc-card--b{align-self:center;margin-right:10%;transform:rotate(1.5deg);}
.calc-app--unknown .calc-card--c{align-self:flex-start;margin-left:1%;transform:rotate(-1deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus не заходит */
  .calc-app--unsub .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--unsub .calc-card--b{align-self:flex-end;margin:0 1% 0 0;}
  .calc-app--refund .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--refund .calc-card--b{align-self:center;margin:0 0 0 10%;}
  .calc-app--unknown .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--unknown .calc-card--b{align-self:flex-end;margin:0 3% 0 0;}
}
/* == /подписки-2 == */
/* == блоки: вычеты-2 (справка об оплате медуслуг, чеки за лекарства, вычет за обучение) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. Порядки сторон не повторяют занятые: право-лево-лево, центр-центр-право,
   лево-лево-право. На ПК сдвиги малые (колонка карточек уже карточки); на телефоне (≤620) верхняя карточка слева —
   правый верхний угол занят знаком Plus, вторая уходит вправо или к центру, третья прячется (общее правило .calc-card--c). */

/* справка об оплате медуслуг (blog/spravka-ob-oplate-medicinskih-uslug): «Учтено» у правого края,
   «Возможно подойдёт» у левого со сдвигом, клиника с документом — снова слева, ближе к краю */
.calc-app--spravka .calc-card--a{align-self:flex-end;margin-right:2%;transform:rotate(-2.5deg);}
.calc-app--spravka .calc-card--b{align-self:flex-start;margin-left:8%;transform:rotate(1.5deg);}
.calc-app--spravka .calc-card--c{align-self:flex-start;margin-left:2%;transform:rotate(-1deg);}

/* чеки за лекарства (blog/cheki-dlya-vycheta-za-lekarstva): аптека с документом правее центра,
   «Налоговый вычет» левее центра, аптека без чека — у правого края */
.calc-app--receipts .calc-card--a{align-self:center;margin-left:6%;transform:rotate(-2deg);}
.calc-app--receipts .calc-card--b{align-self:center;margin-right:12%;transform:rotate(2.5deg);}
.calc-app--receipts .calc-card--c{align-self:flex-end;transform:rotate(-1.5deg);}

/* вычет за обучение (blog/nalogovyy-vychet-za-obuchenie): январская карточка у левого края,
   автошкола левее со сдвигом, музыкальная школа — у правого края */
.calc-app--study .calc-card--a{align-self:flex-start;margin-left:2%;transform:rotate(1.5deg);}
.calc-app--study .calc-card--b{align-self:flex-start;margin-left:11%;transform:rotate(-2deg);}
.calc-app--study .calc-card--c{align-self:flex-end;margin-right:3%;transform:rotate(2.5deg);}

@media (max-width:620px){
  .calc-app--spravka .calc-card--a{align-self:flex-start;margin:0 0 0 6%;}
  .calc-app--spravka .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--receipts .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--receipts .calc-card--b{align-self:center;margin:0 0 0 20%;}
  .calc-app--study .calc-card--a{align-self:flex-start;margin:0 0 0 10%;}
  .calc-app--study .calc-card--b{align-self:flex-end;margin:0 8% 0 0;}
}
/* == /вычеты-2 == */
/* == блоки: калорийность блюд-1 (салат из огурцов и помидоров, оливье, пицца, шаурма, плов, пельмени, макароны, гречка с курицей) == */
/* Салат (blog/kaloriynost-salata-iz-ogurcov-i-pomidorov): комментарий к фото у правого края, салат левее центра,
   «Мои приёмы» — снова у правого края (правая лесенка) */
.calc-app--salad .calc-card--a{align-self:flex-end;margin-right:8%;transform:rotate(1.5deg);}
.calc-app--salad .calc-card--b{align-self:center;margin-right:10%;transform:rotate(-2.5deg);}
.calc-app--salad .calc-card--c{align-self:flex-end;margin-right:2%;transform:rotate(2deg);}
/* Оливье (blog/kaloriynost-olive): тарелка по центру со сдвигом вправо, комментарий у левого края,
   порция — по центру со сдвигом влево */
.calc-app--olivier .calc-card--a{align-self:center;margin-left:6%;transform:rotate(-2.5deg);}
.calc-app--olivier .calc-card--b{align-self:flex-start;margin-left:2%;transform:rotate(1.5deg);}
.calc-app--olivier .calc-card--c{align-self:center;margin-right:8%;transform:rotate(-1deg);}
/* Пицца (blog/kaloriynost-piccy): два куска у левого края, комментарий правее центра, «Питание сегодня» — слева со сдвигом */
.calc-app--pizza .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-1.5deg);}
.calc-app--pizza .calc-card--b{align-self:center;margin-left:12%;transform:rotate(3deg);}
.calc-app--pizza .calc-card--c{align-self:flex-start;margin-left:7%;transform:rotate(-2deg);}
/* Шаурма (blog/kaloriynost-shaurmy): запись словами по центру со сдвигом влево, результат у правого края,
   сохранённый приём — по центру со сдвигом вправо */
.calc-app--shawarma .calc-card--a{align-self:center;margin-right:6%;transform:rotate(2.5deg);}
.calc-app--shawarma .calc-card--b{align-self:flex-end;margin-right:5%;transform:rotate(-1.5deg);}
.calc-app--shawarma .calc-card--c{align-self:center;margin-left:10%;transform:rotate(1deg);}
/* Плов (blog/kaloriynost-plova): тарелка у правого края, порция — у левого со сдвигом,
   «Питание» — ещё левее со сдвигом к центру (спуск справа налево) */
.calc-app--plov .calc-card--a{align-self:flex-end;margin-right:5%;transform:rotate(-1deg);}
.calc-app--plov .calc-card--b{align-self:flex-start;margin-left:6%;transform:rotate(2.5deg);}
.calc-app--plov .calc-card--c{align-self:flex-start;margin-left:14%;transform:rotate(-2deg);}
/* Пельмени (blog/kaloriynost-pelmeney): запись словами у левого края со сдвигом, результат и приём — у правого */
.calc-app--pelmeni .calc-card--a{align-self:flex-start;margin-left:9%;transform:rotate(2deg);}
.calc-app--pelmeni .calc-card--b{align-self:flex-end;margin-right:7%;transform:rotate(-2.5deg);}
.calc-app--pelmeni .calc-card--c{align-self:flex-end;margin-right:1%;transform:rotate(1.5deg);}
/* Макароны (blog/kaloriynost-makaron): комментарий и тарелка — у левого края лесенкой, «Избранное» — по центру со сдвигом влево */
.calc-app--pasta .calc-card--a{align-self:flex-start;margin-left:2%;transform:rotate(-2.5deg);}
.calc-app--pasta .calc-card--b{align-self:flex-start;margin-left:12%;transform:rotate(1deg);}
.calc-app--pasta .calc-card--c{align-self:center;margin-right:6%;transform:rotate(2deg);}
/* Гречка с курицей (blog/kaloriynost-grechki-s-kuricey): приём и тарелка — у правого края, белки — по центру со сдвигом вправо */
.calc-app--buckwheat .calc-card--a{align-self:flex-end;margin-right:10%;transform:rotate(2deg);}
.calc-app--buckwheat .calc-card--b{align-self:flex-end;transform:rotate(-1.5deg);}
.calc-app--buckwheat .calc-card--c{align-self:center;margin-left:4%;transform:rotate(-2.5deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus в правом углу не заходит; вторая — вправо или к центру */
  .calc-app--plov .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--plov .calc-card--b{align-self:center;margin:0 0 0 12%;}
  .calc-app--pelmeni .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--pelmeni .calc-card--b{align-self:flex-end;margin:0 3% 0 0;}
  .calc-app--pasta .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--pasta .calc-card--b{align-self:flex-end;margin:0 1% 0 0;}
  .calc-app--buckwheat .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--buckwheat .calc-card--b{align-self:center;margin:0 0 0 8%;}
  .calc-app--salad .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--salad .calc-card--b{align-self:flex-end;margin:0;}
  .calc-app--olivier .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--olivier .calc-card--b{align-self:center;margin:0 0 0 10%;}
  .calc-app--pizza .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--pizza .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--shawarma .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--shawarma .calc-card--b{align-self:center;margin:0 0 0 14%;}
}
/* == /калорийность блюд-1 == */
/* == блоки: питание-2 (калории по фото, калории без весов, где больше белка) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. Порядки сторон не повторяют занятые раскладки: лево-право-центр
   со своими сдвигами, право-право-лево, центр-лево-центр. На ПК сдвиги малые (колонка карточек уже карточки);
   на телефоне (≤620) верхняя карточка слева — правый верхний угол занят знаком Plus, вторая вправо или к центру,
   третья прячется (общее правило .calc-card--c). */

/* калории по фото (/kalorii-po-foto/): «Обед +520 ккал» у левого края с отступом, «Калории» у правого,
   «Первый разбор еды» — левее центра */
.calc-app--photo .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-2.5deg);}
.calc-app--photo .calc-card--b{align-self:flex-end;margin-right:4%;transform:rotate(1deg);}
.calc-app--photo .calc-card--c{align-self:center;margin-right:9%;transform:rotate(-1.5deg);}

/* калории без весов (blog/kak-schitat-kalorii-bez-vesov): вес у правого края, ручной ввод — тоже справа
   с отступом, «Норма набрана» — у левого края */
.calc-app--noscale .calc-card--a{align-self:flex-end;transform:rotate(1.5deg);}
.calc-app--noscale .calc-card--b{align-self:flex-end;margin-right:7%;transform:rotate(-2.5deg);}
.calc-app--noscale .calc-card--c{align-self:flex-start;margin-left:4%;transform:rotate(2deg);}

/* где больше белка (blog/gde-bolshe-belka): норма КБЖУ по центру, творог у левого края,
   белки — правее центра */
.calc-app--protein .calc-card--a{align-self:center;margin-right:3%;transform:rotate(-1deg);}
.calc-app--protein .calc-card--b{align-self:flex-start;margin-left:1%;transform:rotate(2.5deg);}
.calc-app--protein .calc-card--c{align-self:center;margin-left:10%;transform:rotate(-2deg);}

@media (max-width:620px){
  .calc-app--photo .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--photo .calc-card--b{align-self:flex-end;margin:0 3% 0 0;}
  .calc-app--noscale .calc-card--a{align-self:flex-start;margin:0 0 0 7%;}
  .calc-app--noscale .calc-card--b{align-self:center;margin:0 0 0 16%;}
  .calc-app--protein .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--protein .calc-card--b{align-self:flex-end;margin:0 5% 0 0;}
}
/* == /питание-2 == */
/* == блоки: калорийность блюд-1 (салат, оливье, пицца, шаурма, плов, пельмени, макароны, гречка с курицей, куриный суп, сырники, роллы, бургер) == */
/* Салат (blog/kaloriynost-salata-iz-ogurcov-i-pomidorov): комментарий к фото у правого края, салат левее центра,
   «Мои приёмы» — снова у правого края (правая лесенка) */
.calc-app--salad .calc-card--a{align-self:flex-end;margin-right:8%;transform:rotate(1.5deg);}
.calc-app--salad .calc-card--b{align-self:center;margin-right:10%;transform:rotate(-2.5deg);}
.calc-app--salad .calc-card--c{align-self:flex-end;margin-right:2%;transform:rotate(2deg);}
/* Оливье (blog/kaloriynost-olive): тарелка по центру со сдвигом вправо, комментарий у левого края,
   порция — по центру со сдвигом влево */
.calc-app--olivier .calc-card--a{align-self:center;margin-left:6%;transform:rotate(-2.5deg);}
.calc-app--olivier .calc-card--b{align-self:flex-start;margin-left:2%;transform:rotate(1.5deg);}
.calc-app--olivier .calc-card--c{align-self:center;margin-right:8%;transform:rotate(-1deg);}
/* Пицца (blog/kaloriynost-piccy): два куска у левого края, комментарий правее центра, «Питание сегодня» — слева со сдвигом */
.calc-app--pizza .calc-card--a{align-self:flex-start;margin-left:3%;transform:rotate(-1.5deg);}
.calc-app--pizza .calc-card--b{align-self:center;margin-left:12%;transform:rotate(3deg);}
.calc-app--pizza .calc-card--c{align-self:flex-start;margin-left:7%;transform:rotate(-2deg);}
/* Шаурма (blog/kaloriynost-shaurmy): запись словами по центру со сдвигом влево, результат у правого края,
   сохранённый приём — по центру со сдвигом вправо */
.calc-app--shawarma .calc-card--a{align-self:center;margin-right:6%;transform:rotate(2.5deg);}
.calc-app--shawarma .calc-card--b{align-self:flex-end;margin-right:5%;transform:rotate(-1.5deg);}
.calc-app--shawarma .calc-card--c{align-self:center;margin-left:10%;transform:rotate(1deg);}
/* Плов (blog/kaloriynost-plova): тарелка у правого края, порция — у левого со сдвигом,
   «Питание» — ещё левее со сдвигом к центру (спуск справа налево) */
.calc-app--plov .calc-card--a{align-self:flex-end;margin-right:5%;transform:rotate(-1deg);}
.calc-app--plov .calc-card--b{align-self:flex-start;margin-left:6%;transform:rotate(2.5deg);}
.calc-app--plov .calc-card--c{align-self:flex-start;margin-left:14%;transform:rotate(-2deg);}
/* Пельмени (blog/kaloriynost-pelmeney): запись словами у левого края со сдвигом, результат и приём — у правого */
.calc-app--pelmeni .calc-card--a{align-self:flex-start;margin-left:9%;transform:rotate(2deg);}
.calc-app--pelmeni .calc-card--b{align-self:flex-end;margin-right:7%;transform:rotate(-2.5deg);}
.calc-app--pelmeni .calc-card--c{align-self:flex-end;margin-right:1%;transform:rotate(1.5deg);}
/* Макароны (blog/kaloriynost-makaron): комментарий и тарелка — у левого края лесенкой, «Избранное» — по центру со сдвигом влево */
.calc-app--pasta .calc-card--a{align-self:flex-start;margin-left:2%;transform:rotate(-2.5deg);}
.calc-app--pasta .calc-card--b{align-self:flex-start;margin-left:12%;transform:rotate(1deg);}
.calc-app--pasta .calc-card--c{align-self:center;margin-right:6%;transform:rotate(2deg);}
/* Гречка с курицей (blog/kaloriynost-grechki-s-kuricey): приём и тарелка — у правого края, белки — по центру со сдвигом вправо */
.calc-app--buckwheat .calc-card--a{align-self:flex-end;margin-right:10%;transform:rotate(2deg);}
.calc-app--buckwheat .calc-card--b{align-self:flex-end;transform:rotate(-1.5deg);}
.calc-app--buckwheat .calc-card--c{align-self:center;margin-left:4%;transform:rotate(-2.5deg);}
/* Куриный суп (blog/kaloriynost-kurinogo-supa): тарелка по центру со сдвигом вправо, комментарий и порция — у левого края лесенкой */
.calc-app--chsoup .calc-card--a{align-self:center;margin-left:8%;transform:rotate(1.5deg);}
.calc-app--chsoup .calc-card--b{align-self:flex-start;margin-left:1%;transform:rotate(-2deg);}
.calc-app--chsoup .calc-card--c{align-self:flex-start;margin-left:11%;transform:rotate(2.5deg);}
/* Сырники (blog/kaloriynost-syrnikov): завтрак и комментарий — у левого края лесенкой, приём — у правого */
.calc-app--syrniki .calc-card--a{align-self:flex-start;margin-left:6%;transform:rotate(-2.5deg);}
.calc-app--syrniki .calc-card--b{align-self:flex-start;margin-left:14%;transform:rotate(1.5deg);}
.calc-app--syrniki .calc-card--c{align-self:flex-end;margin-right:3%;transform:rotate(-1deg);}
/* Роллы (blog/kaloriynost-rollov): запись словами и результат — у правого края лесенкой, «Питание» — у левого */
.calc-app--rolls .calc-card--a{align-self:flex-end;margin-right:3%;transform:rotate(2.5deg);}
.calc-app--rolls .calc-card--b{align-self:flex-end;margin-right:12%;transform:rotate(-1deg);}
.calc-app--rolls .calc-card--c{align-self:flex-start;margin-left:4%;transform:rotate(2deg);}
/* Бургер (blog/kaloriynost-burgera): бургер и комментарий — по центру со сдвигами в разные стороны, «Избранное» — у правого края */
.calc-app--burger .calc-card--a{align-self:center;margin-right:10%;transform:rotate(-1.5deg);}
.calc-app--burger .calc-card--b{align-self:center;margin-left:12%;transform:rotate(2deg);}
.calc-app--burger .calc-card--c{align-self:flex-end;transform:rotate(-2.5deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus в правом углу не заходит; вторая — вправо или к центру */
  .calc-app--chsoup .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--chsoup .calc-card--b{align-self:flex-end;margin:0 4% 0 0;}
  .calc-app--syrniki .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--syrniki .calc-card--b{align-self:center;margin:0 0 0 6%;}
  .calc-app--rolls .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--rolls .calc-card--b{align-self:flex-end;margin:0;}
  .calc-app--burger .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--burger .calc-card--b{align-self:center;margin:0 0 0 16%;}
  .calc-app--plov .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--plov .calc-card--b{align-self:center;margin:0 0 0 12%;}
  .calc-app--pelmeni .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--pelmeni .calc-card--b{align-self:flex-end;margin:0 3% 0 0;}
  .calc-app--pasta .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--pasta .calc-card--b{align-self:flex-end;margin:0 1% 0 0;}
  .calc-app--buckwheat .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--buckwheat .calc-card--b{align-self:center;margin:0 0 0 8%;}
  .calc-app--salad .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--salad .calc-card--b{align-self:flex-end;margin:0;}
  .calc-app--olivier .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--olivier .calc-card--b{align-self:center;margin:0 0 0 10%;}
  .calc-app--pizza .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--pizza .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--shawarma .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--shawarma .calc-card--b{align-self:center;margin:0 0 0 14%;}
}
/* == /калорийность блюд-1 == */
/* == блоки: вес и сон (вес не уходит, хочется сладкого, как быстро уснуть, нет сил) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. На ПК сдвиги малые (колонка карточек уже карточки); на телефоне (≤620)
   верхняя карточка слева — правый верхний угол занят знаком Plus, вторая вправо или к центру, третья прячется
   (общее правило .calc-card--c). У каждой страницы свои стороны, сдвиги и наклоны. */

/* вес не уходит (blog/pochemu-ves-ne-uhodit): «Вес стабилен» у правого края, шаги у левого со сдвигом,
   калории — левее центра */
.calc-app--plateau .calc-card--a{align-self:flex-end;margin-right:5%;transform:rotate(-1deg);}
.calc-app--plateau .calc-card--b{align-self:flex-start;margin-left:9%;transform:rotate(2deg);}
.calc-app--plateau .calc-card--c{align-self:center;margin-right:6%;transform:rotate(-2.5deg);}

/* хочется сладкого (blog/pochemu-hochetsya-sladkogo): перекус у левого края, недосып и наблюдение — справа
   лесенкой */
.calc-app--sweet .calc-card--a{align-self:flex-start;margin-left:4%;transform:rotate(-2deg);}
.calc-app--sweet .calc-card--b{align-self:flex-end;margin-right:8%;transform:rotate(1.5deg);}
.calc-app--sweet .calc-card--c{align-self:flex-end;transform:rotate(-1deg);}

/* как быстро уснуть (blog/kak-bystro-usnut): наблюдение правее центра, сон и итог — у левого края лесенкой */
.calc-app--fallasleep .calc-card--a{align-self:center;margin-right:5%;transform:rotate(1.5deg);}
.calc-app--fallasleep .calc-card--b{align-self:flex-start;margin-left:3%;transform:rotate(-2.5deg);}
.calc-app--fallasleep .calc-card--c{align-self:flex-start;margin-left:10%;transform:rotate(1deg);}

/* нет сил (blog/pochemu-net-sil): энергия у правого края, «Лёг · Встал» правее центра, ферритин — левее центра */
.calc-app--energy .calc-card--a{align-self:flex-end;margin-right:1%;transform:rotate(2.5deg);}
.calc-app--energy .calc-card--b{align-self:center;margin-left:6%;transform:rotate(-1.5deg);}
.calc-app--energy .calc-card--c{align-self:center;margin-right:12%;transform:rotate(2deg);}

@media (max-width:620px){
  .calc-app--plateau .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--plateau .calc-card--b{align-self:flex-end;margin:0 7% 0 0;}
  .calc-app--sweet .calc-card--a{align-self:flex-start;margin:0 0 0 9%;}
  .calc-app--sweet .calc-card--b{align-self:center;margin:0 0 0 8%;}
  .calc-app--fallasleep .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--fallasleep .calc-card--b{align-self:flex-end;margin:0 1% 0 0;}
  .calc-app--energy .calc-card--a{align-self:flex-start;margin:0 0 0 6%;}
  .calc-app--energy .calc-card--b{align-self:center;margin:0 0 0 20%;}
}
/* == /вес и сон == */
/* == блоки: анализы-2 (анализы на Госуслугах, обозначения в анализе крови, норма гемоглобина, норма ферритина) == */
/* 28.09 сюда же добавлены лейкоциты, сахар в крови, холестерин и витамин D (серия С4) — метку в первой строке
   не меняли, чтобы _слить_css.py заменил блок целиком.
   Восемь раскладок, которых ещё нет в tools.css и в соседних фрагментах: gosuslugi, abbr и wbc — на сочетаниях сторон,
   свободных на момент написания (лево → центр → центр, право → центр → центр, центр → право → право), остальные —
   на занятых сочетаниях, но с другими сдвигами и наклонами.
   На ПК сдвиги малые (до ~13 %); на телефоне (≤620) верхняя карточка всегда слева — правый верхний угол занят
   знаком Plus, вторая уходит вправо или к центру, третья прячется */
/* Госуслуги (blog/analizy-na-gosuslugah): гемоглобин у левого края, витамин D — центр со сдвигом влево,
   «вне нормы» — центр со сдвигом вправо (зигзаг по середине) */
.calc-app--gosuslugi .calc-card--a{align-self:flex-start;margin-left:4%;transform:rotate(-2deg);}
.calc-app--gosuslugi .calc-card--b{align-self:center;margin-right:10%;transform:rotate(2.5deg);}
.calc-app--gosuslugi .calc-card--c{align-self:center;margin-left:12%;transform:rotate(-1deg);}
/* обозначения (blog/oboznacheniya-v-analize-krovi): справочник у правого края, лимфоциты — центр со сдвигом
   вправо, «Tuto объясняет» — центр со сдвигом влево */
.calc-app--abbr .calc-card--a{align-self:flex-end;margin-right:2%;transform:rotate(1.5deg);}
.calc-app--abbr .calc-card--b{align-self:center;margin-left:10%;transform:rotate(-2.5deg);}
.calc-app--abbr .calc-card--c{align-self:center;margin-right:12%;transform:rotate(1deg);}
/* гемоглобин (blog/gemoglobin-norma): «Ниже нормы» у правого края, история — центр со сдвигом вправо,
   ферритин — справа с отступом */
.calc-app--hgb .calc-card--a{align-self:flex-end;transform:rotate(-1.5deg);}
.calc-app--hgb .calc-card--b{align-self:center;margin-left:8%;transform:rotate(2deg);}
.calc-app--hgb .calc-card--c{align-self:flex-end;margin-right:9%;transform:rotate(-2.5deg);}
/* ферритин (blog/ferritin-norma): ферритин у левого края, гемоглобин — справа с отступом,
   «снова в норме» — слева с отступом (лесенка) */
.calc-app--ferritin .calc-card--a{align-self:flex-start;transform:rotate(2deg);}
.calc-app--ferritin .calc-card--b{align-self:flex-end;margin-right:6%;transform:rotate(-2deg);}
.calc-app--ferritin .calc-card--c{align-self:flex-start;margin-left:10%;transform:rotate(1deg);}
/* лейкоциты (blog/leykocity-norma): лейкоциты — центр со сдвигом влево, лимфоциты у правого края,
   история — справа с большим отступом (единственное свободное сочетание сторон: центр → право → право) */
.calc-app--wbc .calc-card--a{align-self:center;margin-right:8%;transform:rotate(-2deg);}
.calc-app--wbc .calc-card--b{align-self:flex-end;margin-right:3%;transform:rotate(1.5deg);}
.calc-app--wbc .calc-card--c{align-self:flex-end;margin-right:13%;transform:rotate(-1deg);}
/* сахар (blog/sahar-v-krovi-norma): первый анализ справа, повторный — слева, HbA1c снова справа
   (право → лево → право, как у steps, но с другими сдвигами и наклонами) */
.calc-app--glucose .calc-card--a{align-self:flex-end;margin-right:3%;transform:rotate(1.5deg);}
.calc-app--glucose .calc-card--b{align-self:flex-start;margin-left:5%;transform:rotate(-2.5deg);}
.calc-app--glucose .calc-card--c{align-self:flex-end;margin-right:9%;transform:rotate(2deg);}
/* холестерин (blog/holesterin-norma): ЛПНП слева с отступом, ЛПВП — центр со сдвигом влево,
   чекап справа (лево → центр → право, как у quit, но с другими сдвигами и наклонами) */
.calc-app--chol .calc-card--a{align-self:flex-start;margin-left:7%;transform:rotate(2deg);}
.calc-app--chol .calc-card--b{align-self:center;margin-right:9%;transform:rotate(-1.5deg);}
.calc-app--chol .calc-card--c{align-self:flex-end;margin-right:4%;transform:rotate(-2.5deg);}
/* витамин D (blog/vitamin-d-norma): «ниже нормы» справа с отступом, причины у правого края,
   лаборатория — центр со сдвигом влево (право → право → центр, как у buckwheat, но зеркально по наклонам и сдвигам) */
.calc-app--vitd .calc-card--a{align-self:flex-end;margin-right:12%;transform:rotate(-2.5deg);}
.calc-app--vitd .calc-card--b{align-self:flex-end;margin-right:2%;transform:rotate(1deg);}
.calc-app--vitd .calc-card--c{align-self:center;margin-right:8%;transform:rotate(2.5deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus не заходит */
  .calc-app--gosuslugi .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--gosuslugi .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--abbr .calc-card--a{align-self:flex-start;margin:0;}
  .calc-app--abbr .calc-card--b{align-self:center;margin:0 0 0 12%;}
  .calc-app--hgb .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--hgb .calc-card--b{align-self:flex-end;margin:0 1% 0 0;}
  .calc-app--ferritin .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--ferritin .calc-card--b{align-self:center;margin:0 0 0 14%;}
  .calc-app--wbc .calc-card--a{align-self:flex-start;margin:0 0 0 6%;}
  .calc-app--wbc .calc-card--b{align-self:center;margin:0 0 0 16%;}
  .calc-app--glucose .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--glucose .calc-card--b{align-self:flex-end;margin:0 5% 0 0;}
  .calc-app--chol .calc-card--a{align-self:flex-start;margin:0 0 0 7%;}
  .calc-app--chol .calc-card--b{align-self:center;margin:0 0 0 4%;}
  .calc-app--vitd .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--vitd .calc-card--b{align-self:flex-end;margin:0 6% 0 0;}
}
/* == /анализы-2 == */
/* == блоки: цикл (овуляция, нерегулярный цикл, задержка месячных) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. На ПК сдвиги малые; на телефоне (≤620) верхняя карточка слева —
   правый верхний угол занят знаком Plus, вторая вправо или к центру, третья прячется (общее правило .calc-card--c).
   У каждой страницы свои стороны, сдвиги и наклоны. */

/* овуляция (blog/ovulyaciya): «День цикла 13» по центру со сдвигом влево, «Овуляция» у правого края с отступом,
   «Менструация» у левого края лесенкой */
.calc-app--ovul .calc-card--a{align-self:center;margin-left:3%;transform:rotate(-2deg);}
.calc-app--ovul .calc-card--b{align-self:flex-end;margin-right:11%;transform:rotate(1deg);}
.calc-app--ovul .calc-card--c{align-self:flex-start;margin-left:13%;transform:rotate(2.5deg);}

/* нерегулярный цикл (blog/neregulyarnyy-cikl): статистика у левого края, стабильность справа,
   история циклов — правее центра */
.calc-app--irreg .calc-card--a{align-self:flex-start;margin-left:7%;transform:rotate(1deg);}
.calc-app--irreg .calc-card--b{align-self:flex-end;margin-right:5%;transform:rotate(-1.5deg);}
.calc-app--irreg .calc-card--c{align-self:center;margin-left:9%;transform:rotate(2.5deg);}

/* задержка месячных (blog/zaderzhka-mesyachnyh): «Задержка 4 дня» справа с отступом, подсказка у левого края,
   отметка менструации — левее центра */
.calc-app--delay .calc-card--a{align-self:flex-end;margin-right:8%;transform:rotate(-2.5deg);}
.calc-app--delay .calc-card--b{align-self:flex-start;margin-left:4%;transform:rotate(1.5deg);}
.calc-app--delay .calc-card--c{align-self:center;margin-right:4%;transform:rotate(-1deg);}

@media (max-width:620px){
  .calc-app--ovul .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--ovul .calc-card--b{align-self:flex-end;margin:0 3% 0 0;}
  .calc-app--irreg .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--irreg .calc-card--b{align-self:center;margin:0 0 0 14%;}
  .calc-app--delay .calc-card--a{align-self:flex-start;margin:0 0 0 8%;}
  .calc-app--delay .calc-card--b{align-self:flex-end;margin:0 9% 0 0;}
}
/* == /цикл == */
/* == блоки: добавки (совместимость витаминов, как пить магний, как пить железо) == */
/* три раскладки на сочетаниях сторон, которых ещё нет ни в tools.css, ни в соседних фрагментах
   (центр → право → право, центр → центр → центр, право → право → право; первое заняли параллельно — см. ниже). Сдвиги на ПК малые (до 14 %);
   на телефоне (≤620) верхняя карточка слева — правый верхний угол занят знаком Plus, вторая уходит вправо
   или к центру, третья прячется */
/* совместимость (instrumenty/sovmestimost-vitaminov): железо в 08:00 — центр со сдвигом вправо,
   кальций в 14:00 — у правого края, «Сегодня 2 из 3» — справа с отступом. Сочетание сторон совпало
   с параллельно сделанным .calc-app--wbc (css_labs.css), поэтому сдвиг первой карточки и наклоны — в другую сторону */
.calc-app--compat .calc-card--a{align-self:center;margin-left:8%;transform:rotate(1.5deg);}
.calc-app--compat .calc-card--b{align-self:flex-end;transform:rotate(-2.5deg);}
.calc-app--compat .calc-card--c{align-self:flex-end;margin-right:6%;transform:rotate(2deg);}
/* магний (blog/kak-pit-magniy): приём в 14:00 — центр со сдвигом вправо, курс 30 дней — центр со сдвигом
   влево, завершённый курс — почти по центру (змейка по середине) */
.calc-app--magnesium .calc-card--a{align-self:center;margin-left:10%;transform:rotate(1.5deg);}
.calc-app--magnesium .calc-card--b{align-self:center;margin-right:12%;transform:rotate(-2.5deg);}
.calc-app--magnesium .calc-card--c{align-self:center;margin-left:3%;transform:rotate(2deg);}
/* железо (blog/kak-pit-zhelezo): приём до еды — справа с отступом, ферритин — у правого края,
   история сдачи — справа с большим отступом (правая лесенка туда-обратно) */
.calc-app--iron .calc-card--a{align-self:flex-end;margin-right:9%;transform:rotate(-2.5deg);}
.calc-app--iron .calc-card--b{align-self:flex-end;transform:rotate(1.5deg);}
.calc-app--iron .calc-card--c{align-self:flex-end;margin-right:14%;transform:rotate(-1deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus не заходит; вторая — вправо или к центру */
  .calc-app--compat .calc-card--a{align-self:flex-start;margin:0 0 0 5%;}
  .calc-app--compat .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--magnesium .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--magnesium .calc-card--b{align-self:center;margin:0 0 0 10%;}
  .calc-app--iron .calc-card--a{align-self:flex-start;margin:0 0 0 3%;}
  .calc-app--iron .calc-card--b{align-self:flex-end;margin:0 6% 0 0;}
}
/* == /добавки == */
/* == блоки: добавки-2 (как принимать витамин D, как пить омега-3) == */
/* Правило вида — ДИЗАЙН_КАЛЬКУЛЯТОРОВ.md §2. На ПК сдвиги малые; на телефоне (≤620) верхняя карточка слева —
   правый верхний угол занят знаком Plus, вторая вправо или к центру, третья прячется (общее правило .calc-card--c). */

/* витамин D (blog/kak-prinimat-vitamin-d): курс у левого края с отступом, пуш справа, анализ — чуть правее центра */
.calc-app--vitdtake .calc-card--a{align-self:flex-start;margin-left:11%;transform:rotate(1.5deg);}
.calc-app--vitdtake .calc-card--b{align-self:flex-end;margin-right:2%;transform:rotate(-2deg);}
.calc-app--vitdtake .calc-card--c{align-self:center;margin-right:2%;transform:rotate(2.5deg);}

/* омега-3 (blog/kak-pit-omega-3): курс справа с большим отступом, пуш по центру, взаимодействие — у левого края */
.calc-app--omega .calc-card--a{align-self:flex-end;margin-right:13%;transform:rotate(-1deg);}
.calc-app--omega .calc-card--b{align-self:center;margin-left:2%;transform:rotate(2deg);}
.calc-app--omega .calc-card--c{align-self:flex-start;margin-left:8%;transform:rotate(-2.5deg);}

@media (max-width:620px){
  .calc-app--vitdtake .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--vitdtake .calc-card--b{align-self:flex-end;margin:0 6% 0 0;}
  .calc-app--omega .calc-card--a{align-self:flex-start;margin:0 0 0 10%;}
  .calc-app--omega .calc-card--b{align-self:center;margin:0 0 0 10%;}
}
/* == /добавки-2 == */
/* == блоки: анализы-4 (норма ТТГ, норма креатинина, билирубин, АЛТ и АСТ) == */
/* одна раскладка — на последнем свободном сочетании сторон (лево → лево → лево), три — на редких сочетаниях
   (центр → центр → лево, лево → центр → центр, лево → лево → центр) с другими сдвигами и наклонами, чем у занятых.
   На ПК сдвиги малые (до 12 %); на телефоне (≤620) верхняя карточка слева — правый верхний угол занят знаком Plus,
   вторая уходит вправо или к центру, третья прячется */
/* ТТГ (blog/ttg-norma): ТТГ у левого края, Т4 свободный — слева с большим отступом, история — слева с малым
   (зигзаг вдоль левого края) */
.calc-app--tsh .calc-card--a{align-self:flex-start;margin-left:2%;transform:rotate(2deg);}
.calc-app--tsh .calc-card--b{align-self:flex-start;margin-left:12%;transform:rotate(-1.5deg);}
.calc-app--tsh .calc-card--c{align-self:flex-start;margin-left:5%;transform:rotate(2.5deg);}
/* креатинин (blog/kreatinin-norma): креатинин — центр со сдвигом вправо, СКФ — центр со сдвигом влево,
   история — слева с отступом */
.calc-app--creat .calc-card--a{align-self:center;margin-left:9%;transform:rotate(1.5deg);}
.calc-app--creat .calc-card--b{align-self:center;margin-right:7%;transform:rotate(-2.5deg);}
.calc-app--creat .calc-card--c{align-self:flex-start;margin-left:8%;transform:rotate(2deg);}
/* билирубин (blog/bilirubin-norma): общий — слева с отступом, прямой — центр со сдвигом вправо,
   непрямой — центр со сдвигом влево */
.calc-app--bili .calc-card--a{align-self:flex-start;margin-left:10%;transform:rotate(1.5deg);}
.calc-app--bili .calc-card--b{align-self:center;margin-left:6%;transform:rotate(-2deg);}
.calc-app--bili .calc-card--c{align-self:center;margin-right:9%;transform:rotate(2.5deg);}
/* АЛТ и АСТ (blog/alt-i-ast-norma): АЛТ — слева с отступом, АСТ — у левого края, «снова в норме» —
   центр со сдвигом вправо */
.calc-app--alt .calc-card--a{align-self:flex-start;margin-left:7%;transform:rotate(2deg);}
.calc-app--alt .calc-card--b{align-self:flex-start;margin-left:1%;transform:rotate(-2.5deg);}
.calc-app--alt .calc-card--c{align-self:center;margin-left:10%;transform:rotate(1deg);}
@media (max-width:620px){
  /* верхняя карточка — слева, под знак Plus не заходит; вторая — вправо или к центру */
  .calc-app--tsh .calc-card--a{align-self:flex-start;margin:0 0 0 1%;}
  .calc-app--tsh .calc-card--b{align-self:flex-end;margin:0 5% 0 0;}
  .calc-app--creat .calc-card--a{align-self:flex-start;margin:0 0 0 4%;}
  .calc-app--creat .calc-card--b{align-self:center;margin:0 0 0 12%;}
  .calc-app--bili .calc-card--a{align-self:flex-start;margin:0 0 0 2%;}
  .calc-app--bili .calc-card--b{align-self:flex-end;margin:0 2% 0 0;}
  .calc-app--alt .calc-card--a{align-self:flex-start;margin:0 0 0 6%;}
  .calc-app--alt .calc-card--b{align-self:center;margin:0 0 0 18%;}
}
/* == /анализы-4 == */