/* Скидання й типографіка: фон із градієнтами, шрифт, заголовки, посилання, фокус, іконки, картки, скелет, поява, допоміжні класи. */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* Фон — м'які плями світла, як у дашборді впровадження; не гортаються разом зі сторінкою. */
body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--sp-5); }
h2 { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; margin: var(--sp-6) 0 var(--sp-3); }
p { margin: 0 0 var(--sp-3); }
strong, b { font-weight: 600; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: .92em; }

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Фокус видно лише з клавіатури; для полів — м'яке кільце. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Іконки (shared/scripts/icons.js): колір — від тексту, розмір — від шрифту, якщо не задано інше. */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Знак продукту — градієнт sky → violet із сяйвом, як у дашборді. */
svg.logo {
  border-radius: 28%;
  background: var(--grad-brand);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sky) calc(var(--glow) * 70%), transparent);
}
svg.logo rect { fill: transparent; }

.muted { color: var(--muted); }
.danger { color: var(--danger); }
.small { font-size: var(--fs-xs); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.card {
  background: var(--surface) var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card.pad { padding: var(--sp-5); }

/* Картка з підсвіткою зверху в тоні статусу (--ink) і м'яким сяйвом у куті; клас ставить екран. */
.glow-card { position: relative; isolation: isolate; overflow: hidden; }
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 120px;
  background:
    linear-gradient(90deg, transparent, var(--ink, var(--sky)) 50%, transparent) top / 100% 2px no-repeat,
    radial-gradient(260px 110px at 50% 0, color-mix(in srgb, var(--ink, var(--sky)) calc(var(--glow) * 30%), transparent), transparent 75%);
  opacity: .9;
  pointer-events: none;
}

/* Підйом при наведенні (лише миша — на телефоні залипає після дотику). */
@media (hover: hover) {
  .lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--ink, var(--accent)) 40%, var(--line)); }
}

/* Поява екрана — лише при заході на інший екран (.is-enter), не при зміні відбору; .rise — за потреби вручну. */
.screen.is-enter > *, .rise > * { animation: rise .42s cubic-bezier(.2, .7, .2, 1) backwards; }
.screen.is-enter > :nth-child(2), .rise > :nth-child(2) { animation-delay: .04s; }
.screen.is-enter > :nth-child(3), .rise > :nth-child(3) { animation-delay: .08s; }
.screen.is-enter > :nth-child(4), .rise > :nth-child(4) { animation-delay: .12s; }
.screen.is-enter > :nth-child(5), .rise > :nth-child(5) { animation-delay: .16s; }
.screen.is-enter > :nth-child(6), .rise > :nth-child(6) { animation-delay: .2s; }
.screen.is-enter > :nth-child(n + 7), .rise > :nth-child(n + 7) { animation-delay: .24s; }
/* Поки підвантажується новий відбір — трохи приглушити поточний вміст, без порожнього екрана. */
/* Інша вкладка того ж розділу (.is-tab): заголовок і вкладки стоять, з'являється лише вміст під ними. */
.screen.is-tab > .tabs ~ * { animation: rise .32s cubic-bezier(.2, .7, .2, 1) backwards; }
.screen.is-refreshing { opacity: .55; pointer-events: none; transition: opacity .12s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }

/* Текст із градієнтом (великі числа, суми). */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Підпис розділу дрібними великими літерами, як «МАРШРУТ» у макеті. */
.section-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.toolbar .grow, .grow { flex: 1; min-width: 0; }
.toolbar > h1, .toolbar > h2 { margin: 0; }
/* margin-bottom шапки з h1 задає .page-head у lists.css — тут лише рядковий gap. */
.toolbar:has(> h1) { row-gap: var(--sp-3); }
.toolbar:has(> h2) { margin-top: var(--sp-6); }

/* Поки екран вантажиться — скелет заголовка й рядків (з'являється із затримкою, щоб не блимати). */
.screen[aria-busy="true"]:empty::before,
.screen[aria-busy="true"]:empty::after {
  content: "";
  display: block;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface2) 0 38%, color-mix(in srgb, var(--sky) 14%, var(--surface2)) 50%, var(--surface2) 62% 100%) 0 0 / 300% 100%;
  animation: skeleton-in .2s .15s both, shimmer 1.4s linear infinite;
}
.screen[aria-busy="true"]:empty::before { width: 260px; height: 32px; margin-bottom: var(--sp-6); }
/* Під заголовком — ряд плиток, далі рядки списку. */
.screen[aria-busy="true"]:empty::after {
  height: 420px;
  border-radius: var(--radius-lg);
  -webkit-mask:
    linear-gradient(90deg, #000 0 23.5%, transparent 23.5% 25.5%, #000 25.5% 49%, transparent 49% 51%, #000 51% 74.5%,
      transparent 74.5% 76.5%, #000 76.5%) top / 100% 96px no-repeat,
    repeating-linear-gradient(#000 0 46px, transparent 46px 58px) 0 120px / 100% 300px no-repeat;
  mask:
    linear-gradient(90deg, #000 0 23.5%, transparent 23.5% 25.5%, #000 25.5% 49%, transparent 49% 51%, #000 51% 74.5%,
      transparent 74.5% 76.5%, #000 76.5%) top / 100% 96px no-repeat,
    repeating-linear-gradient(#000 0 46px, transparent 46px 58px) 0 120px / 100% 300px no-repeat;
}
@keyframes skeleton-in { from { opacity: 0; } }
@keyframes shimmer { to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 22px; margin-bottom: var(--sp-4); }
}