/* The account area.
 *
 * Same material as the site and the app — warm paper, dark ink, one green that
 * only ever means state. Deliberately its own small stylesheet rather than a
 * reach into the marketing CSS: this is served from a different host, by a
 * different server, under a stricter policy, and coupling the two would mean a
 * change to the home page hero could break the sign-in form.
 */

:root {
  --paper: #f7f4ec;
  --paper-raised: #fffdf6;
  --paper-sunk: #efebe0;
  --paper-edge: #e2ddcd;
  --ink: #17150f;
  --ink-body: #3d382c;
  --ink-quiet: #6f6a5c;
  --ink-faint: #9b9585;
  --accent: #1f7a62;
  --accent-quiet: #cfe3da;
  --accent-ink: #0f4d3c;
  --danger: #a3341f;
  --face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15140f;
    --paper-raised: #1e1c16;
    --paper-sunk: #121109;
    --paper-edge: #2e2b22;
    --ink: #f6f2e6;
    --ink-body: #d3cdbd;
    --ink-quiet: #9a9484;
    --ink-faint: #7c7768;
    --accent: #2f9c7e;
    --accent-quiet: #1d3b33;
    --accent-ink: #a7dfcb;
    --danger: #e0755c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--face);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 460px; margin: 0 auto; padding: 48px 20px 64px; }
.wrap--wide { max-width: 720px; }

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand span { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin-bottom: 18px;
}

h1 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.02em; }
h2 { font-size: 16px; margin: 0 0 14px; color: var(--ink); letter-spacing: -0.01em; }
p  { margin: 0 0 16px; }
.lede { color: var(--ink-quiet); margin-bottom: 22px; }
.quiet { color: var(--ink-quiet); font-size: 14px; }

label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }

input[type=email], input[type=password], input[type=text], select {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 16px; /* 16px or iOS zooms the page on focus. */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  margin-bottom: 16px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  width: 100%;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: progress; }
button.secondary { background: transparent; color: var(--accent-ink); border: 1px solid var(--paper-edge); }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--paper-edge); }

a { color: var(--accent-ink); }
.foot { margin-top: 20px; font-size: 14px; text-align: center; color: var(--ink-quiet); }

/* Messages. `role="alert"` on the container; these are just the paint. */
.msg { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }
.msg--bad  { background: var(--paper-sunk); border: 1px solid var(--danger); color: var(--danger); }
.msg--good { background: var(--accent-quiet); border: 1px solid var(--accent); color: var(--accent-ink); }
.msg:empty { display: none; }

/* Meters. A plain element, because a <progress> cannot be styled consistently. */
.meter { height: 8px; background: var(--paper-sunk); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.meter--over > i { background: var(--danger); }

.row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--paper-edge); }
.row:last-child { border-bottom: 0; }
.row dt { color: var(--ink-quiet); font-size: 14px; margin: 0; }
.row dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
dl { margin: 0; }

/* Skeletons, sized to the content they replace rather than a spinner, so the
 * page does not jump when the data lands. */
.skel { background: var(--paper-sunk); border-radius: 6px; height: 1em; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none } }

.hidden { display: none !important; }