/**
 * faerd-destination.css — Tab[3] Færd destination container.
 *
 * BEM: .hd-faerd-destination__* (toggle-host + view-mount + panes). The
 * three-segment toggle itself reuses the shared .hd-segmented / .hd-segmented__*
 * primitive from utilities.css (via HdSegmentedControl); the classes below are
 * only the layout shell around it plus the plain-button fallback used when
 * HdSegmentedControl isn't loaded.
 *
 * Module: public/js/faerd-destination.js (window.FaerdDestination).
 *
 * Token-only — no hardcoded colors, font-sizes, or motion values.
 *
 * @layer components — placed after base + tokens, before utilities + overrides.
 */

@layer components {

  .hd-faerd-destination {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    height: 100%;
    min-height: 0;
  }

  .hd-faerd-destination__toggle-host {
    display: flex;
    justify-content: center;
    padding: var(--hd-space-2) var(--hd-space-3) 0;
    flex: 0 0 auto;
  }

  .hd-faerd-destination__view-mount {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hd-faerd-destination__pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* ===== Plain-button fallback (used only when HdSegmentedControl isn't
   * loaded yet; mirrors .hd-segmented's look so there is no visible flash
   * once the real segmented control takes over) ===== */

  .hd-faerd-destination__toggle {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
  }

  .hd-faerd-destination__toggle-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    border: none;
    border-inline-end: 1px solid var(--hd-border-medium);
    background: transparent;
    color: var(--hd-text-secondary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
    cursor: pointer;
  }

  .hd-faerd-destination__toggle-item:last-child {
    border-inline-end: none;
  }

  .hd-faerd-destination__toggle-item:hover {
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
  }

  .hd-faerd-destination__toggle-item.is-active {
    background: color-mix(in srgb, var(--hd-accent-primary) 20%, transparent);
    color: var(--hd-accent-primary);
  }

}