/* Lynx paper wallet: site styling, loaded after wallet-scoped.css.
   Anything meant to be printed or scanned (keys, QR codes, paper wallets) sits on white paper. */

.lpw-app {
  --lpw-paper: #ffffff;
  --lpw-ink: #0b1220;
  --lpw-radius: var(--lx-radius-sm, 10px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

/* ---------- Status ---------- */
.lpw-status {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  list-style: none;
  background-color: var(--lx-surface, #0f1626);
  border: 1px solid var(--lx-line, rgba(148,163,196,.16));
  border-radius: var(--lpw-radius);
}
.lpw-status li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lx-muted, #8a97b0);
}
.lpw-status strong { color: var(--lx-white, #f5f7fc); }
.lpw-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--lx-muted, #8a97b0);
  transform: translateY(1px);
}
.lpw-status li[data-state="good"] .lpw-status-dot { background-color: var(--lx-accent, #a3e635); }
.lpw-status li[data-state="warn"] .lpw-status-dot { background-color: #fbbf24; }
.lpw-status li[data-state="bad"] .lpw-status-dot { background-color: #f87171; }
.lpw-status li[data-state="busy"] .lpw-status-dot { animation: lpw-pulse 1.2s ease-in-out infinite; }
@keyframes lpw-pulse { 50% { opacity: .3; } }

.lpw-unsupported-note { display: none; }
.lpw-app.lpw-unsupported .lpw-unsupported-note { display: block; }
.lpw-app.lpw-unsupported .lpw { display: none; }

/* ---------- Connection banner ---------- */
.lpw-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 18px;
  padding: 20px 22px;
  background-color: var(--lx-surface, #0f1626);
  border: 1px solid var(--lx-line, rgba(148,163,196,.16));
  border-radius: var(--lpw-radius);
}
.lpw-banner[data-state="warn"] { background-color: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .5); }
.lpw-banner[data-state="good"] { background-color: rgba(var(--lx-accent-rgb, 163,230,53), .08); border-color: rgba(var(--lx-accent-rgb, 163,230,53), .5); }
.lpw-banner-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--lx-muted, #8a97b0);
  box-shadow: 0 0 0 6px rgba(138, 151, 176, .15);
}
.lpw-banner[data-state="warn"] .lpw-banner-icon { background-color: #fbbf24; box-shadow: 0 0 0 6px rgba(251, 191, 36, .18); animation: lpw-pulse 1.6s ease-in-out infinite; }
.lpw-banner[data-state="good"] .lpw-banner-icon { background-color: var(--lx-accent, #a3e635); box-shadow: 0 0 0 6px rgba(var(--lx-accent-rgb, 163,230,53), .18); }
.lpw-banner[data-state="busy"] .lpw-banner-icon { animation: lpw-pulse 1.2s ease-in-out infinite; }
.lpw-banner-body { min-width: 0; }
.lpw-banner-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--lx-white, #f5f7fc); }
.lpw-banner-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--lx-muted, #8a97b0); }
.lpw-banner-btn {
  min-height: 42px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #05070d;
  background: var(--lx-grad, linear-gradient(100deg, #22d3ee, #8b5cf6));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.lpw-banner-btn:hover { color: #05070d; filter: brightness(1.08); }
.lpw-banner-btn:focus-visible { outline: 2px solid var(--lx-primary, #22d3ee); outline-offset: 2px; }
.lpw-banner-btn[hidden] { display: none; }
/* The banner says this now; the status list keeps the offline-copy and self-test lines. */
.lpw-status #lpw-status-net { display: none; }
@media (max-width: 767px) {
  .lpw-banner { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .lpw-banner-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Layout: undo the stand-alone page frame ---------- */
.lpw {
  /* The stand-alone page clipped overflow on <body>; here that cut off the left edge and focus ring of fields. */
  overflow: visible;
  background: none;
  font-family: inherit;
  color: var(--lx-white, #f5f7fc);
  text-align: left;
  min-width: 0;
}
.lpw .layout { display: block; min-height: 0; padding-left: 0; }
.lpw .sidebar { position: static; display: block; height: auto; width: auto; padding: 0; background: none; }
.lpw #main { width: auto; margin: 0; text-align: left; }
.lpw a { position: static; color: var(--lx-primary, #22d3ee); }
.lpw .chainmenu,
.lpw #chainpicker,
.lpw #culturemenu,
.lpw .footer,
.lpw #seedpoolarea,
.lpw #bulkwallet,
.lpw #vanitywallet,
.lpw #splitwallet,
.lpw #brainwallet { display: none; }

/* ---------- Tabs ---------- */
.lpw .menu,
.lpw #menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 100%;
  padding: 0;
  list-style: none;
  width: auto;
}
.lpw .menu .tab {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: 0 18px;
  font-family: var(--lx-font-mono, monospace);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--lx-white, #f5f7fc);
  background-color: var(--lx-surface-2, #141d31);
  border: 1px solid var(--lx-line, rgba(148,163,196,.16));
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  width: auto;
  height: auto;
  top: 0;
}
.lpw .menu .tab:hover { color: var(--lx-primary, #22d3ee); border-color: var(--lx-primary, #22d3ee); background-color: var(--lx-surface-2, #141d31); }
.lpw .menu .tab:focus-visible { outline: 2px solid var(--lx-primary, #22d3ee); outline-offset: 2px; }
.lpw .menu .tab.selected,
.lpw .menu .tab.selected:hover {
  color: #05070d;
  background: var(--lx-grad, linear-gradient(100deg, #22d3ee, #8b5cf6));
  border: 1px solid transparent;
  font-weight: 600;
}

/* ---------- Gathering randomness ---------- */
.lpw #generate {
  height: auto;
  padding: 28px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  color: var(--lx-muted, #8a97b0);
  background-color: var(--lx-surface, #0f1626);
  border: 1px dashed var(--lx-primary, #22d3ee);
  border-radius: var(--lpw-radius);
}
.lpw #generate span { padding: 0; }
.lpw #generatelabelbitcoinaddress { font-size: 18px; font-weight: 600; color: var(--lx-white, #f5f7fc); }
.lpw #mousemovelimit { font-family: var(--lx-font-mono, monospace); font-weight: 700; color: var(--lx-primary, #22d3ee); }
.lpw #generatekeyinput { display: block; width: 100%; margin: 10px 0 16px; }
.lpw #seedpooldisplay {
  padding: 12px;
  font-family: var(--lx-font-mono, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--lx-muted, #8a97b0);
  background-color: var(--lx-surface-2, #141d31);
  border-radius: var(--lpw-radius);
  word-break: break-all;
}
.seedpoint { position: fixed; z-index: 9999; pointer-events: none; background-color: var(--lx-primary, #22d3ee); }

/* Randomness trail: lpw-init.js sets --c (an "r,g,b" between the brand colours) and the drift --dx/--dy. */
.lpw-spark {
  position: fixed;
  z-index: 9999;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  background-color: rgb(var(--c, 34,211,238));
  box-shadow: 0 0 8px 2px rgba(var(--c, 34,211,238), .55);
  animation: lpw-spark .8s ease-out forwards;
}
.lpw-spark.is-seed {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  box-shadow: 0 0 14px 4px rgba(var(--c, 34,211,238), .6);
  animation-duration: 2.4s;
}
.lpw-spark.is-still { animation: none; }
.lpw-spark.is-out { animation: lpw-spark-out .45s ease-out forwards; }
@keyframes lpw-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.25); }
}
@keyframes lpw-spark-out { to { opacity: 0; } }

/* ---------- Controls ---------- */
.lpw .walletarea { border: 0; }
.lpw #main .commands { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0 0 18px; padding: 0; border: 0; text-align: left; }
.lpw .commands .row,
.lpw #detailbip38toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0;
  padding: 0;
}
.lpw #detailcommands { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.lpw #detailcommands > .row.extra { flex-basis: 100%; }
/* ninja.wallets.detailwallet shows and hides this row itself. */
.lpw #detailbip38commands { flex-basis: 100%; margin: 0; padding: 0; }
.lpw #detailbip38commands span { margin-right: 14px; }
.lpw .commands span,
.lpw .commands span.print,
.lpw #detailcommands span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  float: none;
  margin: 0;
  padding: 0;
}
/* Let a label and its control share a line, or wrap, rather than run off a phone screen. */
.lpw .commands span { flex-wrap: wrap; max-width: 100%; }
.lpw .commands select { min-width: 0; }
.lpw .commands label,
.lpw #detailcommands label {
  font-family: var(--lx-font-mono, monospace);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-muted, #8a97b0);
}
.lpw input[type="button"],
.lpw input.button {
  min-height: 42px;
  margin: 0;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #05070d;
  background: var(--lx-grad, linear-gradient(100deg, #22d3ee, #8b5cf6));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.lpw input[type="button"]:hover { color: #05070d; filter: brightness(1.08); }
.lpw input[type="button"]:focus-visible { outline: 2px solid var(--lx-primary, #22d3ee); outline-offset: 2px; }
.lpw input[type="button"]#singleprint,
.lpw input[type="button"]#paperprint,
.lpw input[type="button"]#detailprint {
  color: var(--lx-white, #f5f7fc);
  background: transparent;
  border: 1px solid var(--lx-line, rgba(148,163,196,.16));
  margin-top: 0;
}
.lpw input[type="button"]#singleprint:hover,
.lpw input[type="button"]#paperprint:hover,
.lpw input[type="button"]#detailprint:hover { color: var(--lx-primary, #22d3ee); border-color: var(--lx-primary, #22d3ee); filter: none; }
.lpw input[type="text"],
.lpw select {
  max-width: 100%;
  min-height: 42px;
  padding: 0 12px;
  font-family: var(--lx-font-mono, monospace);
  font-size: 14px;
  color: var(--lx-white, #f5f7fc);
  background-color: var(--lx-surface-2, #141d31);
  border: 1px solid var(--lx-line, rgba(148,163,196,.16));
  border-radius: var(--lpw-radius);
}
.lpw input[type="text"]:focus,
.lpw select:focus { outline: 2px solid var(--lx-primary, #22d3ee); outline-offset: 1px; border-color: transparent; }
.lpw input[type="text"]:disabled { opacity: .45; }
.lpw select option { color: #f5f7fc; background-color: #141d31; }
.lpw input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--lx-primary, #22d3ee); }
.lpw #paperlimit,
.lpw #paperlimitperpage { width: 72px; }
.lpw #papermessagecustom { width: 220px; }
.lpw #detailprivkey { width: min(560px, 100%); }
.lpw #detailprivkeypassphrase,
.lpw #paperpassphrase { width: 240px; }

/* ---------- White paper: keys, QR codes and wallets ---------- */
.lpw #keyarea,
.lpw #paperkeyarea,
.lpw #detailkeyarea {
  color: var(--lpw-ink);
  background-color: var(--lpw-paper);
  border-radius: var(--lpw-radius);
}
.lpw #keyarea .label,
.lpw #paperkeyarea .label,
.lpw #detailkeyarea .label { color: var(--lpw-ink); }

/* Single wallet */
.lpw #singlearea { font-size: 15px; }
.lpw #keyarea {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  height: auto;
  padding: 28px;
}
.lpw #keyarea .public,
.lpw #keyarea .private {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  padding: 0;
  float: none;
}
.lpw #keyarea .private { align-items: flex-end; text-align: right; }
.lpw #keyarea .pubaddress,
.lpw #keyarea .privwif { height: auto; margin: 0; padding: 0; float: none; }
.lpw #keyarea .qrcode_public,
.lpw #keyarea .qrcode_private { padding: 0; }
.lpw #btcaddress,
.lpw #btcprivwif {
  font-family: var(--lx-font-mono, monospace);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
}
.lpw #singleshare,
.lpw #singlesecret {
  position: static;
  float: none;
  order: -1;
  font-family: var(--lx-font-mono, monospace);
  font-size: 12px;
  letter-spacing: .12em;
}
.lpw #singleshare { color: #0e7490; }
.lpw #singlesecret { color: #dc2626; }
.lpw #singlesafety {
  margin-top: 20px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lx-muted, #8a97b0);
}
.lpw #singlesafety p { margin: 0 0 12px; }
.lpw #singlesafety b { color: var(--lx-white, #f5f7fc); }

/* Paper wallets keep their printed size; scroll sideways on small screens. */
.lpw #paperkeyarea {
  padding: 16px;
  overflow-x: auto;
  text-align: left;
}
.lpw #paperkeyarea:empty { display: none; }
.lpw #paperarea .keyarea { color: var(--lpw-ink); }

/* Wallet details */
.lpw #detailkeyarea { margin-top: 18px; padding: 24px; }
.lpw #detailarea .notes { color: #475569; }
.lpw #detailarea .output { word-break: break-all; }
.lpw #detailarea hr { border: 0; border-top: 1px dashed #cbd5e1; }
.lpw #detailarea .faqs { margin-top: 18px; }
.lpw #detailarea .question { color: var(--lpw-ink); }
.lpw #detailarea .answer { color: #334155; }

/* Busy overlay while BIP38 runs */
.lpw #busyblock.busy { background-color: rgba(5, 7, 13, .6); }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .lpw #keyarea { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .lpw #keyarea .private { align-items: flex-start; text-align: left; }
  .lpw #generate { padding: 20px; }
  .lpw #detailkeyarea { padding: 16px; overflow-x: auto; }
  .lpw .menu .tab { padding: 0 14px; }
  /* Paper wallets are a fixed 700x250 card; squeezed onto a phone the keys wrap onto more lines,
     so let the card grow to fit instead of spilling text out the bottom. Print keeps the fixed size. */
  .lpw #paperarea .artwallet { height: auto; min-height: 250px; }
  .lpw #paperarea .artwallet .artimage { object-fit: cover; }
}

/* ---------- Print: only the wallet, on plain paper ---------- */
@media print {
  .lpw-print-hide,
  .lpw-status,
  .lpw-banner,
  .lpw .menu,
  .lpw .commands,
  .lpw #detailcommands,
  .lpw #singlesafety,
  .lpw-spark,
  .seedpoint { display: none !important; }
  .lpw-print-path {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
  }
  html, body { background: #fff !important; }
  .lpw { color: #000; }
  .lpw #keyarea,
  .lpw #paperkeyarea,
  .lpw #detailkeyarea { padding: 0; border-radius: 0; overflow: visible; }
}