/* The atlas has two type roles: Fell for place/title, Manrope for use.
   Load after module styles so their older handwritten labels cannot leak into
   all themes. Reader prose, card artwork and game symbols keep
   their own typography; there is deliberately no universal font reset. */
html[data-theme] #mha-familienkarte {
  --mha-font-heading: 'IM Fell English', Georgia, serif;
  --mha-font-body: 'Manrope', 'Segoe UI', sans-serif;
  --mha-hand: var(--mha-font-heading);
  --mha-calligraphy: var(--mha-font-heading);
  font-family: var(--mha-font-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Display faces only use the weight actually supplied by the local font. */
html[data-theme] #mha-familienkarte :is(
  .mha-brand, .mha-title, .mha-entry-title, .sf-cover-world,
  .sf-cover-subtitle, .mha-clock-family-name, .building-heading h1,
  .building-room-title, .smart-home h1, .mha-shelf h2, .mha-collection h2,
  .mha-note h2, .mha-recipe h2, .mha-dialog h2, .mha-light-popup h2,
  .mha-cover-login h2, .mha-trophy-collection h2,
  .mha-treasure-section-heading h2, .mha-friend-requests h2,
  .mha-recipe-group > h3, .mha-wish-category > h3, .mha-wish-copy h3,
  .mha-year-person h2, .mha-year-chart figcaption,
  .mha-treasure-person-name, .mha-treasure-name, .mha-treasure-total strong,
  .mha-treasure-total > span, .mha-year-glasses strong, .mha-redeem-amount
) {
  font-family: var(--mha-font-heading);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
}

html[data-theme] #mha-familienkarte :is(
  .mha-title, .building-heading h1, .smart-home h1, .mha-clock-family-name
) {
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

/* Action text stays legible in every module, including the legacy login and
   forms. Target text controls, rather than symbols or the inside of SVGs. */
html[data-theme] #mha-familienkarte :is(
  .mha-button, .mha-text-button, .mha-select, .mha-input,
  input, select, textarea,
  .mha-identity-button, .mha-profile-button, .mha-entry-return,
  .mha-nav button, .mha-mobile-nav button, .mha-room-nav > summary,
  .mha-more-grid button, .mha-more-grid summary,
  .mha-toolbar button, .mha-toolbar select, .mha-toolbar input,
  .mha-tools button, .mha-heading-actions button,
  .mha-secondary-tools > summary, .mha-gallery-folder > summary,
  .mha-shopping-options > summary, .mha-task-library summary,
  .mha-cover-login label, .mha-cover-login .mha-button,
  .mha-cover-login .mha-input, .mha-cover-login input[type='password'],
  .mha-dialog label, .mha-dialog input, .mha-dialog select,
  .mha-dialog textarea, .mha-light-popup label,
  .mha-light-popup input, .mha-light-popup select,
  .mha-light-popup textarea, .mha-library-tabs button,
  .mha-library-reader-toolbar, .mha-library-reader-actions button,
  .mha-library-popup, .mha-library-popup button,
  .mha-library-popup select, .mha-library-popup > header h2,
  .mha-library-page-controls, .mha-library-page-select,
  .mha-library-description-title small, .mha-library-cover-copy small,
  .sf-theme-choice small, .sf-quick-paths button
) {
  font-family: var(--mha-font-body);
  font-style: normal;
  letter-spacing: normal;
}

html[data-theme] #mha-familienkarte :is(
  .mha-button, .mha-text-button, .mha-identity-button,
  .mha-cover-login .mha-button, .mha-task-library summary
) {
  font-weight: 500;
  line-height: 1.5;
}

html[data-theme] #mha-familienkarte .mha-identity-button {
  font-size: 13px;
}

html[data-theme] #mha-familienkarte .mha-task-library summary {
  font-size: 14px;
}

/* Handwritten captions previously appeared as a third, unrelated typeface.
   Explanations now share the same calm reading rhythm as the rest of the UI. */
html[data-theme] #mha-familienkarte :is(
  .mha-empty, .mha-entry-hint, .mha-login-loading,
  .mha-side-caption, .mha-footnote, .mha-footnote > span:first-child,
  .mha-ink-sentence, .mha-year-intro, .mha-record-image-preview,
  .mha-image-viewer figcaption, .mha-offer-location, [data-offer-status],
  .mha-section-intro, .mha-detail-note
) {
  font: 400 14px/1.65 var(--mha-font-body);
  letter-spacing: normal;
}

html[data-theme] #mha-familienkarte :is(
  .mha-side-caption, .mha-footnote, .mha-footnote > span:first-child
) {
  font-size: 12px;
}

html[data-theme] #mha-familienkarte :is(
  .mha-community-stars legend, .mha-record-image-fields legend,
  .mha-treasure-options legend
) {
  font: 600 14px/1.5 var(--mha-font-body);
}

html[data-theme] #mha-familienkarte .mha-meal-recipe-choice strong {
  font: 600 15px/1.45 var(--mha-font-body);
}

/* Numbers and initials are functional information, so they use UI type. */
html[data-theme] #mha-familienkarte :is(
  .mha-birthday-date strong, .mha-friend-stats dd,
  .mha-friend-initial, .mha-treasure-initial, .mha-clock-monogram
) {
  font-family: var(--mha-font-body);
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* The decorative map's names belong to the same atlas as its headings. */
html[data-theme] #mha-familienkarte :is(
  .mha-map-room, .mha-chapter-backdrop .mha-room-name,
  .mha-chapter-reverse .mha-room-name, .mha-chapter-room-labels,
  .mha-chapter-room-labels text, .mha-entry-title em
) {
  font-family: var(--mha-font-heading);
  font-weight: 400;
  font-style: normal;
}

/* Camera dialogs use the same face whether they live in the main dialog or
   are mounted directly in the app. Their close glyph keeps its symbol face. */
html[data-theme] #mha-familienkarte .mha-camera-dialog {
  font-family: var(--mha-font-body);
}

html[data-theme] #mha-familienkarte .mha-camera-dialog .mha-camera-header h2 {
  font-weight: 400 !important;
}

html[data-theme] #mha-familienkarte .mha-camera-dialog :is(
  .mha-camera-status, .mha-barcode-manual input,
  .mha-barcode-choices button, .mha-camera-help
) {
  font-family: var(--mha-font-body);
  font-style: normal;
}

html[data-theme] :is(#family-sleep, #family-slideshow) {
  font-family: 'IM Fell English', Georgia, serif;
  font-weight: 400;
}

/* Touch fields are at least 16px so mobile browsers do not zoom on focus.
   The reader's --reading-font and --reading-size are never overridden. */
@media (max-width: 760px) {
  html[data-theme] #mha-familienkarte :is(
    .mha-input, .mha-select, .mha-dialog input:not([type='checkbox']):not([type='radio']),
    .mha-dialog select, .mha-dialog textarea,
    .mha-light-popup input:not([type='checkbox']):not([type='radio']),
    .mha-light-popup select, .mha-light-popup textarea
  ) {
    font-size: 16px;
  }
}