/*
 * Стартовая страница обучения АЛЕТ — стили поверх ALET Design System (assets/alet-ui.css).
 * Только семантические токены --alet-*, слой alet.app.
 */
@layer alet.app {

  body {
    margin: 0;
    background: var(--alet-color-background);
    color: var(--alet-color-text-primary);
    font-family: var(--alet-font-sans);
    font-size: var(--alet-text-body-lg-size);
    line-height: var(--alet-text-body-lg-line-height);
    overflow-x: hidden;
  }
  :focus-visible { outline: 2px solid var(--alet-color-focus-ring); outline-offset: 2px; }
  [hidden] { display: none !important; }

  .skip-link {
    position: absolute; inset-inline-start: var(--alet-space-4); inset-block-start: -100px;
    z-index: var(--alet-z-toast); padding: var(--alet-space-2) var(--alet-space-4);
    background: var(--alet-color-action-secondary); color: var(--alet-color-action-secondary-text);
    border-radius: var(--alet-radius-md); font-size: var(--alet-text-body-size); font-weight: 600;
  }
  .skip-link:focus { inset-block-start: calc(var(--alet-space-2) + var(--alet-safe-area-top)); }

  .topbar {
    display: flex; align-items: center; gap: var(--alet-space-3); min-block-size: 60px;
    padding: calc(var(--alet-space-2) + var(--alet-safe-area-top)) var(--alet-space-6) var(--alet-space-2);
    background: var(--alet-color-surface); border-block-end: 1px solid var(--alet-color-border);
  }
  .brand { display: flex; align-items: center; gap: var(--alet-space-2); color: var(--alet-color-text-primary); }
  .brand__name { font-size: var(--alet-text-heading-lg-size); font-weight: 800; letter-spacing: 0.02em; }
  .brand__sub { font-size: var(--alet-text-body-sm-size); color: var(--alet-color-text-secondary); }

  .main { max-inline-size: var(--alet-container-lg); margin-inline: auto; padding: var(--alet-space-10) var(--alet-space-6) var(--alet-space-16); outline: none; }

  .hero { display: grid; gap: var(--alet-space-3); margin-block-end: var(--alet-space-12); }
  .hero h1 {
    margin: 0; font-size: var(--alet-text-display-size); line-height: var(--alet-text-display-line-height);
    font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; max-inline-size: 20ch;
  }
  .hero__lead { margin: 0; max-inline-size: 66ch; color: var(--alet-color-text-secondary); }

  .block + .block { margin-block-start: var(--alet-space-12); }
  .block__head { display: grid; gap: var(--alet-space-1); margin-block-end: var(--alet-space-4); }
  .block__head h2 { margin: 0; font-size: var(--alet-text-heading-lg-size); line-height: var(--alet-text-heading-lg-line-height); font-weight: 700; }
  .block__note { margin: 0; font-size: var(--alet-text-body-sm-size); color: var(--alet-color-text-muted); max-inline-size: 70ch; }

  .section-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--alet-space-4); align-items: stretch; }
  .noscript-note { grid-column: 1 / -1; font-size: var(--alet-text-body-size); color: var(--alet-color-text-secondary); }
  .section-card {
    display: grid; gap: var(--alet-space-3); align-content: start; block-size: 100%;
    padding: var(--alet-space-6); background: var(--alet-color-surface); border: 1px solid var(--alet-color-border);
    border-radius: var(--alet-radius-lg); color: var(--alet-color-text-primary); text-decoration: none;
    transition: border-color var(--alet-motion-duration-fast) var(--alet-motion-ease-standard);
  }
  a.section-card:hover { border-color: var(--alet-color-border-strong); }
  a.section-card:hover .section-card__cta { color: var(--alet-color-text-primary); }
  .section-card--planned { background: var(--alet-color-background-subtle); border-style: dashed; color: var(--alet-color-text-secondary); }
  .section-card__icon {
    display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--alet-radius-md);
    background: var(--alet-color-surface-selected); color: var(--alet-color-text-primary);
  }
  .section-card--planned .section-card__icon { background: var(--alet-color-surface); color: var(--alet-color-text-muted); }
  .section-card__icon svg { inline-size: 24px; block-size: 24px; }
  .section-card__top { display: flex; gap: var(--alet-space-2); }
  .section-card__title { margin: 0; font-size: var(--alet-text-heading-md-size); line-height: var(--alet-text-heading-md-line-height); font-weight: 700; }
  .section-card__lead { margin: 0; font-size: var(--alet-text-body-size); color: var(--alet-color-text-secondary); }
  .section-card__stats { display: flex; flex-wrap: wrap; gap: var(--alet-space-2) var(--alet-space-5); margin: 0; }
  .section-card__stats div { display: grid; }
  .section-card__stats dd { margin: 0; font-size: var(--alet-text-heading-sm-size); font-weight: 700; font-variant-numeric: tabular-nums; }
  .section-card__stats dt { font-size: var(--alet-text-caption-size); color: var(--alet-color-text-muted); }
  .section-card__progress { display: grid; gap: var(--alet-space-1-5); padding-block-start: var(--alet-space-1); }
  .section-card__progress-row { display: flex; justify-content: space-between; font-size: var(--alet-text-body-sm-size); }
  .section-card__progress-row strong { font-variant-numeric: tabular-nums; }
  .section-card__progress-note { margin: 0; font-size: var(--alet-text-caption-size); color: var(--alet-color-text-muted); }
  .section-card__cta { display: inline-flex; align-items: center; gap: var(--alet-space-2); font-weight: 600; font-size: var(--alet-text-body-size); color: var(--alet-color-text-secondary); min-block-size: 44px; }
  .section-card__cta-icon { display: inline-flex; }
  .section-card__cta-icon svg { inline-size: 18px; block-size: 18px; }

  .steps { list-style: none; margin: 0 0 var(--alet-space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--alet-space-4); counter-reset: step; }
  .steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--alet-space-3); align-items: start; padding: var(--alet-space-4); background: var(--alet-color-surface); border: 1px solid var(--alet-color-border); border-radius: var(--alet-radius-lg); }
  .steps__num {
    display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--alet-radius-full);
    background: var(--alet-color-action-primary); color: var(--alet-color-action-primary-text); font-weight: 700; font-size: var(--alet-text-body-sm-size);
  }
  .steps h3 { margin: 0 0 4px; font-size: var(--alet-text-heading-sm-size); font-weight: 600; }
  .steps p { margin: 0; font-size: var(--alet-text-body-sm-size); color: var(--alet-color-text-secondary); }

  .footer {
    padding: var(--alet-space-6) var(--alet-space-6) calc(var(--alet-space-6) + var(--alet-safe-area-bottom));
    border-block-start: 1px solid var(--alet-color-border); background: var(--alet-color-surface);
    color: var(--alet-color-text-muted); font-size: var(--alet-text-caption-size);
  }
  .footer p { max-inline-size: var(--alet-container-lg); margin: 0 auto; }

  @media (max-width: 767px) {
    .main { padding: var(--alet-space-6) var(--alet-space-4) var(--alet-space-12); }
    .topbar { padding-inline: var(--alet-space-4); }
    .footer { padding-inline: var(--alet-space-4); }
    .hero h1 { font-size: var(--alet-text-heading-xl-size); }
    .section-card { padding: var(--alet-space-4); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }
  @media print {
    .skip-link, .section-card__cta { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .section-card, .steps li { break-inside: avoid; }
  }
}