/* =====================================================================
   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-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; gap: .5rem; margin-bottom: .5rem; }
.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; 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;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ml-border);
}
.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); }

/* 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; }

.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: center; 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); }

/* 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; gap: .5rem; }

/* Document repository (repository.php) */
.wb-repo-toolbar { display: flex; 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; gap: .4rem; }
.wb-repo-update, .wb-repo-del {
  border: 1px solid var(--ml-border); background: #fff; border-radius: 6px;
  padding: .25rem .6rem; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.wb-repo-update { color: var(--ml-green-strong-dark); }
.wb-repo-update:hover { background: var(--ml-primary-soft); }
.wb-repo-del { color: var(--rag-red); }
.wb-repo-del:hover { background: var(--rag-red-bg); }
.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; 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: .4rem; }
.wb-riskrow {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .55rem .7rem; border: 1px solid var(--ml-border); border-radius: 8px;
  background: #fff; transition: border-color .12s, background .12s;
}
.wb-riskrow.is-on { border-color: var(--ml-green-strong); background: var(--ml-primary-soft); }
.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-resps { flex: 0 0 auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.wb-risk-help {
  display: block; margin: 0; padding: 0 .1rem;
  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; margin-left: .35rem; padding: .12rem .5rem;
  font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--ml-green-strong); border: 0; border-radius: 999px; cursor: pointer;
}
.wb-risk-apply:hover { background: var(--ml-green-strong-dark); }
.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; }
}

/* 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;
}