/**
 * Button Components - Design System Implementation
 *
 * The one button (.btn, variants and sizes on data attributes) and the components built from it:
 * the split copy button with its blur transition, and the copy menu
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     BUTTON
     The one button: <button class="btn" data-variant="…" data-size="…" [data-square]>.
     Variants: primary (accent fill), outline (glass edge), ghost (no edge).
     Sizes: sm (32 px) and md (36 px, the default). data-square is its own axis, as in Foundations'
     Button: icon only, as wide as the size is tall. Every state is defined here once, for all
     variants; a component sets only its own layout.
     ═══════════════════════════════════════════════════════════ */

  .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    block-size: var(--control-height-md);
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform var(--duration-fast) var(--ease-emphasized-decelerate),
      background-color var(--duration-micro) var(--ease-emphasized-decelerate);
    user-select: none;
    -webkit-user-select: none;
  }

  .btn[data-size="sm"] {
    block-size: var(--control-height-sm);
  }

  .btn[data-square] {
    inline-size: var(--control-height-md);
    padding: 0;
  }

  .btn[data-square][data-size="sm"] {
    inline-size: var(--control-height-sm);
  }

  .btn-icon {
    width: var(--text-base-size);
    height: var(--text-base-size);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Primary: the accent fill. The transparent border is the boundary forced colours paint (C-6) */
  .btn[data-variant="primary"] {
    border: 1px solid transparent;
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    box-shadow: var(--shadow-button);
    overflow: hidden;
  }

  .btn[data-variant="primary"]::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-button-inset);
    pointer-events: none;
  }

  /* Outline: the glass edge, drawn over the box so it takes no height. The split button's group
     wears the same edge around its two halves. */
  .btn[data-variant="outline"],
  .segmented-btn {
    box-shadow: var(--shadow-xs);
  }

  .btn[data-variant="outline"]::before,
  .segmented-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.5px solid var(--color-highlight);
    border-radius: inherit;
    pointer-events: none;
  }

  /* States, once for every variant. Hover only where a pointer can hover, so a tap never leaves it on */
  @media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--color-hover-tint);
    }

    .btn[data-variant="primary"]:hover:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--color-accent-hover);
    }
  }

  .btn:active:not(:disabled, [aria-disabled="true"]) {
    transform: scale(0.97);
  }

  /* Disabled, or busy while a comparison runs (aria-disabled keeps it focusable, audit A-2) */
  .btn:is(:disabled, [aria-disabled="true"]) {
    color: var(--color-text-secondary);
    cursor: not-allowed;
  }

  .btn[data-variant="primary"]:is(:disabled, [aria-disabled="true"]) {
    background-color: var(--color-press-tint);
    box-shadow: none;
  }

  .btn[data-variant="primary"]:is(:disabled, [aria-disabled="true"])::after {
    box-shadow: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn:active:not(:disabled, [aria-disabled="true"]) {
      transform: none;
    }
  }

  /* The current page (sobre.html's Sobre link, aria-current="page"): a resting tint in place of the
     outline's edge and shadow, and no press, so it reads as where you are, not as an action (C-10) */
  .btn[aria-current="page"] {
    background-color: var(--color-hover-tint);
    box-shadow: none;
    cursor: default;
  }

  .btn[aria-current="page"]::before {
    content: none;
  }

  .btn[aria-current="page"]:active {
    transform: none;
  }

  /* ═══════════════════════════════════════════════════════════
     BUTTON SLOT (Container)
     ═══════════════════════════════════════════════════════════ */

  .btn-slot {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  /* A slot's child sits inside its border: parent radius minus the border */
  .btn-slot > *,
  .segmented-btn > * {
    border-radius: calc(var(--radius-sm) - 0.5px);
  }

  /* Touch screens (audit C-4, question 4): every button is at least 44 px, the platform minimum for
     a finger, so the desktop density stays as it is. The pill's × keeps its drawn size and reaches
     44 px with an invisible hit area (components-header.css), so the pill does not grow */
  @media (pointer: coarse) {
    .btn {
      min-block-size: 2.75rem; /* 44px */
    }

    .btn[data-square] {
      min-inline-size: 2.75rem;
    }
  }

  /* ═══════════════════════════════════════════════════════════
     SEGMENTED BUTTON (split button: copy, divider, menu chevron)
     ═══════════════════════════════════════════════════════════ */

  .segmented-btn {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
  }

  /* Divider */
  .segmented-divider {
    width: 0.5px;
    height: 1lh; /* one line of text tall; a bare leading token is a number and computes to 0 */
    background: var(--color-border);
  }

  /* ═══════════════════════════════════════════════════════════
     COPY BUTTON - Blur Transition (Emil Kowalski style)
     ═══════════════════════════════════════════════════════════ */
  
  .copy-btn {
    overflow: hidden;
    min-width: 6.25rem; /* 100px - fixed width for consistency */
  }
  
  .copy-btn-content {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: 
      opacity var(--duration-fast) var(--ease-emphasized-decelerate),
      filter var(--duration-fast) var(--ease-emphasized-decelerate),
      transform var(--duration-fast) var(--ease-emphasized-decelerate);
  }
  
  .copy-btn-default,
  .copy-btn-copied {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  
  .copy-btn-default span,
  .copy-btn-copied span {
    user-select: none;
    -webkit-user-select: none;
  }
  
  .copy-btn-copied {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(4px); /* Fixed blur value - not responsive */
    color: var(--color-accent);
  }
  
  
  /* Copied state */
  .copy-btn.copied .copy-btn-default {
    opacity: 0;
    filter: blur(4px); /* Fixed blur value - not responsive */
    transform: scale(0.95);
  }
  
  .copy-btn.copied .copy-btn-copied {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* ═══════════════════════════════════════════════════════════
     DROPDOWN
     ═══════════════════════════════════════════════════════════ */
  
  .dropdown-wrapper {
    position: relative;
  }
  
  /* Chevron rotation */
  .dropdown-trigger .btn-icon {
    transition: transform var(--duration-fast) var(--ease-emphasized-decelerate);
  }
  
  .dropdown-wrapper.open .dropdown-trigger .btn-icon {
    transform: rotate(180deg);
  }
  
  .dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1)); /* 4px gap between dropdown and segmented button */
    right: 0;
    width: fit-content; /* Fit content width */
    background: var(--color-surface-overlay); /* opaque: the pill's text showed through (audit L-4) */
    border: 0.5px solid var(--color-border); /* Outer grey border */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs); /* Match secondary button shadow */
    padding: var(--space-1);
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* closed items leave the tab order; it flips after the fade out */
    transform: scale(0.95);
    transform-origin: top right;
    /* Closing: the exit pair. Opening (.open below): fast on the decelerate curve, visible at once */
    transition: 
      opacity var(--duration-exit-fast) var(--ease-emphasized-accelerate),
      transform var(--duration-exit-fast) var(--ease-emphasized-accelerate),
      visibility var(--duration-exit-fast);
    z-index: var(--z-dropdown);
  }
  
  /* Inner white border using pseudo-element */
  .dropdown-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.5px solid var(--color-highlight);
    border-radius: var(--radius-sm);
    pointer-events: none;
  }
  
  .dropdown-wrapper.open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-duration: var(--duration-fast), var(--duration-fast), 0s;
    transition-timing-function: var(--ease-emphasized-decelerate);
    transform: scale(1);
  }
  
  /* Menu items are ghost buttons; the menu sets only their layout. Radius: parent radius - padding */
  .dropdown-item {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
    border-radius: calc(var(--radius-sm) - var(--space-1));
  }

  .dropdown-item .item-icon {
    width: var(--icon-box-sm);
    height: var(--icon-box-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
    
  /* ChatGPT and Claude marks: black, never the UI tint (brand marks keep their own colour) */
  .dropdown-item .item-icon .icon-brand {
    color: var(--color-text-field);
  }
  
  
  /* Forced colours (a Windows contrast theme) drop fills and shadows: the filled button's border
     takes the text colour so it still reads as a button, a disabled one turns GrayText, and the
     divider, drawn as a fill, uses the text colour (audit C-6) */
  @media (forced-colors: active) {
    .btn[data-variant="primary"] {
      border-color: ButtonText;
    }

    .btn:is(:disabled, [aria-disabled="true"]) {
      color: GrayText;
      border-color: GrayText;
    }

    /* The tint is dropped here, so the current page is underlined */
    .btn[aria-current="page"] {
      text-decoration: underline;
    }
  
    .segmented-divider {
      width: 1px; /* half a pixel paints as nothing at 1x once the colour is solid */
      forced-color-adjust: none;
      background: ButtonText;
    }
  }
}