@layer controls {
  /* Shared interaction recipes. A control keeps its foreground and border through
   rest, hover and press. Solid surfaces never turn transparent on interaction. */
  :root {
    --control-accent: var(--flare, #ff946e);
    --control-neutral: #242629;
    --control-neutral-hover: #2c2e32;
    --control-neutral-press: #34363a;
    --control-edge: #414449;
    --control-ghost-hover: #ffffff08;
    --control-ghost-press: #ffffff10;
    --control-focus: var(--control-accent);
    --control-error: #ff9c8d;
  }
  /* The wallet reads as an app, not a page: no stray text selection. Fields stay editable. */
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input,
  textarea,
  [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
  button {
    --rest: var(--control-accent);
    --hover: #ffa17f;
    --press: #ffac8e;
    --ink: #101112;
    --edge: transparent;
    background-color: var(--rest);
    border-color: var(--edge);
    color: var(--ink);
    transition: background-color 120ms ease-out;
    touch-action: manipulation;
  }
  button.secondary,
  body[data-app='explorer'] button {
    --rest: var(--control-neutral);
    --hover: var(--control-neutral-hover);
    --press: var(--control-neutral-press);
    --ink: var(--text);
    --edge: var(--control-edge);
  }
  button:is(
    .icon,
    .input-icon,
    .pill,
    .text-button,
    .header-account,
    .account-choice,
    .account-menu-action,
    .drawer-account,
    .picker-option,
    .explore-row,
    .quark-tile,
    .collection-card,
    .item-tile,
    .setting-toggle,
    .setting-link
  ),
  body[data-app='explorer'] .history-row {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--text);
    --edge: transparent;
  }
  button:is(.icon, .input-icon, .pill, .text-button) {
    --ink: var(--muted);
  }
  /* The options trigger belongs to its row: no detached dark tile. Keep it lit
   while the popover is open, including when the pointer moves into the menu. */
  button.account-options {
    --rest: transparent;
  }
  button.account-options[aria-expanded='true'] {
    --rest: #ffffff10;
    --hover: #ffffff14;
    --press: #ffffff18;
    --ink: var(--text);
  }
  /* Tiles sit on the page as cards: a solid neutral surface that lifts slightly on hover. */
  button.activity-item {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--text);
    --edge: transparent;
  }
  button:is(.round, .asset-row, .points-card, .asset-picker) {
    --rest: var(--card, #191a1c);
    --hover: #1f2023;
    --press: var(--control-neutral);
    --ink: var(--text);
    --edge: var(--line, #2e3033);
  }
  button.backup-reminder {
    --rest: #211e1c;
    --hover: #292521;
    --press: #312c27;
    --edge: #554238;
    --ink: var(--text);
  }
  .accounts-actions button.secondary {
    --rest: #ff946e08;
    --hover: #ff946e14;
    --press: #ff946e20;
    --ink: var(--control-accent);
    --edge: #ff946e70;
  }
  .review-actions button.secondary {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--text);
    --edge: var(--control-edge);
  }
  /* A destructive-looking action that stays calm: red ink and edge on the neutral surface. */
  button.danger-button {
    --rest: #2a1a18;
    --hover: #34201d;
    --press: #3e2622;
    --ink: #ff9c8d;
    --edge: #61382f;
  }
  button.choice {
    --rest: var(--card, #191a1c);
    --hover: #1f2023;
    --press: var(--control-neutral);
    --ink: var(--text);
    --edge: var(--line, #2e3033);
  }
  button.choice[aria-pressed='true'] {
    --edge: var(--control-accent);
  }
  .display-options button[aria-pressed='true'] {
    --rest: #30241f;
    --hover: #382b25;
    --press: #40322b;
    --ink: #ffc2a9;
    --edge: var(--control-accent);
  }
  body[data-app='explorer'] .history-row[aria-current='true'] {
    --rest: #ff946e0a;
    --hover: #ff946e14;
    --press: #ff946e20;
  }
  .input-icon[aria-pressed='true'] {
    --ink: var(--control-accent);
  }
  button[data-copied='true']:not(.wide) {
    --ink: var(--green, #9bddba);
  }
  button[role='tab'] {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--muted);
  }
  button[role='tab'][aria-selected='true'] {
    --ink: var(--control-accent);
  }
  /* Home's asset tabs read as headings: the selected one is plain text over its accent line. */
  .home-tabs button[role='tab'] {
    --hover: transparent;
    --press: transparent;
  }
  .home-tabs button[role='tab'][aria-selected='true'] {
    --ink: var(--text);
  }
  body[data-app='explorer'] .search-row button {
    --rest: var(--control-accent);
    --hover: #ffa17f;
    --press: #ffac8e;
    --ink: #101112;
    --edge: transparent;
  }
  summary {
    border-radius: 10px;
    transition: background-color 120ms ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    button:hover:not(:disabled) {
      background-color: var(--hover);
    }
    summary:hover {
      background-color: var(--control-ghost-hover);
    }
    :is(input, textarea, select):not([type='checkbox']):hover:not(:disabled):not(:focus),
    .amount-input:hover:not(:focus-within) {
      border-color: #787c82;
    }
    input::file-selector-button:hover {
      background-color: var(--control-neutral-hover);
    }
  }
  button:active:not(:disabled) {
    background-color: var(--press);
    transform: none;
    transition-duration: 60ms;
  }
  summary:active {
    background-color: var(--control-ghost-press);
  }
  :is(button, a, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--control-focus);
    outline-offset: 2px;
  }
  :is(.tabs, .account-menu) button:focus-visible {
    outline-offset: -2px;
  }
  :is(input, textarea, select):not([type='checkbox']),
  .amount-input {
    border-color: #64686f;
    transition: border-color 120ms ease-out;
  }
  :is(input, textarea, select):not([type='checkbox']):focus,
  .amount-input:focus-within {
    border-color: var(--control-focus);
    outline: 2px solid var(--control-focus);
    outline-offset: -2px;
  }
  .amount-input input:focus {
    outline: none;
  }
  /* Validation remains visible under the pointer and while correcting a field. */
  :is(input, textarea, select)[aria-invalid='true'],
  :is(input, textarea, select)[aria-invalid='true']:focus,
  .amount-input:has(input[aria-invalid='true']) {
    border-color: var(--control-error);
    outline-color: var(--control-error);
  }
  @media (hover: hover) and (pointer: fine) {
    :is(input, textarea, select)[aria-invalid='true']:hover,
    .amount-input:has(input[aria-invalid='true']):hover {
      border-color: var(--control-error);
    }
  }
  .field-error {
    color: var(--control-error);
  }
  button:disabled {
    cursor: not-allowed;
  }
  /* The review and progress headings receive reading focus, but are not interactive controls. */
  :is(#review-title, #mint-session-title):focus-visible {
    outline: none;
  }
  button[data-busy-disabled='true'] {
    cursor: progress;
  }
  @media (prefers-reduced-motion: reduce) {
    button,
    summary,
    input,
    textarea,
    select {
      transition: none;
    }
  }
}

@layer controls {
  /* A collectible's one action, Send, is the page's main button. */
  .quick[data-single] button.round {
    --rest: var(--control-accent);
    --hover: #ffa17f;
    --press: #ffac8e;
    --ink: #101112;
    --edge: transparent;
  }
  /* The chosen chart period reads as selected, the others as quiet pills. */
  button.market-range[aria-pressed='true'] {
    --rest: var(--raised, #242527);
    --hover: #2c2d30;
    --ink: var(--text);
  }
  /* The tracker is a quiet card that opens Activity, not a call to action. */
  button.tx-tracker {
    --rest: var(--card);
    --hover: var(--raised);
    --press: var(--control-neutral-press);
    --ink: var(--text);
    --edge: var(--line);
  }
  button.tx-tracker[data-stage='finalized'] {
    --edge: color-mix(in srgb, var(--green) 45%, var(--line));
  }
  button.tx-tracker[data-stage='failed'] {
    --edge: color-mix(in srgb, var(--danger) 45%, var(--line));
  }
}

@layer controls {
  /* Stop ends signing: a neutral control with a warning edge, never the primary action. */
  button#mint-session-stop {
    --edge: color-mix(in srgb, var(--danger) 45%, var(--line));
  }
  /* While stopping, Stop keeps keyboard focus but ignores clicks (aria-disabled): it reads as
     :disabled. */
  button#mint-session-stop[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.45;
  }
  button#mint-session-stop[aria-disabled='true']:active {
    background-color: var(--rest);
  }
  @media (hover: hover) and (pointer: fine) {
    button#mint-session-stop[aria-disabled='true']:hover {
      background-color: var(--rest);
    }
  }
}

@layer controls {
  #reset-error[data-tone='ok'] {
    color: var(--green);
  }
}

@layer controls {
  /* Tip levels sit on the track: the sliding thumb, not the button, marks the choice. */
  .tip-options button {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--muted);
    --edge: transparent;
  }
  .tip-options button[aria-pressed='true'] {
    --rest: transparent;
    --hover: transparent;
    --press: transparent;
    --ink: var(--text);
  }
}

@layer controls {
  /* A review's section heading is text, not a button: under the pointer it brightens, without a
     background that would end at the gutter. */
  .review-disclosure > summary:is(:hover, :active) {
    background-color: transparent;
    color: var(--text);
  }
}

@layer controls {
  /* The fee row and its sheet's levels are rows of the review, not standalone buttons. */
  button.fee-row,
  button.fee-option {
    --rest: transparent;
    --hover: var(--control-ghost-hover);
    --press: var(--control-ghost-press);
    --ink: var(--text);
    --edge: transparent;
  }
  button.fee-option {
    --edge: var(--line);
  }
  button.fee-option[aria-checked='true'] {
    --rest: color-mix(in srgb, var(--flare) 8%, transparent);
    --edge: var(--flare);
  }
}