/* Tokens match apps/ella_app/lib/src/ui/core/theme/app_tokens.dart. */
:root {
  --bg: #f7f1e7;
  --fg: #10233d;
  --card: #fffdf8;
  --primary: #205ce0;
  --on-primary: #ffffff;
  --secondary: #16304f;
  --muted: #efe6d8;
  --muted-fg: #596672;
  --border: #d5c8b8;
  --ring: #205ce0;
  --error: #a61b1b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --fg: #f8fafc;
    --card: #0f172a;
    --primary: #60a5fa;
    --on-primary: #16304f;
    --secondary: #1e293b;
    --muted: #1e293b;
    --muted-fg: #94a3b8;
    --border: #334155;
    --ring: #60a5fa;
    --error: #f87171;
    color-scheme: dark;
  }
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-500.ttf") format("truetype");
  font-weight: 500 700;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  background: var(--card);
  color: var(--fg);
  padding: 0.75rem 1rem;
  border: 2px solid var(--ring);
}
.skip:focus { top: 0.5rem; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.site-header, .site-footer, main {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.5rem; color: var(--fg); text-decoration: none; }
ul { padding-inline-start: 1.25rem; }
.site-header nav { flex: 1 1 auto; }
.brand .by { font-weight: 400; font-size: 1rem; color: var(--muted-fg); margin-inline-start: 0.4rem; }
.site-header .account { margin-inline-start: auto; }
.site-header ul, .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-header nav a, .site-footer nav a { display: inline-block; padding-block: 0.5rem; color: var(--fg); }
.site-header nav a[aria-current="page"], .site-footer nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
.account { margin: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.button, .prose .button {
  display: inline-block;
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--primary);
}
.button.secondary { background: transparent; color: var(--primary); }
.button:hover { filter: brightness(1.08); }
main { padding-block: 2rem 3rem; }
h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.2; margin: 0 0 1rem; font-weight: 700; }
h2 { font-size: 1.6rem; line-height: 1.3; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.25rem; line-height: 1.35; margin: 1.75rem 0 0.5rem; }
.prose { max-width: 46rem; }
main.home .prose, main.page .prose { max-width: 52rem; }
main.help .prose, main.uses .prose { max-width: 46rem; }
.prose p, .prose li, .prose dd { margin-block: 0.75rem; }
.prose li { margin-block: 0.4rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.25rem; }
.notice { background: var(--muted); padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 500; }
dl { margin: 0.75rem 0; }
dt { font-weight: 700; margin-top: 0.75rem; }
dd { margin-inline-start: 0; }
.run, .story {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.25rem 1.25rem 1rem;
  margin-block: 1.25rem;
}
.run h2, .run h3, .story h3 { margin-top: 1rem; }
.link-list { list-style: none; padding: 0; }
.link-list li { margin-block: 0.25rem; }
.link-list a { display: inline-block; padding-block: 0.4rem; }
figure { margin: 1.5rem 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 0.5rem; }
figcaption { color: var(--muted-fg); font-size: 1rem; margin-top: 0.5rem; }
.table-wrap { overflow-x: auto; margin-block: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: start; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
thead th { background: var(--muted); }
tbody th { font-weight: 700; }
blockquote { margin-inline: 0; padding: 0.25rem 1rem; border-inline-start: 0.35rem solid var(--border); background: var(--card); }
code { font-size: 0.95em; }
hr { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }
.site-footer { border-top: 1px solid var(--border); padding-block: 1.5rem 2.5rem; font-size: 1rem; }
.site-footer p { color: var(--muted-fg); margin-block: 1rem 0; }
@media (forced-colors: active) {
  .button { border: 2px solid ButtonText; }
}

.crumbs { margin-bottom: 1rem; font-size: 1rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--muted-fg); }
.crumbs a { display: inline-block; padding-block: 0.4rem; }
.described li { margin-block: 0.75rem; }
.described a { font-weight: 700; display: inline; padding: 0; }
.described span { display: block; color: var(--muted-fg); font-size: 1rem; }
.related, .still-stuck { margin-top: 2.5rem; border-top: 1px solid var(--border); }
.related h2, .still-stuck h2 { font-size: 1.3rem; }
.faq h3, .howto h3 { font-size: 1.15rem; }
.contact { max-width: 40rem; }
.contact fieldset { border: 2px solid var(--muted-fg); border-radius: 0.5rem; padding: 0.75rem 1rem 1rem; margin: 0 0 1.5rem; }
.contact legend { font-weight: 700; padding-inline: 0.25rem; }
.choice { display: flex; align-items: flex-start; gap: 0.6rem; margin-block: 0.25rem; }
.choice input { width: 1.5rem; height: 1.5rem; margin: 0.4rem 0 0; flex: none; accent-color: var(--primary); }
.choice label { padding-block: 0.3rem; }
.field { margin-block: 1.25rem; }
.field label { display: block; font-weight: 700; }
.hint { margin: 0.25rem 0 0.5rem; color: var(--muted-fg); font-size: 1rem; }
.contact input[type="email"], .contact input[type="text"], .contact textarea {
  width: 100%; font: inherit; color: var(--fg); background: var(--card);
  border: 2px solid var(--muted-fg); border-radius: 0.5rem; padding: 0.6rem 0.75rem; min-height: 2.75rem;
}
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.privacy-note { color: var(--muted-fg); font-size: 1rem; }
button.button { font: inherit; font-weight: 700; cursor: pointer; min-height: 2.75rem; }
.form-error, .form-status { font-weight: 700; margin-block: 0.75rem; }
.form-error { color: var(--error); }
.form-error:empty, .form-status:empty { margin: 0; }

.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand img { flex: none; }