/* ShoulderPlanner · «Артроскопичечная» — тема сайта по фирменному стилю (логотип, рилсы «Памятки пациентам», 11.2026).
   Подключается после horizon.css и app.css и только переопределяет токены: horizon.css и motion.js не меняются
   (одинаковые копии с ShoulderPlanner). Цвета взяты из логотипа и из slides.html памяток:
   фон #EAFBFC, бирюза #2A8C99, оранжевый #E8623F, синий #3B5FB8 / #4F7FE0, текст #151B1D.
   Заголовки — Bernier (как в рилсах), текст — Onest. Вьюеры ([data-viewer]) не анимируются (правило horizon.css). */

@font-face { font-family: 'Bernier'; font-display: swap; src: url(/static/brand/fonts/bernier.otf) format('opentype'); }

:root {
  --ph-bg: #EAFBFC; --ph-panel: #FFFFFF; --ph-line: #D3EBEE; --ph-ink: #151B1D; --ph-ink2: #4B5B60; --ph-soft: #F2FAFB;
  --ph-accent: #C94A2A; --ph-accent-hover: #A93B1F; --ph-accent-ink: #FFFFFF; --ph-tint: #FFF1EC;
  --ph-accent2: #2A8C99; --ph-plan: #7EA4EE; --ph-ok: #2A8C99; --ph-warn: #E39A1F; --ph-err: #D8442A;
  --ph-ok-bg: #DDF3F5; --ph-ok-ink: #1E6872; --ph-warn-bg: #FCEFD8; --ph-warn-ink: #7A4A00; --ph-err-bg: #FDE6E0; --ph-err-ink: #A3311A;
  --ph-sunset: linear-gradient(90deg, #E8623F, #2A8C99);
  --ph-scene: #FFFFFF;
  --ph-font-display: 'Bernier', 'Onest', sans-serif;
  --ph-shadow-sm: 0 1px 2px rgba(31, 58, 90, .05), 0 2px 8px rgba(31, 58, 90, .05);
  --ph-shadow-md: 0 10px 28px rgba(31, 58, 90, .10);
  --ph-shadow-lg: 0 18px 50px rgba(31, 58, 90, .14);
  --a-blue: #3B5FB8; --a-blue2: #4F7FE0; --a-chip: #E3EBFB; --a-teal: #2A8C99; --a-orange: #E8623F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ph-bg: #071417; --ph-panel: #0E1F23; --ph-line: #1C3439; --ph-ink: #EEF8F9; --ph-ink2: #9DB6BA; --ph-soft: #12272B;
    --ph-accent: #F07A55; --ph-accent-hover: #FF9472; --ph-accent-ink: #071417; --ph-tint: #2A1A14;
    --ph-ok-bg: #12343A; --ph-ok-ink: #7FD3DD; --ph-warn-bg: #3A2C12; --ph-warn-ink: #F3C47A; --ph-err-bg: #3A1A12; --ph-err-ink: #FF9C7E;
    --ph-scene: #071417; --a-chip: #16294A; --a-blue: #9DB8F5;
  }
}
:root[data-theme="dark"] {
  --ph-bg: #071417; --ph-panel: #0E1F23; --ph-line: #1C3439; --ph-ink: #EEF8F9; --ph-ink2: #9DB6BA; --ph-soft: #12272B;
  --ph-accent: #F07A55; --ph-accent-hover: #FF9472; --ph-accent-ink: #071417; --ph-tint: #2A1A14;
  --ph-ok-bg: #12343A; --ph-ok-ink: #7FD3DD; --ph-warn-bg: #3A2C12; --ph-warn-ink: #F3C47A; --ph-err-bg: #3A1A12; --ph-err-ink: #FF9C7E;
  --ph-scene: #071417; --a-chip: #16294A; --a-blue: #9DB8F5;
}

/* фон с пузырьками (как в рилсах): чистый CSS, ниже содержимого */
body { position: relative; isolation: isolate; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background:
    radial-gradient(circle at 12% 78%, rgba(42, 140, 153, .10) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 22%, rgba(42, 140, 153, .08) 0 52px, transparent 53px),
    radial-gradient(circle at 76% 86%, rgba(42, 140, 153, .07) 0 22px, transparent 23px),
    radial-gradient(circle at 30% 14%, rgba(42, 140, 153, .06) 0 16px, transparent 17px),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%); }

/* шапка: логотип + название */
header { background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20; }
.brand { flex-direction: row; align-items: center; gap: 12px; }
.brand .a-logo { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(31, 58, 90, .10);
  display: grid; place-items: center; transition: transform var(--m-moderate) var(--m-ease); }
.brand .a-logo img { width: 42px; height: 42px; display: block; }
.brand:hover .a-logo { transform: rotate(-8deg) scale(1.05); }
.brand .a-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand .a-name b { font: 400 22px/1 var(--ph-font-display); letter-spacing: .02em; color: var(--ink); text-transform: uppercase; }
.brand .a-name i { font-style: normal; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--a-orange); }
.brand small { color: var(--ink2); font-size: 11px; }
@media (max-width: 600px) { .brand small { display: none; } .brand .a-name b { font-size: 19px; } }

/* заголовки как в рилсах: Bernier, прописные, синяя черта */
h1 { font: 400 34px/1.05 var(--ph-font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
h1::after { content: ''; display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--a-blue2); margin-top: 10px;
  transform-origin: left; animation: a-rule .6s var(--m-ease) .15s both; }
.narrow h1 { text-align: center; }
.narrow h1::after, .stack + h1::after { margin-left: auto; margin-right: auto; transform-origin: center; }
@keyframes a-rule { from { transform: scaleX(0); } }
@media (max-width: 600px) { h1 { font-size: 28px; } }

/* логотип на входе и в приглашении */
.stack img { height: 150px; }
.stack { display: grid; place-items: center; }
.stack img { border-radius: 50%; background: rgba(255, 255, 255, .7); padding: 6px; animation: a-logo .8s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes a-logo { from { opacity: 0; transform: scale(.7) rotate(-12deg); } }

/* карточки, кнопки, метки */
.card { border-radius: 24px; box-shadow: var(--ph-shadow-md); border-color: transparent; }
.btn, button.btn { border-radius: 14px; }
.chip-a { display: inline-block; background: var(--a-chip); color: var(--a-blue); font-weight: 600; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { h1::after, .stack img { animation: none; } }

/* заставка (splash.js) */
#splash { background: #EAFBFC; color: #151B1D; overflow: hidden; }
#splash .s-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#splash .s-logo { width: min(300px, 62vw); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .6); display: grid; place-items: center; }
#splash .s-logo img { width: 90%; display: block; }
#splash h2 { margin: 22px 0 0; font: 400 clamp(38px, 9vw, 64px)/1.02 'Bernier', 'Onest', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em; max-width: 680px; }
#splash h2 .w { display: inline-block; overflow: hidden; padding: .08em .06em .12em 0; margin: -.08em -.06em -.12em 0; }
#splash h2 .w > span { display: inline-block; }
#splash .s-bub { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; pointer-events: none; }
#splash .s-bub.f { border: 2px solid rgba(42, 140, 153, .22); background: rgba(255, 255, 255, .35); }
#splash .s-bub.f::after { content: ''; position: absolute; top: 18%; left: 22%; width: 26%; height: 26%; border-radius: 50%; background: rgba(255, 255, 255, .85); }
#splash .s-bub.b { border: 1.5px solid rgba(42, 140, 153, .12); background: rgba(255, 255, 255, .18); filter: blur(1.5px); }
.splash-skip { background: rgba(255, 255, 255, .8); color: #3B5FB8; border: 1px solid #D3EBEE; }
.splash-skip:hover { color: #151B1D; background: #fff; border-color: #7EA4EE; }

/* тёмная тема: без белого свечения сверху, логотип на белом круге (как значок) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { background:
    radial-gradient(circle at 12% 78%, rgba(42, 140, 153, .14) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 22%, rgba(42, 140, 153, .12) 0 52px, transparent 53px),
    radial-gradient(circle at 76% 86%, rgba(42, 140, 153, .10) 0 22px, transparent 23px); }
  :root:not([data-theme="light"]) .stack img { background: #fff; }
}
:root[data-theme="dark"] .stack img { background: #fff; }