/*
 * ALPI Sites admin: components in the Actum design system (owner cabinet). Loaded after fonts.css,
 * tokens.css, base.css and motion.css; values come from tokens only. No inline styles anywhere
 * (CSP style-src 'self'): runtime positions are set through the CSSOM by admin.js.
 */

/* Out-of-scale sizes the design system fixes for the owner cabinet («Размеры вне шкалы», «Section и PageHead»,
   ThemeSwitch, status dots, Facts), named once here so the rules below stay on variables. */
:root {
  --fs-page: 40px; --lh-page: 1.05; --tr-page: -0.04em;       /* h1 of cabinet pages, 32px ≤760 */
  --fs-login: 40px;                                             /* h1 of the sign-in panel, 34px ≤640 */
  --fs-section: 17px; --lh-section: 1.25; --tr-section: -0.015em; /* h2 of sections */
  --fs-switch: 13px; --fs-switch-label: 12px; --fs-count: 12px;  /* ThemeSwitch options and label, counters */
  --pad-y: 14px; --pad-x: 18px;                                 /* section head, list rows; 12/16 ≤640 */
  --dot: 7px;                                                   /* status dot */
  --mark: 20px;                                                 /* step mark */
  --avatar: 24px;
  --facts-term: 96px; --facts-term-wide: 140px;
  --dim: .62;                                                   /* archived / disabled / spam rows */
  --shadow-accent-hover: 0 0 0 1px rgb(0 0 0 / .12), 0 10px 28px -10px var(--accent-line); /* primary button hover */
}
@media (max-width: 760px) { :root { --fs-page: 32px; } }
@media (max-width: 640px) { :root { --pad-y: 12px; --pad-x: 16px; --fs-login: 34px; } }

/* ---------- small helpers ---------- */
.break { overflow-wrap: anywhere; }
.prewrap { white-space: pre-wrap; }
/* hostnames, slugs, paths and URLs: plain Fixel even inside .meta, because «Num» would set every dot, colon and
   slash in Martian («ai . alpi . academy»); values to copy or type use .mono (the whole string in Martian) */
.host { font-family: var(--ff-text); overflow-wrap: anywhere; }
.icon { display: block; flex: none; }
.inline-form { display: inline-flex; margin: 0; }
.bullets { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-1); }
.paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-meta); color: var(--ink-2); }
.extlink { display: inline-flex; align-items: center; gap: var(--s-1); }
.extlink .icon { color: var(--ink-3); }

/* ---------- top bar (TopBar, owner view) ---------- */
.top { position: relative; z-index: var(--z-top); }
.top__inner {
  max-width: var(--page-owner); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; gap: 14px;
}
.topnav { display: flex; gap: 2px; margin-left: 14px; min-width: 0; }
.topnav__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--ink-3); font-size: var(--fs-small); line-height: 1.3; padding: 6px 10px;
  border-radius: var(--r-inner); text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.topnav__link:hover { color: var(--ink-2); }
/* the current section: a grey pill in dark, a lilac one in light */
.topnav__link[aria-current="page"] { color: var(--nav-on-ink); background: var(--nav-on); }
.top__end { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }

/* the navigation takes the second row and scrolls sideways inside itself (4 px block padding keeps focus rings) */
@media (max-width: 1100px) {
  .top[data-nav] .top__inner { flex-wrap: wrap; row-gap: 10px; }
  .top[data-nav] .topnav {
    order: 3; flex: 1 0 100%; margin: -2px calc(-1 * var(--gutter)); padding: 4px var(--gutter); overflow-x: auto;
  }
}
@media (max-width: 640px) {
  .top__inner { flex-wrap: wrap; row-gap: 10px; padding-top: 14px; padding-bottom: 10px; }
  .topnav__link { padding-inline: 8px; }
  /* the switch may not share a line with the account on a phone: let them wrap */
  .top__end { gap: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}

/* ScrollRow: no scrollbar, soft snap, the edge with more items fades out (data-more from admin.js) */
.scrollrow {
  --fade: 32px;
  scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--fade);
}
.scrollrow::-webkit-scrollbar { display: none; }
.scrollrow > a { scroll-snap-align: start; }
.scrollrow[data-more="end"] { mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--fade)), transparent); }
.scrollrow[data-more="start"] { mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--fade)), transparent); }
.scrollrow[data-more="both"] {
  mask-image: linear-gradient(to right, transparent, var(--ink) var(--fade), var(--ink) calc(100% - var(--fade)), transparent);
}

/* ---------- logo: mark in --accent-solid plus the wordmark in Fixel Display 700 ---------- */
.logo {
  display: inline-flex; align-items: center; gap: .26em; flex: none;
  font: 700 var(--fs-logo)/1 var(--ff-display); letter-spacing: var(--tr-logo);
  color: var(--ink); text-decoration: none; border-radius: var(--r-inner);
}
.logo__text { white-space: nowrap; }
/* viewBox 740 × 660 font units → .785em × .7em: the cap height of the wordmark */
.logo__mark { display: block; flex: none; width: .785em; height: .7em; overflow: visible; }
.logo__peak {
  fill: none; stroke: var(--accent-solid); stroke-width: 140; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
}
.logo__sun { fill: var(--accent-solid); transform-box: fill-box; transform-origin: 50% 50%; }
/* draw-in: the peak is drawn left to right, then the sun drops in on a spring (replayed on hover by admin.js) */
.logo[data-play] .logo__peak { animation: logo-peak .95s .1s var(--ease) both; }
.logo[data-play] .logo__sun { animation: logo-sun .6s .75s cubic-bezier(.3, 1.45, .5, 1) both; }
@keyframes logo-peak { from { stroke-dashoffset: 100; } }
@keyframes logo-sun { from { transform: translateY(-35%); opacity: 0; } }

/* ---------- ThemeSwitch: Тёмная / Светлая / Как в системе («Авто» up to 640 px) ---------- */
.theme {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px; margin: 0;
  border-radius: var(--r-control); background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.theme__group { font-size: var(--fs-switch-label); color: var(--ink-3); padding: 0 4px 0 8px; }
.theme__options { display: flex; gap: 4px; }
.theme__option {
  border: 0; background: none; padding: 6px 11px; border-radius: var(--r-inner);
  font-size: var(--fs-switch); line-height: 1.3; color: var(--ink-3); white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.theme__option:hover { color: var(--ink-2); }
.theme__option[data-on] { background: var(--hover); color: var(--ink); }
.theme__short { display: none; }
@media (max-width: 640px) {
  .theme__group, .theme__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme__short { display: inline; }
  .theme__option { padding: 6px 9px; }
}

/* ---------- PersonMenu: avatar, email, «Выйти» ---------- */
.person { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; color: var(--ink-2); }
@media (max-width: 640px) { .person__name { display: none; } }
.avatar {
  width: var(--avatar); height: var(--avatar); flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-2);
}
.avatar--initials {
  display: inline-grid; place-items: center; background: var(--hover); color: var(--ink-2);
  font: 500 var(--fs-label)/1 var(--ff-text);
}

/* ---------- page frame ---------- */
.page { max-width: var(--page-owner); margin: 0 auto; padding: 8px var(--gutter) 60px; }
.main { display: block; min-width: 0; }
.main:focus { outline: none; }
.column { display: grid; gap: var(--s-5); min-width: 0; }
/* from 1024 px: content on the left, a side column (340–460 px) on the right, .more-col under the main one */
.split { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
.main-col, .side-col, .more-col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
/* forms in the side column stack their fields as on a phone (@container below) */
.side-col { container-type: inline-size; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-page));
    grid-template-rows: auto 1fr;
    grid-template-areas: "main side" "more side";
  }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-col { grid-area: main; }
  .side-col { grid-area: side; }
  .more-col { grid-area: more; }
}

/* PageHead: «← back», h1 Display 500 40/1.05 (32 ≤760), lead --ink-2 up to 62ch, actions at the end */
.head { display: grid; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2); min-width: 0; }
.back {
  display: inline-flex; align-items: center; justify-self: start;
  font-size: var(--fs-ui); color: var(--ink-3); text-decoration: none;
  transition: color var(--dur-fast);
}
.back:hover { color: var(--ink); }
.head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
.head__main { display: grid; gap: var(--s-2); min-width: 0; }
.h1 { font: 500 var(--fs-page)/var(--lh-page) var(--ff-display); letter-spacing: var(--tr-page); overflow-wrap: anywhere; text-wrap: balance; }
.lead { color: var(--ink-2); max-width: 62ch; }
.lead .metalist a { color: var(--ink-2); }
.head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* site pages: head plus the site's tabs */
.sitehead { display: grid; gap: var(--s-2); min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 4px 4px var(--s-3); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none;
  color: var(--ink-3); font-size: var(--fs-small); line-height: 1.3; padding: 6px 10px; border-radius: var(--r-inner);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.tab:hover { color: var(--ink-2); }
.tab[aria-current="page"] { color: var(--nav-on-ink); background: var(--nav-on); }
.tab__count { font-size: var(--fs-count); }
.tab[aria-current="page"] .tab__count { color: var(--nav-on-meta); }
@media (max-width: 640px) {
  .tabs { margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .tab { padding-inline: 8px; }
}

/* sub-page head inside a site (release page) */
.subhead { display: grid; gap: var(--s-2); min-width: 0; }
.subhead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.subhead__title { display: flex; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap; min-width: 0; }
.h2-page { font: 500 var(--fs-h2)/var(--lh-h2) var(--ff-display); letter-spacing: var(--tr-h2); }

/* ---------- Panel and Section ---------- */
.panel {
  position: relative; min-width: 0;
  background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow);
  overflow: hidden;
  overflow: clip; /* clips like hidden but is no scroll container, so sticky children still stick */
  transition: box-shadow var(--dur-base);
}
/* a soft neutral highlight along the top edge */
.panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.section__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--pad-y) var(--pad-x); border-bottom: 1px solid var(--line);
}
.h2 { font: 500 var(--fs-section)/var(--lh-section) var(--ff-display); letter-spacing: var(--tr-section); }
.section__meta { display: flex; align-items: center; gap: var(--s-2); }
.section__body { padding: var(--pad-x); display: grid; gap: var(--s-4); min-width: 0; }
.section__body--flush { padding: 0; gap: 0; }
.section__intro { padding: var(--pad-y) var(--pad-x) 2px; }
/* a part of a section with its own small heading (Telegram's .partTitle) */
.part { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); min-width: 0; }
.h3 { font: 600 var(--fs-body)/var(--lh-h3) var(--ff-text); color: var(--ink); }
/* toolbar row inside a flush section: filters on the left, an action on the right */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); flex-wrap: wrap;
  padding: 10px var(--pad-x); border-bottom: 1px solid var(--line);
}
.bar__start { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; min-width: 0; }
.filter { margin: 0; }
.filter .meta { white-space: nowrap; }

/* pagination under a list: «Показаны 1–50 из 120» on the left, «Новее» / «Старше» on the right */
.pager {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: 12px var(--pad-x); border-top: 1px solid var(--line);
}
.pager__links { display: flex; gap: var(--s-2); }

/* Block: a raised inner card */
.block { border-radius: var(--r-block); box-shadow: 0 0 0 1px var(--line); padding: 14px; background: var(--raised); min-width: 0; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list__item { border-bottom: 1px solid var(--line); min-width: 0; }
.list__item:last-child { border-bottom: 0; }

/* a whole row as a link (InboxItem) */
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: var(--pad-y) var(--pad-x); color: inherit; text-decoration: none; transition: background-color var(--dur-fast);
}
.item:hover { background: var(--hover); }
.item:focus-visible { outline-offset: -2px; border-radius: 0; }
.item__main { min-width: 0; display: grid; gap: 1px; }
.item__title { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item__end { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-small); }

/* a row with its own actions */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) 14px; align-items: start; padding: var(--pad-y) var(--pad-x); }
/* the published version: the accent edge */
.row[data-current] { box-shadow: inset 2px 0 0 var(--accent-solid); }
.row__main { min-width: 0; display: grid; gap: var(--s-1); }
.row__title { font-weight: 500; text-decoration: none; justify-self: start; overflow-wrap: anywhere; }
a.row__title:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
.row__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); min-width: 0; font-size: var(--fs-small); }
.btnrow { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-start; }
.row__end .btnrow { justify-content: flex-end; }
@media (max-width: 640px) {
  .item { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .item__end { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--s-3); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__end { align-items: flex-start; }
  .row__end .btnrow { justify-content: flex-start; }
}

/* users */
.user__main { display: flex; align-items: flex-start; gap: var(--s-3); }
.user__main .avatar { margin-top: 1px; }
.user__text { display: grid; gap: 2px; min-width: 0; }
.user[data-disabled] .row__main { opacity: var(--dim); }
.role-form { gap: var(--s-2); align-items: center; }

/* redirects */
.redirect { grid-template-columns: minmax(0, 1fr); font-size: var(--fs-ui); }
.redirect__to { color: var(--ink-2); }

/* submissions */
.submission { display: grid; gap: var(--s-3); padding: var(--pad-y) var(--pad-x); }
.submission[data-spam] > :not(.submission__head) { opacity: var(--dim); }
.submission__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.submission__page { font-size: var(--fs-meta); color: var(--ink-3); }
.submission__page a { color: var(--ink-2); }
.strong-link { color: var(--ink-2); font-weight: 500; text-decoration: none; }
.strong-link:hover { color: var(--ink); }

/* audit timeline («Ход задачи»): time in meta, who, what */
.event { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 14px; padding: 10px var(--pad-x); font-size: var(--fs-ui); }
.event__time { padding-top: 1px; }
.event__main { display: grid; gap: 2px; min-width: 0; }
.event__who { color: var(--ink-2); font-weight: 500; margin-right: 6px; }
.event__site { margin-left: 6px; color: var(--ink-2); }
.event__details { display: block; }
@media (max-width: 640px) { .event { grid-template-columns: minmax(0, 1fr); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0; border: 0; font: inherit; line-height: 1.25; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn:active:not(:disabled):not([data-busy]) { transform: scale(.97); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn[data-busy] { cursor: progress; }

.btn--primary {
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-body);
  border-radius: var(--r-control); padding: 11px 16px; box-shadow: var(--shadow-accent);
}
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-accent-hover); }
.btn--ghost {
  background: none; color: var(--ink); font-size: var(--fs-ui);
  border-radius: var(--r-control); padding: 10px 14px; box-shadow: 0 0 0 1px var(--line-2);
}
.btn--ghost:hover:not(:disabled) { background: var(--hover); }
.btn--quiet { background: none; color: var(--ink-3); font-size: var(--fs-ui); padding: 8px 6px; border-radius: var(--r-inner); }
.btn--quiet:hover:not(:disabled) { color: var(--ink); }
.btn--sm.btn--primary { padding: 7px 12px; font-size: var(--fs-ui); gap: 8px; }
.btn--sm.btn--ghost { padding: 7px 11px; font-size: var(--fs-small); }
.btn--sm.btn--quiet { padding: 6px 4px; font-size: var(--fs-small); }
.copy { gap: 6px; }
.copy[data-done] { color: var(--accent-text); }

/* ---------- statuses: words with a small dot, never a pill ---------- */
.status { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; color: var(--ink-3); }
.status__dot { width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: var(--ink-3); translate: 0 -1px; }
/* «включённая» dot: --accent-solid with a halo */
.status[data-tone="ok"] { color: var(--ink-2); }
.status[data-tone="ok"] .status__dot { background: var(--accent-solid); box-shadow: 0 0 0 3px var(--accent-wash); }
/* working: the accent dot sends a soft ring out */
.status[data-tone="live"] { color: var(--ink-2); }
.status[data-tone="live"] .status__dot { background: var(--accent-solid); animation: actum-pulse 1.6s infinite; }
/* waiting for its turn: the accent dot breathes */
.status[data-tone="wait"] .status__dot { background: var(--accent-solid); animation: actum-breathe 1.4s var(--ease) infinite; }
/* attention: warnings and failures (a failed copy, a DNS error, a failed delivery) are amber, never red */
.status[data-tone="warn"] { color: var(--ask); }
.status[data-tone="warn"] .status__dot { background: var(--ask); }

/* ---------- notices («Кольцо или граница»: an inset edge and a wash). No red notice: red is for field errors,
   aria-invalid rings and the error toast; a form-level error is a p.error next to the submit button ---------- */
.notice {
  display: grid; gap: var(--s-1); min-width: 0;
  font-size: var(--fs-ui); color: var(--ink); padding: 10px 12px; border-radius: var(--r-chip);
  background: var(--ask-wash); box-shadow: inset 2px 0 0 var(--ask);
}
.notice[data-tone="info"] { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent-solid); }
.notice__title { font-weight: 500; }
.inline-note { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }

/* ---------- key–value data ---------- */
.facts { display: grid; grid-template-columns: var(--facts-term) minmax(0, 1fr); gap: var(--s-2) 14px; margin: 0; font-size: var(--fs-ui); }
.facts--wide { grid-template-columns: var(--facts-term-wide) minmax(0, 1fr); }
.facts__row { display: contents; }
.facts__row dt { padding-top: 2px; overflow-wrap: anywhere; }
.facts__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .facts--wide { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .facts--wide .facts__row dd { margin-bottom: 6px; }
}
@media (max-width: 380px) { .facts { grid-template-columns: 80px minmax(0, 1fr); } }

/* MetaList: items separated by space, never «·» */
.metalist { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25em; row-gap: 2px; min-width: 0; }
.metalist__item { min-width: 0; overflow-wrap: anywhere; }
.metalist a { color: var(--ink-2); }

/* numbers of a release */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-3) var(--s-4);
  margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.stats__item { display: grid; gap: 2px; min-width: 0; }
.stats__item dd { margin: 0; font: 400 var(--fs-h3)/var(--lh-h3) var(--ff-meta); color: var(--ink); white-space: nowrap; }

/* trackers (AiUsage table): hairline rows, meta headings, numbers in --ff-meta */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.table th, .table td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.table tr > * + * { padding-left: var(--s-4); }
.table thead > tr > * { padding-top: 0; }
.table thead th { font: 400 var(--fs-meta)/var(--lh-meta) var(--ff-text); color: var(--ink-3); }
.table tbody th { font-weight: 400; color: var(--ink-2); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .table__num { text-align: right; font-family: var(--ff-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__id { font-family: var(--ff-meta); color: var(--ink); overflow-wrap: anywhere; }

/* DNS records: type, name → value, copy */
.dnsrecs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.dnsrec {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dnsrec__main { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-ui); }
.dnsrec__value { color: var(--ink-2); }
.notes { display: grid; gap: var(--s-3); margin: 0; font-size: var(--fs-ui); }
.notes__row { display: grid; gap: 2px; }
.notes__row dt { font-weight: 500; }
.notes__row dd { margin: 0; color: var(--ink-2); }

/* live addresses with copy */
.urllist { display: grid; gap: var(--s-3); }
.urlline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); flex-wrap: wrap; min-width: 0; }
.urlline__main { display: flex; align-items: baseline; gap: 2px var(--s-3); flex-wrap: wrap; min-width: 0; }
.urlline__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; min-width: 0; }
.urlline__link .icon { color: var(--ink-3); }
.urlline__link:hover .host { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.urlblock { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
/* on a phone, and in the narrow side column, the copy buttons next to addresses and DNS values keep only the icon
   (the name stays in aria-label and title) */
@media (max-width: 640px) {
  .urlline { flex-wrap: nowrap; align-items: flex-start; }
  .urlline .copy { padding-inline: 9px; }
  .urlline .copy [data-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 30rem) {
  .dnsrec .copy { padding-inline: 9px; }
  .dnsrec .copy [data-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.latest { padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ---------- empty states ---------- */
.empty { padding: var(--s-8) var(--s-6); }
.empty__title { font: 500 var(--fs-h3)/var(--lh-h3) var(--ff-display); letter-spacing: var(--tr-h3); }
.empty__text { margin-top: var(--s-2); max-width: 44ch; color: var(--ink-2); }
.empty__action { margin-top: var(--s-4); }
.empty__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.section__body > .empty { padding: var(--s-2) 0; }
.section__body--flush > .empty { padding: 28px var(--pad-x); }
.errorpanel { max-width: 40rem; margin-top: var(--s-3); }

/* ---------- steps (checklist): done, now, todo ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.steps li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-ui); color: var(--ink-2); }
.steps__mark {
  flex: none; display: grid; place-items: center; width: var(--mark); height: var(--mark); border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3);
  font: 500 var(--fs-label)/1 var(--ff-meta);
}
.steps [data-state="now"] > .steps__mark { box-shadow: inset 0 0 0 1.5px var(--accent-solid); color: var(--accent-text); }
.steps [data-state="now"] .steps__title { font-weight: 500; color: var(--ink); }
.steps [data-state="done"] > .steps__mark { background: var(--accent-solid); box-shadow: none; color: var(--accent-ink); }
.steps__text { display: grid; gap: 2px; min-width: 0; }
.steps__title { line-height: var(--mark); }
.steps a { color: inherit; }

/* ---------- Disclosure (scripts) ---------- */
.disclosures { display: grid; min-width: 0; }
.disclosure { border-top: 1px solid var(--line); }
.disclosure__summary {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 12px 0; cursor: pointer;
  list-style: none; font-size: var(--fs-ui); color: var(--ink-2); border-radius: var(--r-inner);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { color: var(--ink); }
.disclosure__label { font-weight: 500; color: var(--ink); }
.disclosure__chevron {
  width: 7px; height: 7px; flex: none; margin: 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease);
}
.disclosure[open] > .disclosure__summary .disclosure__chevron { transform: rotate(45deg); }
.disclosure__body { padding: 2px 0 14px; display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.disclosure__body > .form { justify-self: stretch; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s-4); min-width: 0; margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }
/* the same in a narrow side column (.side-col is the container) */
@container (max-width: 30rem) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }
.fieldrow { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.grow { flex: 1 1 240px; min-width: 0; }
.actions { display: flex; gap: var(--s-2) var(--s-3); flex-wrap: wrap; align-items: center; }
form.main-col { margin: 0; }
.group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.label { font-size: var(--fs-ui); font-weight: 500; color: var(--ink); }
.hint { font: 400 var(--fs-meta)/var(--lh-meta) var(--ff-text); color: var(--ink-3); }
.error { font: 400 var(--fs-meta)/var(--lh-meta) var(--ff-text); color: var(--danger); }

.input,
.textarea,
.select {
  width: 100%; min-width: 0; border: 0; margin: 0;
  border-radius: var(--r-chip); background: var(--raised); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2);
  padding: 9px 12px; font-size: var(--fs-ui); line-height: 1.45;
  transition: box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.input:hover,
.textarea:hover,
.select:hover { box-shadow: 0 0 0 1px var(--ink-3); }
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--danger); }
.input:disabled,
.textarea:disabled,
.select:disabled { opacity: .55; cursor: not-allowed; }
.input[readonly],
.textarea[readonly] { background: var(--surface); }
.textarea { resize: vertical; min-height: 88px; }
.tall { min-height: 160px; }
.select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.select--auto { width: auto; min-width: 11rem; max-width: 100%; }
.mono { font-family: var(--ff-mono); font-size: 13px; letter-spacing: -0.01em; }
.input--num { width: 9rem; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-ui); color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent-solid); cursor: pointer; }
.check input:disabled { cursor: not-allowed; }
.check input:disabled + span { color: var(--ink-3); }
.check .hint { display: block; margin-top: 2px; }

/* radio chips («Радио-чипы»): native radios, each invisible over its chip */
.choices { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-ui); font-weight: 500; }
.choice { position: relative; display: inline-flex; max-width: 100%; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 6px 11px; border-radius: var(--r-chip);
  background: var(--raised); box-shadow: 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: var(--fs-small);
  transition: box-shadow var(--dur-fast), color var(--dur-fast);
}
.choice input:checked + span { box-shadow: 0 0 0 1.5px var(--ink); color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.choice small { color: var(--ink-3); font-size: var(--fs-meta); }

/* file picker: the native button dressed as ghost sm */
.file { width: 100%; min-width: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.file::file-selector-button {
  margin-right: var(--s-3); border: 0; font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: none; border-radius: var(--r-control); padding: 7px 11px; box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer; transition: background-color var(--dur-fast);
}
.file::file-selector-button:hover { background: var(--hover); }
.progress { display: grid; gap: 6px; }
.progress progress {
  appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--r-pill);
  background: var(--hover); color: var(--accent-solid); overflow: hidden;
}
.progress progress::-webkit-progress-bar { background: var(--hover); border-radius: var(--r-pill); }
.progress progress::-webkit-progress-value { background: var(--accent-solid); border-radius: var(--r-pill); transition: width var(--dur-base) var(--ease); }
.progress progress::-moz-progress-bar { background: var(--accent-solid); border-radius: var(--r-pill); }

/* settings: one form across several sections, a sticky save bar under them */
.settings { display: grid; gap: var(--s-5); margin: 0; min-width: 0; }
.savebar {
  position: sticky; bottom: 12px; z-index: var(--z-top);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: 12px 14px; border-radius: var(--r-block); background: var(--surface); box-shadow: var(--shadow);
}
/* on a phone the sticky bar keeps to one row: the button (and an error, if any) */
@media (max-width: 640px) { .savebar .meta-prose { display: none; } }

/* ---------- InlineConfirm: a strip under the trigger instead of a dialog ----------
   <details class="confirm"> with the trigger as <summary> and the only submit («Да, …») in the strip, so it works
   without JS; admin.js adds focus, «Отмена» and Escape. The typed-slug form (delete site) builds its strip in JS. */
.confirm { display: inline-block; vertical-align: top; max-width: 100%; margin: 0; }
.confirm__trigger { list-style: none; width: fit-content; }
.confirm__trigger::-webkit-details-marker { display: none; }
.confirm__trigger::marker { content: ""; }
.confirm__strip {
  display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  width: max-content; max-width: min(340px, calc(100vw - 2 * var(--gutter) - 2 * var(--pad-x)));
  margin-top: var(--s-2); padding: 10px 12px 10px 14px; border-radius: var(--r-block);
  background: var(--raised); box-shadow: 0 0 0 1px var(--line-2);
  white-space: normal; text-align: left;
  animation: actum-fade var(--dur-base) var(--ease);
}
.confirm__q { font-size: var(--fs-ui); color: var(--ink); max-width: 52ch; }
.confirm__actions { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
/* floating (spec «placement=floating»): the strip lies over the content under the trigger's row, so the row and
   its columns never reflow. Anchored to the end column of a list row, the head of a submission or the release
   subhead: at their right edge; on a phone it spans that whole row, wherever the trigger has wrapped to */
.row__end, .submission__head, .subhead__row { position: relative; }
.confirm--floating .confirm__strip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dialog); margin-top: 0;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-drop);
}
@media (max-width: 640px) {
  .confirm--floating .confirm__strip { left: 0; right: 0; width: auto; max-width: none; }
}
/* a panel clips its rounded corners; while a floating strip is open it may hang below the panel */
.panel:has(.confirm--floating[open]) { overflow: visible; }
/* delete site: the typed slug, the button and the strip stacked full width */
.confirm--block { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.confirm--block .confirm__strip { align-self: flex-start; width: auto; max-width: 100%; margin-top: 0; }

/* ---------- toasts (bottom left, at most two) ---------- */
.toasts {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2); width: min(420px, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3); pointer-events: auto;
  padding: 10px 10px 10px 16px; border-radius: var(--r-block);
  background: var(--raised); box-shadow: var(--shadow); color: var(--ink); font-size: var(--fs-ui);
  animation: toast-in 420ms var(--ease-pop) both;
}
.toast[data-tone="error"] { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
/* warn (deliberate addition): attention in amber, like every warning; it stays until closed, as errors do */
.toast[data-tone="warn"] { box-shadow: inset 3px 0 0 var(--ask), var(--shadow); }
.toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__close {
  flex: none; border: 0; background: none; color: var(--ink-3); font-size: var(--fs-small);
  padding: 6px 8px; border-radius: var(--r-inner);
}
.toast__close:hover { color: var(--ink); background: var(--hover); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- release log (RunLog): exactly ten lines, the cut always between lines, fading edges ----------
   .logframe is the surface (its padding sits outside the scroll box), .logbox scrolls, ul.log has one li per entry */
.logframe {
  --log-line: calc(var(--fs-small) * var(--lh-log));
  --log-pad: 8px;
  position: relative; isolation: isolate; min-width: 0; padding: var(--log-pad) 14px;
  border-radius: var(--r-block); background: var(--raised); box-shadow: 0 0 0 1px var(--line);
}
@supports (width: round(1px, 1px)) { .logframe { --log-line: round(var(--fs-small) * var(--lh-log), 1px); } }
.logframe::before,
.logframe::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: var(--log-line); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.logframe::before { top: var(--log-pad); background: linear-gradient(var(--raised), transparent); }
.logframe::after { bottom: var(--log-pad); background: linear-gradient(transparent, var(--raised)); }
.logframe[data-above]::before,
.logframe[data-below]::after { opacity: 1; }
.logbox {
  max-height: calc(var(--log-line) * 10); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-tag); scrollbar-width: thin;
}
.logbox:focus-visible { outline-offset: 2px; }
.log {
  list-style: none; margin: 0; padding: 0; overflow: clip;
  font: 400 var(--fs-small)/var(--log-line) var(--ff-meta); color: var(--ink-2);
}
/* a wrapped entry hangs its continuation, so it never reads as a new entry */
.log li { padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; }
.log .at { color: var(--ink-3); margin-right: 10px; }
.log [data-kind="system"] { color: var(--ink-3); }

/* ---------- sign-in and pages without a session ---------- */
.bare { max-width: var(--page-owner); margin: 0 auto; padding: 8vh var(--gutter) 90px; display: grid; justify-items: center; }
.bare:focus { outline: none; }
.login {
  width: 100%; max-width: 28rem; padding: 28px 28px 24px; display: grid; gap: var(--s-5);
  animation: actum-rise var(--dur-rise) var(--ease) both;
}
.login__h1 { font-size: var(--fs-login); }
.login__lead { color: var(--ink-2); }
.login__actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.login__note { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.bare .errorpanel { width: 100%; max-width: 32rem; margin: 0; animation: actum-rise var(--dur-rise) var(--ease) both; }
@media (max-width: 640px) { .login { padding: 22px 18px 20px; } }

/* ---------- CursorLight (admin.js): a small lilac spot after the mouse, a soft wave from a click ---------- */
.cursor { pointer-events: none; }
.cursor__spot,
.cursor__wave {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none;
  width: var(--cursor-size); height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border-radius: 50%; mix-blend-mode: var(--cursor-blend);
}
.cursor__spot {
  background: radial-gradient(closest-side, rgb(var(--cursor-rgb) / var(--cursor-a)), rgb(var(--cursor-rgb) / calc(var(--cursor-a) * .35)) 55%, transparent);
  opacity: 0; transition: opacity var(--dur-base) var(--ease); will-change: translate;
}
.cursor[data-on] .cursor__spot { opacity: 1; }
.cursor[data-typing] .cursor__spot { opacity: 0; }
.cursor__wave {
  background: radial-gradient(closest-side, transparent 45%, rgb(var(--cursor-rgb) / var(--cursor-wave-a)) 75%, transparent);
  filter: blur(2px);
  animation: wave-grow 700ms var(--ease) forwards, wave-fade 700ms cubic-bezier(.5, 0, .75, 0) forwards;
}
@keyframes wave-grow { from { scale: .3; } to { scale: 1; } }
@keyframes wave-fade { from { opacity: 1; } to { opacity: 0; } }

/* ---------- touch: targets of at least 44 px ---------- */
@media (pointer: coarse) {
  .btn, .topnav__link, .tab, .back, .input, .select, .disclosure__summary { min-height: 44px; }
  /* the whole label is the target; the box itself grows a little */
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; margin-top: 1px; }
  .choice span { min-height: 44px; }
  .file::file-selector-button { min-height: 44px; }
  /* small text links get an invisible hit area (spec: «::after с отрицательным inset») */
  .row__title, .strong-link, .submission__page a, .head .extlink, .urlline__link, .event__site, .latest a, .facts a { position: relative; }
  .row__title::after, .strong-link::after, .submission__page a::after, .head .extlink::after,
  .urlline__link::after, .event__site::after, .latest a::after, .facts a::after {
    content: ""; position: absolute; inset: -11px -4px;
  }
}