/* Net sale calculator (ACF layout net_sale_calculator, wbah-php/net-sale-calculator.php).
   Everything is scoped under .nsc. One set of markup: .nsc-mobile / .nsc-desktop and
   .nsc-short / .nsc-long swap the parts that differ, so switching is CSS-only and keeps
   whatever the visitor has typed.

   The layout switches on the calculator's own width (container queries), not the window.
   The site's section padding scales with the window (12.5% each side), leaving the block about
   75% of it, so the desktop layout (needs ~860px) arrives at roughly a 1150px window on a
   standard page, and adapts by itself if the block sits somewhere narrower. */

.nsc {
  --nsc-bg:#ffffff; --nsc-form-bg:#e4f6e5; --nsc-panel:#e4f6e5; --nsc-net-bg:#e4f6e5;
  --nsc-ink:#064045; --nsc-ink-soft:#3b5d60; --nsc-line:#cfe3d6; --nsc-selected:#e4f8e4;
  --nsc-green:#1fc91f; --nsc-green-ink:#07464B; --nsc-card:#ffffff; --nsc-grey:#aebcbd;
  --nsc-grey-card:#f5f6f6; --nsc-warn:#a5520b; --nsc-cta-bg:#064045;
  --nsc-shadow:0 1px 2px rgba(6,64,69,.06),0 8px 24px rgba(6,64,69,.08);
  --nsc-ff:var(--ff,"DM Sans",ui-sans-serif,system-ui,sans-serif);
  background:var(--nsc-bg);
}
/* Background option (per block). Light green: white form and table on the site's pale green. */
.nsc.nsc--light-green {--nsc-bg:#e4f7e5; --nsc-form-bg:#ffffff;}
/* Dark green: the prototype's dark palette. */
.nsc.nsc--dark-green {
  --nsc-bg:#064045; --nsc-form-bg:#0e4d52; --nsc-panel:#0e4d52; --nsc-net-bg:#12555b;
  --nsc-ink:#ffffff; --nsc-ink-soft:#c3dcdc; --nsc-line:#1d6066; --nsc-selected:#105c4c;
  --nsc-green-ink:#1fc91f; --nsc-card:#0e4d52; --nsc-grey:#4b7c80; --nsc-grey-card:#0b4146;
  --nsc-warn:#f2b45a; --nsc-cta-bg:#0e4d52;
  --nsc-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.25);
}
.nsc .nsc-outer {container:nsc / inline-size;}
.nsc *, .nsc *::before, .nsc *::after {box-sizing:border-box;}
.nsc [hidden] {display:none !important;}

/* The site colours every element in a section (main section > div *:not(p)), which would beat
   inheritance. Let the calculator's elements inherit instead, leaving the postcode widget alone.
   :where() keeps this at low specificity so the rules below still win. */
.nsc .nsc-inner {color:var(--nsc-ink);font-family:var(--nsc-ff);font-size:16px;line-height:1.5;}
.nsc .nsc-inner :where(:not(.nsc-cta, .nsc-cta *)) {color:inherit;}

.nsc .nsc-inner {max-width:1180px;margin:0 auto;display:grid;gap:14px;}
.nsc .nsc-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@container nsc (max-width:859.98px) {
  .nsc .nsc-desktop, .nsc .nsc-long {display:none !important;}
}
@container nsc (min-width:860px) {
  .nsc .nsc-mobile, .nsc .nsc-short {display:none !important;}
}

/* Header */
.nsc .nsc-head {display:grid;gap:6px;}
.nsc .nsc-eyebrow {margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nsc-green-ink);}
.nsc .nsc-title {margin:0;font-family:var(--nsc-ff);font-size:clamp(25px,6.2vw,40px);line-height:1.12;font-weight:700;}
.nsc .nsc-title em {font-style:normal;color:var(--nsc-green-ink);white-space:nowrap;}
.nsc .nsc-lede {margin:0;color:var(--nsc-ink-soft);font-size:15px;}

/* Form */
.nsc .nsc-grid {display:grid;gap:14px;}
.nsc .nsc-form {margin:0;background:var(--nsc-form-bg);border-radius:18px;padding:16px;display:grid;gap:12px;}
.nsc .nsc-q {display:grid;gap:6px;min-width:0;}
.nsc fieldset.nsc-q {border:0;margin:0;padding:0;}
.nsc .nsc-label {display:block;margin:0;padding:0;font-size:16px;font-weight:700;line-height:1.3;}
/* A legend isn't a grid item, so the fieldset's gap doesn't apply to it: match the gap with a margin */
.nsc fieldset.nsc-q > legend.nsc-label {margin-bottom:6px;}
.nsc .nsc-money {display:flex;align-items:center;background:var(--nsc-card);border:2px solid var(--nsc-line);border-radius:12px;padding:0 12px;height:52px;}
.nsc .nsc-money--big {height:56px;}
.nsc .nsc-cur {color:var(--nsc-ink-soft);font-weight:700;font-size:18px;}
.nsc .nsc-money--big .nsc-cur {font-size:24px;}
.nsc .nsc-money input {flex:1;width:100%;min-width:0;height:auto;margin:0;padding:0 6px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;color:var(--nsc-ink);font:700 18px var(--nsc-ff);font-variant-numeric:tabular-nums;}
.nsc .nsc-money--big input {font-size:26px;}
.nsc .nsc-unit {font-size:13px;font-weight:500;white-space:nowrap;color:var(--nsc-ink-soft);}
.nsc .nsc-money:focus-within {border-color:var(--nsc-green);box-shadow:0 0 0 4px rgba(31,201,31,.25);}

.nsc .nsc-seg {display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.nsc .nsc-seg input {position:absolute;opacity:0;pointer-events:none;}
.nsc .nsc-seg label {display:flex;align-items:center;justify-content:center;min-height:46px;margin:0;padding:8px;text-align:center;background:var(--nsc-card);border:2px solid var(--nsc-line);border-radius:12px;font-weight:700;font-size:15px;line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s;}
.nsc .nsc-seg label > span {display:grid;}
.nsc .nsc-seg label small {font-weight:400;font-size:13px;color:var(--nsc-ink-soft);}
.nsc .nsc-seg input:checked + label {border-color:var(--nsc-green);background:var(--nsc-selected);}
.nsc .nsc-seg input:focus-visible + label {outline:3px solid var(--nsc-ink);outline-offset:2px;}
.nsc .nsc-help {margin:0;font-size:14px;color:var(--nsc-ink-soft);}

.nsc .nsc-vacant {display:grid;gap:12px;}
.nsc .nsc-costs {display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--nsc-card);border:1px solid var(--nsc-line);border-radius:12px;padding:10px 12px;}
.nsc .nsc-costs-text {display:grid;gap:2px;}
.nsc .nsc-k {font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nsc-ink-soft);}
.nsc .nsc-sum {font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;}
.nsc .nsc-link {display:inline;min-height:0;margin:0;padding:8px 4px;background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;color:var(--nsc-green-ink);font:700 14px var(--nsc-ff);text-transform:none;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.nsc .nsc-link--small {padding:0;font-size:13px;}
.nsc .nsc-link:focus-visible {outline:2px solid var(--nsc-ink);outline-offset:2px;}

/* Running-cost fields: behind the Edit button on mobile, always shown on desktop */
.nsc .nsc-edit {display:none;gap:12px;background:var(--nsc-card);border:1px solid var(--nsc-line);border-radius:12px;padding:12px;}
.nsc .nsc-edit.is-open {display:grid;}
.nsc .nsc-edit .nsc-label {font-size:14px;}
.nsc .nsc-suggest {display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px;color:var(--nsc-ink-soft);}
.nsc .nsc-why {font-size:13px;color:var(--nsc-ink-soft);}
.nsc .nsc-why summary {cursor:pointer;font-weight:700;color:var(--nsc-green-ink);}
.nsc .nsc-why ul {margin:6px 0 0;padding-left:18px;display:grid;gap:4px;}
.nsc .nsc-why li {margin:0;}

/* Results */
.nsc .nsc-results {display:grid;gap:12px;min-width:0;}
.nsc .nsc-basis {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;}
.nsc .nsc-basis h3 {margin:0;font-family:var(--nsc-ff);font-size:20px;font-weight:700;line-height:1.3;}
.nsc .nsc-basis span {font-size:15px;color:var(--nsc-ink-soft);}
.nsc .nsc-basis b {font-size:18px;color:var(--nsc-ink);font-variant-numeric:tabular-nums;}

.nsc .nsc-tbl {background:var(--nsc-card);border:1px solid var(--nsc-line);border-radius:16px;overflow:hidden;box-shadow:var(--nsc-shadow);}
.nsc .nsc-table {width:100%;margin:0;border:0;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;}
.nsc .nsc-col-lab {width:31%;}
.nsc .nsc-table th, .nsc .nsc-table td {padding:9px 8px;border:0;border-bottom:1px solid var(--nsc-line);vertical-align:top;text-align:right;background:none;}
.nsc .nsc-table tbody th {text-align:left;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--nsc-ink-soft);padding-left:12px;}
.nsc .nsc-table tbody th small {display:block;font-size:12px;font-weight:400;}
.nsc .nsc-table td:last-child, .nsc .nsc-table thead th:last-child {padding-right:12px;}
.nsc .nsc-table thead th {vertical-align:bottom;padding-top:12px;padding-bottom:10px;border-bottom:2px solid var(--nsc-line);}
.nsc .nsc-table thead th:nth-child(3), .nsc .nsc-table td:nth-child(3) {background:var(--nsc-grey-card);}
.nsc .nsc-logo {display:block;margin-left:auto;width:100%;max-width:150px;height:auto;}
.nsc .nsc-tname {display:block;font-size:15px;font-weight:700;line-height:1.15;}
.nsc .nsc-table td .nsc-v {display:block;font-size:14.5px;font-weight:700;line-height:1.25;}
.nsc .nsc-table td small {display:block;margin-top:1px;font-size:11px;line-height:1.3;color:var(--nsc-ink-soft);}
.nsc .nsc-table td.nsc-minus .nsc-v {color:var(--nsc-warn);}
.nsc .nsc-table td.nsc-zero .nsc-v {color:var(--nsc-green-ink);}
.nsc .nsc-table .nsc-row-type td .nsc-v {font-size:12.5px;}
.nsc .nsc-table .nsc-row-net th, .nsc .nsc-table .nsc-row-net td {background:var(--nsc-net-bg);border-bottom:0;padding-top:12px;padding-bottom:12px;}
.nsc .nsc-table .nsc-row-net th {color:var(--nsc-ink);font-weight:700;font-size:13.5px;}
.nsc .nsc-table .nsc-row-net td .nsc-v {font-size:clamp(17px,5vw,24px);}
.nsc .nsc-table .nsc-row-net td.nsc-wbah .nsc-v {color:var(--nsc-green-ink);}
.nsc .nsc-table .nsc-row-when th, .nsc .nsc-table .nsc-row-when td {border-top:2px solid var(--nsc-line);}
.nsc .nsc-table .nsc-row-when td .nsc-v {font-size:13.5px;}
.nsc .nsc-table tr:last-child th, .nsc .nsc-table tr:last-child td {border-bottom:0;}
.nsc .nsc-pill {display:inline-block;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:700;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;white-space:normal;}
.nsc .nsc-pill--yes {background:var(--nsc-green);color:#064045;}
.nsc .nsc-pill--no {border:1px solid var(--nsc-grey);color:var(--nsc-ink-soft);}

.nsc .nsc-caveat {margin:0;font-size:13px;color:var(--nsc-ink-soft);}

/* Postcode widget (Oxygen get-quote-inline-form, with the Sprift lookup) */
.nsc .nsc-cta {display:flex;justify-content:center;padding:20px 16px;background:var(--nsc-cta-bg);border-radius:18px;}
.nsc .nsc-cta > * {width:100%;max-width:560px;margin:0 auto;}
/* The widget adds margin-top:2em below a 768px window (for hero layouts); not wanted inside the panel */
.nsc .nsc-cta .gqif {margin:0 auto;}
/* a.nsc-cta-link outranks the site's light-green link colour (main section > div :not(p) a:not(.btn)) */
.nsc .nsc-cta a.nsc-cta-link {display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border-radius:12px;background:var(--nsc-green);color:#064045;font-weight:700;text-decoration:none;max-width:320px;}

/* Small print */
.nsc .nsc-small {margin:0;max-width:95ch;font-size:13px;color:var(--nsc-ink-soft);}
.nsc .nsc-how {font-size:13px;color:var(--nsc-ink-soft);border-top:1px solid var(--nsc-line);padding-top:10px;}
.nsc .nsc-how summary {cursor:pointer;font-weight:700;font-size:14px;color:var(--nsc-ink);}
.nsc .nsc-how p {margin:8px 0 0;max-width:90ch;font-size:13px;color:var(--nsc-ink-soft);}

/* Wider mobile layout (tablets, and smaller laptops on this site): roomier table */
@container nsc (min-width:700px) {
  .nsc .nsc-tbl {max-width:760px;width:100%;margin-inline:auto;}
  .nsc .nsc-table th, .nsc .nsc-table td {padding:12px 16px;}
  .nsc .nsc-table tbody th {font-size:14px;padding-left:18px;}
  .nsc .nsc-table td:last-child {padding-right:18px;}
  .nsc .nsc-table td .nsc-v {font-size:17px;}
  .nsc .nsc-table td small {font-size:12px;}
  .nsc .nsc-table .nsc-row-type td .nsc-v {font-size:14px;}
  .nsc .nsc-tname {font-size:19px;}
  .nsc .nsc-logo {max-width:200px;}
  .nsc .nsc-table .nsc-row-net td .nsc-v {font-size:28px;}
  .nsc .nsc-pill {font-size:11px;padding:3px 9px;}
}

/* Desktop: inputs on the left, comparison table on the right */
@container nsc (min-width:860px) {
  .nsc .nsc-inner {gap:28px;}
  .nsc .nsc-head {gap:10px;}
  .nsc .nsc-eyebrow {font-size:13px;}
  .nsc .nsc-title {font-size:clamp(30px,5vw,44px);line-height:1.1;}
  .nsc .nsc-lede {font-size:17px;}

  .nsc .nsc-grid {grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:start;}
  .nsc .nsc-form {border-radius:20px;padding:24px;gap:22px;}
  .nsc .nsc-q {gap:10px;}
  .nsc fieldset.nsc-q > legend.nsc-label {margin-bottom:10px;}
  .nsc .nsc-label, .nsc .nsc-edit .nsc-label {font-size:18px;}
  .nsc .nsc-money {padding:0 14px;}
  .nsc .nsc-money input {font-size:19px;}
  .nsc .nsc-money--big {height:68px;border-radius:14px;box-shadow:var(--nsc-shadow);}
  .nsc .nsc-money--big .nsc-cur {font-size:28px;}
  .nsc .nsc-money--big input {font-size:32px;}
  .nsc .nsc-unit {font-size:14px;}
  .nsc .nsc-seg {gap:8px;}
  .nsc .nsc-seg label {min-height:0;padding:12px 10px;font-size:16px;}
  .nsc .nsc-vacant {gap:18px;border-left:3px solid var(--nsc-green);padding-left:16px;}
  .nsc .nsc-edit {display:grid;gap:18px;padding:0;background:none;border:0;border-radius:0;}

  .nsc .nsc-results {gap:16px;}
  .nsc .nsc-tbl {max-width:none;border-radius:20px;}
  .nsc .nsc-col-lab {width:32%;}
  .nsc .nsc-table th, .nsc .nsc-table td {padding:12px 14px;}
  .nsc .nsc-table tbody th {font-size:14px;padding-left:14px;}
  .nsc .nsc-table td:last-child, .nsc .nsc-table thead th:last-child {padding-right:14px;}
  .nsc .nsc-table thead th {padding-top:18px;padding-bottom:14px;border-bottom:1px solid var(--nsc-line);}
  .nsc .nsc-table thead th:nth-child(3), .nsc .nsc-table td:nth-child(3) {background:none;}
  .nsc .nsc-table .nsc-row-net th, .nsc .nsc-table .nsc-row-net td {background:var(--nsc-net-bg);}
  .nsc .nsc-table td .nsc-v {font-size:16px;font-weight:400;}
  .nsc .nsc-table .nsc-row-type td .nsc-v {font-size:14px;font-weight:700;line-height:1.3;}
  .nsc .nsc-table .nsc-row-when td .nsc-v {font-size:15px;font-weight:700;}
  .nsc .nsc-table .nsc-row-net th {font-size:15px;}
  .nsc .nsc-table .nsc-row-net td small {font-size:12px;font-weight:700;}
  .nsc .nsc-table .nsc-row-net td .nsc-v {font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.1;}
  .nsc .nsc-th-basis {text-align:left !important;}
  .nsc .nsc-bl {display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nsc-ink-soft);}
  .nsc .nsc-bv {display:inline-block;margin-top:6px;padding:6px 10px;border-radius:10px;background:var(--nsc-panel);font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;}
  .nsc .nsc-logo {width:auto;max-width:100%;max-height:22px;}
  .nsc .nsc-tname {font-size:20px;line-height:1.2;}
  .nsc .nsc-pill {font-size:10.5px;padding:3px 8px;letter-spacing:.05em;white-space:nowrap;}

  .nsc .nsc-cta {border-radius:20px;padding:20px;}

  /* Full width as two columns, so lines stay around 85 characters at 13px */
  .nsc .nsc-small {max-width:none;columns:2;column-gap:40px;}
}

@media (prefers-reduced-motion:reduce) {
  .nsc * {transition:none !important;}
}