/*
 * Specialist Snapshot Clinical Editorial Design System
 *
 * This file is intentionally loaded after the implementation stylesheets. It is
 * the public contract for future UI work: semantic tokens first, then a small
 * set of role mappings. Component geometry remains with the component that owns it.
 */

:root {
  /* Lexend is the sole live proportional face. Newsreader remains available
   * only to brand identity; Atkinson Mono is reserved for technical strings. */
  --font-ui:"Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-editorial:var(--font-ui);
  --font-data:var(--font-ui);
  --font-code:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Legacy aliases keep existing components on the same semantic contract. */
  --font-sans:var(--font-ui);
  --font-serif:var(--font-ui);
  --font-brand:"Newsreader Variable", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-mono:var(--font-code);

  /* Type scale. Compact exceptions must be documented next to the component. */
  --type-display:clamp(2.75rem,6vw,4.5rem);
  --type-page-title:clamp(2.15rem,4.5vw,3.5rem);
  --type-profile-title:clamp(1.8rem,3vw,2.3rem);
  --type-section-title:clamp(1.2rem,2vw,1.45rem);
  --type-card-title:1.0625rem;
  --type-body:1rem;
  --type-ui:.875rem;
  --type-meta:.8125rem;
  --type-caption:.75rem;

  /* Four interoperable static stops avoid browser synthesis and keep hierarchy
   * predictable across platforms. Body 400-500; UI 500-600; headings 600-700;
   * technical strings 400-600. No live text may render below 400 or above 700. */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-live-min:400;
  --weight-live-max:700;
  --weight-technical-max:600;

  --leading-display:1.02;
  --leading-title:1.12;
  --leading-body:1.55;
  --leading-ui:1.35;
  --leading-meta:1.4;
  --tracking-display:-.018em;
  --tracking-title:-.01em;
  --tracking-ui:0;

  /* Four-point spacing foundation. */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;

  /* One responsive page edge keeps narrow headers, controls, and content aligned. */
  --edge-gutter-narrow:clamp(1rem,4.2vw,1.25rem);

  /* Semantic surface and signal roles. */
  --color-text:var(--ink);
  --color-text-subtle:var(--ink-2);
  --color-text-muted:var(--muted);
  --color-border:var(--line);
  --color-border-subtle:var(--line-soft);
  --color-slate:var(--slate);
  --color-border-interactive:var(--border-interactive);
  --color-canvas:var(--canvas);
  --color-panel:var(--panel);
  --color-surface:var(--surface);
  --color-brand:var(--brand);
  --color-brand-strong:var(--brand-strong);
  --color-brand-soft:var(--brand-soft);
  --color-accent:var(--accent);
  --color-accent-soft:var(--accent-soft);
  --color-action:var(--action);
  --color-action-strong:var(--action-strong);
  --color-action-soft:var(--action-soft);
  --color-positive:var(--positive);
  --color-positive-strong:var(--positive-strong);
  --color-positive-soft:var(--positive-soft);
  --color-positive-medallion:var(--positive);
  --color-on-positive-medallion:var(--on-positive);
  --color-caution:var(--caution);
  --color-caution-strong:var(--caution-strong);
  --color-caution-soft:var(--caution-soft);
  --color-critical:var(--critical);
  --color-critical-strong:var(--critical-strong);
  --color-critical-soft:var(--critical-soft);
  --color-information:var(--information);
  --color-information-soft:var(--information-soft);
  --color-rating:var(--rating);

  /* Shape, motion, measure, and interaction contracts. */
  --radius-control:var(--r-sm);
  --radius-panel:var(--r-md);
  --radius-feature:var(--r-lg);
  --motion-fast:120ms;
  --motion-standard:180ms;
  --motion-slow:260ms;
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --measure-body:68ch;
  --target-comfortable:44px;
}

html {
  font-family:var(--font-ui);
  text-rendering:optimizeLegibility;
}

body {
  font-family:var(--font-ui);
  font-size:var(--type-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-body);
}

/* Browser-default `bolder` can resolve to 800 or 900 in a variable face.
 * Pin semantic emphasis to the supported maximum and let component roles
 * override it downward where appropriate. */
:is(strong,b) {
  font-weight:var(--weight-bold);
}

button,
select {
  font-family:var(--font-ui);
  font-weight:var(--weight-medium);
  line-height:var(--leading-ui);
}

input,
textarea {
  font-family:var(--font-ui);
  font-weight:var(--weight-regular);
  line-height:var(--leading-ui);
}

::placeholder { color:var(--color-text-muted); }

:is(.field-label,.snap-label,.contact-label,.referral-control-label) {
  font-size:var(--type-meta);
  font-weight:var(--weight-semibold);
  line-height:1.3;
}

:is(.activity-card-heading p,.activity-disclosure-copy small,.contribution-summary small) {
  font-size:var(--type-meta);
  line-height:var(--leading-meta);
}

/* Lexend carries both readable content and hierarchy; size and standard
 * 600-700 weights replace serif contrast outside brand identity. */
.explore-hero-copy h2 {
  font-family:var(--font-editorial);
  font-size:var(--type-display);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
}

.explore-hero-line {
  display:block;
  white-space:nowrap;
}

:is(.page-hero h2,.about-hero h2,.legal-main h1) {
  font-family:var(--font-editorial);
  font-size:var(--type-page-title);
  font-weight:var(--weight-medium);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-display);
}

:is(.profile-header h2,.profile-header h3) {
  font-family:var(--font-editorial);
  font-size:var(--type-profile-title);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
}

:is(
  .section-heading h2,
  .profile-section-head h3,
  .summary-section > h3,
  .activity-card-heading h3,
  .snapshot-form-head h3,
  .at-glance > h3,
  .auth-heading,
  .location-details h3,
  .rail-card-head h3
) {
  font-family:var(--font-editorial);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
}

:is(.result-title,.loc-name,.activity-disclosure-copy strong,.snapshot-toggle-copy strong) {
  font-family:var(--font-editorial);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-title);
}

.result-title { font-size:var(--type-card-title); }

.result-specialty { font-size:var(--type-caption); }

body[data-view="explore"][data-explore-stage="results"] .result-rating-label {
  font-size:var(--type-caption);
}

/* Navigation, controls, labels, and actions always use the interface voice. */
.app-header,
.primary-nav,
.primary-nav a,
.primary-nav-toggle,
#account-menu-toggle,
#account-menu-toggle :is(strong,small),
.search-submit,
.refinement-disclosure,
.advanced-filters,
.activity-table {
  font-family:var(--font-ui);
  letter-spacing:var(--tracking-ui);
}

/* Brand identity is the only permitted serif role. The visible wordmark is
 * SVG artwork; the token also protects any accessible/fallback brand text. */
.brand-name {
  font-family:var(--font-brand);
  letter-spacing:var(--tracking-title);
}

.activity-table { font-size:var(--type-meta); }
.activity-table thead th { font-size:var(--type-caption); }

/* Measured values align without making ordinary clinical information look like code. */
:is(
  .result-rank,
  .result-metric,
  .result-distance,
  .loc-distance,
  .filter-count,
  .activity-count,
  .multi-option-count,
  .summary-item-value,
  .rating-summary-value,
  .results-count-number,
  .results-count-number-window,
  time,
  input[type="date"]
) {
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums lining-nums;
}

.mono {
  font-family:var(--font-code);
  font-weight:var(--weight-regular);
  font-variant-numeric:tabular-nums lining-nums;
}

:is(.contact-number,.loc-phone) {
  font-family:var(--font-code);
  font-weight:var(--weight-medium);
}

:is(.contribution-step-number) {
  font-family:var(--font-code);
  font-weight:var(--weight-semibold);
}

/* Referral readiness is always expressed through the same circular signal and
   adjacent text. The icon shape and label keep every state non-colour-only. */
.referral-status {
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:.4rem;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--color-text-muted);
  font-family:var(--font-ui);
  font-size:var(--type-caption);
  font-weight:var(--weight-semibold);
  line-height:1.25;
  white-space:nowrap;
}

.referral-status-badge {
  display:inline-grid;
  flex:none;
  width:18px;
  height:18px;
  place-items:center;
  border:1px solid transparent;
  border-radius:50%;
  background:var(--line-soft);
  color:var(--color-text-muted);
}

.referral-status-badge svg {
  display:block;
  width:11px;
  height:11px;
}

.referral-status-badge svg [stroke] {
  stroke-width:3;
}

.referral-status.badge-yes .referral-status-badge svg [stroke] {
  stroke-width:3.5;
}

.referral-status.badge-yes .referral-status-badge svg {
  width:12px;
  height:12px;
}

.referral-status-label {
  min-width:0;
  white-space:normal;
}

.referral-status-label-compact { display:none; }

.result-referral-status .referral-status-label-full { display:none; }

.result-referral-status .referral-status-label-compact { display:inline; }

.referral-status.badge-yes {
  background:transparent;
  color:var(--color-positive-strong);
}

.referral-status.badge-yes .referral-status-badge {
  width:16px;
  height:16px;
  background:var(--color-positive-medallion);
  color:var(--color-on-positive-medallion);
}

.referral-status.badge-no {
  background:transparent;
  color:var(--color-critical);
}

.referral-status.badge-no .referral-status-badge {
  background:var(--color-critical);
  color:var(--on-action);
}

.referral-status.badge-loa {
  background:transparent;
  color:var(--color-caution);
}

.referral-status.badge-loa .referral-status-badge {
  border-color:color-mix(in srgb,var(--color-caution) 45%,var(--color-border));
  background:var(--caution-soft);
  color:var(--color-caution);
}

.referral-status.badge-unknown {
  background:transparent;
  color:var(--color-text-muted);
}

.referral-status.badge-unknown .referral-status-badge {
  border-color:var(--color-border);
  background:var(--color-panel);
  color:var(--color-text-muted);
}

.result-rating-count-expanded { display:none; }
.result-rating-count-intermediate { display:none; }

.result-rating-count-compact { display:inline; }

.result-rating-count {
  display:inline-flex;
  align-items:baseline;
  margin-left:.22rem;
  color:var(--color-text-subtle);
  font-size:.82em;
  font-weight:500;
  line-height:1;
}

.results-count {
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text-subtle);
}

/* Reading copy is deliberately bounded; task controls and tables are not. */
:is(.page-hero p,.about-hero p,.legal-main p,.legal-main li,.referral-note p,.auth-disclaimer) {
  max-width:var(--measure-body);
  line-height:var(--leading-body);
}

@media (max-width:620px) {
  :root {
    --type-display:clamp(2.4rem,12vw,3.35rem);
    --type-page-title:clamp(2rem,9vw,2.8rem);
    --type-profile-title:clamp(1.55rem,7vw,1.9rem);
  }

  .result-title { font-size:1rem; }
}

@media (prefers-reduced-motion:reduce) {
  :root {
    --motion-fast:1ms;
    --motion-standard:1ms;
    --motion-slow:1ms;
  }
}