/*
  Styles of the BlockchainCards web page (index.html).

  Colours are named once as variables (--bg, --fg, …) and used everywhere through
  var(--name), so the dark theme only has to change the variables. The scripts add
  a few classes: "busy" on <body> while the page waits for the wallet or the
  network, and "changed" or "deleted" on cards in the grid.

  When two rules set the same property on an element, the more specific selector
  wins (an #id beats a .class, which beats a plain tag name), and between equally
  specific ones the rule further down this file wins.
*/

/* ---------------------------------------------------------------- colours */

:root {
  --bg: #f6f7f9; --fg: #16181d; --muted: #5d6470; --panel: #fff; --line: #dde1e7;
  --accent: #1f6feb; --accent-fg: #fff; --warn: #b42318; --soft: #eaf1fe;
  color-scheme: light dark;
}
/* Dark theme, used when the device is set to dark mode. */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1115; --fg: #e8eaee; --muted: #9aa1ad; --panel: #181b21; --line: #2a2f38;
    --accent: #4c8dff; --warn: #ff8a80; --soft: #1a2436; }
}

/* ---------------------------------------------------------------- page and text */

* { box-sizing: border-box; } /* sizes include padding and border */
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
header, main { max-width: 760px; margin: 0 auto; padding: 0 16px; } /* one centred column */
header { padding-top: 28px; }
/* Links to the web client and the developer guide, at the very end of the page. */
footer { max-width: 760px; margin: 32px auto; padding: 16px; text-align: center; font-size: 14px;
  color: var(--muted); border-top: 1px solid var(--line); }
footer a { color: var(--accent); }
h1 { margin: 0; font-size: 26px; }
/* The explanation under the title, with the Costs button at the right end of the same line. */
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { margin: 0 0 8px; font-size: 19px; }
.sub, .muted { color: var(--muted); }
.small { font-size: 13px; }
.warn { color: var(--warn); }
.right { text-align: right; }
/* Elements with the hidden attribute stay hidden, whatever display another rule sets. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- panels */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 16px 0; }
.panel.accent { background: var(--soft); border-color: var(--accent); } /* panels that ask for attention */
/* The picture above the connect buttons, as wide as the panel; the height follows from
   the width and height in index.html. It brings its own rounded corners. */
.hero { display: block; width: 100%; height: auto; margin: 0 0 12px; }
/* The pitch under the connect buttons, set apart from them by a line. */
.why { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.why h2 { font-size: 21px; }
.why h3 { margin: 14px 0 4px; font-size: 16px; color: var(--accent); }
.why p { margin: 0 0 8px; line-height: 1.55; }
.why ul { margin: 0; padding-left: 18px; }
.why li { margin-bottom: 10px; line-height: 1.55; }
/* The account bar above the cards: address and balance left, fee and prepaid saves right. */
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 16px 0; }
#prepaid h2 { margin-bottom: 4px; }
/* The list of paired devices: nickname and pairing date on the left, its Remove button on the right. */
.device-list { list-style: none; margin: 0; padding: 0; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.device-list button { padding: 6px 12px; font-size: 14px; }
/* "Signing with … on your phone", right under the account bar. */
#via { margin: -8px 0 16px; }

/* ---------------------------------------------------------------- buttons and links */

button { font: inherit; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button:disabled { opacity: .5; cursor: default; }
/* A button that reads as a link inside a sentence ("remove the logo"). */
button.link { padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; }
/* A link that looks like a button (the "Open in <wallet>" links). */
a.button { display: inline-block; font: inherit; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); text-decoration: none; }
/* A row of buttons, right-aligned unless it is in the vault or marked "start". */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: flex-end; }
#vault .actions { justify-content: flex-start; }
.actions.start { justify-content: flex-start; }
#wallets button { display: inline-flex; align-items: center; gap: 8px; } /* wallet icon beside the text */
/* While the page waits for the wallet or the network, no button can be pressed. */
body.busy button { pointer-events: none; opacity: .5; }
/* Except Cancel under the QR code, which stops the wait for the phone (ui/phone.js). */
body.busy #btn-phone-cancel { pointer-events: auto; opacity: 1; }

/* ---------------------------------------------------------------- phone wallet QR code */

.phone-code { margin-top: 12px; }
/* The Phantom and WalletConnect QR codes side by side, one above the other when narrow. */
.qr-pair { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.qr-col { flex: 1 1 260px; }
.qr-col h3 { margin: 0 0 4px; }
/* The QR code is a small picture, enlarged without blurring ("pixelated"), on the white
   border it brings, so phones read it in the dark theme too. */
.qr { display: block; width: 260px; max-width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; }

/* ---------------------------------------------------------------- card grid */

/* As many columns of at least 220px as fit the width. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card canvas { display: block; width: 100%; height: auto; }
.card .tools { display: flex; gap: 8px; padding: 8px; }
.card .tools button { flex: 1; padding: 6px; font-size: 14px; }
.card.changed { border-color: var(--accent); } /* edited or new, not saved yet */
.card.deleted canvas { opacity: .3; } /* marked for deletion, not saved yet */
.empty { color: var(--muted); padding: 24px 0; }

/* ---------------------------------------------------------------- save bar */

/* Sticks to the bottom of the window while the cards scroll. */
.save-bar { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.save-bar .actions { margin: 0; }
#save-summary { flex: 1 1 260px; font-size: 14px; }

/* ---------------------------------------------------------------- forms and the card editor */

label { display: block; margin: 10px 0; font-size: 14px; color: var(--muted); }
input, select { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
input[type=color] { height: 42px; padding: 2px; }
.row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; } /* code type and colour side by side */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg);
  width: min(420px, calc(100vw - 32px)); padding: 20px; }
dialog::backdrop { background: rgba(0, 0, 0, .45); } /* darkens the page behind the dialog */
#preview { display: block; margin: 8px auto; border-radius: 10px; border: 1px solid var(--line); max-width: 100%; }

/* ---------------------------------------------------------------- status line */

#status { min-height: 24px; color: var(--muted); }