:root { --line: #d9d9de; --muted: #666; --accent: #1f5f8b; --hover: #f2f5f8; }

* { box-sizing: border-box; }

body {
  margin: 0; padding: 3rem 1.25rem; line-height: 1.5; color: #1a1a1c;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 34rem; margin: 0 auto; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.01em; }
.lede { margin: 0 0 2.5rem; color: var(--muted); }

/* Account ------------------------------------------------------------------- */

.account { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.account-action {
  padding: .375rem .625rem; font-size: .875rem; color: var(--accent);
  border: 1px solid var(--line); border-radius: .375rem; text-decoration: none;
}
.account-action:hover { background: var(--hover); border-color: var(--accent); }
.account-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Address picker ------------------------------------------------------------ */

.ac-label { display: block; margin-bottom: .375rem; font-weight: 600; font-size: .875rem; }
.ac-field { display: flex; align-items: center; gap: .625rem; }
.ac-input {
  flex: 1; padding: .625rem .75rem; font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: .375rem; background: #fff;
}
.ac-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.htmx-indicator { opacity: 0; font-size: .8125rem; color: var(--muted); transition: opacity .15s; }
.htmx-indicator.htmx-request { opacity: 1; }

.ac-list {
  margin: .5rem 0 0; padding: 0; list-style: none; max-height: 21rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: .375rem; background: #fff;
}
.ac-row {
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: .5rem .75rem; border-bottom: 1px solid var(--line); cursor: pointer;
}
.ac-row:last-child { border-bottom: 0; }
/* Focus stays in the text box, so the highlight tracks aria-selected — the
   same state the screen reader announces — rather than :focus. */
.ac-row:hover, .ac-row[aria-selected="true"] { background: var(--hover); }
.ac-row[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.ac-row-refine .ac-title { font-weight: 600; }
.ac-tag { flex: none; font-size: .75rem; color: var(--muted); white-space: nowrap; }

.ac-hint { margin: 0; padding: .5rem .75rem; font-size: .875rem; color: var(--muted); }
.ac-error { color: #8b1f1f; }

.ac-picked { margin-top: 1.25rem; padding: .875rem 1rem; border-left: 3px solid var(--accent); background: var(--hover); }
.ac-picked-title { margin: 0 0 .625rem; font-weight: 600; }
.ac-picked dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .875rem; margin: 0; }
.ac-picked dt { font-size: .8125rem; color: var(--muted); }
.ac-picked dd { margin: 0; }
.ac-picked code { font-size: .8125rem; }
.ac-picked-empty { color: var(--muted); }
.ac-picked small { display: block; color: var(--muted); }

/* Available to assistive technology, invisible on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}