/* The check-in on the web (M8-337): call 66 v1's pages, in the design library's own look. Every color, size,
   distance, corner and shadow is one of the library's theme variables (theme/fdf-theme.css, the library's file
   byte for byte), as its components use them; a later revision of the theme is that one file. Each block names
   the library component whose look it repeats. Nothing on the page is smaller than 14 (call 64's rule, kept for
   the whole page): no role below body-md is used. Light and dark follow the device (checkin.js sets
   data-scheme). One centered column at a readable width, on a phone and on a computer. */

@font-face {
  font-family: "Inter";
  src: url("/check-in/assets/fonts/Inter-Variable.ttf?v=0be2399ea925f1f8") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/check-in/assets/fonts/DMSerifDisplay-Regular.ttf?v=3722299d62af9b61") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html { color-scheme: light; background: var(--color-surface-app); }
html[data-scheme="dark"] { color-scheme: dark; }

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

/* The library's element defaults (its styles.css base layer): a blank page already reads as FDF. */
body {
  margin: 0;
  background: var(--color-surface-app);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
/* headings break into even lines; a paragraph avoids a last word alone */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* A view's heading takes focus when the view changes, for a screen reader; it draws no ring. */
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }
img { display: block; }
button, input { font: inherit; color: inherit; }

.fdf-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the page: one column, its sections a section apart, a foot clear of the edge ---------------------------- */

.fdf-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section);
  width: 100%;
  max-width: calc(37.5rem + 2 * var(--spacing-gutter));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(3 * var(--spacing)) var(--spacing-gutter) var(--spacing-foot);
}
.fdf-page:focus { outline: none; }
.fdf-noscript { padding: var(--spacing-gutter); font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); }
.fdf-spacer { flex: 1; min-height: var(--spacing-section); }
.fdf-group { display: flex; flex-direction: column; gap: var(--spacing-stack); }
.fdf-group-tight { display: flex; flex-direction: column; gap: calc(2 * var(--spacing)); }
/* A plain row: its items centered and 12 apart, with no padding of its own (the growth edge's header). */
.fdf-inline { display: flex; align-items: center; gap: calc(3 * var(--spacing)); }
.fdf-foot { display: flex; flex-direction: column; gap: calc(2 * var(--spacing)); }
.fdf-center { display: flex; justify-content: center; }

/* Logo, size sm: the full-color mark in light, the reverse in dark. */
.fdf-logo { display: inline-flex; align-self: flex-start; }
.fdf-logo img { width: calc(26 * var(--spacing)); height: auto; }
.fdf-only-light { display: var(--show-in-light); }
.fdf-only-dark { display: var(--show-in-dark); }

/* ---- type, by the theme's roles --------------------------------------------------------------------------- */

.fdf-display {
  font-family: var(--font-display); font-size: var(--text-display);
  line-height: var(--text-display--line-height); font-weight: var(--text-display--font-weight);
}
.fdf-screen-title {
  font-family: var(--font-display); font-size: var(--text-screen-title);
  line-height: var(--text-screen-title--line-height); font-weight: var(--text-screen-title--font-weight);
}
.fdf-section-title {
  font-family: var(--font-display); font-size: var(--text-section-title);
  line-height: var(--text-section-title--line-height); font-weight: var(--text-section-title--font-weight);
}
.fdf-title-md { font-size: var(--text-title-md); line-height: var(--text-title-md--line-height); font-weight: var(--text-title-md--font-weight); }
.fdf-title-sm { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--text-title-sm--font-weight); }
.fdf-body-lg { font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); font-weight: var(--text-body-lg--font-weight); }
.fdf-body-md { font-size: var(--text-body-md); line-height: var(--text-body-md--line-height); font-weight: var(--text-body-md--font-weight); }
.fdf-label-lg { font-size: var(--text-label-lg); line-height: var(--text-label-lg--line-height); font-weight: var(--text-label-lg--font-weight); }
.fdf-primary { color: var(--color-text-primary); }
.fdf-secondary { color: var(--color-text-secondary); }
.fdf-centered { text-align: center; }

/* ---- the dimensions' and attention's tones: a meaning's fill (ground), accent and mark (icons, lines) ------- */

.fdf-tone-bonds { --tone-fill: var(--color-meaning-bonds-fill); --tone-accent: var(--color-meaning-bonds-accent); --tone-mark: var(--color-meaning-bonds-mark); }
.fdf-tone-boundaries { --tone-fill: var(--color-meaning-boundaries-fill); --tone-accent: var(--color-meaning-boundaries-accent); --tone-mark: var(--color-meaning-boundaries-mark); }
.fdf-tone-legacy { --tone-fill: var(--color-meaning-legacy-fill); --tone-accent: var(--color-meaning-legacy-accent); --tone-mark: var(--color-meaning-legacy-mark); }
.fdf-tone-guidance { --tone-fill: var(--color-meaning-guidance-fill); --tone-accent: var(--color-meaning-guidance-accent); --tone-mark: var(--color-meaning-guidance-mark); }

/* Icon: lucide's line, 1.75 wide, in the color around it unless a tone says otherwise. */
.fdf-icon { width: var(--spacing-icon-md); height: var(--spacing-icon-md); flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fdf-icon-sm { width: var(--spacing-icon-sm); height: var(--spacing-icon-sm); }
.fdf-icon-done { color: var(--color-done-mark); }

/* IconChip, size sm: a 40 tile on the tone's fill, its icon in the tone's mark. */
.fdf-chip { display: inline-grid; place-items: center; flex: none; width: var(--spacing-chip-sm); height: var(--spacing-chip-sm);
  border-radius: var(--radius-sm); background: var(--tone-fill); color: var(--tone-mark); }

/* Tag: a short label in capitals on its tone's fill; the label stays ink. */
.fdf-tag { display: inline-flex; align-items: center; white-space: nowrap; text-transform: uppercase;
  border-radius: var(--radius-tag); padding: calc(1.5 * var(--spacing)) calc(3 * var(--spacing));
  background: var(--tone-fill, var(--color-meaning-trust-fill)); color: var(--color-text-primary);
  font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--text-title-sm--font-weight); }

/* ---- actions ---------------------------------------------------------------------------------------------- */

/* Button: a pill. Primary fills with the action color; secondary is the card with its line; compact for Back. */
.fdf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-inline);
  min-height: var(--spacing-control); padding: 0 calc(5 * var(--spacing));
  border: 1px solid transparent; border-radius: var(--radius-button);
  background: var(--color-action-primary); color: var(--color-text-on-primary);
  font-size: var(--text-title-md); line-height: var(--text-title-md--line-height); font-weight: var(--font-weight-semibold);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.fdf-button:active { background: var(--color-action-primary-pressed); }
.fdf-button-full { width: 100%; }
.fdf-button-secondary { background: var(--color-action-secondary); color: var(--color-text-primary); border-color: var(--color-border); }
.fdf-button-secondary:active { background: var(--color-action-secondary); }
.fdf-button-compact { min-height: var(--spacing-tap); padding: 0 calc(4 * var(--spacing));
  font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); }
/* Rule 7: the disabled primary drains its fill, keeps a readable label and a border that keeps its shape. */
.fdf-button:disabled, .fdf-button[aria-disabled="true"] {
  background: var(--color-action-disabled); color: var(--color-action-disabled-label);
  border-color: var(--color-action-disabled-border); cursor: default; }
.fdf-button[aria-busy="true"] { pointer-events: none; }
.fdf-button:focus-visible, .fdf-text-button:focus-visible, .fdf-link:focus-visible, .fdf-field-input:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* TextButton: words that act, in ink, a button's or a link's (the Privacy Notice's way to the check-in); a link
   inside a sentence keeps the sentence's size, underlined. */
.fdf-text-button { display: inline-flex; align-items: center; gap: var(--spacing); padding: 0; border: 0; background: none;
  border-radius: var(--radius-sm); color: var(--color-text-primary); cursor: pointer; text-decoration: none;
  min-height: var(--spacing-tap);
  font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--text-title-sm--font-weight); }
.fdf-link { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- the landing ------------------------------------------------------------------------------------------ */

/* The crests are the eight animal badges (DEC-667). The class names stay, as the page's contract with its script
   across a deploy or a rollback (checkin.js, at CRESTS). */
.fdf-crests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center;
  column-gap: calc(2 * var(--spacing)); row-gap: var(--spacing); }
.fdf-crests img { width: calc(20 * var(--spacing)); height: calc(20 * var(--spacing)); object-fit: contain; }
/* On a computer the eight spread into one row (the designer's answer to Peter, 2026-11-02 23:56Z). */
@media (min-width: 40rem) {
  .fdf-crests { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .fdf-crests img { width: calc(16 * var(--spacing)); height: calc(16 * var(--spacing)); }
}
.fdf-time { display: flex; align-items: center; justify-content: center; gap: calc(1.5 * var(--spacing)); }

/* ---- cards ------------------------------------------------------------------------------------------------ */

/* Card: plain (the card ground with its line), muted, and the hero padding. */
.fdf-card { display: block; border-radius: var(--radius-card); background: var(--color-surface-card);
  border: 1px solid var(--color-border); color: var(--color-text-primary); padding: var(--spacing-card); }
.fdf-card-lg { padding: var(--spacing-card-lg); }
.fdf-card-flush { padding: 0 var(--spacing-card); }
.fdf-card-muted { background: var(--color-surface-muted); border-color: transparent; }
.fdf-card-group { display: flex; flex-direction: column; gap: var(--spacing-stack); }

/* DimensionCard: its tile at the left beside everything; its name, a result's tag at the right; then its line. */
.fdf-dimension { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; }
.fdf-dimension > .fdf-chip { grid-column: 1; grid-row: 1 / -1; margin-right: var(--spacing-stack); }
.fdf-dimension-name { grid-column: 2; grid-row: 1; align-self: center; }
.fdf-dimension > .fdf-tag { grid-column: 3; grid-row: 1; align-self: center; margin-left: calc(2 * var(--spacing)); }
.fdf-dimension-line { grid-column: 2 / -1; grid-row: 2; margin-top: var(--spacing); }

/* ListGroup and ListRow: rows at least a tap high, a divider between them. */
.fdf-list { display: flex; flex-direction: column; }
.fdf-list > * + * { border-top: 1px solid var(--color-divider); }
.fdf-row { display: flex; align-items: center; gap: calc(3 * var(--spacing)); min-height: var(--spacing-tap);
  padding: var(--spacing-row) 0; text-align: left; }
.fdf-row-title { flex: 1; min-width: 0; }

/* SectionHeader: the serif title, its line under it. */
.fdf-section-head { display: flex; flex-direction: column; gap: var(--spacing); }

/* Notice: the green check, then the sentence. */
.fdf-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(3 * var(--spacing)); align-items: start; }
.fdf-notice > .fdf-icon { margin-top: 2px; }

/* The result card, made over (call 66 v1, item 7): the type is the headline, each dimension a row. In dark the
   card is the card ground with its gold edge, and its panel the app's ground (call 31). */
.fdf-type-card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-stack); text-align: center;
  border-radius: var(--radius-card); border: 1px solid var(--color-crest-light-gold); background: var(--color-crest-ivory);
  padding: var(--spacing-card) var(--spacing-card) var(--spacing-card-lg); box-shadow: var(--shadow-raised); }
[data-scheme="dark"] .fdf-type-card { background: var(--color-surface-card); box-shadow: none; }
.fdf-type-card .fdf-crest { width: calc(45 * var(--spacing)); height: calc(45 * var(--spacing)); object-fit: contain; }
.fdf-type-head { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--spacing)); }
.fdf-type-rows { width: 100%; border-radius: var(--radius-control); background: var(--color-surface-card);
  padding: 0 var(--spacing-card); text-align: left; }
[data-scheme="dark"] .fdf-type-rows { background: var(--color-surface-app); }

/* ---- a question (call 64's page) -------------------------------------------------------------------------- */

/* ProgressRail: the dimension's mark over the muted rail. */
.fdf-rail { display: block; width: 100%; height: calc(1.5 * var(--spacing)); overflow: hidden;
  border-radius: var(--radius-full); background: var(--color-surface-muted); }
.fdf-rail-fill { display: block; height: 100%; width: 0; background: var(--tone-mark); }
.fdf-question-head { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--spacing)); }

/* The answer cards (call 64, DEC-633: RadioGroup's card look): a card per answer; the chosen one takes the
   dimension's fill and accent edge, and its check. */
.fdf-answers { display: flex; flex-direction: column; gap: var(--spacing-stack); margin: 0; padding: 0; border: 0; min-width: 0; }
.fdf-answer { position: relative; display: flex; align-items: center; gap: calc(3 * var(--spacing));
  min-height: var(--spacing-control); padding: calc(3 * var(--spacing)) calc(4 * var(--spacing));
  border-radius: var(--radius-control); border: 1px solid var(--color-border); background: var(--color-surface-card);
  cursor: pointer; }
.fdf-answer input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fdf-answer-label { flex: 1; min-width: 0; }
.fdf-answer .fdf-icon { color: var(--tone-mark); visibility: hidden; }
.fdf-answer:has(input:checked) { border-color: var(--tone-accent); background: var(--tone-fill); }
.fdf-answer:has(input:checked) .fdf-icon { visibility: visible; }
.fdf-answer:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- the email step: TextField's label, field and line ------------------------------------------------------ */

.fdf-form { display: flex; flex-direction: column; gap: var(--spacing-section); flex: 1; }
.fdf-field { display: flex; flex-direction: column; gap: calc(2 * var(--spacing)); }
.fdf-field-input { width: 100%; min-height: var(--spacing-control); padding: 0 calc(4 * var(--spacing));
  border-radius: var(--radius-control); border: 1px solid var(--color-border); background: var(--color-surface-card);
  color: var(--color-text-primary); font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); }
.fdf-field-input::placeholder { color: var(--color-text-secondary); }
.fdf-field-input[aria-invalid="true"] { border-color: var(--color-action-destructive); }
.fdf-field-error { color: var(--color-text-destructive); font-size: var(--text-body-md); line-height: var(--text-body-md--line-height); }
.fdf-alert { color: var(--color-text-destructive); }

/* The link with Copy link, where the browser has no share sheet. */
.fdf-copy { display: flex; flex-direction: column; gap: calc(2 * var(--spacing)); }

/* ---- the Privacy Notice (DEC-662): the page's column and type, each section a heading and its paragraphs ---- */

/* The Foundation's postal address reads as the paragraphs around it, not in the browser's italic. */
.fdf-address { font-style: normal; }