/* Theme 2.0 base: canvas, type, focus, motion. Needs tokens.css. */

/* Fonts: Trip Sans (supplied by Luke; web-use licence document still to be added next to the files).
   Three weights only: Regular 400, Medium 500, Bold 700. Urbanist stays as the CSS fallback in --font.
   woff2 first, woff fallback. Regular and Medium woff2 are preloaded by includes/theme2-loader.php. */
@font-face { font-family: 'Trip Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: local('Trip Sans'), local('TripSans-Regular'), url('fonts/TripSans-Regular.woff2') format('woff2'), url('fonts/TripSans-Regular.woff') format('woff'); }
@font-face { font-family: 'Trip Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: local('Trip Sans Medium'), local('TripSans-Medium'), url('fonts/TripSans-Medium.woff2') format('woff2'), url('fonts/TripSans-Medium.woff') format('woff'); }
@font-face { font-family: 'Trip Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: local('Trip Sans Bold'), local('TripSans-Bold'), url('fonts/TripSans-Bold.woff2') format('woff2'), url('fonts/TripSans-Bold.woff') format('woff'); }

html { background: var(--bg); }
body.t2 {
  margin: 0; min-width: 0; min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--glow1), var(--glow2);
  background-attachment: fixed;
  color: var(--tx);
  font-family: var(--font);
  font-size: 14px; line-height: 1.55; font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body.t2 *, body.t2 *::before, body.t2 *::after { box-sizing: border-box; }   /* specificity here is irrelevant (no declarations that components override) */
/* :where() keeps these at zero specificity so any component class wins */
:where(body.t2) a { color: inherit; text-decoration: none; }
/* the page background sets the base colour, buttons inherit unless a component says otherwise */
:where(body.t2) button { font: inherit; color: inherit; }
:where(body.t2) input::placeholder { color: inherit; opacity: 0.55; }

/* page frame: full width, no centred container */
.t2-page { position: relative; padding: var(--page-t) var(--page-x) 0; animation: t2page 0.5s var(--ease) backwards; }   /* backwards, not both: a finished animation must not leave a transform behind, because that makes every position:fixed child (compare bar, filter sheet) position against the whole page */
.t2-bleed { margin-left: calc(var(--page-x) * -1); margin-right: calc(var(--page-x) * -1); }  /* hero charts */
.t2-grid { display: grid; gap: var(--gap); }
.t2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t2-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t2-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t2-row { display: flex; align-items: center; gap: var(--gap); }

/* type scale (single scale, three weights: 400, 500, 700) */
.t2-h1       { font-size: 52px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; margin: 0; color: var(--tx); }
.t2-hero-num { font-size: 72px; font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.t2-stat     { font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.t2-num-l    { font-size: 32px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.t2-num-m    { font-size: 26px; font-weight: 400; line-height: 1.1; }
.t2-title    { font-size: 18px; font-weight: 500; line-height: 1.3; margin: 0; color: var(--tx); }
.t2-body     { font-size: 14px; font-weight: 400; color: var(--t2); line-height: 1.55; }
.t2-name     { font-size: 14px; font-weight: 500; color: var(--tx); }
.t2-label    { font-size: 13px; font-weight: 400; color: var(--td); }
.t2-label-2  { font-size: 13px; font-weight: 500; color: var(--t2); }
.t2-sub      { font-size: 12px; font-weight: 400; color: var(--td); }
.t2-micro    { font-size: 11px; font-weight: 400; color: var(--td); }
.t2-lead     { font-size: 14px; color: var(--t2); max-width: 600px; margin: 12px 0 0; }
.t2-strong   { font-weight: 700; }

/* direction is never colour alone: sign + arrow come from the markup (▲ ▼ ▬) */
.t2-pos { color: var(--gain); }
.t2-neg { color: var(--loss); }
.t2-flat { color: var(--t2); }

.t2-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* focus: every interactive element */
body.t2 :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--r3); outline-offset: 2px; }

@keyframes t2sk   { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes t2page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes t2in   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes t2pulse { 0% { box-shadow: 0 0 0 0 rgba(25,245,140,0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(25,245,140,0); } }
@keyframes t2drawer { from { transform: translateX(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.t2 *, body.t2 *::before, body.t2 *::after { animation: none !important; transition: none !important; }
}

/* tablet: 900 to 1279 */
@media (max-width: 1279px) {
  .t2-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t2-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Salient wrappers are not used on Theme 2.0 pages (we print our own nav and footer) */
body.t2 #header-outer, body.t2 #header-outer-bg, body.t2 #header-space,
body.t2 #footer-outer, body.t2 #footer-widgets, body.t2 #slide-out-widget-area,
body.t2 #slide-out-widget-area-bg, body.t2 #ajax-loading-screen { display: none !important; }

/* Production-only legacy sheets (/uploads/useanyfont/uaf.css forces urbanist-regular !important on body, p, li, a, strong; /uploads/salient/salient-dynamic-styles.css
   paints #141416 on .ocm-effect-wrap and .container-wrap, which blacks out the light theme). The loader dequeues them too; this is the safety net. */
body.t2, body.t2 p, body.t2 blockquote, body.t2 li, body.t2 a, body.t2 strong, body.t2 b { font-family: var(--font) !important; }
body.t2 .ocm-effect-wrap, body.t2 .ocm-effect-wrap-inner, body.t2 #ajax-content-wrap, body.t2 .container-wrap { background-color: transparent !important; background-image: none !important; }
body.t2 #ajax-content-wrap, body.t2 #ajax-content-wrap .container-wrap, body.t2 .container-wrap, body.t2 .main-content { padding: 0 !important; margin: 0 !important; background: transparent !important; max-width: none !important; width: auto !important; }

/* Parent-theme (Salient) resets, lifted from Builder A's staging findings. Scoped to the page frame so nav, footer and the
   drawer are unaffected. The loader also dequeues Salient's own CSS; these stay as a safety net (inline dynamic CSS). */
body.t2 .t2-page :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font); margin: 0; text-transform: none; }
body.t2 .t2-page .t2-h1 { font-size: 52px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; color: var(--tx); }
body.t2 .t2-page .t2-title { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--tx); }
body.t2 .t2-page .t2-num-l { font-size: 32px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
body.t2 .t2-page :is(p, li, dd, dt, span, div, td, th, label) { font-family: inherit; }
body.t2 .t2-page a:not([class]) { color: inherit; }
body.t2 .t2-page input.t2-input, body.t2 .t2-page select.t2-input { color: var(--tx); font-family: var(--font); background-color: var(--ghost); border: 1px solid var(--grid); }
body.t2 .t2-page button { font-family: var(--font); text-transform: none; letter-spacing: normal; }
body.t2 .t2-page :is(ul, ol, dl) { margin-left: 0; margin-bottom: 0; }

/* Salient sets a serif fallback on headings everywhere (nav, footer, drawer, modals too): one rule for the whole page */
body.t2 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font); }

/* ═══ Below 900px: single column, no horizontal scroll (GM scope decision, Mon 12 Oct). The 1440 design above 900 is unchanged. ═══
   Rules for builders:
   1. Under 900 every .t2-grid-* collapses to ONE column; give a grid your own override only to make it 2-up on purpose.
   2. Page gutter is 16px (--page-x) and panel padding 14px; font sizes step down (h1 36, stat 36, hero number 48).
   3. Anything wider than the viewport (tables, flow chart, code) scrolls INSIDE its own wrapper: .t2-scroll-x (a .t2-chart inside keeps min-width 720px).
   4. Fixed things (nav, ask bar, selection bars, drawers, modals) are fluid: full width minus 12px, never a fixed px width.
   5. Never set a width in px on a panel or grid child; use minmax(0, 1fr) and min-width: 0, and test at 390 and 700 with scrollWidth == clientWidth. */
@media (max-width: 899px) {
  body.t2 { --page-x: 16px; --page-t: 84px; --pad: 14px; }
  .t2-grid-2, .t2-grid-3, .t2-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .t2-h1, body.t2 .t2-page .t2-h1 { font-size: 36px; }
  .t2-hero-num { font-size: 48px; }
  .t2-stat { font-size: 36px; }
  .t2-num-l, body.t2 .t2-page .t2-num-l { font-size: 26px; }
  .t2-panel--tile { min-height: 0; }
  .t2-lead { max-width: none; }
  .t2-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .t2-scroll-x > .t2-chart { min-width: 720px; }
  img, svg, video { max-width: 100%; }
}
.t2-scroll-x { max-width: 100%; }

/* Any <table class="t2-vh"> (legacy pattern for hidden data tables) must clip like a div: a clipped table still widens the page */
table.t2-vh { display: block; width: 1px; height: 1px; overflow: hidden; }

/* ═══ Mobile type scale and tap targets (SEO 375px gate 17, Mon 12 Oct). One place, not per page. ═══
   Text: paragraph, list and row text 14px minimum; labels 14px; sub-headings 13px; micro 12px; chart axis/legend micro labels may be 11px.
   Taps: primary controls 44px high, dense controls (chips, tabs, segmented buttons, icon buttons) at least 36px with 8px spacing. */
@media (max-width: 899px) {
  /* ONE type scale for phones and small tablets (GM decision, Mon 12 Oct): running paragraphs 16px; dense rows, table cells and KPI sub-lines 14px;
     chart axes, legends and micro labels 11px or more (and at least 60% of page text at 12px or more); inputs 16px so iOS does not zoom. No per-page !important. */
  body.t2 { font-size: 16px; }
  .t2-body, .t2-lead, .t2-foot-legal { font-size: 16px; }
  .t2-label, .t2-label-2, .t2-name, .t2-sub, .t2-list-row { font-size: 14px; }
  p.t2-sub, p.t2-label { font-size: 16px; }                              /* a sentence is a running paragraph even when it carries a sub-line class */
  .t2-micro { font-size: 12px; }
  .t2-input, .t2-ask__in, body.t2 input, body.t2 select, body.t2 textarea { font-size: 16px; }
  .t2-table th, .t2-table td { font-size: 14px; }
  .t2-chart .t2-sub { font-size: 11px; }                                   /* axis labels stay at 11px */
  .t2-btn, .t2-btn--ink, .t2-btn--glass { min-height: 44px; white-space: normal; max-width: 100%; text-align: center; }
  .t2-iconbtn { width: 40px; height: 40px; }
  .t2-chip, .t2-seg button { min-height: 36px; }
  .t2-tabs { gap: 20px; }
  .t2-tabs button { padding: 10px 0 8px; min-height: 36px; }
  .t2-link { min-height: 36px; display: inline-flex; align-items: center; }
  .t2-legend { gap: 8px 16px; }
  .t2-legend button { min-height: 36px; }
  .t2-strong, .t2-micro { max-width: 100%; overflow-wrap: anywhere; }
  .t2-page :is(p, li, td, th, dd, dt, h1, h2, h3, h4, a, span, div) { overflow-wrap: anywhere; }
  .t2-page .t2-ellip { overflow-wrap: normal; }
}