/* Recovery College palette — the mark's gradient plus the wordmark grey.
   The three gradient colours are DECORATIVE ONLY: measured against white they
   sit at 1.6-2.5:1, so they must never carry text or a thin interactive edge.
   Anything clickable, focusable or text-bearing uses --accent / --accent-dk,
   a darkened teal that clears AA (5.1:1 and 7.1:1 on white).
   Text ink stays the Bridge dark greys, which already read well. */
:root {
  --lime:#C6D62E; --leaf:#8DC85F; --teal:#54B2B0;   /* decorative gradient only */
  --accent:#2A7A72; --accent-dk:#1F625C;            /* interactive + text */
  --accent-wash:#EAF5F3;
  --grey:#6E6E6E; --lgrey:#a6a699; --offwhite:#f4f6f3;
  --heading:#292929; --body:#616161; --line:#e4e4de; --danger:#b00020;
  --radius:8px; --maxw:1080px;
  --font: "Proxima Nova", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
* { box-sizing:border-box; }
/* The browser's own [hidden] rule is weaker than any class that sets `display`,
   so `.btn { display:inline-flex }` silently defeated el.hidden = true — which
   left Submit and Back on show on every page of a multi-page form. Anything
   marked hidden must stay hidden. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); color:var(--body);
  background:var(--offwhite); line-height:1.5; font-size:16px;
}
h1,h2,h3,h4 { color:var(--heading); line-height:1.25; margin:0 0 .4em; font-weight:700; }
h1 { font-size:1.6rem; } h2 { font-size:1.25rem; } h3 { font-size:1.05rem; }
a { color:var(--accent-dk); }
p { margin:0 0 1rem; }

/* Layout */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.topbar { background:#fff; position:relative; }
.topbar::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--lime), var(--leaf), var(--teal)); }
.topbar .wrap { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { height:30px; width:auto; display:block; }
.brand .n { font-weight:700; color:var(--grey); letter-spacing:.02em; }
.nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav a { padding:8px 12px; border-radius:6px; color:var(--grey); text-decoration:none; font-weight:600; font-size:.92rem; }
.nav a:hover { background:var(--offwhite); }
.nav a.active { background:var(--accent); color:#fff; }
.nav form { margin:0; }
main { padding:28px 0 64px; }

/* Cards & tables */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px; }
.card h2:first-child, .card h3:first-child { margin-top:0; }
.grid { display:grid; gap:16px; }
.grid.cols-3 { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.94rem; vertical-align:top; }
th { color:var(--grey); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
tr:last-child td { border-bottom:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid transparent; border-radius:6px; padding:9px 16px;
  font:inherit; font-weight:600; font-size:.92rem; text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dk); }
.btn-ghost { background:#fff; color:var(--grey); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--lgrey); }
.btn-danger { background:#fff; color:var(--danger); border-color:#eccdd3; }
.btn-danger:hover { background:#fbeef1; }
.btn-sm { padding:5px 10px; font-size:.84rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Forms */
label { display:block; font-weight:600; color:var(--heading); margin:0 0 4px; font-size:.94rem; }
.help { color:var(--grey); font-size:.85rem; margin:-2px 0 8px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], input[type=search], select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--lgrey); border-radius:6px;
  font:inherit; color:var(--heading); background:#fff;
}
textarea { min-height:110px; resize:vertical; }
input:focus, select:focus, textarea:focus, .btn:focus, a:focus, [tabindex]:focus {
  outline:3px solid var(--accent); outline-offset:2px;
}
.field { margin-bottom:18px; }
.req { color:var(--danger); }
fieldset { border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin:0 0 18px; }
legend { font-weight:700; color:var(--heading); padding:0 6px; }
.choice { display:flex; align-items:flex-start; gap:9px; padding:6px 0; font-weight:400; color:var(--body); }
.choice input { width:auto; margin-top:3px; }

/* Pills / status */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.03em; }
.pill.draft { background:#efeee2; color:var(--grey); }
.pill.published { background:var(--accent-wash); color:#1c3d39; }
.pill.closed { background:#f3dfe0; color:var(--danger); }
.pill.admin { background:#efe1f0; color:var(--purple); }
.pill.viewer { background:#eef3d6; color:#6a7010; }
.pill.status-new { background:var(--accent-wash); color:#1c3d39; }
.pill.status-in_review { background:#fdefc9; color:#8a6d00; }
.pill.status-actioned { background:#e4f7d9; color:#3f6512; }

/* Flash + alerts */
.flash { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-weight:600; }
.flash.success { background:#e4f7d9; color:#3f6512; border:1px solid #cfeab4; }
.flash.error { background:#fbe6ea; color:var(--danger); border:1px solid #f0c9d1; }

.muted { color:var(--grey); }
.stat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.stat .num { font-size:1.9rem; font-weight:800; color:var(--accent-dk); line-height:1; }
.stat .lbl { color:var(--grey); font-size:.85rem; margin-top:4px; }

/* Report bars — single-hue magnitude; each row carries its number (never colour alone) */
.barrow { display:grid; grid-template-columns:180px 1fr 44px; gap:12px; align-items:center; margin:7px 0; }
.barrow .lbl { color:var(--body); font-size:.9rem; overflow-wrap:anywhere; }
.bartrack { background:var(--offwhite); border-radius:5px; height:22px; }
.barfill { height:100%; background:var(--accent); border-radius:5px; min-width:3px; }
.barval { text-align:right; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .barrow{ grid-template-columns:104px 1fr 38px; gap:8px; } }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:12px; background:#fff; padding:8px 14px; border-radius:6px; z-index:10; }

/* Builder: quiet insertion point between questions */
.insert-slot { display:flex; align-items:center; gap:10px; width:100%; border:0;
  background:none; cursor:pointer; font:inherit; font-size:.78rem; font-weight:600;
  color:var(--lgrey); padding:0 0 10px; }
.insert-slot::before, .insert-slot::after { content:''; flex:1; border-top:1px dashed var(--line); }
.insert-slot:hover, .insert-slot:focus-visible { color:var(--accent-dk); }
.insert-slot:hover::before, .insert-slot:hover::after,
.insert-slot:focus-visible::before, .insert-slot:focus-visible::after { border-top-color:var(--accent); }

/* Builder: drag to reorder. The grip is the only drag surface, so the fields
   inside a question stay selectable. */
.drag-handle { cursor:grab; color:var(--lgrey); font-size:1.15rem; line-height:1;
  padding:2px 4px; user-select:none; letter-spacing:-.1em; }
.drag-handle:active { cursor:grabbing; }
.drag-handle:hover { color:var(--accent-dk); }
[draggable="true"] { cursor:grab; }
.dragging { opacity:.4; }
/* While dragging, every gap lights up so the drop targets are obvious. */
body.is-dragging .insert-slot { color:var(--accent-dk); }
body.is-dragging .insert-slot::before, body.is-dragging .insert-slot::after { border-top-color:var(--accent); }
.insert-slot.drop-active { color:var(--accent-dk); font-weight:700; }
.insert-slot.drop-active::before, .insert-slot.drop-active::after { border-top:3px solid var(--accent); }

/* Image blocks inside forms */
.form-image { margin:0 0 18px; }
.form-image img { max-width:100%; height:auto; display:block; border-radius:8px; }
.form-image figcaption { color:var(--grey); font-size:.85rem; margin-top:6px; }

/* ==========================================================================
   Public form — Easy Read
   Built to Easy Read conventions (Accessible Information Standard): large text,
   short lines, one idea per block, plenty of white space, images beside text,
   high contrast, left-aligned, no italics or ALL CAPS in content.
   Everything here is scoped to .public-shell so the admin UI is unaffected.
   ========================================================================== */
.public-shell { max-width:640px; margin:0 auto; padding:0 18px; font-size:1.2rem; line-height:1.7; }
.public-header { text-align:center; padding:28px 0 8px; }
.public-header img { height:34px; }
/* A form's own banner replaces the default logo: full width, capped height. */
.public-header img.banner { height:auto; max-height:130px; max-width:100%; border-radius:8px; }

/* Higher contrast than the app default — body copy sits near AAA. */
.public-shell, .public-shell p { color:#3a4148; }
.public-shell .card { padding:28px 26px; }
.public-shell h1 { font-size:1.7rem; line-height:1.3; margin-bottom:.35em; }
.public-shell h2 { font-size:1.3rem; margin:0 0 22px; }

/* One question per block, clearly separated so nothing runs together. */
.public-shell .q-block { margin-bottom:34px; }
.public-shell label { font-size:1.2rem; font-weight:700; color:var(--heading);
  margin-bottom:8px; line-height:1.45; }
/* Help text stays full size — Easy Read never shrinks supporting text. */
.public-shell .help { font-size:1.2rem; color:#4a5259; margin:-2px 0 12px; }

.public-shell input[type=text], .public-shell input[type=email],
.public-shell input[type=tel], .public-shell input[type=date],
.public-shell input[type=number], .public-shell select, .public-shell textarea {
  font-size:1.1rem; padding:14px 15px; border:2px solid #8d8d84; border-radius:8px;
  background:#fff; min-height:54px;
}
.public-shell textarea { min-height:130px; line-height:1.6; }
.public-shell input:focus, .public-shell select:focus, .public-shell textarea:focus {
  border-color:var(--accent-dk); outline:3px solid var(--accent); outline-offset:2px;
}

/* Answer choices are whole tappable rows, comfortably above the 44px target. */
.public-shell fieldset { border:0; padding:0; margin:0 0 8px; }
.public-shell .choice { align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px;
  border:2px solid #d5d5cd; border-radius:10px; background:#fff; cursor:pointer;
  font-size:1.2rem; color:#3a4148; min-height:56px; }
.public-shell .choice:hover { border-color:var(--accent-dk); background:#F1F8F7; }
.public-shell .choice input { width:24px; height:24px; margin:0; flex:none; accent-color:var(--accent-dk); }
.public-shell .choice:focus-within { outline:3px solid var(--accent); outline-offset:2px; }

/* Information text reads as guidance, never as something to answer. */
.public-shell .info-panel { background:#EFF7F5; border:1px solid #C9E3DE;
  border-left:5px solid var(--accent); border-radius:0 10px 10px 0;
  padding:18px 20px; margin-bottom:30px; }
.public-shell .info-panel p { margin:0; font-size:1.2rem; }

/* Progress: one segment per page, plus the page's name in words. */
.progress { display:flex; gap:5px; margin:16px 0 10px; }
.progress i { display:block; height:8px; flex:1; border-radius:999px; background:#dfe0da; }
.progress i.done { background:var(--accent-dk); }
.progress i.on { background:var(--accent); }
.step-name { font-size:1.05rem; font-weight:700; color:var(--accent-dk);
  margin:0 0 26px; text-align:center; }

.public-shell .btn { font-size:1.2rem; padding:15px 26px; min-height:56px; border-radius:10px; }
.public-shell .form-nav { margin-top:14px; gap:14px; }
.public-shell .form-nav .btn-primary { flex:1; justify-content:center; }
.public-shell .req { font-weight:700; }
/* Nothing in the public form drops below the Easy Read floor. */
.public-shell .saved-note, .public-shell .muted, .public-shell button { font-size:1.2rem; }
.public-shell .step-name { font-size:1.2rem; }

/* Image beside its caption — the classic Easy Read pairing. */
.form-image.side { display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:center; }
.form-image.side img { border-radius:10px; }
.form-image.side figcaption { font-size:1.15rem; color:#3a4148; margin:0; }
@media (max-width:520px){ .form-image.side { grid-template-columns:96px 1fr; gap:14px; } }
/* Steps are all visible by default so the form works with JS off; the stepper
   only hides pages once form.js marks the body as JS-driven. */
.page-step { display:block; }
body.js-steps .page-step { display:none; }
body.js-steps .page-step.active { display:block; }
.form-nav { display:flex; justify-content:space-between; gap:12px; margin-top:8px; }
.saved-note { font-size:.85rem; color:#3f6512; font-weight:600; min-height:1.2em; }

@media (max-width:640px){ .topbar .wrap{ height:auto; padding:10px 20px; flex-wrap:wrap; } h1{font-size:1.35rem;} }
@media (prefers-reduced-motion: reduce){ * { transition:none !important; } }