/* cms base: reset, typography, layout primitives, utilities. Depends on
   tokens.css. Naming is BEM-lite (docs/design-system.md). */

/* --- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-md)/var(--leading-normal) var(--font-sans);
  color: var(--text);
  background: var(--bg);
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
code, kbd, pre { font-family: var(--font-mono); font-size: var(--text-sm); }
code, kbd { background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); }
pre { background: var(--surface-2); padding: var(--space-3); border-radius: var(--radius-md); overflow: auto; }
[hidden] { display: none !important; }

/* Focus: keyboard only, same ring everywhere (a11y minimum). */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* --- Typography --------------------------------------------------------- */
h1, .h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
h2, .h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h3, .h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
h4, .h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
small, .u-small { font-size: var(--text-sm); }
.u-prose { line-height: var(--leading-relaxed); white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- App shell: topnav over main; no sidebar since Phase 1b. Three
   widths: default (settings tables), --medium (lists, wizard), --narrow
   (login, upload). ------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app__main { flex: 1; min-width: 0; padding: var(--space-8) var(--space-6) var(--space-12); }
.app__main > .container { max-width: var(--content-max); margin: 0 auto; }
.app__main--medium > .container { max-width: 960px; }
.app__main--narrow > .container { max-width: 640px; }

/* --- Layout primitives: stack (vertical), cluster (inline wrap), grid
   (auto-fill tiles), split (two columns that collapse) ------------------ */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--nowrap { flex-wrap: nowrap; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 240px), 1fr)); }
.grid--tight { gap: var(--space-2); --grid-min: 160px; }
.split { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split--aside { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.page-head__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.section { margin-top: var(--space-8); }
.section > h2 { margin-bottom: var(--space-3); }

@media (max-width: 1024px) {
  .split, .split--aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .app__main { padding: var(--space-5) var(--space-4) var(--space-10); }
}
/* Phone: room under the content for the fixed tab bar; a page with a sticky .actionbar ends on
   the bar itself (the tab bar hides there, components.css). */
@media (max-width: 640px) {
  .app__main { padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom)); }
  .app__main:has(.actionbar) { padding-bottom: 0; }
  h1, h2, h3 { overflow-wrap: anywhere; }
}

/* --- Utilities ------------------------------------------------------------ */
.u-muted { color: var(--muted); }
.u-danger { color: var(--danger); }
.u-success { color: var(--success); }
.u-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.u-num { font-variant-numeric: tabular-nums; text-align: right; }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-full { width: 100%; }
.u-grow { flex: 1; min-width: 0; }
.u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); }
.u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); }
/* Phone-only / desktop-only bits of text (breakpoint 640px, docs/design-system.md › Телефон). */
@media (min-width: 641px) { .u-phone { display: none !important; } }
@media (max-width: 640px) { .u-desk { display: none !important; } }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Icons: inline SVG sprite, 16px, stroke currentColor. */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -3px; }
.icon--sm { width: 12px; height: 12px; }
.icon--lg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }