/* Общото за графиките към статията „Преобрази си сайт!“ (/technologii/preobrazi-si-sait).
   Основата е от „Защо те създадох?!“: всяка графика е отделна страница в iframe, височината отива в статията с postMessage (shared.js),
   а всичко, което изглежда като бутон, работи веднага. */
@font-face { font-family: 'M'; font-weight: 100 900; font-display: swap;
  src: url(fonts/montserrat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'M'; font-weight: 100 900; font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --yellow: #ffcc01; --yellow-soft: #fff3bf; --black: #0a0a0a; --ink: #1c1b17; --paper: #f6f4ee; --rule: #e0dccf;
  --muted: #4a4841; --faint: #6b685f; --skel: #e7e3d8; --skel-2: #d9d4c6; --red: #d6452f;
  --ease: cubic-bezier(0.5, 0, 0.2, 1); --pop: cubic-bezier(0.3, 1.4, 0.5, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font-family: 'M', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; padding: 2px; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.w { background: #fff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.w__head { display: flex; align-items: center; gap: 10px; background: var(--black); color: #fff; padding: 10px 16px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.w__num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); color: var(--black);
  display: grid; place-items: center; letter-spacing: 0; }
.w__years { margin-left: auto; color: var(--yellow); letter-spacing: 0.04em; white-space: nowrap; }

/* стъпките са една върху друга: височината е на най-високата, нищо не подскача */
.w__stage { display: grid; padding: 18px 18px 16px; }
.st { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s; }
.st.on { visibility: visible; opacity: 1; transition: opacity 0.3s; }
.st__h { margin: 0 0 4px; font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--black); text-wrap: balance; }
.st__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); font-weight: 500; text-wrap: pretty; }
.src { font-size: 12px; line-height: 1.4; color: var(--faint); font-weight: 600; margin: 12px 0 0; }

.w__foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--rule); padding: 10px 12px; }
.nav { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--black); background: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.nav svg { width: 16px; height: 16px; }
.nav:hover:not(:disabled) { background: var(--yellow); }
.nav:disabled { opacity: 0.25; cursor: default; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; flex: 1; justify-content: center; }
.chips button { border: 0; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--paper); color: var(--muted); cursor: pointer; white-space: nowrap; }
.chips button:hover { background: var(--rule); color: var(--black); }
.chips button[aria-current="step"] { background: var(--yellow); color: var(--black); }

.btn { border: 2px solid var(--black); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; }
.btn:hover { background: var(--yellow); }
.btn:active { transform: scale(0.96); }
.btn--dark { background: var(--black); color: var(--yellow); }
.btn--dark:hover { background: #2a2923; }
.btn[aria-pressed="true"] { background: var(--black); color: var(--yellow); }

/* телефон */
.phone { position: relative; width: 210px; height: 360px; flex: none; border: 7px solid var(--black); border-radius: 28px;
  background: #fff; overflow: hidden; }
.phone::before { content: ''; position: absolute; top: 6px; left: 50%; width: 50px; height: 12px; margin-left: -25px;
  background: var(--black); border-radius: 999px; z-index: 5; }
.phone__bar { position: absolute; inset: 0 0 auto; height: 40px; background: #fff; border-bottom: 1px solid var(--rule); z-index: 4;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.phone--s { width: 150px; height: 270px; border-width: 6px; border-radius: 22px; }
.phone--s::before { width: 36px; height: 9px; margin-left: -18px; top: 5px; }
.phone--s .phone__bar { height: 30px; font-size: 9px; }

/* скелетни публикации */
.sk { display: flex; gap: 8px; padding: 10px 11px; border-bottom: 1px solid var(--rule); background: #fff; }
.sk__av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--skel-2); }
.sk__body { flex: 1; display: grid; gap: 5px; align-content: start; }
.sk__l { height: 6px; border-radius: 3px; background: var(--skel); }
.sk__l--name { height: 7px; width: 40%; background: var(--skel-2); }
.sk__img { height: 54px; border-radius: 5px; background: var(--paper); border: 1px solid var(--rule); }
.sk--new { animation: newpost 1.6s ease-out; }
@keyframes newpost { 0% { background: var(--yellow-soft); } 100% { background: #fff; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
@media (max-width: 520px) {
  .w__stage { padding: 16px 14px 14px; }
  .st__h { font-size: 18px; }
  .st__sub { font-size: 13px; }
  .w__foot { padding: 8px; gap: 6px; }
  .nav { width: 34px; height: 34px; }
  .chips button { padding: 6px 9px; font-size: 11px; }
}

/* добавки за „Преобрази си сайт!“ */
.row2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.tag--old { background: var(--paper); color: var(--faint); border: 1px solid var(--rule); }
.tag--new { background: var(--yellow); color: var(--black); }
.num { font-variant-numeric: tabular-nums; }
@media (max-width: 440px) { .w__years { display: none; } }