/*
 * Codex shell fallback stylesheet.
 *
 * This is a defensive baseline for bare DOM emitted by plugins. It is not a
 * replacement for plugin-owned CSS. Keep this file low in the cascade by using
 * a named layer; unlayered shell, theme, and plugin styles continue to win.
 */

@layer reset, fallback;

@layer fallback {
  :where(button, input, select, textarea) {
    color: inherit;
    font: inherit;
  }

  :where(button) {
    align-items: center;
    background: var(--am-surface-raised);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    color: var(--am-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--font-weight-bold);
    gap: var(--space-xs);
    justify-content: center;
    line-height: 1.1;
    min-height: calc(var(--space-lg) + var(--space-md));
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    transition:
      background var(--am-transition),
      border-color var(--am-transition),
      color var(--am-transition),
      opacity var(--am-transition);
    user-select: none;
    white-space: nowrap;
  }

  :where(button:hover) {
    background: color-mix(in srgb, var(--am-surface-raised) 82%, var(--am-text-strong) 18%);
    border-color: color-mix(in srgb, var(--am-border) 68%, var(--am-text-strong) 32%);
    color: var(--am-text-strong);
  }

  :where(button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible) {
    outline: 2px solid var(--am-primary);
    outline-offset: 2px;
  }

  :where(button:active) {
    transform: translateY(1px);
  }

  :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :where(input, select, textarea) {
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    color: var(--am-text);
    min-height: calc(var(--space-lg) + var(--space-md));
    padding: var(--space-sm) var(--space-md);
    transition:
      border-color var(--am-transition),
      box-shadow var(--am-transition);
  }

  :where(textarea) {
    min-height: calc(var(--space-xl) * 3);
    resize: vertical;
  }

  :where(input::placeholder, textarea::placeholder) {
    color: var(--am-text-muted);
  }

  :where(a) {
    color: var(--am-primary);
    text-decoration: none;
  }

  :where(a:hover) {
    color: var(--am-primary-hover);
    text-decoration: underline;
  }

  :where(table) {
    border-collapse: collapse;
    color: var(--am-text);
    font-size: var(--font-size-sm);
    width: 100%;
  }

  :where(th, td) {
    border-bottom: 1px solid var(--am-border);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    vertical-align: middle;
  }

  :where(th) {
    background: var(--am-surface);
    color: var(--am-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  :where(tbody tr:hover td) {
    background: color-mix(in srgb, var(--am-surface) 86%, var(--am-text-strong) 14%);
  }

  :where(caption) {
    color: var(--am-text-muted);
    margin-bottom: var(--space-sm);
    text-align: left;
  }

  :where(code, pre, kbd) {
    font-family: var(--am-mono);
  }

  :where(code, kbd) {
    background: var(--am-surface-raised);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    color: var(--am-text-strong);
    padding: var(--space-xs);
  }

  :where(pre) {
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    color: var(--am-text);
    max-width: 100%;
    overflow: auto;
    padding: var(--space-md);
    white-space: pre;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--am-text-strong);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
  }

  :where(h1) {
    font-size: calc(var(--font-size-lg) + var(--font-size-sm));
  }

  :where(h2) {
    font-size: calc(var(--font-size-lg) + var(--space-xs));
  }

  :where(h3) {
    font-size: var(--font-size-lg);
  }

  :where(h4, h5, h6) {
    font-size: var(--font-size-md);
  }

  :where(p) {
    margin: 0 0 var(--space-md);
  }

  :where(ul, ol) {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-lg);
  }

  :where(ul) {
    list-style: disc;
  }

  :where(ol) {
    list-style: decimal;
  }

  :where(li + li) {
    margin-top: var(--space-xs);
  }

  :where(dl) {
    display: grid;
    gap: var(--space-xs) var(--space-md);
    grid-template-columns: max-content 1fr;
    margin: 0 0 var(--space-md);
  }

  :where(dt) {
    color: var(--am-text-muted);
    font-weight: var(--font-weight-bold);
  }

  :where(dd) {
    margin: 0;
  }

  :where(details) {
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    background: var(--am-surface);
    padding: var(--space-sm) var(--space-md);
  }

  :where(summary) {
    color: var(--am-text-strong);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
  }

  :where(details[open] > summary) {
    margin-bottom: var(--space-sm);
  }

  :where(dialog) {
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-lg);
    color: var(--am-text);
    padding: var(--space-lg);
  }

  :where(hr) {
    border: 0;
    border-top: 1px solid var(--am-border);
    margin: var(--space-md) 0;
  }
}