/* The phone page. One job on the screen, read from across a desk on film. _shell.css gives it the film's ground, red,
   white and clock; this file sizes them for a phone in one hand. Small grey text is lighter here than the film's, and
   the mono list adds Android's, because this is read at arm's length on a small screen. */
:root {
  --dim: #A0A0A0;
  --line: #3A3A3A;
  --sans: -apple-system, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
  --gutter: 16px;
}
/* The column never scrolls, so a downward drag at its top is the browser's pull to refresh, and a reload forgets the
   spend key. This stops it where a browser lets a page say so (Chrome on Android); Safari on iOS does not. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: contain; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }
a { color: inherit; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
.chip { position: static; padding: 4px 8px 5px; border: 2px solid var(--white); font: 500 14px/1 var(--mono); }
.wordmark { position: static; flex: none; font: 800 20px/1 var(--sans); white-space: nowrap; }
.wordmark .for { font-weight: 500; color: var(--dim); }
/* A local run's chip leaves no room beside it on a phone, so the page shows only "Undo" there. */
.wordmark.short .rest { display: none; }

#screen { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding-top: 14px; }
/* The tx hash wraps to two lines at this size, in its slot, so nothing under it jumps when it arrives. */
#near-tx .hash { font-size: 16px; }
.grow { flex: 1 1 auto; min-height: 8px; }

/* ---- what is asked */
.label { font: 500 14px/1.2 var(--mono); color: var(--dim); }
.addr { font: 600 17px/1.25 var(--mono); overflow-wrap: anywhere; margin: 3px 0 10px; }
.sats { font: 800 44px/1.05 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.small { font: 500 14px/1.3 var(--sans); color: var(--dim); margin: 3px 0 0; overflow-wrap: anywhere; }
.small.warnline { color: #FFB4AE; font-weight: 700; }

/* ---- the clock: every character sits in a fixed slot */
.clockwrap { position: relative; margin: 10px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); text-align: center;
  background: radial-gradient(closest-side, rgba(255, 59, 48, 0.2), rgba(255, 59, 48, 0)); }
.clock { display: inline-block; font-family: var(--sans); font-weight: 800; font-size: 36vw; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--red); letter-spacing: 0; }
.clock .sl { display: inline-block; width: 1ch; text-align: center; }
.clock .col { display: inline-block; }
.clock .ten { font-size: 0.34em; }
.clock .ten.sl { width: 1ch; }
.clock.stopped { color: var(--white); }
.clockwrap.stopped { background: none; }
.clock.dimmed { opacity: 0.45; }
.fuse { height: 8px; background: #2A0D0B; margin-top: 2px; overflow: hidden; }
.fuse > div { height: 100%; background: var(--red); transform-origin: 0 50%; }

/* ---- the one control */
.go { display: block; width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--white); color: var(--ground);
  font: 800 28px/1.1 var(--sans); letter-spacing: -0.015em; padding: 16px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; }
.go:disabled { opacity: 0.4; }
.go.quiet { background: transparent; color: var(--white); border: 2px solid var(--line); font-size: 22px; font-weight: 700; }
.go + .go, .go + #cancel { margin-top: 10px; }
/* A second, small line inside a button, in the room the button already has. The line and its gap are 13px x 1.2 + 3px,
   and the button's padding gives up exactly that, half above and half below, so the button is as tall as a one-line
   one and nothing above or below it moves. */
.go.two { --sub: calc(13px * 1.2 + 3px); padding-top: calc(16px - var(--sub) / 2); padding-bottom: calc(16px - var(--sub) / 2); }
.go .sub { display: block; margin-top: 3px; font: 500 13px/1.2 var(--sans); letter-spacing: 0; color: var(--dim); }
/* Second to Cancel on its screen, so it takes less of it. */
#save-cancel { font-size: 18px; min-height: 44px; padding: 10px 12px; }
.small + .go { margin-top: 10px; }
.go + .small { margin-top: 8px; }
/* One line on a 320px phone, so it is on the screen with the three buttons above it. */
#copy-now { font-size: 13px; }
#cancel, .slot { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(116px, 22vh, 190px); flex: none; border-radius: 20px; }
#cancel { border: 0; background: var(--red); color: var(--white); font: 800 68px/1 var(--sans); letter-spacing: -0.02em; padding: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
#cancel:active { background: #D22B22; }
.slot { border: 2px solid var(--line); font: 800 32px/1.1 var(--sans); letter-spacing: -0.015em; text-align: center; padding: 10px; }

/* ---- sentences. An address or a hash can be in any of them, and wraps rather than running off the side */
.say { font: 800 30px/1.14 var(--sans); letter-spacing: -0.018em; margin: 10px 0; overflow-wrap: anywhere; }
.say.big { font-size: 40px; line-height: 1.08; }
.line { font: 500 19px/1.3 var(--sans); margin: 8px 0; overflow-wrap: anywhere; }
.line.dim { color: var(--dim); }
.notice { font: 700 18px/1.25 var(--sans); margin: 8px 0 0; color: var(--white); overflow-wrap: anywhere; }
.notice.warn { color: #FFB4AE; }
.words { font: 500 14px/1.35 var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; margin: 6px 0; color: var(--white); }
.hashslot { min-height: 70px; }
#coin-line { margin: 6px 0 4px; }
.hashblock.tight .hash { font-size: 15px; line-height: 1.2; }
.hashblock.tight .hashline { margin-top: 0; }
.hashline { font: 500 14px/1.2 var(--mono); color: var(--dim); margin: 12px 0 2px; }
.hash { font: 700 22px/1.2 var(--mono); overflow-wrap: anywhere; display: block; text-decoration: none; }
a.hash { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- the stamp: a white bar, edge to edge, as in the film. Its box is the screen's width and clips the slam at the
   sides, so the scale it lands from never widens the page; above and below, nothing is clipped */
.stampclip { margin: 12px calc(var(--gutter) * -1) 0; overflow-x: clip; overflow-y: visible; }
.stamp { margin: 0; background: var(--white); color: var(--ground); font: 900 15vw/1 var(--sans); letter-spacing: -0.03em;
  padding: 10px var(--gutter) 12px; white-space: nowrap; text-align: center; }
.stamp.slam { animation: slam 0.16s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes slam { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stamp.slam { animation: none; } }

/* ---- a short phone, with the browser's bars on screen: the clock and the button keep their place */
@media (max-height: 620px) {
  .addr { font-size: 15px; margin-bottom: 6px; }
  .sats { font-size: 34px; }
  #screen { padding-top: 8px; }
  #cancel, .slot { height: 104px; }
  #cancel { font-size: 56px; }
  .fee { display: none; }
}

/* ---- a short phone: the idle screen's line about the dispenser, and the steps of a vault in the making, take less of
   it, so Recovery file and Check again under them stay on it. Neither is on the request or the CANCELLED screen. */
@media (max-height: 620px) {
  #no-funds { font-size: 15px; margin: 6px 0; }
  .line.made { font-size: 16px; margin: 4px 0; }
}

/* ---- a short screen with a browser's bars: Cancel stays on it, whatever else has something to say */
@media (max-height: 700px) {
  #cancel, .slot { height: 104px; }
  #cancel { font-size: 56px; }
  #synced, .fee { display: none; }
}

/* ---- the test mode's lists */
.step { font: 500 15px/1.2 var(--mono); color: var(--dim); margin: 0 0 4px; }
.facts { margin: 8px 0; padding: 0; list-style: none; }
.facts li { font: 500 17px/1.3 var(--sans); padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.pair { display: flex; gap: 10px; margin: 6px 0 12px; }
.pair .go { margin: 0; flex: 1 1 0; font-size: 19px; padding: 12px 6px; min-height: 52px; }
.go.picked { background: var(--white); color: var(--ground); border-color: var(--white); }
.report { font: 500 13px/1.35 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); padding: 10px; margin: 10px 0; }
textarea.report { width: 100%; height: 40vh; background: var(--ground); color: var(--white); }
.foot { font: 500 13px/1.3 var(--sans); color: var(--dim); margin: 10px 0 0; }
button.link { background: none; border: 0; padding: 6px 0; color: var(--dim); font: 500 15px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }

/* ---- a crowded screen: the control stays whole on it. phone.mjs shrinks the digits first, then adds this */
#screen.snug .say { font-size: 24px; }
#screen.snug .say.big { font-size: 30px; }
#screen.snug .line { font-size: 17px; }
#screen.snug .addr { font-size: 15px; margin-bottom: 6px; }
#screen.snug .sats { font-size: 34px; }
#screen.snug .words { font-size: 13px; }
#screen.snug .fee, #screen.snug #synced { display: none; }
/* ---- the control still cut after all that, as inside an app with no passkey id and a hint to give: the small lines
   close up, and none is dropped. phone.mjs adds this last, so a screen the steps above fit is drawn as before */
#screen.packed .small { font-size: 13px; line-height: 1.25; margin-top: 2px; }
#screen.packed .grow { min-height: 4px; }

/* ---- a command in a sentence: one piece, so a line never breaks inside a flag */
.cmd { font: 500 0.93em/1 var(--mono); white-space: nowrap; }

/* ---- after the stamp has held its frame, the digits move up to where a reload draws them */
.clockwrap.settling { transition: margin-top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .clockwrap.settling { transition: none; } }

/* ---- a laptop or a tablet: the same phone column, in the middle, not stretched to the window. The stamp and the
   clock are sized by the screen's width on a phone; here they are sized for this column (15% and 36% of 480px). */
@media (min-width: 700px) {
  body { max-width: 480px; margin: 0 auto; }
  .stamp { font-size: 72px; }
  .clock { font-size: 172px; }
}