/* ==========================================================================
   UKCalc design system — shared primitives.

   WHY THIS FILE EXISTS: every one of the 241 pages previously carried its own
   inline <style> block, with tokens drifting between them (/property/ used an
   orange --brand while everything else used blue; /rates/ and /analysis/ had no
   tokens at all). That makes a coherent visual language impossible to maintain
   and guarantees future drift.

   This sheet defines tokens and reusable components ONCE. It is loaded BEFORE a
   page's inline <style>, so existing page rules still win — adoption is additive
   and safe, and pages can be migrated off their inline duplicates gradually.

   It contains NO page-specific rules and NO content.
   ========================================================================== */

:root{
  /* brand — navy/blue, one palette sitewide */
  --brand:#1a56db;
  --brand-dark:#1e429f;
  --brand-darker:#15307b;
  --brand-light:#ebf5ff;
  --brand-tint:#f5f8ff;

  /* ink + surface */
  --text:#111928;
  --text-soft:#374151;
  --muted:#6b7280;
  --border:#e5e7eb;
  --border-strong:#d5dbe3;
  --bg:#f9fafb;
  --white:#fff;

  /* accents — used sparingly, for data only */
  --pos:#057a55;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --warn-border:#fde68a;

  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow:0 1px 3px rgba(17,25,40,.08);
  --shadow-md:0 2px 10px rgba(17,25,40,.08);
  --shadow-lg:0 8px 30px rgba(17,25,40,.10);

  --maxw:1120px;
  --maxw-read:820px;
  --gap:20px;
}

/* ------------------------------------------------------------ primitives */
.u-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.u-read{max-width:var(--maxw-read)}
.u-stack>*+*{margin-top:var(--gap)}

.u-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-light);
  padding:5px 11px;border-radius:999px}

.u-section{padding:44px 0}
.u-section-head{margin-bottom:22px}
.u-section-head h2{margin:0 0 6px;font-size:1.45rem;letter-spacing:-.01em;line-height:1.25}
.u-section-head p{margin:0;color:var(--muted);font-size:.96rem;max-width:62ch}

/* ------------------------------------------------------------ card system */
.u-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.u-card{display:flex;flex-direction:column;gap:8px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
a.u-card:hover{border-color:#bcd0f5;box-shadow:var(--shadow-md);transform:translateY(-1px)}
a.u-card:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.u-card-title{font-weight:700;font-size:1.02rem;color:var(--text);line-height:1.35}
.u-card-desc{font-size:.9rem;color:var(--muted);line-height:1.55;margin:0}
.u-card-cta{margin-top:auto;padding-top:6px;font-size:.88rem;font-weight:700;color:var(--brand)}

/* accent card — for authority routes, not for consumer calculators */
.u-card--accent{background:linear-gradient(180deg,var(--brand-tint),var(--white));
  border-color:#dbe6fb}

/* ------------------------------------------------------------ icon system */
/* Original UKCalc line icons, drawn in-house — see assets/icons.svg.
   No third-party icon pack, so no licensing ambiguity. Icons are decorative:
   every one sits beside a real text label and is hidden from assistive tech. */
.u-ico{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;
  border-radius:var(--radius-sm);background:var(--brand-light);color:var(--brand-dark)}
.u-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.u-ico--plain{background:transparent;width:22px;height:22px;flex-basis:22px}
.u-ico--plain svg{width:18px;height:18px}

/* ------------------------------------------------------------ stat / data */
.u-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.u-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px}
.u-stat-n{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  color:var(--brand-dark);font-variant-numeric:tabular-nums;line-height:1.15}
.u-stat-l{display:block;font-size:.84rem;color:var(--muted);margin-top:3px;line-height:1.4}

/* trust strip — provable statements only */
.u-trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 20px}
.u-trust-item{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--text-soft)}

/* ------------------------------------------------------------ buttons */
.u-btn{display:inline-block;font-weight:700;font-size:.95rem;padding:12px 22px;
  border-radius:var(--radius-sm);text-decoration:none;border:1.5px solid transparent;
  transition:background .15s ease,border-color .15s ease}
.u-btn--primary{background:var(--brand);color:#fff}
.u-btn--primary:hover{background:var(--brand-dark)}
.u-btn--secondary{background:var(--white);color:var(--brand-dark);border-color:var(--border-strong)}
.u-btn--secondary:hover{border-color:var(--brand);background:var(--brand-tint)}
.u-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ------------------------------------------------------------ tables */
.u-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white)}
.u-tablewrap table{border-collapse:collapse;width:100%;min-width:420px;font-size:.92rem;margin:0}
.u-tablewrap th,.u-tablewrap td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.u-tablewrap thead th{background:var(--bg);font-weight:700;font-size:.84rem;
  color:var(--text-soft);white-space:nowrap;border-bottom:2px solid var(--border)}
.u-tablewrap td.num,.u-tablewrap th.num{text-align:right;font-variant-numeric:tabular-nums}
.u-tablewrap tbody tr:last-child td,.u-tablewrap tbody tr:last-child th{border-bottom:0}

/* ------------------------------------------------------------ provenance */
/* Source/method blocks must stay plainly visible — never behind a disclosure. */
.u-source{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;font-size:.89rem;color:var(--text-soft);line-height:1.6}
.u-source a{color:var(--brand)}

/* ------------------------------------------------------------ a11y */
.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  a.u-card:hover{transform:none}
}

@media (max-width:720px){
  .u-section{padding:30px 0}
  .u-section-head h2{font-size:1.24rem}
  .u-cards{grid-template-columns:1fr}
  .u-btn{display:block;text-align:center}
}

/* ---- hub/card icon slots adopting the in-house set -------------------------
   These legacy class names exist across the hubs. Rather than rewrite each
   hub's markup, the shared sheet gives every one of them the same tile
   treatment, so one rule governs the whole family. */
.ico.u-ico,.c-ico.u-ico,.c-icon.u-ico,.t-ico.u-ico,.t-icon.u-ico,
.t-c-ico.u-ico,.ct-ico.u-ico,.s-icon.u-ico,.tile-ico.u-ico,.calc-card-ico.u-ico{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  border-radius:10px;background:var(--brand-light);color:var(--brand-dark);
  font-size:0;line-height:0}
.ico.u-ico svg,.c-ico.u-ico svg,.c-icon.u-ico svg,.t-ico.u-ico svg,.t-icon.u-ico svg,
.t-c-ico.u-ico svg,.ct-ico.u-ico svg,.s-icon.u-ico svg,.tile-ico.u-ico svg,
.calc-card-ico.u-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---- calculator + hub table scroll container ------------------------------
   Wide rate/result tables must scroll inside their own container rather than
   forcing the page to scroll horizontally on mobile. Presentation only — no
   table markup, values or ordering are altered. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white);margin:12px 0}
.tbl-scroll>table{margin:0;min-width:420px;width:100%}

/* ---- form-control focus ---------------------------------------------------
   Several calculator pages carry a pre-existing `outline:none` on inputs and
   selects with no replacement indicator, which leaves keyboard users with no
   visible focus. This restores one. It is additive: it does not remove the
   pages' own styling, and :focus-visible means mouse users see no change. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:1px}

/* ---- header / navigation -------------------------------------------------
   ROOT-CAUSE RULE. /journalists/ shipped nav *markup* copied from another page
   but none of the nav *CSS*, so <ul class="nav-links"> fell back to a default
   vertical bulleted list at the top-right. Rather than patch that one page,
   the whole header contract lives here, so any page carrying the standard nav
   markup renders correctly even if its inline CSS omits it.

   This sheet loads BEFORE page inline styles, so pages that already define
   correct nav rules keep winning — this is a floor, not an override. */
.site-nav{background:var(--white);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;
  padding:0;flex-wrap:wrap}
.nav-links li{list-style:none;margin:0}
.nav-links a{font-size:.9rem;color:var(--muted);font-weight:500;
  text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--brand)}
.nav-logo{display:inline-flex;align-items:center;line-height:0;
  text-decoration:none;font-size:0;flex:0 0 auto}
.nav-logo-mark{height:35px;width:auto;display:block}
@media (max-width:640px){
  .nav-inner{height:62px;gap:12px}
  .nav-logo-mark{height:28px}
  .nav-links{gap:14px;font-size:.85rem}
}