/* FLIQ / Controlled Velocity — Experience refinement, 2026-09-05.
   Canonical screen-only component layer. Sync with Sync-FliqExperience.ps1.
   Existing artwork, training-type semantics, charts and print output are untouched. */
@media screen {
  :root {
    --fliq-ui-canvas: var(--fliq-mist-100);
    --fliq-ui-signal: var(--fliq-mint-700);
    --fliq-ui-on-signal: var(--fliq-white);
    --fliq-ui-signal-soft: var(--fliq-mint-50);
    --fliq-ui-pressed: var(--fliq-ink-800);
    --fliq-ui-on-pressed: var(--fliq-white);
    --fliq-ui-edge: var(--fliq-border-control);
    --fliq-ui-action: var(--fliq-primary-action-bg, var(--fliq-action-bg));
    --fliq-ui-on-action: var(--fliq-primary-action-fg, var(--fliq-action-fg));
    --fliq-ui-depth: var(--fliq-shadow-sm, var(--fliq-shadow-1));
    --fliq-ui-float: var(--fliq-shadow-md, var(--fliq-shadow-2));
    --fliq-ui-logo-stage: var(--fliq-gradient-pearl);
  }
  :root:is([data-theme="dark"], [data-fliq-theme="dark"], .fliq-theme-dark) {
    --fliq-ui-canvas: var(--fliq-ink-950);
    --fliq-ui-signal: var(--fliq-mint-400);
    --fliq-ui-on-signal: var(--fliq-ink-950);
    --fliq-ui-signal-soft: var(--fliq-ink-800);
    --fliq-ui-pressed: var(--fliq-mist-200);
    --fliq-ui-on-pressed: var(--fliq-ink-950);
    --fliq-ui-logo-stage: var(--fliq-gradient-ink);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-fliq-theme="light"]) {
      --fliq-ui-canvas: var(--fliq-ink-950);
      --fliq-ui-signal: var(--fliq-mint-400);
      --fliq-ui-on-signal: var(--fliq-ink-950);
      --fliq-ui-signal-soft: var(--fliq-ink-800);
      --fliq-ui-pressed: var(--fliq-mist-200);
      --fliq-ui-on-pressed: var(--fliq-ink-950);
      --fliq-ui-logo-stage: var(--fliq-gradient-ink);
    }
  }

  html body, html { background: var(--fliq-ui-canvas); }
  /* Resolve product aliases at their own scope, not only on the shell root. */
  [data-fliq-product] {
    --fliq-product-accent: var(--fliq-product-text-on-light);
    --fliq-product-tint: var(--fliq-product-tint-light);
  }
  :root:is([data-theme="dark"], [data-fliq-theme="dark"])[data-fliq-product],
  :root:is([data-theme="dark"], [data-fliq-theme="dark"]) [data-fliq-product] {
    --fliq-product-accent: var(--fliq-product-vivid);
    --fliq-product-tint: var(--fliq-product-tint-dark);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-fliq-theme="light"])[data-fliq-product],
    :root:not([data-theme="light"]):not([data-fliq-theme="light"]) [data-fliq-product] {
      --fliq-product-accent: var(--fliq-product-vivid);
      --fliq-product-tint: var(--fliq-product-tint-dark);
    }
  }
  html body { color: var(--fliq-text-primary); }
  html :is(.page-heading, .selection-head) {
    position: relative;
    padding-block: 24px 32px;
    border-bottom: 1px solid var(--fliq-border-control);
    margin-bottom: 24px;
    gap: 24px;
  }
  html :is(.page-heading, .selection-head) h1 {
    max-width: 22ch;
    font-family: var(--fliq-font-display);
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  html :is(.page-heading, .selection-head) :is(.eyebrow, .selection-eyebrow) {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  html :is(.page-heading, .selection-head) :is(.eyebrow, .selection-eyebrow)::before {
    content: "";
    flex: 0 0 32px;
    height: 4px;
    background: var(--fliq-product-gradient);
  }
  html :is(.supporting, .selection-intro) { max-width: 64ch; line-height: 1.6; }
  html :is(.card, .panel, .dashboard-card, .role-dashboard-card, .analysis-surface, .calendar-controls, .login-card, .series-gate-card) {
    border-radius: var(--fliq-radius-card);
    border-color: var(--fliq-border-subtle);
    box-shadow: var(--fliq-ui-depth);
  }
  html :is(.calendar-toolbar, .event-overview-toolbar, .session-workspace-tabs) {
    border: 1px solid var(--fliq-border-subtle);
    border-radius: var(--fliq-radius-control);
    background: var(--fliq-surface);
    padding: 12px;
  }
  html :is(.primary-nav, .sidebar) { box-shadow: var(--fliq-ui-depth); }
  html .primary-nav { background: var(--fliq-surface); backdrop-filter: none; }
  html .primary-nav a.active {
    color: var(--fliq-text-primary);
    border-color: var(--fliq-product-accent);
    background: var(--fliq-product-tint);
    box-shadow: inset 0 -3px 0 var(--fliq-product-accent);
  }
  html :is(.hero-card, .athlete-home-hero, .coach-center-hero) {
    background: var(--fliq-gradient-ink);
    border-radius: var(--fliq-radius-panel);
    box-shadow: var(--fliq-ui-float);
  }
  html :is(.hero-card, .athlete-home-hero, .coach-center-hero) :is(h1, h2, h3) { color: var(--fliq-mist-50); }
  html :is(.planiq-page-brand, .raceiq-page-brand) {
    box-sizing: border-box;
    width: min(100%, 264px);
    padding: 12px 16px;
    border: 1px solid var(--fliq-border-subtle);
    border-radius: var(--fliq-radius-control);
    background: var(--fliq-ui-logo-stage);
    box-shadow: var(--fliq-ui-depth);
  }

  /* Semantic states, never inferred from the label. Destructive/live timing
     actions keep their own status rules and are not painted as generic CTAs. */
  html :is(button, .button, .product-action) {
    font-family: var(--fliq-font-ui);
    font-weight: 600;
    border-radius: var(--fliq-radius-control);
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  html :is(.button.secondary, button.secondary, button.ghost, .icon-button) {
    border: 1px solid var(--fliq-ui-edge);
    color: var(--fliq-text-primary);
    background: var(--fliq-surface);
    box-shadow: var(--fliq-ui-depth);
  }
  html :is(.button.secondary, button.secondary, button.ghost, .icon-button):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--fliq-ui-signal);
    background: var(--fliq-ui-signal-soft);
    color: var(--fliq-text-primary);
  }
  html :is(button.primary, .button.primary, .primary-button, .product-action, .login-card button[type="submit"]):not(.danger):not(.session-active) {
    background: var(--fliq-ui-action);
    color: var(--fliq-ui-on-action);
    border: 1px solid var(--fliq-ui-action);
    box-shadow: var(--fliq-ui-depth);
  }
  html :is(button.primary, .button.primary, .primary-button, .product-action, .login-card button[type="submit"]):not(.danger):not(.session-active):not(:disabled):not([aria-disabled="true"]):hover,
  html .product-card:is(:hover, :focus-visible) .product-action {
    background: var(--fliq-ui-signal);
    border-color: var(--fliq-ui-signal);
    color: var(--fliq-ui-on-signal);
    box-shadow: var(--fliq-ui-float);
  }
  html :is(button.primary, .button.primary, .primary-button, .button.secondary, button.secondary, button.ghost, .icon-button):not(.danger):not(.session-active):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--fliq-ui-pressed);
    border-color: var(--fliq-ui-pressed);
    color: var(--fliq-ui-on-pressed);
    box-shadow: none;
    transform: none;
  }
  html :is(.segmented-control, .session-workspace-tabs) button:is(.active, [aria-selected="true"], [aria-pressed="true"]) {
    border: 1px solid var(--fliq-ui-signal);
    background: var(--fliq-ui-signal-soft);
    color: var(--fliq-text-primary);
    box-shadow: inset 0 -3px 0 var(--fliq-ui-signal);
    font-weight: 700;
  }
  html :is(button, .button)[aria-busy="true"] { cursor: progress; }
  html :is(button, .button):disabled,
  html :is(button, .button)[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; transform: none; }

  html :is(input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select, textarea) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    color: var(--fliq-text-primary);
    background-color: var(--fliq-surface-muted);
    border-radius: var(--fliq-radius-control);
    font: 500 16px/1.5 var(--fliq-font-ui);
    padding: 12px;
    caret-color: var(--fliq-ui-signal);
  }
  /* Native select behavior is retained, including keyboard/type-ahead/mobile pickers. */
  html select:not([multiple]):not([size]), html select[size="1"] {
    appearance: none;
    padding-inline-end: 48px;
    background-image: linear-gradient(45deg, transparent 50%, var(--fliq-text-primary) 50%),
      linear-gradient(135deg, var(--fliq-text-primary) 50%, transparent 50%),
      linear-gradient(var(--fliq-border-control), var(--fliq-border-control));
    background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%, calc(100% - 44px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 24px;
    background-repeat: no-repeat;
  }
  html select option, html select optgroup { color: var(--fliq-text-primary); background: var(--fliq-surface); }
  html :is(input, textarea)::placeholder { color: var(--fliq-text-secondary); opacity: 1; }
  html :is(input, select, textarea):focus-visible { background-color: var(--fliq-surface); }
  html[data-fliq-product="raceiq"] :is(input, select, textarea) { border: 1px solid var(--fliq-border-control); }
  html :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fliq-status-danger-indicator) !important; }
  html :is(input, textarea)[readonly] { border-style: dashed !important; color: var(--fliq-text-secondary); }
  html :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--fliq-focus);
    outline-offset: 3px;
  }
  html :is(.topbar, .sidebar, .remote-header) :is(button.quiet, select) {
    background-color: var(--fliq-ink-800);
    color: var(--fliq-mist-50);
    --fliq-text-primary: var(--fliq-mist-50);
    --fliq-surface: var(--fliq-ink-800);
  }

  /* Launcher: strong editorial alignment, restrained product rail, legible marks. */
  html .selection-head { justify-items: start; text-align: start; }
  html .product-card {
    border-radius: var(--fliq-radius-card);
    border-color: var(--fliq-border-subtle);
    padding: 24px;
    gap: 24px;
    transform: none;
    box-shadow: var(--fliq-ui-depth);
  }
  html .product-card:is(:hover, :focus-visible) { border-color: var(--card-product); box-shadow: var(--fliq-ui-float); transform: none; }
  html .product-card-top {
    padding: 16px;
    border: 1px solid var(--fliq-border-subtle);
    border-radius: var(--fliq-radius-control);
    background: var(--fliq-ui-logo-stage);
  }
  html .product-lockup { width: 100%; max-width: 420px; }
  html .product-copy strong { color: var(--fliq-text-primary); font: 600 20px/1.3 var(--fliq-font-display); }
  html .product-copy p { font-size: 16px; font-weight: 400; }
  html .product-meta span { font-size: 12px; padding: 4px 8px; }
  html .product-action { min-height: 56px; padding-inline: 16px; font-size: 14px; }
  html .utility-bar .quiet-button { border: 1px solid var(--fliq-border-control); }
  html .utility-bar .quiet-button:hover { border-color: var(--fliq-ui-signal); background: var(--fliq-ui-signal-soft); }
  html .auth-card .button.primary { min-height: 56px; }
  html :is(.series-gate, .app-main) { background: var(--fliq-ui-canvas); }
  html .raceiq-entry-brand { display: block; width: min(100%, 320px); padding: 16px; border-radius: 12px; background: var(--fliq-ui-logo-stage); box-sizing: border-box; }
  html .raceiq-entry-brand img { width: 100%; height: auto; margin: 0; }
  html .raceiq-entry-logo-dark { display: none; }
  :root[data-fliq-theme="dark"] .raceiq-entry-logo-light { display: none; }
  :root[data-fliq-theme="dark"] .raceiq-entry-logo-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-fliq-theme="light"]) .raceiq-entry-logo-light { display: none; }
    :root:not([data-fliq-theme="light"]) .raceiq-entry-logo-dark { display: block; }
  }
  @media (max-width: 499px) {
    html .product-card .product-lockup { display: none !important; }
    html .product-card { padding: 16px; }
    html :is(.page-heading, .selection-head) { padding-block: 16px 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html *, html *::before, html *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    html select:not([multiple]) { appearance: auto; background-image: none; }
    html :is(button, .button, input, textarea, select, .product-card) { border: 1px solid ButtonText !important; box-shadow: none; }
    html :is(button, a, input, select, textarea):focus-visible { outline-color: Highlight; }
  }
}
@media print {
  .raceiq-entry-logo-dark { display: none !important; }
  .raceiq-entry-logo-light { display: block !important; }
}