/* Shared by the super-app pages (products, compare, my money, calculators). Builds on common.css and its
   AAA colour tokens; nothing here introduces a new colour. */

.site-nav{max-width:980px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:var(--radius);
  font:600 14px var(--font);color:var(--ink-muted);text-decoration:none;
}
.site-nav a:hover{background:var(--surface);color:var(--ink);}
.site-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent);}
.site-nav .brand{font-family:var(--font);font-size:18px;font-weight:700;color:var(--ink);padding-left:0;margin-right:auto;}
.site-nav .brand:hover{background:none;}
.site-nav{position:relative;}
/* Products menu: a disclosure button that opens every product grouped by section (nav.js). */
.site-nav .nav-products{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:none;border-radius:var(--radius);
  background:none;cursor:pointer;font:600 14px var(--font);color:var(--ink-muted);
}
.site-nav .nav-products:hover, .site-nav .nav-products[aria-expanded="true"]{background:var(--surface);color:var(--ink);}
.site-nav .nav-products.is-current{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent);}
.products-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px 18px;
  max-height:calc(100vh - 120px);overflow:auto;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);
}
.products-menu[hidden]{display:none;}
.products-menu h2{margin:0 0 6px;font:700 12px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);}
.products-menu ul{list-style:none;margin:0;padding:0;}
.site-nav .products-menu a{display:flex;min-height:36px;padding:4px 8px;margin-left:-8px;font-weight:500;color:var(--ink);}
.site-nav .products-menu a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);box-shadow:none;font-weight:600;}
.products-menu .all{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid var(--line);}
.site-nav .products-menu .all a{display:inline-flex;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

.tagline{margin:0 0 4px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);}
.lede{margin:6px 0 0;font-size:15px;color:var(--ink-muted);max-width:720px;}
.muted{color:var(--ink-muted);}
.small{font-size:13px;}
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.card + .card{margin-top:16px;}
.card h2{margin:0 0 6px;font-size:21px;font-weight:600;}
.card h3{margin:14px 0 6px;font:600 16px var(--font);}
.stack{display:flex;flex-direction:column;gap:16px;}

/* Product hub */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.hub section h2{font-size:20px;margin:0 0 10px;}
.hub ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.hub a.tile{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;
}
.hub a.tile:hover{border-color:var(--accent);}
.badge{
  display:inline-block;font:700 12px var(--font);letter-spacing:.02em;border-radius:5px;padding:2px 7px;
  color:var(--accent);background:var(--accent-soft);white-space:nowrap;
}
.badge.sample, .badge.quote{color:var(--gold);background:var(--gold-soft);}

/* Comparison pages */
.inputs{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:16px 0;}
.inputs .field{min-width:150px;}
.inputs .check-row{min-height:44px;align-items:center;}
.notice{
  margin:14px 0;padding:12px 14px;border-radius:var(--radius);font-size:14px;line-height:1.5;
  background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold);
}
.notice.ok{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);}
table.compare{width:100%;border-collapse:collapse;font-size:14px;}
table.compare caption{text-align:left;padding:12px 14px 0;font-size:13px;color:var(--ink-muted);}
table.compare th, table.compare td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
table.compare thead th, table.compare thead th.num{font-family:var(--font);font-size:13px;color:var(--ink-muted);white-space:nowrap;}
table.compare th button{
  font:inherit;font-weight:600;color:inherit;background:none;border:none;padding:0;cursor:pointer;min-height:32px;
  text-decoration:underline;text-underline-offset:2px;
}
table.compare td.num, table.compare th.num{text-align:right;font-family:var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;}
table.compare tbody tr:first-child :is(th, td){background:var(--accent-soft);}
table.compare .prov{font-weight:600;color:var(--ink);}
table.compare .sub{display:block;font-size:13px;color:var(--ink-muted);font-weight:400;}
/* Actions stack in a narrow column so wide tables (energy) still fit without scrolling sideways. */
table.compare .acts{text-align:right;width:1%;}
table.compare .acts a, table.compare .acts button{display:flex;width:100%;margin:0 0 6px;white-space:nowrap;}
.empty{padding:22px;text-align:center;color:var(--ink-muted);}
.count-line{margin:8px 2px 0;font-size:13px;color:var(--ink-muted);}

/* My money */
.points-hero{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;}
.points-big{font:600 34px var(--font);color:var(--accent);}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px;}
.kv div{background:var(--bg);border-radius:var(--radius);padding:10px;}
.kv b{display:block;font:600 18px var(--font);color:var(--ink);}
.kv span{font-size:13px;color:var(--ink-muted);}
.asset{border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;background:var(--bg);}
.asset + .asset{margin-top:10px;}
.asset-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.asset-head h3{margin:0;font:600 16px var(--font);}
.asset ul{margin:8px 0 0;padding-left:18px;font-size:14px;}
.asset li{margin:4px 0;}
.opp{color:var(--accent);font-weight:600;}
.ledger{width:100%;border-collapse:collapse;font-size:14px;}
.ledger td{padding:6px 4px;border-top:1px solid var(--line);}
.ledger td.num{text-align:right;font-family:var(--font);}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}

/* Calculators */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.calc-out{margin-top:12px;padding:12px;border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);font-size:15px;line-height:1.5;}
.calc-out strong{color:var(--accent);}

@media (max-width:640px){
  .site-nav .brand{width:100%;}
  .inputs .field{flex:1 1 140px;}
  /* Phones: each product becomes a card with labelled figures (cells carry data-label), like the home loan board. */
  table.compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td{display:block;width:100%;}
  table.compare tr{padding:12px 14px;border-bottom:1px solid var(--line-strong);}
  table.compare tbody th, table.compare tbody td{border:none;padding:3px 0;}
  table.compare td[data-label]{display:flex;justify-content:space-between;gap:12px;text-align:right;}
  table.compare td[data-label]::before{content:attr(data-label);font:600 13px var(--font);color:var(--ink-muted);text-align:left;}
  table.compare caption{display:block;width:100%;padding:12px 14px;}
  table.compare td[data-label] .sub{display:inline;margin-left:6px;}
  table.compare .acts{display:flex;gap:8px;width:100%;padding-top:8px;}
  table.compare .acts a, table.compare .acts button{flex:1;width:auto;margin:0;}
}
@media (forced-colors: active){
  .card, .hub a.tile, .table-wrap, .asset, .notice, .products-menu{border:1px solid CanvasText;}
  .site-nav .nav-products.is-current{outline:2px solid Highlight;}
  .site-nav a[aria-current="page"]{outline:2px solid Highlight;}
}