/* Brand tokens, same values as the coming-soon page and posting checklist. */
:root{
  --pine900:#16342A; --pine700:#2D5F4C; --pine500:#4A8B6F; --pine300:#8FBFA6; --pine100:#E3EFE8;
  --canvas:#F7F4EE; --surface:#FFFFFF; --sand:#EBE3D6;
  --ink:#241C14; --ink2:#5C4B3B; --ink3:#8A7764;
  --line:#DCD2C2; --lineStrong:#C2B49F; --ember:#B85529; --onpine:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --pine900:#0E241D; --pine700:#3E7C64; --pine500:#68AE8C; --pine300:#9CCFB4; --pine100:#1D3229;
    --canvas:#14110D; --surface:#1C1813; --sand:#26201A;
    --ink:#EFE7DA; --ink2:#BDAE9A; --ink3:#8B7C69;
    --line:#332B22; --lineStrong:#4A3F33; --ember:#E0784A; --onpine:#FFFFFF;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--canvas); color:var(--ink);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; line-height:1.1; margin:0}
h1{font-size:34px}
h2{font-size:26px; margin-bottom:8px}
[hidden]{display:none !important}

.page{max-width:680px; margin:0 auto; padding:16px 16px 48px}
.top{padding:8px 0 16px}
.brand{font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:24px}
.brand .a{color:var(--pine900)} .brand .b{color:var(--pine700)}
@media (prefers-color-scheme: dark){ .brand .a{color:var(--pine300)} .brand .b{color:var(--pine500)} }
.lead{color:var(--ink2); margin:8px 0 0}

.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 16px; margin:0 0 16px}
.hint{color:var(--ink3); font-size:17px; font-weight:400}
.card > .hint{margin:0 0 12px}

.field{display:block; font-weight:600; margin:0 0 16px}
.field .hint{display:inline}
input:not([type=radio]):not([type=file]),textarea{
  display:block; width:100%; margin-top:6px; font:inherit; font-weight:400; color:var(--ink);
  background:var(--canvas); border:2px solid var(--lineStrong); border-radius:10px; padding:12px;
  min-height:52px;
}
textarea{resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--pine500); outline-offset:1px; border-color:var(--pine700)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > .field{flex:1 1 220px}

fieldset{border:0; padding:0; margin:0}
.choices{margin:0 0 16px}
.choices legend{font-weight:600; margin-bottom:6px; padding:0}
.choices label{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 14px; margin:0 8px 8px 0;
  border:2px solid var(--lineStrong); border-radius:999px; cursor:pointer;
}
.choices input{width:22px; height:22px; accent-color:var(--pine700); margin:0}
.choices label:has(input:checked){border-color:var(--pine700); background:var(--pine100)}

.problem{border:2px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px}
.problem-title{font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:22px; padding:0 6px}
.shot{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 8px}
.shot-preview{max-width:140px; max-height:220px; border-radius:8px; border:1px solid var(--line)}
.file input{position:absolute; width:1px; height:1px; opacity:0}

.btn{
  font:inherit; font-weight:600; min-height:48px; padding:10px 18px; border-radius:999px; cursor:pointer;
  border:2px solid var(--lineStrong); background:var(--surface); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; position:relative;
}
.btn:focus-visible,.file:focus-within{outline:3px solid var(--pine500); outline-offset:2px}
.btn.primary{background:var(--pine700); border-color:var(--pine700); color:var(--onpine)}
.btn.big{width:100%; min-height:60px; font-size:20px}
.btn.link{border:0; background:none; color:var(--pine700); padding:10px 4px; text-decoration:underline}
@media (prefers-color-scheme: dark){ .btn.link{color:var(--pine300)} }
.btn:disabled{opacity:.6; cursor:default}

.error{color:var(--ember); font-weight:600; margin:0 0 12px}
.done{text-align:center; padding:32px 16px}
.done p{margin:0 0 16px}
.trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}