/*!
 * ProQS NEC4 Pain and Gain Share Calculator
 * All rules are scoped to .proqs-pgc so the calculator cannot restyle the theme,
 * and resets the few properties themes commonly override on inputs and tables.
 *
 * Layout: a ledger-style workspace. Inputs on the left, live position on the right,
 * workings, charts and scenarios full width beneath. Deliberately light only, to
 * sit inside the ProQS.site theme.
 */
@font-face { font-family: "PGC Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "PGC Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "PGC Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "PGC Plex Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "PGC Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

.proqs-pgc {
  /* Colour */
  --pgc-navy: #13294b;
  --pgc-navy-2: #234372;
  --pgc-teal: #2b7a74;
  --pgc-teal-soft: #e4f0ef;
  --pgc-bg: #f4f6f9;
  --pgc-surface: #ffffff;
  --pgc-line: #d9e0e8;
  --pgc-line-strong: #b9c4d1;
  --pgc-ink: #14213a;
  --pgc-muted: #56667c;
  --pgc-pain: #a13d2d;
  --pgc-pain-soft: #f9ebe8;
  --pgc-gain: #1f6e55;
  --pgc-gain-soft: #e5f2ec;
  --pgc-warn: #7d5300;
  --pgc-warn-soft: #fff3d6;
  --pgc-focus: #2b7a74;
  /* Type */
  --pgc-font: "PGC Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pgc-display: "PGC Plex Condensed", "IBM Plex Sans Condensed", "Arial Narrow", var(--pgc-font);
  --pgc-mono: "PGC Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Shape */
  --pgc-radius: 6px;
  --pgc-gap: 16px;

  /* Layout responds to the calculator's own width, not the screen's,
     so it works in narrow theme columns as well as full-width pages. */
  box-sizing: border-box; /* width rules below include padding in any theme */
  container: pgc / inline-size;
  font-family: var(--pgc-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pgc-ink);
  background: var(--pgc-bg);
  border: 1px solid var(--pgc-line);
  border-radius: 10px;
  padding: 20px;
  margin: 24px 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.proqs-pgc *, .proqs-pgc *::before, .proqs-pgc *::after { box-sizing: border-box; }
.proqs-pgc h2, .proqs-pgc h3, .proqs-pgc h4 { font-family: var(--pgc-display); color: var(--pgc-navy); margin: 0; letter-spacing: 0; text-transform: none; text-wrap: balance; line-height: 1.2; }
.proqs-pgc p { margin: 0; }
.proqs-pgc [hidden] { display: none !important; }
.proqs-pgc .pgc-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pgc-field, .pgc-panel { position: relative; }
.proqs-pgc .pgc-noscript { padding: 16px; background: var(--pgc-warn-soft); color: var(--pgc-warn); border-radius: var(--pgc-radius); }

/* ---------- Header ---------- */
.pgc-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; border-bottom: 2px solid var(--pgc-navy); margin-bottom: 20px; }
.pgc-head-title { display: grid; gap: 4px; min-width: 0; }
.pgc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pgc-teal); }
.proqs-pgc .pgc-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; }
.pgc-sub { color: var(--pgc-muted); font-size: 14px; }
.pgc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.proqs-pgc .pgc-btn { appearance: none; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--pgc-font); padding: 10px 14px; border-radius: var(--pgc-radius); border: 1px solid var(--pgc-navy); background: var(--pgc-navy); color: #fff; cursor: pointer; text-decoration: none; min-height: 40px; }
.proqs-pgc .pgc-btn:hover { background: var(--pgc-navy-2); border-color: var(--pgc-navy-2); color: #fff; }
.proqs-pgc .pgc-btn-secondary { background: var(--pgc-surface); color: var(--pgc-navy); }
.proqs-pgc .pgc-btn-secondary:hover { background: var(--pgc-teal-soft); color: var(--pgc-navy); border-color: var(--pgc-navy); }
.proqs-pgc .pgc-btn-ghost { background: transparent; color: var(--pgc-muted); border-color: var(--pgc-line-strong); }
.proqs-pgc .pgc-btn-ghost:hover { background: var(--pgc-surface); color: var(--pgc-ink); border-color: var(--pgc-line-strong); }
.proqs-pgc .pgc-btn-small { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.proqs-pgc .pgc-btn[disabled] { opacity: .55; cursor: progress; }
.proqs-pgc .pgc-btn svg { width: 16px; height: 16px; flex: none; }
.proqs-pgc .pgc-icon-btn { appearance: none; border: 1px solid transparent; background: transparent; color: var(--pgc-muted); border-radius: var(--pgc-radius); width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.proqs-pgc .pgc-icon-btn:hover { color: var(--pgc-pain); border-color: var(--pgc-line); background: var(--pgc-surface); }
.proqs-pgc .pgc-icon-btn svg { width: 16px; height: 16px; }
.proqs-pgc :is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--pgc-focus); outline-offset: 2px; }

.pgc-example-pick { display: flex; gap: 8px; align-items: center; flex: 0 1 380px; min-width: 0; }
.proqs-pgc .pgc-example-pick .pgc-select { min-height: 34px; width: 100%; min-width: 0; }
.pgc-example-note > span { flex: 1 1 280px; min-width: 0; }
.pgc-example-note { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; background: var(--pgc-teal-soft); color: var(--pgc-navy); border-radius: var(--pgc-radius); padding: 10px 14px; margin-bottom: 20px; font-size: 14px; }

/* ---------- Workspace grid ---------- */
.pgc-workspace { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.pgc-panel { background: var(--pgc-surface); border: 1px solid var(--pgc-line); border-radius: 8px; min-width: 0; }
.pgc-panel + .pgc-panel { margin-top: 0; }
.pgc-stack { display: grid; gap: 20px; min-width: 0; }
@container pgc (min-width: 860px) { .pgc-sticky { position: sticky; top: var(--pgc-sticky-top, 24px); } }
.pgc-section { padding: 18px; border-top: 1px solid var(--pgc-line); }
.pgc-section:first-child { border-top: 0; }
.pgc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.proqs-pgc .pgc-section-head h3 { font-size: 18px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.pgc-letter { font-family: var(--pgc-mono); font-size: 12px; color: var(--pgc-teal); border: 1px solid var(--pgc-teal); border-radius: 4px; padding: 1px 6px; line-height: 1.4; }
.pgc-hint { font-size: 13px; color: var(--pgc-muted); }

/* ---------- Fields ---------- */
.pgc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pgc-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.pgc-field-wide { grid-column: 1 / -1; }
.proqs-pgc .pgc-field label, .pgc-label { font-size: 13px; font-weight: 500; color: var(--pgc-ink); }
.pgc-field .pgc-hint { font-size: 12px; }
.proqs-pgc .pgc-input, .proqs-pgc .pgc-select {
  width: 100%; min-height: 40px; margin: 0; font: 400 15px/1.3 var(--pgc-font); color: var(--pgc-ink);
  background: var(--pgc-surface); border: 1px solid var(--pgc-line-strong); border-radius: var(--pgc-radius); padding: 8px 10px; box-shadow: none;
}
.proqs-pgc .pgc-input:focus, .proqs-pgc .pgc-select:focus { border-color: var(--pgc-teal); box-shadow: 0 0 0 3px var(--pgc-teal-soft); outline: none; }
.proqs-pgc .pgc-input[readonly] { background: var(--pgc-bg); color: var(--pgc-muted); }
.proqs-pgc .pgc-money { font-family: var(--pgc-mono); font-variant-numeric: tabular-nums; text-align: right; }
.pgc-affix { position: relative; display: block; }
.pgc-affix > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--pgc-muted); font-size: 14px; pointer-events: none; font-family: var(--pgc-mono); }
.pgc-affix .pgc-pre { left: 10px; }
.pgc-affix .pgc-post { right: 10px; }
.proqs-pgc .pgc-affix .pgc-input.has-pre { padding-left: 26px; }
.proqs-pgc .pgc-affix .pgc-input.has-post { padding-right: 28px; }
.proqs-pgc .pgc-input[aria-invalid="true"] { border-color: var(--pgc-pain); background: var(--pgc-pain-soft); }
.pgc-field-error { font-size: 12px; color: var(--pgc-pain); }

.pgc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--pgc-line-strong); border-radius: var(--pgc-radius); overflow: hidden; background: var(--pgc-surface); }
.proqs-pgc .pgc-seg button { appearance: none; border: 0; border-right: 1px solid var(--pgc-line-strong); background: transparent; color: var(--pgc-muted); font: 500 13px/1.2 var(--pgc-font); padding: 9px 12px; cursor: pointer; text-align: left; }
.proqs-pgc .pgc-seg button:last-child { border-right: 0; }
.proqs-pgc .pgc-seg button[aria-pressed="true"] { background: var(--pgc-navy); color: #fff; }
.pgc-seg-wide { display: grid; grid-template-columns: 1fr 1fr; }
.pgc-seg-wide button small { display: block; font-weight: 400; font-size: 12px; opacity: .85; margin-top: 2px; }

.pgc-derived { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--pgc-radius); background: var(--pgc-bg); font-size: 14px; flex-wrap: wrap; }
.pgc-derived strong { white-space: nowrap; font-family: var(--pgc-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Share range editor ---------- */
.pgc-ranges { display: grid; gap: 8px; }
.pgc-range-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.7fr) 32px; gap: 8px; align-items: center; }
.pgc-range-head { font-size: 12px; font-weight: 500; color: var(--pgc-muted); }
.pgc-range-row .pgc-n { font-family: var(--pgc-mono); font-size: 12px; color: var(--pgc-muted); text-align: center; }
.pgc-range-row .pgc-client { font-family: var(--pgc-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--pgc-muted); padding-right: 4px; }
.pgc-range-money { grid-column: 2 / -1; font-size: 12px; color: var(--pgc-muted); font-family: var(--pgc-mono); margin-top: -4px; }
.pgc-range-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Status and messages ---------- */
.pgc-msgs { display: grid; gap: 8px; }
.pgc-msg { padding: 10px 12px; border-radius: var(--pgc-radius); font-size: 14px; }
.pgc-msg-error { background: var(--pgc-pain-soft); color: var(--pgc-pain); }
.pgc-msg-warn { background: var(--pgc-warn-soft); color: var(--pgc-warn); }
.pgc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.pgc-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pgc-pill-pain { background: var(--pgc-pain-soft); color: var(--pgc-pain); }
.pgc-pill-gain { background: var(--pgc-gain-soft); color: var(--pgc-gain); }
.pgc-pill-none { background: var(--pgc-teal-soft); color: var(--pgc-navy); }
.pgc-pill-error { background: var(--pgc-warn-soft); color: var(--pgc-warn); }
.pgc-verify { font-size: 12px; color: var(--pgc-muted); display: inline-flex; gap: 6px; align-items: center; }
.pgc-verify[data-state="ok"] { color: var(--pgc-gain); }
.pgc-verify[data-state="mismatch"] { color: var(--pgc-pain); }

/* ---------- Results ---------- */
.pgc-result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--pgc-line); }
.pgc-result-head h3 { font-size: 18px; }
.pgc-ratio { font-family: var(--pgc-mono); font-size: 13px; color: var(--pgc-muted); }

/* Position gauge: where the outturn sits against the share ranges */
.pgc-gauge { padding: 16px 18px 6px; }
.pgc-gauge-track { position: relative; height: 28px; border-radius: 4px; overflow: hidden; display: flex; background: var(--pgc-bg); }
.pgc-gauge-band { height: 100%; border-right: 1px solid var(--pgc-surface); display: flex; align-items: center; justify-content: center; font: 500 11px/1 var(--pgc-mono); color: var(--pgc-navy); overflow: hidden; white-space: nowrap; }
.pgc-gauge-move { position: absolute; top: 0; bottom: 0; opacity: .85; }
.pgc-gauge-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; }
.pgc-gauge-marker.is-target { background: var(--pgc-navy); }
.pgc-gauge-marker.is-outturn { background: var(--pgc-ink); }
.pgc-gauge-labels { position: relative; height: 34px; font: 500 11px/1.25 var(--pgc-mono); color: var(--pgc-muted); }
.pgc-gauge-labels span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.pgc-gauge-labels span.is-outturn { color: var(--pgc-ink); top: 18px; }

.pgc-cards { container: pgccards / inline-size; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--pgc-line); }
.pgc-card { padding: 14px 18px; border-right: 1px solid var(--pgc-line); border-bottom: 1px solid var(--pgc-line); min-width: 0; grid-column: span 2; display: grid; gap: 4px; align-content: start; }
.pgc-card:nth-child(3n) { border-right: 0; }
.pgc-card.is-lead { grid-column: span 3; }
.pgc-card.is-lead:nth-child(4) { border-right: 1px solid var(--pgc-line); }
.pgc-card.is-lead:nth-child(5) { border-right: 0; }
.pgc-card-label { font-size: 12px; font-weight: 500; color: var(--pgc-muted); letter-spacing: .02em; }
/* Money never wraps. Size follows the card row's width so £100m+ figures still fit. */
.pgc-card-value { font: 500 clamp(15px, 2.9cqi, 22px)/1.2 var(--pgc-mono); font-variant-numeric: tabular-nums; color: var(--pgc-ink); white-space: nowrap; }
.pgc-card.is-lead .pgc-card-value { font-size: clamp(18px, 4.1cqi, 27px); }
.pgc-card-note { font-size: 12px; color: var(--pgc-muted); }
.pgc-card.is-pain .pgc-card-value { color: var(--pgc-pain); }
.pgc-card.is-gain .pgc-card-value { color: var(--pgc-gain); }
.pgc-card.is-pain { background: linear-gradient(var(--pgc-pain-soft), var(--pgc-pain-soft)) top / 100% 3px no-repeat; }
.pgc-card.is-gain { background: linear-gradient(var(--pgc-gain-soft), var(--pgc-gain-soft)) top / 100% 3px no-repeat; }

.pgc-position { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.pgc-position dl { margin: 0; padding: 14px 18px; display: grid; gap: 6px; border-right: 1px solid var(--pgc-line); min-width: 0; }
.pgc-position dl:last-child { border-right: 0; }
.pgc-position dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pgc-teal); margin-bottom: 2px; }
.pgc-position .pgc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pgc-position .pgc-row dd { white-space: nowrap; margin: 0; font-family: var(--pgc-mono); font-variant-numeric: tabular-nums; text-align: right; }
.pgc-position .pgc-row span { color: var(--pgc-muted); }

/* ---------- Tables ---------- */
.pgc-edu-body > * { min-width: 0; }
.pgc-table-wrap { position: relative; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.proqs-pgc table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 14px; background: transparent; }
.proqs-pgc th, .proqs-pgc td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--pgc-line); text-align: left; vertical-align: middle; background: transparent; color: inherit; }
.proqs-pgc thead th { font-size: 12px; font-weight: 600; color: var(--pgc-muted); background: var(--pgc-bg); white-space: nowrap; }
.proqs-pgc td.num, .proqs-pgc th.num, .proqs-pgc .pgc-num td:not(:first-child), .proqs-pgc .pgc-num th:not(:first-child) { text-align: right; font-family: var(--pgc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proqs-pgc .pgc-num th:not(:first-child) { font-family: var(--pgc-font); }
.proqs-pgc tr.pgc-total td { font-weight: 600; border-top: 2px solid var(--pgc-navy); border-bottom: 0; }
.proqs-pgc tr.is-idle td { color: var(--pgc-muted); }
.proqs-pgc td .pgc-input { min-height: 34px; padding: 6px 8px; font-size: 14px; }
.pgc-pain-text { color: var(--pgc-pain); }
.pgc-gain-text { color: var(--pgc-gain); }

/* ---------- Charts ---------- */
.pgc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pgc-chart { padding: 16px 18px; min-width: 0; }
.pgc-chart h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.pgc-chart .pgc-hint { margin-bottom: 10px; }
.pgc-canvas { position: relative; height: 240px; }
.pgc-canvas-tall { height: 280px; }
.pgc-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--pgc-muted); font-size: 14px; text-align: center; padding: 16px; }

/* ---------- Scenarios ---------- */
.pgc-scen-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pgc-triggers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--pgc-line); border-radius: var(--pgc-radius); margin-bottom: 16px; }
.pgc-trigger { padding: 12px 14px; border-right: 1px solid var(--pgc-line); display: grid; gap: 2px; min-width: 0; }
.pgc-trigger:last-child { border-right: 0; }
.pgc-trigger b { font: 500 16px/1.3 var(--pgc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgc-trigger span { font-size: 12px; color: var(--pgc-muted); }
.pgc-scen-name { min-width: 140px; }
.pgc-scen-dc { min-width: 140px; }
.pgc-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }

/* ---------- Education ---------- */
.pgc-edu { margin-top: 24px; background: var(--pgc-surface); border: 1px solid var(--pgc-line); border-radius: 8px; padding: 22px; }
.pgc-edu-head { display: grid; gap: 6px; max-width: 72ch; margin-bottom: 16px; }
.proqs-pgc .pgc-edu h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
.pgc-lede { color: var(--pgc-muted); }
.pgc-edu-item { border-top: 1px solid var(--pgc-line); }
.pgc-edu-item:last-of-type { border-bottom: 1px solid var(--pgc-line); }
.proqs-pgc .pgc-edu-item summary { cursor: pointer; padding: 14px 4px; font-weight: 600; color: var(--pgc-navy); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.proqs-pgc .pgc-edu-item summary::-webkit-details-marker { display: none; }
.proqs-pgc .pgc-edu-item summary::after { content: "+"; font-family: var(--pgc-mono); color: var(--pgc-teal); }
.proqs-pgc .pgc-edu-item[open] summary::after { content: "−"; }
.pgc-edu-body { display: grid; gap: 10px; padding: 0 4px 18px; max-width: 75ch; }
.pgc-edu-body p, .pgc-edu-body li { line-height: 1.6; }
.pgc-edu-body table { max-width: 100%; }
.pgc-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.pgc-note { padding: 10px 12px; background: var(--pgc-teal-soft); border-radius: var(--pgc-radius); }
.pgc-edu-foot { display: grid; gap: 12px; margin-top: 18px; justify-items: start; }
.pgc-disclaimer { font-size: 12px; color: var(--pgc-muted); max-width: 90ch; }

.pgc-footer { margin-top: 16px; font-size: 12px; color: var(--pgc-muted); display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

/* ---------- Confirm reset ---------- */
.pgc-confirm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; background: var(--pgc-warn-soft); color: var(--pgc-warn); padding: 6px 8px 6px 12px; border-radius: var(--pgc-radius); }

.pgc-toast { position: fixed; right: 20px; bottom: 20px; z-index: 99999; background: var(--pgc-navy); color: #fff; padding: 12px 16px; border-radius: var(--pgc-radius); font-size: 14px; box-shadow: 0 6px 24px rgba(19, 41, 75, .25); max-width: calc(100vw - 40px); }

/* ---------- Responsive ---------- */
@container pgc (max-width: 859px) {
  .pgc-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .proqs-pgc { padding: 14px; border-radius: 0; border-left: 0; border-right: 0; }
}
@container pgc (max-width: 680px) {
  .pgc-charts, .pgc-split, .pgc-triggers, .pgc-position { grid-template-columns: minmax(0, 1fr); }
  .pgc-trigger, .pgc-position dl { border-right: 0; border-bottom: 1px solid var(--pgc-line); }
  .pgc-trigger:last-child, .pgc-position dl:last-child { border-bottom: 0; }
  .pgc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgc-card, .pgc-card.is-lead { grid-column: span 1; border-right: 1px solid var(--pgc-line); }
  .pgc-card:nth-child(2n) { border-right: 0; }
  .pgc-card.is-lead:nth-child(5) { grid-column: span 2; }
  .pgc-card-value { font-size: clamp(15px, 4.2cqi, 22px); }
  .pgc-card.is-lead .pgc-card-value { font-size: clamp(17px, 4.6cqi, 24px); }
}
@container pgc (max-width: 480px) {
  .pgc-fields { grid-template-columns: minmax(0, 1fr); }
  .pgc-seg-wide { grid-template-columns: minmax(0, 1fr); }
  .proqs-pgc .pgc-seg-wide button { border-right: 0; border-bottom: 1px solid var(--pgc-line-strong); }
  .pgc-range-row { grid-template-columns: 1.2rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) 28px; }
  .pgc-range-row .pgc-client { display: none; }
  .pgc-cards { grid-template-columns: minmax(0, 1fr); }
  .pgc-card, .pgc-card.is-lead, .pgc-card.is-lead:nth-child(5) { grid-column: span 1; border-right: 0; }
  .pgc-card-value, .pgc-card.is-lead .pgc-card-value { font-size: clamp(18px, 6.5cqi, 24px); }
  .pgc-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .proqs-pgc * { transition: none !important; animation: none !important; } }
@media print {
  .proqs-pgc .pgc-actions, .proqs-pgc .pgc-btn, .proqs-pgc .pgc-icon-btn { display: none !important; }
}
.proqs-pgc .pgc-num td:first-child { min-width: 150px; }

/* ---------- Width inside article-style themes ----------
   Many themes, including the ProQS.site theme, set a narrow reading column
   (about 760px). The calculator breaks out of it to the page width on
   larger screens. Other themes can opt in with [... width="wide"]. */
@media (min-width: 900px) {
  .proqs-prose > .proqs-pgc,
  .proqs-pgc.pgc-wide {
    width: min(1136px, calc(100vw - 64px));
    max-width: none;
    margin-left: calc(50% - min(568px, 50vw - 32px));
    margin-right: 0;
  }
}

/* ---------- Isolation from theme article styles ----------
   Theme rules such as ".entry-content table" or ".proqs-prose h3" have the
   same weight as the calculator's own and load later, so they would win.
   The doubled class below outranks them without !important. */
.proqs-pgc.proqs-pgc :is(h2, h3, h4) { margin: 0; letter-spacing: 0; text-transform: none; }
.proqs-pgc.proqs-pgc h4 { font-size: 15px; font-weight: 600; }
.proqs-pgc.proqs-pgc .pgc-chart h4 { margin-bottom: 2px; }
.proqs-pgc.proqs-pgc :is(p, ul, ol, li, dl, dd, dt, figure, details, summary) { margin-top: 0; }
.proqs-pgc.proqs-pgc li { margin-bottom: 0; }
.proqs-pgc.proqs-pgc .pgc-steps { padding-left: 22px; }
.proqs-pgc.proqs-pgc table { margin: 0; font-size: 14px; line-height: 1.45; border: 0; width: 100%; }
.proqs-pgc.proqs-pgc :is(th, td) { padding: 9px 12px; vertical-align: middle; border: 0; border-bottom: 1px solid var(--pgc-line); }
.proqs-pgc.proqs-pgc thead th { background: var(--pgc-bg); color: var(--pgc-muted); font-size: 12px; font-weight: 600; }
.proqs-pgc.proqs-pgc.proqs-pgc :is(tr, tbody tr, thead tr) { background: transparent; }
.proqs-pgc.proqs-pgc tr.pgc-total td { border-top: 2px solid var(--pgc-navy); border-bottom: 0; font-weight: 600; }
.proqs-pgc.proqs-pgc td .pgc-input { min-height: 34px; padding: 6px 8px; font-size: 14px; }
.proqs-pgc.proqs-pgc td .pgc-affix .pgc-input.has-pre { padding-left: 24px; }
.proqs-pgc.proqs-pgc a.pgc-btn { text-decoration: none; font-weight: 500; }
.proqs-pgc.proqs-pgc :is(input, select, button) { margin: 0; letter-spacing: normal; text-transform: none; }