/* 1999.LOC — the wallets' own faces.
 *
 * Fourth of the per-app identities, and the odd one: this window holds two
 * wallets, and they never looked remotely alike, so this file carries two
 * skins rather than one. Both are scoped under [data-app="wallet"] like
 * every other app stylesheet here; inside that, .skin-btc and .skin-xmr
 * take one panel each.
 *
 * BITCOIN CORE, as it shipped. Satoshi's original client was a wxWidgets
 * program that looked like Windows because wxWidgets drew native controls:
 * grey face, a strip of tabs across the top reading All Transactions /
 * Sent/Received / Sent / Received, the balance in bold on the right, and
 * the transaction list as a plain report with Status, Date, Description,
 * Debit, Credit. The green is the one from the original coin icon.
 *
 * MONERO GUI, as it shipped. The other direction entirely: near-black
 * panels, orange (#ff6600) as the only accent, a left rail of destinations
 * rather than tabs across the top, and everything set light-on-dark. It is
 * the first wallet most people met that did not try to look like the
 * operating system.
 *
 * Neither skin touches the window frame or the taskbar; those stay the
 * desktop's, which is the point. The machine is 1999 and the programs
 * running on it are whatever they are.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="wallet"] .app-window > .wl-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  /* Stated, not inherited: outside the panels, so it would otherwise come
     out in the page's serif. */
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #000000;
}
[data-app="wallet"] .app-window > .wl-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  /* A thumb needs a target; 20px of span was most of why Help felt
     like it did not work. */
  min-height: 26px;
}

/* ---- the wallet switcher -------------------------------------------
   Not a tab strip. Two of these open a wallet and one is a tool that
   needs no wallet at all, and three peer tabs said otherwise. Labelling
   the groups is what turns it into the program saying which wallet is
   open, which is the job a File menu does in a real one. */
[data-app="wallet"] .app-window > [data-tabs] > .wl-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 7px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  box-shadow: inset 0 1px 0 #ffffff;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #000000;
}
[data-app="wallet"] .wl-switch-label {
  padding-right: 3px;
  color: #4a4a4a;
  font-weight: bold;
}
[data-app="wallet"] .wl-switch-sep {
  align-self: stretch;
  width: 0;
  margin: 0 8px;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
}
[data-app="wallet"] .wl-switch .sheet-tab {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 3px;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
[data-app="wallet"] .wl-switch .sheet-tab:hover:not(.is-active) { background: #e2dfd8; }
/* The selected coin lights up in that coin's own colour, the way the panel
   tabs below already do, so the toolbar says which wallet you are in at a
   glance rather than by a faint pressed-in bevel. */
[data-app="wallet"] .wl-switch .sheet-tab.is-active { font-weight: bold; }
[data-app="wallet"] .wl-switch .sheet-tab[data-tab="wallet"].is-active {
  background: #ff6600; border-color: #c44f00; color: #201400;
}
[data-app="wallet"] .wl-switch .sheet-tab[data-tab="btc"].is-active {
  background: #f7931a; border-color: #b96b0e; color: #201400;
}
[data-app="wallet"] .wl-switch .sheet-tab:focus-visible { outline: 1px dotted #000000; outline-offset: -3px; }

/* Swap is the next program along rather than a panel of this one, so it
   never takes the pressed-in look the tabs do: it is a place to go, not a
   place you are. The arrow is the whole difference and it is enough. */
[data-app="wallet"] .wl-switch .wl-go {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 3px;
  color: #000000;
  text-decoration: none;
  line-height: 1.35;
}
[data-app="wallet"] .wl-switch .wl-go::after {
  content: " \2192";
  color: #4a4a4a;
}
[data-app="wallet"] .wl-switch .wl-go:hover { background: #e8e6e0; }

/* ---- the connection, in the toolbar --------------------------------
   The node was a folded box near the bottom of the panel. It is the one
   setting the wallet cannot work without, so it sits in the bar with the
   wallet switcher, always open, and the ! opens what it means.

   Which one shows follows the open panel. No script: the panel already
   carries its own name, so :has() can read it from here. */
[data-app="wallet"] .wl-node { display: none; }
[data-app="wallet"] [data-tabs]:has(> .app-body > [data-panel="wallet"]:not(.hidden)) #node-box,
[data-app="wallet"] [data-tabs]:has(> .app-body > [data-panel="btc"]:not(.hidden)) #btc-server-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /* Next to the tools rather than flung to the far edge of the bar. On a
     display this wide, margin-left:auto put the one control the wallet
     cannot work without a thousand pixels from everything else you press,
     which is a different way of hiding it. A separator does the grouping
     that the space was doing. */
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid #808080;
}
/* A control and the ! that explains it travel together.
   The ! was its own flex item, so on a phone the bar ran out of width
   after the select and carried a single 20px button onto a line of its
   own: a whole extra row of toolbar for one character. Grouped, it rides
   at the end of the select's line and the select gives up the width
   instead, which it can afford because it is showing a hostname and not
   a sentence. */
[data-app="wallet"] .wl-pick {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* The label never gives up width; the select is the only thing in the
   group that shrinks. Letting both shrink squeezed "Node" against the
   control it names. */
[data-app="wallet"] .wl-pick > .wl-node-label { flex: 0 0 auto; }
[data-app="wallet"] .wl-pick > .wl-info { flex: 0 0 auto; }
[data-app="wallet"] .wl-pick select {
  flex: 0 1 auto;
  min-width: 0;
  /* The shared cap is for a select standing alone; inside a group the
     flexbox already stops it and the cap would only truncate it early. */
  max-width: none;
}

[data-app="wallet"] .wl-node-label {
  color: #4a4a4a;
  font-weight: bold;
  font-size: 11px;
}
[data-app="wallet"] .wl-node select,
[data-app="wallet"] .wl-node input[type="text"] {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  max-width: 40vw;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #ffffff;
  color: #000000;
}
/* The ! that opens the explanation the folded box used to hold. A button,
   not a span: a span with a hover style takes two taps on iOS, and the
   first one does nothing, which reads as broken. */
[data-app="wallet"] .wl-info {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  cursor: pointer;
  touch-action: manipulation;
}
[data-app="wallet"] .wl-info:active { border-style: inset; }
[data-app="wallet"] .wl-node-note:empty { display: none; }
[data-app="wallet"] .wl-node-note {
  font-size: 11px;
  color: #6a4a00;
}

/* ---- what to do on this screen -------------------------------------
   One line at the top of each panel saying what the screen is for. The
   panels used to open on a tagline in the page's serif, which read as a
   sentence about the program rather than an instruction to the person
   using it. Each skin colours it; the shape is shared. */
[data-app="wallet"] .app-body .wl-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px 0;
  padding: 6px 9px;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
}
/* Past .app-body p, which is an attribute plus a class plus an element
   and would otherwise paint this strip in the chrome ink. */
[data-app="wallet"] .app-body .wl-hint,
[data-app="wallet"] .app-body .wl-hint * { color: #000000; }
[data-app="wallet"] .app-body .wl-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- a measure for the controls ------------------------------------
   The window is the whole display now. A wallet laid out across 1400px
   is a row of small controls with a field of nothing beside them, and a
   line of explanation under a field runs far past the field it explains.
   So the program keeps its own width and sits at the left of the glass,
   the way a wallet window did when you could still resize it. */
[data-app="wallet"] .wl-col { max-width: 620px; }
[data-app="wallet"] [data-panel] > p,
[data-app="wallet"] [data-panel] > div > p,
[data-app="wallet"] [data-panel] > div > div > p { max-width: 620px; }
[data-app="wallet"] [data-panel] textarea,
[data-app="wallet"] [data-panel] input[type="text"] { width: 100%; max-width: 560px; box-sizing: border-box; }
/* A folded box is a line of text with an x on the end of it, and stretched
   to the full width of a modern display that x ends up somewhere else
   entirely. Wider than the prose measure, because these open onto tables. */
[data-app="wallet"] [data-panel] details,
[data-app="wallet"] [data-panel] .notice-box { max-width: 820px; }
/* Except the evidence table, which is hex and will not narrow: it scrolls
   inside its own box rather than pushing the window sideways. */
[data-app="wallet"] .wl-proof #proof-checks { overflow-x: auto; }

/* ---- the wallet, and the checker beside it -------------------------
   The address checker was a third tab, which put it beside the wallets
   rather than in them: checking an address is something you want to do
   while you are looking at a wallet, and it meant leaving the one you
   were in. It handles no secrets and makes no request, so it costs
   nothing to leave sitting open, and both wallets had most of a display
   of nothing to the right of them.

   One column on a phone, where the wallet comes first and the checker is
   under it. Two side by side once there is room, which on a case that
   fills the display is nearly always. */
[data-app="wallet"] .wl-split { display: block; }
@media (min-width: 900px) {
  [data-app="wallet"] .wl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }
}
[data-app="wallet"] .wl-main { min-width: 0; }

/* What goes in that column depends on whether a wallet is open.
   With one open it is the transaction log, which used to be a tab you had
   to press while an entire column sat empty beside it: a wallet program
   shows you what it has done without being asked. With none open it is
   the checker, which is when a loose address is the thing you actually
   arrived with. The column is never idle and neither thing needs a tab.

   :has(), not script. The wallet blocks already carry .hidden, so the
   panel can read its own state from here. A browser without :has() shows
   both, one under the other, which is the old arrangement and readable. */
[data-app="wallet"] [data-panel="wallet"] .wl-split:has(#wallet:not(.hidden)) .wl-check,
[data-app="wallet"] [data-panel="btc"] .wl-split:has(#btc-wallet:not(.hidden)) .wl-check { display: none; }
[data-app="wallet"] [data-panel="wallet"] .wl-split:has(#wallet.hidden) .wl-log,
[data-app="wallet"] [data-panel="btc"] .wl-split:has(#btc-wallet.hidden) .wl-log { display: none; }

/* The line at the top of the screen follows the same state. Telling somebody
   with a wallet open to make one is worse than saying nothing. */
[data-app="wallet"] .wl-hint-open { display: none; }
[data-app="wallet"] [data-panel="wallet"]:has(#wallet:not(.hidden)) .wl-hint-setup,
[data-app="wallet"] [data-panel="btc"]:has(#btc-wallet:not(.hidden)) .wl-hint-setup { display: none; }
[data-app="wallet"] [data-panel="wallet"]:has(#wallet:not(.hidden)) .wl-hint-open,
[data-app="wallet"] [data-panel="btc"]:has(#btc-wallet:not(.hidden)) .wl-hint-open { display: flex; }
[data-app="wallet"] .wl-side { min-width: 0; }
[data-app="wallet"] .wl-side h3 { margin-top: 0; }
/* The panel has its own width, so the shared 620px measure would be a
   second cap inside a narrower box and leave the text short of the edge. */
[data-app="wallet"] .wl-side p,
[data-app="wallet"] .wl-side details,
[data-app="wallet"] .wl-side .notice-box { max-width: none; }
[data-app="wallet"] .wl-side textarea { max-width: none; }
@media (min-width: 900px) {
  /* Boxed on a wide screen, where it reads as a panel of the window. On a
     phone it is simply the next thing down the page and a border round it
     is one more line to look at. */
  [data-app="wallet"] .wl-side { padding: 10px; }
}

/* The skin is the program, so it takes the whole window rather than
   stopping at its last paragraph and leaving the desktop showing under
   it. */
[data-app="wallet"] .app-body { display: flex; flex-direction: column; }
[data-app="wallet"] .app-body > [data-panel] { flex: 1 1 auto; }

/* Not shown, moved: warn.js lifts these into dialogs. Without scripting
   they stay where they are and read down the page as they always did. */
[data-app="wallet"] .warn-sources > .warn-source { margin: 12px 0; }

/* ==================================================================
   BITCOIN CORE
   ================================================================== */

[data-app="wallet"] .skin-btc {
  background: #d4d0c8;
  border: 2px inset #d4d0c8;
  padding: 8px;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #000000;
}
[data-app="wallet"] .skin-btc h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: #000000;
}
[data-app="wallet"] .skin-btc p,
[data-app="wallet"] .skin-btc label,
[data-app="wallet"] .skin-btc li {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}

/* The tab strip across the top of the window, which is where the client
   kept All Transactions / Sent/Received / Sent / Received. */
[data-app="wallet"] .skin-btc .sheet-tab {
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
}
[data-app="wallet"] .skin-btc .sheet-tab.is-active {
  border-color: #808080 #ffffff #ffffff #808080;
  background: #ece9d8;
  font-weight: bold;
}

/* The hint strip: the pale yellow a Windows program used for a tip, with
   the grey rules a groupbox had. */
[data-app="wallet"] .skin-btc .wl-hint {
  background: #ffffe1;
  border: 1px solid #808080;
  color: #000000;
}
[data-app="wallet"] .skin-btc .wl-hint-mark { background: #000080; color: #ffffff; }

/* The checker beside the wallet, as a groupbox: the sunken panel a
   wxWidgets program put a related set of controls in. */
@media (min-width: 900px) {
  [data-app="wallet"] .skin-btc .wl-side {
    background: #ece9d8;
    border: 2px groove #ffffff;
  }
}
[data-app="wallet"] .skin-btc .wl-side h3 { color: #000080; }
[data-app="wallet"] .skin-btc .btc-verdict.is-ok strong { color: #1a7a3a; }
[data-app="wallet"] .skin-btc .btc-verdict.is-bad strong { color: #a01010; }

/* The balance. Bold, large, and the one green thing in the window. */
[data-app="wallet"] .skin-btc .xmr-balance {
  display: inline-block;
  padding: 3px 10px;
  background: #ffffff;
  border: 2px inset #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #1a7a3a;
}

[data-app="wallet"] .skin-btc code,
[data-app="wallet"] .skin-btc input[type="text"],
[data-app="wallet"] .skin-btc textarea {
  font-family: "Courier New", Courier, monospace;
  border: 2px inset #d4d0c8;
  background: #ffffff;
}
[data-app="wallet"] .skin-btc button:not(.notice-x) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
}
[data-app="wallet"] .skin-btc button:active { border-style: inset; }

/* ==================================================================
   MONERO GUI
   ================================================================== */

[data-app="wallet"] .skin-xmr {
  background: #1e1e1e;
  border: 2px inset #4a4a4a;
  padding: 10px;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #d8d8d8;
}
[data-app="wallet"] .skin-xmr h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: #ff6600;
  border-bottom: 1px solid #3a3a3a;
  padding-bottom: 3px;
}
[data-app="wallet"] .skin-xmr p,
[data-app="wallet"] .skin-xmr label,
[data-app="wallet"] .skin-xmr li,
[data-app="wallet"] .skin-xmr td,
[data-app="wallet"] .skin-xmr th {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #d8d8d8;
}
[data-app="wallet"] .skin-xmr .note { color: #9a9a9a; }
[data-app="wallet"] .skin-xmr strong { color: #f0f0f0; }
[data-app="wallet"] .skin-xmr a { color: #ff9a4d; }

/* The rail. The GUI put its destinations down the left in a column, not
   across the top, which is most of why it did not look like anything
   else on the machine. The existing buttons are the destinations, so
   they are turned on their side rather than replaced. */
[data-app="wallet"] .skin-xmr > .tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 10px 0;
  padding: 0 0 8px 0;
  border-bottom: 1px solid #3a3a3a;
}
[data-app="wallet"] .skin-xmr .sheet-tab {
  border: 1px solid #3a3a3a;
  background: #2a2a2a;
  color: #c8c8c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 4px 12px;
}
[data-app="wallet"] .skin-xmr .sheet-tab:hover { background: #333333; color: #ffffff; }
[data-app="wallet"] .skin-xmr .sheet-tab.is-active {
  background: #ff6600;
  border-color: #ff6600;
  color: #1a1a1a;
  font-weight: bold;
}

/* The hint strip, in the GUI's own grammar: a darker panel with the orange
   marking its left edge, which is how that wallet flagged anything it
   wanted read. */
[data-app="wallet"] .skin-xmr .wl-hint {
  background: #242424;
  border: 1px solid #3a3a3a;
  border-left: 3px solid #ff6600;
  color: #d8d8d8;
}
[data-app="wallet"] .skin-xmr .wl-hint-mark { background: #ff6600; color: #1a1a1a; }

/* The checker beside the wallet, in the GUI's grammar: a slightly lifted
   panel with the orange marking its edge, the same way the hint strip and
   the balance are marked. */
@media (min-width: 900px) {
  [data-app="wallet"] .skin-xmr .wl-side {
    background: #242424;
    border: 1px solid #3a3a3a;
    border-top: 2px solid #ff6600;
  }
}
[data-app="wallet"] .skin-xmr .wl-side h3 { border-bottom-color: #3a3a3a; }

/* The balance, in the orange, which is the one thing the GUI shouted. */
[data-app="wallet"] .skin-xmr .xmr-balance {
  display: inline-block;
  padding: 4px 12px;
  background: #141414;
  border: 1px solid #3a3a3a;
  border-left: 3px solid #ff6600;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #ff6600;
}

[data-app="wallet"] .skin-xmr code,
[data-app="wallet"] .skin-xmr input[type="text"],
[data-app="wallet"] .skin-xmr input[type="number"],
[data-app="wallet"] .skin-xmr input[type="password"],
[data-app="wallet"] .skin-xmr textarea,
[data-app="wallet"] .skin-xmr select {
  font-family: "Courier New", Courier, monospace;
  border: 1px solid #3a3a3a;
  background: #141414;
  color: #e8e8e8;
}
[data-app="wallet"] .skin-xmr button:not(.notice-x) {
  border: 1px solid #4a4a4a;
  background: #333333;
  color: #e8e8e8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
}
[data-app="wallet"] .skin-xmr button:hover:not(:disabled) { background: #3d3d3d; }
[data-app="wallet"] .skin-xmr button:active:not(:disabled) { background: #ff6600; color: #1a1a1a; }
[data-app="wallet"] .skin-xmr button:disabled { opacity: 0.45; cursor: default; }

/* The boxes the tool draws into. Left dark rather than inheriting the
   page's white, or a warning in the middle of the wallet is a white
   rectangle with a hole punched in the window. */
[data-app="wallet"] .skin-xmr .notice-box,
[data-app="wallet"] .skin-xmr details,
[data-app="wallet"] .skin-xmr table {
  background: #242424;
  border-color: #3a3a3a;
  color: #d8d8d8;
}
[data-app="wallet"] .skin-xmr .notice-box strong { color: #ffb066; }
/* A table's row headings come with a #f0f0f0 background from the base
   stylesheet, which was invisible while this table only ever appeared on
   white paper. The checker moved into the wallet, and on a near-black
   panel a light heading colour over a light background is a row you
   cannot read at all. Both ends stated. */
[data-app="wallet"] .skin-xmr th[scope="row"] {
  background: #1a1a1a;
  color: #c8c8c8;
}
[data-app="wallet"] .skin-xmr td { background: #242424; }
[data-app="wallet"] .skin-xmr th,
[data-app="wallet"] .skin-xmr td { border-color: #3a3a3a; }
/* A disclosure heading inherits its colour from the page, which on a dark
   panel means black text on near-black. Every one of these opens something
   worth reading, so they are the last thing that should be invisible. */
[data-app="wallet"] .skin-xmr summary,
[data-app="wallet"] .skin-xmr details > summary strong { color: #e8e8e8; }
[data-app="wallet"] .skin-xmr .notice-box > summary,
[data-app="wallet"] .skin-xmr .notice-box > summary strong { color: #ffb066; }
[data-app="wallet"] .skin-xmr hr { border-color: #3a3a3a; }
[data-app="wallet"] .skin-xmr .status { color: #8fd08f; }
[data-app="wallet"] .skin-xmr .error { color: #ff8a8a; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 700px) {
  [data-app="wallet"] .skin-btc,
  [data-app="wallet"] .skin-xmr { padding: 6px; }
  [data-app="wallet"] .skin-xmr .xmr-balance { font-size: 18px; }
  [data-app="wallet"] .skin-btc .xmr-balance { font-size: 17px; }
  [data-app="wallet"] .app-window > .wl-menu span { padding: 2px 5px; }
}

/* ==================================================================
   THE ADDRESS CHECKER
   ==================================================================

   Not a wallet and not skinned as one: it is the page's own tool, on
   paper, the way a utility that handles no secrets should look next to
   two programs that do.
   ================================================================== */

[data-app="wallet"] [data-panel="addresses"] {
  background: #ffffff;
  border: 2px inset #d4d0c8;
  padding: 10px;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
}
[data-app="wallet"] [data-panel="addresses"] .wl-hint {
  background: #ffffe1;
  border: 1px solid #808080;
  color: #000000;
}
[data-app="wallet"] [data-panel="addresses"] .wl-hint-mark { background: #000080; color: #ffffff; }
[data-app="wallet"] [data-panel="addresses"] h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 13px;
  margin: 12px 0 6px 0;
}
[data-app="wallet"] [data-panel="addresses"] p,
[data-app="wallet"] [data-panel="addresses"] label,
[data-app="wallet"] [data-panel="addresses"] li {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
}
[data-app="wallet"] [data-panel="addresses"] .sheet-tab {
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
}
[data-app="wallet"] [data-panel="addresses"] .sheet-tab.is-active {
  border-color: #808080 #ffffff #ffffff #808080;
  background: #ece9d8;
  font-weight: bold;
}
[data-app="wallet"] [data-panel="addresses"] button:not(.sheet-tab):not(.notice-x) {
  border: 2px outset #d4d0c8;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
}
[data-app="wallet"] [data-panel="addresses"] button:not(.sheet-tab):active { border-style: inset; }

/* The nine checks are the evidence for a claim, not the claim, so they
   fold. Open, the table is wide and monospaced and wants the window; the
   620px measure the controls keep would squash it. */
[data-app="wallet"] .wl-proof { margin: 10px 0; }
[data-app="wallet"] .wl-proof > p { max-width: 620px; }
[data-app="wallet"] .wl-proof table { width: 100%; font-size: 11px; }

/* ---- the paper wallet's steps --------------------------------------
   They were folded behind a disclosure triangle called "The two checks",
   which put the instructions for doing this safely one click further away
   than the button that does it unsafely. They are the tool now: a
   numbered list you work down, with the controls sitting at step two. */
[data-app="wallet"] .wl-steps {
  margin: 0 0 14px 0;
  padding-left: 22px;
  max-width: 820px;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
}
[data-app="wallet"] .wl-steps > li { margin: 0 0 7px 0; padding-left: 3px; }
[data-app="wallet"] .wl-steps > li::marker { font-weight: bold; color: #000080; }

/* Which coin the generator is making. */
[data-app="wallet"] .wl-coin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 14px 0 10px 0;
  padding-top: 10px;
  border-top: 1px solid #808080;
}

/* ---------------------------------------------------------------- vault tab
 *
 * The panel that holds nothing. A file picker, a code, and three buttons that
 * change how fast it plays. Styled as plainly as the rest of the window
 * because it is not a wallet and should not look like one.
 */
[data-app="wallet"] .wl-file {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid #808080;
  border-top-color: #dfdfdf;
  border-left-color: #dfdfdf;
  background: #d4d0c8;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11.5px;
}
[data-app="wallet"] .wl-file input { display: block; margin-top: 6px; }

[data-app="wallet"] .wl-vw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px 0;
}

/* The code itself. White behind it always, whatever the window's chrome does:
 * a QR on a grey ground reads worse, and a phone camera pointed at a monitor
 * across a room is already the hard case. Sized in `min()` so it fills a
 * narrow screen and stops growing on a wide one, because a code larger than
 * the camera's frame is a code that has to be backed away from. */
[data-app="wallet"] .wl-vw-code {
  display: inline-block;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #808080;
  line-height: 0;
}
[data-app="wallet"] .wl-vw-code svg {
  display: block;
  width: min(360px, 78vw);
  height: auto;
  image-rendering: pixelated;
}