/* WWS Client Portal — brand: BRAND.md (ink navy, signal blue, Poppins/Inter) */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Colours, type and corners come from brand.css, which is a copy of
   assets/brand.css in the main site — that file explains why there is a copy and
   what to do when it changes. The names below are this file's own shorthand for
   those tokens, so every rule underneath keeps reading the way it always has.
   Add a NEW colour to brand.css, never here.

   --blue is the brand hue and belongs on fills and borders; --blue-dark is the
   readable one and belongs anywhere blue is text. Green, amber and red are the
   darkened weights for the same reason — the brand amber with white on it is
   2.4:1, which nobody can read — and the -soft ones are their pale washes. */
:root {
  --navy: var(--wws-navy);
  --blue: var(--wws-blue);
  --blue-dark: var(--wws-blue-ink);
  --blue-soft: var(--wws-blue-tint);
  --slate: var(--wws-slate);
  --mist: var(--wws-mist);
  --ink: var(--wws-ink);
  --line: var(--wws-line);
  --line-strong: var(--wws-line-strong);
  --sunken: #F8FAFD;                    /* table headers and inset boxes */
  --green: var(--wws-green-ink);
  --green-soft: var(--wws-green-tint);
  --amber: var(--wws-amber-ink);
  --amber-soft: var(--wws-amber-tint);
  --red: var(--wws-red-ink);
  --red-soft: var(--wws-red-tint);
  --radius: var(--wws-radius);
  --radius-sm: var(--wws-radius-sm);
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--mist);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 { font-family: "Poppins", "Inter", system-ui, sans-serif; font-weight: 600; }
h1 { font-size: 24px; margin-bottom: 8px; }
h2 { font-size: 17px; margin-bottom: 10px; }

/* ---------- top bar ---------- */
/* The same lit navy as the main site's hero, with a soft blue glow at the
   right and a signal-blue hairline underneath — one family, four fronts. */
.topbar {
  background:
    radial-gradient(440px 210px at 86% 0%, rgba(45, 125, 246, .22), transparent 70%),
    var(--wws-grad-navy);
  color: #fff;
  border-bottom: 2px solid rgba(45, 125, 246, .40);
}
.topbar-inner {
  max-width: 860px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
/* Brand mark (see BRAND.md). In the navy topbar the mark is used without its
   navy badge so the nodes stay legible; `.big` sits on the white login card and
   uses the full badge version. CSS only sizes it, never recolours it. */
.brand-logo { width: 40px; height: 40px; flex: none; display: block; }
.brand-logo.big { width: 48px; height: 48px; margin-bottom: 16px; }
.brand-name { font-weight: 600; font-size: 15px; }
.brand-sub { font-size: 11.5px; color: #9fb2ca; }
/* Labels never break inside a link — "Something new" on two lines reads as two
   items. Whole links flow onto a second row instead when the bar gets tight. */
.topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.topnav a, .topnav .linklike {
  color: #c9d6e6; text-decoration: none; font-size: 14px; padding: 8px 12px;
  border-radius: 8px; background: none; border: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.topnav a:hover, .topnav .linklike:hover { background: rgba(255,255,255,0.09); color: #fff; }
.topnav a.active { background: var(--wws-grad-blue); color: #fff; font-weight: 600; box-shadow: var(--wws-shadow-sm); }
.inline { display: inline; }
.nav-toggle { display: none; }

/* ---------- layout ---------- */
.wrap { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 26px 20px 40px; }
.lede { color: var(--slate); line-height: 1.6; margin-bottom: 20px; max-width: 640px; }
.foot { text-align: center; color: var(--slate); font-size: 12.5px; padding: 18px; }
.foot a { color: var(--slate); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.card {
  background: #fff;
  background-image: var(--wws-grad-sheen);
  border: 1px solid var(--line);
  border-radius: var(--wws-radius-lg);
  padding: 16px 18px;
  box-shadow: var(--wws-shadow-sm);
}
.card .num { font-size: 26px; font-weight: 700; font-family: "Poppins", sans-serif; color: var(--navy); }
.card .lbl { font-size: 12.5px; color: var(--slate); margin-top: 2px; line-height: 1.4; }
/* A card that's a link — the domain tiles. Same box, but it lifts on hover so
   it reads as something you can open rather than a statistic. */
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card-link:hover, .card-link:focus-visible { border-color: var(--blue); box-shadow: 0 6px 18px rgba(45,125,246,.12); transform: translateY(-1px); }
.card-link .num { color: var(--navy); }

/* ---------- domain tiles ---------- */
/* Their own grid: a web address needs about three times the width the stat-card
   minimum was sized for (a number like "3"). auto-fill, not auto-fit, so one
   domain gets a tile, not a full-width banner. The name's only permitted break
   points are the <wbr>s before each dot (cp_domain_wbr in domains.php) — no
   word-break here, ever, or "courtneyja messl.com" comes back. */
.domain-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.domain-name {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 18px;
  line-height: 1.3; color: var(--navy); overflow-wrap: break-word; min-width: 0;
}
.domain-card .lbl { margin-top: 6px; }
.domain-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.domain-title { overflow-wrap: break-word; }

.panel {
  background: #fff;
  background-image: var(--wws-grad-sheen);
  border: 1px solid var(--line);
  border-radius: var(--wws-radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--wws-shadow-sm);
}
.hint { color: var(--slate); font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
.panel .hint:last-child { margin-bottom: 0; }

/* ---------- hosting / what's included ---------- */
.price-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--mist); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.price { display: flex; align-items: baseline; gap: 6px; flex: none; }
.price .amount { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; }
.price .per { font-size: 13px; color: var(--slate); font-weight: 500; }
.includes { list-style: none; margin: 0; display: grid; gap: 10px; }
.includes li {
  position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.includes li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 99px;
  background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.includes strong { color: var(--navy); font-weight: 600; }

/* ---------- flash ---------- */
.flash { border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.flash-ok { background: var(--green-soft); color: var(--green); }
.flash-error { background: var(--red-soft); color: var(--red); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--slate); padding: 10px 12px; background: var(--sunken); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td small { color: var(--slate); }

.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.blue { background: var(--blue-soft); color: var(--blue-dark); }
.pill.grey { background: #EEF2F7; color: var(--slate); }
.pill.red { background: var(--red-soft); color: var(--red); }

/* ---------- forms ---------- */
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.grid-form .full { grid-column: 1 / -1; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); margin-bottom: 5px; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 15px; font-family: inherit; outline: none; background: #fff;
}
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: var(--wws-shadow-focus); }
textarea { min-height: 74px; resize: vertical; }

/* A dropdown has to lose its native skin to match the boxes around it — left
   alone the operating system draws a squat grey control with square corners and
   its own font. Losing the skin loses the arrow too, so one is drawn back on as
   an inline background image (no extra file, nothing that can 404), with the
   right-hand padding keeping a long option clear of it. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px; cursor: pointer;
  /* A select and an input work their default line box out differently, so
     without this the two sit a pixel or so apart in height. 20px is what an
     input's text occupies here, which makes them exactly equal. */
  line-height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2352677E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }
.check-row { display: flex; align-items: center; gap: 10px; }
.check-row input { width: 18px; height: 18px; flex: none; }
.check-row label { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; }

.btn-primary {
  background: var(--wws-grad-blue); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: transform var(--wws-speed-fast) var(--wws-ease), box-shadow var(--wws-speed-fast) var(--wws-ease);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--wws-shadow-blue); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-ghost {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--slate);
  padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: border-color var(--wws-speed-fast) var(--wws-ease), color var(--wws-speed-fast) var(--wws-ease);
}
.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); }

/* ---------- orders + dashboard ---------- */
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.order-head h2 { margin: 0; }
.order-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.order-actions .btn-ghost { text-decoration: none; }
.review-box { background: var(--mist); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-top: 16px; }
.review-box h3 { font-size: 15px; margin-bottom: 6px; }
.review-box p { font-size: 14px; line-height: 1.6; color: var(--slate); }
/* "Waiting on you" — the one panel that should catch the eye on the dashboard */
.panel.needs-you { border-color: #cfe0fb; box-shadow: 0 0 0 3px rgba(45, 125, 246, 0.07); }
.needs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.needs-row:last-child { border-bottom: none; padding-bottom: 0; }
.needs-row .btn-primary { padding: 9px 18px; font-size: 14px; flex: none; }
[data-when][hidden] { display: none; }

/* One-off extras you can just buy */
.extra { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.extra:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.extra-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.extra-head strong { font-size: 15.5px; color: var(--navy); }
.extra-price { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--navy); white-space: nowrap; }
.extra label { display: block; margin: 10px 0 5px; font-size: 13px; color: var(--slate); font-weight: 500; }
.extra textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; margin-bottom: 10px; resize: vertical;
}

/* Something Courtney wants okaying before he starts */
.approve-box {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: #fff; border: 1px solid #cfe0fb;
}
.approve-box strong { display: block; font-size: 14px; color: var(--navy); }
.approve-box p { font-size: 13px; color: var(--slate); margin: 2px 0 10px; }
.approve-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approve-actions .btn-primary { padding: 9px 16px; font-size: 14px; }
.approve-state { margin-top: 8px; }

/* ---------- quotes ---------- */
/* Count of quotes waiting on you, on the Quotes nav link. */
.nav-dot {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: var(--radius-sm); background: var(--amber); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.quote-includes {
  background: var(--mist); border-radius: 10px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.6;
}
.quote-actions { margin-top: 18px; }
.quote-actions details { margin-top: 14px; }
.quote-actions summary { cursor: pointer; color: var(--slate); font-size: 14px; }
.quote-actions label { display: block; margin: 12px 0 5px; font-size: 13px; color: var(--slate); font-weight: 500; }
.quote-actions textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; margin-bottom: 10px; resize: vertical;
}
/* The quote panel's price line: big number, status pill pushed to the right. */
.panel .price-row .pill { margin-left: auto; }

/* ---------- sign-in ---------- */
.auth-body {
  background:
    radial-gradient(640px 420px at 78% 12%, rgba(45, 125, 246, .30), transparent 65%),
    radial-gradient(520px 380px at 12% 92%, rgba(127, 168, 220, .14), transparent 65%),
    var(--wws-grad-navy);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-box {
  background: #fff; border-radius: var(--wws-radius-lg); padding: 32px 34px; width: 100%; max-width: 400px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.40);
}
.auth-box h1 { font-size: 20px; margin-bottom: 4px; }
.auth-box .sub { color: var(--slate); font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; }
.auth-box label { margin: 14px 0 5px; }
.auth-box .btn-primary { width: 100%; margin-top: 20px; }
.auth-box .flash { margin-bottom: 6px; }
.fine { color: var(--slate); font-size: 12.5px; line-height: 1.5; margin-top: 16px; }
.auth-legal { text-align: center; margin-top: 18px; font-size: 12.5px; }
.auth-legal a { color: #b9c6d8; }

/* ---------- request thread (jobs) ---------- */
.msg { max-width: 82%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.msg-client { margin-left: auto; background: #e8f0fc; border-color: #d3e2fb; }
.msg-admin { margin-right: auto; background: var(--mist); }
.msg-who { font-size: 11px; color: var(--slate); margin-bottom: 4px; }
.msg-body { font-size: 14px; line-height: 1.55; color: var(--ink); word-wrap: break-word; }

/* ---------- agreement ---------- */
.agreement-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.agreement-head h1 { margin: 0; }
.agreement { line-height: 1.65; font-size: 14.5px; }
.agreement-title { text-align: center; margin-bottom: 18px; }
.agreement-title small { font-weight: 500; color: var(--slate); font-size: 13px; }
.agreement h3 { font-size: 15px; margin: 18px 0 6px; }
.agreement p { margin-bottom: 10px; }
.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.signatures h4 { font-size: 13.5px; margin-bottom: 6px; }
.signatures p { font-size: 13.5px; color: var(--ink); }

/* ---------- mobile nav: hamburger + drop-down ----------
   Desktop keeps the inline top nav; on phones it collapses behind a menu
   button so the links can never overflow the bar. */
@media (max-width: 700px) {
  .topbar-inner { flex-wrap: wrap; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none; padding: 0;
    background: none; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 9px; color: #fff; cursor: pointer;
  }
  .nav-toggle:hover { background: rgba(255,255,255,0.09); }
  .nav-toggle svg { display: block; }
  .topnav {
    display: none; flex-basis: 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.14);
  }
  .topbar-inner.nav-open .topnav { display: flex; }
  .topnav a, .topnav .linklike { padding: 12px 14px; font-size: 15px; text-align: left; }
  .topnav form.inline { display: block; width: 100%; }
  .topnav .linklike { width: 100%; }
}

@media (max-width: 560px) {
  .grid-form { grid-template-columns: 1fr; }
  .signatures { grid-template-columns: 1fr; }
  h1 { font-size: 21px; }
  .wrap { padding: 20px 14px 32px; }
  .panel { padding: 16px; }
  .auth-box { padding: 26px 22px; }

  /* 16px form text stops iOS auto-zooming when a field is focused */
  input, select, textarea { font-size: 16px; }
  /* primary calls-to-action go full width — easier thumb targets */
  .btn-primary { width: 100%; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* data tables → stacked cards, one field per row with its label */
  .table-wrap:has(table.stack) { border: none; border-radius: 0; overflow: visible; }
  table.stack { min-width: 0; font-size: 14px; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody { display: block; width: 100%; }
  table.stack tr {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: 10px; padding: 4px 14px; margin-bottom: 10px;
  }
  table.stack tr:last-child { margin-bottom: 0; }
  table.stack tr td {
    display: block; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line);
  }
  table.stack tr td:last-child { border-bottom: none; }
  table.stack td:empty { display: none; }
  table.stack td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    color: var(--slate); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
}

@media print {
  .topbar, .foot, .no-print, .flash { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .panel, .agreement { border: none; padding: 0; }
}

/* ---- the quote builder (build.php) --------------------------------------
   The markup is partials/quote-builder.php, shared with the main site and the
   referral portal. Each of the three carries its own copy of these rules
   because none of the three stylesheets can see the others — so a change to
   the shape of the partial means a look at all three. The main site's copy in
   styles.css is the reference; this one is scaled to the portal's type sizes
   and uses the portal's own colour names. */
.builder { max-width: 780px; }
.bstep {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--wws-shadow-sm);
}
.bstep h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 17px; color: var(--navy); }
.bstep-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600;
}
.bstep-note { color: var(--slate); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.bstep textarea { width: 100%; box-sizing: border-box; }
.bopts { display: grid; gap: 9px; margin-top: 12px; }

/* One selectable product. The whole box is the label, so the hit area is the
   card rather than a 16px circle — this gets used on phones. */
.bopt {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer;
  transition: border-color var(--wws-speed-fast) var(--wws-ease), background var(--wws-speed-fast) var(--wws-ease);
}
.bopt:hover { border-color: var(--blue-soft); }
/* Direct child only: the tick itself. Left as `.bopt input` this also sized
   the "How many?" box inside the card to 18px square. */
.bopt > input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--blue); }
.bopt:has(input:checked) { border-color: var(--blue); background: #f7faff; }
.bopt-body { flex: 1 1 auto; min-width: 0; }
.bopt-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bopt-name { font-weight: 600; color: var(--navy); }
.bopt-price { font-family: var(--wws-font-head); font-weight: 700; color: var(--navy); white-space: nowrap; }
.bopt-price small { font-size: 11.5px; font-weight: 500; color: var(--slate); }
.bopt-desc { display: block; margin-top: 3px; color: var(--slate); font-size: 13.5px; line-height: 1.5; }
.bopt-qty { display: block; margin-top: 9px; font-size: 13.5px; color: var(--slate); }
.bopt-qty input { width: 70px; margin-left: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
/* Unavailable because of a rule — greyed with the reason, not hidden, so it's
   clear the option exists and what would unlock it. */
.bopt.is-off { opacity: .5; cursor: not-allowed; background: var(--mist); }
.bopt-why { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--blue-dark); }
/* "Something else" — a website with no price on it yet, so its price slot says
   who'll be putting one there rather than a figure. */
.bopt-own .bopt-price { font-weight: 600; font-size: 13.5px; color: var(--slate); }
.bstep-own { display: block; margin-top: 11px; }
.bstep-own[hidden] { display: none; }
.bstep-own label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 5px; font-size: 14px; }
.bstep-own textarea { margin-bottom: 9px; }
/* Sits where a price would be on the running total, saying plainly that there
   isn't one — never a £0, which would read as free. */
.bown-tbc { color: var(--slate); font-weight: 500; white-space: nowrap; }

.btotal { border-color: var(--blue); }
.btotal-lines { list-style: none; margin: 9px 0 0; padding: 0; }
.btotal-lines li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.btotal-lines li:last-child { border-bottom: 0; }
.btotal-lines li.empty { color: var(--slate); justify-content: flex-start; }
.btotal-lines small { color: var(--slate); font-weight: 500; }
.btotal-sums { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.btotal-sums div { display: flex; flex-direction: column; }
/* That `display: flex` beats the browser's own `[hidden] { display: none }`,
   so without this the full-price and discount figures sit there reading £0. */
.btotal-sums div[hidden] { display: none; }
.btotal-sums span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.btotal-sums strong { font-family: var(--wws-font-head); font-size: 24px; color: var(--navy); }
#sumFullWrap strong { font-size: 18px; color: var(--slate); text-decoration: line-through; }
#sumOffWrap strong { font-size: 18px; color: var(--green); }

.bfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 16px; }
.bfields .field-wide { grid-column: 1 / -1; }
.bfields label { display: block; font-size: 13px; color: var(--slate); margin-bottom: 4px; }
@media (max-width: 620px) {
  .bfields { grid-template-columns: 1fr; }
  .bopt-head { flex-direction: column; gap: 2px; }
}

/* On a desktop the running total leaves the flow and becomes a rail on the
   right, pinned under the header, so the price stays in view the whole way
   down without sitting on top of anything. */
@media (min-width: 1000px) {
  .builder {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 28px; row-gap: 0; align-items: start;
  }
  .builder > * { grid-column: 1; }
  .builder > .btotal {
    grid-column: 2;
    /* More rows than the form will ever have, so the rail's grid area runs the
       form's full height and the panel can stick anywhere inside it. */
    grid-row: 1 / span 40;
    align-self: start; position: sticky; top: 90px;
    max-height: calc(100vh - 106px); overflow-y: auto; margin-bottom: 0;
  }
  .builder > .btotal .btotal-sums { gap: 12px 20px; }
  .builder > .btotal .btotal-sums strong { font-size: 21px; }
}

/* ---- the admin "view as" bar ---- */
.admin-view-bar {
  background: var(--amber-soft); color: var(--amber);
  font-size: 13px; font-weight: 600; text-align: center;
  padding: 8px 16px; border-bottom: 1px solid var(--line-strong);
}
.admin-view-bar .linklike {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline;
}