/* ==========================================================================
   RTR — общая дизайн-система. Единственный источник стилей для всех страниц.
   Вставляется в HTML скриптом scripts/sync_css.py между маркерами RTR:CSS.
   ========================================================================== */

/* ---------- ТОКЕНЫ ---------- */
:root{
  --ground:#FFFFFF; --surface:#F3F6FD; --surface-2:#E9EEFB; --line:#E1E7F6;
  --ink:#0B1020; --ink-2:#4A5474; --ink-3:#7B87A8;

  /* акценты — длины волн лазеров */
  --blue:#2B54FF;   --blue-ink:#1B3AD1;  --blue-soft:#E7ECFF;   /* 1064 нм Nd:YAG */
  --green:#12B76A;  --green-soft:#DDF7EA;                        /* 532 нм KTP */
  --ruby:#F0405A;   --ruby-soft:#FFE4E8;                         /* 694 нм рубин */
  --violet:#8B5CF6; --violet-soft:#EFE7FF;                       /* 755 нм александрит */
  --amber:#F59E0B;  --amber-soft:#FFF2D6;
  --on-accent:#FFFFFF;

  --shadow-s:0 2px 8px rgba(11,16,32,.05);
  --shadow-m:0 10px 30px -12px rgba(27,58,209,.22);
  --shadow-l:0 28px 60px -30px rgba(27,58,209,.40);

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --maxw:1240px; --readable:72ch;

  --f-display:"Unbounded","Trebuchet MS",sans-serif;
  --f-body:"Onest","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}



/* ---------- БАЗА ---------- */
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-body);
     font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; line-height:1.08; letter-spacing:-.03em; text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,60px); font-weight:800}
h2{font-size:clamp(24px,2.8vw,36px); font-weight:700}
h3{font-size:20px; font-weight:600; letter-spacing:-.02em}
h4{font-size:16px; font-weight:600}
p{margin:0}
a{color:inherit}
ul,ol{margin:0}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:820px; margin:0 auto}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.stack{display:flex; flex-direction:column}
.gap-s{gap:10px} .gap-m{gap:18px} .gap-l{gap:32px}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0;
     border-radius:999px; padding:13px 24px; font-weight:600; font-size:15px; text-decoration:none;
     white-space:nowrap; cursor:pointer;
     transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn-primary{background:var(--blue); color:var(--on-accent); box-shadow:var(--shadow-m)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-l)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--blue)}
.btn-sm{padding:9px 16px; font-size:14px}

/* ---------- ЧИПЫ ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
      font-size:12.5px; font-weight:600; background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.chip.g{background:var(--green-soft); color:var(--green)}
.chip.r{background:var(--ruby-soft); color:var(--ruby)}
.chip.v{background:var(--violet-soft); color:var(--violet)}
.chip.b{background:var(--blue-soft); color:var(--blue-ink)}
.chip.a{background:var(--amber-soft); color:var(--amber)}
.chip-mono{font-family:var(--f-mono); font-size:11.5px}

/* ---------- ШАПКА ---------- */
header.site{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
            background:color-mix(in srgb,var(--ground) 86%, transparent); backdrop-filter:blur(14px)}
.nav{display:flex; align-items:center; gap:28px; height:68px}
.logo{white-space:nowrap; display:flex; align-items:center; gap:10px; text-decoration:none;
      font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.04em}
.logo-mark{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff;
           background:linear-gradient(140deg,var(--blue),var(--violet));
           font-family:var(--f-mono); font-size:11px; font-weight:600}
.nav-links{display:flex; gap:24px; margin-left:auto; font-size:15px; font-weight:500; color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--blue)}
.nav .btn{padding:10px 18px}
@media (max-width:900px){.nav-links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:1024px){.logo-text{display:none}.nav{gap:14px}}

/* ---------- КРОШКИ ---------- */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--ink-3); padding:22px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- КАРТОЧКИ И ПЛИТКИ ---------- */
.card{background:var(--ground); border:1px solid var(--line); border-radius:var(--r-l); padding:24px;
      display:flex; flex-direction:column; gap:14px;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.card.flat:hover{transform:none; box-shadow:none}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards,.cards.two{grid-template-columns:1fr}}

.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
      padding:18px 20px; display:flex; flex-direction:column; gap:4px}
.tile b{font-family:var(--f-display); font-size:clamp(20px,2.2vw,28px); font-weight:700;
        letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.tile span{font-size:13px; color:var(--ink-3); line-height:1.35}
.tile.accent{background:var(--blue-soft); border-color:transparent}
.tile.accent b, .tile.accent span{color:var(--blue-ink)}

/* ---------- ВЫНОСКИ ---------- */
.note{display:flex; gap:12px; align-items:flex-start; padding:18px 20px; font-size:15px;
      background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{background:var(--amber-soft); border-color:transparent; color:var(--ink)}
.note.stop{background:var(--ruby-soft); border-color:transparent; color:var(--ink)}
.note.ok{background:var(--green-soft); border-color:transparent; color:var(--ink)}

.answer{border-left:4px solid var(--blue); background:var(--blue-soft); border-radius:0 var(--r-m) var(--r-m) 0;
        padding:22px 24px; font-size:17px; color:var(--ink)}

/* ---------- ТАБЛИЦЫ ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--ground)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:15px}
th,td{padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
         color:var(--ink-3); font-weight:600; background:var(--surface); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface)}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- ПОЛОСЫ И ШКАЛЫ ---------- */
.bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:999px; background:currentColor;
       transition:width .45s cubic-bezier(.2,.8,.2,1)}
.meter{display:flex; align-items:center; gap:12px}
.meter .label{width:100px; font-size:14px; color:var(--ink-2)}
.meter .val{font-family:var(--f-mono); font-size:13px; width:46px; text-align:right; color:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:10px}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 22px}
details[open]{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
summary{cursor:pointer; font-weight:600; font-size:16.5px; list-style:none;
        display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--f-mono); color:var(--blue); font-size:20px; line-height:1}
details[open] summary::after{content:"−"}
details p{margin-top:12px; color:var(--ink-2); font-size:15px}

/* ---------- ФОТО КЛИНИКИ ---------- */
.avatar{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 auto;
        background:var(--surface-2); box-shadow:0 0 0 3px var(--ground), 0 0 0 4px var(--line)}
.avatar.ok{box-shadow:0 0 0 3px var(--ground), 0 0 0 4px var(--blue)}
@media (min-width:1041px){
  .avatar{width:124px; height:124px; box-shadow:0 0 0 5px var(--ground), 0 0 0 7px var(--line)}
  .avatar.ok{box-shadow:0 0 0 5px var(--ground), 0 0 0 7px var(--blue)}
}

/* ---------- АВТОР И ДАТА ---------- */
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:18px 0;
        border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.byline img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.byline .upd{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); margin-left:auto}

/* ---------- ПЕРЕЛИНКОВКА ---------- */
.links{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:32px 0 0; border-top:1px solid var(--line)}
@media (max-width:900px){.links{grid-template-columns:repeat(2,1fr); gap:22px}}
@media (max-width:520px){.links{grid-template-columns:1fr}}
.links h4{color:var(--ink-3); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
          text-transform:uppercase; margin-bottom:12px}
.links ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px}
.links a{text-decoration:none; font-size:14.5px; color:var(--ink-2)}
.links a:hover{color:var(--blue)}

/* ---------- CTA И ПОДВАЛ ---------- */
.cta{border-radius:var(--r-xl); padding:clamp(32px,4vw,56px); text-align:center; color:#fff;
     background:linear-gradient(135deg,var(--blue),var(--violet));
     display:flex; flex-direction:column; align-items:center; gap:18px}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.82); max-width:52ch}
.cta .btn{background:#fff; color:#1B3AD1}
footer.site{margin-top:64px; border-top:1px solid var(--line); padding:32px 0; color:var(--ink-3); font-size:13.5px}
.foot{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between}

/* ---------- ТЕКСТ СТАТЬИ ---------- */
.prose{display:flex; flex-direction:column; gap:18px; max-width:var(--readable); font-size:16.5px; color:var(--ink-2)}
.prose h2{color:var(--ink); margin-top:22px}
.prose h3{color:var(--ink); margin-top:14px}
.prose ul,.prose ol{padding-left:20px; display:flex; flex-direction:column; gap:8px}
.prose strong{color:var(--ink)}
section{padding:clamp(40px,5vw,72px) 0}
section.tight{padding:clamp(24px,3vw,40px) 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}