/* Shared portal typography, approved 18.10.2026.
 * Lora / Golos Text / IBM Plex Mono, approved Matcha variant.
 * Sizes: 14 / 16 / 18 / 20 / 24 / 28 / 32 / 40px; rem preserves zoom.
 * This named layer owns typography only. Important declarations deliberately
 * outrank the old, unlayered screen-specific rules (including !important).
 * Keep new typography here; keep layout and colour in the component styles.
 */
@font-face { font-family:'Lora'; src:url('assets/fonts/lora.ttf') format('truetype'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('assets/fonts/lora-italic.ttf') format('truetype'); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:'Golos Text'; src:url('assets/fonts/golos-text.ttf') format('truetype'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('assets/fonts/ibm-plex-mono.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('assets/fonts/ibm-plex-mono-medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }

@layer frasoria-typography {
  html[data-appearance] {
    --type-font-body: 'Golos Text', Arial, sans-serif !important;
    --type-font-display: 'Lora', Georgia, serif !important;
    --type-font-label: 'IBM Plex Mono', monospace;
    --type-caption: .875rem;
    --type-control: 1rem;
    --type-body: 1.125rem;
    --type-subheading: 1.25rem;
    --type-section: 1.5rem;
    --type-title: 2rem;
    --type-hero: 2.5rem;
  }

  /* Inheritance clears historical per-screen sizes without touching layout,
   * visibility, colours, italic emphasis, or the contents of authored emails. */
  :where(html[data-appearance] body, html[data-appearance] #app, html[data-appearance] #app *) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
  }

  html[data-appearance] body {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  html[data-appearance] :is(h1, h2, h3, .brand) {
    font-family: var(--type-font-display) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
  html[data-appearance] h1 {
    font-size: var(--type-title) !important;
    line-height: 1.2 !important;
  }
  html[data-appearance] :is(h2, .brand) { font-size: var(--type-section) !important; }
  html[data-appearance] h3 { font-size: var(--type-section) !important; }
  html[data-appearance] .brand { font-size: 1.75rem !important; }
  html[data-appearance] .portal-page h1 { font-size: var(--type-hero) !important; }
  html[data-appearance] :is(h4, legend, .scope-choice-title) {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-subheading) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
  html[data-appearance] :is(h5, h6, strong, b, th) { font-weight: 600 !important; }

  html[data-appearance] :is(
    button, input, select, textarea, label, summary, .btn, nav, table,
    .text-link, .back, .steps, .teaching-nav, .portal-nav, .admin-tabs,
    .authoring-steps, .authoring-audio-row, .admin-flow,
    .teaching-sidebar-bottom, .account-settings-nav, .memory-stages,
    .memory-stage, .library-study-nav, .catalog-filter, .catalog-breadcrumbs,
    .scope-choice-count, .portal-user-menu, .portal-register,
    .studio-table, .studio-series nav, .vocabulary-actions, .grammar-manage-links
  ) {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-control) !important;
    line-height: 1.5 !important;
  }
  html[data-appearance] :is(button, .btn, th, nav [aria-current], .steps .current) {
    font-weight: 500 !important;
  }

  html[data-appearance] :is(
    small, figcaption, .help, .eyebrow, .notice, .journey-eyebrow,
    .teaching-context, .teaching-profile, .teaching-sidebar-caption,
    .studio-path, .studio-language, .studio-catalog-actions, .studio-related-tools,
    .authoring-status, .admin-status, .memory-counter, .cycle-counter,
    .cycle-progress, .memory-recorder-status, .memory-recorder-note,
    .memory-record-caption, .memory-design-heading p, .phrase-mobile-label,
    .recall-comparison-label, .lesson-progress-note, .library-footnote,
    .portal-footer, #sync-status, #cycle-check-note
  ) {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-caption) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  /* Mono is reserved for navigation and short labels, never lesson prose. */
  html[data-appearance] :is(
    .portal-nav, .teaching-nav, .admin-sidebar nav, .menu-dialog nav,
    .eyebrow, .journey-eyebrow, .teaching-sidebar-caption, .studio-path,
    .studio-language, .authoring-status, .admin-status, .memory-counter,
    .cycle-counter, .cycle-progress, .portal-footer, .authoring-steps, .steps,
    .memory-stages, .memory-stage, .library-study-nav
  ) {
    font-family: var(--type-font-label) !important;
    font-size: var(--type-caption) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }
  html[data-appearance] :is(.eyebrow, .journey-eyebrow, .teaching-sidebar-caption) {
    letter-spacing: .08em !important;
  }
  html[data-appearance] textarea { font-size: var(--type-body) !important; }
  @media (max-width: 700px) {
    html[data-appearance] .portal-page h1 { font-size: var(--type-title) !important; }
  }

  /* A lesson model is larger than interface text in either study layout. */
  html[data-appearance] :is(.cycle-source, .recall-prompt, .phrase-copy > span, .phrase-en) {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-title) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  html[data-appearance] :is(.cycle-translation, .phrase-copy > p, .phrase-ru, .recall-comparison-text) {
    font-family: var(--type-font-body) !important;
    font-size: var(--type-subheading) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  /* Preserve the learner's explicit larger-text preference. */
  html[data-appearance].learning-large-text :is(.cycle-source, .recall-prompt, .phrase-copy > span, .phrase-en) {
    font-size: calc(var(--type-title) * 1.4) !important;
  }
  html[data-appearance].learning-large-text :is(.cycle-translation, .phrase-copy > p, .phrase-ru) {
    font-size: calc(var(--type-subheading) * 1.4) !important;
  }
  html[data-appearance].learning-large-text :is(#cycle-input, #review-answer) {
    font-size: calc(var(--type-control) * 1.4) !important;
  }

  /* Icons, code and user-authored document content retain their own type.
   * revert-layer restores the component rules, not browser defaults. */
  html[data-appearance] :is(
    svg, svg *, math, math *, pre, pre *, code, code *,
    .mark, .symbol, .upload-symbol, .library-material-icon,
    .library-page-icon, .library-chevron, .account-provider-icon,
    .ql-editor, .ql-editor *, .nl-paper, .nl-paper *
  ) {
    font-family: revert-layer !important;
    font-size: revert-layer !important;
    font-weight: revert-layer !important;
    line-height: revert-layer !important;
    letter-spacing: revert-layer !important;
  }
}

/* Larger labels must wrap rather than collide with adjacent controls. */
html[data-appearance] :is(.authoring-steps > a, .authoring-steps > span, .teaching-nav a, .admin-tabs button) {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-appearance] .authoring-steps > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
html[data-appearance] :is(.authoring-row, .authoring-actions, .admin-form-actions) { flex-wrap: wrap; }
html[data-appearance] :is(.studio-table td, .studio-table th) { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  html[data-appearance] .authoring-steps > a { display: block; }
  html[data-appearance] .authoring-table :is(th, td) { padding: 12px 6px; }
  html[data-appearance] .authoring-table th { white-space: nowrap; }
}
@media (max-width: 420px) {
  html[data-appearance] .authoring-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-appearance] .teaching-topbar { flex-wrap: wrap; gap: 12px; }
  html[data-appearance] .teaching-topbar .portal-user-menu { order: 3; flex-basis: 100%; max-width: 100%; }
  html[data-appearance] .teaching-topbar .portal-user-menu summary { width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
  html[data-appearance] .portal-shell .memory-guided-stages { grid-template-columns: minmax(0, 1fr); }
  html[data-appearance] .portal-shell .memory-guided .memory-model-zone { flex-wrap: wrap; gap: 12px; }
  html[data-appearance] .portal-shell .portal-header-actions { flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 360px) {
  html[data-appearance] .portal-shell .memory-guided .memory-lesson-nav .steps { display: grid; grid-template-columns: minmax(0, 1fr); }
}