/* ---------------------------------------------------------------------------
   Rules the RECONSTRUCTION needs that the deployed stylesheet does not have.

   WHY THIS IS A SEPARATE FILE AND NOT APPENDED TO pbs.css

   src/assets/css/pbs.css is byte-identical to the stylesheet the live origin
   serves, and build.mjs fingerprints it back to v=74fb9f4067 - the exact token
   pascoesystems.co.uk serves today. That match is the strongest provenance link
   this workspace has between the recovered source and the running deployment,
   and appending a rule to that file would destroy it for the sake of two
   declarations. So the recovered sheet stays as recovered, and everything the
   rebuild adds lives here where a later cycle can see exactly what the
   reconstruction changed and what it merely inherited.

   Same-origin, so style-src 'self' allows it. Every rule here exists because a
   captured page did the same thing with a style="..." attribute, which that
   same policy DROPS - see tests/csp-markup-baseline.json, finding
   inline-style-attribute-blocked. Rebuilding a page means the styling has to
   land somewhere the policy permits, and this is that place.
   --------------------------------------------------------------------------- */

/* .btn-row is a flex row, so text-align on .centre does not reach it. The
   captured /about/ and /platform/ pages both wrote
   style="justify-content: center" for this, on a policy that forbids it. */
.centre .btn-row {
  justify-content: center;
}

/* A centred sign-off logo. The captured /about/ page carried
   style="width: min(380px, 74%); margin-inline: auto" for the same effect. */
.signoff__logo {
  display: block;
  width: min(380px, 74%);
  margin-inline: auto;
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* The captured /property/ page separated the "Contractors" heading from the list
   above it with style="margin-top: 2em". Same policy, same problem. */
.card h3.spaced {
  margin-top: 2em;
}

/* ---------------------------------------------------------------------------
   PRICING PAGE (/pricing/) — added content, existing tokens only, no restyle.
   Small margin utilities replace the inline style="margin-top" the CSP drops.
   --------------------------------------------------------------------------- */
.mt-md { margin-top: 1.25rem; }
.mt-lg { margin-top: 1.5rem; }

/* Package + price cards */
.plan { display: flex; flex-direction: column; position: relative; }
.plan__list {
  list-style: none;
  margin: 0.75rem 0 1.25rem;
  padding: 0;
}
.plan__list li {
  padding: 0.3rem 0 0.3rem 1.5rem;
  position: relative;
  color: var(--ink-muted);
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--amber);
}
.plan .btn-row { margin-top: auto; }

/* Product cards: pin the Open/More CTAs to the bottom so they line up across a
   row regardless of how much summary text each product has. .card already sets
   height:100% in pbs.css, so making it a flex column lets .btn-row's margin-top
   push the buttons down -- the same mechanism the pricing .plan cards use above.
   Cards without a .btn-row are unaffected. On the products page the first row
   (Pascoes Property / SiteLedger / PBS Accounts) had buttons at three different
   heights because the summaries differ in length; this aligns them. */
.card { display: flex; flex-direction: column; }
.card .btn-row { margin-top: auto; }
.plan__price { margin: 0.25rem 0 0.5rem; }
.plan__amount {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.plan__per { color: var(--ink-faint); font-weight: 500; font-size: 1rem; }

.plan--featured {
  border-color: var(--amber);
  box-shadow: var(--shadow);
}
.plan__badge {
  position: absolute;
  top: -0.8rem;
  right: 1rem;
  background: var(--amber);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

/* Calculator */
.calc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.calc__term { border: 0; margin: 0 0 1rem; padding: 0; }
.calc__term legend { margin-bottom: 0.35rem; }
.calc__term label { display: inline-block; margin-right: 1.5rem; }
.calc__table { width: 100%; border-collapse: collapse; }
.calc__table th,
.calc__table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.calc__table th { color: var(--ink-faint); font-weight: 600; font-size: 0.9rem; }
.calc__pick label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.calc__qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.calc__qty input {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
.calc__flat { color: var(--ink-faint); }
.calc__line { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__table td.calc__line { text-align: right; }

.calc__out { margin-top: 1.25rem; }
.calc__line-big {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
}
.calc__line-big strong { font-variant-numeric: tabular-nums; }
.calc__line-big--total {
  border-top: 2px solid var(--line-strong);
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  font-size: 1.15rem;
}
.calc__line-big--total strong { color: var(--navy); }
[data-role="saving"] {
  margin-top: 0.75rem;
  color: var(--amber-700);
  font-weight: 600;
}

/* Homepage/product card price line — the muted .small class carries it, but the price
   itself should read clearly. */
.home-price { margin-top: 0.35rem; }
.home-price strong { color: var(--navy); }

/* ---------------------------------------------------------------------------
   /demo/ — THE PBS POLICIES SAMPLE BENCH (added 14 September 2026)

   The page is src/pages/demo.mjs and its behaviour is src/assets/js/policies-demo.js.
   All of it is here rather than in the page because the site sends
   style-src 'self' and the CSP drops every inline style attribute; see the note
   at the top of this file.

   Only existing tokens are used (--navy, --amber, --ink*, --paper*, --line*), so
   the bench is the same product as the rest of the site rather than a widget that
   happens to sit on it. The one thing it adds is a serif for the document body:
   a policy that is going to be printed and handed over should look on screen like
   the thing it becomes, and the sans-serif the site uses everywhere else does not.
   --------------------------------------------------------------------------- */

.note--amber {
  border-left: 3px solid var(--amber);
  background: var(--amber-050);
  padding: 0.85rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 1.25rem 0 0;
}
.note--amber strong { color: var(--ink); }

.bench {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 900px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the rail ---- */

.bench__rail {
  background: var(--navy);
  color: #e8eef7;
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.5rem;
  display: grid;
  gap: 1.4rem;
  position: sticky;
  top: 1.25rem;
}

@media (max-width: 900px) {
  .bench__rail { position: static; }
}

.bench__legend {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb2cc;
  margin: 0 0 0.75rem;
}

.bench__field { display: grid; gap: 0.3rem; margin-bottom: 0.75rem; }
.bench__field:last-child { margin-bottom: 0; }

.bench__field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #9fb2cc;
}

.bench__field input[type="text"] {
  font: inherit;
  font-size: 0.92rem;
  color: #e8eef7;
  background: #0d2a52;
  border: 1px solid #17365f;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  width: 100%;
}

.bench__field input[type="text"]:focus-visible,
.bench__file:focus-visible,
.bench__doc:focus-visible,
.bench__sheet:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.bench__logo-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.bench__logo {
  width: 54px;
  height: 54px;
  border: 1px dashed #17365f;
  border-radius: var(--radius-sm);
  background: #0d2a52;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.bench__logo img { max-width: 100%; max-height: 100%; display: block; }
.bench__logo span { font-size: 0.62rem; color: #6d84a4; letter-spacing: 0.06em; }

.bench__file {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e8eef7;
  background: transparent;
  border: 1px solid #17365f;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}
.bench__file:hover { border-color: var(--amber); color: #fff; }

.bench__note {
  font-size: 0.76rem;
  color: #9fb2cc;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.bench__docs { display: grid; gap: 0.35rem; }

.bench__doc {
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #e8eef7;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  display: grid;
  gap: 0.1rem;
  line-height: 1.35;
}
.bench__doc:hover { background: #0d2a52; }
.bench__doc[aria-current="true"] { background: #0d2a52; border-color: var(--amber); }
.bench__doc b { font-size: 0.9rem; font-weight: 600; }
.bench__doc em { font-style: normal; font-size: 0.73rem; color: #9fb2cc; }

/* ---- the sheet ---- */

.bench__main { display: grid; gap: 0.85rem; min-width: 0; }

.bench__tools { align-items: center; margin: 0; }

.bench__status {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-left: auto;
}
@media (max-width: 620px) { .bench__status { margin-left: 0; } }

.bench__sheet-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.bench__sheet-tab {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.bench__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.03em;
  text-transform: none;
  font-weight: 500;
}
.bench__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.bench__sheet {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  line-height: 1.6;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 4rem) clamp(2.25rem, 5vw, 4rem);
  max-width: 78ch;
  margin-inline: auto;
}
.bench__sheet:focus { outline: none; }

.bench__sheet .doc-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 1.35rem;
}
.bench__sheet .doc-head img { max-height: 54px; max-width: 170px; }
.bench__sheet .doc-head .org {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.05rem;
}
.bench__sheet .doc-head .org span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.bench__sheet h2 {
  font-family: var(--font);
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}
.bench__sheet .doc-sub {
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}
.bench__sheet h3 {
  font-family: var(--font);
  font-size: 0.95rem;
  margin: 1.6rem 0 0.5rem;
}
.bench__sheet p { margin: 0 0 0.75rem; }
.bench__sheet ul, .bench__sheet ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.bench__sheet li { margin-bottom: 0.35rem; }

.bench__sheet table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 1rem;
}
.bench__sheet th, .bench__sheet td {
  border: 1px solid var(--line-strong);
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.bench__sheet th {
  background: var(--navy-050);
  font-weight: 600;
  font-size: 0.78rem;
}
.bench__sheet .table-scroll { overflow-x: auto; }

.bench__sheet .signblock {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font);
  font-size: 0.86rem;
}
.bench__sheet .signrule {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  min-width: 220px;
  margin: 1.35rem 0 0.35rem;
}

.bench__sheet .stub {
  font-family: var(--font);
  font-size: 0.8rem;
  color: var(--ink-faint);
  background: var(--paper-tint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin-top: 1.35rem;
}

.bench__sheet mark.token {
  background: var(--amber-050);
  color: inherit;
  box-shadow: inset 0 -1px 0 var(--amber);
  padding: 0 1px;
  border-radius: 2px;
}
body.no-highlight .bench__sheet mark.token { background: transparent; box-shadow: none; }

/* Printing the bench prints the document and nothing else. */
@media print {
  .site-header, .site-footer, .bench__rail, .bench__tools, .bench__sheet-tab,
  .section--tight, .note--amber { display: none !important; }
  .bench { display: block; }
  .bench__sheet-wrap { border: 0; box-shadow: none; }
  .bench__sheet mark.token { background: transparent; box-shadow: none; }
}

/* -----------------------------------------------------------------------------
   Product mockup (W1, 18 Sep 2026) — a CSS browser-chrome figure of fabricated
   data. Honest by construction; used in place of screenshots (NO-REAL-DATA-RULE).
   -------------------------------------------------------------------------- */
.pbs-mock { margin: 0; }
.pbs-mock__frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(7, 30, 61, .45);
}
.pbs-mock__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pbs-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.pbs-mock__title { margin-left: 10px; color: #dfe7f2; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.pbs-mock__body { padding: 4px 0; overflow-x: auto; }
.pbs-mock__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pbs-mock__table th {
  text-align: left; padding: 9px 16px; color: var(--ink-muted); font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}
.pbs-mock__table td { padding: 10px 16px; color: var(--ink); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pbs-mock__table tr:last-child td { border-bottom: 0; }
.pbs-mock__table td:first-child { font-weight: 600; }
.pbs-mock__chipcell { text-align: right; }
.pbs-mock__chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pbs-mock__chip--ok      { background: #e6f4ea; color: #145c31; }
.pbs-mock__chip--warn    { background: #fdeeda; color: #8a5507; }
.pbs-mock__chip--due     { background: #fbe4e2; color: #b3261e; }
.pbs-mock__chip--info    { background: #e2ecfb; color: #23508f; }
.pbs-mock__chip--neutral { background: #eef1f6; color: var(--ink-muted); }
.pbs-mock__cap {
  margin: 10px 2px 0; font-size: 12px; color: var(--ink-faint); font-style: italic;
}

/* Sector picker (W5/W8, 18 Sep 2026) — six first-person tiles with a line icon. */
.sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.sector {
  display: block; padding: 22px 22px 24px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sector:hover, .sector:focus-visible {
  border-color: var(--line-strong); box-shadow: 0 14px 30px -20px rgba(7, 30, 61, .4); transform: translateY(-2px);
}
.sector__ico { display: inline-flex; color: var(--navy); }
.sector__icon { color: var(--navy); }
.sector__ico .sector__icon path[stroke], .sector__ico .sector__icon circle { }
.sector__q { display: block; margin: 12px 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.sector__lead { display: block; color: var(--ink-muted); font-size: 14.5px; line-height: 1.5; }
.sector__icon { stroke: var(--navy); }
.sector:hover .sector__icon { stroke: var(--amber); }

/* Sector page price line (W6). */
.price-line { margin: 14px 0 18px; font-size: 18px; color: var(--ink); }
.price-line .small { color: var(--ink-faint); font-size: 13px; }
.sector-page { scroll-margin-top: 84px; }

/* Operational spine (W7). Transparent nodes so it reads on light or dark surfaces. */
.spine { max-width: 940px; margin: 8px auto 0; }
.spine__svg { display: block; }

/* Before/after (W9, 18 Sep 2026): nine spreadsheets -> one record. Pure CSS. */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 3vw, 34px); }
@media (max-width: 720px) { .beforeafter { grid-template-columns: 1fr; } .beforeafter__arrow { transform: rotate(90deg); } }
.beforeafter__before { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ba-sheet {
  display: block; padding: 12px 8px; text-align: center; font-size: 12.5px; color: var(--ink-muted);
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid #1d8f4e; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beforeafter__arrow { font-size: 30px; color: var(--amber); text-align: center; }
.beforeafter__after {
  display: flex; flex-direction: column; gap: 6px; padding: 22px;
  background: var(--navy); border-radius: var(--radius); color: #eaf1fb;
  box-shadow: 0 18px 40px -22px rgba(7,30,61,.5);
}
.ba-record__title { font-size: 19px; font-weight: 700; color: #fff; }
.ba-record__line { font-size: 14px; color: #b9c8de; }

/* Compact product strip on the homepage (W11) — names + links, not full cards. */
.prod-strip { display: flex; flex-direction: column; gap: 8px; }
.prod-chip {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 13px 18px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.prod-chip:hover, .prod-chip:focus-visible { border-color: var(--line-strong); }
.prod-chip__name { font-weight: 700; }
.prod-chip__badge { font-size: 12px; color: var(--ink-muted); }
.prod-chip__go { font-size: 13.5px; color: var(--navy); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .prod-chip { grid-template-columns: 1fr auto; } .prod-chip__go { display: none; } }

/* "What it costs you now" (W12). */
.costnow { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; }
@media (max-width: 720px) { .costnow { grid-template-columns: 1fr; } }
.costnow__inputs { display: flex; flex-direction: column; gap: 14px; }
.costnow__inputs label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.costnow__inputs input { padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 16px; max-width: 220px; }
.costnow__out { background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }

/* ==========================================================================
   HORIZONTAL OVERFLOW ON NARROW SCREENS — 25 September 2026
   ==========================================================================
   Reported on a 375px phone: the homepage H1, its lead paragraph and the
   "Pascoes Property — Units" hero mock all ran off the right edge and clipped.

   MEASURED CAUSE, not a guess. A real browser at 375px reported the offending
   element as a bare grid child of `.wrap.split`, 473px wide, with
   `min-width: auto`. `.split` is `display:grid; grid-template-columns:1fr`,
   and a grid (or flex) item defaults to `min-width:auto`, which means the
   track is not allowed to shrink below the item's MIN-CONTENT width. The
   widest thing in that column is the mock table, whose cells are
   `white-space:nowrap`, so its min-content width is the full untruncated
   table — 473px. The whole column was pushed to 473px and the heading and
   paragraph, which are perfectly happy to wrap, were dragged out with it.

   This is why `.pbs-mock__body { overflow-x: auto }` was already present and
   already not working: a scroll container still SIZES to its content unless it
   is allowed to shrink. `overflow` governs what happens to content that
   overflows a box; it does not make the box narrower.

   So the fix is `min-width: 0` on the items, which restores the ability to
   shrink and lets the existing `overflow-x:auto` finally do its job.
   -------------------------------------------------------------------------- */

/* 1. Let grid and flex children shrink below their content's intrinsic width. */
.split > *,
.grid > *,
.hero > *,
.hero-mock,
.costnow > * {
  min-width: 0;
}

/* 2. Nothing wide is allowed to push its container open. The mock frame is the
      known offender; the media rules are the ones that bite when a client later
      pastes in a wide image or an embed. */
.pbs-mock,
.pbs-mock__frame {
  max-width: 100%;
}
.pbs-mock__body {
  max-width: 100%;
  overflow-x: auto;                 /* now effective, see above */
  -webkit-overflow-scrolling: touch;
}
img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
}

/* 3. A long unbroken token — a URL in prose, a reference with no spaces — can
      do the same thing to a paragraph that the table did to the grid. */
p, li, dd, h1, h2, h3, h4, .lead {
  overflow-wrap: break-word;
}

/* 4. The backstop. Everything above fixes the causes; this stops a future one
      reaching a phone as a sideways-scrolling page. `clip` rather than `hidden`
      because `hidden` on <body> creates a scroll container, which breaks
      `position: sticky` in descendants; `clip` does not. The `hidden` fallback
      is for browsers without `clip`, which do not support sticky the same way.
      If this rule is ever the thing holding the layout together, something
      above it has regressed — it is a seatbelt, not a fix. */
html, body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* The pricing calculator at phone width. Measured at 375px: `.calc__table` sat at x=37 and ran to
   390 — about 15px past the edge, clipped. `width: 100%` does not hold a table in: an auto-layout
   table still grows to its MIN-CONTENT width, and here that was the checkbox label plus a 5rem
   quantity box plus a nowrap price, side by side.

   Not wrapped in a scroll box, unlike the product mockups: this one is a FORM. Hiding a checkbox
   or a quantity field off the side of a scroll container and asking someone on a phone to find it
   is worse than tightening the spacing. So it is made to fit instead. */
@media (max-width: 460px) {
  .calc__table th,
  .calc__table td { padding: 0.55rem 0.25rem; }
  .calc__qty input { width: 3.25rem; }
  .calc__qty { gap: 0.3rem; }
  /* inline-flex keeps the label text on one line whatever the width; flex + wrap lets it break,
     which is what actually buys the room at 320px (an iPhone SE is still 320). */
  .calc__pick label { gap: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; }
  .calc__table { table-layout: fixed; }
  .calc__table td, .calc__table th { overflow-wrap: break-word; }
  /* the price column may wrap rather than force the table open */
  .calc__line { white-space: normal; }
}

/* ------------------------------------------------------------------ guides
   BP-2.2, 27 September 2026. The guide pages, and the two things measurement caught on the live site
   rather than the stylesheet.

   1. TAP TARGETS. The guide index's card titles are links, and on the live page one measured
      201.8 x 34px at 390px - under JP's 44px minimum. A card title is not prose, it is the primary
      way into the guide, so it is a tap target and it has to be one. Declaring a height is not
      enough on its own either: the PBS Policies help button declared 28px and rendered at 9.02px
      because flex-shrink took the rest, which is exactly why this is verified by measuring the
      rendered box (CONTROL/scripts/verify-guides-a11y.mjs) and not by reading this file.

      inline-flex + align-items so the 44px is real height around the text rather than a line-height
      trick that leaves the clickable area small.

   2. WIDE TABLES ON A PHONE. Both guides carry a two-column table, and the CHAS document list has
      long prose in both cells. A table is allowed to scroll sideways INSIDE its own box - unlike the
      calculator form above, nothing here is an input, so nothing can get hidden where a person
      cannot reach it. The wrapper scrolls; the page does not. */
.guide-body { max-width: 46rem; }
.guide-body h2 { margin-top: 2.2rem; }
.guide-body p, .guide-body li { line-height: 1.65; }
.guide-list { margin: 0.6rem 0 1.1rem; padding-left: 1.2rem; }
.guide-list li { margin-bottom: 0.45rem; }
.guide-sources { color: #4a5568; }

.guide-table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; }
.guide-table { border-collapse: collapse; width: 100%; min-width: 22rem; }
.guide-table th, .guide-table td { border: 1px solid #d7dde6; padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; }
.guide-table th { background: #f4f6f9; }

/* The 44px rule. Applied at every width, not just on a phone: a 34px target is a 34px target on a
   touchscreen laptop too. */
.card h2 a,
.guide-body .guide-list > li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}