/* The wallet's stylesheet. No framework, because the Content-Security-
   Policy is `style-src 'self'` with no inline styles, and every
   framework of the last ten years writes inline styles somewhere. A
   policy with an exception in it is a policy an injected script fits
   through.

   The rules below are the accessibility target rather than decoration:
   text at 4.5:1 or better against its background in both themes, focus
   visible on everything that takes it, controls at least 24 by 24
   pixels, nothing signalled by colour alone, and a layout that reflows
   to one column rather than scrolling sideways. */

:root {
  color-scheme: light dark;

  --ink: #16181d;
  --ink-soft: #4a4f5a;
  --ground: #fbfbfa;
  --panel: #ffffff;
  --line: #d6d8de;
  --accent: #1f4f8f;
  --accent-ink: #ffffff;
  --good: #17603a;
  --bad: #8f2018;
  --warn-ground: #fdf6e3;

  --gap: 1rem;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9eaee;
    --ink-soft: #a9aeba;
    --ground: #14161a;
    --panel: #1c1f25;
    --line: #353a44;
    --accent: #7fb0ef;
    --accent-ink: #0d1014;
    --good: #6fd39b;
    --bad: #ff9d92;
    --warn-ground: #2a2418;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* No fixed pixel root size: a person who has set a larger default in
     their browser has said what they want, and a wallet that overrode it
     would be arguing with them. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  /* WCAG 2.2 asks that text can be enlarged without a horizontal
     scrollbar appearing. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
}

/* The skip link is the first thing in the tab order and is visible the
   moment it is focused. A skip link that never becomes visible helps a
   screen reader and nobody using a keyboard with their eyes. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

header.bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--gap);
}

.brand {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

nav a {
  color: var(--ink);
  /* Underlined rather than coloured: the current page is marked with a
     word for a screen reader and with weight and a rule for everybody
     else, never with colour on its own. */
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 24px;
}

nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 3px;
}

main {
  display: block;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

.lead {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  margin: 0 0 var(--gap);
}

/* A banner is announced by its role, and says what it is in words as
   well as in colour. */
.banner {
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: 0.75rem var(--gap);
  margin: 0 0 var(--gap);
  background: var(--panel);
}

.banner.problem {
  border-left-color: var(--bad);
  color: var(--ink);
  background: var(--warn-ground);
}

.banner.notice {
  border-left-color: var(--good);
}

.state {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.state.good {
  color: var(--good);
}

.state.bad {
  color: var(--bad);
}

.state.plain {
  color: var(--ink-soft);
}

dl.facts {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

dl.facts dt {
  color: var(--ink-soft);
}

dl.facts dd {
  margin: 0;
}

@media (max-width: 30rem) {
  dl.facts {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  dl.facts dd {
    margin: 0 0 0.6rem;
  }
}

ul.records {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.records > li {
  border-top: 1px solid var(--line);
  padding: 0.75rem 0;
}

ul.records > li:first-child {
  border-top: 0;
}

label {
  display: block;
  font-weight: 600;
  margin: 1rem 0 0.2rem;
}

.hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 0.35rem;
}

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  width: 100%;
  max-width: 26rem;
  min-height: 2.5rem;
}

textarea {
  min-height: 5rem;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 1rem 0;
  padding: 0.5rem var(--gap) var(--gap);
}

legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0;
}

.choice input {
  margin-top: 0.35rem;
  /* WCAG 2.2 target size. A radio a person cannot hit is a choice they
     cannot make. */
  width: 24px;
  height: 24px;
}

.choice label {
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.25rem 0 0;
}

button,
.button {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

button.quiet,
.button.quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

button.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #ffffff;
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

footer.foot {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

footer.foot a {
  color: var(--ink);
}

.hidden {
  display: none;
}

/* Available to a screen reader and not to the eye. This is not
   `display: none`, which takes the text away from both: the current-page
   marker and the language hint exist for somebody who cannot see the
   underline or the flag, so hiding them from a screen reader would hide
   them from exactly the reader they are for. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}