:root {
  color-scheme: light;
  --ink: #173c65;
  --ink-dark: #102b49;
  /* Dark enough for 4.5:1 text on the cream ground; white-on-green hover also passes. */
  --green: #456851;
  --cream: #f6f1e8;
  --paper: #fffdf9;
  --line: #d7d8d2;
  --muted: #53616d;
  --error: #9e2f2f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: #21313e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--ink); }
a:hover { color: var(--green); }

.site-header {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 1rem max(1.25rem, calc((100% - 860px) / 2));
}

.brand {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  gap: .65rem;
  text-decoration: none;
}

/* The real logo mark. It is decorative: the wordmark beside it names the practice, so the image
   carries alt="" and the link's accessible name stays "Rivanna Counseling". */
.brand-mark {
  display: inline-block;
  height: 2.25rem;
  width: 2.25rem;
  object-fit: contain;
}

.phone-link { font-size: .9rem; font-weight: 700; }

main {
  margin: 0 auto;
  max-width: 860px;
  padding: 3.5rem 1.25rem 5rem;
}

.intro { max-width: 720px; }
.eyebrow { color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { color: var(--ink-dark); font-family: Georgia, serif; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.05; margin: .5rem 0 1.25rem; }
.lede { color: var(--muted); font-size: 1.2rem; }

.crisis {
  background: #fff7df;
  border-left: 5px solid #c28b23;
  margin: 2rem 0;
  padding: 1rem 1.2rem;
}
.crisis p { margin: .35rem 0 0; }

form { display: grid; gap: 1.25rem; }
fieldset {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 1.5rem;
}
legend { color: var(--ink-dark); font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; padding: 0 .4rem; }
.section-note, .hint { color: var(--muted); font-size: .9rem; margin: -.55rem 0 0; }
/* Author display rules override the UA's [hidden] style, so restore it. */
[hidden] { display: none !important; }
.field { display: grid; gap: .45rem; }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
label, .label { color: var(--ink-dark); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  background: white;
  border: 1px solid #6b7480;
  border-radius: 7px;
  color: #172633;
  font: inherit;
  min-height: 3rem;
  padding: .65rem .75rem;
  width: 100%;
}

/* Two-tone focus indicator: dark ring for the light grounds, white gap fill for dark buttons. */
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px white; }
[aria-invalid="true"] { border-color: var(--error) !important; }

.choices { display: grid; gap: .65rem; }
.choices.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices label { align-items: flex-start; display: flex; font-weight: 500; gap: .55rem; }
.choices input { flex: 0 0 auto; height: 1.15rem; margin-top: .25rem; width: 1.15rem; }

.insurance-panel, .payment-note, .conditional-panel { background: #edf4ee; border-radius: 8px; padding: 1rem; }
.insurance-result { background: #e1f2e6; border-left: 4px solid var(--green); border-radius: 5px; color: #20452d; font-size: .9rem; margin-top: .65rem; padding: .8rem .9rem; }
.insurance-result[data-result="conditional"] { background: #fff7df; border-left-color: #c28b23; color: #694c0c; }
.insurance-result[data-result="not-accepted"] { background: #fff0f0; border-left-color: var(--error); color: #6d1f1f; }
.payment-note { color: #364d3b; font-size: .9rem; }
.payment-note p { margin: 0 0 .55rem; }
.payment-note p:last-child { margin: 0; }

.field-error { color: var(--error); font-size: .9rem; font-weight: 700; margin: 0; }
.error-summary { background: #fff0f0; border: 2px solid var(--error); border-radius: 8px; color: #6d1f1f; padding: 1rem; }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; }
button, .button-link {
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 800;
  padding: .85rem 1.35rem;
  text-decoration: none;
}
button:hover, .button-link:hover { background: var(--green); color: white; }
button:disabled { cursor: wait; opacity: .6; }
.submit-status { color: var(--muted); margin: 0; }
.privacy-note { color: var(--muted); font-size: .85rem; margin: 2rem 0 0; }
.bot-field { left: -10000px; position: absolute; top: auto; }
.success-page { max-width: 680px; padding-top: 8rem; }
/* --- Staff intake queue (admin app only) ------------------------------- */

.admin-header { flex-wrap: wrap; gap: .75rem 1.25rem; }
.app-identity { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem 1rem; }
.app-name { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dark); font-size: .74rem; font-weight: 800; letter-spacing: .11em; margin: 0; padding: .3rem .75rem; text-transform: uppercase; }
.header-links { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.app-nav { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.app-nav a { font-size: .9rem; font-weight: 700; }

.queue-tools { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 0 0 1.25rem; }
.queue-search { flex: 1 1 20rem; max-width: 28rem; }
.queue-search .hint { margin: 0; }

/* One stage at a time. Selection is carried by aria-selected, and the filled
   pill is a second cue so selection is never carried by color alone. */
.queue-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.queue-tab { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .88rem; font-weight: 700; padding: .5rem 1.05rem; }
.queue-tab:hover { background: var(--cream); color: var(--green); }
.queue-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: white; }
.queue-tab[aria-selected="true"]:hover { background: var(--ink-dark); color: white; }
.queue-panel { display: grid; gap: 1rem; }

.inquiry-list { display: grid; gap: 1rem; }
.inquiry-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
.inquiry-card h2 { color: var(--ink); font-family: Georgia, serif; font-size: 1.3rem; margin: 0; }
.stage-empty { color: var(--muted); margin: 0; }
.lead-stage-tag { background: #e1f2e6; border: 1px solid var(--green); border-radius: 999px; color: #20452d; display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .09em; margin: .35rem 0 0; padding: .12rem .6rem; text-transform: uppercase; }

.lead-head { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; }
.lead-meta { color: var(--muted); font-size: .88rem; margin: .25rem 0 0; }
.lead-cta { flex: 0 0 auto; }

/* The stage a request sits in is named in .lead-meta as well, so the flow is
   never the only place that information appears. */
.stage-flow { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.stage-flow li { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .7rem; text-transform: uppercase; }
.stage-flow .stage-current { background: #e1f2e6; border-color: var(--green); color: #20452d; }
/* An empty pseudo-element: a second, non-color cue that announces nothing. */
.stage-flow .stage-current::before { background: var(--green); border-radius: 50%; content: ""; display: inline-block; height: .45rem; margin-right: .4rem; width: .45rem; }

.lead-details { margin-top: 1.15rem; }
.lead-details > summary, .lead-activity > summary { color: var(--ink-dark); cursor: pointer; font-weight: 700; }
.inquiry-card dl { display: grid; gap: .45rem; grid-template-columns: minmax(8rem, 1fr) 2fr; margin: .85rem 0 0; }
.inquiry-card dl div { display: contents; }
.inquiry-card dt { color: var(--muted); font-weight: 700; }
.inquiry-card dd { margin: 0; overflow-wrap: anywhere; }

.lead-activity { border-top: 1px solid var(--line); margin-top: 1.15rem; padding-top: .85rem; }
.composer { background: var(--cream); border-radius: 8px; display: grid; gap: .85rem; margin: .85rem 0 1.15rem; padding: .95rem 1rem; }
.composer select { max-width: 18rem; }
.composer .hint { margin: 0; }
.composer-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.composer-status { color: var(--muted); font-size: .9rem; margin: 0; }

.timeline { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.timeline-entry { background: var(--cream); border-left: 3px solid var(--green); border-radius: 8px; padding: .6rem .8rem; }
.timeline-kind { color: var(--ink-dark); font-size: .74rem; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.timeline-meta { color: var(--muted); font-size: .82rem; margin: .1rem 0 0; }
.timeline-move { font-weight: 700; margin: .35rem 0 0; }
.timeline-text { margin: .35rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.timeline-empty { color: var(--muted); margin: .85rem 0 0; }

@media (max-width: 620px) {
  .field-grid, .choices.two-column { grid-template-columns: 1fr; }
  .site-header { align-items: flex-start; flex-direction: column; gap: .65rem; }
  main { padding-top: 2.5rem; }
  fieldset { padding: 1.15rem; }
  .lead-head { align-items: flex-start; flex-direction: column; }
  .queue-tools { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Available to assistive technology, absent from the visual design. Used where a requirement is
   conveyed visually by an asterisk and the container's role cannot carry aria-required. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}