/* Controls share inset-only depth: no outer shadow can darken a neighbouring
   control, including when a mobile row wraps. Keep popup/glass tokens intact.
   Scope tokens to each control so focus, pressed and autofill rules still work. */
:is(button, input, select, textarea, .back-link, .button-link, .nav-tile,
    .userbox, .custom-select-trigger, .file-picker-control,
    .document-policy-option, .task-register-row.is-clickable) {
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset;
  --action-shadow: 0 1px 0 rgba(255, 255, 255, .20) inset;
  --control-shadow: var(--tile-shadow);
}

/* Ordinary controls have a shallow bevel, then an inset depression while held.
   Deliberately opt in ordinary controls only: neither glass surface, its lens
   nor the bottom-navigation buttons participate. Fields retain their style. */
  :root {
    --mobile-button-raised: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(48, 48, 48, .11);
    --mobile-button-pressed: inset 0 2px 4px rgba(48, 48, 48, .18), inset 0 -1px 1px rgba(255, 255, 255, .40);
  }
  :is(.nav-tile, .back-link, .button-link, button.secondary, button.accent,
      .userbox, .task-register-row.is-clickable, .push-setup-close,
      #loginPage button, #toolbar button, .file-picker-button):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    box-shadow: var(--mobile-button-raised) !important;
    transition: box-shadow .14s ease, transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  }
  :is(.nav-tile, .back-link, .button-link, button.secondary, button.accent,
      .userbox, .task-register-row.is-clickable, .push-setup-close,
      #loginPage button, #toolbar button, .file-picker-button):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):is(:active, .is-touching),
  .file-picker-control.is-field-touching .file-picker-button {
    box-shadow: var(--mobile-button-pressed) !important;
  }
@media (prefers-color-scheme: dark) {
  :root {
    --mobile-button-raised: inset 0 1px 1px rgba(255, 255, 255, .16), inset 0 -2px 3px rgba(0, 0, 0, .30);
    --mobile-button-pressed: inset 0 2px 4px rgba(0, 0, 0, .38), inset 0 -1px 1px rgba(255, 255, 255, .12);
  }
}

@media (hover: none) {
  :is(.nav-tile, .back-link, .button-link, button.secondary, button.accent,
      .userbox, .task-register-row.is-clickable, .push-setup-close,
      #loginPage button, #toolbar button, .file-picker-button):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    transition-duration: .14s, .08s, .16s, .16s, .16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-tile, .back-link, .button-link, button.secondary, button.accent,
      .userbox, .task-register-row.is-clickable, .push-setup-close,
      #loginPage button, #toolbar button, .file-picker-button) { transition-duration: 0s !important; }
}

/* Card rims follow the same light direction as the inset bevel. Reuse the
   current theme/state colour; only the four border colours change, not width.
   Older engines without colour mixing retain their existing border. */
@supports (border-color: color-mix(in srgb, white, black)) {
  :is(.nav-tile, .userbox, .task-register-row.is-clickable):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    --card-rim-base: var(--tile-border);
    --card-rim-top: color-mix(in srgb, var(--card-rim-base) 82%, white);
    --card-rim-bottom: color-mix(in srgb, var(--card-rim-base) 90%, black);
    border-top-color: var(--card-rim-top) !important;
    border-right-color: var(--card-rim-base) !important;
    border-bottom-color: var(--card-rim-bottom) !important;
    border-left-color: var(--card-rim-base) !important;
  }
  @media (hover: hover) {
    :is(.nav-tile, .userbox, .task-register-row.is-clickable):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):is(:hover, :focus-visible) {
      --card-rim-base: var(--tile-hover-border);
    }
  }
  :is(.nav-tile, .userbox, .task-register-row.is-clickable):is(:active, .is-touching):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    --card-rim-base: var(--tile-active-border);
    --card-rim-top: color-mix(in srgb, var(--card-rim-base) 86%, black);
    --card-rim-bottom: color-mix(in srgb, var(--card-rim-base) 86%, white);
  }
}

.wb-plane-field input { box-shadow: var(--tile-shadow); }

@media (prefers-color-scheme: dark) {
  :is(button, input, select, textarea, .back-link, .button-link, .nav-tile,
      .userbox, .custom-select-trigger, .file-picker-control,
      .document-policy-option, .task-register-row.is-clickable) {
    --tile-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset;
    --action-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset;
  }
}