/* Fizzy references: nav.css expandable navigation, panels.css and buttons.css. */
@layer components {
  .exam-timer { display: flex; align-items: center; justify-content: end; gap: 14px; font-size: .75rem; color: var(--color-muted); margin-block: 12px 20px; }
  .exam-timer strong { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 650; background: white; border: 1px solid var(--color-line); border-radius: 99px; padding: 8px 16px; color: var(--color-ink); }
  .exam-timer--urgent strong { color: #8b4328; background: #fff0e5; border-color: #e3baa7; }
  .question-navigation { margin-block-start: 20px; border: 1px solid var(--color-line); border-radius: 12px; padding: 14px 18px; background: white; }
  .question-navigation summary { cursor: pointer; font-weight: 600; font-size: .82rem; }
  .question-navigation summary > span { font-weight: 400; color: var(--color-muted); margin-inline-start: 15px; }
  .question-navigation p, .submission-panel > p { color: var(--color-muted); font-size: .75rem; margin-block-start: 15px; }
  .question-navigation__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 9px; margin-block-start: 20px; }
  .question-number { display: grid; place-items: center; min-block-size: 42px; border-radius: 8px; border: 1px solid var(--color-line); background: var(--color-canvas); font-size: .82rem; font-weight: 600; }
  .question-number--answered { background: #e1eddd; border-color: #a2b8a1; }
  .question-number[aria-current] { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .exam-question-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 23px; margin-block-start: 28px; }
  .navigation-hint { font-size: .72rem; color: var(--color-muted); line-height: 1.7; margin-block-start: 18px; }
  .submission-panel { max-inline-size: 850px; margin-inline: auto; }
  .submission-panel h2 { font-size: 1.4rem; }
  .exam-start { margin-block-start: 26px; display: flex; flex-direction: column; align-items: start; gap: 18px; }
  .extra-time { display: flex; gap: 9px; align-items: center; font-size: .85rem; }
  .extra-time input { inline-size: 18px; block-size: 18px; accent-color: var(--color-accent); }
  .result-threshold { font-size: .88rem; color: var(--color-muted); margin-block-start: 10px; }
  .history-list { display: grid; gap: 11px; }
  .history-row { display: flex; gap: 25px; align-items: center; padding: 21px 25px; background: white; border: 1px solid var(--color-line); border-radius: 14px; }
  .history-row .eyebrow { display: block; margin-block-end: 6px; font-size: .6rem; letter-spacing: .06em; }
  .history-row strong { display: block; font-size: .94rem; font-weight: 600; }
  .history-score { text-align: end; margin-inline-start: auto; white-space: nowrap; }
  .history-score > span { font-size: .72rem; color: var(--color-muted); }
  .history-score strong { font-size: 1.25rem; }
  .empty-state .actions { justify-content: center; }
  .empty-state__icon { display: grid; place-items: center; inline-size: 58px; block-size: 58px; font-size: 1.8rem; border-radius: 50%; background: var(--color-soft); color: var(--color-accent); margin: 0 auto 22px; }
  .progress-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
  .progress-card { background: white; border: 1px solid var(--color-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 5px; }
  .progress-card strong { font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; }
  .progress-card > span { font-size: .76rem; color: var(--color-muted); }
  .progress-card--link { background: #fbf2e4; }
  .topic-progress { margin-block-start: 22px; }
  .topic-progress summary { cursor: pointer; font-weight: 550; font-size: .83rem; }
  .topic-progress__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 35px; padding-block: 25px; }
  .topic-progress__grid > div { display: flex; flex-direction: column; gap: 6px; }
  .topic-progress__grid span { font-size: .8rem; }
  .topic-progress__grid progress { inline-size: 100%; block-size: 10px; accent-color: var(--color-accent); }
  .topic-progress__grid small { color: var(--color-muted); font-size: .7rem; }
}
@layer utilities {
  @media (max-width: 1100px) { .header-label { display: none; } .site-header { gap: 25px; } }
  @media (max-width: 800px) { .main-nav { gap: 1px; } .nav__link { padding-inline: 12px; } }
  @media (max-width: 640px) {
    .main-nav { flex-wrap: wrap; border-radius: 16px; gap: 4px; }
    .nav__link { flex: 1 1 28%; }
    .progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .progress-card { padding: 17px; }
    .history-row { gap: 13px; padding: 18px; }
    .history-row > span:last-child { display: none; }
    .history-row strong { font-size: .85rem; }
    .history-score strong { font-size: 1.1rem; }
    .history-row .eyebrow { font-size: .55rem; }
    .topic-progress__grid { grid-template-columns: 1fr; }
    .exam-question-actions { justify-content: start; gap: 19px; }
    .exam-question-actions .text-link { font-size: .78rem; }
    .question-navigation summary > span { display: block; margin: 5px 0 0; font-size: .72rem; }
    .question-navigation__grid { gap: 7px; }
  }
}