/* v1003 — Fline Intelligence Governor
   Final low-specificity layer: foundations, reusable components, screens,
   then accessibility. New work belongs here instead of release-number patches. */
@layer fline-foundations, fline-components, fline-screens, fline-accessibility;

@layer fline-foundations {
  :root {
    --fl-space-1: .25rem;
    --fl-space-2: .5rem;
    --fl-space-3: .75rem;
    --fl-space-4: 1rem;
    --fl-space-5: 1.25rem;
    --fl-radius-control: .9rem;
    --fl-radius-card: 1.25rem;
    --fl-support-size: .75rem;
    --fl-target: 44px;
    --fl-surface: color-mix(in srgb, var(--surface, #fff) 96%, var(--accent, #c65f14) 4%);
    --fl-surface-raised: color-mix(in srgb, var(--surface, #fff) 98%, var(--ink, #101828) 2%);
    --fl-border: color-mix(in srgb, var(--ink, #101828) 12%, transparent);
    --fl-accent-border: color-mix(in srgb, var(--accent, #c65f14) 34%, var(--fl-border));
    --fl-elevation-0: none;
    --fl-elevation-1: 0 4px 14px rgba(15, 23, 42, .07);
    --fl-elevation-2: 0 10px 28px rgba(15, 23, 42, .12);
    --fl-elevation-3: 0 18px 48px rgba(15, 23, 42, .18);
  }
  html[data-theme="dark"] {
    --fl-surface: color-mix(in srgb, var(--surface, #111827) 94%, white 6%);
    --fl-surface-raised: color-mix(in srgb, var(--surface, #111827) 90%, white 10%);
    --fl-border: rgba(255, 255, 255, .13);
  }
}

@layer fline-components {
  .intelligence-governor-card {
    display: grid;
    gap: var(--fl-space-3);
    border-color: color-mix(in srgb, var(--accent, #c65f14) 22%, var(--fl-border));
  }
  .intelligence-governor-card > div:first-child { display: grid; gap: var(--fl-space-1); }
  .intelligence-governor-card > div:first-child > span,
  #intelligence-governor-status { color: var(--muted, #667085); font-size: var(--fl-support-size); line-height: 1.45; }
  .governor-approval {
    display: grid;
    gap: var(--fl-space-2);
    padding: var(--fl-space-3);
    border: 1px solid color-mix(in srgb, var(--accent, #c65f14) 28%, var(--fl-border));
    border-radius: var(--fl-radius-control);
    background: color-mix(in srgb, var(--accent, #c65f14) 7%, var(--fl-surface));
  }
  .governor-approval > div { display: flex; flex-wrap: wrap; gap: var(--fl-space-2); }
  .governor-timeline { border-top: 1px solid var(--fl-border); padding-top: var(--fl-space-2); }
  .governor-timeline summary { min-height: var(--fl-target); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
  .governor-timeline ol { margin: var(--fl-space-2) 0 0; padding-inline-start: 1.25rem; color: var(--muted, #667085); font-size: var(--fl-support-size); }
  .governor-timeline li + li { margin-top: var(--fl-space-1); }
  :where(button, [role="button"], a.action, input[type="button"], input[type="submit"], select) {
    min-block-size: var(--fl-target) !important;
  }
  :where(.muted, small, .hint, .helper, .supporting, .contact-meta, .message-meta, .setting-note) {
    font-size: max(var(--fl-support-size), 1em) !important;
    line-height: 1.35;
  }
  :where(.soft-card, .contact, .community-card, .settings-card, .profile-card, .modal-card) {
    border-color: var(--fl-border) !important;
    box-shadow: var(--fl-elevation-1) !important;
  }
  :where(.soft-card, .settings-card, .profile-card) {
    background: var(--fl-surface-raised) !important;
  }
  :where(.premium-menu, .modal-card) {
    box-shadow: var(--fl-elevation-3);
  }
  :where(.bottom-nav button, .call-actions button, .profile-tabs button, .contact-actions button, .group-call-tools button) {
    min-width: var(--fl-target) !important;
    min-height: var(--fl-target) !important;
  }
  :where(.eyebrow, .badge, .pill, .chip, .control-badge) {
    letter-spacing: .035em;
  }
}

@layer fline-screens {
  /* Calm surfaces: reserve gradients and gold for selection, trust and primary action. */
  :where(.contact, .community-card, .settings-card, .profile-card, .adaptive-settings-card) {
    background-image: none !important;
  }
  :where(.contact, .community-card, .settings-card, .profile-card):not(.selected):not([aria-current="true"]) {
    border-color: var(--fl-border) !important;
  }
  .contacts-screen :where(.contact, .community-card) { padding: var(--fl-space-3) var(--fl-space-4); }
  .profile-tabs { gap: var(--fl-space-2); }
  .profile-tabs button { padding-inline: var(--fl-space-3); font-size: var(--fl-support-size); }
  .call-actions { gap: var(--fl-space-2); padding: var(--fl-space-2); }
  .call-actions button { padding: .4rem .55rem; font-size: var(--fl-support-size); }
  .group-call-tools button { min-width: var(--fl-target); min-height: var(--fl-target); }
  .adaptive-settings-card.hidden { display: none; }
  #auth-screen { width: min(560px, 100%); min-width: 0; overflow: hidden; }
  #auth-screen :where(.brand-row, .brand-row > div, .mode-row, form, label, .password-wrap) { min-width: 0; }
  #auth-screen .brand-row h1 { overflow-wrap: anywhere; }
  #auth-screen .legal-links { flex-wrap: wrap; row-gap: var(--fl-space-2); }
  @media (max-width: 380px) {
    #auth-screen { padding-inline: 16px; }
    #auth-screen .brand-row { gap: 12px; }
    #auth-screen .brand-logo { width: 76px; height: 76px; border-radius: 24px; }
    #auth-screen .brand-row h1 { font-size: 1.72rem; line-height: 1.05; }
    #auth-screen .brand-row .muted { font-size: var(--fl-support-size) !important; }
  }
}

@layer fline-accessibility {
  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #c65f14) 72%, white);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
  }
  @media (orientation: landscape) and (max-height: 520px) {
    .call-actions { padding-block: var(--fl-space-1); }
    .call-actions button { min-height: var(--fl-target); }
  }
}

/* Legacy CSS is intentionally unlayered. These narrow bridge rules are the
   only high-priority overrides required while those files are migrated. */
html, body { max-width: 100%; overflow-x: clip !important; }
@media (max-width: 720px) {
  .shell { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden; }
  #auth-screen.auth-card { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; min-width: 0 !important; margin-inline: auto !important; }
  #auth-screen :where(.brand-row, .brand-row > div, .mode-row, form, label, input, button, .password-wrap, .legal-links) { max-width: 100%; min-width: 0 !important; }
  #auth-screen .legal-links { flex-wrap: wrap !important; }
}
@media (max-width: 380px) {
  #auth-screen .brand-row { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); }
  #auth-screen .brand-logo { width: 76px !important; height: 76px !important; }
  #auth-screen .brand-row h1 { font-size: 1.55rem !important; white-space: normal !important; overflow-wrap: anywhere; }
}