/* Public pages (landing, intake, caregiver application, sign-in) on the Already
   Caring design system. Requires /design/tokens.css and /design/components.css.
   Only layout that the component library does not cover lives here, prefixed pub-. */

body.ac { min-height: 100dvh; display: flex; flex-direction: column; }
body.ac > main { flex: 1; }

.pub-wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 var(--ac-space-4); }
.pub-narrow { max-width: 40rem; }

.pub-skip { position: absolute; left: var(--ac-space-3); top: -4rem; z-index: 100; background: #fff; color: var(--ac-brand); padding: var(--ac-space-3) var(--ac-space-4); border-radius: var(--ac-radius-sm); font-weight: 800; }
.pub-skip:focus { top: var(--ac-space-3); }

/* ---------- top bar ---------- */
.pub-top { background: var(--ac-brand); color: #fff; }
.pub-top .pub-wrap { display: flex; align-items: center; gap: var(--ac-space-3); min-height: var(--ac-topbar-h); }
.pub-brand { margin-right: auto; font: 600 1.35rem/1 var(--ac-font-display); letter-spacing: -0.01em; color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--ac-tap); }
.ac .pub-brand { color: #fff; text-decoration: none; }
.pub-brand i { margin-left: 0.25em; font-style: normal; color: var(--ac-on-brand-accent); }
.pub-top a.pub-toplink { color: #fff; font-weight: 800; font-size: var(--ac-text-sm); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--ac-tap); padding: 0 var(--ac-space-3); border-radius: var(--ac-radius-sm); }
.ac .pub-top a.pub-toplink { color: #fff; text-decoration: none; }
.pub-top a.pub-toplink:hover { background: var(--ac-brand-hover); }
.pub-top a.pub-toplink--solid { background: #fff; color: var(--ac-brand); }
.ac .pub-top a.pub-toplink--solid { color: var(--ac-brand); }
.pub-top a.pub-toplink--solid:hover { background: var(--ac-brand-subtle-2); }
.pub-top :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ac-brand); }

/* ---------- hero ---------- */
.pub-hero { background: var(--ac-brand); color: #fff; padding: var(--ac-space-6) 0 0; position: relative; }
.pub-hero__grid { display: grid; gap: var(--ac-space-5); align-items: center; }
.pub-hero h1 { color: #fff; font-size: var(--ac-text-display); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.pub-hero__lede { margin: var(--ac-space-4) 0 0; font-size: var(--ac-text-lg); line-height: 1.5; color: #dde9e1; max-width: 40ch; }
.pub-hero__art { display: none; }
.pub-hero__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0; }

/* the two doors sit on the hero's lower edge and overlap the paper below */
.pub-doors { display: grid; gap: var(--ac-space-3); margin-top: var(--ac-space-6); margin-bottom: -3rem; position: relative; z-index: 2; }
.pub-door { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--ac-space-4); align-items: center; padding: var(--ac-space-4); background: var(--ac-surface); color: var(--ac-text); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-shadow-3); text-decoration: none; border: 2px solid transparent; transition: transform var(--ac-dur) var(--ac-ease), border-color var(--ac-dur-fast); }
.ac a.pub-door { color: var(--ac-text); text-decoration: none; }
.pub-door:hover { transform: translateY(-2px); border-color: var(--ac-accent); }
.pub-door img { width: 4.25rem; height: 4.25rem; }
.pub-door__title { display: block; font: 600 var(--ac-text-lg)/1.2 var(--ac-font-display); color: var(--ac-brand); }
.pub-door__text { display: block; margin-top: var(--ac-space-1); font-size: var(--ac-text-sm); color: var(--ac-text-muted); line-height: 1.4; }
.pub-door__go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--ac-space-3); min-height: var(--ac-tap); padding: 0 var(--ac-space-4); border-radius: var(--ac-radius-md); background: var(--ac-brand); color: #fff; font-weight: 800; }
.pub-door--work .pub-door__go { background: var(--ac-accent); }
.pub-door :focus-visible { outline-offset: 3px; }

.pub-after-doors { padding-top: calc(3rem + var(--ac-space-6)); }

/* ---------- sections ---------- */
.pub-section { padding: var(--ac-space-7) 0; }
.pub-section--tint { background: var(--ac-surface); border-top: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); }
.pub-section h2 { font-size: var(--ac-text-xl); max-width: 22ch; text-wrap: balance; }
.pub-section__lede { max-width: 56ch; color: var(--ac-text-muted); margin: var(--ac-space-3) 0 0; }

.pub-two { display: grid; gap: var(--ac-space-6); }
.pub-art { margin: 0; }
.pub-art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); border: 1px solid var(--ac-border); background: #f3e6d3; }
.pub-art figcaption { margin-top: var(--ac-space-2); font-size: var(--ac-text-xs); color: var(--ac-text-faint); }

.pub-steps { list-style: none; margin: var(--ac-space-5) 0 0; padding: 0; display: grid; gap: var(--ac-space-4); counter-reset: step; }
.pub-steps li { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--ac-space-4); align-items: start; }
.pub-steps li::before { content: counter(step); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ac-brand); color: var(--ac-on-brand-accent); display: grid; place-items: center; font: 600 1.25rem/1 var(--ac-font-display); }
.pub-steps h3 { font: 800 var(--ac-text-md)/1.3 var(--ac-font-body); color: var(--ac-text); margin: 0; }
.pub-steps p { margin: 2px 0 0; color: var(--ac-text-muted); }

.pub-ticks { list-style: none; margin: var(--ac-space-4) 0 0; padding: 0; display: grid; gap: var(--ac-space-3); }
.pub-ticks li { display: flex; gap: var(--ac-space-3); align-items: flex-start; }
.pub-ticks .ac-icon { color: var(--ac-ok); margin-top: 2px; }

.pub-states { display: grid; gap: var(--ac-space-3); margin-top: var(--ac-space-5); }
.pub-state { display: block; padding: var(--ac-space-4); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); text-decoration: none; color: var(--ac-text); min-height: var(--ac-tap); }
.ac a.pub-state { color: var(--ac-text); text-decoration: none; }
.pub-state:hover { border-color: var(--ac-brand); background: var(--ac-brand-subtle); }
.pub-state b { display: block; font: 600 var(--ac-text-lg)/1.2 var(--ac-font-display); color: var(--ac-brand); }
.pub-state span { color: var(--ac-text-muted); font-size: var(--ac-text-sm); }

/* ---------- forms ---------- */
.pub-form { display: grid; gap: var(--ac-space-4); }
.pub-form .ac-btn { width: 100%; }
.pub-status { margin: 0; font-weight: 700; }
.pub-status:empty { display: none; }
.pub-status[data-kind="error"] { color: var(--ac-danger); }
.pub-status[data-kind="ok"] { color: var(--ac-ok); }
.pub-fine { font-size: var(--ac-text-xs); color: var(--ac-text-muted); margin: 0; line-height: 1.5; }
.pub-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-shadow-2); padding: var(--ac-space-5); }
.pub-card > h2, .pub-card > h1 { margin-bottom: var(--ac-space-2); }
.pub-optional { font-weight: 400; color: var(--ac-text-muted); }

/* ---------- page head for task pages ---------- */
.pub-task { padding-top: var(--ac-space-6); padding-bottom: var(--ac-space-8); }
.pub-task h1 { font-size: var(--ac-text-xl); text-wrap: balance; }
.pub-task__lede { color: var(--ac-text-muted); margin: var(--ac-space-2) 0 var(--ac-space-5); }
.pub-back { display: inline-flex; align-items: center; gap: var(--ac-space-2); min-height: var(--ac-tap); font-weight: 800; margin-left: calc(var(--ac-space-2) * -1); padding: 0 var(--ac-space-2); }

/* ---------- intake assistant chat ---------- */
.pub-chat { display: grid; gap: var(--ac-space-3); }
.pub-log { display: grid; gap: var(--ac-space-3); max-height: 55dvh; overflow-y: auto; padding: var(--ac-space-4); background: var(--ac-surface-sunken); border-radius: var(--ac-radius-md); border: 1px solid var(--ac-border); }
.pub-msg { max-width: 88%; padding: var(--ac-space-3) var(--ac-space-4); border-radius: var(--ac-radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.pub-msg--agent { background: var(--ac-surface); border: 1px solid var(--ac-border); justify-self: start; border-bottom-left-radius: 4px; }
.pub-msg--agent b { display: block; font-size: var(--ac-text-xs); color: var(--ac-text-muted); margin-bottom: 2px; }
.pub-msg--me { background: var(--ac-brand); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.pub-msg--note { justify-self: center; font-size: var(--ac-text-sm); color: var(--ac-text-muted); }
.pub-compose { display: grid; gap: var(--ac-space-2); }
.pub-compose__row { display: flex; gap: var(--ac-space-2); }
.pub-compose__row .ac-input { flex: 1; }
.pub-compose__row .ac-btn { width: auto; }
.pub-progress { height: 8px; border-radius: 8px; background: var(--ac-brand-subtle-2); overflow: hidden; }
.pub-progress > i { display: block; height: 100%; width: 0; background: var(--ac-brand); transition: width var(--ac-dur-slow) var(--ac-ease); }

.pub-choices { display: grid; gap: var(--ac-space-3); }
.pub-choice { display: block; width: 100%; text-align: left; padding: var(--ac-space-4); background: var(--ac-surface); border: 2px solid var(--ac-border-strong); border-radius: var(--ac-radius-md); cursor: pointer; font: inherit; color: inherit; }
.pub-choice:hover { border-color: var(--ac-brand); background: var(--ac-brand-subtle); }
.pub-choice b { display: block; font-size: var(--ac-text-md); color: var(--ac-brand); }
.pub-choice span { color: var(--ac-text-muted); font-size: var(--ac-text-sm); }

.pub-done { text-align: left; }
.pub-done__when { font: 600 var(--ac-text-lg)/1.3 var(--ac-font-display); color: var(--ac-brand); margin: var(--ac-space-3) 0; }

/* ---------- footer ---------- */
footer { background: var(--ac-brand); margin-top: var(--ac-space-7); }
.pub-foot { background: var(--ac-brand); color: #dde9e1; padding: var(--ac-space-6) 0 var(--ac-space-7); font-size: var(--ac-text-sm); }
.pub-foot p { margin: 0 0 var(--ac-space-3); max-width: 70ch; }
.pub-foot b { color: #fff; }
.pub-foot__addr { opacity: 0.9; }
.pub-foot a { color: #fff; }
.pub-foot ul { list-style: none; margin: var(--ac-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ac-space-1) var(--ac-space-4); }
.pub-foot li a { display: inline-flex; align-items: center; min-height: var(--ac-tap); }
.pub-foot :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ac-brand); }

.pub-disclosure { margin-top: var(--ac-space-6); }

@media (min-width: 40rem) {
  .pub-wrap { padding: 0 var(--ac-space-5); }
  .pub-doors { grid-template-columns: 1fr 1fr; gap: var(--ac-space-4); }
  .pub-door { grid-template-columns: 5rem 1fr; padding: var(--ac-space-5); align-content: start; }
  .pub-door img { width: 5rem; height: 5rem; }
  .pub-states { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .pub-hero { padding-top: var(--ac-space-7); }
  .pub-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--ac-space-7); align-items: end; }
  .pub-hero__art { display: block; align-self: end; }
  .pub-hero__art img { max-height: 24rem; object-fit: cover; object-position: top; }
  .pub-doors { margin-top: var(--ac-space-6); margin-bottom: -3.5rem; }
  .pub-after-doors { padding-top: calc(3.5rem + var(--ac-space-6)); }
  .pub-two { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--ac-space-8); }
  .pub-two--form { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* the hidden attribute must win over component display rules */
.ac [hidden] { display: none !important; }
footer .pub-foot { background: var(--ac-brand); }

/* ---------- home page: status bar, hero buttons, chips, FAQ ---------- */

.pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ac-space-3); margin-top: var(--ac-space-5); }
.ac .pub-hero__actions a.ac-btn { background: var(--ac-on-brand-accent); color: var(--ac-brand); border-color: var(--ac-on-brand-accent); text-decoration: none; }
.ac .pub-hero__actions a.ac-btn--secondary { background: transparent; color: #fff; border-color: #fff; }
.pub-hero__actions :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ac-brand); }

.pub-chips { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); margin-top: var(--ac-space-3); }
.pub-chips span { display: inline-flex; align-items: center; background: var(--ac-ok-bg); color: var(--ac-ok); font-size: var(--ac-text-xs); font-weight: 800; line-height: 1.2; padding: 0.2rem 0.65rem; border-radius: var(--ac-radius-pill); }
.pub-chips span::before { content: "\2713"; margin-right: 0.35rem; }

.pub-faq { margin-top: var(--ac-space-4); border-top: 1px solid var(--ac-border-strong); }
.pub-faq details { border-bottom: 1px solid var(--ac-border-strong); }
.pub-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-space-4); min-height: var(--ac-tap); padding: var(--ac-space-3) 0; cursor: pointer; list-style: none; font-weight: 800; font-size: var(--ac-text-md); color: var(--ac-text); }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--ac-accent); }
.pub-faq details[open] summary::after { content: "\2013"; }
.pub-faq details p { margin: 0 0 var(--ac-space-4); color: var(--ac-text-muted); max-width: 60ch; }
.pub-top a.pub-toplink { white-space: nowrap; }
.pub-top a.pub-toplink--work { display: none; }
@media (min-width: 40rem) { .pub-top a.pub-toplink--work { display: inline-flex; } }

/* ---------- home page v3: light lead with the waitlist form in it ---------- */
.pub-lead { padding: var(--ac-space-6) 0 var(--ac-space-7); }
.pub-lead__grid { display: grid; gap: var(--ac-space-6); align-items: center; }
.pub-lead__label { margin: 0 0 var(--ac-space-3); font-size: var(--ac-text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ac-accent); }
.pub-lead h1 { font-size: var(--ac-text-display); line-height: 1.06; letter-spacing: -0.02em; color: var(--ac-brand); text-wrap: balance; max-width: 16ch; }
.pub-lead__accent { display: block; color: var(--ac-accent); }
.pub-lead__lede { margin: var(--ac-space-4) 0 0; font-size: var(--ac-text-lg); line-height: 1.5; color: var(--ac-text-muted); max-width: 40ch; }
.pub-lead__form { display: grid; gap: var(--ac-space-3); margin-top: var(--ac-space-5); max-width: 34rem; }
.pub-lead__row { display: grid; gap: var(--ac-space-2); }
.pub-lead__row .ac-btn { width: 100%; }
.pub-lead__art { display: none; }
.pub-lead__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); border: 1px solid var(--ac-border); background: #f3e6d3; }

.pub-rows { list-style: none; margin: var(--ac-space-5) 0 0; padding: 0; display: grid; gap: var(--ac-space-3); }
.pub-rows li { display: grid; gap: var(--ac-space-1); padding: var(--ac-space-4); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); }
.pub-rows__no { color: var(--ac-text-muted); }
.pub-rows__no::before { content: "\2717"; margin-right: 0.6rem; }
.pub-rows__yes { color: var(--ac-ok); font-weight: 800; }
.pub-rows__yes::before { content: "\2713"; margin-right: 0.6rem; }
.pub-faq__cta { margin: var(--ac-space-6) 0 0; }

@media (min-width: 40rem) {
  .pub-lead__row { grid-template-columns: 1fr auto; }
  .pub-lead__row .ac-btn { width: auto; }
  .pub-rows li { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--ac-space-4); }
}
@media (min-width: 64rem) {
  .pub-lead { padding-top: var(--ac-space-7); }
  .pub-lead__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--ac-space-7); }
  .pub-lead__art { display: block; }
}

/* ---------- sign-in: who this page is for ---------- */
.pub-aside { margin-top: var(--ac-space-5); padding-top: var(--ac-space-4); border-top: 1px solid var(--ac-border); display: grid; gap: var(--ac-space-2); }
.pub-aside p { margin: 0; color: var(--ac-text-muted); }
.pub-aside a { display: inline-flex; align-items: center; min-height: var(--ac-tap); font-weight: 800; }

.pub-lead__gets { margin: var(--ac-space-4) 0 0; }

/* "Could Home Help fit your family?" check (home-help-check.js) */
.pub-check { display: grid; gap: var(--ac-space-6); margin-top: var(--ac-space-5); }
.pub-check__rest { display: grid; gap: var(--ac-space-6); }
.pub-check__rest[hidden] { display: none; }
.pub-check .ac-btn { justify-self: start; }
.pub-check__result { margin-top: var(--ac-space-5); }
.pub-check__result:empty { display: none; }
.pub-check__result h3 { margin: 0 0 var(--ac-space-3); }
.pub-check__result ul, .pub-check__result ol { padding-left: 1.25rem; display: grid; gap: var(--ac-space-3); margin: 0 0 var(--ac-space-4); }
.pub-check__result p { margin: 0 0 var(--ac-space-3); }
.pub-check__err { color: var(--ac-danger); font-weight: 800; }
.pub-lead__check { margin-top: var(--ac-space-3); font-size: var(--ac-text-sm); }
/* Optional second step and share prompt after a Michigan family joins the waitlist. */
.pub-followup { margin-top: var(--ac-space-4); padding: var(--ac-space-4); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); }
.pub-followup__title { margin: 0; font-size: var(--ac-text-lg); font-weight: 800; }
.pub-share { display: grid; gap: var(--ac-space-2); justify-items: start; margin-top: var(--ac-space-4); max-width: 34rem; }
.pub-share__text { margin: 0; font-weight: 700; }