/* =====================================================================
   Martyn's Law workbook — module styles. Layers on top of style.css
   and reuses its arx palette variables (--ml-primary etc.).
   ===================================================================== */

/* Widen the wrap a touch for the two-up pricing + builder. */
.ml-wrap:has(.wb-app),
.ml-wrap:has(.wb-pricing) { max-width: 960px; }

/* ---- Journey steps (next.php) -------------------------------------- */
.wb-step {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.wb-step strong { font-family: "Montserrat", sans-serif; color: var(--ml-ink); }
.wb-step span { color: var(--ml-muted); font-size: .9rem; }
.wb-step-n {
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .95rem;
  background: var(--ml-border); color: var(--ml-muted); margin-bottom: .35rem;
}
.wb-step-now { border-color: var(--ml-green-strong); box-shadow: 0 2px 10px rgba(111,171,217,.18); }
.wb-step-now .wb-step-n { background: var(--ml-green-strong); color: #fff; }
.wb-step-done .wb-step-n { background: var(--ml-enh-ink); color: #fff; }

/* ---- Pricing (next.php) -------------------------------------------- */
.wb-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;   /* room for the "Recommended" flag to sit above cards */
}
.wb-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.wb-plan.standard { border-top: 5px solid #1565c0; }
.wb-plan.enhanced { border-top: 5px solid #2e7d32; }
.wb-plan-rec { box-shadow: 0 8px 30px rgba(0,0,0,.08); border-color: var(--ml-green-strong); }
.wb-plan-flag {
  position: absolute; top: -.85rem; left: 1.4rem; z-index: 3;
  background: var(--ml-green-strong); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .8rem; border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.wb-plan-head { margin-bottom: .5rem; }
.wb-plan-range { color: var(--ml-muted); font-size: .85rem; margin-top: .4rem; }
.wb-plan-price {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 2.1rem; color: var(--ml-ink); margin: .35rem 0 .25rem;
}
.wb-plan-price span { font-size: .85rem; font-weight: 400; color: var(--ml-muted); }
.wb-plan-blurb { color: var(--ml-muted); font-size: .92rem; margin: .25rem 0 1rem; }
.wb-plan-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.wb-plan-list li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  color: #4a4a4a; font-size: .92rem;
}
.wb-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ml-green-strong-dark); font-weight: 700;
}
.wb-plan-btn { width: 100%; text-align: center; margin-top: auto; }
.wb-testnote { text-align: center; font-size: .78rem; color: var(--ml-muted); margin: .5rem 0 0; font-style: italic; }

/* Cold-entry CTA (plans.php) */
.wb-cold-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  border-radius: 10px; padding: 1.25rem 1.4rem; margin: 1.5rem 0;
}
.wb-cold-cta .btn-arx { white-space: nowrap; flex: none; }

/* ---- Stepped flow -------------------------------------------------- */
[hidden] { display: none !important; }

/* RAG status tokens */
:root {
  --rag-green: #1e7e34; --rag-green-bg: #e9f6ec; --rag-green-soft: #f2faf4;
  --rag-amber: #c8791f; --rag-amber-bg: #fdf3e2; --rag-amber-soft: #fffaf2;
  --rag-red:   #c0392b; --rag-red-bg:   #fdecea; --rag-red-soft:   #fff6f5;
}

/* SIA banner */
.wb-sia { display: flex; gap: 1rem; align-items: flex-start; border-left: 5px solid var(--ml-primary); }
.wb-sia-icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ml-green-strong); color: #fff;
}
.wb-sia-icon svg { width: 1.7rem; height: 1.7rem; }
.wb-inline-green { color: var(--rag-green); font-weight: 700; }

/* Legend */
.wb-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; font-size: .85rem; color: var(--ml-muted); }
.wb-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.wb-dot { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.wb-dot.wb-status-complete { background: var(--rag-green); }
.wb-dot.wb-status-partial  { background: var(--rag-amber); }
.wb-dot.wb-status-none     { background: var(--rag-red); }

/* Group heading over a card set */
.wb-group-head { font-size: 1.1rem; margin: 0 0 .2rem; padding-bottom: .35rem; border-bottom: 2px solid var(--ml-border); }
.wb-group-head.wb-grp-required { border-bottom-color: #e6c98a; }

/* Band = a named group of cards on the overview */
.wb-band { margin: 1.9rem 0 .25rem; }
.wb-band:first-of-type { margin-top: 1rem; }
.wb-band-note { margin: .1rem 0 .1rem; color: var(--ml-muted); font-size: .92rem; }
/* Band accent colours on the heading underline + a leading tab */
.wb-group-head.wb-band-premises    { border-bottom-color: #b9c4d1; }
.wb-group-head.wb-band-procedures  { border-bottom-color: var(--ml-green-strong); }
.wb-group-head.wb-band-measures    { border-bottom-color: #e6c98a; }
.wb-group-head.wb-band-sia         { border-bottom-color: var(--ml-green-strong); }
.wb-group-head.wb-band-incident    { border-bottom-color: var(--ml-green-strong); }
.wb-group-head.wb-band-recommended { border-bottom-color: #bcd6b8; }

/* Big status cards */
.wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wb-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  text-align: left; width: 100%; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--ml-border); border-left: 6px solid var(--ml-border);
  border-radius: 12px; padding: 1.15rem 1.25rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.wb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.wb-card:focus-visible { outline: 3px solid var(--ml-green-strong); outline-offset: 2px; }
.wb-card-icon {
  position: relative;
  width: 2.9rem; height: 2.9rem; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.wb-card-icon svg { width: 1.5rem; height: 1.5rem; }
.wb-card-check {
  position: absolute; right: -6px; bottom: -6px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; color: var(--rag-green); border: 2px solid var(--rag-green);
  display: none; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
}
.wb-card.wb-status-complete .wb-card-check { display: flex; }

/* Section-heading icon (in a section step) */
.wb-sec-icon {
  width: 2.2rem; height: 2.2rem; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ml-primary-soft); color: var(--ml-green-strong-dark);
}
.wb-sec-icon svg { width: 1.25rem; height: 1.25rem; }
.wb-sec-icon.wb-grp-required { background: #fbeccb; color: #8a5a00; }
.wb-sec-icon.wb-grp-record   { background: #e9edf2; color: #40546b; }
/* Rounded-square icon tile per status (overrides the circle radius above only) */
.wb-card-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.wb-card-title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ml-ink); }
.wb-card-meta { font-size: .82rem; color: var(--ml-muted); font-variant-numeric: tabular-nums; }
.wb-card-bar { height: 6px; border-radius: 999px; background: var(--ml-border); overflow: hidden; max-width: 220px; }
.wb-card-shared { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .76rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; width: fit-content; }
.wb-card-shared svg { flex: none; }
.wb-card-shared.is-yes { background: var(--rag-green); color: #fff; }
.wb-card-shared.is-no { background: var(--rag-amber-bg); color: #8a5a00; border: 1px solid var(--rag-amber); }
.wb-card-bar i { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.wb-card-status {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; align-self: center;
}

/* Card RAG themes */
.wb-card.wb-status-complete { border-left-color: var(--rag-green); background: var(--rag-green-soft); }
.wb-card.wb-status-complete .wb-card-icon { background: var(--rag-green); }
.wb-card.wb-status-complete .wb-card-bar i { background: var(--rag-green); }
.wb-card.wb-status-complete .wb-card-status { color: var(--rag-green); }
.wb-card.wb-status-partial { border-left-color: var(--rag-amber); background: var(--rag-amber-soft); }
.wb-card.wb-status-partial .wb-card-icon { background: var(--rag-amber); }
.wb-card.wb-status-partial .wb-card-bar i { background: var(--rag-amber); }
.wb-card.wb-status-partial .wb-card-status { color: var(--rag-amber); }
.wb-card.wb-status-none { border-left-color: var(--rag-red); background: var(--rag-red-soft); }
.wb-card.wb-status-none .wb-card-icon { background: var(--rag-red); }
.wb-card.wb-status-none .wb-card-status { color: var(--rag-red); }

/* Automatic section (Document & notify) */
.wb-auto-tag {
  font-family: "Montserrat", sans-serif; font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #40546b;
  background: #e9edf2; border-radius: 4px; padding: .1rem .4rem; vertical-align: middle;
}
.wb-card-auto .wb-card-bar { display: none; }
.wb-auto-panel {
  border: 1px solid var(--ml-border); border-radius: 10px; padding: 1.1rem 1.25rem; margin: 1rem 0;
  background: #fcfdfb;
}
.wb-auto-panel strong { display: block; font-family: "Montserrat", sans-serif; color: var(--ml-ink); margin-bottom: .25rem; }
.wb-auto-panel p { color: var(--ml-muted); margin: 0 0 .6rem; }
.wb-auto-panel p:last-child { margin-bottom: 0; }
.wb-auto-storage { display: flex; gap: 1rem; align-items: flex-start; background: var(--ml-primary-soft); border-color: var(--ml-green-strong); }
.wb-auto-storage p { margin-bottom: .3rem; }
.wb-auto-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--ml-green-strong); color: #fff; display: flex; align-items: center; justify-content: center; }
.wb-auto-ico svg { width: 1.5rem; height: 1.5rem; }
.wb-vault {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  border-radius: 12px; padding: 1.25rem 1.4rem; margin: 1.75rem 0;
}
.wb-vault-ico { flex: none; width: 3rem; height: 3rem; border-radius: 12px; background: var(--ml-green-strong); color: #fff; display: flex; align-items: center; justify-content: center; }
.wb-vault-ico svg { width: 1.7rem; height: 1.7rem; }
.wb-vault strong { display: block; font-family: "Montserrat", sans-serif; color: var(--ml-ink); font-size: 1.08rem; margin-bottom: .35rem; }
.wb-vault p { color: var(--ml-ink); margin: 0; line-height: 1.55; }
.wb-ready-list { list-style: none; padding: 0; margin: .5rem 0; }
.wb-ready-list li { padding: 0; color: var(--ml-ink); }
.wb-ready-link {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; padding: .45rem .5rem; margin: .1rem 0;
  color: inherit; font: inherit; cursor: pointer;
}
.wb-ready-link:hover { background: #eef2f7; }
.wb-ready-text { flex: 1; }
.wb-ready-go { color: var(--ml-green-strong); font-size: .85rem; font-weight: 600; opacity: 0; transition: opacity .12s; }
.wb-ready-link:hover .wb-ready-go { opacity: 1; }
.wb-ready-mark {
  width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700;
}
.wb-ready-list li.is-ok .wb-ready-mark { background: var(--rag-green); color: #fff; }
.wb-ready-list li.is-todo .wb-ready-mark { background: #fff; border: 2px solid var(--rag-amber); }
.wb-ready-list li.is-todo .wb-ready-text { color: var(--ml-muted); }

/* Location question (assembly point etc.) */
.wb-location { margin: .25rem 0 .5rem; }
.wb-loc-lbl { display: block; font-size: .82rem; font-weight: 700; color: var(--ml-ink); margin: .5rem 0 .3rem; }
.wb-loc-hint { font-weight: 400; color: var(--ml-muted); }
.wb-loc-place { width: 100%; }
.wb-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-top: .35rem; }
.wb-loc-cell input { width: 100%; }
.wb-loc-link { display: inline-block; margin-top: .3rem; font-size: .82rem; color: var(--ml-green-strong); text-decoration: none; }
.wb-loc-link:hover { text-decoration: underline; }
.wb-loc-uploadnote { margin: .6rem 0 0; font-size: .85rem; color: var(--ml-muted); }

/* Embedded drop-a-pin map */
.wb-loc-mapwrap { margin: .5rem 0 .25rem; }
.wb-loc-mapbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary); color: var(--ml-ink);
  border-radius: 8px; padding: .55rem .95rem; font: inherit; font-weight: 600; cursor: pointer;
}
.wb-loc-mapbtn:hover { background: #e3f1e1; }
.wb-loc-mapbtn:disabled { opacity: .55; cursor: default; }
.wb-loc-mapui { margin-top: .6rem; }
.wb-loc-search { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.wb-loc-search input { flex: 1 1 12rem; min-width: 0; }
.wb-loc-search-input { flex: 1; padding: .55rem .7rem; border: 1px solid var(--ml-border); border-radius: 8px; font: inherit; }
.wb-loc-search-go { flex: none; padding: .5rem .9rem; }
.wb-loc-map-canvas { height: 320px; border: 1px solid var(--ml-border); border-radius: 10px; background: #eef1ee; z-index: 0; }
.wb-loc-map-canvas:not(.leaflet-container) { display: flex; align-items: center; justify-content: center; color: var(--ml-muted); }
.wb-loc-maphint { margin: .5rem 0 0; font-size: .85rem; color: var(--ml-muted); }
@media (max-width: 560px) { .wb-loc-grid { grid-template-columns: 1fr; } }

/* Generated plan panel (evacuation / invacuation / lockdown / communication) */
.wb-plan {
  border: 1px solid var(--ml-primary); border-radius: 12px; background: var(--ml-primary-soft);
  padding: 1.1rem 1.25rem; margin: 0 0 1.25rem;
}
.wb-plan-head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .6rem; }
.wb-plan-ico { font-size: 1.3rem; line-height: 1.3; }
.wb-plan-head strong { display: block; font-family: "Montserrat", sans-serif; font-size: 1.08rem; color: var(--ml-ink); }
.wb-plan-lead { display: block; color: var(--ml-muted); font-size: .9rem; margin-top: .1rem; }
.wb-plan-steps { list-style: none; counter-reset: plan; padding: 0; margin: .4rem 0 0; }
.wb-plan-steps li {
  counter-increment: plan; position: relative; padding: .55rem 0 .55rem 2.1rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.wb-plan-steps li::before {
  content: counter(plan); position: absolute; left: 0; top: .55rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ml-green-strong); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700;
}
.wb-plan-label { display: block; font-weight: 700; color: var(--ml-ink); font-size: .92rem; }
.wb-plan-value { display: block; color: var(--ml-ink); margin-top: .1rem; }
.wb-plan-steps li.is-todo .wb-plan-value { color: var(--ml-muted); }
.wb-plan-steps li.is-todo::before { background: var(--rag-amber); }
.wb-plan-imgs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.wb-plan-img img { max-width: 160px; max-height: 120px; border: 1px solid var(--ml-border); border-radius: 8px; display: block; }
.wb-plan-doc { font-size: .85rem; color: var(--ml-green-strong); text-decoration: none; align-self: center; }
.wb-plan-foot { margin: .7rem 0 0; font-weight: 600; font-size: .9rem; }
.wb-plan-foot.is-ok { color: var(--rag-green); }
.wb-plan-foot.is-warn { color: #9a6b00; font-weight: 500; }
.wb-plan-cta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary); border-radius: 12px;
  padding: 1rem 1.25rem; margin: 0 0 1.25rem;
}
.wb-plan-cta strong { display: block; font-family: "Montserrat", sans-serif; color: var(--ml-ink); }
.wb-plan-cta > div:first-child span { display: block; color: var(--ml-muted); font-size: .9rem; margin-top: .15rem; max-width: 46ch; }
.wb-plan-cta .btn-arx { flex: none; }
.wb-plan-cta-action { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.wb-plan-shared { font-size: .82rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.wb-plan-shared.is-yes { background: var(--rag-green); color: #fff; }
.wb-plan-shared.is-no { background: var(--rag-amber-bg, #fdf3e0); color: #8a5a00; border: 1px solid var(--rag-amber); }
.wb-ready-summary { font-weight: 600; margin: .5rem 0 0; }
.wb-ready-summary.wb-status-complete { color: var(--rag-green); }
.wb-ready-summary.wb-status-partial { color: var(--rag-amber); }
.wb-ready-summary.wb-status-none { color: var(--rag-red); }

/* Section report (read-only view of a completed section) */
.wb-srow { padding: 1rem 0; border-top: 1px solid var(--ml-border); position: relative; }
.wb-srow:first-of-type { border-top: none; }
.wb-srow-q { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .4rem; padding-right: 4rem; }
.wb-srow-qt { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--ml-ink); }
.wb-srow-a { white-space: pre-wrap; color: #333; padding: .5rem .8rem; background: #f2faf4; border-left: 3px solid var(--rag-green); border-radius: 0 6px 6px 0; }
.wb-srow-a.wb-srow-empty { color: var(--ml-muted); font-style: italic; background: #fafbf9; border-left-color: var(--ml-border); }
.wb-srow-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.wb-srow-files img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ml-border); }
.wb-edit-item {
  position: absolute; top: 1rem; right: 0;
  background: none; border: 1px solid var(--ml-border); border-radius: 7px;
  color: var(--ml-green-strong-dark); font: inherit; font-weight: 600; font-size: .82rem;
  padding: .3rem .8rem; cursor: pointer;
}
.wb-edit-item:hover { border-color: var(--ml-green-strong); }
.wb-review-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ml-border); }

/* Back-to-overview link inside a section */
.wb-overview-link {
  background: none; border: none; color: var(--ml-green-strong-dark); cursor: pointer;
  font: inherit; font-weight: 600; font-size: .88rem; padding: 0; margin-bottom: .75rem;
}
.wb-overview-link:hover { text-decoration: underline; }

.wb-stepper {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 1.25rem;
}
.wb-stepgroup {
  font-family: "Montserrat", sans-serif; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ml-muted);
  padding: 0 .35rem 0 .6rem; border-left: 2px solid var(--ml-border); margin-left: .3rem;
}
.wb-stepgroup.wb-grp-required { color: #9a6b00; }
.wb-stepbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--ml-border); border-radius: 999px;
  padding: .3rem .7rem .3rem .35rem; cursor: pointer; font: inherit;
  color: var(--ml-ink); max-width: 190px;
}
.wb-stepbtn:hover { border-color: var(--ml-green-strong); }
.wb-stepbtn .wb-stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
  background: var(--ml-border); color: var(--ml-ink);
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .8rem;
}
.wb-stepbtn .wb-steplbl {
  font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-stepbtn.is-active { border-color: var(--ml-green-strong); box-shadow: 0 2px 8px rgba(111,171,217,.22); }
.wb-stepbtn.is-active .wb-stepnum { background: var(--ml-green-strong); color: #fff; }
.wb-stepbtn.wb-grp-required .wb-stepnum { background: #f2e4c4; color: #7a5600; }
.wb-stepbtn.is-active.wb-grp-required .wb-stepnum { background: #c8791f; color: #fff; }
.wb-stepbtn.is-complete .wb-stepnum { background: var(--ml-enh-ink, #145c30); color: #fff; }
.wb-stepbtn.is-complete .wb-stepnum::after { content: "✓"; }
.wb-stepbtn.is-complete .wb-stepnum { font-size: 0; }
.wb-stepbtn.is-complete .wb-stepnum::after { font-size: .85rem; }

.wb-step-panel { display: none; }
.wb-step-panel.is-active { display: block; animation: wbFade .2s ease; }
@keyframes wbFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wb-step-panel.is-active { animation: none; } }

.wb-step-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ml-border);
}
.wb-step-foot > span:empty { flex: 1; }

/* One question at a time (only when JS has enabled paging) */
.wb-paged .wb-item { display: none; }
.wb-paged .wb-item.is-current { display: block; animation: wbFade .18s ease; }

/* Question nav bar */
.wb-qnav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ml-border);
}
.wb-qnav button { white-space: nowrap; }
.wb-qpos { font-size: .85rem; color: var(--ml-muted); font-variant-numeric: tabular-nums; }
.wb-qnav-right { display: inline-flex; align-items: center; gap: .6rem; }
.wb-qskip {
  background: none; border: 1px solid var(--ml-border); border-radius: 8px;
  color: var(--ml-muted); font: inherit; font-weight: 600; font-size: .9rem;
  padding: .5rem .9rem; cursor: pointer;
}
.wb-qskip:hover { border-color: var(--ml-muted); color: var(--ml-ink); }

@media (max-width: 560px) {
  .wb-qnav { gap: .55rem; }
  .wb-qpos { order: 1; flex-basis: 100%; text-align: center; }
  .wb-qback { order: 2; }
  .wb-qnav-right { order: 2; margin-left: auto; }
  .wb-qpause { order: 3; flex-basis: 100%; }
}

/* Intro step */
.wb-intro-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem; margin: 1.5rem 0 .5rem;
}
.wb-intro-card {
  border: 1px solid var(--ml-border); border-radius: 10px; padding: 1.1rem 1.2rem; background: #fcfdfb;
}
.wb-intro-card.wb-intro-required { border-color: #e6c98a; background: #fffaf0; }
.wb-intro-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; margin-bottom: .5rem;
  background: var(--ml-green-strong); color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 700;
}
.wb-intro-required .wb-intro-step { background: #c8791f; }
.wb-intro-card strong { display: block; font-family: "Montserrat", sans-serif; color: var(--ml-ink); margin-bottom: .3rem; }
.wb-intro-card p { color: var(--ml-muted); font-size: .9rem; margin: 0; }
.wb-intro-card ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.wb-intro-card li { color: #4a4a4a; font-size: .88rem; margin-bottom: .2rem; }

/* Group badge on a section heading */
.wb-grp-badge { text-transform: none; }
.ml-badge.wb-grp-record      { background: #e9edf2; color: #40546b; }
.ml-badge.wb-grp-required    { background: #fbeccb; color: #8a5a00; }
.ml-badge.wb-grp-recommended { background: #e7f1e6; color: #3d6b39; }

/* Done control (mark -> confirm -> done) */
.wb-done-control { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wb-mark { font-size: .85rem; padding: .35rem .8rem; }
.wb-confirm { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ml-ink); }
.wb-confirm-yes { font-size: .82rem; padding: .3rem .7rem; }
.wb-confirm-no {
  font-size: .82rem; padding: .3rem .6rem; background: none; border: 1px solid var(--ml-border);
  border-radius: 6px; cursor: pointer; color: var(--ml-muted); font-family: inherit;
}
.wb-done-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ml-enh-ink, #145c30); font-weight: 700; font-size: .9rem;
}
.wb-undo, .wb-edit {
  background: none; border: none; color: var(--ml-green-strong-dark); cursor: pointer;
  text-decoration: underline; font: inherit; font-weight: 600; font-size: .82rem; padding: 0;
}

/* A confirmed answer is locked until "Edit" is pressed. */
.wb-input[readonly] {
  background: #f4f6f3; color: #3f4a3d; cursor: default; border-color: #dfe3db;
}
.wb-input[readonly]:focus { outline: none; }
.wb-checklist input:disabled + span { color: #6a6f66; }

/* ---- Builder shell (workbook.php) ---------------------------------- */
.wb-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.wb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.wb-actions > a, .wb-actions > button { white-space: nowrap; }

.wb-nav {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.25rem;
}
.wb-nav a {
  font-size: .82rem; text-decoration: none;
  color: var(--ml-muted);
  border: 1px solid var(--ml-border);
  background: #fff;
  padding: .3rem .7rem; border-radius: 999px;
  font-family: "Montserrat", sans-serif;
}
.wb-nav a:hover { border-color: var(--ml-green-strong); color: var(--ml-green-strong-dark); }

/* From-your-assessment panel */
.wb-asmt { margin-bottom: 1.25rem; }
.wb-asmt > summary {
  cursor: pointer; list-style: none; font-family: "Montserrat", sans-serif;
  color: var(--ml-ink); font-size: 1.02rem;
}
.wb-asmt > summary::-webkit-details-marker { display: none; }
.wb-asmt > summary::before { content: "▸ "; color: var(--ml-green-strong); }
.wb-asmt[open] > summary::before { content: "▾ "; }
.wb-asmt-body { margin-top: .9rem; }

.wb-sec-head { display: flex; align-items: center; gap: .6rem; }
.wb-sec-head h2 { margin: 0; font-size: 1.75rem; line-height: 1.2; color: var(--ml-ink); }

/* Compact "1 of 6" counter, pushed to the right of the section header. */
.wb-sec-count {
  margin-left: auto; flex: 0 0 auto;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  color: var(--ml-green-strong-dark); background: var(--ml-primary-soft);
  border: 1px solid var(--ml-border); border-radius: 999px; padding: .18rem .6rem;
}
.wb-sec-count:empty { display: none; }
.wb-step-panel[data-mode="review"] .wb-sec-count { display: none; }

/* Next = go. The primary advance button is green (green means go). */
.btn-arx.wb-qnext { background: var(--rag-green); border-color: var(--rag-green); }
.btn-arx.wb-qnext:hover { background: #155d28; border-color: #155d28; }
.wb-sec-intro { color: #4a4a4a; font-size: 1.05rem; line-height: 1.55; margin: .6rem 0 1.35rem; }

/* Recall panel — brings the B6 risk→response choices forward into each plan
   section. Collapsed by default; the user expands "From your risk list" to
   see the scenarios they tagged for this response. Informational (blue). */
.wb-recall {
  background: var(--ml-primary-soft);
  border: 1px solid var(--ml-border);
  border-left: 4px solid var(--ml-green-strong);
  border-radius: 8px; margin: 0 0 1.25rem;
}
.wb-recall-sum {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; cursor: pointer; list-style: none;
  font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--ml-ink);
}
.wb-recall-sum::-webkit-details-marker { display: none; }
.wb-recall-sum::after {
  content: "\25B8"; margin-left: auto; color: var(--ml-muted);
  transition: transform .15s ease;
}
.wb-recall[open] .wb-recall-sum::after { transform: rotate(90deg); }
.wb-recall-sum:focus-visible { outline: 2px solid var(--ml-green-strong); outline-offset: -2px; border-radius: 8px; }
.wb-recall-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ml-green-strong); }
.wb-recall-ico svg { width: 100%; height: 100%; display: block; }
.wb-recall-count {
  display: inline-block; margin-left: .15rem; min-width: 1.3em; padding: 0 .4em;
  font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.5;
  color: #fff; background: var(--ml-green-strong); border-radius: 999px;
}
.wb-recall-body { padding: 0 1rem .85rem 2.6rem; }
.wb-recall-body p { color: var(--ml-muted); margin: 0; font-size: .92rem; }
.wb-recall-quote {
  margin: .5rem 0 0; padding: .5rem .75rem;
  background: #fff; border-left: 3px solid var(--ml-green-strong);
  border-radius: 0 6px 6px 0; color: var(--ml-ink);
  font-size: .92rem; white-space: pre-wrap;
}

/* "Pulled from your record" context box (e.g. responsible person in section A) */
.wb-context {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1.25rem;
}
.wb-context-lbl {
  font-family: "Montserrat", sans-serif; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ml-green-strong-dark);
}
.wb-context-val { font-weight: 700; color: var(--ml-ink); }
.wb-context-empty { color: var(--ml-muted); }
.wb-context-edit {
  margin-left: auto; background: none; border: none; color: var(--ml-green-strong-dark);
  cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; text-decoration: underline; padding: 0;
}

/* ---- Item card ----------------------------------------------------- */
.wb-item {
  border: 1px solid var(--ml-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
  background: #fcfdfb;
  transition: border-color .15s ease, background .15s ease;
}
.wb-item.is-done { border-color: var(--rag-green); background: #f4faf2; }
.wb-item-top { display: flex; align-items: baseline; gap: .6rem; }
.wb-ref {
  font-family: "Montserrat", monospace; font-weight: 700; font-size: .8rem;
  color: #fff; background: var(--ml-muted);
  padding: .12rem .5rem; border-radius: 5px; flex: none;
  letter-spacing: .02em;
}
.wb-item.is-done .wb-ref { background: var(--ml-primary-dark); }
.wb-q { font-family: "Montserrat", sans-serif; font-size: 1.35rem; line-height: 1.3; color: var(--ml-ink); margin: 0; font-weight: 700; }

.wb-guide { margin: .75rem 0; }
.wb-guide > summary {
  cursor: pointer; color: var(--ml-green-strong-dark);
  font-weight: 600; font-size: .88rem;
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  user-select: none;
}
.wb-guide > summary::-webkit-details-marker { display: none; }
.wb-guide > summary::before { content: "＋"; font-weight: 700; }
.wb-guide[open] > summary::before { content: "－"; }
.wb-guide-body {
  margin-top: .6rem; padding: .85rem 1rem;
  background: var(--ml-primary-soft); border-left: 4px solid var(--ml-primary);
  border-radius: 0 6px 6px 0;
}
.wb-guide-body p { margin: .3rem 0; color: #3a3a3a; font-size: .92rem; }
.wb-tip { color: #5a4a1a !important; }
.wb-lbl {
  display: inline-block; font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ml-green-strong-dark);
  margin-right: .5rem;
}
.wb-tip .wb-lbl { color: #b07d16; }

.wb-input {
  width: 100%; box-sizing: border-box;
  padding: .65rem .8rem; border: 1px solid #8a8f86; border-radius: 8px;
  font: inherit; background: #fff; resize: vertical;
}
.wb-input:focus { outline: 2px solid var(--ml-green-strong); border-color: var(--ml-green-strong); }

/* Multi-field question (Name / Role / …) */
.wb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.wb-field { display: flex; flex-direction: column; gap: .3rem; }
.wb-field-lbl { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: .82rem; color: var(--ml-ink); }
.wb-subfield {
  width: 100%; box-sizing: border-box; padding: .6rem .75rem;
  border: 1px solid #8a8f86; border-radius: 8px; font: inherit; background: #fff;
}
.wb-subfield:focus { outline: 2px solid var(--ml-green-strong); border-color: var(--ml-green-strong); }
.wb-subfield[readonly] { background: #f4f6f3; color: #3f4a3d; }
.wb-subfield.is-missing { border-color: var(--rag-red); background: var(--rag-red-soft); }
.wb-subfield.is-missing:focus { outline-color: var(--rag-red); }
.wb-req { color: var(--rag-red); font-weight: 700; }
.wb-fields-warn { color: var(--rag-red); font-size: .85rem; font-weight: 600; margin: .6rem 0 0; }

/* Uploads (images / diagrams) */
.wb-uploads { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--ml-border); }
.wb-uploads-lbl { margin: 0 0 .55rem; font-weight: 700; font-size: .9rem; color: var(--ml-ink); }
.wb-uploads-list { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .7rem; }
.wb-uploads-list:empty { margin-bottom: 0; }
.wb-upfile { position: relative; }
.wb-upfile img {
  width: 120px; height: 90px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--ml-border); display: block;
}
.wb-upfile-doc {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 200px;
  padding: .5rem .7rem; border: 1px solid var(--ml-border); border-radius: 8px;
  background: #fff; text-decoration: none; color: var(--ml-ink); font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-upfile-name {
  display: block; width: 128px; max-width: 128px; margin-top: .3rem;
  font-family: inherit; font-size: .74rem; line-height: 1.3; color: var(--ml-ink);
  border: 1px solid transparent; border-radius: 6px; padding: .16rem .3rem; background: transparent;
  cursor: text; transition: border-color .12s, background .12s;
}
.wb-upfile-name:hover { border-color: var(--ml-border); background: #fff; }
.wb-upfile-name:focus { border-color: var(--ml-green-strong); background: #fff; outline: none; box-shadow: 0 0 0 2px var(--ml-primary-soft); }
.wb-upfile-doc-ext { font-size: .72rem; font-weight: 700; color: var(--ml-green-strong-dark); }
.wb-upfile a { position: relative; display: inline-block; }
.wb-upfile-pdftag {
  position: absolute; bottom: 4px; right: 4px; background: var(--rag-red, #c0392b); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: .05rem .3rem; border-radius: 4px;
}
.wb-upfile-uses {
  position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.72); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px;
}
.wb-upfile-tools { display: flex; gap: .35rem; margin-top: .3rem; align-items: center; }
.wb-upfile-update {
  border: 1px solid var(--ml-border); background: #fff; color: var(--ml-green-strong-dark);
  border-radius: 6px; padding: .15rem .5rem; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.wb-upfile-update:hover { background: var(--ml-primary-soft); }
.wb-upfile-del {
  border: 1px solid var(--ml-border); background: #fff; color: var(--rag-red);
  border-radius: 6px; padding: .15rem .5rem; font-size: .9rem; line-height: 1; cursor: pointer; font-weight: 700;
}
.wb-upfile-del:hover { background: var(--rag-red-bg); }
.wb-upload-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.wb-upload-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1.5px dashed var(--ml-primary); color: var(--ml-green-strong-dark);
  background: var(--ml-primary-soft); border-radius: 8px; padding: .55rem 1rem;
  font-weight: 600; font-size: .88rem;
}
.wb-upload-btn:hover { background: #e4f3e1; }
.wb-upload-lib-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1.5px solid var(--ml-border); background: #fff; color: var(--ml-ink);
  border-radius: 8px; padding: .55rem 1rem; font-weight: 600; font-size: .88rem;
}
.wb-upload-lib-btn:hover { border-color: var(--ml-green-strong); background: var(--ml-primary-soft); }
.wb-upload-status { font-size: .82rem; color: var(--ml-muted); align-self: center; }
/* "Mark up your plan" — opens the floor-plan editor */
.wb-markup-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--ml-primary); background: var(--ml-primary-soft); color: var(--ml-green-strong-dark);
  border-radius: 8px; padding: .55rem 1rem; font-weight: 600; font-size: .88rem;
}
.wb-markup-btn:hover { border-color: var(--ml-green-strong); background: #e4f3e1; }

/* Document repository picker */
.wb-lib { margin-top: .8rem; border: 1px solid var(--ml-border); border-radius: 10px; padding: .9rem 1rem; background: #fcfdfb; }
.wb-lib-head { margin: 0 0 .7rem; font-size: .88rem; color: var(--ml-muted); }
.wb-lib-loading, .wb-lib-empty { margin: 0; color: var(--ml-muted); font-size: .9rem; }
.wb-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; }
.wb-lib-item {
  display: flex; flex-direction: column; gap: .3rem; text-align: left;
  border: 1px solid var(--ml-border); border-radius: 10px; background: #fff; padding: .4rem; cursor: pointer; font: inherit;
}
.wb-lib-item:hover:not(:disabled) { border-color: var(--ml-green-strong); box-shadow: 0 2px 8px rgba(111,171,217,.2); }
.wb-lib-item:disabled { opacity: .55; cursor: default; }
/* Obvious confirmation once a file is picked from the repository */
.wb-lib-item.is-selected {
  position: relative; opacity: 1; border-color: var(--ml-green-strong);
  box-shadow: 0 0 0 2px var(--ml-primary), 0 2px 10px rgba(111,171,217,.35);
}
.wb-lib-item.is-selected::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: rgba(111,171,217,.14); pointer-events: none;
}
.wb-lib-tick {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  background: var(--ml-green-strong); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wb-lib-item img { width: 100%; height: 76px; object-fit: cover; border-radius: 6px; }
.wb-lib-doc { font-size: 1.6rem; text-align: center; }
.wb-lib-name { font-size: .76rem; color: var(--ml-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-lib-uses { font-size: .7rem; color: var(--ml-green-strong-dark); font-weight: 700; }
.wb-lib-here { font-size: .7rem; color: var(--ml-muted); }

/* Update-everywhere warning */
.wb-replace-warn {
  margin: .7rem 0; padding: .8rem 1rem; border-radius: 10px;
  background: var(--rag-amber-bg); border: 1px solid var(--rag-amber); border-left-width: 4px; color: #7a5200;
}
.wb-replace-warn p { margin: 0 0 .6rem; font-size: .92rem; }
.wb-replace-warn-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Document repository (repository.php) */
.wb-repo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.wb-repo-status { font-size: .85rem; color: var(--ml-muted); }
.wb-repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.wb-repo-item {
  border: 1px solid var(--ml-border); border-radius: 12px; background: #fff; padding: .7rem; position: relative;
  display: flex; flex-direction: column; gap: .5rem;
}
.wb-repo-thumb { display: block; }
.wb-repo-thumb img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ml-border); }
.wb-repo-doc { display: flex; align-items: center; justify-content: center; height: 130px; font-size: 2.4rem; background: #f4f6f3; border-radius: 8px; }
.wb-repo-name {
  width: 100%; box-sizing: border-box; padding: .4rem .55rem; border: 1px solid var(--ml-border);
  border-radius: 7px; font: inherit; font-weight: 600; color: var(--ml-ink);
}
.wb-repo-name:focus { outline: 2px solid var(--ml-green-strong); border-color: var(--ml-green-strong); }
.wb-repo-used { font-size: .8rem; color: var(--ml-muted); line-height: 1.4; }
.wb-repo-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.wb-repo-tools button {
  border: 1px solid var(--ml-border); background: #fff; border-radius: 7px;
  padding: .32rem .62rem; font-size: .78rem; font-weight: 700; cursor: pointer;
  color: var(--ml-ink); white-space: nowrap; line-height: 1.15;
  transition: filter .12s ease;
}
.wb-repo-tools button:hover { filter: brightness(.96); }
/* Colour-coded actions (scoped so they beat the base `.wb-repo-tools button` rule) */
.wb-repo-tools .wb-repo-markup { background: var(--rag-green-bg); border-color: var(--rag-green); color: var(--ml-green-strong-dark); }
.wb-repo-tools .wb-repo-rename { background: #eef1f5;             border-color: var(--ml-border); color: var(--ml-ink); }
.wb-repo-tools .wb-repo-update { background: var(--rag-amber-bg); border-color: var(--rag-amber); color: #8a5a00; }
.wb-repo-tools .wb-repo-del    { background: var(--rag-red-bg);   border-color: var(--rag-red);   color: var(--rag-red); }
.wb-repo-warn {
  margin-top: .3rem; padding: .6rem .75rem; border-radius: 8px;
  background: var(--rag-amber-bg); border: 1px solid var(--rag-amber); color: #7a5200;
}
.wb-repo-warn p { margin: 0 0 .5rem; font-size: .82rem; }
.wb-repo-warn-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-repo-warn-actions .btn-arx, .wb-repo-warn-actions .btn-arx-outline { padding: .35rem .7rem; font-size: .8rem; }
.wb-repo-empty { color: var(--ml-muted); }

/* Yes / No with conditional details */
.wb-yn-choice { display: flex; flex-wrap: wrap; gap: .6rem; }
.wb-yn-opt {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1.5px solid var(--ml-border); border-radius: 10px;
  padding: .6rem 1.3rem; font-weight: 600; color: var(--ml-ink);
  min-width: 5rem; justify-content: center; user-select: none;
}
.wb-yn-opt input { accent-color: var(--ml-green-strong); }
.wb-yn-opt:hover { border-color: var(--ml-green-strong); }
.wb-yn-opt.is-sel { border-color: var(--ml-green-strong); background: var(--ml-primary-soft); color: var(--ml-green-strong-dark); }
.wb-yn-warn {
  margin: .85rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: var(--rag-red-bg); border: 1px solid var(--rag-red);
  border-left-width: 4px; color: #7a1c12; font-size: .92rem; line-height: 1.5;
}
.wb-yn-warn-lbl {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 700;
  color: var(--rag-red); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem;
}
.wb-yn-details { margin-top: .9rem; }
.wb-yn-dlabel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--ml-ink); }
.wb-yn-detail {
  width: 100%; box-sizing: border-box; padding: .65rem .8rem;
  border: 1px solid #8a8f86; border-radius: 8px; font: inherit; background: #fff; resize: vertical;
}
.wb-yn-detail:focus { outline: 2px solid var(--ml-green-strong); border-color: var(--ml-green-strong); }
.wb-yn-detail[readonly] { background: #f4f6f3; color: #3f4a3d; }

/* One-click quick-fill chip */
.wb-fill {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  color: var(--ml-green-strong-dark); border-radius: 999px; padding: .4rem .9rem;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.wb-fill:hover { background: #e4f3e1; }
.wb-fill-val { font-weight: 700; color: var(--ml-ink); }

.wb-checklist { display: flex; flex-direction: column; gap: .45rem; }
.wb-check { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; font-size: .95rem; color: #3a3a3a; }
.wb-check input { margin-top: .25rem; accent-color: var(--ml-green-strong); }

/* Risk → response rows (B6): tick a scenario, then pick its first response. */
.wb-riskmap { display: flex; flex-direction: column; gap: .7rem; }
.wb-riskrow {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem 1rem; border: 2px solid var(--ml-border); border-radius: 10px;
  background: var(--ml-surface, #f6f7f9);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.wb-riskrow:hover { border-color: #c4ccd6; }
.wb-riskrow.is-on {
  border-color: var(--ml-green-strong); background: var(--ml-primary-soft);
  box-shadow: 0 1px 3px rgba(30, 126, 52, .12);
}
.wb-riskrow-top { display: flex; align-items: center; gap: 1rem; }
.wb-risk-check { flex: 1 1 auto; margin: 0; align-items: center; }
.wb-risk-check input { margin-top: 0; }
.wb-risk-check > span { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ml-ink); }
.wb-risk-resps { flex: 0 0 auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.wb-risk-help {
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  margin: 0; padding: 0 .1rem;
}
.wb-risk-help-text {
  margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ml-muted);
}
.wb-risk-help-ico { margin-right: .15rem; }
.wb-risk-help strong { color: var(--ml-ink); font-weight: 600; }
.wb-risk-apply {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .65rem; font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--ml-green-strong-dark); background: #fff;
  border: 1.5px solid var(--ml-green-strong); border-radius: 6px; cursor: pointer;
  transition: background .12s;
}
.wb-risk-apply::before { content: "\2713"; font-weight: 800; }
.wb-risk-apply:hover { background: var(--ml-primary-soft); }
.wb-risk-apply:focus-visible { outline: 2px solid var(--ml-green-strong-dark); outline-offset: 2px; }
.wb-resp-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; font-size: .85rem; cursor: pointer; user-select: none;
  color: var(--ml-ink); background: #fff;
  border: 1px solid var(--ml-border); border-radius: 999px;
  transition: border-color .12s, color .12s, background .12s;
}
.wb-resp-chip input { margin: 0; accent-color: var(--ml-green-strong); }
.wb-resp-chip.is-sel { border-color: var(--ml-green-strong); color: var(--ml-green-strong-dark); font-weight: 600; background: #fff; }
.wb-riskrow:not(.is-on) .wb-resp-chip { opacity: .4; cursor: default; }
.wb-resp-chip:focus-within { outline: 2px solid var(--ml-green-strong); outline-offset: 1px; }
@media (max-width: 560px) {
  .wb-riskrow-top { flex-direction: column; align-items: stretch; gap: .5rem; }
  /* Stack the map/plan action buttons full-width so labels fit and buttons keep their shape. */
  .wb-upload-actions { flex-direction: column; align-items: stretch; }
  .wb-upload-actions > .wb-upload-btn,
  .wb-upload-actions > .wb-upload-lib-btn,
  .wb-upload-actions > .wb-markup-btn { width: 100%; justify-content: center; }
}

/* Recall list — scenarios carried into each plan section. */
.wb-recall-list { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ml-ink); font-size: .92rem; }
.wb-recall-list li { margin: .15rem 0; }

.wb-item-foot { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; }
.wb-donebox { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ml-ink); font-weight: 600; cursor: pointer; }
.wb-donebox input { accent-color: var(--ml-green-strong); }
.wb-unconfirmed { font-size: .85rem; color: var(--ml-muted); }
.wb-status { font-size: .82rem; color: var(--ml-muted); }

/* Overview CTA -> report */
.wb-review-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-radius: 12px;
  border: 1px solid var(--ml-border); background: #fff;
}
.wb-review-cta.is-complete { border-color: var(--rag-green); background: var(--rag-green-soft); }
.wb-review-cta strong { display: block; font-family: "Montserrat", sans-serif; color: var(--ml-ink); }
.wb-review-cta span { color: var(--ml-muted); font-size: .9rem; }
.wb-review-cta .btn-arx, .wb-review-cta .btn-arx-outline { flex: none; white-space: nowrap; }

/* Review / report rows */
.wb-review-sec { }
.wb-review-row {
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding: 1rem 0; border-top: 1px solid var(--ml-border);
}
.wb-review-row:first-of-type { border-top: none; }
.wb-review-q { display: flex; align-items: baseline; gap: .55rem; }
.wb-review-qtext { font-family: "Montserrat", sans-serif; font-weight: 600; color: var(--ml-ink); }
.wb-review-ans { white-space: pre-wrap; color: #333; padding: .5rem .8rem; background: #fafbf9; border-left: 3px solid var(--ml-border); border-radius: 0 6px 6px 0; }
.wb-review-row.is-done .wb-review-ans { border-left-color: var(--rag-green); }
.wb-review-empty { color: var(--ml-muted); font-style: italic; background: none; border-left-color: #eee; }
.wb-review-files { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.wb-review-files img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ml-border); }
.wb-review-meta { display: flex; align-items: center; gap: 1rem; }
.wb-review-tick  { color: var(--rag-green); font-weight: 700; font-size: .82rem; }
.wb-review-draft { color: var(--rag-amber); font-weight: 700; font-size: .82rem; }
.wb-review-none  { color: var(--rag-red); font-weight: 700; font-size: .82rem; }
.wb-review-edit {
  margin-left: auto; font-weight: 600; font-size: .85rem; text-decoration: none;
  color: var(--ml-green-strong-dark); border: 1px solid var(--ml-border); border-radius: 7px; padding: .3rem .8rem;
}
.wb-review-edit:hover { border-color: var(--ml-green-strong); }
.wb-status.ok  { color: var(--ml-green-strong-dark); }
.wb-status.err { color: var(--ml-oos-ink); }

.wb-closing { margin-top: 1.5rem; }

/* ---- Print (export.php + Print button) ----------------------------- */
@media print {
  .wb-nav, .wb-actions, .wb-item-foot, .wb-guide > summary { display: none !important; }
  .wb-guide[open] .wb-guide-body, .wb-guide-body { display: block !important; }
  .wb-item, .ml-card, .wb-plan { break-inside: avoid; }
}

/* --- next.php / plans.php: prominent "why a workbook" + single-tier pricing --- */
.wb-why {
  margin: 1.5rem 0 0; padding: 1.1rem 1.35rem; border-radius: 12px;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  border-left: 5px solid var(--ml-primary);
}
.wb-why h3 { margin: 0 0 .4rem; font-size: 1.18rem; color: var(--ml-green-strong-dark); }
.wb-why p  { margin: 0; color: var(--ml-ink); font-size: 1rem; line-height: 1.6; }
.wb-pricing-one { grid-template-columns: minmax(280px, 460px); justify-content: start; }

/* --- Buyer accounts: sign-in / create-account forms + account hub --- */
.wb-auth { max-width: 460px; }
.wb-auth-form { display: grid; gap: .8rem; margin-top: 1rem; }
.wb-auth-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--ml-ink); }
.wb-auth-form input { padding: .6rem .75rem; border: 1px solid var(--ml-border); border-radius: 8px; font: inherit; }
.wb-auth-form input:focus { outline: none; border-color: var(--ml-green-strong); box-shadow: 0 0 0 2px var(--ml-primary-soft); }
.wb-auth-form button { margin-top: .3rem; justify-self: start; }
.wb-account-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.wb-pw-show { display:flex; align-items:center; gap:.45rem; font-weight:400; font-size:.85rem; color:var(--ml-muted); }
.wb-pw-show input { width:auto; margin:0; }
/* Obvious show/hide password button inside the field */
.wb-pw-wrap { position: relative; display: block; }
.wb-pw-wrap .wb-pw { width: 100%; box-sizing: border-box; padding-right: 4.4rem; }
.wb-pw-toggle {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  border: 1px solid var(--ml-border); background: #fff; color: var(--ml-green-strong-dark);
  border-radius: 6px; padding: .28rem .6rem; font-size: .8rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.wb-pw-toggle:hover { background: var(--ml-primary-soft); border-color: var(--ml-green-strong); }

/* Pause & go home — subtle control in the question nav (answers autosave). */
.wb-qpause {
  background: none; border: 1px solid var(--ml-border); border-radius: 8px;
  color: var(--ml-muted); font: inherit; font-weight: 600; font-size: .9rem;
  padding: .5rem .9rem; cursor: pointer;
}
.wb-qpause:hover { border-color: var(--ml-muted); color: var(--ml-ink); }

/* AA: guarantee a strong-contrast focus ring where a base rule removed the
   outline (these relied on a light-green border/glow only). */
.wb-upfile-name:focus, .wb-auth-form input:focus {
  outline: 2px solid var(--ml-green-strong); outline-offset: 1px;
}

/* In-place "who is responsible?" explainer — a popup-style disclosure, no page jump. */
.wb-explain { margin: .5rem 0 .75rem; }
.wb-explain > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: .82rem; color: var(--ml-green-strong-dark);
  background: var(--ml-primary-soft);
  border: 1px solid var(--ml-primary); border-radius: 999px;
  padding: .35rem .85rem;
}
.wb-explain > summary::-webkit-details-marker { display: none; }
.wb-explain > summary::before {
  content: "?"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ml-primary); color: #fff; font-size: .72rem; font-weight: 800;
}
.wb-explain[open] > summary { border-radius: 8px 8px 0 0; }
.wb-explain-body {
  padding: .85rem 1rem; background: var(--ml-primary-soft);
  border: 1px solid var(--ml-primary); border-top: none;
  border-radius: 0 0 8px 8px;
}
.wb-explain-intro { margin: 0 0 .55rem; color: #3a3a3a; font-size: .9rem; font-weight: 600; }
.wb-explain-list { margin: 0; }
.wb-explain-list dt {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: .82rem; color: var(--ml-green-strong-dark); margin-top: .55rem;
}
.wb-explain-list dt:first-child { margin-top: 0; }
.wb-explain-list dd { margin: .15rem 0 0; color: #3a3a3a; font-size: .9rem; line-height: 1.45; }

@media print {
  .wb-explain > summary { display: none !important; }
  .wb-explain-body { display: block !important; }
}

/* Helper line under a Yes/No "add details" box. */
.wb-yn-dhint { margin: .15rem 0 .5rem; color: #555; font-size: .86rem; line-height: 1.45; }
.wb-yn-dhint strong { color: #333; }

/* Neutral "Good to know" note for Yes/No questions where neither answer is a fault. */
.wb-yn-note {
  margin: .85rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: var(--ml-primary-soft); border: 1px solid var(--ml-primary);
  border-left-width: 4px; color: #2b3a2b; font-size: .92rem; line-height: 1.5;
}
.wb-yn-note .wb-yn-warn-lbl { color: var(--ml-green-strong-dark); }
/* Validation prompt when a mandatory Yes/No details box is left empty. */
.wb-yn-dwarn { margin: .5rem 0 0; color: var(--rag-red); font-size: .85rem; font-weight: 600; }

/* "Have a rethink" — an amber advisory (softer than the red warning) for a
   Yes/No answer that is probably a mistake but not an error. */
.wb-yn-rethink {
  margin: .85rem 0 0; padding: .7rem .9rem; border-radius: 8px;
  background: var(--rag-amber-bg); border: 1px solid var(--rag-amber);
  border-left-width: 4px; color: #7a4a12; font-size: .92rem; line-height: 1.5;
}
.wb-yn-rethink .wb-yn-warn-lbl { color: var(--rag-amber); }

/* "Use these as a starting point" — drops the explainer headings into the text box. */
.wb-explain-actions { margin: .75rem 0 0; }
.wb-explain-insert {
  cursor: pointer; font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: .8rem; color: var(--ml-green-strong-dark);
  background: #fff; border: 1.5px solid var(--ml-primary); border-radius: 6px;
  padding: .4rem .8rem;
}
.wb-explain-insert:hover { background: var(--ml-primary-soft); }

/* Note above the image uploader on the layout questions (map alone is enough). */
.wb-uploads-note { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.45; color: var(--ml-muted); }

/* "No other risks to add" — deliberate completion for an optional question. */
.wb-none-wrap { margin: .55rem 0 0; font-size: .86rem; color: var(--ml-muted); }
.wb-none-or { margin-right: .1rem; }
.wb-none-btn {
  cursor: pointer; font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: .8rem; color: var(--ml-green-strong-dark);
  background: #fff; border: 1.5px solid var(--ml-primary); border-radius: 6px;
  padding: .3rem .7rem;
}
.wb-none-btn:hover { background: var(--ml-primary-soft); }

/* Signed-in dashboard (account.php) — the four top-level areas. */
.wb-dash { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.wb-dash-card {
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  padding:1.1rem 1.15rem; border:1.5px solid var(--ml-border); border-radius:12px;
  background:#fff; color:var(--ml-ink); transition:border-color .12s, box-shadow .12s, transform .12s;
}
.wb-dash-card:hover { border-color:var(--ml-green-strong); box-shadow:0 3px 10px rgba(16,24,40,.07); transform:translateY(-1px); }
.wb-dash-ico { color:var(--ml-green-strong); line-height:0; }
.wb-dash-ico svg { display:block; }
.wb-dash-t { font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.05rem; color:var(--ml-green-strong-dark); }
.wb-dash-d { color:var(--ml-muted); font-size:.9rem; line-height:1.45; flex:1 1 auto; }
.wb-dash-go { font-weight:700; font-size:.85rem; color:var(--ml-green-strong); margin-top:.2rem; }

/* Dashboard status + progress + plans list (account.php) */
.wb-dash-status { font-family:"Montserrat",sans-serif; font-weight:700; font-size:.8rem; padding:.28rem .7rem; border-radius:999px; white-space:nowrap; }
.wb-dash-status-ok   { background:var(--rag-green-bg); color:#145c30; }
.wb-dash-status-warn { background:var(--rag-amber-bg); color:#8a5a00; }
.wb-dash-status-todo { background:#eef1f4; color:#5a6472; }
.wb-dash-chip { font-family:"Montserrat",sans-serif; font-weight:700; font-size:.78rem; color:var(--ml-green-strong-dark); background:var(--ml-primary-soft); padding:.25rem .65rem; border-radius:999px; }
.wb-prog { margin-top:.9rem; display:flex; flex-direction:column; gap:.6rem; }
.wb-prog-row { display:grid; grid-template-columns:1fr 140px 44px; align-items:center; gap:.8rem; }
.wb-prog-lbl { color:var(--ml-ink); font-size:.92rem; }
.wb-prog-bar { height:8px; border-radius:999px; background:#e9edf1; overflow:hidden; }
.wb-prog-bar i { display:block; height:100%; background:var(--ml-green-strong); border-radius:999px; }
/* RAG colouring, matching the readiness dial (red -> amber -> green). The
   track is faintly tinted so a 0% row still reads red rather than empty. */
.wb-prog-bar.rag-low   { background:var(--rag-red-bg); }
.wb-prog-bar.rag-low   i { background:var(--rag-red); }
.wb-prog-bar.rag-mid   { background:var(--rag-amber-bg); }
.wb-prog-bar.rag-mid   i { background:var(--rag-amber); }
.wb-prog-bar.rag-near  i { background:#5a8f27; }
.wb-prog-bar.rag-ready i { background:var(--rag-green); }
.wb-prog-pct { text-align:right; font-weight:700; font-size:.85rem; color:var(--ml-ink); }
a.wb-prog-row { text-decoration:none; color:inherit; border-radius:8px; padding:.2rem .3rem; margin:0 -.3rem; transition:background .12s; }
a.wb-prog-row:hover { background:var(--ml-primary-soft, #f1f6fb); }
a.wb-prog-row:hover .wb-prog-lbl { color:var(--ml-green-strong-dark, #1f6f3f); }
.wb-planlist { margin-top:.6rem; display:flex; flex-direction:column; }
.wb-planrow { display:flex; align-items:center; gap:.7rem; padding:.6rem .1rem; border-top:1px solid var(--ml-border); text-decoration:none; color:var(--ml-ink); }
.wb-planrow:first-child { border-top:none; }
.wb-planrow-dot { width:4px; height:22px; border-radius:2px; flex:0 0 auto; }
.wb-planrow-dot.is-yes { background:var(--rag-green); }
.wb-planrow-dot.is-no { background:var(--rag-amber); }
.wb-planrow-dot.is-neutral { background:#c4ccd6; }
.wb-planrow-dot.rag-green { background:var(--rag-green); }
.wb-planrow-dot.rag-amber { background:var(--rag-amber); }
.wb-planrow-dot.rag-red { background:var(--rag-red); }
.wb-planrow-lbl { flex:1 1 auto; font-size:.92rem; }
.wb-planrow-meta { color:var(--ml-muted); font-size:.85rem; white-space:nowrap; }
@media (max-width:520px){ .wb-prog-row { grid-template-columns:1fr 80px 40px; } }

/* Readiness gauge on the SIA dashboard card. */
.wb-dash-gauge { align-items:center; text-align:center; }
.wb-dash-gauge .wb-dash-t { text-align:center; }
.wb-gauge { display:block; margin:.2rem auto 0; }
.wb-gauge svg { display:block; margin:0 auto; max-width:100%; }
.wb-gauge-num { font-family:"Montserrat",sans-serif; font-weight:700; font-size:18px; fill:var(--ml-ink); }
.wb-gauge-lbl { font-family:"Montserrat",sans-serif; font-weight:700; font-size:.9rem; }
.wb-gauge-low   { color:var(--rag-red); }
.wb-gauge-mid   { color:var(--rag-amber); }
.wb-gauge-near  { color:#5a8f27; }
.wb-gauge-ready { color:var(--rag-green); }


/* ---- Training area: activity logs (drills, staff briefings) ---------- */
.wb-log-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem; }
.wb-log-form { display:flex; flex-direction:column; gap:.75rem; margin:0 0 1.1rem; }
.wb-log-grid { display:grid; grid-template-columns:160px 1fr 1fr; gap:.75rem; }
@media (max-width:640px){ .wb-log-grid { grid-template-columns:1fr; } }
.wb-log-f { display:flex; flex-direction:column; gap:.3rem; }
.wb-log-f > span { font-weight:600; font-size:.85rem; color:var(--ml-ink); }
.wb-log-opt { font-weight:400; color:var(--ml-muted); }
.wb-log-f input, .wb-log-f select, .wb-log-f textarea {
  font:inherit; padding:.55rem .65rem; border:1px solid var(--ml-border); border-radius:8px;
  background:#fff; color:var(--ml-ink); width:100%; box-sizing:border-box;
}
.wb-log-f textarea { resize:vertical; }
.wb-log-f input:focus, .wb-log-f select:focus, .wb-log-f textarea:focus {
  outline:2px solid var(--ml-green-strong); outline-offset:1px; border-color:var(--ml-green-strong);
}
.wb-log-list { display:flex; flex-direction:column; margin-top:.4rem; }
.wb-log-item { display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid var(--ml-border); }
.wb-log-when { flex:0 0 88px; font-weight:700; font-size:.82rem; color:var(--ml-ink); padding-top:.1rem; }
.wb-log-nodate { color:var(--ml-muted); font-weight:400; }
.wb-log-body { flex:1 1 auto; min-width:0; }
.wb-log-cat { font-weight:700; color:var(--ml-ink); }
.wb-log-people { color:var(--ml-ink); font-size:.9rem; margin-top:.15rem; }
.wb-log-notes { color:var(--ml-muted); font-size:.9rem; margin-top:.25rem; }
.wb-log-del { flex:0 0 auto; margin:0; }
.wb-log-x { border:none; background:transparent; color:var(--ml-muted); font-size:1.35rem; line-height:1; cursor:pointer; padding:.05rem .35rem; border-radius:6px; }
.wb-log-x:hover { background:var(--rag-red-bg); color:var(--rag-red); }
.wb-log-empty { color:var(--ml-muted); font-style:italic; margin:.5rem 0 0; }


/* ---- Incident response fields --------------------------------------- */
.wb-ir-field { padding:.1rem 0 1.1rem; border-bottom:1px solid var(--ml-border); margin-bottom:1.1rem; }
.wb-ir-field:last-of-type { border-bottom:none; margin-bottom:.4rem; }
.wb-ir-title { font-weight:700 !important; font-size:1.02rem; color:var(--ml-ink); }
.wb-ir-prompt { font-weight:400 !important; color:var(--ml-muted); font-size:.9rem; margin:.15rem 0 .15rem; }
.wb-ir-tip { color:var(--ml-muted); font-size:.85rem; margin:.4rem 0 0; }


/* ---- First aiders list ---------------------------------------------- */
.wb-fa-grid { display:grid; grid-template-columns:1fr 1fr 170px; gap:.75rem; }
@media (max-width:640px){ .wb-fa-grid { grid-template-columns:1fr; } }
.wb-fa-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.08rem .5rem; border-radius:999px; margin-left:.45rem; vertical-align:middle; }
.wb-fa-badge.is-ok   { background:var(--rag-green-bg); color:#145c30; }
.wb-fa-badge.is-soon { background:var(--rag-amber-bg); color:#8a5a00; }
.wb-fa-badge.is-exp  { background:var(--rag-red-bg);   color:#a1231b; }
.wb-fa-explbl { font-size:.62rem; color:var(--ml-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:block; }


/* ---- Log entries: view / edit toggle + row actions ------------------ */
.wb-log-entry { border-top:1px solid var(--ml-border); }
.wb-log-entry .wb-log-item { border-top:none; }
.wb-log-edit-form { display:none; padding:.85rem 0 1rem; }
.wb-log-entry.is-editing .wb-log-view { display:none; }
.wb-log-entry.is-editing .wb-log-edit-form { display:flex; }
.wb-log-actions { flex:0 0 auto; display:flex; gap:.3rem; align-items:flex-start; }
.wb-log-edit, .wb-log-rm {
  border:1px solid var(--ml-border); background:#fff; color:var(--ml-ink);
  font:inherit; font-size:.8rem; font-weight:600; padding:.28rem .6rem; border-radius:7px; cursor:pointer;
}
.wb-log-edit:hover { border-color:var(--ml-green-strong); color:var(--ml-green-strong-dark); }
.wb-log-rm { color:#a1231b; }
.wb-log-rm:hover { background:var(--rag-red-bg); border-color:var(--rag-red); }
.wb-log-del { margin:0; }
.wb-log-editbtns { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }


/* ---- People directory ----------------------------------------------- */
.wb-ppl-addpanel { background:#f7f9fb; border:1px solid var(--ml-border); border-radius:12px; padding:1.1rem 1.15rem; margin:.4rem 0 1.4rem; }
.wb-ppl-addh { margin:0 0 .8rem; font-size:1.02rem; }
.wb-ppl-form { margin:0; }
.wb-ppl-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; }
@media (max-width:560px){ .wb-ppl-grid { grid-template-columns:1fr; } }
.wb-ppl-rolesblock { margin:.9rem 0 0; }
.wb-ppl-roles-h { font-weight:600; font-size:.85rem; color:var(--ml-ink); margin:0 0 .55rem; }
.wb-rolepick { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.wb-rolepick-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.wb-rolepill { display:inline-flex; align-items:center; gap:.15rem; background:var(--ml-primary-soft, #eef4fb); color:var(--ml-green-strong-dark, #1f6f3f); font-size:.82rem; font-weight:600; padding:.22rem .3rem .22rem .65rem; border-radius:999px; }
.wb-rolepill-x { border:none; background:transparent; color:inherit; font-size:1.05rem; line-height:1; cursor:pointer; padding:0 .25rem; border-radius:50%; }
.wb-rolepill-x:hover { background:rgba(0,0,0,.1); }
.wb-rolepick-select { font:inherit; padding:.42rem .6rem; border:1px solid var(--ml-border); border-radius:8px; background:#fff; color:var(--ml-ink); cursor:pointer; }
.wb-ppl-check { display:flex; align-items:center; gap:.45rem; font-size:.9rem; margin:0; cursor:pointer; }
.wb-ppl-check input { flex:0 0 auto; }
.wb-ppl-flags { margin:1rem 0 .2rem; padding-top:.9rem; border-top:1px solid var(--ml-border); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.wb-ppl-opt { color:var(--ml-muted); font-size:.8rem; font-weight:400; }
.wb-ppl-warn { background:var(--rag-amber-bg); color:#8a5a00; border:1px solid var(--rag-amber); border-radius:8px; padding:.6rem .85rem; font-size:.9rem; margin:.2rem 0 1rem; }
.wb-ppl-list { margin-top:.4rem; }
.wb-ppl-entry { border-top:1px solid var(--ml-border); }
.wb-ppl-view { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 0; }
.wb-ppl-entry.is-editing .wb-ppl-view { display:none; }
.wb-ppl-editform { display:none; padding:.9rem 0 1rem; }
.wb-ppl-entry.is-editing .wb-ppl-editform { display:flex; }
.wb-ppl-main { flex:1 1 auto; min-width:0; }
.wb-ppl-name { font-weight:700; color:var(--ml-ink); font-size:1rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.wb-ppl-roleline { margin:.35rem 0 .15rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.wb-ppl-role { background:var(--ml-primary-soft, #eef4fb); color:var(--ml-green-strong-dark, #1f6f3f); font-size:.75rem; font-weight:600; padding:.12rem .55rem; border-radius:999px; }
.wb-ppl-norole { color:var(--ml-muted); font-size:.82rem; font-style:italic; }
.wb-ppl-contact { color:var(--ml-muted); font-size:.88rem; margin-top:.1rem; }
.wb-ppl-notes { color:var(--ml-muted); font-size:.85rem; margin-top:.25rem; }
.wb-ppl-actions { flex:0 0 auto; display:flex; gap:.3rem; }
.wb-ppl-access { background:var(--rag-green-bg); color:#145c30; font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }
.wb-ppl-noaccess { background:#eef1f4; color:#5a6472; font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }


/* People: pending login + suggestions */
.wb-ppl-pending { background:var(--rag-amber-bg); color:#8a5a00; font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }
.wb-ppl-suggest { border-color:var(--ml-green-strong); }
.wb-ppl-suggest .wb-ppl-view { border-top:1px solid var(--ml-border); }
.wb-ppl-suggest .wb-ppl-view:first-of-type { border-top:none; }

.wb-ppl-job { color:var(--ml-muted); font-size:.88rem; margin-top:.05rem; }


/* ---- In-form person picker ------------------------------------------ */
.wb-person select.wb-person-select { max-width:420px; }
.wb-person-tools { display:flex; gap:1rem; align-items:center; margin:.5rem 0 0; flex-wrap:wrap; }
.wb-person-addbtn { border:1px dashed var(--ml-border); background:#fff; color:var(--ml-green-strong-dark, #1f6f3f); font:inherit; font-weight:600; font-size:.85rem; padding:.35rem .7rem; border-radius:8px; cursor:pointer; }
.wb-person-addbtn:hover { border-color:var(--ml-green-strong); }
.wb-person-manage { font-size:.85rem; color:var(--ml-muted); }
.wb-person-add { margin:.7rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; max-width:440px; }
.wb-person-add .wb-person-f { font:inherit; padding:.5rem .6rem; border:1px solid var(--ml-border); border-radius:8px; background:#fff; }
.wb-person-addbtns { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.5rem; }
.wb-person-save { border:none; background:var(--ml-green-strong); color:#fff; font:inherit; font-weight:600; padding:.45rem .9rem; border-radius:8px; cursor:pointer; }
.wb-person-cancel { border:1px solid var(--ml-border); background:#fff; color:var(--ml-ink); font:inherit; padding:.45rem .9rem; border-radius:8px; cursor:pointer; }
.wb-person-linked { color:var(--ml-muted); font-size:.88rem; margin:.5rem 0 0; }
.wb-person-legacy { color:#8a5a00; background:var(--rag-amber-bg); border-radius:8px; padding:.5rem .7rem; font-size:.85rem; margin:.5rem 0 0; }
@media (max-width:520px){ .wb-person-add { grid-template-columns:1fr; } }


/* People: invite buttons, invited badge, add collapsible */
.wb-ppl-addwrap { margin-top:1.3rem; }
.wb-ppl-addwrap .wb-ppl-addpanel { margin:1rem 0 0; }
.wb-ppl-invite { border:1px solid var(--ml-green-strong); background:#fff; color:var(--ml-green-strong-dark, #1f6f3f); font:inherit; font-size:.8rem; font-weight:600; padding:.28rem .6rem; border-radius:7px; cursor:pointer; }
.wb-ppl-invite:hover { background:var(--rag-green-bg); }
.wb-ppl-invited { background:var(--rag-amber-bg); color:#8a5a00; font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }
.wb-ppl-ok { background:var(--rag-green-bg); color:#145c30; border:1px solid var(--rag-green); border-radius:8px; padding:.6rem .85rem; font-size:.9rem; margin:.2rem 0 1rem; }
.wb-ppl-buy { font-weight:700; }


/* ---- Person-or-role picker (plan "who" questions) ------------------- */
.wb-personrole { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.wb-pr-select { font:inherit; padding:.55rem .65rem; border:1px solid var(--ml-border); border-radius:8px; background:#fff; color:var(--ml-ink); max-width:420px; }
.wb-pr-custom { font:inherit; padding:.55rem .65rem; border:1px solid var(--ml-border); border-radius:8px; background:#fff; color:var(--ml-ink); min-width:220px; }
.wb-pr-add { width:100%; margin-top:.3rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; max-width:440px; }
.wb-pr-add .wb-person-f { font:inherit; padding:.5rem .6rem; border:1px solid var(--ml-border); border-radius:8px; background:#fff; }
.wb-pr-add .wb-person-addbtns { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.5rem; }
.wb-pr-addsave { border:none; background:var(--ml-green-strong); color:#fff; font:inherit; font-weight:600; padding:.45rem .9rem; border-radius:8px; cursor:pointer; }
.wb-pr-addcancel { border:1px solid var(--ml-border); background:#fff; color:var(--ml-ink); font:inherit; padding:.45rem .9rem; border-radius:8px; cursor:pointer; }
@media (max-width:520px){ .wb-pr-add { grid-template-columns:1fr; } }


/* ---- View-only (read-only) access ----------------------------------- */
.wb-viewbanner { background:#0b3d7a; color:#fff; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.9rem; text-align:center; padding:.55rem 1rem; }
body.wb-viewonly button[type=submit] { display:none !important; }
body.wb-viewonly .wb-log-edit, body.wb-viewonly .wb-log-rm, body.wb-viewonly .wb-log-actions,
body.wb-viewonly .wb-log-del, body.wb-viewonly .wb-log-editbtns,
body.wb-viewonly .wb-ppl-actions, body.wb-viewonly .wb-ppl-suggest, body.wb-viewonly .wb-ppl-addwrap,
body.wb-viewonly .wb-ppl-invite, body.wb-viewonly .wb-ppl-accessform,
body.wb-viewonly .wb-edit-item, body.wb-viewonly .wb-edit-all, body.wb-viewonly .wb-ppl-addtoggle,
body.wb-viewonly .wb-explain-insert, body.wb-viewonly .wb-none-btn,
body.wb-viewonly .wb-person-addbtn, body.wb-viewonly .wb-person-tools, body.wb-viewonly .wb-pr-add,
body.wb-viewonly .wb-email-form, body.wb-viewonly .wb-plan-cta form,
body.wb-viewonly .wb-markup-btn, body.wb-viewonly .wb-repo-markup { display:none !important; }
body.wb-viewonly input:not([type=button]):not([type=submit]),
body.wb-viewonly textarea, body.wb-viewonly select { pointer-events:none; background:#f4f5f6; color:#555; }

.wb-ppl-accessline { display:flex; align-items:center; gap:.4rem; margin-top:.35rem; font-size:.85rem; color:var(--ml-muted); }
.wb-ppl-accesssel { font:inherit; font-size:.82rem; padding:.2rem .45rem; border:1px solid var(--ml-border); border-radius:6px; background:#fff; }
.wb-ppl-accessform { margin:0; }