/* mcp.openapps.network's own pages: the connect page, its done and error
 * pages, and the index. Loaded after /assets/tokens/styles.css (the vendored
 * OpenApps tokens and base layer). Every colour is a layer-3 semantic token,
 * so the pages follow the browser's light or dark setting through `.oa-auto`
 * on <html>: no panel keeps a light ground under light text, or the reverse. */

:root {
  /* OpenWallet claims accent slot 30 (amethyst). One slot per application. */
  --amethyst: color-mix(in oklab, var(--red) 29%, var(--iris));
  --accent-30: var(--amethyst);
}

/* One centred column. */
main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-16);
}

.brand {
  font: var(--type-ui);
  font-size: var(--text-lg);
  letter-spacing: var(--logo-tracking);
  color: var(--logo-fg);
  margin: 0 0 var(--space-8);
}
.brand .open { color: var(--text-muted); }
.brand .dot { color: var(--amethyst); }

h1 {
  font: var(--type-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}
h2 {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-6) 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
ul { margin: 0 0 var(--space-3); }
li { margin: 0 0 var(--space-1); }
strong { color: var(--text-strong); font-weight: var(--weight-medium); }
a { color: var(--text-link); text-decoration: underline; }
a:hover { color: var(--text-link-hover); }
code { color: var(--text-strong); }

.muted { color: var(--text-muted); }
.small { font: var(--type-caption); color: var(--text-faint); }

/* The request: a card on the page's ground. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
}
.card > :last-child { margin-bottom: 0; }

/* Information and warnings: tinted by the semantic pairs, text always the
 * page's own strong/body colour, so both grounds read. */
.note,
.panel {
  background: var(--bg-subtle);
  color: var(--text-body);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.panel > :last-child,
.note > :last-child { margin-bottom: 0; }
.warn {
  background: var(--warning-bg);
  color: var(--text-strong);
  border: 1px solid color-mix(in oklab, var(--warning-fg) 45%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* The status line while OpenWallet's window is open. */
.status { margin: 0 0 var(--space-4); }
.status .lead { font: var(--type-h4); color: var(--text-strong); margin: 0 0 var(--space-1); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
}

button { cursor: pointer; }
.btn {
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font: var(--type-ui);
  border: 1px solid transparent;
  transition: var(--transition-control);
}
.btn-primary { background: var(--brand); color: var(--brand-contrast); }
.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-hover); }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  color: var(--text-link);
  text-decoration: underline;
  font: inherit;
}
.cancel { font: var(--type-ui); color: var(--text-muted); }

[hidden] { display: none !important; }