/*
 * Intake Assessment — /intake-assessment/
 *
 * The form a digital admin fills in on site at a small business. It is a
 * working instrument, not a marketing page: dense, high-contrast, printable,
 * and it must survive a closed laptop lid mid-interview (assessment.js keeps
 * every field in localStorage).
 *
 * Everything here is built from the theme tokens in style.css. Green is the
 * "go" accent already used for pill hovers; it carries the ratings and the
 * submit affordance. Gold stays as the section marker so the page still reads
 * as ours.
 */

.assess {
  padding: calc(var(--nav-h) + 3rem) var(--tile-pad-x) var(--tile-pad-y);
  background: var(--bg-white, #fff);
}
.assess__inner { max-width: 1040px; margin: 0 auto; }

/* ---------- masthead ---------- */
.assess__head { padding-bottom: 1.75rem; border-bottom: 2px solid var(--text-primary); }
.assess__eyebrow {
  font-size: var(--text-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 0.75rem;
}
.assess__h {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700;
  letter-spacing: var(--track-tile); line-height: 1.08;
  margin: 0 0 0.75rem; color: var(--text-primary); text-wrap: balance;
}
.assess__lede { margin: 0; color: var(--text-secondary); max-width: 64ch; font-size: 1rem; }

/* ---------- action bar ---------- */
.assess__bar {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: #fff; border-bottom: 1px solid var(--border-light);
  margin: 0 calc(var(--tile-pad-x) * -1) 0;
  padding: 0.625rem var(--tile-pad-x);
  display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap;
}
.assess__who { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); margin-right: auto; }
.assess__who span { color: var(--text-muted); font-weight: 400; }
.assess__prog {
  font-size: 0.8125rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.assess__btn {
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; background: #fff; color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; min-height: 40px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.assess__btn:hover { border-color: var(--green); color: var(--green-deep); }
.assess__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.assess__btn--go { background: var(--green); border-color: var(--green); color: #fff; }
.assess__btn--go:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }

/* ---------- sections ---------- */
.assess__note {
  font-size: 0.875rem; color: var(--text-secondary);
  background: var(--bg-tint, hsl(220, 20%, 97%));
  border: 1px dashed var(--border-light); border-radius: var(--radius-card);
  padding: 0.75rem 1rem; margin: 1.5rem 0 0;
}
/* Outcome of a save, and the signed-out warning. Shown above the form so it is
   read before the admin starts typing, not after an hour of work. */
.assess__flash {
  margin: 1.25rem 0 0;
  padding: 0.8125rem 1rem;
  border-radius: var(--radius-card);
  font-size: 0.9375rem;
  border: 1px solid var(--border-light);
}
.assess__flash--ok {
  background: hsl(157, 40%, 95%);
  border-color: var(--green);
  color: var(--green-deep);
}
.assess__flash--warn {
  background: hsl(38, 70%, 95%);
  border-color: hsl(38, 68%, 45%);
  color: hsl(33, 85%, 26%);
}
/* Telling a visitor how this works is not a warning. It used to be styled
   as one, because what it said WAS bad news — that nothing could be sent.
   It now describes normal behaviour and is coloured accordingly. */
.assess__flash--info {
  background: hsl(214, 60%, 96%);
  border-color: hsl(214, 45%, 62%);
  color: hsl(214, 60%, 26%);
}

/* The honeypot.
   
   Off-screen, and it MUST stay that way. Visible, a real person would read
   "Leave this empty", and anyone who typed in it would have their whole
   assessment silently discarded by the handler — sixty answers dropped with
   a thank-you message, which is the worst failure this page could have.
   Not display:none: some bots skip hidden fields, and filling it is the
   signal we want. */
.assess__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.assess-sec {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 1.375rem;
  margin-top: 1.25rem;
}
.assess-sec__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.assess-sec__num {
  font-size: 0.8125rem; font-weight: 700; color: var(--gold-text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.assess-sec__h {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.01em; margin: 0; color: var(--text-primary);
}
.assess-sec__why { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-secondary); max-width: 70ch; }

.assess-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem 1.125rem; }
.assess-grid--3 { grid-template-columns: repeat(3, 1fr); }
.assess-f--full { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .assess-grid, .assess-grid--3 { grid-template-columns: 1fr; }
}

.assess-f { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.assess-f > label, .assess-lbl {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-secondary);
}
.assess-f input[type="text"],
.assess-f input[type="date"],
.assess-f select,
.assess-f textarea {
  font-family: var(--font-body); font-size: 0.9375rem; width: 100%;
  background: #fff; color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-sharp);
  padding: 0.5rem 0.625rem; min-height: 42px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.assess-f input:focus, .assess-f select:focus, .assess-f textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px hsla(157, 60%, 30%, 0.14);
}
.assess-f textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.assess-f select { cursor: pointer; }

.assess-opts { display: flex; flex-wrap: wrap; gap: 0.4375rem 0.875rem; }
.assess-opt {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.9375rem; cursor: pointer; min-height: 34px; color: var(--text-primary);
}
.assess-opt input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; margin: 0; flex: none; }

/* ---------- ratings ---------- */
.assess-rag {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  margin-top: 1.125rem; padding-top: 0.9375rem;
  border-top: 1px dashed var(--border-light);
}
.assess-rag__opts { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.assess-rag__opt { position: relative; }
.assess-rag__opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.assess-rag__opt span {
  display: inline-block; padding: 0.3125rem 0.8125rem;
  border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600;
  cursor: pointer; min-height: 32px; line-height: 21px;
  border: 1px solid var(--border-light); color: var(--text-secondary); background: #fff;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.assess-rag__opt input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.assess-rag__opt input:checked + span[data-r="ok"]   { background: hsl(157, 40%, 94%); color: var(--green-deep); border-color: var(--green); }
.assess-rag__opt input:checked + span[data-r="warn"] { background: hsl(38, 70%, 93%); color: hsl(33, 85%, 28%); border-color: hsl(38, 68%, 45%); }
.assess-rag__opt input:checked + span[data-r="risk"] { background: hsl(8, 60%, 95%); color: hsl(8, 68%, 34%); border-color: hsl(8, 62%, 48%); }
.assess-rag__opt input:checked + span[data-r="na"]   { background: hsl(220, 16%, 95%); color: var(--text-primary); border-color: var(--text-muted); }

/* ---------- summary ---------- */
.assess-sec--sum { border-left-color: var(--green); }
.assess-roll { display: flex; flex-direction: column; gap: 0.375rem; margin: 0 0 1.125rem; padding: 0; list-style: none; }
.assess-roll li {
  display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem;
  padding: 0.4375rem 0.6875rem; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sharp); background: hsl(220, 20%, 98%);
}
.assess-roll__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.assess-roll__dot.ok   { background: var(--green); }
.assess-roll__dot.warn { background: hsl(38, 68%, 45%); }
.assess-roll__dot.risk { background: hsl(8, 62%, 48%); }
.assess-roll__name { flex: 1; min-width: 0; }
.assess-roll__state { font-weight: 700; font-size: 0.8125rem; color: var(--text-secondary); }
.assess-roll__state.ok   { color: var(--green-deep); }
.assess-roll__state.warn { color: hsl(33, 85%, 28%); }
.assess-roll__state.risk { color: hsl(8, 68%, 34%); }
.assess-roll__empty { font-size: 0.875rem; color: var(--text-muted); font-style: italic; }

.assess-flags {
  border: 1px solid hsl(8, 62%, 55%); background: hsl(8, 60%, 97%);
  border-radius: var(--radius-card); padding: 0.9375rem 1rem; margin-bottom: 1.125rem;
}
.assess-flags .assess-lbl { color: hsl(8, 68%, 34%); display: block; margin-bottom: 0.5625rem; }

.assess__foot {
  margin-top: 1.75rem; padding-top: 1.125rem; border-top: 1px solid var(--border-light);
  font-size: 0.8125rem; color: var(--text-muted);
  display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
}
.assess-toast {
  position: fixed; bottom: 1.25rem; left: 50%;
  transform: translateX(-50%) translateY(6rem);
  background: var(--text-primary); color: #fff;
  padding: 0.625rem 1.125rem; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600; z-index: 60;
  transition: transform var(--dur-base) var(--ease-out);
}
.assess-toast.is-on { transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .assess-toast { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .assess__bar, .site-header, .site-footer, .assess__no-print { display: none !important; }
  .assess { padding: 0; }
  .assess-sec {
    border: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid;
    margin-top: 0.625rem; padding: 0.75rem 0.875rem;
  }
  .assess-f input, .assess-f select, .assess-f textarea { border: 1px solid #999; }
  .assess-f textarea { min-height: 3rem; }
  .assess__h { font-size: 1.5rem; }
  .assess-sec__h { font-size: 1rem; }
  body { font-size: 11px; }
}

/* Superseded by .assess__choose below. Kept because staff never see the
   choice block and nothing else uses this. */
.assess__shortcut {
  margin: 0 0 2rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--gold, #a3721f);
  background: rgba(163, 114, 31, .07);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
}
.assess__shortcut a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- the two ways in ----
   A one-line "short on time?" was too easy to miss above a form this long.
   Both routes are now stated side by side, before any question is asked,
   with the length of each said plainly. Nobody should discover on section
   nine that there was a one-minute version. */
.assess__choose {
  margin: 0 0 2rem;
  padding: 1.25rem 1.35rem 1.35rem;
  background: hsl(214, 42%, 97%);
  border: 1px solid hsl(214, 38%, 86%);
  border-radius: 12px;
}
.assess__choose-h {
  margin: 0 0 .9rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: hsl(214, 30%, 42%);
}
.assess__choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.assess__choose-opt {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid hsl(214, 30%, 89%);
  border-radius: 10px;
}
.assess__choose-opt b { font-size: 1.05rem; }
.assess__choose-opt span { font-size: .95rem; line-height: 1.55; color: #4a5568; }
.assess__choose-opt em {
  font-size: .9rem;
  font-style: normal;
  font-weight: 600;
  color: hsl(214, 30%, 42%);
}
/* The one they are already on gets the quieter treatment: the point of the
   block is to surface the option they have NOT seen. */
.assess__choose-opt--here { background: transparent; border-style: dashed; }
.assess__choose-go {
  margin-top: .35rem;
  align-self: flex-start;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- the folded audit ---- */
.assess-more {
  margin: 0 0 1.5rem;
  border: 1px solid hsl(214, 30%, 88%);
  border-radius: 12px;
  background: #fff;
}
.assess-more__sum {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.assess-more__sum::-webkit-details-marker { display: none; }
.assess-more__sum::before {
  content: '';
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 140ms ease;
}
.assess-more[open] .assess-more__sum::before { transform: rotate(90deg); }
.assess-more__sum:hover { background: hsl(214, 42%, 98%); }
.assess-more__sum:focus-visible { outline: 2px solid hsl(214, 60%, 50%); outline-offset: 2px; }
.assess-more__title { font-size: 1.05rem; font-weight: 700; }
.assess-more__note { font-size: .92rem; color: #5a6578; }
.assess-more__body { padding: 0 1.2rem 1.2rem; }

/* ---- send, at the bottom where finishing happens ---- */
.assess__send {
  margin: 2rem 0 1rem;
  padding: 1.35rem;
  text-align: center;
  background: hsl(214, 42%, 97%);
  border-radius: 12px;
}
.assess__send .assess__btn--go { font-size: 1.05rem; padding: .85rem 1.6rem; }
.assess__send-note { margin: .75rem 0 0; font-size: .92rem; color: #5a6578; }

/* The instruction under "In a Hurry?" — a line of its own, sized between
   the heading and the explanation beneath it, so the three read as a
   sequence rather than a paragraph that happens to start bold. */
.assess__choose-lead {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy, #0e1b39);
}