@layer components {
  /* Wordmark */
  .wordmark {
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-base);
  }

  /* Labels: tiny, uppercase, spaced */
  .label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-2);
  }

  .dim { color: var(--fg-3); }

  /* Inputs: a square box */
  .input {
    block-size: var(--control-h);
    inline-size: 100%;
    padding-inline: var(--s2);
    background: var(--bg);
    border: var(--border);
    border-radius: 0;
    outline: none;
    transition: border-color var(--ease);

    &::placeholder { color: var(--fg-3); }
    &:hover { border-color: var(--fg-3); }
    &:focus { border-color: var(--fg); }
    &[aria-invalid="true"] { border-color: var(--down); }
  }

  /* Buttons: square boxes. .btn--solid inverts. .btn--icon is a square cell for a glyph. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    block-size: var(--control-h);
    min-inline-size: var(--control-h);
    padding-inline: var(--s2);
    border: 1px solid var(--fg);
    border-radius: 0;
    background: var(--bg);
    color: var(--fg);
    white-space: nowrap;
    transition: background var(--ease), color var(--ease), border-color var(--ease);

    &:hover { background: var(--fg); color: var(--bg); }
    &:active { transform: translateY(1px); }
  }

  .btn--solid {
    background: var(--fg);
    color: var(--bg);
    &:hover { background: var(--bg); color: var(--fg); }
  }

  .btn--ghost {
    border-color: transparent;
    color: var(--fg-3);
    &:hover { background: transparent; color: var(--fg); border-color: var(--line); }
  }

  /* Destructive: red outline at rest, filled red on hover. */
  .btn--danger {
    border-color: var(--down);
    color: var(--down);
    &:hover { background: var(--down); color: var(--fg); }
  }

  .btn--icon { padding-inline: 0; inline-size: var(--control-h); }

  .btn--sm { block-size: var(--s3); min-inline-size: var(--s3); padding-inline: var(--s1); font-size: var(--text-sm); }
  .btn--sm.btn--icon { inline-size: var(--s3); }

  /* Field: input + button fused into one line */
  .field {
    display: flex;
    & .input { flex: 1; }
    & .input + .btn { margin-inline-start: -1px; }
  }

  /* Combo: inputs stacked flush, one heavy-bordered block, button spanning their full height */
  .combo {
    --bw: 2px;
    display: flex;
    & .combo__inputs { flex: 1; display: flex; flex-direction: column; }
    & .input { border-width: var(--bw); }
    & .input:focus { position: relative; }
    & .input + .input { margin-block-start: calc(-1 * var(--bw)); }
    & .btn { block-size: auto; border-width: var(--bw); margin-inline-start: calc(-1 * var(--bw)); }
  }

  .alert { color: var(--down); font-size: var(--text-sm); }

  /* Segmented links (6h 24h) */
  .seg {
    display: flex;
    font-size: var(--text-sm);
    & a, & button { padding-inline: var(--s1); color: var(--fg-3); }
    & button { font: inherit; background: none; border: 0; cursor: pointer; }
    & a:hover, & a[aria-current], & button:hover, & button[aria-pressed=true] { color: var(--fg); }
  }

  /* Menu: a floating box of controls, opened at a point (see dashboard_controller). */
  .menu {
    position: fixed;
    z-index: 10;
    inline-size: min(calc(var(--u) * 36), calc(100vw - var(--s2) * 2));
    padding: var(--s2);
    background: var(--bg);
    border: 1px solid var(--fg-3);
    --gap: var(--s2);

    &[hidden] { display: none; }
    & .row { --gap: var(--s1); }
    & .seg a, & .seg button { padding-inline: 0 var(--s2); }
  }

  .menu__title { font-size: var(--text-sm); color: var(--fg-2); }
}