/* ===== NO UA LINK COLOURS — 26 Jul 2026 (per urgent direction) ==================
   §2A.3: no blue or purple hues outside the ink/teal/gold system. No `:visited`
   was declared anywhere, so any anchor an author rule did not reach fell
   through to the browser defaults — #0000EE unvisited, #551A8B PURPLE once
   visited. Lowest specificity in the file and placed FIRST, so every existing
   author rule still wins.
   ======================================================================== */
a { color: inherit; }
a:visited { color: inherit; }

/* CoreBridge Asia Markets Intelligence — hub-specific overlay (25 July 2026)
   ---------------------------------------------------------------------------------------------
   Asia used to carry its own 11KB stylesheet while the AU, UK and NZ hubs shared a 257KB family
   sheet. That made it the odd one out on every measure a reader actually notices: h2 rendered at
   26px/600 against the family's 21px/700, cards had no shadow, .note ran at 13px against 13.5px,
   and `.block` had no styling at all, so the cross-market band and the UIS panel sat in a
   transparent box with zero padding while the same components on the other three hubs sat in a
   proper card.

   Asia now loads the family stylesheet first and this overlay second. Only the selectors the family
   sheet does not define live here: the market cards, the Explorer controls, the chart boxes, the
   table wrapper and the market picker. Everything else is inherited, so the four hubs cannot drift
   apart again by accident.

   `table.data` is kept deliberately: the family sheet defines `.data`, and Asia's table needs its
   own numeric alignment, so it is scoped to `table.data` to win on specificity without touching the
   family's `.data`. */

.g2 {grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));}
.g4 {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.chart {height: var(--chart-h); position: relative;}
.chart.tall {height: 360px;}
table.data {width: 100%; border-collapse: collapse; font-size: 13px;}
/* AUDIT 26 Jul 2026 (§4.7 contrast). This rule restyles the shared table header into the
   lighter Asia idiom — quiet --ink-3 small caps under a rule, rather than the dark filled
   header the other three hubs use — but it only overrode the COLOUR. The shared
   `table.data th { background: var(--ink-surface) }` survived underneath, so every table
   header on this hub was #6B6557 type on the #031602 ground: 3.24:1, under AA, on the
   overview table and the Method source register. Setting the ground the rule always meant
   to have puts it at 4.95:1 and makes it look like what it was written to be. The sticky
   first column at <=640px needs the same treatment for the same reason. */
table.data th {text-align: left; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); background: var(--paper-2); border-bottom: 2px solid var(--rule); padding: 7px 9px;}
@media (max-width: 640px) { table.data thead th:first-child { background: var(--paper-2); } }
table.data td {padding: 7px 9px; border-bottom: 1px solid var(--rule-soft);}
table.data .num, table.data th.num {text-align: right; font-variant-numeric: tabular-nums;}
.tblwrap {overflow-x: auto;}
.mkt-grid {display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));}
.mkt-card {display: block; text-decoration: none; color: inherit; background: var(--paper-bright); border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 14px 16px; transition: border-color .15s;}
.mkt-card:hover {border-color: var(--accent);}
.mkt-head {display: flex; justify-content: space-between; align-items: baseline;}
.mkt-name {font: 600 15px var(--sans);}
.mkt-val {font: 600 13px var(--mono); color: var(--accent);}
.mkt-sub {font-size: 11.5px; color: var(--ink-3); margin: 2px 0 8px;}
.mkt-cv {height: 92px; position: relative;}
/* 24px, the section-heading rung, not 26: the ladder has no 26 rung, and the view title sitting
   two points above every section heading was part of why this hub read larger (10 Aug 2026). */
.vh {font: 600 24px/1.25 var(--display); letter-spacing: -0.012em; margin: 4px 0 8px;}
#mktSel {margin-left: auto; padding: 7px 10px; font: 600 13px var(--sans); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-chip); background: transparent; color: var(--paper-on-ink);}
#mktSel option {color: var(--ink); background: var(--paper-bright);}
/* ---- Explorer controls (24 Jul 2026) ---- */ .exp-controls {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px;}
.exp-controls select {padding: 8px 10px; font: 600 13px var(--sans); border: 1px solid var(--rule-soft); border-radius: var(--r-chip); background: var(--paper-bright); color: var(--ink); max-width: 320px;}
.exp-modes {display: inline-flex; border: 1px solid var(--rule-soft); border-radius: var(--r-chip); overflow: hidden;}
.exp-modes button {border: 0; background: transparent; padding: 8px 12px; font: 600 12.5px var(--sans); color: var(--ink-2); cursor: pointer;}
.exp-modes button.on {background: var(--accent); color: #F2F0EF;}
.exp-tog {display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--sans); color: var(--ink-2);}
.exp-csv {margin-left: auto; border: 1px solid var(--rule-soft); background: var(--paper-bright); border-radius: var(--r-chip); padding: 7px 12px; font: 700 11px var(--mono); letter-spacing: .08em; color: var(--accent); cursor: pointer;}
.exp-csv:hover {border-color: var(--accent);}
.exp-chips {display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px;}
.exp-chip {border: 1.5px solid var(--rule-soft); background: var(--paper-bright); color: var(--ink-2); border-radius: 999px; padding: 5px 13px; font: 600 12.5px var(--sans); cursor: pointer; transition: border-color .12s, background .12s;}
.exp-chip::before {content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rule); margin-right: 7px; vertical-align: 0;}
.exp-chip.on {border-color: var(--mc); color: var(--ink);}
.exp-chip.on::before {background: var(--mc);}

/* analysis layer (25 Jul 2026) */
.an-seg__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.an-seg__list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px;
  padding: 3px 0; border-bottom: 1px solid var(--rule-soft, rgba(3,22,2,.07)); }
.an-seg__list li span { color: var(--ink-3, #6B6557); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-seg__mean { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #6B6557); }

/* ---------------------------------------------------------------- mobile navigation (25 Jul 2026)
   Asia's menu was lost on mobile because adopting the family stylesheet brought
   `nav.tabs { display: none }` at 640px with it, and Asia had none of the mobile-nav markup the
   other three hubs use to replace it.

   The first fix kept the tab strip visible and made it scroll. That was a workaround. The proper
   fix, shipped the same day, is the one the rest of the estate uses: the M3 bottom sheet built from
   a hidden #mobileNav select, ported verbatim from the NZ hub so all four dashboards present an
   identical component. With that in place the family default is correct and no override is needed
   here, so the workaround has been removed rather than left to fight the sheet for the same row. */

/* ---------------------------------------------------------------- market page sub-tabs
   The market pages carry fifteen sections after the analysis layer landed. Rather than one very
   long scroll, the sections group behind sub-tabs. Progressive disclosure, not removal: every
   section is still in the DOM and still printable, and with JavaScript off all panels show. */
/* =========================================================================
   MARKET SECTION TABS — rebuilt 26 Jul 2026 (per direction: "need a standard approach
   to click on this, lock it to the screen scroll also. redesign completely").

   Two previous attempts and why they failed:
     1. Paper-bright chips on the paper ground with a faint hairline. A four-
        value difference between control and surface: "the boxes look lost and
        seem not a box to click on."
     2. A segmented control in a recessed --paper-deep track. Fine as one row on
        a desktop. On a phone the five long labels wrap to three rows and the
        track becomes a large tan slab with text in it — a coloured field, which
        is the opposite of what §2A.4 asks for, and the unselected options had
        no chip at all.

   This is the standard pattern instead: ONE horizontally scrolling row of real
   buttons, sticky under the existing chrome so the tabs stay reachable while
   you read the panel they control. It never wraps, so it never becomes a field;
   it uses the same sticky offset variables (--headh, --navh) as the hub's other
   sticky controls, so it lands where every other sticky control on the site
   lands; and selection is a filled ink chip, which is the same "selected is the
   strongest fill" logic now used on the dark bars, inverted for a light ground.
   ========================================================================= */
.mkt-tabs {
  display: flex;
  flex-wrap: nowrap;              /* never a field: one row, always */
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px var(--col-pad, 16px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Locked to the scroll, below whatever chrome is already stuck up there.
     All three offsets are summed because only the relevant ones are non-zero:
     on a phone the tab bar is hidden (--navh 0) and the view switcher is sticky
     (--mnavh); on a desktop the reverse. They are measured by setStickyVars(),
     which was ported to this hub the same day precisely because these variables
     were unset here and every sticky element was resolving its offset to 0. */
  position: sticky;
  top: calc(var(--headh, 0px) + var(--navh, 0px) + var(--mnavh, 0px));
  z-index: 40;
  background: var(--paper, #F2F0EF);
  border-bottom: 1px solid var(--rule-soft);
}
.mkt-tabs::-webkit-scrollbar { display: none; }

.mkt-tab {
  appearance: none;
  flex: 0 0 auto;                 /* no shrinking, no wrapping */
  white-space: nowrap;
  border: 1px solid var(--rule);
  background: var(--paper-bright, #FEFCF7);
  color: var(--ink-2, #2E2A22);
  font: 600 13px var(--display);
  padding: 9px 15px;
  border-radius: var(--r-chip, 5px);
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.mkt-tab[aria-selected="true"] {
  background: var(--ink, #031602);
  border-color: var(--ink, #031602);
  color: var(--paper-bright, #FEFCF7);
}
.mkt-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mkt-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .mkt-tabs { gap: 5px; }
  .mkt-tab { padding: 7px 11px; font-size: 12.5px; }
}


/* ---------------------------------------------------------------- desktop dropdown menus (25 Jul 2026)
   the principal asked for drop-down menus on the Asia tab bar, including one for the countries. Styled to
   the same tokens as the mobile sheet so the two read as one component family: same chip, same
   check idiom, same radius scale, same accent. */
.dd { position: relative; display: inline-flex; }
.dd-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  color: var(--paper-on-ink, #CBC7BB); font: 600 13.5px var(--display);
  padding: 9px 13px; border-radius: var(--r-chip, 5px); line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.dd-btn:hover { background: rgba(255,255,255,.17); }
.dd.is-open .dd-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.dd-btn:focus-visible { outline: 3px solid var(--accent-soft, #9CC2C0); outline-offset: 2px; }
.dd-caret { transition: transform .18s ease; flex: 0 0 auto; }
.dd.is-open .dd-caret { transform: rotate(180deg); }
.dd-panel {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 200;
  min-width: 268px; max-height: 66vh; overflow-y: auto;
  background: var(--paper-bright, #FEFCF7); border: 1px solid var(--rule, rgba(3,22,2,.14));
  border-radius: var(--r-card, 10px); box-shadow: var(--shadow-card); padding: 7px;
  display: none;
}
.dd.is-open .dd-panel { display: block; }
.dd-sub {
  font: 700 10px var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3, #6B6557); padding: 8px 10px 6px;
}
.dd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-chip, 5px);
  color: var(--ink, #031602); text-decoration: none; font-size: 13.5px; line-height: 1.25;
}
.dd-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dd-item.is-on { background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; }
.dd-chip {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: var(--r-chip, 5px);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font: 700 10.5px var(--display);
}
.dd-lbl { flex: 1 1 auto; min-width: 0; }
.dd-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3, #6B6557); font-variant-numeric: tabular-nums; }

/* A country and its sections (9 Aug 2026). The row keeps its full width and its click; the caret
   sits beside it as a separate control, sized to a real tap target rather than to the 13px glyph
   inside it. The nested list is indented to the depth of the parent's chip, so the eye reads the
   sections as belonging to the country above them and not as more countries. */
.dd-row { display: flex; align-items: center; }
.dd-row .dd-item { flex: 1 1 auto; min-width: 0; }
.dd-exp {
  flex: 0 0 auto; width: 34px; height: 34px; margin-left: 1px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-chip, 5px); cursor: pointer;
  color: var(--ink-3, #6B6557); transition: transform .18s ease, background .18s ease;
}
.dd-exp:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.dd-exp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dd-node.is-open .dd-exp { transform: rotate(180deg); color: var(--accent); }
.dd-kids { padding: 1px 0 4px 31px; }
.dd-kids .dd-item { font-size: 12.75px; padding: 7px 10px; color: var(--ink-2, #3D4A3C); }
.dd-kids .dd-chip {
  width: 17px; height: 17px; font-size: 9.5px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

/* Per-series verification stamp on the pipeline cards. Quiet by default; the note that explains
   the state of the series sits in the title, so the card stays a card. */
.verif { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:4px;
         border:1px solid var(--rule-soft, #DDD9CF); background:var(--paper-tint, #FBF9F4);
         font-size:10.5px; letter-spacing:.02em; color:var(--ink-3, #6B6557); white-space:nowrap; cursor:help; }

/* Destination-series legend for the small-multiple sparkline panels (DS4, 25 Jul 2026).
   Sits above the grid it explains rather than in a prose line below it. */
.dest-legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin: 0 0 14px; padding: 9px 12px;
  background: var(--paper-bright); border: 1px solid var(--rule-soft); border-radius: 8px;
}
.dest-legend .dlg-items { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dest-legend .dlg-item {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11.5px var(--text); color: var(--ink-2); white-space: nowrap;
}
.dest-legend .dlg-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.dest-legend .dlg-note { font: 400 11px var(--text); color: var(--ink-3); }
@media (max-width: 640px) { .dest-legend { gap: 6px 12px; } }

/* 26 Jul 2026 — the market view had no gutter on half of itself.
   `#main` carries `padding: 22px 0 60px` — no horizontal padding — and the
   market view emits its breadcrumb, its title, the four context cards and the
   section-tab row as bare children of it. The panels below them are inset
   51.2px by `section.block`, so the top half of every market page ran flush to
   both screen edges while the bottom half sat in a column. That mismatch is
   most of why the tab row looked adrift: it had no edge to line up with. */
#main > p.eyebrow,
#main > h2.vh,
#main > .grid,
#main > .mkt-tabs,
#main > p.note {
  padding-left: var(--col-pad, clamp(20px, 4vw, 64px));
  padding-right: var(--col-pad, clamp(20px, 4vw, 64px));
}
/* The strip is full-bleed now that it is sticky: a bar that stops short of the
   screen edges reads as a floating object rather than as chrome, and the
   content it scrolls past would show through beside it. Its own padding, set in
   the .mkt-tabs rule above, carries the gutter for the chips inside it. */
#main > .mkt-tabs { padding-left: var(--col-pad, 16px); padding-right: var(--col-pad, 16px);
  margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------------- market sections, in the band
   27 Jul 2026 (per direction). The five section buttons moved out of the page and onto the menu line,
   so they now sit on the ink band beside the Views and Markets pills instead of on paper. Only
   the ground changes: same order, same labels, same counts, same behaviour. The rules below undo
   the page-level chrome the bar carried for a paper ground (its own sticky offset, its own paper
   background and bottom rule, its own bottom margin) because the band already provides all of
   that, and then restate the chip colours against ink so the selected one still reads as the
   strongest fill. Scoped to .mkt-tabs--inband so the page fallback keeps its original styling. */
nav.tabs .mkt-tabs--inband {
  position: static;                /* the band is the sticky element now, not this bar */
  margin: 0; padding: 0;
  background: none; border-bottom: 0;
  gap: 5px;                        /* inline on the menu line, never its own row */
  overflow-x: visible;             /* the band owns the sideways scroll, not this bar */
}
nav.tabs .mkt-tabs--inband .mkt-tab {
  background: #0C2410;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--accent-soft, #CBC7BB);
  border-radius: var(--r-chip, 7px);
  padding: 7px 11px;
  font-size: var(--fs-chrome);
  white-space: nowrap;
}
nav.tabs .mkt-tabs--inband .mkt-tab:hover { background: #12302A; color: #CBC7BB; }
nav.tabs .mkt-tabs--inband .mkt-tab[aria-selected="true"] {
  background: var(--accent, #234C50); color: #CBC7BB; font-weight: 700;
  box-shadow: 0 2px 9px rgba(20,17,13,.45);
}
@media (max-width: 640px) {
  nav.tabs .mkt-tabs--inband .mkt-tab { padding: 6px 8px; font-size: var(--fs-kicker); }
}

/* v4.2 RADIUS, ASIA: this hub keeps its own sheet, so the estate sweep in styles.css does not
   reach these. Containers square; the market chips are controls and stay in the 4-6px band. */
.mkt-panel, .asia-card, .market-card, .asia-panel, .uis-panel { border-radius: 0 !important; }
.mkt-tab { border-radius: var(--radius-control, 5px) !important; }

/* A chip that will displace another reads as provisional (item 40, 28 Jul 2026). Fourteen markets
   share six line colours, so selecting one drops whichever selected market wears the same colour.
   The dashed edge marks "this will swap something out"; the title names what. Not disabled: the
   swap is legitimate and often what the reader wants, it just must not be a surprise. */
.exp-chip--clash { border-style: dashed; opacity: .74; }
.exp-chip--clash:hover, .exp-chip--clash:focus-visible { opacity: 1; }

/* ---------- Pipeline view: inline SVG charts and heat tables (5 Aug 2026) ----------
   The forms this view needs — slope, flow, bump, composition — are not chart-library
   defaults, and these blocks sit far down a long page, which is the exact condition
   that broke the Position view's bar geometry (Chart.js fixes bar geometry against
   whatever size the canvas has at construction time). SVG has no equivalent trap and
   scales on its viewBox, so the whole view is drawn in markup. */
.cbsvg { width: 100%; height: auto; display: block; overflow: visible; }
.cbsvg-ax { font: 600 11px var(--mono); fill: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.cbsvg-lbl { font: 500 12px var(--mono); fill: var(--ink); }
.cbsvg-dim { fill: var(--ink-3); font-weight: 400; }
.cbsvg-inbar { font: 600 11px var(--mono); fill: var(--paper-bright, #FEFCF7); }
.cbsvg-rule { stroke: var(--rule-soft); stroke-width: 1; }
.cbsvg-rib { transition: opacity .12s ease; }
.cbsvg-rib:hover { opacity: .62 !important; }
.cbsvg-slope:hover line { stroke-width: 3.4; opacity: 1; }
.cbsvg-bump:hover path { stroke-width: 3.4; opacity: 1; }

/* Heat cells carry their own background, so the row rule that normally separates them
   reads as a seam through the block of colour. Hairline in the paper colour instead. */
table.data.heat td.num { border-bottom-color: var(--paper); font-variant-numeric: tabular-nums; }
table.data.heat th.num { font-size: 10px; letter-spacing: .03em; }
table.data.heat td:first-child { white-space: nowrap; }
/* On a phone the viewBox scales a 940-wide chart down to about 277px, which puts the
   labels at roughly four pixels: present, and unreadable. Pan it instead, the same answer
   .tblwrap already gives the wide tables on this hub. The heat grids get a floor for the
   same reason: fourteen columns in 277px crushes "34%" to nothing rather than scrolling. */
.cbsvg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .cbsvg-scroll .cbsvg { min-width: 720px; }
  .cbsvg-lbl { font-size: 13px; }
  .cbsvg-ax, .cbsvg-inbar { font-size: 12px; }
  table.data.heat { min-width: 640px; }
}