/* The approval page. Two rules keep the visibility gate (src/gate.ts) honest:
 * - #app fills the viewport exactly and never scrolls itself, so the whole
 *   observed target can be fully visible; long fields scroll inside .fields.
 * - No opacity, transform, filter or mix-blend-mode on #app or its ancestors:
 *   IntersectionObserver v2 reports any of them as "not visible". */

:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5d6370;
  --line: #dfe2e8;
  --code-bg: #f3f4f7;
  --accent: #1f6feb;
  --accent-fg: #ffffff;
  --danger: #b42318;
  --warn-bg: #fff4e5;
  --warn-fg: #7a4100;
  --off-bg: #e6e8ec;
  --off-fg: #8a909c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111318;
    --fg: #e8eaee;
    --muted: #9aa1ad;
    --line: #2a2e37;
    --code-bg: #1b1e25;
    --accent: #4c8dff;
    --accent-fg: #0b0d11;
    --danger: #ff7a6b;
    --warn-bg: #2d2210;
    --warn-fg: #f4c27a;
    --off-bg: #23262e;
    --off-fg: #6c727e;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: 16px;
}

.head h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.head .sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.message {
  margin: 0;
}

.fields {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  align-content: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.fields dt {
  color: var(--muted);
}

.fields dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

code {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 1px 4px;
}

.id {
  color: var(--muted);
}

pre.exact {
  margin: 0;
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}

.hidden-char {
  color: var(--danger);
  font-weight: 600;
}

.left {
  color: var(--muted);
}

.warnings {
  margin: 0;
  padding: 8px 12px 8px 28px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 6px;
  font-size: 13px;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

button {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}

button.approve {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

button.deny {
  color: var(--danger);
}

button:disabled,
button.approve:disabled {
  cursor: not-allowed;
  background: var(--off-bg);
  border-color: var(--off-bg);
  color: var(--off-fg);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.status {
  margin: 0;
  min-height: 1.45em;
  font-size: 14px;
}

[hidden] {
  display: none !important;
}