/*
 * FND Passport + My FND Profile.
 * Built on the FND Connect interaction contract (assets/css/fnd-interactions.css):
 * navy structure, magenta action, Inter, 44px targets / 48px controls, yellow
 * focus, explicit states, motion only when the user allows it. Mobile first.
 */

.fndp {
  --fndp-wrap: 72rem;
  --fndp-narrow: 40rem;
  --fndp-gap: 1rem;
  --fndp-emergency: #c9005a;
  --fndp-hospital: #002b5f;
  color: var(--fnd-text-body, #26364d);
  background: var(--fnd-surface-subtle, #f6f8fb);
  min-height: 60vh;
}

.fndp:focus { outline: none; }

.fndp-wrap { width: min(100% - 2rem, var(--fndp-wrap)); margin-inline: auto; }
.fndp-wrap--narrow { width: min(100% - 2rem, var(--fndp-narrow)); }
.fndp-section { padding-block: 1.5rem 3rem; }

.fndp h1 {
  margin: 0 0 0.5rem;
  color: var(--fnd-text-strong, #061b3d);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fndp h2 { color: var(--fnd-structure, #002b5f); line-height: 1.25; }
.fndp-h2 { margin: 2rem 0 0.35rem; font-size: 1.35rem; }
.fndp-kicker {
  margin: 0 0 0.35rem;
  color: var(--fnd-action, #c9005a);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fndp-lead { margin: 0 0 1.25rem; font-size: 1.1rem; line-height: 1.5; }
.fndp-muted { color: var(--fnd-text-muted, #56677d); }
.fndp-small { font-size: 0.9rem; }
.fndp-optional { color: var(--fnd-text-muted, #56677d); font-weight: 500; }

/* ── Actions ─────────────────────────────────────────────── */
.fndp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.fndp-actions--stack { flex-direction: column; align-items: stretch; margin-block: 1rem; }
.fndp-block { display: flex; width: 100%; }
.fndp-block-center { display: block; margin: 0.75rem auto 0; text-align: center; }
.fndp-cta { min-height: 52px; font-size: 1.05rem; }
.fndp-linkbtn {
  display: inline-flex;
  min-height: var(--fnd-tap-min, 44px);
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--fnd-structure, #002b5f);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fndp-linkbtn--danger { color: var(--fnd-danger, #a30d2d); }
.fndp-danger-btn { border-color: var(--fnd-danger, #a30d2d); background: var(--fnd-danger, #a30d2d); }
.fndp-danger-btn:hover { border-color: #7d0a22; background: #7d0a22; }

.fndp-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 0.25rem;
  margin: 1.5rem -1rem 0;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fnd-line, #d8e1ec);
  background: rgba(246, 248, 251, 0.96);
}

/* ── Feedback ────────────────────────────────────────────── */
.fndp-flash {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--fnd-success, #087455);
  border-radius: 0 10px 10px 0;
  background: #e8f5f0;
  color: #0a3d2e;
  font-weight: 600;
}
.fndp-flash--error { border-left-color: var(--fnd-danger, #a30d2d); background: #fdecef; color: #5c0718; }
.fndp-flash__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
}
.fndp-flash__icon { color: inherit; }
.fndp-flash > .fndp-flash__icon { background: var(--fnd-success, #087455); color: #fff; }
.fndp-flash--error > .fndp-flash__icon { background: var(--fnd-danger, #a30d2d); }

.fndp-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #f3c3d8;
  border-radius: var(--fnd-surface-radius, 16px);
  background: var(--fnd-surface-brand, #fff4f8);
}
.fndp-banner p { margin: 0; flex: 1 1 18rem; }
.fndp-banner--warn { border-color: #f0d08a; background: #fff8e6; }
.fndp-note { margin: 0 0 1.25rem; }

.fndp-source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #eef3f9;
  color: #34506f;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.fndp-source::before { content: "●"; font-size: 0.55rem; }
.fndp-source--seizecontrol { background: #fde9f2; color: #8a0d4b; }

/* ── Cards ───────────────────────────────────────────────── */
.fndp-card {
  margin: 0 0 1rem;
  padding: 1.15rem;
  border: 1px solid var(--fnd-line, #d8e1ec);
  border-radius: var(--fnd-surface-radius, 16px);
  background: #fff;
  box-shadow: var(--fnd-shadow-soft, 0 10px 28px rgba(0, 43, 95, 0.07));
}
.fndp-card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.fndp-card p:last-child { margin-bottom: 0; }
.fndp-card__head { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.fndp-card__head a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.fndp-card--warn { border-color: #f0d08a; background: #fffdf5; }

/* ── Forms ───────────────────────────────────────────────── */
.fndp-form { display: grid; gap: 1.15rem; }
.fndp-field { display: grid; gap: 0.35rem; }
.fndp-field > label, .fndp-label { color: var(--fnd-text-strong, #061b3d); font-weight: 700; }
.fndp-hint { margin: 0; color: var(--fnd-text-muted, #56677d); font-size: 0.9rem; }
.fndp input[type="text"], .fndp input:not([type]), .fndp input[type="email"], .fndp input[type="password"],
.fndp input[type="tel"], .fndp input[type="date"], .fndp input[type="month"], .fndp select, .fndp textarea {
  width: 100%;
  min-height: var(--fnd-control-min, 48px);
  padding: 0.65rem 0.8rem;
  border: 1.5px solid #9fb0c4;
  border-radius: var(--fnd-control-radius, 10px);
  background: #fff;
  color: var(--fnd-text-strong, #061b3d);
  font: inherit;
  font-size: 1rem;
}
.fndp textarea { min-height: 5.5rem; line-height: 1.5; resize: vertical; }
.fndp input:focus-visible, .fndp select:focus-visible, .fndp textarea:focus-visible { border-color: var(--fnd-structure, #002b5f); }
.fndp-fieldset { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.fndp-fieldset > legend { margin-bottom: 0.6rem; padding: 0; color: var(--fnd-text-strong, #061b3d); font-size: 1.05rem; font-weight: 800; }
.fndp-grid2 { display: grid; gap: 1rem; }

.fndp-check, .fndp-radio-card, .fndp-keep {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: var(--fnd-tap-min, 44px);
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--fnd-line, #d8e1ec);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.fndp-check input, .fndp-radio-card input, .fndp-keep input, .fndp-chip input {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.1rem 0 0;
  accent-color: var(--fnd-action, #c9005a);
}
.fndp-check:has(input:checked), .fndp-radio-card:has(input:checked) { border-color: var(--fnd-action, #c9005a); background: var(--fnd-surface-brand, #fff4f8); }
.fndp-radio-card span { display: grid; gap: 0.1rem; }
.fndp-radio-card small { color: var(--fnd-text-muted, #56677d); font-size: 0.85rem; }
.fndp-check--media img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.fndp-checks { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }

.fndp-chipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.55rem; }
.fndp-chip {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--fnd-line, #d8e1ec);
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.fndp-chip input { margin: 0; }
.fndp-chip:has(input:checked) { border-color: var(--fnd-action, #c9005a); background: var(--fnd-surface-brand, #fff4f8); }

.fndp-password { display: flex; gap: 0.5rem; }
.fndp-password input { flex: 1 1 auto; }
.fndp-password__toggle {
  min-width: 4.5rem;
  min-height: 48px;
  border: 1.5px solid #9fb0c4;
  border-radius: 10px;
  background: #fff;
  color: var(--fnd-structure, #002b5f);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.fndp-rows { display: grid; gap: 0.85rem; }
.fndp-row { display: grid; gap: 0.6rem; padding-bottom: 0.85rem; border-bottom: 1px dashed var(--fnd-line, #d8e1ec); }
.fndp-row__src { grid-column: 1 / -1; }
.fndp-episode, .fndp-contact { display: grid; gap: 0.9rem; margin: 0; }
.fndp-episode > legend { padding: 0 0.25rem; font-weight: 800; color: var(--fnd-structure, #002b5f); }
.fndp-other { display: none; }
.fndp-other.is-shown { display: grid; }

/* ── Stepper ─────────────────────────────────────────────── */
.fndp-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.fndp-back { display: inline-flex; gap: 0.35rem; align-items: center; min-height: 44px; color: var(--fnd-structure, #002b5f); font-weight: 700; text-decoration: none; }
.fndp-back span { font-size: 1.4rem; line-height: 1; }
.fndp-stepnav__count { color: var(--fnd-text-muted, #56677d); font-size: 0.9rem; font-weight: 700; }
.fndp-progress { height: 6px; margin: 0 0 1.5rem; border-radius: 999px; background: #dde5ef; overflow: hidden; }
.fndp-progress span { display: block; height: 100%; border-radius: inherit; background: var(--fnd-action, #c9005a); }

.fndp-meter { display: block; height: 8px; border-radius: 999px; background: #e3e9f1; overflow: hidden; }
.fndp-meter span { display: block; height: 100%; border-radius: inherit; background: var(--fnd-success, #087455); }
.fndp-meter--lg { height: 10px; margin-top: 0.5rem; grid-column: 1 / -1; }

.fndp-completion { display: grid; gap: 0.7rem; margin-bottom: 1.25rem; padding: 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--fnd-line, #d8e1ec); }
.fndp-completion__row { display: grid; grid-template-columns: minmax(0, 1fr) 30% 3rem; gap: 0.75rem; align-items: center; font-weight: 600; }
.fndp-completion__row strong { text-align: right; }

.fndp-summary { display: grid; gap: 0.75rem; }
.fndp-summary__item { padding: 1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 14px; background: #fff; }
.fndp-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fndp-summary__head h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.fndp-summary__head a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.fndp-summary ul { margin: 0; padding-left: 1.1rem; }

/* ── Lists ───────────────────────────────────────────────── */
.fndp-plain { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.fndp-plain li + li { margin-top: 0.3rem; }
.fndp-ticks, .fndp-checklist { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.fndp-ticks li, .fndp-checklist li { display: flex; gap: 0.55rem; align-items: flex-start; }
.fndp-ticks li::before, .fndp-checklist li::before {
  content: "✓";
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #e2f3ec;
  color: var(--fnd-success, #087455);
  font-size: 0.8rem;
  font-weight: 900;
}
.fndp-checklist--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fndp-dl { margin: 0; display: grid; gap: 0.6rem; }
.fndp-dl div { display: grid; gap: 0.1rem; }
.fndp-dl dt { color: var(--fnd-text-muted, #56677d); font-size: 0.85rem; font-weight: 700; }
.fndp-dl dd { margin: 0; color: var(--fnd-text-strong, #061b3d); font-weight: 600; }
.fndp-found__head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.fndp-found__head h2 { margin: 0; }
.fndp-keep { padding: 0.35rem 0.7rem; min-height: 44px; align-items: center; font-weight: 700; font-size: 0.95rem; }
.fndp-photo-row { display: flex; gap: 0.75rem; align-items: center; }
.fndp-photo-row img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.fndp-conflict { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; border: 0; }
.fndp-conflict legend { margin-bottom: 0.4rem; font-weight: 800; color: var(--fnd-text-strong, #061b3d); }

/* ── Landing ─────────────────────────────────────────────── */
.fndp-hero { padding-block: 2rem 2.5rem; background: linear-gradient(180deg, #fff 0%, #fff4f8 100%); }
.fndp-hero__grid { display: grid; gap: 2rem; align-items: center; }
.fndp-hero__lead { margin: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.45; color: var(--fnd-text-strong, #061b3d); }
.fndp-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-weight: 700; color: var(--fnd-structure, #002b5f); }
.fndp-trust span { color: var(--fnd-action, #c9005a); font-size: 0.6rem; vertical-align: middle; }
.fndp-demo { max-width: 22rem; margin-inline: auto; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--fnd-shadow-raised, 0 18px 42px rgba(0, 43, 95, 0.12)); border: 1px solid var(--fnd-line, #d8e1ec); }
.fndp-demo__band { padding: 0.7rem 1rem; background: var(--fndp-emergency); color: #fff; font-weight: 800; }
.fndp-demo__body { padding: 1rem 1.1rem 1.25rem; }
.fndp-demo__name { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--fnd-text-strong, #061b3d); }
.fndp-demo__dx { margin: 0.2rem 0 0.75rem; font-weight: 700; color: var(--fnd-action, #c9005a); font-size: 0.95rem; }
.fndp-demo__h { margin: 0 0 0.3rem; font-weight: 800; color: var(--fnd-structure, #002b5f); font-size: 0.9rem; }
.fndp-demo ul { margin: 0 0 0.75rem; padding-left: 1.1rem; font-size: 0.95rem; }
.fndp-demo__call { margin: 0; padding: 0.6rem; border-radius: 10px; border: 2px solid var(--fnd-structure, #002b5f); text-align: center; font-weight: 800; color: var(--fnd-structure, #002b5f); }
.fndp-callout { padding: 1.25rem; border-radius: var(--fnd-surface-radius, 16px); background: var(--fnd-structure, #002b5f); color: #fff; }
.fndp-callout h2 { color: #fff; margin: 0 0 0.4rem; font-size: 1.3rem; }
.fndp-callout .fnd-action--secondary { border-color: #fff; }
.fndp-how { display: grid; gap: 0.75rem; margin: 0.75rem 0 0; padding-left: 1.25rem; }
.fndp-features { display: grid; gap: 0.75rem; margin: 0.75rem 0 1.5rem; padding: 0; list-style: none; }
.fndp-features li { display: grid; gap: 0.15rem; padding: 1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 14px; background: #fff; }
.fndp-features strong { color: var(--fnd-structure, #002b5f); }
.fndp-safety { margin-top: 1rem; }

/* ── Done + offers ───────────────────────────────────────── */
.fndp-done { text-align: center; }
.fndp-done .fndp-checklist { text-align: left; }
.fndp-done__mark { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--fnd-action, #c9005a); color: #fff; font-size: 2.2rem; font-weight: 900; }
.fndp-offer { margin-top: 1.5rem; text-align: left; }
.fndp-offer__logo { display: block; height: auto; margin: 0 auto 0.75rem; }
.fndp-offer .fndp-offer__logo { margin-left: 0; }

/* ── My Passport ─────────────────────────────────────────── */
.fndp-pagehead { display: grid; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
.fndp-pagehead .fndp-lead { margin-bottom: 0; }
.fndp-homegrid { display: grid; gap: 1rem; }
.fndp-homegrid > .fndp-card { margin: 0; }
.fndp-homegrid + .fndp-h2, .fndp-homegrid + .fndp-card { margin-top: 1rem; }
.fndp-bigmeter { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; align-items: baseline; margin: 0.25rem 0 1rem; }
.fndp-bigmeter__num { font-size: 2.4rem; font-weight: 800; color: var(--fnd-text-strong, #061b3d); line-height: 1; }
.fndp-bigmeter__label { color: var(--fnd-text-muted, #56677d); font-weight: 700; }
.fndp-catlist { display: grid; gap: 0.85rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.fndp-catlist__row { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 0.3rem; }
.fndp-catlist p { margin: 0.3rem 0 0; }
.fndp-nextcard { border-color: #f3c3d8; background: var(--fnd-surface-brand, #fff4f8); }

.fndp-modes { display: grid; gap: 0.85rem; margin: 0.75rem 0 1.5rem; padding: 0; list-style: none; }
.fndp-mode { display: grid; gap: 0.75rem; padding: 1.1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: var(--fnd-surface-radius, 16px); background: #fff; box-shadow: var(--fnd-shadow-soft, 0 10px 28px rgba(0, 43, 95, 0.07)); }
.fndp-mode.is-soon { box-shadow: none; background: #fbfcfd; }
.fndp-mode.is-soon h3, .fndp-mode.is-soon p { color: var(--fnd-text-muted, #56677d); }
.fndp-mode__head { display: flex; gap: 0.85rem; align-items: flex-start; }
.fndp-mode__head h3 { margin: 0; font-size: 1.1rem; color: var(--fnd-text-strong, #061b3d); }
.fndp-mode__head p { margin: 0.15rem 0 0; font-size: 0.95rem; }
.fndp-mode__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #e9eef5; color: var(--fnd-structure, #002b5f); font-weight: 900; font-size: 1.1rem; }
.fndp-mode__icon--emergency { background: var(--fndp-emergency); color: #fff; }
.fndp-mode__icon--hospital { background: var(--fndp-hospital); color: #fff; }
.fndp-mode__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fndp-mode__actions .fnd-action { flex: 1 1 auto; min-height: 44px; padding: 0.45rem 0.8rem; font-size: 0.95rem; }
.fndp-pill { justify-self: start; margin: 0; padding: 0.25rem 0.65rem; border-radius: 999px; background: #eef2f7; color: #34506f; font-size: 0.82rem; font-weight: 700; }
.fndp-pill--on { background: #e2f3ec; color: #075a42; }

.fndp-editlist { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; }
.fndp-editlist a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 0.25rem; border-bottom: 1px solid #edf1f6; color: var(--fnd-text-strong, #061b3d); font-weight: 600; text-decoration: none; }
.fndp-editlist a span:last-child { color: var(--fnd-text-muted, #56677d); font-size: 1.4rem; }
.fndp-danger details { margin-top: 0.5rem; }
.fndp-danger summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--fnd-danger, #a30d2d); }
.fndp-inline-form { gap: 0.75rem; margin-top: 0.5rem; }

/* ── Sharing switches ────────────────────────────────────── */
.fndp-sharegroup { padding: 1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 16px; background: #fff; }
.fndp-sharegroup > legend { float: left; width: 100%; margin-bottom: 0.25rem; }
.fndp-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 56px; padding: 0.55rem 0; border-top: 1px solid #edf1f6; cursor: pointer; }
.fndp-switch:first-of-type { border-top: 0; }
.fndp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fndp-switch__text { display: grid; gap: 0.1rem; }
.fndp-switch__text strong { color: var(--fnd-text-strong, #061b3d); }
.fndp-switch__text small { font-size: 0.86rem; overflow-wrap: anywhere; }
.fndp-switch__track { position: relative; width: 3.1rem; height: 1.85rem; border-radius: 999px; background: #b7c3d1; }
.fndp-switch__track::after { content: ""; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.fndp-switch input:checked ~ .fndp-switch__track { background: var(--fnd-success, #087455); }
.fndp-switch input:checked ~ .fndp-switch__track::after { transform: translateX(1.25rem); }
.fndp-switch input:checked ~ .fndp-switch__track::before { content: "On"; position: absolute; left: 0.45rem; top: 50%; transform: translateY(-50%); color: #fff; font-size: 0.6rem; font-weight: 800; }
.fndp-switch input:focus-visible ~ .fndp-switch__track { outline: 3px solid var(--fnd-focus, #ffdd00); outline-offset: 3px; }

/* ── QR ──────────────────────────────────────────────────── */
.fndp-qr { display: grid; justify-items: center; gap: 0.5rem; margin: 0.5rem 0 1.25rem; padding: 1.25rem; border-radius: 20px; background: #fff; border: 1px solid var(--fnd-line, #d8e1ec); }
.fndp-qr__code { width: min(70vw, 16rem); }
.fndp-qr__code svg { display: block; width: 100%; height: auto; }
.fndp-qr__caption { margin: 0; font-weight: 800; color: var(--fnd-structure, #002b5f); }
.fndp-copy { display: flex; gap: 0.5rem; }
.fndp-copy input { flex: 1 1 auto; font-size: 0.9rem !important; }

/* ── Passport view (public + preview) ────────────────────── */
.fndp-viewbody .fndp { background: #eef2f7; }
.fndp-public-bar { display: flex; justify-content: center; padding: 0.6rem 1rem; background: #fff; border-bottom: 1px solid var(--fnd-line, #d8e1ec); }
.fndp-public-bar__brand { display: inline-flex; gap: 0.6rem; align-items: center; color: var(--fnd-structure, #002b5f); font-weight: 800; text-decoration: none; }
.fndp-public-bar__brand img { width: 72px; height: auto; }
.fndp-public-foot { padding: 1.25rem 1rem 2rem; text-align: center; color: var(--fnd-text-muted, #56677d); font-size: 0.9rem; background: #eef2f7; }
.fndp-previewbar { background: var(--fnd-structure, #002b5f); color: #fff; }
.fndp-previewbar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding-block: 0.6rem; }
.fndp-previewbar p { margin: 0; }
.fndp-previewbar__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.fndp-previewbar a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; }

.fndp-view { width: min(100% - 1.25rem, 40rem); margin: 1rem auto 2rem; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--fnd-shadow-raised, 0 18px 42px rgba(0, 43, 95, 0.12)); }
.fndp-view__band { padding: 0.8rem 1.1rem; background: var(--fndp-emergency); color: #fff; }
.fndp-view--hospital .fndp-view__band { background: var(--fndp-hospital); }
.fndp-view__band p { margin: 0; font-weight: 800; letter-spacing: 0.02em; }
.fndp-view__inner { padding: 1.1rem 1.1rem 1.5rem; }
.fndp-view__id { display: flex; gap: 1rem; align-items: center; }
.fndp-view__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--fnd-line, #d8e1ec); }
.fndp-view h1 { margin: 0; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); }
.fndp-view__sub { margin: 0.1rem 0 0; color: var(--fnd-text-muted, #56677d); font-weight: 600; }
.fndp-view__dx { margin: 0.9rem 0 0; color: var(--fnd-action, #c9005a); font-size: 1.15rem; font-weight: 800; line-height: 1.35; }
.fndp-view--hospital .fndp-view__dx { color: var(--fnd-structure, #002b5f); }
.fndp-view__intro { margin: 0.9rem 0 0; padding: 0.85rem 1rem; border-left: 4px solid var(--fnd-structure, #002b5f); border-radius: 0 12px 12px 0; background: #f2f6fb; color: var(--fnd-text-strong, #061b3d); font-size: 1.08rem; }
.fndp-view__safety { margin: 1.1rem 0 0; padding: 0.9rem 1rem 1rem; border: 2px solid var(--fndp-emergency); border-radius: 14px; background: #fff4f8; }
.fndp-view__safety h2 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--fndp-emergency); }
.fndp-view__safety ul { margin: 0 0 0.75rem; padding-left: 1.1rem; font-size: 0.95rem; }
.fndp-call999 { width: 100%; }
.fndp-view__sec { margin-top: 1.4rem; }
.fndp-view__sec h2 { margin: 0 0 0.45rem; font-size: 1.15rem; }
.fndp-view__sec p { margin: 0 0 0.5rem; }
.fndp-view__episode { padding: 0.85rem 1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 14px; }
.fndp-view__episode + .fndp-view__episode { margin-top: 0.6rem; }
.fndp-view__episode h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--fnd-text-strong, #061b3d); }
.fndp-view__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.25rem 0 0.5rem; }
.fndp-view__facts dt { color: var(--fnd-text-muted, #56677d); font-size: 0.82rem; font-weight: 700; }
.fndp-view__facts dd { margin: 0; font-weight: 700; color: var(--fnd-text-strong, #061b3d); }
.fndp-view__call { padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff4f8; }
.fndp-view__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.fndp-view__list li { position: relative; padding-left: 1.6rem; }
.fndp-view__list li::before { content: "•"; position: absolute; left: 0.45rem; color: var(--fnd-structure, #002b5f); font-weight: 900; }
.fndp-view__list--do li::before { content: "✓"; left: 0.2rem; color: var(--fnd-success, #087455); }
.fndp-view__list--dont li::before { content: "✕"; left: 0.2rem; color: var(--fnd-danger, #a30d2d); }
.fndp-view__duo { display: grid; gap: 0 1.25rem; }
.fndp-view__do h2 span { color: var(--fnd-success, #087455); }
.fndp-view__dont h2 span { color: var(--fnd-danger, #a30d2d); }
.fndp-view__allergy { padding: 0.75rem 1rem; border-radius: 12px; background: #fff8e6; border: 1px solid #f0d08a; }
.fndp-view__contacts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.fndp-view__contacts li { display: grid; gap: 0.45rem; padding: 0.75rem 0.85rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 14px; }
.fndp-view__contacts .fnd-action { width: 100%; }
.fndp-view__foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid #edf1f6; color: var(--fnd-text-muted, #56677d); font-size: 0.88rem; }
.fndp-emergency-call { margin: 1rem 0; padding: 1rem; border: 2px solid var(--fndp-emergency); border-radius: 14px; background: #fff4f8; }

/* ── My FND Profile ──────────────────────────────────────── */
.fndp-profilegrid { display: grid; gap: 1rem; }
.fndp-profrow h2 { font-size: 1.05rem; }
.fndp-usedby { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.fndp-usedby li { display: grid; gap: 0.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid #edf1f6; }
.fndp-usedby span { color: var(--fnd-text-muted, #56677d); font-size: 0.9rem; }
.fndp-review { border-color: #c6d7ea; background: #f5f9fd; }
.fndp-empty { text-align: center; }

/* ── Larger screens ──────────────────────────────────────── */
@media (min-width: 640px) {
  .fndp-section { padding-block: 2.5rem 4rem; }
  .fndp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fndp-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: end; }
  .fndp-sticky-actions { margin-inline: 0; border-radius: 16px 16px 0 0; }
  .fndp-view__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fndp-view__contacts li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fndp-view__contacts .fnd-action { width: auto; }
  .fndp-view__inner { padding: 1.5rem 1.75rem 2rem; }
}

@media (min-width: 900px) {
  .fndp-hero { padding-block: 3.5rem 4rem; }
  .fndp-hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .fndp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fndp-pagehead { grid-template-columns: minmax(0, 1fr) auto; }
  .fndp-homegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fndp-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fndp-profilegrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .fndp-switch__track, .fndp-switch__track::after, .fndp-check, .fndp-chip, .fndp-radio-card {
    transition: background-color var(--fnd-duration-fast, 140ms) ease, border-color var(--fnd-duration-fast, 140ms) ease, transform var(--fnd-duration-standard, 220ms) ease;
  }
}

@media print {
  .fndp-previewbar, .fndp-public-bar, .fndp-public-foot, .fndp-call999 { display: none !important; }
  .fndp-view { box-shadow: none; margin: 0; width: 100%; }
}

/* ── My account: "My FND" panel ──────────────────────────── */
.fndp-tools { margin: 0 0 1.5rem; padding: 1.15rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: var(--fnd-surface-radius, 16px); background: #fff; box-shadow: var(--fnd-shadow-soft, 0 10px 28px rgba(0, 43, 95, 0.07)); }
.fndp-tools__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.fndp-tools__head h2 { margin: 0; color: var(--fnd-structure, #002b5f); }
.fndp-tools__head a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.fndp-tools__next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 0.9rem 1rem; border: 1px solid #f3c3d8; border-radius: 14px; background: var(--fnd-surface-brand, #fff4f8); color: var(--fnd-text-body, #26364d); text-decoration: none; }
.fndp-tools__next > span:first-child { display: grid; gap: 0.1rem; }
.fndp-tools__next strong { color: var(--fnd-text-strong, #061b3d); }
.fndp-tools__next > span:last-child { font-size: 1.6rem; color: var(--fnd-action, #c9005a); }
.fndp-tools__kicker { color: var(--fnd-action, #c9005a); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.fndp-tools__grid { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.fndp-tools__card { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; border: 1px solid var(--fnd-line, #d8e1ec); border-radius: 14px; }
.fndp-tools__card h3 { margin: 0; font-size: 1.05rem; color: var(--fnd-text-strong, #061b3d); }
.fndp-tools__card p { margin: 0; font-size: 0.95rem; }
.fndp-tools__card .fnd-action { justify-self: start; min-height: 44px; padding: 0.45rem 1.1rem; }
.fndp-left { text-align: left; }
.fndp-trust li { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }

/* ═════ Passport book (public view, preview) ═════════════════════════
   Looks and reads like a passport: cover, identity data page with photo,
   numbered pages. Emergency facts stay on the first page. */
.fndp-wrap--book { width: min(100% - 1.25rem, 34rem); margin: 0.75rem auto 0; }
.fndp-book {
  --book-cover: #0b2348;
  --book-cover-2: #12326a;
  --book-gold: #e3c46e;
  --book-ribbon: var(--fnd-action, #c9005a);
  --book-paper: #fbfaf5;
  --book-ink: #13213a;
  counter-reset: fndp-page;
  width: min(100% - 1.25rem, 34rem);
  margin: 1rem auto 2.5rem;
  display: grid;
  gap: 0.9rem;
}
.fndp-book--hospital { --book-ribbon: #1d6fb8; }
.fndp-book--carer { --book-ribbon: #7a4fbf; }
.fndp-book--work { --book-ribbon: #c76a00; }
.fndp-book--education { --book-ribbon: #1f7a5a; }
.fndp-book--travel { --book-ribbon: #0f7c9a; }

.fndp-cover {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.25rem 1.25rem 1.6rem;
  border-radius: 14px 18px 18px 14px;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(160deg, var(--book-cover-2), var(--book-cover));
  color: var(--book-gold);
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.28), 0 14px 30px rgba(6, 20, 45, 0.28);
  overflow: hidden;
}
.fndp-cover::after { content: ""; position: absolute; top: 0; right: 1.4rem; width: 0.7rem; height: 100%; background: var(--book-ribbon); opacity: 0.95; }
.fndp-cover__emblem { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; }
.fndp-cover__text { display: grid; gap: 0.15rem; padding-right: 1.6rem; }
.fndp-cover__title { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.1; }
.fndp-cover__mode { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #fff; }
.fndp-cover__tag { margin: 0.2rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.01em; }

.fndp-page {
  counter-increment: fndp-page;
  position: relative;
  padding: 1.15rem 1.15rem 2rem;
  border: 1px solid #e3dfd0;
  border-radius: 8px 14px 14px 8px;
  background:
    repeating-linear-gradient(115deg, rgba(0, 43, 95, 0.025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(65deg, rgba(201, 0, 90, 0.02) 0 1px, transparent 1px 11px),
    var(--book-paper);
  color: var(--book-ink);
  box-shadow: inset 5px 0 8px -6px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(6, 20, 45, 0.1);
}
.fndp-page::after { content: counter(fndp-page); position: absolute; right: 1rem; bottom: 0.6rem; color: #8b8670; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fndp-page--back::after { content: none; }
.fndp-page h3 { margin: 0.9rem 0 0.3rem; font-size: 1rem; color: var(--fnd-text-strong, #061b3d); }
.fndp-page p { margin: 0 0 0.5rem; }
.fndp-page__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #cfc8ad;
  color: var(--fnd-structure, #002b5f);
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}
.fndp-page__title::before { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--book-ribbon); }
.fndp-page__list { margin: 0 0 0.85rem; padding-left: 1.15rem; display: grid; gap: 0.35rem; }

/* Identity data page */
.fndp-datapage {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 43, 95, 0.06) 0 22%, transparent 23%),
    repeating-radial-gradient(circle at 15% 110%, rgba(0, 43, 95, 0.045) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 110% 30%, rgba(201, 0, 90, 0.035) 0 1px, transparent 1px 9px),
    var(--book-paper);
  padding-bottom: 1.15rem;
}
.fndp-datapage::after { content: none; }
.fndp-datapage__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.85rem; color: #5b6170; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fndp-datapage__head strong { color: var(--book-ink); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.fndp-datapage__grid { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.fndp-datapage__photo { width: 6.25rem; aspect-ratio: 4 / 5; padding: 0.25rem; border: 1px solid #cfd6e1; border-radius: 4px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.fndp-datapage__photo img, .fndp-datapage__photo svg { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.fndp-datapage__fields { display: grid; gap: 0.5rem; margin: 0; }
.fndp-datapage__fields div { display: grid; gap: 0; }
.fndp-datapage__fields dt { color: #6a7080; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fndp-datapage__fields dd { margin: 0; color: var(--book-ink); font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.fndp-datapage__name { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.fndp-datapage__dx { margin: 0.9rem 0 0.25rem; padding: 0.55rem 0.75rem; border-left: 4px solid var(--book-ribbon); background: rgba(255, 255, 255, 0.7); color: var(--fnd-structure, #002b5f); font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.fndp-quickfacts { display: grid; gap: 0.45rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.fndp-quickfacts li { display: grid; gap: 0.05rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(255, 255, 255, 0.82); border: 1px solid #e6e1cf; }
.fndp-quickfacts span { color: #6a7080; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fndp-quickfacts strong { color: var(--book-ink); }
.fndp-quickfacts a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--fnd-structure, #002b5f); }
.fndp-quickfacts__allergy { border-color: #f0d08a !important; background: #fff8e6 !important; }
.fndp-datapage__intro { margin: 0.85rem 0 0; padding: 0.7rem 0.85rem; border-radius: 8px; background: rgba(0, 43, 95, 0.05); color: var(--book-ink); font-size: 1.02rem; font-style: italic; }
.fndp-mrz { display: grid; gap: 0.1rem; margin-top: 1rem; padding: 0.55rem 0.6rem; border-radius: 4px; background: rgba(255, 255, 255, 0.85); border-top: 1px solid #ddd6bd; font-family: "OCR B", "OCR-B", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(0.58rem, 2.35vw, 0.8rem); letter-spacing: 0.06em; color: #3a3f4c; overflow: hidden; white-space: nowrap; }

.fndp-page--important { border: 2px solid var(--fnd-action, #c9005a); background: #fff6fa; }
.fndp-stamp { display: inline-block; padding: 0.15rem 0.6rem; border: 2px solid var(--fnd-action, #c9005a); border-radius: 6px; color: var(--fnd-action, #c9005a); font-size: 0.9rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-2deg); }
.fndp-page--important .fndp-page__title { border-bottom: 0; }
.fndp-page--important .fndp-page__title::before { content: none; }
.fndp-episode-card { padding: 0.75rem 0.85rem; border-radius: 10px; background: rgba(255, 255, 255, 0.85); border: 1px solid #e6e1cf; }
.fndp-episode-card + .fndp-episode-card { margin-top: 0.6rem; }
.fndp-episode-card h3 { margin-top: 0; }
.fndp-do-h { color: var(--fnd-success, #087455) !important; }
.fndp-dont-h { color: var(--fnd-danger, #a30d2d) !important; }
.fndp-page--back { padding-bottom: 1.15rem; background: #f1efe6; color: #5b6170; font-size: 0.88rem; text-align: center; }
.fndp-page .fndp-view__contacts li { background: rgba(255, 255, 255, 0.85); }

@media (min-width: 640px) {
  .fndp-page { padding: 1.4rem 1.6rem 2.2rem; }
  .fndp-datapage { padding-bottom: 1.4rem; }
  .fndp-datapage__grid { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; }
  .fndp-datapage__photo { width: 7.5rem; }
  .fndp-quickfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .fndp-book { width: 100%; margin: 0; gap: 0; }
  .fndp-cover, .fndp-page { box-shadow: none; break-inside: avoid; }
}

/* Mode extras + per-mode sharing tabs */
.fndp-modetabs { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: 0.25rem; }
.fndp-modetabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.3rem 0.85rem; border: 1.5px solid var(--fnd-line, #d8e1ec); border-radius: 999px; background: #fff; color: var(--fnd-structure, #002b5f); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fndp-modetabs a[aria-current="page"] { border-color: var(--fnd-structure, #002b5f); background: var(--fnd-structure, #002b5f); color: #fff; }
.fndp-modetabs .fndp-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fnd-success, #087455); }
.fndp-mode__icon--carer { background: #efe7fb; color: #5b3596; }
.fndp-mode__icon--work { background: #fff1df; color: #8a4a00; }
.fndp-mode__icon--education { background: #e2f3ec; color: #155d44; }
.fndp-mode__icon--travel { background: #e0f2f7; color: #0b5d73; }
.fndp-mode__extra { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; font-weight: 700; color: var(--fnd-action, #c9005a); }