/*
 * THE OWNER SCREENS' OWN SHEET — what styles.css carried, retinted to the v3
 * system it now renders inside.
 *
 * The screens this sheet covers (fund, caps, watch, withdraw, account,
 * device, sign-in, terms, register) draw their own DOM inside the `.xp`
 * shell, so the palette is the design's own tokens rather than the old
 * light/dark pair: `--c1` text, `--c3` quiet, `--h1`/`--h2` hairlines,
 * `#14171C` panels on `--night`, `--pink` for the accent, `--signal` for the
 * states that need a warning colour, `#8FE0B6` for the ones that need a
 * calm one. Type is Satoshi like everything else on the page; code and
 * addresses are JBM, which the v3 sheet already loads.
 *
 * Three rules run through everything below, unchanged from the sheet this
 * replaced:
 *
 *   1. IT WORKS AT PHONE WIDTH FIRST. A person killing their agent at 2am is
 *      on a phone. Every layout starts as one column and widens; nothing is
 *      laid out for a desktop and squeezed.
 *   2. FOCUS IS ALWAYS VISIBLE. The outline is never removed, only replaced
 *      with one that has more contrast. A keyboard user on a money screen
 *      who cannot see where they are is a keyboard user who presses the
 *      wrong button.
 *   3. COLOUR IS NEVER THE ONLY SIGNAL. The stopped state, a disagreement
 *      between our record and the account, and a failure all carry words as
 *      well as colour, because about one man in twelve cannot rely on the
 *      colour.
 *
 * ── SCOPING ──
 * The shell and the live screens share this page. Class names the prototype
 * also uses — `.row`, `.skip`, `.hidden` and the chrome around the screens —
 * are scoped under `.legacy`, the class on the mount `OwnerMount` renders
 * into, so a rule written for these screens can never leak onto theirs. The
 * step-up dialog mounts on `document.body`, outside `.legacy`, so the
 * overlay, the dialog frame and the form primitives it is built from stay
 * global — none of those names collide with the design's classes.
 */

.legacy {
  /* The theme root for every screen the mount draws. */
  font-family: Satoshi, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c1);

  --ink: var(--c1);
  --ink-quiet: var(--c3);
  --paper: #0e1013;
  --paper-sunk: #14171c;
  --paper-lift: #1a1d22;
  --line: var(--h2);
  --line-faint: var(--h1);

  --accent: var(--pink);
  --accent-ink: #0b0d10;
  --accent-sunk: rgb(169 212 245 / 0.14);
  --danger: #e5533d;
  --danger-ink: #f07a66;
  --danger-sunk: rgb(229 83 61 / 0.12);
  --warn-sunk: rgb(229 83 61 / 0.07);
  --good: #8fe0b6;
  --good-sunk: rgb(111 211 160 / 0.12);

  --radius: 14px;
  --radius-panel: 22px;
  --gap: 1rem;

  --mono: JBM, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* A person who never touches a pointer has to be able to reach the content. */
.legacy .skip {
  position: absolute;
  left: -9999px;
}
.legacy .skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 30;
  padding: 0.5rem 0.75rem;
  background: var(--paper-lift);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
}

/* The accent is the design's ice; it reads on every surface here. */
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* The account line above every owner screen. */
.legacy .header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--gap);
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-faint);
}
.legacy .brand-name {
  font-weight: 650;
  letter-spacing: -0.01em;
}
.legacy .brand-purpose,
.legacy .account-email {
  display: block;
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.legacy .header a,
.legacy .header button {
  color: var(--ink);
}

/*
 * The agent bar, which carries the stop button.
 *
 * `position: sticky` so it stays reachable while a person scrolls a long
 * watch screen — under the shell's own 68px bar, which is why `top` is 68px
 * and not zero. The whole reason the control is here rather than in a menu
 * is that it must be one action away from anywhere.
 */
.legacy .agent-bar {
  position: sticky;
  top: 68px;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgb(11 13 16 / 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-faint);
}
.legacy .agent-bar-stopped {
  background: rgb(38 19 16 / 0.9);
}
.legacy .agent-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.legacy .agent-name {
  font-weight: 600;
}
.legacy .agent-status {
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.legacy .agent-picker {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}

.legacy .kill {
  font: inherit;
  font-weight: 600;
  /* 44px minimum on both axes: the smallest target a thumb hits reliably. */
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  color: #fff;
  background: var(--danger);
  border: 2px solid transparent;
  border-radius: 99px;
  cursor: pointer;
}
.legacy .kill-done {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.legacy .nav {
  display: flex;
  overflow-x: auto;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line-faint);
}
.legacy .nav-link {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 99px;
  color: var(--ink-quiet);
  text-decoration: none;
}
.legacy .nav-link:hover {
  color: var(--ink);
}
.legacy .nav-link-current {
  color: var(--accent-ink);
  background: var(--cream);
  /* Not colour alone: the current tab is also marked in ARIA. */
  font-weight: 600;
}

.legacy .main {
  padding: 1rem;
  max-width: 46rem;
  margin: 0 auto;
}
.legacy .screen-narrow {
  max-width: 26rem;
  margin: 2rem auto;
  padding: 0 1rem;
}
.legacy .screen-heading {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.legacy .screen-blurb {
  margin: 0 0 1.25rem;
  color: var(--ink-quiet);
}

/* The dialog's own primitives, global so a step-up drawn on document.body
   keeps them. The names are the portal's alone; nothing in the design sheet
   answers to them. */
.panel {
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  border-radius: var(--radius-panel);
}
.panel-inset {
  background: var(--paper);
}
.panel-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.panel-text {
  margin: 0 0 0.5rem;
}
.panel-text-strong {
  font-weight: 600;
}
.panel-text-quiet {
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.panel-text-action {
  color: var(--accent);
}

/* The three mirror states, each with a word as well as a colour. */
.panel-unverified {
  border-left: 4px solid var(--ink-quiet);
}
.panel-agrees {
  border-left: 4px solid var(--good);
  background: var(--good-sunk);
}
.panel-differs {
  border-left: 4px solid var(--danger);
  background: var(--danger-sunk);
}
.panel-alert {
  border-left: 4px solid var(--danger);
  background: var(--danger-sunk);
}
.panel-protection {
  border-left: 4px solid var(--accent);
}
/* A note we keep for the person, holding nothing. Deliberately unlike the
   three mirror states above: a panel that carried their colour would read
   as a limit, and the category list is not one. */
.panel-note {
  border-left: 4px dashed var(--ink-quiet);
}

.legacy .rows {
  margin: 0;
}
.legacy .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.legacy .row:last-child {
  border-bottom: 0;
}
.legacy .row-term {
  color: var(--ink-quiet);
}
.legacy .row-value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.legacy .row-note {
  display: block;
  color: var(--ink-quiet);
  font-size: 0.8125rem;
}

.legacy .balance-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.legacy .balance {
  flex: 1 1 10rem;
}
.legacy .balance-label {
  margin: 0;
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.legacy .balance-figure {
  margin: 0.125rem 0;
  font-size: 1.5rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.legacy .balance-note {
  margin: 0;
  color: var(--ink-quiet);
  font-size: 0.8125rem;
}
.legacy .balance-quiet .balance-figure {
  color: var(--ink-quiet);
}

.meter {
  height: 10px;
  margin: 0.75rem 0;
  background: var(--h2);
  border-radius: 999px;
  overflow: hidden;
}
/*
 * The fill is an SVG rect, not a div with a width: this page serves
 * `style-src 'self'`, which drops a `style="width:37%"` attribute and left
 * the bar painted end to end at every spend. Geometry lives on the element;
 * only the colour is here.
 */
.meter-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.meter-fill {
  fill: var(--pink);
}

/* The code a person compares with their terminal: the one thing on /device
   that must be read exactly. */
.device-code {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}
/* The terms' confirm button, clear of the last box it depends on. */
.choices + .actions {
  margin-top: 1rem;
}
/* What a key the installer asks for will let it do, one line per scope. */
.scopes {
  margin: 0;
  padding-left: 1.25rem;
}
/* A document a person accepts once, folded until they open it. */
.terms {
  margin: 0.5rem 0;
}
/* A summary keeps its own disclosure marker; the padding makes it a 44px target. */
.terms summary {
  padding: 0.7rem 0;
  font-weight: 600;
  cursor: pointer;
}

/* The category boxes on the caps screen. One per line at phone width. */
.choices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}
.choice {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.choice-box {
  flex: none;
  accent-color: var(--accent);
}
.choice-label {
  font-size: 0.95rem;
}

.field {
  margin: 0 0 1rem;
}
.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.field-hint {
  margin: 0.25rem 0 0;
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
/* What an amount box will be read as, under it while the person types. */
.field-echo {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--c1);
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--h2);
  border-radius: var(--radius);
}
.input:focus {
  box-shadow: inset 0 0 0 1px var(--pink);
}
.input-code {
  font-family: var(--mono);
  font-size: 1.25rem;
  letter-spacing: 0.3em;
}

.legacy .actions,
.legacy .routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.legacy .route {
  flex: 1 1 14rem;
  padding: 0.75rem 1rem;
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  border-radius: var(--radius-panel);
}
.legacy .route-absent {
  opacity: 0.75;
}
.legacy .route-heading {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 500;
  color: var(--c1);
  background: var(--paper-sunk);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--h2);
  border-radius: 99px;
  cursor: pointer;
}
.button:hover {
  box-shadow: inset 0 0 0 1px rgb(236 237 231 / 0.4);
}
.button-primary {
  color: var(--accent-ink);
  background: var(--cream);
  box-shadow: none;
}
.button-danger {
  color: #fff;
  background: var(--danger);
  box-shadow: none;
}
.button-quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.link-button {
  font: inherit;
  padding: 0;
  color: var(--accent);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.link-button + .link-button {
  margin-left: 0.75rem;
}

.failure {
  margin: 0.75rem 0;
  padding: 1rem 1.125rem;
  background: var(--danger-sunk);
  box-shadow: inset 0 0 0 1px rgb(229 83 61 / 0.45);
  border-radius: var(--radius-panel);
}
.failure-title {
  margin: 0 0 0.5rem;
  font-weight: 650;
}
.failure-detail,
.failure-suggestion-text {
  margin: 0 0 0.5rem;
}
.failure-label {
  margin: 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
}
.failure-reference {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-quiet);
}

.copyable {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.copyable-text,
.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  /* An address must wrap rather than overflow: a destination a person
     cannot read in full is a destination they have to take on trust. */
  word-break: break-all;
  text-align: left;
}
/* A copy that did not happen is said on its own line, under the text it is
   about. */
.copyable-said {
  flex-basis: 100%;
}
.copyable-said:empty {
  display: none;
}
.copy {
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.8125rem;
  background: var(--paper-sunk);
  color: var(--c1);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--h2);
  border-radius: 99px;
  cursor: pointer;
}

.legacy .countdown {
  margin: 0.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.legacy .countdown-absolute {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-quiet);
}

.legacy .freshness {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 0 0.75rem;
  color: var(--ink-quiet);
  font-size: 0.875rem;
}

.legacy .activity,
.legacy .requests,
.legacy .history,
.legacy .record {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legacy .activity-item,
.legacy .request-item,
.legacy .history-item,
.legacy .record-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line-faint);
}
.legacy .activity-item:last-child,
.legacy .request-item:last-child,
.legacy .history-item:last-child,
.legacy .record-item:last-child {
  border-bottom: 0;
}
.legacy .record-item .panel-text,
.legacy .record-reason .panel-text {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}
.legacy .activity-summary,
.legacy .request-question {
  margin: 0 0 0.25rem;
}
.legacy .activity-meta,
.legacy .request-context {
  margin: 0;
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.legacy .history-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
}
.legacy .history-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.dialog {
  width: 100%;
  max-width: 30rem;
  padding: 1.4rem 1.5rem;
  background: var(--paper-lift);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 50px 100px -40px #000;
  border-radius: 24px;
  color: var(--c1);
  font-family: Satoshi, 'Helvetica Neue', Arial, sans-serif;
}
.dialog-heading {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.dialog-text {
  margin: 0 0 0.75rem;
}
/* Which agent the dialog acts on, read before anything is pressed. */
.dialog-agent {
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.dialog-facts {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}
.dialog-facts li {
  margin-bottom: 0.375rem;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.legacy .wallet-bar {
  padding: 1rem;
  margin: 0 auto;
  max-width: 46rem;
  border-top: 1px solid var(--line-faint);
  color: var(--ink-quiet);
  font-size: 0.875rem;
}
.legacy .wallet-line {
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.legacy .wallet-note {
  margin: 0.25rem 0 0;
}
.legacy .wallet-note-strong {
  color: var(--danger-ink);
  font-weight: 600;
}
.legacy .wallet-icon {
  width: 18px;
  height: 18px;
}

.live {
  margin: 0.5rem 0 0;
}
/* A status, or a code shown once, under the row it belongs to rather than
   beside it. */
.legacy .history-item > .live {
  flex-basis: 100%;
}
/* What the last action did, carried across the re-draw that followed it. */
.notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--pink);
  background: var(--paper-sunk);
  border-radius: var(--radius);
}
/* An address waiting to switch on, and one our record holds that the
   account never received. */
.pending {
  margin: 0.75rem 0;
}
.pending-stale {
  padding-left: 0.75rem;
  border-left: 4px solid var(--danger);
}
.legacy .loading {
  color: var(--ink-quiet);
}
.legacy .hidden {
  display: none;
}
.legacy .noscript {
  padding: 1rem;
}

/* ── Control Center additions the prototype has no rule for ──
   Additive only, like fix.css: the interactive slider focus ring and the
   agent switcher the page needs when an owner has more than one. */
.xcc .sl .tr:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 6px;
  border-radius: 6px;
}
.xcc .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.xcc .top .xdd {
  flex: none;
  width: 280px;
}
@media (max-width: 720px) {
  .xcc .top {
    flex-direction: column;
    align-items: stretch;
  }
  .xcc .top .xdd {
    width: 100%;
    margin-top: 18px;
  }
}
/* The nickname box inside the agent header borrows the design's own field
   treatment so it does not look like a foreign input. */
.xcc .agent .nk input {
  font: 500 20px/1 Satoshi;
  color: var(--c1);
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--h2);
  border-radius: 10px;
  padding: 4px 8px;
  max-width: 220px;
}
.xcc .agent .nk input:focus {
  box-shadow: inset 0 0 0 1px var(--pink);
  outline: none;
}
.xcc .tg .ov input {
  width: 3.2em;
  font: inherit;
  color: var(--c1);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--h2);
  padding: 0 2px;
  margin-left: 4px;
}
.xcc .tg .ov input:focus {
  border-bottom-color: var(--pink);
  outline: none;
}
.xcc .tg .ov label.dim input {
  color: var(--c4);
}
.xcc .xc {
  display: block;
  cursor: default;
  padding: 32px;
}
.xcc .xc p {
  min-height: 0;
  margin: 0 0 10px;
}
.xcc .xc a.go {
  display: inline-flex;
  margin-top: 8px;
  padding: 12px 24px;
  border-radius: 99px;
  background: var(--cream);
  color: #0b0d10;
  font-weight: 500;
  cursor: pointer;
}

/* Nothing here animates anything essential, and what little moves, stops. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}