/* The website planner only. Loaded after base.css and answers.css, which hold
   the tokens and the shared page shell (.wrap, .answer-top, .home-return,
   footer). Nothing here appears on another page. The page works without
   JavaScript: every option is a real checkbox or radio in the HTML source, and
   the brief panel and the email button are progressive enhancement layered on
   top by the inline script at the foot of the page. */

body {
  background: linear-gradient(var(--bg), var(--bg-mid));
  min-height: 100vh;
}

/* Wider than the 46rem reading column: the planner puts the options beside a
   running brief on a large screen, and needs the room. */
.wrap.builder {
  max-width: 66rem;
}

/* Options on the left, the running brief on the right, from 64rem up. Below
   that everything stacks and the brief drops to the foot of the page. */
.builder-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .builder-grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
    gap: 3rem;
  }
}

/* ── An area of choices (Speed, Security, and the rest) ───────────────── */

.area {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  margin-top: 2.25rem;
}

.area:first-of-type {
  border-top: none;
  margin-top: 1rem;
}

.area > h2 {
  margin-top: 0;
}

.area-intro {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 1.25rem;
}

.area-facts {
  margin: 0 0 1.25rem;
  max-width: 52ch;
}

.area-facts > p {
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

/* ── A single togglable option ────────────────────────────────────────── */

.opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.opt {
  margin: 0;
}

/* The whole row is the label, so tapping anywhere toggles the box. */
.opt > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.35rem 0.9rem;
  align-items: start;
  cursor: pointer;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opt > label:hover {
  border-color: rgba(79, 195, 161, 0.4);
}

.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: none;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: grid;
  place-content: center;
}

.opt input[type="checkbox"]::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: var(--accent);
  border-radius: 1px;
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 84% 0, 39% 71%);
}

.opt input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.opt input:checked + .opt-text .opt-name {
  color: var(--text);
}

.opt input:checked ~ * {
  /* keeps the chip column aligned; no visual change */
}

.opt > label:has(input:checked) {
  border-color: rgba(79, 195, 161, 0.55);
  background: linear-gradient(180deg, rgba(79, 195, 161, 0.10), rgba(79, 195, 161, 0.03));
}

.opt input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.opt-text {
  min-width: 0;
}

.opt-name {
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.opt-desc {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 0.15rem;
}

/* ── Effort chips: Included / Add-on / Advanced ───────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: start;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}

.chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.chip-included { color: var(--accent); border-color: rgba(79, 195, 161, 0.4); }
.chip-addon    { color: var(--accent2); border-color: rgba(200, 169, 110, 0.4); }
.chip-advanced { color: #9db4d8; border-color: rgba(157, 180, 216, 0.4); }

/* ── The top of the page: the planner's name, the answer, the free offer ── */

.builder-brand {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

ul.answer {
  max-width: 46rem;
  margin-left: 0;
  padding-left: 2.75rem;
}

.offer {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.offer-label {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 0.2em 0.7em;
  border-radius: 2px;
  margin-right: 0.5rem;
}

.chip-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.chip-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Level chooser (Accessibility, Security): a segmented radio group ──── */

.levels {
  border: none;
  margin: 0;
  padding: 0;
}

.levels legend {
  padding: 0;
}

.level-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.level {
  margin: 0;
}

.level > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  align-items: start;
  cursor: pointer;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.level > label:hover {
  border-color: rgba(79, 195, 161, 0.4);
}

.level input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex: none;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: grid;
  place-content: center;
}

.level input[type="radio"]::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: var(--accent);
}

.level input[type="radio"]:checked::after {
  transform: scale(1);
}

.level > label:has(input:checked) {
  border-color: rgba(79, 195, 161, 0.55);
  background: linear-gradient(180deg, rgba(79, 195, 161, 0.10), rgba(79, 195, 161, 0.03));
}

.level input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.level-name {
  font-weight: 700;
  color: var(--text);
}

.level-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-left: 0.5rem;
}

.level-desc {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 0.2rem;
}

.level-desc ul {
  margin: 0.4rem 0 0 1.1rem;
  padding: 0;
}

.level-desc li {
  margin-bottom: 0.2rem;
}

/* ── The two "about your site" text fields and the org-type switch ─────── */

.about-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 14rem;
}

.field label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.field textarea {
  min-height: 4.5rem;
  line-height: 1.5;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-wide { flex-basis: 100%; }

.about-fields-spaced { margin-top: 1.25rem; }

/* Charity-only options, shown by the script when the organisation type is a
   charity. Hidden by default so a non-charity never sees them. The product
   count is hidden by the script until the shop option is ticked. */
.charity-only[hidden],
.shop-only[hidden] { display: none; }

/* ── The running brief ────────────────────────────────────────────────── */

.brief {
  padding: 1.4rem 1.5rem 1.6rem;
  background:
    linear-gradient(180deg, #151c2a 0%, #101725 45%, #0b1220 100%) padding-box,
    linear-gradient(180deg, #3a4560 0%, #262f42 38%, #171d2b 72%, #2b3448 100%) border-box;
  border: 6px solid transparent;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #05080f,
              inset 0 0 0 1px rgba(0, 0, 0, 0.8),
              inset 0 2px 0 rgba(255, 255, 255, 0.05),
              inset 0 -3px 12px rgba(0, 0, 0, 0.65),
              0 4px 0 rgba(0, 0, 0, 0.55),
              0 20px 45px rgba(0, 0, 0, 0.55);
}

.brief-head {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.brief-count {
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.brief-empty {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.brief-group {
  margin: 0 0 1rem;
}

.brief-group h3 {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 0.4rem;
}

.brief-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brief-group li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  padding: 0.15rem 0 0.15rem 1rem;
  position: relative;
}

.brief-group li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.brief-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.btn {
  display: inline-block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 0.85rem 1.2rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  color: var(--bg);
  background: var(--accent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

.btn-primary:hover { background: #63d2b1; }

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.btn-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
}

.copied {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  min-height: 1rem;
  margin: 0;
}

.brief-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

/* Without JavaScript the interactive brief is meaningless, so it is hidden and
   a plain instruction is shown instead. The script removes .no-js from <html>
   on load, revealing the brief and hiding the fallback. */
.no-js .brief-live { display: none; }
.js .brief-fallback { display: none; }