/* The bot's one look: the signing page (/sign, and the hosted signer) and the OAuth consent page.
   A centered card on a plain background; light or dark with the system. */
:root {
  color-scheme: light dark;
  --bg: #f4f4f6; --card: #fff; --fg: #15161a; --muted: #62646e; --line: #e3e4e8;
  --hover: #f6f6f8; --well: #f7f7f9; --btn: #15161a; --btn-fg: #fff; --ring: #4b6bfb;
  --warn: #8a4b00; --warn-bg: #fff6e8; --err: #b00020; --err-bg: #fdecef;
  --ok: #0a6b2d; --ok-bg: #e9f7ee; --danger: #c4122f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d10; --card: #17171c; --fg: #f1f1f4; --muted: #9a9ca8; --line: #2b2c34;
    --hover: #202027; --well: #111115; --btn: #f1f1f4; --btn-fg: #15161a; --ring: #8ea2ff;
    --warn: #f0b060; --warn-bg: #2a2114; --err: #ff8a8a; --err-bg: #2c1618;
    --ok: #6fdc95; --ok-bg: #12261a; --danger: #e5484d;
  }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main {
  width: 100%; max-width: 25rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 24px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; min-width: 0;
}
main.wide { max-width: 28rem; }
main > section { min-width: 0; }

/* The badge over the title: the bot's mark, a check once done, a warning when refused. */
.badge {
  width: 44px; height: 44px; border-radius: 12px; background: var(--btn); color: var(--btn-fg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex: none;
}
.badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
             stroke-linecap: round; stroke-linejoin: round; }
.badge .mark-ok, .badge .mark-bad { display: none; }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.refused { background: var(--danger); color: #fff; }
.badge.done .mark, .badge.refused .mark { display: none; }
.badge.done .mark-ok, .badge.refused .mark-bad { display: block; }

h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muted); margin: 1.5rem 0 .6rem; }
p { margin: 0 0 .75rem; }
.lead { color: var(--muted); overflow-wrap: anywhere; }
.lead:empty { display: none; }
.host { color: var(--fg); font-weight: 650; word-break: break-all; }
.note { color: var(--muted); font-size: .93rem; margin: .25rem 0 0; }

/* Callouts. The signing page's #status takes the same look from its class (ok / err). */
.warn, .err, .ok { border-radius: 12px; padding: .65rem .8rem; font-size: .93rem; margin: 1rem 0 0;
                   overflow-wrap: anywhere; }
.warn { color: var(--warn); background: var(--warn-bg); }
.err { color: var(--err); background: var(--err-bg); font-weight: 600; }
.ok { color: var(--ok); background: var(--ok-bg); font-weight: 600; }
#status:empty { display: none; }
#status { margin: .5rem 0 0; }

/* The wallet picker (wallet.js): one button per wallet, with the wallet's own icon. */
.list { display: grid; gap: 8px; }
.wallet {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  font: inherit; font-weight: 600; text-align: left; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
}
.wallet:hover:not(:disabled) { background: var(--hover); }
.wallet:disabled { opacity: .55; cursor: default; }
.wallet img, .wallet .icon {
  width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: contain;
}
.wallet .icon {
  display: flex; align-items: center; justify-content: center; background: var(--hover);
  color: var(--muted); font-weight: 700;
}
.wallet .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wallet .go { color: var(--muted); }
.status { min-height: 1.5em; margin: .6rem 0 0; font-size: .93rem; color: var(--muted); }
.status.bad { color: var(--err); }
.status:empty { display: none; }

.link {
  display: block; margin: 1rem auto 0; padding: .4rem; font: inherit; font-size: .95rem;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--fg); }
form { margin-top: 1.25rem; }
label { display: block; font-weight: 600; margin-bottom: .4rem; }
input[type=password], input[type=text], input:not([type]) {
  width: 100%; font: inherit; padding: .7rem .8rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
}
.primary, .secondary {
  display: block; width: 100%; margin-top: .75rem; padding: .75rem; font: inherit; font-weight: 600;
  text-align: center; text-decoration: none; border-radius: 12px; cursor: pointer;
}
.primary { color: var(--btn-fg); background: var(--btn); border: 1px solid var(--btn); }
.secondary { color: var(--fg); background: var(--card); border: 1px solid var(--line); }
.secondary:hover:not(:disabled) { background: var(--hover); }
.primary:disabled, .secondary:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
        font-size: .85rem; color: var(--muted); }
.foot:empty { display: none; }

/* The landing page (/, bb-http src/home.html): the mode next to the name, the next step. */
.pill { display: inline-block; vertical-align: middle; margin-left: .35rem; padding: .1rem .55rem;
        border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
        color: var(--warn); background: var(--warn-bg); }
.pill.live { color: var(--ok); background: var(--ok-bg); }
.next { padding: .85rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--well); }
.next strong { display: block; }
.next .note { margin: .2rem 0 0; }
.next .primary { margin-top: .8rem; }
.next .copy { margin-top: .6rem; }
#owner .copy + .note, #connector + .note { margin-top: .8rem; }
#owner > .note { margin-bottom: .45rem; }
.ask { margin: 1rem 0 0; }

/* The signing page. */
code, pre, textarea, .mono { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* What a request is: label and value rows. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 1rem 0 0;
         border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .93rem; }
.facts dt, .facts dd { padding: .5rem .8rem; border-top: 1px solid var(--line); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.facts:empty { display: none; }
/* The exact text the wallet signs: monospace, wrapped, scrolls when long. */
pre.message, pre.result {
  margin: 0; padding: .75rem .85rem; max-height: 15rem; overflow: auto; white-space: pre-wrap;
  overflow-wrap: anywhere; color: var(--fg); background: var(--well); border: 1px solid var(--line);
  border-radius: 12px;
}
pre.result { margin-top: 1rem; color: var(--muted); }
textarea {
  display: block; width: 100%; min-height: 9rem; padding: .75rem .85rem; color: var(--fg);
  background: var(--well); border: 1px solid var(--line); border-radius: 12px; resize: vertical;
}
/* A value to copy: the text and its Copy button. */
.copy { display: flex; align-items: flex-start; gap: 8px; }
.copy button { min-height: 2.6rem; }
.copy.main { flex-direction: column; align-items: stretch; }
.copy.main textarea { flex: none; }
.copy.main button { padding: .75rem; font-size: 1rem; }
.copy textarea { min-height: 0; height: auto; flex: 1; min-width: 0; resize: none; overflow: hidden; }
.copy textarea.short { white-space: nowrap; overflow-x: auto; }
.copy button {
  flex: none; padding: 0 .9rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.copy button:hover { background: var(--hover); }
.copy.main textarea { font-size: 12px; }
.copy.main button { color: var(--btn-fg); background: var(--btn); border-color: var(--btn); }
/* The QR code: always dark on white, so a phone scans it in dark mode too. */
.qr-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1rem; }
svg.qr { display: block; width: 100%; max-width: 13rem; height: auto; padding: 10px; background: #fff;
         border-radius: 14px; border: 1px solid var(--line); }
.qr-tile .note { text-align: center; }
details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details[open] summary { margin-bottom: .6rem; }
details h2:first-of-type { margin-top: .75rem; }
/* A request not to sign: the card itself says so. */
main.alarm { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 10px 30px rgba(196, 18, 47, .15); }
main.alarm pre.message { border-color: var(--err-bg); }
.actions > .secondary:first-child, .actions > .primary:first-child { margin-top: 1rem; }