/* The account pages, in toia.tech's style: a near-black gradient header with the white logo, then
   a white page in Inter with the site's yellow button. One light theme, as toia.tech has. Nothing
   loads from elsewhere: the font is the Worker's own. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/inter.woff2") format("woff2");
}

:root {
  --paper: #ffffff;
  --ink: rgba(0, 0, 0, 0.85);
  --heading: #000000;
  --muted: rgba(5, 5, 5, 0.6);
  --line: #d3d3d3;
  --button: #f5d90a;
  --button-hover: #f0c000;
  --button-ink: #35290f;
  --focus: #96c7f2;
  --link: #006adc;
  --refusal-bg: #fff0ee;
  --refusal-line: #ca3214;
  --neutral-bg: #f8f8f8;
  --neutral-line: #888888;
  --header-top: #444444;
  --header-bottom: #000000;
  --header-ink: #ffffff;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, Menlo, monospace;
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--font);
}

.top {
  background: linear-gradient(0deg, var(--header-bottom), var(--header-top));
  padding-block: 18px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.bar {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  height: 22px;
  width: auto;
  display: block;
}

.contact {
  color: var(--header-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 40px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.column {
  max-width: 32rem;
  display: grid;
  gap: 18px;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  color: var(--heading);
  text-wrap: balance;
}

p {
  margin: 0;
}

.lede,
.meta {
  color: var(--muted);
}

.meta {
  font-variant-numeric: tabular-nums;
}

.release {
  display: grid;
  gap: 4px;
}

form {
  display: grid;
  gap: 8px;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

input {
  font: 0.95rem var(--font-mono);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}

.button,
button {
  justify-self: start;
  font: 600 1rem var(--font);
  padding: 12px 20px;
  border-radius: 6px;
  border: 0;
  background: var(--button);
  color: var(--button-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.button:hover,
button:hover {
  background: var(--button-hover);
}

input:focus-visible,
.button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.small {
  font-size: 0.875rem;
  color: var(--muted);
}

.notice {
  padding: 12px 14px;
  border-radius: 6px;
  border-left: 3px solid var(--neutral-line);
  background: var(--neutral-bg);
}

.notice.refusal {
  border-left-color: var(--refusal-line);
  background: var(--refusal-bg);
}

.page a:not(.button) {
  color: var(--link);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  button {
    transition: none;
  }
}