/* The /apply pages (issue #22). Served by the sakelabs-apply service at
   /apply/apply.css. Tokens: the SAKE dark scheme, as in prototype/index.html. */
:root {
  --bg: #061430;
  --surface: #0B1F44;
  --surface-2: #10295A;
  --ink: #E8EEF7;
  --ink-4: #8A9AB8;
  --accent: #2BC4B8;
  --accent-strong: #5FD8CD;
  --on-accent: #031A2E;
  --line: rgba(138, 154, 184, .22);
  --error: #FF9B8F;
  --font-display: Montserrat, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font-text); }
body { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

.top { display: flex; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-family: var(--font-display); }
.brand b { font-weight: 800; } .brand span { font-weight: 300; }

main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .75rem; }
.lede { color: var(--ink-4); margin: 0 0 2rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
legend { padding: 0; font-weight: 600; margin-bottom: .4rem; }
.field { display: grid; gap: .3rem; margin-bottom: 1.25rem; }
.field > label, .field > .label { font-weight: 600; }
.hint { color: var(--ink-4); font-size: .9rem; margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem;
}
textarea { resize: vertical; min-height: 6rem; }
.choices { display: grid; gap: .35rem; }
.choice { display: flex; gap: .6rem; align-items: center; }
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.code { font-size: 1.5rem; letter-spacing: .35em; max-width: 12rem; }

.error, .message { margin: 0; }
.error { color: var(--error); font-size: .9rem; }
.message { border: 1px solid var(--accent); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.error:empty, .message:empty { display: none; }

.notice { font-size: .9rem; color: var(--ink-4); }
.notice p { margin: 0 0 .75rem; }
.notice strong { color: var(--ink); }

.btn { font: 600 1rem var(--font-text); background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: .75rem 1.5rem; cursor: pointer; }
.btn:hover { background: var(--accent-strong); }
.btn-quiet { font: inherit; background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; }

/* The honeypot: off-screen for people, aria-hidden for assistive technology,
   tabindex="-1" for the keyboard. Not display:none, which some bots skip. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

footer { padding: 2rem 1rem; color: var(--ink-4); font-size: .8rem; text-align: center; border-top: 1px solid var(--line); }