@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk/400.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk/500.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk/600.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk/700.ttf) format('truetype');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spectral/500.ttf) format('truetype');
}

:root {
  color-scheme: light;
  --bg: #fcfbf8;
  --panel: #fff;
  --surface: #fff;
  --text: #1d1b17;
  --muted: #55524a;
  --line: #d9d4ca;
  --control-line: #817c70;
  --accent: #6e2a28;
  --accent-soft: #f3e8e5;
  --accent-ink: #fff;
}

.mast { background: var(--bg); }
.mast span { color: var(--muted); }
.tyrus-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font: 600 1.1rem Georgia, serif;
  letter-spacing: .12em;
  text-decoration: none;
}
h1 { font-family: Georgia, serif; font-weight: 500; }
.column form > .consent-choice { display: flex; }
.consent-choice a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.secondary { border-color: var(--control-line); }

.survey-choices {
  container: survey-choices / inline-size;
  display: flex;
  flex-wrap: wrap;
  --choice-gap: 10px;
  gap: var(--choice-gap);
}
.survey-choices > .option {
  flex: 1 0 calc((100% - var(--choice-gap)) / 2);
  min-width: 0;
  max-width: 100%;
}
.survey-choices > .option > span { min-width: 0; overflow-wrap: anywhere; }
.survey-choices > .choice-long,
.survey-choices > .option:not(.time-card):has(+ .time-card) { flex-basis: 100%; }
.survey-choices .time-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "art text control";
  align-items: center;
  gap: .65rem;
  padding: .7rem;
  min-height: 94px;
}
.time-card input { grid-area: control; }
.skyline {
  grid-area: art;
  width: 4.2rem;
  aspect-ratio: 1;
  border-radius: 7px;
  background-image: url("./skyline-times.webp");
  background-size: 200% 200%;
}
.skyline-day    { background-position: left top; }
.skyline-sunset { background-position: right top; }
.skyline-dusk   { background-position: left bottom; }
.skyline-night  { background-position: right bottom; }
.time-caption { grid-area: text; display: grid; gap: .1rem; }
.time-caption strong { font-size: 1rem; line-height: 1.15; }
.time-caption small { color: var(--muted); font-size: .82rem; }
@container survey-choices (max-width: 27rem) {
  .survey-choices > .choice-roomy { flex-basis: 100%; }
  .survey-choices .time-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "art control" "text text";
    align-items: start;
    align-content: start;
  }
  .time-card .skyline { width: min(100%, 4.2rem); }
}
.follow-up { border-top: 1px solid var(--line); padding-top: .8rem; }
.follow-up legend { padding: 0 .5rem 0 0; }
#survey-exit a { color: var(--accent); font-weight: 600; text-underline-offset: .15em; }

/* Approved forest survey presentation. Tyrus-only; preserves questionnaire and consent logic. */
:root{--bg:#f1efe6;--panel:#fffef9;--surface:#fffef9;--text:#203b32;--muted:#506358;--line:#d1d8c9;--control-line:#778a7c;--accent:#285547;--accent-soft:#e2ece1;--accent-ink:#fffef9;--focus:#3f6a52;font-family:"Space Grotesk",Arial,sans-serif}
body{background:var(--bg)}
.mast{background:#183d34;border:0;border-top:5px solid #bdc98e;color:#f7f8e9}
.mast>div{max-width:800px;height:70px}
.tyrus-brand{color:#f7f8e9;font:650 1rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.18em}
.tyrus-brand{flex:none;min-height:44px;letter-spacing:normal}
.tyrus-brand img{display:block;width:156px;height:auto;max-width:100%;background:none;border-radius:0;padding:0}
.tyrus-brand:focus-visible{outline:3px solid #f7f8e9;outline-offset:5px}
.column{width:min(calc(100% - 32px),620px);margin:40px auto 64px;padding:30px;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:18px}
.meta{color:var(--accent);border:0;padding:0;margin:0 0 18px;font-size:.7rem;letter-spacing:.06em}
h1{font-family:"Spectral",Georgia,serif;font-size:clamp(1.65rem,4.8vw,2.2rem);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin-bottom:18px;color:#183d34}
.column>p{font-size:1rem;line-height:1.55;margin-bottom:22px}
.column form{margin-top:22px}
.option{min-height:64px;padding:16px;border:1px solid var(--control-line);border-radius:10px;background:#f2f5eb;font-size:1rem;font-weight:550;line-height:1.35;gap:12px;box-shadow:none}
.option:hover{background:#e7eddb;border-color:#285547}
.option:has(:checked){background:#285547;color:#fffef9;border-color:#285547;box-shadow:none}
.option:has(:checked) small{color:#f7f8e9}
input[type=radio],input[type=checkbox]{width:22px;height:22px;accent-color:#285547}
.option:has(:checked) input{accent-color:#fffef9}
.option:focus-within{outline:3px solid #3f6a52;outline-offset:3px}
:focus-visible{outline:3px solid #3f6a52;outline-offset:3px}
.actions{border-top:1px solid var(--line);padding-top:20px;gap:12px}
button{min-height:52px;padding:12px 24px;border-radius:10px;font-size:1rem;font-weight:650}
button:not(.secondary):hover{background:#183d34;filter:none}
.secondary{background:transparent;color:#183d34;border:1px solid #778a7c}.secondary:hover{background:#e7eddb;filter:none}
input:not([type=radio],[type=checkbox]),textarea,select{border-radius:10px;min-height:52px;font-size:16px;border-color:var(--control-line)}
.error:not(:empty){padding:12px 14px;border-left:3px solid #285547;background:#e2ece1;border-radius:4px}
@media(max-width:500px){.mast>div{height:60px;padding:0 20px}.column{padding:23px 18px;margin-top:24px;border-radius:14px}.option{min-height:62px;padding:13px 12px;gap:9px}.actions button{flex:1}.column form{margin-top:20px}}
@media(max-width:360px){.column{padding:22px 16px}.survey-choices > .option{padding:10px 8px;gap:7px}}
@media(prefers-reduced-motion:reduce){.option{transition:none}}
@media(forced-colors:active){.option:has(:checked){border:3px solid Highlight}.option:focus-within{outline:3px solid Highlight}}

.consent-choice:has(:checked) a { color: var(--accent-ink); }

/* Counts completed screens, not individual conditional questions or elapsed time. */
.survey-progress{display:block;width:100%;height:6px;margin:0 0 26px;border:0;border-radius:3px;overflow:hidden;appearance:none;background:#cdd8ce;color:#2b5141}
.survey-progress[hidden]{display:none}
.survey-progress::-webkit-progress-bar{background:#cdd8ce;border-radius:3px}
.survey-progress::-webkit-progress-value{background:#2b5141;border-radius:3px}
.survey-progress::-moz-progress-bar{background:#2b5141;border-radius:3px}

/* Dashboard tabs and row links use dark text on a light hover surface. */
.wide nav button:hover,
.wide .link:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.wide input[aria-invalid="true"] { border-color: #8e312d; }