/*
 * Sample report pages: the page shell and the app's design tokens.
 *
 * A sample page links web/landing/landing.css first, for the landing's own
 * header (.nav, .brand, .btn), footer (.footer), skip link, gutters
 * (--gutter: 88 / 40 / 20) and 1440 frame, then this file (report.css).
 * Nothing here restyles the header or the footer.
 *
 * The report's values are copied from the Flutter app, not approximated:
 *   colors       lib/core/theme/colors.dart           (AppColors.dark)
 *   spacing      lib/core/theme/spacing.dart          (AppSpacing)
 *   text styles  lib/core/theme/app_text_styles.dart  (AppTextStyles)
 *   page shell   lib/modules/workflow/ui/workflow_result_page.dart
 * On a desktop (from 1101, the landing's own breakpoint) the sections the
 * Figma "Sample Report" frame (8805:22321) draws follow that frame instead;
 * those rules sit at the end of each section's file.
 *
 * The section styles live next to this file in sections/<type>.css, one per
 * renderer in lib/modules/workflow/ui/result_sections/. The build
 * (tool/build_sample_pages.py) concatenates them into report.css.
 */

:root {
  --primary: #ffc3ad;
  /* Primary-20 in Figma: the pills' and the bar tracks' fill. */
  --primary-20: rgba(255, 195, 173, 0.2);
  --background: #000000;
  --on-background: #ffffff;
  --surface: #121212;
  --on-surface: #ffffff;
  --background-secondary: #121212;
  --background-tertiary: #1e1e1e;
  --background-quaternary: #3c3c3c;
  --positive: #3cc162;
  --error: #e75151;
  --gold: #fed843;
  --grey1: #3c3c3c;
  --grey2: #666666;
  --grey3: #999999;

  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --base: 16px;
  --lg: 20px;
  --xl: 24px;
  --xxl: 32px;
  --xxxl: 40px;
  --huge: 48px;
  --massive: 64px;

  /* AppTextStyles use "SF Pro": the system face on Apple devices, and the
     platform sans elsewhere, as the app itself falls back. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* The report: the app's onBackground text, its onPrimary (black) and no
   tracking but the text styles' own. landing.css's body (white 90%,
   -0.5) and its --on-primary (black 80%) stay the header's and the
   footer's, as on the landing. */
.report,
.surname-page {
  --on-primary: #000000;
  color: var(--on-background);
  letter-spacing: normal;
}

img {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

a {
  color: inherit;
}

/* -------------------------------------------------------- AppTextStyles
   Generated from app_text_styles.dart. They set no height, but a Text
   merges its style onto the ambient DefaultTextStyle, which the Scaffold's
   Material sets to textTheme.bodyMedium. Theme.of localizes that with the M3
   englishLike geometry: height 1.43, leadingDistribution.even. So every
   AppTextStyles line in a section is 1.43 x fontSize tall. `.report` below
   sets that, not these classes: the height is Material's default, not the
   styles'. CSS splits half-leading evenly, which matches
   leadingDistribution.even. */

.t-heading1 { font-size: 30px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading2 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.t-heading3 { font-size: 18px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading4 { font-size: 16px; font-weight: 700; letter-spacing: -0.5px; }
.t-heading5 { font-size: 16px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading6 { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; }
.t-heading7 { font-size: 14px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading8 { font-size: 13px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading9 { font-size: 12px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading10 { font-size: 22px; font-weight: 400; letter-spacing: -0.5px; }
.t-heading11 { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; }
.t-heading12 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.t-heading13 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.t-body1 { font-size: 16px; font-weight: 400; letter-spacing: -0.5px; }
.t-body2 { font-size: 14px; font-weight: 400; letter-spacing: -0.5px; }
.t-body3 { font-size: 14px; font-weight: 300; letter-spacing: -0.5px; }
.t-body4 { font-size: 12px; font-weight: 400; letter-spacing: -0.5px; }
.t-body5 { font-size: 12px; font-weight: 300; letter-spacing: -0.5px; }
.t-body6 { font-size: 11px; font-weight: 500; letter-spacing: -0.5px; }
.t-body7 { font-size: 10px; font-weight: 400; letter-spacing: -0.5px; }
.t-body8 { font-size: 13px; font-weight: 400; letter-spacing: -0.5px; }
.t-body9 { font-size: 14px; font-weight: 500; letter-spacing: -0.5px; }
.t-body10 { font-size: 10px; font-weight: 500; letter-spacing: -0.5px; }
.t-body11 { font-size: 16px; font-weight: 300; letter-spacing: -0.5px; }
.t-body12 { font-size: 18px; font-weight: 400; letter-spacing: -0.5px; }

/* ------------------------------------------------------------ page shell
   The landing's 1440 frame (as #landing and the legal pages' .page), the
   landing's header, the report in the landing's gutters, the landing's
   footer. Up to 1100 the report is the app's section list
   (workflow_result_page.dart: 24 above, 64 below), in the landing's
   gutters (20 on a phone, 40 on a tablet) so it lines up with the logo.
   From 1101 it is Figma's MainContent: 64 above, 80 below, 88 each side,
   so 1264 wide at 1440. */

.sample-page {
  max-width: var(--frame);
  margin-inline: auto;
}

.report {
  width: 100%;
  padding: var(--xl) var(--gutter) var(--massive);
  /* Material's DefaultTextStyle (bodyMedium, M3 geometry): every Text line
     is 1.43 x fontSize with even leading. See AppTextStyles above. The
     sections Figma draws pin their own line heights on a desktop. */
  line-height: 1.43;
}

@media (min-width: 1101px) {
  .report {
    padding: var(--massive) var(--gutter) 80px;
  }
}

/* The report's title, which the app bar used to show. Figma draws none:
   kept for search engines and screen readers only. */
.sample-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The gap before a section (the build picks the kind; see gap_kind in
   tool/sample_report/page.py). Up to 1100: the app's _separatorHeight.
   From 1101: the Figma frame's rhythm, 96 between sections, 32 inside a
   traits run (Personality, Vocation story, Career archetype), 89 under the
   nationality globe. */
.report__gap {
  display: block;
  height: var(--xxl);
}

.report__gap--continuation {
  height: var(--md);
}

.report__gap--info {
  height: var(--xl);
}

@media (min-width: 1101px) {
  .report__gap--section {
    height: 96px;
  }

  .report__gap--after-globe {
    height: 89px;
  }
}

/* theme_of_day is introduced by the mystic illustration. */
.report__mystic {
  width: 100%;
  margin: var(--xxl) 0;
}

/* The old 868 column for the widgets Figma does not draw.
   From 761 the report is the whole column between the gutters (up to 1020
   on a tablet, 1264 on a desktop). The app's sections that only stretch
   there (an illustration, a card around one line, a row of seven days)
   keep the 868 the page used to have (the app's 900 column less its 16
   padding), on the column's left edge, under their titles, as every
   section in the Figma frame starts there: the mystic illustration and
   the theme of the day under it, the image overlay, the weekly calendar
   and the place card (their own files). Pictures under a header row
   (full_image, a portrait that is not a band) are centred instead. */
@media (min-width: 761px) {
  .report__mystic {
    max-width: 868px;
  }
}

/* ---- bullet_list ---- */
/* bullet_list: lib/modules/workflow/ui/result_sections/bullet_list_section.dart */

/* Column(crossAxisAlignment: start) */
.bullet-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white), then
   SizedBox(height: AppSpacing.base) */
.bullet-list__title {
  margin-bottom: var(--base);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Padding(bottom: AppSpacing.sm, none on the last) >
   Row(crossAxisAlignment: start). The row is as wide as the Column
   because its text is Expanded. */
.bullet-list__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  margin-bottom: var(--sm);
}

.bullet-list__row:last-child {
  margin-bottom: 0;
}

/* Text('•  ', body1 white): the bullet and its two spaces, unwrapped. */
.bullet-list__bullet {
  flex: 0 0 auto;
  color: #ffffff;
  white-space: pre;
}

/* Expanded > Text(item, body1 white) */
.bullet-list__text {
  flex: 1 1 0;
  min-width: 0;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). It keeps the app's look, with
   the frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 1101px) {
  .bullet-list__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- career_archetype ---- */
/* career_archetype: career_archetype_section.dart */

.career-archetype {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Row(crossAxisAlignment: start): Expanded column, then
   SizedBox(width: AppSpacing.sm) and the 80x80 bag arrow SVG (own colours).
   Rendered only when the title or description is set. */
.career-archetype__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
}

.career-archetype__heading {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white) */
.career-archetype__title {
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* SizedBox(height: AppSpacing.sm), then AppTextStyles.body1 in white. */
.career-archetype__description {
  margin-top: var(--sm);
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* SvgPicture 80x80, default BoxFit.contain. */
.career-archetype__arrow {
  flex: none;
  width: 80px;
  height: 80px;
  margin-left: var(--sm);
  object-fit: contain;
}

/* SizedBox(height: AppSpacing.xl) before the items (even with no header);
   every item but the last has bottom padding AppSpacing.xxl. */
.career-archetype__items {
  display: flex;
  flex-direction: column;
  gap: var(--xxl);
  align-self: stretch;
  margin-top: var(--xl);
}

.career-archetype__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Row(spaceBetween), default centre cross-axis: Expanded label, then the
   percentage at its own width. Both AppTextStyles.heading4 in white. */
.career-archetype__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
}

.career-archetype__label {
  flex: 1 1 0;
  min-width: 0;
  color: #ffffff;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.career-archetype__value {
  flex: none;
  color: #ffffff;
  white-space: nowrap;
}

/* SizedBox(height: AppSpacing.sm), then a full-width Container 10 tall,
   white at 10%, radius 50; the fill is the primary colour, radius 50, as
   wide as the clamped percentage. */
.career-archetype__track {
  align-self: stretch;
  height: 10px;
  margin-top: var(--sm);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
}

.career-archetype__fill {
  height: 100%;
  border-radius: 50px;
  background: var(--primary);
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", CareerCard 8805:22446: a block with 32 above and
   below, like Personality; its 80 header row centred (24 title, 10, the
   description), the bag arrow at the right edge; 20 to the bars, 32 apart:
   label and percentage, 10, a full-width 10 track in Primary-20. */

@media (min-width: 1101px) {
  .career-archetype {
    padding: var(--xxl) 0;
  }

  .career-archetype__header {
    align-items: center;
  }

  .career-archetype__title {
    line-height: 29px;
  }

  .career-archetype__description {
    margin-top: 10px;
    line-height: 19px;
  }

  .career-archetype__items {
    margin-top: var(--lg);
  }

  .career-archetype__label,
  .career-archetype__value {
    line-height: 19px;
  }

  .career-archetype__track {
    margin-top: 10px;
    background: var(--primary-20);
  }
}

/* ---- face_attribution ---- */
/* face_attribution: face_attribution_section.dart */

.face-attribution {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white). Flutter's Text keeps
   the string's spaces and line breaks, hence pre-wrap. */
.face-attribution__title {
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* SizedBox(height: AppSpacing.base) before the cards; each card after the
   first has top padding AppSpacing.md. */
.face-attribution__cards {
  display: flex;
  flex-direction: column;
  gap: var(--md);
  align-self: stretch;
  margin-top: var(--base);
}

/* Container: padding all 16, backgroundTertiary, radius 16; a Row with the
   default centre cross-axis alignment. */
.face-attribution__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--base);
  border-radius: var(--base);
  background: var(--background-tertiary);
}

/* Desktop only: the ringed avatar around the picture. */
.face-attribution__avatar {
  display: contents;
}

/* ClipRRect(radius 8) around a 56x56 BoxFit.cover image, then
   SizedBox(width: AppSpacing.md). */
.face-attribution__icon {
  flex: none;
  width: 56px;
  height: 56px;
  margin-right: var(--md);
  border-radius: var(--sm);
  object-fit: cover;
}

/* Expanded Text: AppTextStyles.body2, white at 90%. */
.face-attribution__text {
  flex: 1 1 0;
  min-width: 0;
}

.face-attribution__description {
  overflow-wrap: break-word;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.9);
}

/* Desktop only (the app has no title on the card). */
.face-attribution__label {
  display: none;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", AttributionBlock 8805:22370 / AttributionCard
   8805:22376: the 32 title, 24 to a two-column grid (16 both ways) of
   cards: white 10%, radius 20, padding 16, the 60 avatar (a 52 round
   picture in a 4px Primary-100 ring) 16 from the text column: the label
   (15 bold) 4 over the description (13, line height 1.4, white 80%).
   A row's cards share a height; an odd last card stays on the left. */

@media (min-width: 1101px) {
  .face-attribution__title {
    font-size: 32px;
    line-height: 38px;
  }

  .face-attribution__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--base);
    margin-top: var(--xl);
  }

  .face-attribution__card {
    gap: var(--base);
    border-radius: var(--lg);
    background: rgba(255, 255, 255, 0.1);
  }

  /* A 52 circle in a 4px Primary-100 ring (60 across). The app's renders
     carry a Primary-100 disc of their own; drawn larger than the circle,
     the feature fills it as Figma's avatars do: 1.3x for the face and the
     nose, 1.7x for the eye and the lips, which sit smaller in theirs. */
  .face-attribution__avatar {
    display: block;
    flex: none;
    width: 52px;
    height: 52px;
    margin: var(--xs);
    overflow: hidden;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 var(--xs) var(--primary);
  }

  .face-attribution__icon {
    width: 100%;
    height: 100%;
    margin-right: 0;
    border-radius: 0;
    transform: scale(1.3);
  }

  .face-attribution__avatar--close .face-attribution__icon {
    transform: scale(1.7);
  }

  .face-attribution__text {
    display: flex;
    flex-direction: column;
    gap: var(--xs);
  }

  .face-attribution__label {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0;
    overflow-wrap: break-word;
  }

  .face-attribution__description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

/* ---- full_image ---- */
/* full_image — full_image_section.dart */

.full-image {
  display: flex;
  flex-direction: column;
}

/* Row(crossAxisAlignment: start): Expanded text column, SizedBox(width: sm),
   80x80 arrow; then SizedBox(height: xxl) before the image. */
.full-image__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
  margin-bottom: var(--xxl);
}

.full-image__heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm);
}

.full-image__title,
.full-image__description {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

.full-image__arrow {
  flex: none;
  width: 80px;
  height: 80px;
  max-width: none;
}

/* ClipRRect(radius: xl) around Image(width: infinity, fit: cover). The
   width/height attributes are the picture's own size, so its box is there
   before it loads. Nothing is painted behind the loaded image:
   backgroundTertiary is only the shimmer/error placeholder in the app. */
.full-image__image {
  width: 100%;
  height: auto;
  border-radius: var(--xl);
  object-fit: cover;
}

/* No image: Container(height: 300, backgroundTertiary, radius xl). */
.full-image__empty {
  width: 100%;
  height: 300px;
  border-radius: var(--xl);
  background: var(--background-tertiary);
}

/* ------------------------------------------------------ tablet and desktop
   From 761 the column outgrows a phone's: at its own aspect a 896 x 1200
   render would be 1366 tall at 1020 and 1693 at 1264. It keeps its aspect
   but stops at 720 tall, centred under the header row. The width is
   computed from the real size (--w/--h, written by the build) rather than
   left to max-height, so a lazy image that has not loaded yet still holds
   its box. */

@media (min-width: 761px) {
  .full-image__image {
    width: min(100%, calc(720px * var(--w) / var(--h)));
    max-height: 720px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). Laid out like the
   frame's portrait: the 32 section title, the header row centred. */

@media (min-width: 1101px) {
  .full-image__header {
    align-items: center;
  }

  .full-image__title {
    font-size: 32px;
    line-height: 38px;
  }

  .full-image__description {
    line-height: 19px;
  }

  .full-image__heading {
    gap: var(--md);
  }
}

/* ---- headline_card ---- */
/* headline_card — headline_card_section.dart */

.headline-card {
  display: flex;
  flex-direction: column;
}

/* heading2 white, then SizedBox(height: base). */
.headline-card__title {
  color: #ffffff;
  margin-bottom: var(--base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Container(primary 20%, radius xl) > Column(start): SizedBox(xxl), band,
   description, SizedBox(xxl). */
.headline-card__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--xxl) 0;
  background: rgba(255, 195, 173, 0.2);
  border-radius: var(--xl);
}

/* Container(height: 49, LinearGradient(centerLeft -> centerRight,
   [primary 0%, primary, primary 0%])) > Center > Text. */
.headline-card__band {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  background: linear-gradient(
    90deg,
    rgba(255, 195, 173, 0) 0%,
    #ffc3ad 50%,
    rgba(255, 195, 173, 0) 100%
  );
}

/* heading2, colors.onPrimary. Clipped to the band like RenderParagraph. */
.headline-card__headline {
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  color: var(--on-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Padding(LTRB base, md, base, 0), body1 white. */
.headline-card__description {
  padding: var(--md) var(--base) 0;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). It keeps the app's look, with
   the frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 1101px) {
  .headline-card__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- image_overlay ---- */
/* image_overlay — image_overlay_section.dart */

.image-overlay {
  display: flex;
  flex-direction: column;
}

/* heading2 white, then SizedBox(height: base). */
.image-overlay__title {
  color: #ffffff;
  white-space: pre-wrap;
  margin-bottom: var(--base);
  overflow-wrap: break-word;
}

/* ClipRRect(radius: xl) > AspectRatio(343 / 130) > Stack(fit: expand). */
.image-overlay__card {
  position: relative;
  width: 100%;
  aspect-ratio: 343 / 130;
  overflow: hidden;
  border-radius: var(--xl);
}

.image-overlay__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* LinearGradient(topCenter -> bottomCenter,
   [Colors.transparent, Colors.black 70%]). */
.image-overlay__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* Center > Padding(horizontal: xxl) > Text(textAlign: center). */
.image-overlay__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--xxl);
}

/* body1 w600, colors.primary. The 'Sofia Sans' family is not bundled, so
   the app falls back to the platform face, as --font does here. Text taller
   than the card is clipped at the bottom, as RenderParagraph clips. */
.image-overlay__label {
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------ tablet and desktop
   Not drawn in Figma "Sample Report" (8805:22321). The card keeps its
   343 : 130 aspect, so at the column's width it would be a 1264 x 479 box
   around one short line: from 761 the section (title and card) keeps to
   the old 868 column, on the column's left edge (see .report__mystic in
   base.css). On a desktop it has the frame's section title (32 bold) and
   its 24 down to the content. */

@media (min-width: 761px) {
  .image-overlay {
    max-width: 868px;
  }
}

@media (min-width: 1101px) {
  .image-overlay__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- info_card ---- */
/* info_card — info_card_section.dart */

.info-card {
  display: flex;
  flex-direction: column;
}

/* heading2 white, then SizedBox(height: md). */
.info-card__title {
  color: #ffffff;
  margin-bottom: var(--md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Container(padding: vertical md, primary 10%, Border.all(primary, 0.5),
   radius xl). */
.info-card__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--md) 0;
  background: rgba(255, 195, 173, 0.1);
  border: 0.5px solid var(--primary);
  border-radius: var(--xl);
}

/* Container(height: 1, margin: horizontal base, primary 10%). */
.info-card__divider {
  display: block;
  height: 1px;
  margin: 0 var(--base);
  background: rgba(255, 195, 173, 0.1);
}

/* Padding(horizontal: xl, vertical: md) > Row(center): 44 circle,
   SizedBox(width: base), Expanded column. */
.info-card__row {
  display: flex;
  align-items: center;
  gap: var(--base);
  padding: var(--md) var(--xl);
}

.info-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 195, 173, 0.1);
  color: var(--primary);
}

.info-card__glyph {
  display: block;
  width: 24px;
  height: 24px;
}

/* Column(start): label, SizedBox(height: xs), value. */
.info-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--xs);
}

.info-card__label,
.info-card__value {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-card__label {
  color: var(--primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-card__value {
  color: #ffffff;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). It keeps the app's look, with
   the frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 1101px) {
  .info-card__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- map ---- */
/* map: lib/modules/workflow/ui/result_sections/map_section.dart */

/* Column(crossAxisAlignment: start). A flex column so the children's
   margins (the Dart SizedBoxes) never collapse into the page gaps. */
.map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white) */
.map__title {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* SizedBox(height: AppSpacing.sm), then
   AppTextStyles.body1.copyWith(color: Colors.white) */
.map__description {
  margin-top: var(--sm);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* SizedBox(height: AppSpacing.base), then
   ClipRRect(radius: AppSpacing.xl) > SizedBox(width: infinity, height: 220)
   > FlutterMap, whose MapOptions.backgroundColor is 0xFFE0E0E0. */
.map__box {
  position: relative;
  width: 100%;
  height: 220px;
  margin-top: var(--base);
  overflow: hidden;
  border-radius: var(--xl);
  background: #e0e0e0;
  /* IgnorePointer + InteractiveFlag.none */
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

/* One TileLayer: a Stack filling the map. */
.map__layer {
  position: absolute;
  inset: 0;
}

/* A tile, placed by the build at tile * size - pixelOrigin. */
.map__tile {
  position: absolute;
  display: block;
  max-width: none;
}

/* The desktop's tile set (one zoom step closer); not displayed, so not
   loaded, up to 1100. */
.map__tile--wide {
  display: none;
}

/* CircleLayer, centred on the map's centre: the SVG is 162 square (radius
   80 plus half the 2px border), so its origin is the centre minus 81. */
.map__circles {
  position: absolute;
  left: calc(50% - 81px);
  top: calc(50% - 81px);
  display: block;
  overflow: visible;
}

.map__circles--wide {
  display: none;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", MigrationMapSection 8805:22479: the 32 title, 20
   to the description, 24 to a full-width card 360 tall, radius 24, with
   two filled disks (radius 60 and 40, #3CC162 at 20%) on its centre. The
   card shows its own tile set, one zoom step closer than the app's (see
   tool/sample_report/sections/map.py). */

@media (min-width: 1101px) {
  .map__title {
    font-size: 32px;
    line-height: 38px;
  }

  .map__description {
    margin-top: var(--lg);
    line-height: 19px;
  }

  .map__box {
    height: 360px;
    margin-top: var(--xl);
  }

  .map__tile--app {
    display: none;
  }

  .map__tile--wide {
    display: block;
  }

  .map__circles {
    display: none;
  }

  .map__circles--wide {
    display: block;
    left: calc(50% - 60px);
    top: calc(50% - 60px);
  }
}

/* ---- nationality_distribution ---- */
/* nationality_distribution — nationality_distribution_section.dart */

.nationality-distribution {
  display: block;
}

/* Row(crossAxisAlignment: start): Expanded(text column), SizedBox(8), arrow 80. */
.nationality-distribution__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
}

.nationality-distribution__heading {
  flex: 1 1 0;
  min-width: 0;
}

.nationality-distribution__title,
.nationality-distribution__description,
.nationality-distribution__pill {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* SizedBox(height: AppSpacing.sm) before the description. */
.nationality-distribution__description {
  margin-top: var(--sm);
}

.nationality-distribution__arrow {
  flex: none;
  width: 80px;
  height: 80px;
}

/* SizedBox(height: AppSpacing.xl) before the tree. */
.nationality-distribution__tree {
  margin-top: var(--xl);
}

/* The pill rows, 16 apart, then the 36 gap down to the globe. The clip is
   what ends every trunk at the globe's top edge, as the painter does. */
.nationality-distribution__rows {
  display: flex;
  flex-direction: column;
  gap: var(--base);
  padding-bottom: 36px;
  overflow: hidden;
  overflow: clip;
}

/* Row: Expanded(Align centerRight) | SizedBox(64) | Expanded(Align centerLeft),
   children centred on the cross axis. */
.nationality-distribution__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--massive);
}

.nationality-distribution__cell {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.nationality-distribution__cell--left {
  justify-content: flex-end;
}

.nationality-distribution__cell--right {
  justify-content: flex-start;
}

/* _NationalityPill: padding 12 / 4, primary at 20%, radius 50, heading4 in
   primary. */
.nationality-distribution__pill {
  display: block;
  max-width: 100%;
  padding: var(--xs) var(--md);
  border-radius: 50px;
  background: rgba(255, 195, 173, 0.2);
  color: var(--primary);
}

/* _TreeLinesPainter: the SVG's origin is the row's centre, i.e. (W/2, pill
   centre y). Painted under the pills, as a CustomPaint painter is. */
.nationality-distribution__lines {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.nationality-distribution__lines path {
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
}

/* The desktop geometry's path (below). */
.nationality-distribution__line--wide {
  display: none;
}

/* Center(Assets.images.earth.image(width: 200, fit: contain)). */
.nationality-distribution__globe {
  width: 200px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", NationalitySection 8805:22325: a 32 title over
   the description (12 apart), no arrow; 90 below, three rows of 51-tall
   pills 24 apart, each a fixed width per row and staggered around the
   centre (the build writes --pill-* and --edge-* on each row); the globe
   266 wide, 11 under the last row, drawn over the last 20 of the lines. */

@media (min-width: 1101px) {
  .nationality-distribution__title {
    font-size: 32px;
    line-height: 38px;
  }

  .nationality-distribution__description {
    margin-top: var(--md);
    line-height: 19px;
  }

  .nationality-distribution__arrow {
    display: none;
  }

  .nationality-distribution__tree {
    margin-top: 90px;
  }

  /* 11 to the globe's top, then the 20 the lines run on under it. */
  .nationality-distribution__rows {
    gap: var(--xl);
    padding-bottom: 31px;
  }

  .nationality-distribution__row {
    gap: 0;
  }

  .nationality-distribution__cell--left {
    padding-right: var(--edge-left);
  }

  .nationality-distribution__cell--right {
    padding-left: var(--edge-right);
  }

  /* Primary-20, radius 50, 16 / 10 padding: 51 tall. Heading 4 (bold) in
     Primary-100, centred in its fixed width; a longer label grows outward. */
  .nationality-distribution__pill {
    padding: var(--base) 10px;
    line-height: 19px;
    text-align: center;
    background: var(--primary-20);
  }

  .nationality-distribution__cell--left .nationality-distribution__pill {
    min-width: var(--pill-left);
  }

  .nationality-distribution__cell--right .nationality-distribution__pill {
    min-width: var(--pill-right);
  }

  .nationality-distribution__line {
    display: none;
  }

  .nationality-distribution__line--wide {
    display: inline;
    stroke-opacity: 0.5;
    stroke-width: 0.5px;
  }

  .nationality-distribution__globe {
    position: relative;
    width: 266px;
    margin-top: -20px;
  }
}

/* ---- personality_traits ---- */
/* personality_traits: personality_traits_section.dart */

.personality-traits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Row(crossAxisAlignment: start): Expanded column, then
   SizedBox(width: AppSpacing.sm) and the 80x80 arrow SVG (own colours). */
.personality-traits__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
}

.personality-traits__heading {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white) */
.personality-traits__title {
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* SizedBox(height: AppSpacing.sm), then AppTextStyles.body1 in white. */
.personality-traits__description {
  margin-top: var(--sm);
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* SvgPicture 80x80, default BoxFit.contain. */
.personality-traits__arrow {
  flex: none;
  width: 80px;
  height: 80px;
  margin-left: var(--sm);
  object-fit: contain;
}

/* SizedBox(height: AppSpacing.xl) before the traits; every trait but the
   last has bottom padding AppSpacing.xxl. */
.personality-traits__traits {
  display: flex;
  flex-direction: column;
  gap: var(--xxl);
  align-self: stretch;
  margin-top: var(--xl);
}

.personality-traits__trait {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Row(spaceBetween), default centre cross-axis: Expanded label, then the
   percentage at its own width. Both AppTextStyles.heading4 in white. */
.personality-traits__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
}

.personality-traits__label {
  flex: 1 1 0;
  min-width: 0;
  color: #ffffff;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.personality-traits__value {
  flex: none;
  color: #ffffff;
  white-space: nowrap;
}

/* SizedBox(height: AppSpacing.sm), then a full-width Container 10 tall,
   white at 10%, radius 50; the fill is the primary colour, radius 50, as
   wide as the clamped percentage. */
.personality-traits__track {
  align-self: stretch;
  height: 10px;
  margin-top: var(--sm);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
}

.personality-traits__fill {
  height: 100%;
  border-radius: 50px;
  background: var(--primary);
}

/* SizedBox(height: AppSpacing.sm), then AppTextStyles.body2, white at 80%. */
.personality-traits__subtitle {
  margin-top: var(--sm);
  color: rgba(255, 255, 255, 0.8);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", Personality 8805:22402: a block with 32 above and
   below; its 80 header row centred (24 title, 10, the description), 28 to
   the traits, 24 apart: label and percentage, 8, a full-width 10 track in
   Primary-20 with the Primary-100 fill, 8, the subtitle. */

@media (min-width: 1101px) {
  .personality-traits {
    padding: var(--xxl) 0;
  }

  .personality-traits__header {
    align-items: center;
  }

  .personality-traits__title {
    line-height: 29px;
  }

  .personality-traits__description {
    margin-top: 10px;
    line-height: 19px;
  }

  .personality-traits__traits {
    gap: var(--xl);
    margin-top: 28px;
  }

  .personality-traits__label,
  .personality-traits__value {
    line-height: 19px;
  }

  .personality-traits__track {
    background: var(--primary-20);
  }

  .personality-traits__subtitle {
    line-height: 17px;
  }
}

/* ---- photo_result_page ---- */
/* photo_result_page — workflow_photo_result_page.dart */

/* The photo page is not the section list: its body has its own padding
   inside LargeLayoutContainer(maxWidth: 900), so the list's padding goes. */
.report:has(> .photo-result) {
  padding: 0;
}

/* SafeArea > Column(Expanded stage, action row), filling the screen below
   the bar. Sample only: the bar is the landing's header (91 tall, 68 on a
   phone, sticky under the top inset), and the landing's footer follows
   below the fold. */
.photo-result {
  --bar: 91px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--bar) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - var(--bar) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  /* Sample only: a landscape phone would otherwise leave no room for the
     picture; the page scrolls instead. */
  min-height: 360px;
  line-height: 1.43;
}

@media (max-width: 760px) {
  .photo-result {
    --bar: 68px;
  }
}

/* Expanded > Padding(LTRB base, xl, base, xl) > Center. One 100% x 100%
   grid cell, so the picture's max-width/max-height resolve against the
   space the Expanded leaves. */
.photo-result__stage {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  padding: var(--xl) var(--base);
}

/* ClipRRect(radius: base) > Image.network(fit: contain), no width or
   height: its own pixel size, scaled down (never up) to fit the box,
   aspect kept. */
.photo-result__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--base);
  object-fit: contain;
}

/* _ImagePlaceholder: Container(width: infinity, height: 300,
   backgroundTertiary, radius base) > Center > Icon (24, Colors.white24). */
.photo-result__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  border-radius: var(--base);
  background: var(--background-tertiary);
  color: rgba(255, 255, 255, 0.24);
}

.photo-result__placeholder-icon {
  display: block;
}

/* Padding(top: md, bottom: xl) > Row(mainAxisAlignment: center) with
   SizedBox(width: xl) between the buttons. */
.photo-result__actions {
  flex: none;
  display: flex;
  justify-content: center;
  gap: var(--xl);
  padding: var(--md) 0 var(--xl);
}

/* _PhotoActionButton: Column(mainAxisSize: min), children centred. */
.photo-result__action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container(60 x 60, white 10%, circle) > Center */
.photo-result__action-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* icon.svg(24 x 24, ColorFilter.mode(white, srcIn)) */
.photo-result__action-icon {
  display: block;
}

/* SizedBox(height: sm), then heading9 white, on one line. */
.photo-result__action-label {
  margin-top: var(--sm);
  color: #ffffff;
  white-space: nowrap;
}

/* ---- place_card ---- */
/* place_card: lib/modules/workflow/ui/result_sections/place_card_section.dart */

/* ClipRRect(radius: AppSpacing.xl) > AspectRatio(343 / 172) >
   Stack(fit: StackFit.expand) */
.place-card {
  position: relative;
  width: 100%;
  aspect-ratio: 343 / 172;
  overflow: hidden;
  border-radius: var(--xl);
  isolation: isolate;
}

/* Assets.images.workflowResults.mapDark.image(fit: BoxFit.cover) */
.place-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Center: loose constraints of the whole card. */
.place-card__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ClipRRect(radius: AppSpacing.md) > BackdropFilter(blur sigma 16) >
   Container(padding: 12 horizontal / 10 vertical,
             color: primary @ 0.2, radius: AppSpacing.md) >
   Row(mainAxisSize: min, crossAxisAlignment: center).
   A label too long for the card overflows the Row unwrapped and is clipped
   at the pill's rounded edge, as in the app. */
.place-card__pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  padding: 10px var(--md);
  overflow: hidden;
  border-radius: var(--md);
  background: rgba(255, 195, 173, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Icon(Icons.favorite, color: Colors.white, size: AppSpacing.xl) */
.place-card__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--xl);
  height: var(--xl);
  color: #ffffff;
}

/* SizedBox(width: AppSpacing.sm), then
   AppTextStyles.heading11.copyWith(color: Colors.white) */
.place-card__label {
  flex: 0 0 auto;
  margin-left: var(--sm);
  color: #ffffff;
  white-space: pre;
}

/* ------------------------------------------------------ tablet and desktop
   Not drawn in Figma "Sample Report" (8805:22321). The card keeps its
   aspect, so at the column's width it would be 1020 x 511 on a tablet and
   1264 x 634 on a desktop: from 761 it keeps to the old 868 column, on the
   column's left edge (see .report__mystic in base.css). */

@media (min-width: 761px) {
  .place-card {
    max-width: 868px;
  }
}

/* ---- portrait ---- */
/* portrait — portrait_section.dart */

/* Column: a flex container keeps the frame's 16px top gap even without a
   title (the Dart always adds SizedBox(16) before the image). */
.portrait {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Row(crossAxisAlignment: start): Expanded(text column), SizedBox(8), arrow 80. */
.portrait__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
}

.portrait__heading {
  flex: 1 1 0;
  min-width: 0;
}

.portrait__title,
.portrait__description {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* SizedBox(height: AppSpacing.sm) */
.portrait__description {
  margin-top: var(--sm);
}

.portrait__arrow {
  flex: none;
  width: 80px;
  height: 80px;
}

/* SizedBox(height: AppSpacing.base), then ClipRRect(radius: AppSpacing.xl). */
.portrait__frame {
  margin-top: var(--base);
  overflow: hidden;
  border-radius: var(--xl);
}

/* Image.network(width: double.infinity, fit: cover): full width, height from
   the picture's own aspect ratio. */
.portrait__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", PortraitBlock 8805:22357: the 80 header row
   centred (32 title, 12, the description), 24 to the image; a landscape
   image is a 456-tall band, cropped near its top so the faces stay in. */

@media (min-width: 1101px) {
  .portrait__header {
    align-items: center;
  }

  .portrait__title {
    font-size: 32px;
    line-height: 38px;
  }

  .portrait__description {
    margin-top: var(--md);
    line-height: 19px;
  }

  .portrait__frame {
    margin-top: var(--xl);
  }

  .portrait--band .portrait__image {
    height: 456px;
    object-position: 50% 10%;
  }
}

/* Not landscape, from 761 (a tablet's column would make a square one 1020
   tall): its own aspect, at most 720 tall, centred, the radius on the
   picture itself. The width comes from the real size (--w/--h), so the box
   is there before the image loads; without them (a size the build could
   not read) the declaration drops out and max-height alone caps it. */
@media (min-width: 761px) {
  .portrait:not(.portrait--band) .portrait__frame {
    overflow: visible;
    border-radius: 0;
  }

  .portrait:not(.portrait--band) .portrait__image {
    width: min(100%, calc(720px * var(--w) / var(--h)));
    max-height: 720px;
    margin: 0 auto;
    border-radius: var(--xl);
  }
}

/* ---- social_status ---- */
/* social_status: social_status_section.dart */

.social-status {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* heading2, white; SizedBox(height: base) below */
.social-status__title {
  margin: 0 0 var(--base);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 190 tall, primary @ 0.2, radius xl; Column(crossAxis: center) opened by
   SizedBox(height: xxl) */
.social-status__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 190px;
  padding-top: var(--xxl);
  background: rgba(255, 195, 173, 0.2);
  border-radius: var(--xl);
}

/* 49 tall, LinearGradient centerLeft -> centerRight:
   primary @ 0, primary, primary @ 0; SizedBox(height: md) below */
.social-status__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  margin-bottom: var(--md);
  background: linear-gradient(
    90deg,
    rgba(255, 195, 173, 0) 0%,
    #ffc3ad 50%,
    rgba(255, 195, 173, 0) 100%
  );
}

/* heading2, onPrimary. Center gives it at most the bar's 49 height and
   Text clips what overflows. min-width: 0 lets the flex item shrink below
   an over-long word so it breaks, as Flutter's paragraph layout does. */
.social-status__label {
  min-width: 0;
  max-height: 49px;
  overflow: hidden;
  color: var(--on-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Expanded + horizontal padding base; body1 white, centred. The Text gets
   the space left in the 190 box (97) and clips what does not fit. */
.social-status__description {
  flex: 1;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  padding: 0 var(--base);
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). It keeps the app's look, with
   the frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 1101px) {
  .social-status__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- story ---- */
/* story — story_section.dart */

.story {
  display: block;
}

/* Row(mainAxisAlignment: spaceBetween), cross axis centred (the default):
   Expanded(title), then SizedBox(8) + 80 icon when the title has one. */
.story__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
}

.story__title {
  flex: 1 1 0;
  min-width: 0;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.story__icon {
  flex: none;
  width: 80px;
  height: 80px;
}

/* SizedBox(height: AppSpacing.md) only when there is both a title and a body. */
.story__header + .story__card {
  margin-top: var(--md);
}

/* Container(width: infinity, padding: xl, white 10%, radius xl). */
.story__card {
  width: 100%;
  padding: var(--xl);
  border-radius: var(--xl);
  background: rgba(255, 255, 255, 0.1);
}

.story__body {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- desktop
   Figma "Sample Report", Vocation 8805:22443 / 8805:22444: the title 32
   bold (no tracking), 32 to a white-10% card (padding 24, radius 24) whose
   body is 20 regular on a 32 line. A story with only a title is just
   that title (All of your Heritage's part headings). */

@media (min-width: 1101px) {
  .story__title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0;
  }

  .story__header + .story__card {
    margin-top: var(--xxl);
  }

  .story__body {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* ---- surname_bullet_card ---- */
/* surname_bullet_card — SurnameBulletCard, surname_result_cards.dart */

/* SurnameCard: Container(width: infinity, padding: all xl, primary 10%,
   radius xl). Column(crossAxis: start).
   The surname page is a Scaffold too, so its Texts are 1.43 tall. */
.surname-bullet-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--xl);
  background: rgba(255, 195, 173, 0.1);
  border-radius: var(--xl);
  line-height: 1.43;
}

/* heading2 onBackground, then SizedBox(height: base). */
.surname-bullet-card__title {
  max-width: 100%;
  margin-bottom: var(--base);
  color: var(--on-background);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Padding(left: sm) > Row(crossAxis: start): '•', SizedBox(width: sm),
   Expanded text. The Expanded makes the row as wide as the card. */
.surname-bullet-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
  width: 100%;
  padding-left: var(--sm);
}

/* body1 primary for the bullet and the item. */
.surname-bullet-card__bullet,
.surname-bullet-card__text {
  color: var(--primary);
}

.surname-bullet-card__bullet {
  flex: none;
}

.surname-bullet-card__text {
  flex: 1 1 0;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- surname_ranked_card ---- */
/* surname_ranked_card — SurnameRankedCard + _RankedRow, surname_result_cards.dart */

/* SurnameCard: Container(width: infinity, padding: all xl, primary 10%,
   radius xl). Column(crossAxis: start).
   The surname page is a Scaffold too, so its Texts are 1.43 tall. */
.surname-ranked-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: var(--xl);
  background: rgba(255, 195, 173, 0.1);
  border-radius: var(--xl);
  line-height: 1.43;
}

/* Row (children centred vertically): Expanded text column,
   SizedBox(width: sm), the 80 x 80 illustration. */
.surname-ranked-card__header {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

.surname-ranked-card__heading {
  flex: 1 1 0;
  min-width: 0;
}

/* heading2 onBackground, SizedBox(height: 10), body1 onBackground. */
.surname-ranked-card__title,
.surname-ranked-card__subtitle {
  color: var(--on-background);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.surname-ranked-card__subtitle {
  margin-top: 10px;
}

.surname-ranked-card__illustration {
  flex: none;
  width: 80px;
  height: 80px;
  max-width: none;
}

/* SizedBox(height: xl) before each _RankedRow: Column(crossAxis: start). */
.surname-ranked-card__row {
  display: flex;
  flex-direction: column;
  margin-top: var(--xl);
}

/* Row (centred): Expanded label, SizedBox(width: sm), count. */
.surname-ranked-card__line {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

/* heading4 onBackground for both. The count is not flexible, so a Row
   gives it all the width it wants and it never wraps. */
.surname-ranked-card__label,
.surname-ranked-card__count {
  color: var(--on-background);
}

.surname-ranked-card__label {
  flex: 1 1 0;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.surname-ranked-card__count {
  flex: none;
  white-space: nowrap;
}

/* SizedBox(height: 10), then Container(width: infinity, height: 10,
   primary 20%, radius 50) > Align(centerLeft) >
   FractionallySizedBox(widthFactor: fraction) > Container(primary,
   radius 50). The build sets the fill's width inline. */
.surname-ranked-card__track {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 10px;
  border-radius: 50px;
  background: rgba(255, 195, 173, 0.2);
}

.surname-ranked-card__fill {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: var(--primary);
}

/* ---- surname_search_field ---- */
/* surname_search_field: lib/modules/surname_search/ui/widgets/surname_search_field.dart
   (SurnameSearchField + _ClearButton + _SearchButton) */

/* Column(crossAxisAlignment: start). Its label has Material's
   DefaultTextStyle line height (bodyMedium, M3 geometry: 1.43), the same
   `.report` sets; repeated here because the field sits in the page header,
   outside the report list. */
.surname-search-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  line-height: 1.43;
}

/* AppTextStyles.heading4.copyWith(color: colors.onBackground), then
   SizedBox(height: AppSpacing.sm) */
.surname-search-field__label {
  max-width: 100%;
  margin-bottom: var(--sm);
  color: var(--on-background);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Row (crossAxisAlignment: center): Expanded pill, SizedBox(width:
   AppSpacing.sm), the search button. Full width because the pill is
   Expanded. */
.surname-search-field__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

/* Expanded > ClipRRect(radius 50) > SizedBox(height: 50) >
   ColoredBox(backgroundTertiary) > Row(crossAxisAlignment: center) */
.surname-search-field__pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
  overflow: hidden;
  border-radius: 50px;
  background: var(--background-tertiary);
}

/* Expanded > TextField(contentPadding: horizontal AppSpacing.xl). The
   decorator is at least kMinInteractiveDimension tall and centres the one
   line in it, which centres it in the 50 pill. */
.surname-search-field__input {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--xl);
}

/* The TextField's style is textTheme.bodyLarge merged with
   AppTextStyles.body1.copyWith(color: colors.onBackground): body1 sets no
   height, so bodyLarge's M3 geometry gives 1.5. EditableText does not
   merge DefaultTextStyle. One line, scrolled to its start and clipped. */
.surname-search-field__text {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  color: var(--on-background);
  line-height: 1.5;
  white-space: pre;
}

/* hintStyle: body1, colors.onBackground 40%, merged over bodyLarge (1.5).
   hintMaxLines falls back to the field's maxLines (1), which ellipsises. */
.surname-search-field__text--hint {
  color: rgba(255, 255, 255, 0.4);
  text-overflow: ellipsis;
}

/* Padding(right: AppSpacing.base) > _ClearButton: Container(AppSpacing.lg
   x AppSpacing.lg, backgroundQuaternary, circle) > Center */
.surname-search-field__clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lg);
  height: var(--lg);
  margin-right: var(--base);
  border-radius: 50%;
  background: var(--background-quaternary);
  color: var(--on-background);
}

/* Assets.svg.cancel.svg(width: md, height: md, colorFilter: onBackground) */
.surname-search-field__clear-glyph {
  display: block;
  width: 12px;
  height: 12px;
}

/* SizedBox(width: AppSpacing.sm), then _SearchButton: Container(50 x 50,
   onBackground 10%, circle) > Center */
.surname-search-field__search {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-left: var(--sm);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-background);
  text-decoration: none;
}

/* Assets.svg.search.svg(width: xl, height: xl, colorFilter: onBackground) */
.surname-search-field__search-glyph {
  display: block;
  width: 24px;
  height: 24px;
}

/* ---- surname_stat_card ---- */
/* surname_stat_card — SurnameStatCard, surname_result_cards.dart */

/* SurnameCard: Container(width: infinity, padding: all xl, primary 10%,
   radius xl). Column, children centred.
   The surname page is a Scaffold too, so its Texts are 1.43 tall. */
.surname-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--xl);
  background: rgba(255, 195, 173, 0.1);
  border-radius: var(--xl);
  line-height: 1.43;
}

/* heading1 primary, textAlign center; then SizedBox(height: sm) and
   heading7 primary, textAlign center. */
.surname-stat-card__value,
.surname-stat-card__caption {
  max-width: 100%;
  text-align: center;
  color: var(--primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.surname-stat-card__caption {
  margin-top: var(--sm);
}

/* ---- surname_text_card ---- */
/* surname_text_card — SurnameTextCard, surname_result_cards.dart */

/* SurnameCard: Container(width: infinity, padding: all xl, primary 10%,
   radius xl). Column(crossAxis: start).
   The surname page is a Scaffold too, so its Texts are 1.43 tall. */
.surname-text-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--xl);
  background: rgba(255, 195, 173, 0.1);
  border-radius: var(--xl);
  line-height: 1.43;
}

/* heading2 onBackground, then SizedBox(height: base). */
.surname-text-card__title {
  max-width: 100%;
  margin-bottom: var(--base);
  color: var(--on-background);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* body1 primary. */
.surname-text-card__body {
  max-width: 100%;
  color: var(--primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- text_card ---- */
/* text_card: lib/modules/workflow/ui/result_sections/text_card_section.dart */

/* Column(crossAxisAlignment: start) */
.text-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* AppTextStyles.heading2.copyWith(color: Colors.white), then
   SizedBox(height: AppSpacing.base) */
.text-card__title {
  margin-bottom: var(--base);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ClipRRect(radius: AppSpacing.xl) > BackdropFilter(blur sigma 42) >
   Container(width: infinity, padding: all AppSpacing.xl,
             color: backgroundTertiary, radius: AppSpacing.xl) */
.text-card__card {
  width: 100%;
  padding: var(--xl);
  overflow: hidden;
  border-radius: var(--xl);
  background: var(--background-tertiary);
  -webkit-backdrop-filter: blur(42px);
  backdrop-filter: blur(42px);
}

/* AppTextStyles.body1.copyWith(color: Colors.white) */
.text-card__body {
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). The same shape as the story
   (a title over a card), so it takes the story's treatment: the 32
   title, 32 to the card, the body 20 regular on a 32 line. */

@media (min-width: 1101px) {
  .text-card__title {
    margin-bottom: var(--xxl);
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0;
  }

  .text-card__body {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* ---- theme_of_day ---- */
/* theme_of_day: theme_of_day_section.dart */

.theme-of-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* heading2, white; SizedBox(height: base) below */
.theme-of-day__title {
  margin: 0 0 var(--base);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* primary @ 0.2, radius xl; SizedBox(height: xxl) at the top */
.theme-of-day__card {
  width: 100%;
  padding-top: var(--xxl);
  background: rgba(255, 195, 173, 0.2);
  border-radius: var(--xl);
}

/* 49 tall, LinearGradient centerLeft -> centerRight:
   primary @ 0, primary, primary @ 0 */
.theme-of-day__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 49px;
  background: linear-gradient(
    90deg,
    rgba(255, 195, 173, 0) 0%,
    #ffc3ad 50%,
    rgba(255, 195, 173, 0) 100%
  );
}

/* heading2, onPrimary. Center gives it at most the bar's 49 height and
   Text clips what overflows. min-width: 0 lets the flex item shrink below
   an over-long word so it breaks, as Flutter's paragraph layout does. */
.theme-of-day__label {
  min-width: 0;
  max-height: 49px;
  overflow: hidden;
  color: var(--on-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* padding 16, 12, 16, 0; body1 white */
.theme-of-day__description {
  margin: 0;
  padding: var(--md) var(--base) 0;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* padding 16, 16, 16, 0; heading4 primary */
.theme-of-day__subtitle {
  margin: 0;
  padding: var(--base) var(--base) 0;
  color: var(--primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* padding 16, 8, 16, 0 */
.theme-of-day__items {
  margin: 0;
  padding: var(--sm) var(--base) 0;
  list-style: none;
}

/* Row(crossAxis: start) with bottom padding sm */
.theme-of-day__item {
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--sm);
}

/* 4x4 primary circle, padding top sm, right sm */
.theme-of-day__dot {
  flex: none;
  width: var(--xs);
  height: var(--xs);
  margin: var(--sm) var(--sm) 0 0;
  border-radius: 50%;
  background: var(--primary);
}

/* Expanded; body1 italic white */
.theme-of-day__item-text {
  flex: 1;
  min-width: 0;
  font-style: italic;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* padding 16, 12, 16, 0; Align(centerRight) */
.theme-of-day__pill-row {
  display: flex;
  justify-content: flex-end;
  padding: var(--md) var(--base) 0;
}

/* padding h md / v xs, primary @ 0.2, radius 50; body4 primary.
   The pill is a RichText, not a Text, and RichText does not merge
   DefaultTextStyle, so it is the one text in the section without the 1.43
   height: its spans use the font's natural line height (the value span
   inherits this). min-width: 0 lets the flex item shrink below an
   over-long word so it breaks inside the Align's loose width. */
.theme-of-day__pill {
  min-width: 0;
  padding: var(--xs) var(--md);
  border-radius: 50px;
  background: rgba(255, 195, 173, 0.2);
  color: var(--primary);
  line-height: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.theme-of-day__pill-value {
  color: #ffffff;
}

/* padding 16, 12, 16, 0; Divider(height: 1), M3 thickness 1, primary @ 0.1 */
.theme-of-day__divider {
  margin: var(--md) var(--base) 0;
  height: 1px;
  background: rgba(255, 195, 173, 0.1);
}

/* padding 16, 12, 16, 16; centered body7 primary @ 0.5 */
.theme-of-day__caption {
  margin: 0;
  padding: var(--md) var(--base) var(--base);
  text-align: center;
  color: rgba(255, 195, 173, 0.5);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* SizedBox(height: base) when there is no caption */
.theme-of-day__end {
  display: block;
  height: var(--base);
}

/* ------------------------------------------------------ tablet and desktop
   Not drawn in Figma "Sample Report" (8805:22321). From 761 the section
   keeps to the old 868 column, on the column's left edge under the mystic
   illustration (see .report__mystic in base.css), so its 16px body does
   not run 190 characters to a line at 1264. On a desktop it has the
   frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 761px) {
  .theme-of-day {
    max-width: 868px;
  }
}

@media (min-width: 1101px) {
  .theme-of-day__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- weekly_calendar ---- */
/* weekly_calendar: weekly_calendar_section.dart */

/* Row(mainAxisAlignment: spaceBetween), crossAxisAlignment center. */
.weekly-calendar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* _DayPill: Column(mainAxisSize: min), children centred. */
.weekly-calendar__day {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
}

/* AppTextStyles.body4.copyWith(color: Colors.white), then SizedBox(xs). */
.weekly-calendar__abbreviation {
  display: block;
  margin-bottom: var(--xs);
  color: #ffffff;
  white-space: nowrap;
}

/* SizedBox 40x40 > Stack > Container(primary @ 0.2, radius sm). */
.weekly-calendar__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sm);
  background: rgba(255, 195, 173, 0.2);
}

.weekly-calendar__pill--active {
  background: var(--primary);
}

/* AppTextStyles.heading7, white, or onPrimary on the active day. */
.weekly-calendar__number {
  color: #ffffff;
  white-space: nowrap;
}

.weekly-calendar__pill--active .weekly-calendar__number {
  color: var(--on-primary);
}

/* Positioned(top: xs, right: xs): an sm circle in context.colors.error. */
.weekly-calendar__dot {
  position: absolute;
  top: var(--xs);
  right: var(--xs);
  width: var(--sm);
  height: var(--sm);
  border-radius: 50%;
  background: var(--error);
}

/* ------------------------------------------------------ tablet and desktop
   Not drawn in Figma "Sample Report" (8805:22321). spaceBetween across the
   whole column would put the seven days 170 apart at 1264: from 761 the
   row keeps to the old 868 column, on the column's left edge (see
   .report__mystic in base.css). */

@media (min-width: 761px) {
  .weekly-calendar {
    max-width: 868px;
  }
}

/* ---- zodiac_compatibility ---- */
/* zodiac_compatibility: zodiac_compatibility_section.dart */

/* Column(crossAxisAlignment: start). */
.zodiac-compatibility {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* heading2 white, then SizedBox(md). */
.zodiac-compatibility__title {
  margin-bottom: var(--md);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Container(width: infinity, padding: base, primary @ 0.1,
   Border.all(primary, 0.5), radius xl). Its Column centres its children and
   opens with SizedBox(base) and closes with SizedBox(sm), folded into the
   top and bottom padding here. */
.zodiac-compatibility__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: calc(var(--base) + var(--base)) var(--base) calc(var(--base) + var(--sm));
  border: 0.5px solid var(--primary);
  border-radius: var(--xl);
  background: rgba(255, 195, 173, 0.1);
}

/* Row(spaceEvenly, crossAxisAlignment: start). Row children get unbounded
   width in Flutter, so none of them shrink or wrap. */
.zodiac-compatibility__signs {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

/* _SignColumn: Column, children centred. */
.zodiac-compatibility__sign {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
}

/* 56 circle, primary @ 0.1, Border.all(primary) (1px), icon centred. */
.zodiac-compatibility__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  background: rgba(255, 195, 173, 0.1);
}

/* 24px icon, ColorFilter.mode(Colors.white, srcIn). */
.zodiac-compatibility__icon {
  display: block;
  width: var(--xl);
  height: var(--xl);
  color: #ffffff;
}

/* SizedBox(base), heading4 white. */
.zodiac-compatibility__sign-name {
  display: block;
  margin-top: var(--base);
  color: #ffffff;
  white-space: pre;
}

/* SizedBox(xs), body1 white @ 0.7. */
.zodiac-compatibility__sign-label {
  display: block;
  margin-top: var(--xs);
  color: rgba(255, 255, 255, 0.7);
  white-space: pre;
}

/* An empty Text still lays out one line in Flutter; an empty span would
   collapse, so give it an invisible character. */
.zodiac-compatibility__sign-name:empty::before,
.zodiac-compatibility__sign-label:empty::before {
  content: "\200b";
}

/* Padding(top: xxl) > Column, children centred. */
.zodiac-compatibility__match {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  padding-top: var(--xxl);
}

/* heading2 primary. */
.zodiac-compatibility__percentage {
  display: block;
  color: var(--primary);
  white-space: nowrap;
}

/* SizedBox(xs), heading6 primary. */
.zodiac-compatibility__match-label {
  display: block;
  margin-top: var(--xs);
  color: var(--primary);
  white-space: nowrap;
}

/* SizedBox(xl), then Row: Expanded line, sparkle padded sm, Expanded line. */
.zodiac-compatibility__divider {
  display: flex;
  align-items: center;
  margin-top: var(--xl);
}

/* Container(height: 1, primary @ 0.2). */
.zodiac-compatibility__line {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(255, 195, 173, 0.2);
}

/* sparkle.svg at base x base, ColorFilter.mode(primary, srcIn). The file's
   own fill-opacity (0.2) is kept, as srcIn keeps the source alpha. */
.zodiac-compatibility__sparkle {
  display: block;
  flex: none;
  width: var(--base);
  height: var(--base);
  margin: 0 var(--sm);
  color: var(--primary);
}

/* SizedBox(xl), Padding(horizontal: sm), body1 primary, centred. */
.zodiac-compatibility__description {
  margin-top: var(--xl);
  padding: 0 var(--sm);
  color: var(--primary);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- desktop
   Not drawn in Figma "Sample Report" (8805:22321). It keeps the app's look, with
   the frame's section title (32 bold) and its 24 down to the content. */

@media (min-width: 1101px) {
  .zodiac-compatibility__title {
    margin-bottom: var(--xl);
    font-size: 32px;
    line-height: 38px;
  }
}

/* ---- page: surname ---- */
/* The surname result page: surname_result_page.dart (SurnameResultPage).
   Its widgets are ports in sections/: surname_search_field and the
   surname_*_card renderers. This is only the page around them, between
   the landing's header and footer (which replace the app's CloseTopBar).

   LargeLayoutContainer() > SafeArea: the whole width on a phone, at most
   kMaxLargeLayoutWidth (650) from DeviceType.medium (768) up, centred (as
   the legal pages centre their column under the same header). On a phone
   the field and the cards sit in the landing's gutter (20), so they line
   up with the logo; in the 650 column they keep the app's 16. */
.surname-page {
  width: 100%;
  margin: 0 auto;
  padding-top: var(--xl);
  --surname-inset: var(--gutter);
}

@media (min-width: 768px) {
  .surname-page {
    max-width: 650px;
    --surname-inset: var(--base);
  }
}

/* The Figma frame's 64 under the header on a desktop, as the section
   pages. */
@media (min-width: 1101px) {
  .surname-page {
    padding-top: var(--massive);
  }
}

/* The field padded on each side, then SizedBox(height: base). In the app
   it stays put above the list; here it scrolls with the cards, under the
   landing's sticky header. */
.surname-page__field {
  padding: 0 var(--surname-inset) var(--base);
}

/* ListView.separated(padding: LTRB base, base, base, massive), a
   SizedBox(height: base) between the cards. */
.surname-page__list {
  display: flex;
  flex-direction: column;
  gap: var(--base);
  padding: var(--base) var(--surname-inset) var(--massive);
}