/* ARAI — Materials (arai.build/{ru,kk,en}/resources, the English task and support pages): what is
   the shelf's own and nothing else. Tokens, faces, chrome and every component come from the Design
   Kit (/_ds/<hash>/kit.css, DESIGN.md §17 phase 3); this file is the `surface` layer, built from role
   and structure tokens only. Light only (§15): the old dark scheme is gone. */
@layer surface {
  .mat-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px 72px; }
  @media (width >= 1024px) { .mat-main { padding-top: 40px; } }
  .mat-main > *, .mat-body > * { max-width: var(--a-w-reading); }
  .mat-main > .mat-tools, .mat-main > .mat-results, .mat-main > .mat-tool { max-width: none; }
  .mat-scope { max-width: 62ch; }

  /* the hub's two tools: entry rows whose title is a heading */
  .mat-entry-h { margin: 0; font: inherit; }

  /* a disclosure: method notes and reference details, closed by default */
  .mat-more { border-top: var(--a-line-hair) solid var(--a-border); border-bottom: var(--a-line-hair) solid var(--a-border); }
  .mat-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: var(--a-type-ui); }
  .mat-more summary::-webkit-details-marker { display: none; }
  .mat-more summary::after { content: "+"; font: var(--a-type-meta); color: var(--a-accent); }
  .mat-more[open] summary::after { content: "−"; }
  .mat-more summary:hover { color: var(--a-accent); }
  .mat-more__body { padding-bottom: 16px; max-width: 62ch; color: var(--a-foreground-secondary); }

  .mat-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  @media (width < 640px) { .mat-actions > .a-btn { flex: 1 1 auto; } }

  /* the tool: the form in its card, results as cards under a section rule */
  .mat-tool { gap: 16px; }
  .mat-results { padding-top: 32px; }
  .mat-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .result-row { gap: 16px; }
  .result-row h3 { font: var(--a-type-title); letter-spacing: var(--a-track-title); }
  .original { margin: 0; padding: 12px 16px; white-space: pre-wrap; background: var(--a-surface-muted); border-left: var(--a-line-rule) solid var(--a-border-strong); font: var(--a-type-small); }
  .result-row summary { font: var(--a-type-ui); color: var(--a-foreground-secondary); }
  .result-row details[open] summary { margin-bottom: 8px; }
  .fields { gap: 16px; }
  @media (width >= 768px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fields .wide { grid-column: 1 / -1; } }
  .fields .a-textarea { min-height: 72px; }

  .candidate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; border: var(--a-line-hair) solid var(--a-border); }
  .candidate h4 { font: var(--a-type-ui); font-family: var(--a-mono); color: var(--a-accent); }
  .candidate dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 0; font: var(--a-type-small); }
  .candidate dt { color: var(--a-foreground-muted); }
  .candidate dd { margin: 0 0 8px; }
  @media (width >= 640px) { .candidate dl { grid-template-columns: minmax(10rem, 1fr) 2fr; } .candidate dd { margin: 0; } }

  .mat-unmatched { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; }
  .mat-unmatched h3 { font: var(--a-type-title); }
  .continuation { margin-top: 24px; gap: 16px; }

  /* the task and support pages: a reading column under the page header */
  .mat-body { padding-block: 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  @media (width >= 1024px) { .mat-body { padding-top: 40px; } }
  .mat-lead-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; }

  /* German compounds (Auftragsverarbeitungsvertrag, Datenschutzerklärung) are wider than a phone
     column at 200 % text: let them hyphenate, and break where no dictionary applies (WCAG 1.4.10). */
  main:lang(de) { hyphens: auto; overflow-wrap: anywhere; }
}