/* Bids Vault. Same palette, type and spacing as the terminal, so it reads as one product.
   No web fonts: the CSP forbids external stylesheets, which is deliberate, so Inter is used when the
   device has it and the system stack takes over when it does not. */
:root {
  --bg:        #0a0a0b;
  --surface:   #0f1013;
  --raised:    #16181d;
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text:      #e9edf1;
  --muted:     #8b95a3;
  --brand:     #6de0c9;
  --brand-2:   #8feddb;
  --brand-soft: rgba(109, 224, 201, 0.10);
  --brand-line: rgba(109, 224, 201, 0.34);
  --danger:    #f23645;
  --good:      #089981;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The screen is the terminal's pop up card: black, a lit hairline along the top, a soft glow under
   it. The sign in modal, the home screen card and this window are the three things people meet on
   the way to a first trade, and they read as one object. */
#app {
  max-width: 27rem;
  margin: 1.5rem auto;
  padding: 1.6rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  position: relative;
  background:
    radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,255,255,0.055), transparent 60%),
    radial-gradient(ellipse 90% 90% at 50% 60%, transparent 55%, rgba(0,0,0,0.55) 100%),
    var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 100px -40px rgba(0,0,0,1);
}
#app::after {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  pointer-events: none;
}
body { background: #050506; }

/* The wordmark sits on the container, not inside any one screen, so its position never shifts as
   dialogs replace each other. Every screen opens with the mark in exactly the same place. */
#app::before {
  content: "";
  display: block;
  width: 98px;
  height: 26px;
  background: url("/assets/bids-wordmark.png") left center / contain no-repeat;
  opacity: .92;
  margin-bottom: .35rem;
}

h1 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .1rem;
}

/* No icon beside the title: the wordmark already identifies the window, and an emoji next to it
   rendered differently on every platform, which is the opposite of consistent. */

p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}

/* Anything showing an address, an amount or an id uses the terminal's mono, so figures line up. */
p code, .mono { font-family: var(--mono); font-size: .82rem; color: var(--text); }

label { display: flex; flex-direction: column; gap: .3rem; margin-top: .45rem; }
label span { font-size: .76rem; color: var(--muted); letter-spacing: .01em; }

input {
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input[type="file"] { padding: .5rem; color: var(--muted); font-size: .82rem; }

button {
  margin-top: .45rem;
  padding: .62rem .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--raised);
  color: var(--text);
  font: 500 .88rem/1 var(--sans);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
button:hover { border-color: var(--brand-line); }
button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #06110e;
  font-weight: 600;
}
button.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* Everything that matters happens in this window, so it should never look like a web page dialog. */
@media (min-width: 480px) {
  #app { padding-top: 2rem; }
}

/* Info mark with a hover card, for the recommended process beside a title. */
h1 .info { position: relative; display: inline-block; margin-left: 10px; vertical-align: middle; outline: none; }
.info-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); font: italic 700 11px/1 Georgia, serif; cursor: default; }
.info-tip { position: absolute; top: calc(100% + 8px); left: 0; width: 280px; padding: 10px 12px; border-radius: 10px;
  background: #0f0f11; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.8);
  font: 400 12.5px/1.5 -apple-system, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; z-index: 10; }
.info:hover .info-tip, .info:focus .info-tip { opacity: 1; transform: none; }

/* Choice screens: one option per button, label above a smaller hint. */
button.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; margin-bottom: 8px; }
button.choice small { font-weight: 400; opacity: .75; font-size: 12px; }

/* The recovery key. Numbered and monospaced, two columns, so it can be read down a column while
   writing it out. A mint border because it is the one thing on this screen that matters. */
.keygrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin-top: .5rem; padding: .7rem .8rem;
  background: var(--surface); border: 1px solid var(--brand-line); border-radius: .6rem;
  user-select: text;
}
.kw { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: .84rem; }
.kw span { color: var(--muted); font-size: .68rem; min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.kw b { font-weight: 500; color: var(--text); letter-spacing: .02em; }

/* A private key on screen. Wraps anywhere, selectable, the same lit border as the recovery key. */
.secretbox {
  margin-top: .5rem; padding: .7rem .8rem;
  background: var(--surface); border: 1px solid var(--brand-line); border-radius: .6rem;
  user-select: text;
}
.secretbox code { display: block; font-family: var(--mono); font-size: .8rem; line-height: 1.55; color: var(--text); word-break: break-all; overflow-wrap: anywhere; }

/* Check you have it: three slots, four options at a time. */
.slots { display: flex; gap: 8px; margin-top: .5rem; }
.slot {
  flex: 1; padding: .55rem; text-align: center; border-radius: .5rem;
  background: var(--surface); border: 1px dashed var(--line); color: var(--muted);
  font-family: var(--mono); font-size: .8rem;
}
.slot.filled { border-style: solid; border-color: var(--brand-line); background: var(--brand-soft); color: var(--text); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: .5rem; }
button.opt { margin: 0; font-family: var(--mono); }

/* The quiet way out: a link's weight, never a button's. */
button.quiet { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
button.quiet:hover { color: var(--text); border-color: transparent; }

textarea {
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .5rem;
  background: var(--surface); color: var(--text); font: .84rem/1.5 var(--mono); resize: vertical;
}
textarea:focus { outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }

/* On a phone the column is the screen. Inputs at 16px so iOS does not zoom the page when one is
   focused; buttons at a thumb's height; the safe areas respected as a home screen app. */
@media (max-width: 600px) {
  #app { max-width: none; margin: calc(.75rem + env(safe-area-inset-top, 0px)) .6rem calc(.75rem + env(safe-area-inset-bottom, 0px)); padding: 1.4rem 1rem 1.25rem; }
  h1 { font-size: 1.35rem; }
  p { font-size: .95rem; line-height: 1.5; }
  label span { font-size: .84rem; }
  input, textarea { font-size: 16px; padding: .75rem .8rem; }
  button { min-height: 46px; font-size: 1rem; }
  .kw { font-size: .95rem; }
  .slot { font-size: .9rem; }
}
/* The password manager's username field: present for it, invisible to everyone else. */
label.tick { flex-direction: row; align-items: center; gap: .55rem; cursor: pointer; }
label.tick input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--brand); }
label.tick span { font-size: .84rem; color: var(--text, inherit); }
label.pm-user { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* Bids glass, the same three colours as the app, drawn so there are no joins. Options and quiet links stay plain. */
button {
  --g: 190,210,206; --top: #f2f7f6; --lo: #dfe8e6; --face: 10%; --face2: 5%;
  box-sizing: border-box; min-height: 40px; padding: 0 1.2rem; border: 1.5px solid transparent; border-radius: 999px; color: #eef5f3; font-weight: 600;
  background:
    linear-gradient(180deg, color-mix(in srgb, rgb(var(--g)) var(--face), #0a1212), color-mix(in srgb, rgb(var(--g)) var(--face2), #0a1212)) padding-box,
    linear-gradient(180deg, var(--top) 0%, rgb(var(--g)) 20%, rgba(var(--g),.5) 50%, rgb(var(--g)) 80%, var(--lo) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(var(--g),.2), 0 6px 14px -10px rgba(var(--g),.6);
  transition: filter .12s ease, transform .12s ease;
}
button:hover { border-color: transparent; filter: brightness(1.14); }
button:active { filter: brightness(.94); transform: scale(.98); }
button.primary, button.primary:hover {
  --g: 109,224,201; --top: #dcfff7; --lo: #bdf6e8; --face: 30%; --face2: 16%; color: #eafff9; border-color: transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, rgb(var(--g)) var(--face), #0a1212), color-mix(in srgb, rgb(var(--g)) var(--face2), #0a1212)) padding-box,
    linear-gradient(180deg, var(--top) 0%, rgb(var(--g)) 20%, rgba(var(--g),.5) 50%, rgb(var(--g)) 80%, var(--lo) 100%) border-box;
}
button.choice, button.opt, button.quiet { min-height: 0; padding: .62rem .8rem; border-radius: .5rem; box-shadow: none; }
button.choice, button.opt { border: 1px solid var(--line); background: var(--raised); }
button.choice:hover, button.opt:hover { border-color: var(--brand-line); filter: none; }
button.quiet { background: transparent; border-color: transparent; font-weight: 500; }

/* A trade to confirm: label and value rows, the same layout as the app's trade cards. */
.trade-rows { display: flex; flex-direction: column; margin: .1rem 0 .3rem; border-top: 1px solid var(--line-soft); }
.trade-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.trade-row span { color: var(--muted); flex: none; }
.trade-row b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#app p { overflow-wrap: anywhere; }
button.quiet:disabled { opacity: .5; }