:root {
  --bg: #f7f5f0; --fg: #1d1d1b; --muted: #6b6b66; --card: #fff; --line: #ddd8cc;
  --ok: #1f6f3a; --err: #a12b2b; --link: #1a5fb4; --link-visited: #6a3d9a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161614; --fg: #ecebe6; --muted: #a3a29b; --card: #22221f; --line: #3a3934; --ok: #6fcf8f; --err: #f08b8b; --link: #8ab4f8; --link-visited: #c58af9; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: 2rem 16px; }
h1 { font-size: 1.6rem; line-height: 1.2; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
.ok { color: var(--ok); } .err { color: var(--err); }
/* Forms (M3) */
label { display: block; margin: .9rem 0 .25rem; font-weight: 600; }
label .opt { font-weight: 400; color: var(--muted); }
input, select { width: 100%; font: inherit; padding: .55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
input[type=file] { padding: .4rem; }
button { font: inherit; padding: .6rem 1.2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
button.primary { border: 0; background: var(--fg); color: var(--bg); }
button:disabled { opacity: .5; cursor: default; }
.hint { font-size: .9rem; color: var(--muted); margin: .2rem 0 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 30rem) { .row2 { grid-template-columns: 1fr; } }
.filerow { display: grid; grid-template-columns: 1fr 9rem; gap: .5rem; margin: .5rem 0 .15rem; }
.filenote { font-size: .9rem; margin: 0 0 .6rem; }
.filenote:empty { margin: 0; }
.filenote .help { margin-top: .4rem; color: var(--fg); }
.filenote .help summary { cursor: pointer; color: var(--link); }
.filenote .help ul { padding-left: 1.2rem; margin: .3rem 0; }
/* Proposal guide */
.guide .card h2 { margin-top: .2rem; }
.guide li { margin: .3rem 0; }
.warn { border-left: 4px solid var(--err); padding: .4rem .8rem; background: color-mix(in srgb, var(--err) 8%, transparent); border-radius: 4px; }
.tip { border-left: 4px solid var(--ok); padding: .5rem .8rem; background: color-mix(in srgb, var(--ok) 8%, transparent); border-radius: 4px; }
a.button { display: inline-block; padding: .6rem 1.2rem; border-radius: 8px; background: var(--fg); color: var(--bg); text-decoration: none; }
a.path .figrow img { width: 72px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
a.path { display: block; text-decoration: none; color: inherit; }
/* District brand header and the workbook figure */
.brand { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; }
.brand img { width: 72px; height: auto; flex: none; }
.brand .name { font-weight: 700; line-height: 1.2; }
.brand .name small { display: block; margin-top: .15rem; font-weight: 400; color: var(--muted); font-size: .85rem; }
.brand-link, .brand-link:visited { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.brand-link .name { font-size: 1.1rem; }
.brand + h1 { margin-top: .5rem; }
.figrow { display: flex; gap: 1rem; align-items: flex-start; margin: .75rem 0; }
.figrow img { width: 100px; height: auto; flex: none; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.figrow p { margin: 0; }
@media (max-width: 24rem) { .figrow img { width: 72px; } }
a.path:hover h2 { text-decoration: underline; }

/* "For the Life Scout to complete" box on the submission page */
.card.notice { border-left: 4px solid #2a6db0; }
.card.notice h2 { margin-top: 0; }