/* Colour tokens equal the portal theme's palettes; the dark set follows the operating system. */
:root {
  color-scheme: light dark;
  --bg: #F6F4EE;
  --surface: #FFFEFB;
  --primary: #3F7A5C;
  --primary-text: #FFFFFF;
  --text: #25302A;
  --text-secondary: #5B6A60;
  --line: #E2DED1;
  --line-input: #B9B5A6;
  --error: #B3402F;
  --success: #3F7A5C;
  --radius: 16px;
  --gutter: 24px;
  --content-max: 960px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141A16;
    --surface: #1C241F;
    --primary: #7FC4A0;
    --primary-text: #10201A;
    --text: #E6EEE8;
    --text-secondary: #A9B8AE;
    --line: #2C3830;
    --line-input: #4A5A50;
    --error: #E88A7A;
    --success: #7FC4A0;
  }
}

body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; }
a { color: var(--primary); }

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.25rem var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 700; font-size: 1.25rem; color: var(--text); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; }

/* Same column as the portal: 960 px including 24 px side padding, centred. */
main { box-sizing: border-box; max-width: var(--content-max); margin: 0 auto; padding: 1.5rem var(--gutter) 2rem; }
@media (max-width: 599px) {
  :root { --gutter: 16px; }
}
h1 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; }
h2 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 600; }
.card { margin: 0 0 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

label { display: block; margin-top: 1rem; color: var(--text-secondary); }
label:first-child { margin-top: 0; }
input { box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 0.25rem; padding: 0.6rem 0.75rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--radius); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button { box-sizing: border-box; min-height: 44px; min-width: 44px; margin-top: 1.25rem; padding: 0.6rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--primary-text); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius); }

.card button[type=submit] { display: block; width: 100%; }

.error, .ok { margin: 0 0 1rem; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid currentColor; border-radius: var(--radius); }
.error { color: var(--error); }
.ok { color: var(--success); }