/* 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;}
table.data th {text-align: left; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); border-bottom: 2px solid var(--rule); padding: 7px 9px;}
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;}
.vh {font: 600 26px/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)
   Benjie reported the Asia menu bar was lost on mobile. Cause: adopting the family stylesheet
   brought `nav.tabs { display: none }` at 640px with it, because AU, UK and NZ replace the tab bar
   with a full mobile-nav component (trigger, sheet, search, select) driven by ~45 references in
   their app.js. Asia has none of that markup, so it was left with no navigation at all.

   Asia has four tabs, not twenty-four, so it does not need that machinery. The tab bar stays
   visible and becomes a horizontally scrollable strip, which is the right pattern at this count and
   needs no JavaScript. Scoped to this hub only, so the other three keep their mobile-nav. */
@media (max-width: 640px) {
  nav.tabs {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 9px 12px;
    scroll-padding-inline: 12px;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; font-size: 13px; }
  nav.tabs .tab-n { display: none; }           /* the 01/02 numerals cost width the labels need */
  /* the market picker wraps to its own full-width row rather than being pushed off the strip */
  nav.tabs #mktSel { flex: 1 0 100%; margin: 6px 0 0; max-width: none; }
}

/* ---------------------------------------------------------------- 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. */
.mkt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.mkt-tab {
  appearance: none; border: 1px solid var(--rule, rgba(3,22,2,.14)); background: var(--paper-bright, #FEFCF7);
  color: var(--ink-2, #2E2A22); font: 600 13px var(--display); padding: 8px 14px;
  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 { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mkt-tab[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); 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; }
}