/* Global spacing. One scale (tokens in styles.css :root) and one rule per kind of stack, so blocks never touch and every screen
   breathes the same way:
     --space-section  between the cards / sections of a screen
     --space-block    between the blocks inside a card or panel
     --space-list     between rows or cards of a list (and between buttons in a row)
     --space-inline   between small items in a line (chips, icons)
   A stack is a grid with a gap; its children carry no vertical margins of their own, so a margin left in older CSS cannot double the
   gap or, worse, be missing. Loaded after every other stylesheet. To add a new screen, use one of these container classes (or add the
   new class to the matching list) instead of writing margins between its blocks. */

/* Screens: cards and sections. */
:is(.dashboard, .pilot-page, .friends-page, .vocab-page, .practice-page, .debate-page, .tutor-page, .lv-page) {
  display: grid; gap: var(--space-section); align-content: start;
}

/* Inside a card or panel: blocks. */
:is(.stats, .st-card, .fr-section, .db-result, .lv-intro, .lv-result, .lv-done, .lv-analyzing, .tutor-embed, .tutor-card, .tutor-summary,
    .settings, .settings-card, .level-card, .translate, .tr-card, .vp-card, .lsec) {
  display: grid; gap: var(--space-block); align-content: start;
}

/* Rows and cards of a list. */
:is(.path-list, .vocab-list, .fr-list, .fr-grid, .ch-list, .fr-board, .cmp, .db-cats, .db-scores, .db-roles, .st-badges, .tutor-chat-log) {
  gap: var(--space-list);
}

/* The children of a stack never add their own vertical margins. */
:is(.dashboard, .pilot-page, .friends-page, .vocab-page, .practice-page, .debate-page, .tutor-page, .lv-page,
    .stats, .st-card, .fr-section, .db-result, .lv-intro, .lv-result, .lv-done, .lv-analyzing, .tutor-embed, .tutor-card, .tutor-summary,
    .settings, .settings-card, .level-card, .translate, .tr-card, .vp-card, .lsec):not(#stack) > * {
  /* `:not(#stack)` only raises the specificity, so this wins over older one-off margins such as `.logout { margin-top }`. */
  margin-block: 0;
}

/* A chat log with a minimum height keeps its bubbles at their own height (grid rows would otherwise stretch to fill the space). */
.tutor-chat-log { align-content: start; }
.rd-glossary { row-gap: var(--space-list); }

/* A small label above a page title stays close to it. */
.page-head { display: grid; gap: var(--space-inline); }

/* ---- Global form and page rules ----
   Form fields are at least 16px: iOS Safari zooms the page in when a smaller field is focused, and the page then slides sideways. */
:is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]):not(#form) {
  font-size: max(16px, 1em);
}
/* No double-tap zoom delay on controls; nothing may make the page wider than the screen. */
:is(a, button, input, select, textarea, label, summary) { touch-action: manipulation; }
html, body { max-width: 100%; overflow-x: clip; }