/* ============================================================================
 * Trulioo Portal Kit - components
 * ----------------------------------------------------------------------------
 * Component classes (prefix `tp-`) that reproduce the Trulioo Portal
 * (labs.trulioo.com) UI 1:1, built on portal-tokens.css. Every value here was
 * measured from the live authenticated app. Light + dark come free via the
 * token layer. Consume from React/Vue/plain HTML - these are framework-agnostic.
 * ============================================================================ */

/* ---- base / reset the kit relies on ---- */
.tp-root {
  font-family: var(--tp-font-sans);
  color: var(--tp-text-default);
  background: var(--tp-surface-background);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  -webkit-font-smoothing: antialiased;
}
.tp-root *,
.tp-root *::before,
.tp-root *::after { box-sizing: border-box; }

/* ============================ TYPOGRAPHY ============================ */
/* Editorial hero - Tobias serif, roman with italic emphasis words. Use <em> for
 * the italic run (as the app does: "combating <em>fraud</em> and <em>financial crime</em>"). */
.tp-hero {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-text-hero);   /* 42px - /home editorial hero */
  font-weight: 400;
  line-height: 1.24;                /* 52/42 measured */
  letter-spacing: -0.03em;          /* -1.26px @ 42px measured */
  color: var(--tp-text-default);
  margin: 0;
}
/* Larger map-hero variant (/selfserve): 62px. */
.tp-hero--lg { font-size: var(--tp-text-hero-lg); letter-spacing: -0.02em; }
.tp-hero em { font-style: italic; font-weight: 400; }

.tp-h1 { font-family: var(--tp-font-serif); font-size: var(--tp-text-3xl); font-weight: 400; line-height: var(--tp-leading-tight); color: var(--tp-text-default); margin: 0; }
.tp-h2 { font-family: var(--tp-font-display); font-size: var(--tp-text-2xl); font-weight: 400; line-height: var(--tp-leading-snug); color: var(--tp-text-warm); margin: 0; }
.tp-h3 { font-family: var(--tp-font-display); font-size: var(--tp-text-lg); font-weight: 600; line-height: var(--tp-leading-snug); color: var(--tp-text-warm); margin: 0; }
.tp-body { font-family: var(--tp-font-sans); font-size: var(--tp-text-base); color: var(--tp-text-default); }
.tp-subdued { color: var(--tp-text-subdued); }
.tp-muted { color: var(--tp-text-placeholder); font-size: var(--tp-text-sm); }

/* The "Trulioo" wordmark set in Tobias (the app uses an SVG logo; this reproduces
 * it as live text when the asset isn't available). */
.tp-wordmark {
  font-family: var(--tp-font-serif);
  font-size: var(--tp-text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tp-text-default);
}

/* ============================ BUTTONS ============================ */
/* ALL buttons are pills (border-radius 100px), Founders Grotesk. */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-2);
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-base); font-weight: 400; line-height: 1;
  letter-spacing: 0.02em;              /* live Founders Grotesk UI type ~0.32px */
  border-radius: var(--tp-radius-pill);
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--tp-transition), border-color var(--tp-transition), color var(--tp-transition), opacity var(--tp-transition);
  text-decoration: none; white-space: nowrap; user-select: none;
}
/* Disabled: a light neutral fill with a darker muted label so it clearly reads as
 * "disabled on purpose" (>=3:1), not a rendering glitch. Uses tokens so it inverts
 * correctly in dark. */
.tp-btn:disabled, .tp-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--tp-surface-2); border-color: transparent; color: var(--tp-text-placeholder); opacity: 1; }

/* Primary - solid dark-green pill, white text (the app's "Get Started"/"Log in"). */
.tp-btn--primary { background: var(--tp-action-primary); color: var(--tp-action-primary-text); border-color: var(--tp-action-primary); }
.tp-btn--primary:hover:not(:disabled) { background: var(--tp-action-primary-hover); border-color: var(--tp-action-primary-hover); }

/* Outline - white/transparent fill, dark border (the app's "Share Feedback"/"Book demo"). */
.tp-btn--outline { background: var(--tp-surface-0); color: var(--tp-text-warm); border-color: var(--tp-action-primary); padding: 8px 16px; min-height: 40px; }
.tp-btn--outline:hover:not(:disabled) { background: var(--tp-action-outline-hover-bg); }

/* Interactive/text - teal, no fill (links styled as buttons). */
.tp-btn--text { background: transparent; color: var(--tp-action-interactive); border-color: transparent; padding-left: 0; padding-right: 0; }
.tp-btn--text:hover:not(:disabled) { color: var(--tp-action-interactive-hover); }

/* Ghost / "Ask AI" - white fill, muted grey border, no hover-color shift (matches app). */
.tp-btn--ghost { background: var(--tp-surface-0); color: var(--tp-action-primary); border-color: #AEBAB8; }
.tp-btn--ghost:hover:not(:disabled) { background: var(--tp-surface-1); }

/* Pressed / active: a subtle settle on every button (the app's tactile feel). */
.tp-btn:active:not(:disabled) { transform: scale(0.98); }
/* Keyboard focus: a visible ring for a11y (pointer focus stays clean via focus-visible). */
.tp-btn:focus-visible { outline: 2px solid var(--tp-action-interactive); outline-offset: 2px; }

/* Sizes - padding measured from the live CTAs (min-height carries the height, so
 * vertical padding stays tight: the live "Get Started" is 8px 16px @ 48px tall). */
.tp-btn--lg { font-size: var(--tp-text-lg); padding: 8px 16px; min-height: 48px; }
.tp-btn--sm { font-size: var(--tp-text-sm); padding: 6px 14px; }
.tp-btn--block { display: flex; width: 100%; }

/* ============================ LINKS ============================ */
.tp-link { color: var(--tp-text-link); font-weight: 500; text-decoration: none; }
.tp-link:hover { color: var(--tp-action-interactive-hover); text-decoration: underline; }

/* ============================ INPUTS ============================ */
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-label { font-family: var(--tp-font-sans); font-size: var(--tp-text-sm); font-weight: 400; color: var(--tp-text-default); }
.tp-hint { font-size: var(--tp-text-xs); color: var(--tp-text-placeholder); }

/* Inputs render in Founders Grotesk 18px, text #24302F, min-height 48px (measured).
 * Default matches the reachable /home search field: 8px radius, border #96A3A1.
 * `.tp-input--form` switches to the KYB-form variant: 12px radius, border #808080. */
.tp-input, .tp-select {
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-lg);            /* 18px - measured */
  letter-spacing: 0.02em;                  /* live UI type ~0.32px */
  color: var(--tp-text-warm);              /* #24302F */
  background: var(--tp-surface-0);
  border: 1px solid #96A3A1;               /* measured on the live search input */
  border-radius: var(--tp-radius-input-sm);/* 8px - measured */
  padding: 12px 16px;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--tp-transition), box-shadow var(--tp-transition);
}
.tp-input--form { border-color: var(--tp-border-default); border-radius: var(--tp-radius-input); } /* KYB form: #808080, 12px */
.tp-input::placeholder { color: var(--tp-text-placeholder); }
/* Dark: lift the input fill above the card so the field reads as an inset target
 * (surface-0 == card bg on dark, so they'd otherwise dissolve into each other). */
[data-theme="dark"] .tp-input, [data-theme="dark"] .tp-select,
.theme-dark .tp-input, .theme-dark .tp-select { background: var(--tp-surface-2); }
/* Focus: brand-green ring (NOT the cyan interactive token, which clashes with the
 * sage/forest palette). Faint green wash for the accessible ring. */
.tp-input:focus, .tp-select:focus {
  outline: none;
  border-color: var(--tp-action-primary);
  box-shadow: 0 0 0 3px var(--tp-focus-ring-brand);
}
.tp-input--no-ring:focus { border-color: var(--tp-border-default); box-shadow: none; }
.tp-input:disabled { background: var(--tp-surface-1); color: var(--tp-text-disabled); cursor: not-allowed; }
.tp-input:read-only { background: var(--tp-surface-1); }

/* Select with trailing affordances (flag + clear + chevron), as the Country picker. */
.tp-select-wrap { position: relative; }
.tp-select-wrap .tp-select { padding-right: 64px; appearance: none; }
.tp-select-affordances { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; color: var(--tp-text-subdued); }

/* ============================ CHIPS / TAGS ============================ */
.tp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tp-font-display);
  font-size: var(--tp-text-sm); font-weight: 500;
  letter-spacing: 0.02em;                  /* live UI type ~0.32px */
  color: var(--tp-text-warm);
  background: var(--tp-wash-green);
  border-radius: var(--tp-radius-chip);
  padding: 4px 12px;
}

/* ============================ SEGMENTED TOGGLE (KYB / KYC) ============================ */
.tp-segmented {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;   /* hug content even inside a stretch flex column */
  width: fit-content;
  background: var(--tp-surface-0);
  border: 1px solid var(--tp-border-subdued);
  border-radius: var(--tp-radius-toggle);
  padding: 4px;
}
.tp-segmented__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tp-font-display); font-size: var(--tp-text-lg); font-weight: 400;
  color: var(--tp-text-default);
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--tp-radius-toggle);
  padding: 6px 12px;
  transition: background-color var(--tp-transition);
}
/* Full-pill variant - the /selfserve map-hero segmented (container radius 50px,
 * border #AEBAB8, 8px padding, active pills fully round). The default 28px matches
 * the /home segmented. */
.tp-segmented--pill { border-radius: var(--tp-radius-pill); border-color: #AEBAB8; padding: 8px; }
.tp-segmented--pill .tp-segmented__item { border-radius: var(--tp-radius-pill); }
.tp-segmented__item[aria-selected="true"], .tp-segmented__item.is-active {
  background: var(--tp-segmented-active); /* #A7EDC0 - the exact measured active mint */
  color: var(--tp-on-mint);               /* mint fill is light in BOTH themes -> dark text */
}
.tp-segmented__item[aria-selected="true"] [data-tp-icon] svg,
.tp-segmented__item.is-active [data-tp-icon] svg { color: var(--tp-on-mint); }

/* ============================ CARD ============================ */
/* White content card: border-only by default (border #C8D1D0, radius 24px). The
 * live UBO/KYC content cards carry NO drop shadow - elevation is a deliberate,
 * opt-in signal (--elevated), not the baseline. */
.tp-card {
  background: var(--tp-surface-0);
  border: 1px solid var(--tp-card-border);
  border-radius: var(--tp-radius-card);
  padding: var(--tp-space-8);                /* 32px - the KYC/content card */
}
.tp-card--pad-lg { padding: 48px; }          /* the UBO hero card (more generous) */
.tp-card--elevated { box-shadow: 0 28px 60px rgba(36, 48, 47, 0.12); } /* opt-in lift */

/* Framed panel: a soft mint gradient with a dot-grid overlay that hosts a white card
 * (the right column of the app home). */
.tp-panel-frame {
  background-image:
    radial-gradient(var(--tp-border-subdued) 1px, transparent 1px),
    var(--tp-gradient-teal-panel);
  background-size: 16px 16px, cover;
  border-radius: var(--tp-radius-card);
  padding: var(--tp-space-8);
}

/* ============================ ACCORDION ============================ */
.tp-accordion { border-top: 1px solid var(--tp-border-subdued); }
.tp-accordion__row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  font-family: var(--tp-font-display); font-size: var(--tp-text-xl); font-weight: 400;
  color: var(--tp-text-default);
  background: transparent; border: none; border-bottom: 1px solid var(--tp-border-subdued);
  padding: var(--tp-space-4) 0; cursor: pointer;
}
.tp-accordion__icon { color: var(--tp-text-subdued); font-size: 22px; line-height: 1; transition: transform var(--tp-transition); }
.tp-accordion__row[aria-expanded="true"] .tp-accordion__icon { transform: rotate(45deg); }
.tp-accordion__body { padding: 0 0 var(--tp-space-4); color: var(--tp-text-subdued); font-family: var(--tp-font-sans); font-size: var(--tp-text-base); }

/* ============================ BADGES / STATUS ============================ */
.tp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tp-font-display); font-size: var(--tp-text-xs); font-weight: 600;
  padding: 4px 10px; border-radius: var(--tp-radius-pill);
}
.tp-badge--neutral { background: var(--tp-surface-2); color: var(--tp-text-subdued); }
.tp-badge--success { background: var(--tp-success-bg); color: var(--tp-success); }
.tp-badge--warning { background: var(--tp-warning-bg); color: var(--tp-warning); }
.tp-badge--danger  { background: var(--tp-danger-bg);  color: var(--tp-danger); }
.tp-badge--info    { background: var(--tp-info-bg);    color: var(--tp-info); }

/* ============================ APP SHELL / NAV ============================ */
/* Rail is 72px (measured). Content column fills the rest. Page bg is the warm
 * off-white #F7F7F7 (measured on the live body). The app is EXACTLY the viewport
 * height; the rail is fixed and only the content column scrolls (so the rail +
 * bottom profile stay put and always fully visible). */
.tp-app { display: grid; grid-template-columns: 72px 1fr; height: 100vh; background: var(--tp-surface-page); overflow: hidden; }

/* Left icon+label nav rail: WHITE surface, full viewport height, its OWN scroll so
 * the bottom profile is always reachable even with many nav items. */
.tp-rail { display: flex; flex-direction: column; align-items: center; gap: var(--tp-space-5); padding: var(--tp-space-4) 0; background: var(--tp-nav-default); height: 100vh; overflow-y: auto; overflow-x: hidden; }
.tp-rail__logo { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: var(--tp-space-2); }
.tp-rail__item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--tp-text-default); text-decoration: none; font-family: var(--tp-font-display); font-size: var(--tp-text-sm); }
.tp-rail__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--tp-radius-lg); transition: background-color var(--tp-transition); }
.tp-rail__item:hover:not(.is-active) .tp-rail__icon { background: var(--tp-surface-2); }
.tp-rail__item.is-active .tp-rail__icon { background: var(--tp-nav-container); color: var(--tp-accent-wash-fg); }
.tp-rail__item.is-active { color: var(--tp-text-default); font-weight: 500; }
.tp-rail__spacer { flex: 1; }

/* Top bar: wordmark + Labs pill on the left, actions on the right. */
/* Topbar is transparent (shows the page bg) - live topbar has no fill of its own. */
.tp-topbar { display: flex; align-items: center; gap: var(--tp-space-3); height: 72px; padding: 0 var(--tp-space-8); background: transparent; }
.tp-topbar__spacer { flex: 1; }
.tp-pill-label {
  display: inline-flex; align-items: center; font-family: var(--tp-font-sans); font-size: var(--tp-text-sm);
  color: var(--tp-text-default); border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-pill); padding: 2px 12px;
}

/* Inverse (dark-green) nav variant - the token system's surface_navigation_inverse. */
.tp-nav--inverse { background: var(--tp-nav-inverse); color: var(--tp-text-inverse); }
.tp-nav--inverse .tp-rail__item { color: var(--tp-text-inverse-subdued); }
.tp-nav--inverse .tp-rail__item.is-active { color: var(--tp-text-inverse); }
.tp-nav--inverse .tp-rail__item.is-active .tp-rail__icon { background: rgba(255,255,255,0.12); color: var(--tp-text-inverse); }

.tp-content { padding: var(--tp-space-8); }

/* ============================ FEATURE BLOCK ============================ */
.tp-feature { display: flex; flex-direction: column; gap: var(--tp-space-2); }
.tp-feature__title { display: flex; align-items: center; gap: var(--tp-space-2); font-family: var(--tp-font-display); font-size: var(--tp-text-lg); font-weight: 600; color: var(--tp-text-warm); }
.tp-feature__chips { display: flex; gap: var(--tp-space-2); flex-wrap: wrap; margin-top: var(--tp-space-2); }

/* ============================ MAP HERO BACKGROUND (reusable core surface) ============================ */
/* The selfserve/home "world-map" hero, reproduced 1:1 from the live app. The live
 * recipe (measured verbatim off labs.trulioo.com/selfserve/home):
 *   background-image:    url(map.svg), linear-gradient(#EBF1F0 30.54%, #FFF 47.6%)
 *   background-size:     contain, cover
 *   background-position: 50% 120px, 50% 0%
 *   background-repeat:   no-repeat, no-repeat
 * The map SVG is the real dotted world map (assets/trulioo-map.svg, #E3ECEC dots).
 * Fully resizable/reusable: drop this class on any block. In dark theme the gradient
 * token flips to a near-black wash (see tokens) so hero text stays legible; set
 * --tp-map-opacity to dim the map if needed. */
.tp-map-hero {
  position: relative;
  background-image:
    var(--tp-map-image, url("../assets/trulioo-map.svg")),
    var(--tp-gradient-map);
  background-size: contain, cover;
  background-position: 50% 120px, 50% 0%;
  background-repeat: no-repeat, no-repeat;
  /* 100vh (not 100%) so the hero never depends on ancestor height resolving on
   * first paint - avoids the "background doesn't fill until resize" flash. */
  min-height: 100vh;
}
/* Dark theme: the light map SVG would blow out on a dark wash, so the base layer drops
 * to gradient-only and a dimmed, screen-blended map is drawn behind (faint texture). */
[data-theme="dark"] .tp-map-hero, .theme-dark .tp-map-hero {
  background-image: var(--tp-gradient-map);
  background-size: cover; background-position: 50% 0%;
}
[data-theme="dark"] .tp-map-hero::before, .theme-dark .tp-map-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tp-map-image, url("../assets/trulioo-map.svg"));
  background-size: contain; background-position: 50% 120px; background-repeat: no-repeat;
  opacity: 0.14; mix-blend-mode: screen;
}
.tp-map-hero > * { position: relative; z-index: 1; }
/* Full-bleed variant: the map COVERS the surface (fills edge-to-edge with no white
 * void) - for full-screen surfaces like login/onboard. The default `contain` recipe
 * suits the tall scrolling content hero; this suits a viewport-height backdrop. */
.tp-map-hero--fill { background-size: cover, cover; background-position: center, 50% 0%; }
[data-theme="dark"] .tp-map-hero--fill, .theme-dark .tp-map-hero--fill { background-size: cover; background-position: center; }
[data-theme="dark"] .tp-map-hero--fill::before, .theme-dark .tp-map-hero--fill::before { background-size: cover; background-position: center; }

/* ============================ AI SEARCH BOX ============================ */
.tp-aisearch {
  background: var(--tp-surface-0);
  border: 1.5px solid var(--tp-light-green-100, #A4DCB4);
  border-radius: var(--tp-radius-card);
  padding: var(--tp-space-5) var(--tp-space-6);
  box-shadow: 0 8px 32px rgba(0, 76, 69, 0.06);
}
.tp-aisearch__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tp-space-3); font-family: var(--tp-font-display); font-size: var(--tp-text-sm); color: var(--tp-text-subdued); }
.tp-aisearch__field { display: flex; align-items: flex-start; gap: var(--tp-space-3); }
.tp-aisearch__pill { display: inline-flex; align-items: center; gap: 6px; background: var(--tp-surface-2); border-radius: var(--tp-radius-pill); padding: 6px 12px; font-family: var(--tp-font-display); font-size: var(--tp-text-sm); color: var(--tp-text-warm); white-space: nowrap; }
.tp-aisearch__input { flex: 1; border: none; background: transparent; font-family: var(--tp-font-display); font-size: var(--tp-text-lg); color: var(--tp-text-warm); outline: none; }
.tp-aisearch__input::placeholder { color: var(--tp-text-placeholder); }
.tp-aisearch__actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--tp-space-4); }
/* Fixed neutral grey fill (not --tp-text-subdued, which inverts to light-grey in
 * dark and strands the white arrow). Matches the live selfserve send button. */
.tp-aisearch__send { width: 44px; height: 44px; border-radius: 50%; background: #808080; color: #fff; border: none; display: grid; place-items: center; cursor: pointer; transition: background-color var(--tp-transition); }
.tp-aisearch__send:hover { background: var(--tp-action-primary); }
[data-theme="dark"] .tp-aisearch__send, .theme-dark .tp-aisearch__send { background: var(--tp-surface-3); }

/* ============================ SELECTABLE CARD (verification path) ============================ */
.tp-select-card {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3);
  background: var(--tp-surface-0);
  border: 1.5px solid var(--tp-border-subdued);
  border-radius: var(--tp-radius-card);
  padding: var(--tp-space-4) var(--tp-space-5);
  cursor: pointer;
  transition: border-color var(--tp-transition), background-color var(--tp-transition);
}
.tp-select-card__label { display: flex; align-items: center; gap: var(--tp-space-2); font-family: var(--tp-font-display); font-size: var(--tp-text-lg); font-weight: 500; color: var(--tp-text-warm); }
.tp-select-card__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tp-border-default); flex: none; display: grid; place-items: center; }
.tp-select-card:hover:not([aria-checked="true"]) { border-color: var(--tp-select-card-selected-border); }
.tp-select-card:focus-visible { outline: 2px solid var(--tp-action-interactive); outline-offset: 2px; }
.tp-select-card[aria-checked="true"], .tp-select-card.is-selected {
  background: var(--tp-select-card-selected-bg);
  border-color: var(--tp-select-card-selected-border);
}
.tp-select-card[aria-checked="true"] .tp-select-card__radio { border-color: var(--tp-accent-wash-fg); }
.tp-select-card[aria-checked="true"] .tp-select-card__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tp-accent-wash-fg); }
/* "Trulioo Recommended" tag pinned to the top-left of a selected card. */
.tp-recommend-tag { position: absolute; top: -12px; left: 16px; background: var(--tp-recommend-tag-bg); color: var(--tp-recommend-tag-text); font-family: var(--tp-font-display); font-size: var(--tp-text-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--tp-radius-pill); }

/* ============================ STAT TILE ============================ */
.tp-stat { background: var(--tp-surface-1); border-radius: var(--tp-radius-tile); padding: var(--tp-space-4); }
.tp-stat__label { display: flex; align-items: center; gap: 6px; font-family: var(--tp-font-display); font-size: var(--tp-text-sm); color: var(--tp-text-subdued); margin-bottom: var(--tp-space-2); }
.tp-stat__value { font-family: var(--tp-font-serif); font-size: var(--tp-text-2xl); font-weight: 400; color: var(--tp-text-default); line-height: 1; }
.tp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tp-space-3); }

/* ============================ TOGGLE SWITCH ============================ */
.tp-switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; }
.tp-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tp-switch__track { width: 44px; height: 24px; border-radius: var(--tp-radius-pill); background: var(--tp-surface-3); transition: background-color var(--tp-transition); }
.tp-switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--tp-transition); box-shadow: var(--tp-shadow-sm); }
.tp-switch input:checked + .tp-switch__track { background: var(--tp-action-primary); }
.tp-switch input:checked ~ .tp-switch__thumb { transform: translateX(20px); }

/* ============================ SIGNAL CHIPS (mint) ============================ */
.tp-chip--signal { background: var(--tp-light-green-20); color: var(--tp-mid-green); }
/* Dark: darken the mint wash + lift the foreground so it doesn't float as a bright
 * mint block on the dark surface (mirrors the base .tp-chip dark behavior). */
[data-theme="dark"] .tp-chip--signal, .theme-dark .tp-chip--signal { background: var(--tp-nav-container); color: var(--tp-accent-wash-fg); }

/* ============================ BREADCRUMB + PAGE HEADER ============================ */
.tp-breadcrumb { display: flex; align-items: center; gap: var(--tp-space-2); font-family: var(--tp-font-sans); font-size: var(--tp-text-sm); color: var(--tp-text-subdued); }
.tp-breadcrumb a { color: var(--tp-text-subdued); text-decoration: none; }
.tp-breadcrumb a:hover { color: var(--tp-text-default); }
.tp-page-back { display: inline-flex; align-items: center; gap: var(--tp-space-2); font-family: var(--tp-font-display); font-size: var(--tp-text-lg); font-weight: 500; color: var(--tp-text-default); background: none; border: none; cursor: pointer; }

/* ============================ MOTION ============================ */
/* The portal's interactive states use 0.15s ease-in-out (already on every component
 * above). These are the app's ambient keyframes for loading/entrance, reproduced. */
@keyframes tp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.tp-enter { animation: tp-fade-in 0.35s ease-out both; }
.tp-spin { animation: tp-spin 0.7s linear infinite; }
.tp-skeleton { background: linear-gradient(90deg, var(--tp-surface-1) 25%, var(--tp-surface-2) 37%, var(--tp-surface-1) 63%); background-size: 800px 100%; animation: tp-shimmer 1.5s linear infinite; border-radius: var(--tp-radius); }
@media (prefers-reduced-motion: reduce) { .tp-enter, .tp-spin, .tp-skeleton { animation: none; } }

/* ============================ DROPDOWN MENU (country select, open state) ============================ */
.tp-dropdown { position: relative; }
/* The trigger reuses .tp-input .tp-select .tp-select-wrap shape. */
.tp-dropdown__menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--tp-surface-0);
  border: 1px solid var(--tp-border-subdued);
  border-radius: var(--tp-radius-input);
  box-shadow: var(--tp-shadow);
  padding: 6px; max-height: 280px; overflow-y: auto;
  animation: tp-fade-in 0.12s ease-out both;
}
.tp-dropdown__menu[hidden] { display: none; }
.tp-dropdown__option {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: var(--tp-font-display); font-size: var(--tp-text-base); color: var(--tp-text-default);
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--tp-radius-sm); padding: 10px 12px;
  transition: background-color var(--tp-transition);
}
.tp-dropdown__option:hover, .tp-dropdown__option:focus-visible { background: var(--tp-action-outline-hover-bg); outline: none; }
.tp-dropdown__option[aria-selected="true"] { background: var(--tp-light-green-20); color: var(--tp-mid-green); font-weight: 500; }
.tp-dropdown__option[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--tp-mid-green); }

/* Radio-card list (KYB form: "Trulioo Business Report" options) - selectable list rows. */
.tp-radio-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--tp-surface-0); border: 1px solid var(--tp-border-subdued);
  border-radius: var(--tp-radius-input); padding: 14px 16px; cursor: pointer;
  font-family: var(--tp-font-display); color: var(--tp-text-default);
  transition: border-color var(--tp-transition), background-color var(--tp-transition);
}
.tp-radio-card:hover:not([aria-checked="true"]) { border-color: var(--tp-select-card-selected-border); }
.tp-radio-card[aria-checked="true"] { border-color: var(--tp-select-card-selected-border); background: var(--tp-select-card-selected-bg); }
.tp-radio-card__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tp-border-default); flex: none; display: grid; place-items: center; }
.tp-radio-card[aria-checked="true"] .tp-radio-card__dot { border-color: var(--tp-accent-wash-fg); }
.tp-radio-card[aria-checked="true"] .tp-radio-card__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tp-accent-wash-fg); }