/*
  Xelence Roadmap component layer. Builds on design/tokens.css.
  Every class is prefixed xr- and lives in @layer xr, so it can't collide with Bootstrap or
  Blazor defaults, and it never styles bare elements outside .xr-app.
  Rules follow the Xelence Design System README (focus, status, links, motion).
*/
@layer xr {
  .xr-app {
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg);
  }

  /* Focus: dark ring on light grounds, orange only on the blue grounds. */
  .xr-app :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .xr-on-dark :focus-visible {
    outline-color: var(--focus-ring-on-dark);
  }

  .xr-skip-link {
    position: absolute;
    left: -9999px;
  }
  .xr-skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 200;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--sag-blue);
    color: #fff;
  }

  /* Links in running text are always underlined: link is only 2.3:1 against text-primary. */
  .xr-prose a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .xr-prose a:hover {
    color: var(--sag-blue-dark);
  }

  .xr-error {
    color: var(--danger-text);
  }

  /* Status badge: always word + icon + shape; colour never carries it alone. */
  .xr-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--type-badge-size);
    font-weight: 600;
    white-space: nowrap;
  }
  .xr-status svg {
    width: 0.85em;
    height: 0.85em;
    flex: none;
  }
  .xr-status--available {
    background: var(--status-available-bg);
    color: var(--status-available-fg);
  }
  .xr-status--delivered {
    background: var(--status-delivered-bg);
    color: var(--status-delivered-fg);
  }
  .xr-status--in-progress {
    background: var(--status-in-progress-bg);
    color: var(--status-in-progress-fg);
    border-color: var(--status-in-progress-border);
  }
  .xr-status--planned,
  .xr-status--discovery {
    background: var(--status-planned-bg);
    color: var(--status-planned-fg);
  }
  .xr-status--discovery {
    border-style: dashed;
  }

  /* Filter chip: the selected state is a solid fill plus aria-pressed, never a status look. */
  .xr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.3rem 0.95rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--type-chip-size);
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .xr-chip:hover {
    border-color: var(--sag-blue);
    color: var(--text-primary);
    transform: translateY(-1px);
  }
  /* Selected: solid blue, a check icon and aria-pressed, so it isn't told by colour alone. */
  .xr-chip[aria-pressed="true"] {
    background: var(--sag-blue);
    border-color: var(--sag-blue);
    color: #fff;
    font-weight: 600;
  }

  .xr-field-label {
    color: var(--text-secondary);
    font-size: var(--type-field-label-size);
    font-weight: var(--type-field-label-weight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Only elements you can click lift on hover. */
  .xr-clickable {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
      border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .xr-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--sag-blue);
  }

  @media (prefers-reduced-motion: reduce) {
    .xr-app *,
    .xr-app *::before,
    .xr-app *::after {
      transition: none !important;
      animation: none !important;
    }
    .xr-clickable:hover {
      transform: none;
    }
  }

  /* Windows high contrast: fills vanish, so keep borders and the selected state visible. */
  @media (forced-colors: active) {
    .xr-status {
      border: 1px solid CanvasText;
    }
    .xr-chip[aria-pressed="true"] {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }
  }
}