/* Colors meet WCAG AA contrast against their backgrounds (text #1f2933 on #ffffff is 14.7:1). */
:root {
  --fg: #1f2933;
  --bg: #ffffff;
  --accent: #0b5cad;
  --focus: #b45309;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}

body { margin: 0; }
main, .site-header, .site-footer { max-width: 42rem; margin: 0 auto; padding: 1rem; }
a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; }

.site-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.site-header nav { display: flex; gap: 1rem; align-items: center; }
form.inline { display: inline; }
label { display: block; font-weight: 600; }
input[type="checkbox"] + label { display: inline; }
fieldset { margin: 0 0 1rem; }
.error { color: #9b1c1c; font-weight: 600; } /* 7.4:1 on white */
.hint { color: #4b5563; } /* 7.6:1 on white */
.notice { border-left: 4px solid var(--accent); padding-left: .75rem; }

/* Confirm form: the status text says read / not read; the border only repeats it (R29). */
.field { margin: 0 0 1rem; padding-left: .75rem; border-left: 4px solid transparent; }
.field-read { border-left-color: #0b5cad; }
.field-unread { border-left-color: #b45309; }
.field-status { margin: .25rem 0; }
input[type="text"], input[type="date"] { width: 100%; max-width: 30rem; padding: .4rem; font: inherit; }

/* Chat intake */
input[type="radio"] + label.inline-label { display: inline; font-weight: normal; }
textarea { width: 100%; box-sizing: border-box; font: inherit; }
.chat-log { border: 1px solid #9aa5b1; padding: .5rem 1rem; margin: 1rem 0; }
.chat-fallback { border-left: 4px solid var(--focus); padding-left: .75rem; }
.chat-crisis { border: 2px solid var(--focus); padding: .5rem .75rem; margin: .75rem 0; }
.chat-crisis h2 { font-size: 1.1rem; margin-top: 0; }
.chips fieldset { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { font-weight: 600; margin-bottom: .25rem; }

/* Keyboard users must always see where focus is (R29). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Appointment picker (R29): native radios give arrow-key navigation; the selected state is also
   shown as text, not just by colour or the dot. */
.slot-day { border: 1px solid #9aa5b1; padding: .5rem 1rem; }
.slot-day legend { font-weight: 600; }
.slot { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.slot label { display: inline; font-weight: normal; }
.slot input:checked + label { font-weight: 700; }
/* The text is for sighted users; the empty alt text after "/" keeps screen readers on the radio's
   own "checked" state instead of reading generated text inconsistently. Browsers without the alt
   syntax drop the second declaration and keep the first. */
.slot input:checked + label::after { content: " (selected)"; content: " (selected)" / ""; }
.notice { font-weight: 600; }

/* Step tools and supportive panels (T11, R29): save, withdraw, and exit sit on every step as
   plain buttons; a panel is a bordered note above the content, never an overlay. */
.step-tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-bottom: 1rem; }
.step-tools form { display: inline; }
.support-panel { border-left: 4px solid var(--accent); padding: .25rem .75rem; margin: 0 0 1rem; }
.support-panel h2 { font-size: 1.1rem; margin: .25rem 0; }