/*
 * Dropdown — disclosure menu built on the native <details>/<summary>
 * pair so we get keyboard, screen-reader, and toggle behavior for free.
 *
 * Structure:
 *
 *   <details class="dropdown">
 *     <summary>...trigger contents...</summary>
 *     <div class="dropdown__panel">
 *       <a class="dropdown__item">...</a>
 *       <button class="dropdown__item dropdown__item--danger">...</button>
 *     </div>
 *   </details>
 *
 * The panel floats above the trigger via `position: absolute`. Add
 * `.dropdown__panel--up` to open upward instead of the default down
 * (e.g. for a menu pinned to the bottom of a sidebar).
 *
 * Click-outside-to-close is a known limitation of the bare <details>
 * approach. Add a small Stimulus controller when we have a use that
 * actually needs it; for the user menu it isn't worth the JS.
 */

@layer components {
  .dropdown {
    /* Distance between the trigger and the floating panel, top or
       bottom. Component-local because it isn't a layout gap — it's a
       visual gutter between two stacked surfaces. */
    --dropdown-offset: var(--space-1-5);

    /* Minimum-width floor for the floating panel — sized to fit one
       short label + an action chevron without wrapping. */
    --dropdown-panel-min-width: 12rem;

    /* Hairline border — universal 1px border-width; no system
       border-width scale yet. */
    --dropdown-border-size: 1px;

    /* Icon dimensions — 1rem for inline item icons. Component-local
       because icon size isn't spacing. */
    --dropdown-icon-size: 1rem;

    position: relative;
  }

  .dropdown > summary {
    list-style: none;
    cursor: pointer;
  }

  /* Hide the default disclosure triangle in WebKit. */
  .dropdown > summary::-webkit-details-marker {
    display: none;
  }

  .dropdown__panel {
    position: absolute;
    top: calc(100% + var(--dropdown-offset));
    left: 0;
    right: 0;
    z-index: var(--z-popup);
    min-width: var(--dropdown-panel-min-width);
    padding: var(--dropdown-offset);
    background: var(--color-white);
    border: var(--dropdown-border-size) solid var(--color-border);
    border-radius: var(--radius-md);
    /* Layered popover shadow — close-in for crispness, mid for body,
       far for ambient lift. Reads the system `--shadow-popover` so
       auth-card and the dropdown panel stack identically. */
    box-shadow: var(--shadow-popover);
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }

  /* Modifier — open upward instead of downward. Use when the trigger
     sits near the bottom of its container. */
  .dropdown__panel--up {
    top: auto;
    bottom: calc(100% + var(--dropdown-offset));
  }

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1-75) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    width: 100%;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }

  .dropdown__item:hover,
  .dropdown__item:focus-visible {
    background: var(--color-bg-hover-quiet);
    color: var(--color-text-heading);
  }

  .dropdown__item--danger {
    color: var(--color-danger);
  }

  .dropdown__item--danger:hover,
  .dropdown__item--danger:focus-visible {
    color: var(--color-danger);
  }

  .dropdown__item-icon {
    flex: 0 0 auto;
    width: var(--dropdown-icon-size);
    height: var(--dropdown-icon-size);
    color: var(--color-icon-quiet);
  }

  .dropdown__item--danger .dropdown__item-icon {
    color: var(--color-danger);
  }

  /* `button_to` wraps in a form — kill its default block-level margin
     so consecutive form-items don't gain a vertical gap. */
  .dropdown__item-form {
    margin: 0;
  }
}