/*
 * The approval screen's ONE style sheet (plan §12). Plain CSS, served from the
 * same origin under `default-src 'self'`: no inline style, no web font, no
 * third-party anything. The light values copy keel-web-app/src/styles/tokens.css;
 * the dark values are the spec's own (tokens.css has no dark theme).
 *
 * Components are the spec's §1.3 set. The few classes outside it are layout
 * parts OF those components (a card's row, a notice's action line, the dialog's
 * footer), or the shape-matched loading blocks §1.7 asks for.
 */

:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --ink: #1a2540;
  --ink-soft: #475569;
  --rule: #e5e7eb;
  --rule-strong: #cbd5e1;
  --signed: #0b2545;
  --agent-rule: #94a3b8;
  --cta-fill: #e8b44c;
  --cta-ink: #0b2545;
  --danger: #b23a48;
  --danger-bg: #fbecee;
  --warning: #92400e;
  --warning-bg: #fef3c7;
  --success: #15803d;
  --success-bg: #eaf6ee;
  --info: #1e40af;
  --info-bg: #dbeafe;
  --focus: #2563eb;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1626;
    --surface: #152036;
    --surface-2: #1c2a44;
    --ink: #e7ecf4;
    --ink-soft: #aab4c5;
    --rule: #2a3a58;
    --rule-strong: #3a4d70;
    --signed: #8fb3e8;
    --agent-rule: #5b6b88;
    --danger: #f2a0a9;
    --danger-bg: #3a1a20;
    --warning: #f6dfa8;
    --warning-bg: #3a2c0c;
    --success: #86efac;
    --success-bg: #0f2e1c;
    --info: #bfd7ff;
    --info-bg: #13294a;
    --focus: #8fb3e8;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
}

h1 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  margin: 0 0 var(--s2);
  overflow-wrap: anywhere;
}

h2 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  margin: var(--s5) 0 var(--s2);
}

p {
  margin: 0 0 var(--s3);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.small {
  font-size: 14px;
  line-height: 20px;
}

.soft {
  color: var(--ink-soft);
}

.mono {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

/*
 * A mono value that is the whole fact and must be read character for character:
 * an image digest. It gets its own line and wraps, because a digest truncated
 * with an ellipsis, or pushed off the side of a phone, is a digest nobody
 * checked. Never a horizontal scroll (plan §12 §1.8).
 */
.mono.wrap {
  display: block;
  margin-top: 4px;
  word-break: break-all;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- .topbar */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}

.topbar-title {
  font-weight: 700;
  text-decoration: none;
  margin-right: auto;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.topbar-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.topbar-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 599px) {
  .topbar-title {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------- .page */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.page.page-narrow {
  max-width: 600px;
}

.page > * {
  margin-top: 0;
  margin-bottom: 0;
}

.page > h2 {
  margin-top: var(--s2);
}

@media (min-width: 600px) {
  .page {
    padding: var(--s6);
  }
}

.page-head .sub {
  color: var(--ink-soft);
  margin: 0;
}

.eyebrow {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
  margin: 0 0 var(--s1);
}

.h1-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}

.h1-row h1 {
  margin: 0;
}

@media (min-width: 768px) {
  h1 {
    font-size: 28px;
    line-height: 34px;
  }
}

.region {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* --------------------------------------------------------------- .card */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.card > * {
  margin: 0;
}

a.card {
  text-decoration: none;
  color: var(--ink);
}

a.card:hover {
  border-color: var(--rule-strong);
}

.card-line {
  display: flex;
  flex-direction: column;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 20px;
}

@media (min-width: 600px) {
  .card-line {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--s3);
  }
}

.card-auth {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .card-auth {
    margin-top: 25vh;
  }
}

.device-row {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.device-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.device-row-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .device-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fingerprint {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ loading blocks */

.skeleton {
  background: var(--surface-2);
  border-radius: 10px;
  height: 112px;
}

.loading-line {
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- .facts */

.facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.facts dt {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.facts dd p {
  margin: 0;
}

@media (min-width: 600px) {
  .facts > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s3);
  }
}

.big-count {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

/* -------------------------------------------------------- .agent-words */

.agent-words {
  background: var(--surface-2);
  border-left: 3px solid var(--agent-rule);
  border-radius: 0 8px 8px 0;
  padding: var(--s3) var(--s4);
  margin: 0;
}

.agent-words-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}

.agent-words-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.clamp-phone {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (min-width: 600px) {
  .clamp-phone {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}

/* -------------------------------------------------------- .signed-panel */

.signed-panel {
  background: var(--surface);
  border: 2px solid var(--signed);
  border-radius: 10px;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.signed-panel > * {
  margin: 0;
}

.signed-panel > h2 {
  margin: 0;
}

.digest {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
}

.countdown.is-low {
  color: var(--warning);
  font-weight: 600;
}

/* -------------------------------------------------------------- .notice */

.notice {
  border-radius: 10px;
  padding: var(--s3) var(--s4);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  overflow-wrap: anywhere;
}

.notice > * {
  margin: 0;
}

.notice-info {
  background: var(--info-bg);
  color: var(--info);
}

.notice-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.notice-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.notice-success {
  background: var(--success-bg);
  color: var(--success);
}

.notice-neutral {
  background: var(--surface-2);
  color: var(--ink);
}

.notice a {
  color: inherit;
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
}

.notice .detail {
  font-size: 14px;
  line-height: 20px;
}

/* ---------------------------------------------------------------- .pill */

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px var(--s3);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-neutral {
  background: var(--surface-2);
  color: var(--ink);
}

.pill-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.pill-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.pill-success {
  background: var(--success-bg);
  color: var(--success);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ------------------------------------------------------------- buttons */

.btn-primary,
.btn-secondary,
.btn-danger {
  appearance: none;
  font: inherit;
  font-weight: 600;
  min-height: 48px;
  border-radius: 8px;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: var(--cta-fill);
  color: var(--cta-ink);
  border: 1px solid var(--cta-fill);
  width: 100%;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.btn-text {
  appearance: none;
  font: inherit;
  background: none;
  border: none;
  padding: var(--s2) 0;
  min-height: 48px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.notice .btn-text,
.notice .btn-secondary {
  color: inherit;
  border-color: currentColor;
}

button:disabled {
  cursor: default;
  opacity: 0.7;
}

@media (min-width: 600px) {
  .btn-primary {
    width: auto;
    min-width: 280px;
    align-self: flex-start;
  }
}

@media (max-width: 599px) {
  .device-row .btn-danger {
    width: 100%;
  }
}

.action-block {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.action-block > * {
  margin: 0;
}

/* -------------------------------------------------------- .code-block */

.code-block {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 20px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: var(--s3);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

.copy-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.copy-row .btn-text {
  padding-top: 0;
}

/* ----------------------------------------------------------- <details> */

details.call {
  border-top: 1px solid var(--rule);
  padding: var(--s2) 0;
}

details.call:last-of-type {
  border-bottom: 1px solid var(--rule);
}

details.call summary {
  cursor: pointer;
  min-height: 48px;
  padding: var(--s2) 0;
}

.call-status-failed {
  color: var(--danger);
  font-weight: 700;
}

.call-args {
  display: block;
  color: var(--ink-soft);
}

.failed-read {
  overflow-wrap: anywhere;
  margin: 0;
}

/* -------------------------------------------------------------- field */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.field label {
  font-weight: 600;
}

.field input {
  font: inherit;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  max-width: 440px;
}

.field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 14px;
  line-height: 20px;
}

ol.steps {
  margin: 0;
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* ------------------------------------------------------------- dialog */

dialog.dialog {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

dialog.dialog::backdrop {
  background: rgba(14, 22, 38, 0.55);
}

.dialog-body {
  padding: var(--s5) var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  overflow-y: auto;
}

.dialog-body > * {
  margin: 0;
}

.dialog-body h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.dialog-footer {
  border-top: 1px solid var(--rule);
  padding: var(--s3) var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
}

/* A folded part of the agent's explanation. Same box as an open one, so the
   four read as one thing; the marker is the only difference. */
details.agent-words.folded > summary {
  cursor: pointer;
  list-style: none;
}

details.agent-words.folded > summary::-webkit-details-marker {
  display: none;
}

details.agent-words.folded > summary::after {
  content: " ▸";
  color: var(--text-soft);
}

details.agent-words.folded[open] > summary::after {
  content: " ▾";
}

details.agent-words.folded > .agent-words-text {
  margin-top: 0.5rem;
}