/* ==========================================================================
   Gold Bulls — base token layer and app shell
   The world is the one pinned by theme.jpeg, the design reference in the
   project root: warm ivory canvas, burnt-orange brand fields, deep maroon ink,
   and green reserved for high values. Structural layout is unchanged from
   the original desk app (masthead nav, ticker, accordion footer); only the
   visual language moves. Semantic direction colours are set here so that
   "orange means low, green means high" holds across every surface.
   ========================================================================== */

:root{
  /* --- surfaces ------------------------------------------------------- */
  --ivory:#f8f7f2;          /* page canvas */
  --ivory-deep:#f1eee9;     /* recessed plane, table heads, hovers */
  --peach:#ead9b8;          /* tab header, quiet panels */
  --white:#fffef9;          /* data surface, cards */
  --panel:var(--white);
  --panel-solid:var(--ivory-deep);
  --bg:var(--ivory);
  --bg-soft:var(--ivory-deep);

  /* --- brand fields --------------------------------------------------- */
  --orange:#cfad68;         /* primary brand orange */
  --orange-bright:#1b5949;  /* head of the market-summary gradient */
  --orange-deep:#123e33;    /* mid gradient, deep brand */
  --orange-dark:#0b2f28;    /* darkest field, gradient floor */
  --tab-bright:#d5b878;     /* head of the selected-tab / action gradient */
  --tab-deep:#1b5949;       /* foot of that gradient */
  --maroon:#073f34;         /* primary ink */
  --green:#20a45d;          /* high values only */

  /* --- lines ---------------------------------------------------------- */
  --line:#d8d2c7;           /* fine apricot hairline */
  --border:rgba(207,173,104,.55);
  --border-strong:#d8d2c7;

  /* --- text ----------------------------------------------------------- */
  --text:var(--maroon);
  --muted:#41675e;          /* warm supporting ink, 5.9:1 on ivory */
  --placeholder:#6a817b;    /* visibly a placeholder, still 4.8:1 */
  --on-brand:#fffef9;       /* text on a saturated orange field */
  --on-brand-soft:#f4ecdc;  /* secondary text on a brand field, 5.4:1 at the lightest stop */
  --focus:#123e33;          /* focus ring on light planes, 6.9:1 */
  --focus-dark:#f4ecdc;     /* focus ring on a brand field */

  /* --- accents (kept as aliases so the incumbent rules keep working) --- */
  --accent:var(--maroon);
  --accent-strong:var(--orange-dark);
  --accent2:var(--orange);
  --accent3:var(--orange);

  /* --- brand fields ---------------------------------------------------
     A saturated field carrying white text has to start no brighter than
     --orange-deep: #d5b878 (the reference tab head) only reaches 2.98:1
     against #fffef9, so the selectable field uses these two stops instead
     and the bright orange is spent on rules, glows and large Low labels. */
  --brand-field:linear-gradient(135deg,#164d3f,#123e33);
  --brand-field-strong:linear-gradient(135deg,#123e33,#0b2f28);
  --header-surface:
    linear-gradient(145deg,rgba(207,173,104,.72) 0 16px,rgba(213,184,120,.32) 16px 34px,transparent 34px),
    radial-gradient(105% 170% at 112% -62%,transparent 66%,rgba(207,173,104,.24) 66.5% 73%,rgba(207,173,104,.08) 73.5% 79%,transparent 79.5%),
    linear-gradient(180deg,#f8f7f2,#f1eee9);
  --nav-gradient:linear-gradient(90deg,#164d3f 0%,#123e33 55%,#164d3f 100%);
  --footer-surface:
    radial-gradient(115% 72% at -12% 0%,transparent 46%,rgba(207,173,104,.36) 47% 55%,transparent 56%),
    radial-gradient(105% 82% at 112% 100%,transparent 50%,rgba(207,173,104,.4) 51% 59%,transparent 60%),
    linear-gradient(180deg,#164d3f 0%,#123e33 38%,#0b2f28 100%);

  /* --- direction semantics --------------------------------------------
     theme.jpeg: orange annotates low, green annotates high. Red is kept
     strictly for destructive actions and for falling-rate deltas, which
     the order and quote pills already wash. */
  --up:#1a7a45;
  --down:#a11b1b;
  --low:#cfad68;            /* "Low" annotation; large weight only */
  --low-ink:#164d3f;        /* "Low" annotation at small sizes */
  --danger:#a11b1b;         /* errors and destructive actions only */
  --warn:#8b7446;

  --radius:16px;
  --radius-sm:10px;
  --font-ui:"Trebuchet MS",Verdana,sans-serif;
  --font-mono:"Trebuchet MS",Verdana,sans-serif;
  --sidebar-w:250px;
  --topbar-h:60px;
}

.hidden{display:none!important}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font-ui);
  background:var(--bg);
  overflow-x:hidden;
  font-size:15px;
}
/* Every component below sets its own explicit px font-size rather than
   inheriting, so a global bump has to raise each of those values directly.
   This block does that in one place, layered after the component rules so
   it wins on specificity ties without editing every declaration above. */
img{max-width:100%}
a{color:inherit}
button{font-family:inherit}

/* ---------------------------------------------------------------------- */
/* Aurora blob motion field — fixed behind everything                     */
/* ---------------------------------------------------------------------- */
.aurora-field{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.3;mix-blend-mode:multiply}
.aurora-blob.b1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,var(--accent),transparent 70%);animation:ma-drift-1 26s ease-in-out infinite}
.aurora-blob.b2{width:38vw;height:38vw;right:-10vw;top:8vw;background:radial-gradient(circle,var(--accent2),transparent 70%);animation:ma-drift-2 32s ease-in-out infinite}
.aurora-blob.b3{width:42vw;height:42vw;left:18vw;bottom:-18vw;background:radial-gradient(circle,var(--accent3),transparent 70%);animation:ma-drift-3 38s ease-in-out infinite}
.aurora-grid{display:none}
@keyframes ma-drift-1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,8vw) scale(1.15)}}
@keyframes ma-drift-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,6vw) scale(1.1)}}
@keyframes ma-drift-3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-6vw) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.aurora-blob{animation:none}}

/* Scroll-linked bullion texture. The guilloche-like arcs and scattered
   metallic flecks borrow from minted surfaces and assay certificates, so the
   movement feels native to a bullion desk instead of like a generic grid. */
.ma-scroll-texture{
  --texture-x:0px;
  --texture-y:0px;
  --texture-counter-x:0px;
  --texture-counter-y:0px;
  position:fixed;
  inset:-12vh -8vw;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  opacity:.72;
  background:
    radial-gradient(ellipse at 8% 10%,rgba(207,173,104,.18),transparent 32%),
    radial-gradient(ellipse at 92% 78%,rgba(18,62,51,.1),transparent 35%),
    linear-gradient(118deg,transparent 16%,rgba(255,254,249,.72) 43%,transparent 68%);
}
.ma-scroll-texture::before,
.ma-scroll-texture::after{
  content:"";
  position:absolute;
  inset:-8%;
  will-change:transform;
}
.ma-scroll-texture::before{
  background:
    radial-gradient(circle at 7% 18%,rgba(207,173,104,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 18% 76%,rgba(18,62,51,.22) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 31% 38%,rgba(207,173,104,.34) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 47% 84%,rgba(18,62,51,.18) 0 1px,transparent 1.7px),
    radial-gradient(circle at 63% 22%,rgba(207,173,104,.38) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 79% 64%,rgba(18,62,51,.2) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 94% 34%,rgba(207,173,104,.38) 0 1px,transparent 1.7px);
  background-size:211px 193px,257px 229px,283px 251px,307px 271px,337px 293px,359px 317px,389px 347px;
  transform:translate3d(var(--texture-x),var(--texture-y),0) scale(1.025);
}
.ma-scroll-texture::after{
  opacity:.62;
  background:
    radial-gradient(ellipse at -8% 18%,transparent 0 22%,rgba(207,173,104,.17) 22.15% 22.35%,transparent 22.5% 29%,rgba(207,173,104,.1) 29.15% 29.3%,transparent 29.45%),
    radial-gradient(ellipse at 108% 72%,transparent 0 19%,rgba(18,62,51,.1) 19.15% 19.35%,transparent 19.5% 27%,rgba(207,173,104,.14) 27.15% 27.35%,transparent 27.5%),
    linear-gradient(102deg,transparent 0 48%,rgba(207,173,104,.08) 49%,transparent 50% 100%);
  transform:translate3d(var(--texture-counter-x),var(--texture-counter-y),0) scale(1.04);
}
@media(max-width:600px){.ma-scroll-texture{opacity:.58}}
@media(prefers-reduced-motion:reduce){
  .ma-scroll-texture::before,.ma-scroll-texture::after{transform:none;will-change:auto}
}

/* ---------------------------------------------------------------------- */
/* Shell: fixed sidebar + top bar + main                                  */
/* ---------------------------------------------------------------------- */
.app-shell{position:relative;z-index:1;display:flex;min-height:100vh}

.app-sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-w);
  background:linear-gradient(180deg,rgba(11,47,40,.96),rgba(11,47,40,.96));
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:40;
  transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(14px);
}
.sidebar-brand{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);min-height:76px}

.sidebar-logo{display:block;width:100%;height:auto;max-height:54px;object-fit:contain;object-position:left center;filter:drop-shadow(0 6px 14px rgba(7,63,52,.26))}

.sidebar-nav{flex:1;overflow-y:auto;padding:14px 10px}
.sidebar-link{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:11px 12px;margin-bottom:3px;border-radius:var(--radius-sm);
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:700;
  letter-spacing:.01em;transition:color .15s ease,background .15s ease;
}
.sidebar-link .glyph{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:8px;background:rgba(207,173,104,.12);border:1px solid rgba(207,173,104,.24);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.nav-svg{display:block;width:21px;height:21px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(7,63,52,.22))}
.sidebar-link:hover{color:var(--text);background:rgba(207,173,104,.1)}
.sidebar-link.active{color:var(--text);background:rgba(207,173,104,.16)}
.sidebar-link.active .glyph{background:rgba(207,173,104,.18);border-color:rgba(207,173,104,.46);box-shadow:0 0 16px rgba(207,173,104,.34)}
.sidebar-link.active .nav-svg{filter:drop-shadow(0 0 5px rgba(207,173,104,.66))}
.sidebar-link.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 0 10px var(--accent)}
.sidebar-link .badge-live{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(32,164,93,.6);animation:ma-live-pulse 1.6s ease-in-out infinite}
@keyframes ma-live-pulse{0%{box-shadow:0 0 0 0 rgba(32,164,93,.5)}70%{box-shadow:0 0 0 6px rgba(32,164,93,0)}100%{box-shadow:0 0 0 0 rgba(32,164,93,0)}}

.sidebar-foot{padding:14px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);line-height:1.5}
.sidebar-foot b{color:var(--accent3)}

.sidebar-scrim{position:fixed;inset:0;background:rgba(11,47,40,.62);z-index:35;opacity:0;pointer-events:none;transition:opacity .2s ease}

/* Shared sticky header foundation. ma-navigation.css assigns its final
   two-row layout: primary navigation/actions above, market ticker below. */
.app-topbar{
  position:sticky;top:0;z-index:30;height:auto;min-height:var(--topbar-h);display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 20px;background:rgba(11,47,40,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease,background .2s ease;
}
.app-topbar.is-scrolled{padding-block:6px;background:rgba(11,47,40,.96);box-shadow:0 10px 26px rgba(7,63,52,.28)}

/* Slim reading-progress bar, fixed above everything (including the sticky
   header) so it stays visible while scrolling. Filled via transform:scaleX
   from js/ma-common.js's scroll handler, driven by rAF so it never runs
   more than once per frame. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:transparent;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.scroll-progress::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--accent2),var(--orange-bright));box-shadow:0 0 10px rgba(207,173,104,.6)}
@media(prefers-reduced-motion:reduce){.app-topbar{transition:none}}
.topbar-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:rgba(7,63,52,.035);color:var(--text);align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.topbar-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.topbar-toggle span{display:block;width:16px;height:2px;background:var(--text);position:relative;transition:background .18s ease}
.topbar-toggle span::before,.topbar-toggle span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--text);transition:transform .18s ease}
.topbar-toggle span::before{top:-5px}.topbar-toggle span::after{top:5px}
.topbar-toggle[aria-expanded=true] span{background:transparent}
.topbar-toggle[aria-expanded=true] span::before{transform:translateY(5px) rotate(45deg)}
.topbar-toggle[aria-expanded=true] span::after{transform:translateY(-5px) rotate(-45deg)}

.topbar-nav-slot{display:none;flex:1 1 auto;min-width:0;order:2}
@media(min-width:901px){.topbar-nav-slot{display:block}}


.ticker{flex:1 1 160px;min-width:0;overflow:hidden;position:relative;height:100%;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);order:3}
@media(min-width:901px){.ticker{flex:0 1 220px;max-width:220px}}
.ticker-track{display:inline-flex;gap:34px;white-space:nowrap;animation:ma-ticker-scroll 32s linear infinite;padding-right:34px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-chip{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--muted)}
.ticker-chip .sym{color:var(--text);font-weight:800}
.ticker-chip .px{color:var(--text)}
.ticker-chip .dir-up{color:var(--up)}
.ticker-chip .dir-down{color:var(--down)}
@keyframes ma-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.topbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;order:4}
.pill-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--border-strong);background:rgba(7,63,52,.035);color:var(--text);text-decoration:none;font-size:12.5px;font-weight:700;transition:transform .15s ease,border-color .15s ease}
.button-svg{display:block;width:18px;height:18px;object-fit:contain}
.pill-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.pill-btn.accent{background:linear-gradient(135deg,var(--tab-bright),var(--tab-deep));color:var(--on-brand);border-color:transparent}
.pill-btn.ghost-danger{border-color:rgba(192,57,43,.4);color:var(--down)}

/* Header wordmark: logo, first in reading order, with a gentle lift on hover. */
.topbar-wordmark{flex:0 0 auto;line-height:0;text-decoration:none;order:1;transition:transform .2s cubic-bezier(.16,1,.3,1);animation:ma-rise .5s cubic-bezier(.16,1,.3,1) both}
.topbar-wordmark:hover,.topbar-wordmark:focus-visible{transform:translateY(-1px) scale(1.02)}
.topbar-wordmark:focus-visible{outline:2px solid var(--focus-dark);outline-offset:3px;border-radius:6px}
.board-wordmark{margin:0;line-height:0}
/* logo.png is the supplied black serif wordmark on an ivory field, matching
   theme.jpeg. Display it naturally on the shared light header/footer instead
   of colour-inverting it for the previous dark-green treatment. */
.topbar-wordmark .board-wordmark img{display:block;width:280px;max-width:44vw;height:auto;filter:drop-shadow(0 2px 5px rgba(7,63,52,.14));transition:filter .2s ease,opacity .2s ease}
.topbar-wordmark:hover .board-wordmark img{filter:drop-shadow(0 3px 8px rgba(207,173,104,.42));opacity:.82}
.footer-brand-col .mark-row .board-wordmark img{display:block;width:320px;max-width:100%;height:auto;filter:none;opacity:1}
@media(max-width:600px){.topbar-wordmark .board-wordmark img{width:210px;max-width:52vw}.footer-brand-col .mark-row .board-wordmark img{width:250px}}

.app-main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.app-content{flex:1;padding:26px 26px 10px;max-width:1180px;width:100%;margin:0 auto}

/* Demo notice banner (client-only simulation disclosure) */
.demo-banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;margin-bottom:20px;border-radius:var(--radius-sm);background:rgba(207,173,104,.12);border:1px solid rgba(207,173,104,.32);color:#41675e;font-size:13px;font-weight:600;line-height:1.5}
.demo-banner .ic{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center}
.notice-svg{display:block;width:22px;height:22px;object-fit:contain}

/* ---------------------------------------------------------------------- */
/* Page heading                                                           */
/* ---------------------------------------------------------------------- */
.page-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px;animation:ma-rise .5s cubic-bezier(.16,1,.3,1) both}
.page-head h1{margin:0;font-size:clamp(20px,3vw,27px);font-weight:800;letter-spacing:.01em}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent3);margin-bottom:6px}

@keyframes ma-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------------------------------------------------------------------- */
/* Glass panels / cards with tilt-hover                                   */
/* ---------------------------------------------------------------------- */
.glass{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 20px 44px rgba(7,63,52,.2);backdrop-filter:blur(10px);
  animation:ma-rise .55s cubic-bezier(.16,1,.3,1) both;
}
.glass + .glass{margin-top:16px}
.tilt{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
.tilt:hover{box-shadow:0 26px 54px rgba(7,63,52,.3)}

.panel-pad{padding:20px 22px}
.panel-title{margin:0 0 14px;font-size:15px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.panel-title .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* Stagger children fade in */
.stagger > *{animation:ma-rise .5s cubic-bezier(.16,1,.3,1) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.14s}
.stagger > *:nth-child(4){animation-delay:.2s}

/* ---------------------------------------------------------------------- */
/* Metal tabs (segmented control, glow-slide indicator)                   */
/* ---------------------------------------------------------------------- */
.segmented{display:inline-flex;padding:4px;gap:4px;border-radius:999px;background:rgba(7,63,52,.035);border:1px solid var(--border);margin-bottom:16px}
.segmented button{appearance:none;border:0;background:transparent;color:var(--muted);padding:9px 18px;border-radius:999px;font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:color .2s ease}
.segmented button.active{color:var(--on-brand);background:var(--brand-field);box-shadow:0 6px 18px rgba(18,62,51,.24)}

/* ---------------------------------------------------------------------- */
/* Rate table                                                              */
/* ---------------------------------------------------------------------- */
.rate-table{width:100%;border-collapse:collapse;font-family:var(--font-mono)}
.rate-table thead th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 10px 10px;border-bottom:1px solid var(--border)}
.rate-table tbody td{padding:12px 10px;border-bottom:1px solid rgba(7,63,52,.06);font-size:14px}
.rate-table tbody tr:last-child td{border-bottom:0}
.rate-table .sym-cell{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:700;font-size:13.5px}
.rate-table .sym-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;padding:3px;background:rgba(7,63,52,.045);border:1px solid var(--border);overflow:hidden}
.product-svg{display:block;width:100%;height:100%;object-fit:contain}
.rate-table .num{text-align:right;font-weight:800;font-size:15px}
.rate-table .range{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px}
.rate-table .range .lo{color:var(--down)}
.rate-table .range .hi{color:var(--up)}
.num.pulse-up{animation:ma-cell-up .6s ease}
.num.pulse-down{animation:ma-cell-down .6s ease}
@keyframes ma-cell-up{0%{color:var(--up);text-shadow:0 0 12px rgba(32,164,93,.6)}100%{color:inherit;text-shadow:none}}
@keyframes ma-cell-down{0%{color:var(--down);text-shadow:0 0 12px rgba(192,57,43,.6)}100%{color:inherit;text-shadow:none}}

/* Market summary count-up cards */
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.summary-card{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:linear-gradient(160deg,rgba(7,63,52,.05),rgba(7,63,52,0));isolation:isolate}
.summary-card::after{content:"";position:absolute;right:-24px;bottom:-38px;width:150px;height:105px;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.22;z-index:-1;transform:rotate(-5deg);transition:opacity .2s ease,transform .25s ease}
.summary-card:hover::after{opacity:.36;transform:rotate(0) scale(1.05)}
.summary-card h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.summary-card .value{font-family:var(--font-mono);font-size:26px;font-weight:800}
.summary-card .sub{display:flex;gap:10px;margin-top:8px;font-size:11px;font-family:var(--font-mono)}
.summary-card .sub .lo{color:var(--down)}.summary-card .sub .hi{color:var(--up)}
.summary-card.gold{border-color:rgba(207,173,104,.34)}
.summary-card.gold::after{background-image:url("../assets/products/gold-bars.svg")}
.summary-card.silver{border-color:rgba(200,150,110,.34)}
.summary-card.silver::after{background-image:url("../assets/products/silver-bars.svg")}
.summary-card.fx{border-color:rgba(207,173,104,.35)}
  .summary-card.fx::after{background-image:url("../assets/images/gold-bulls-logo.png");opacity:.12}

/* ---------------------------------------------------------------------- */
/* Buttons, forms                                                          */
/* ---------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:11px;border:1px solid var(--border-strong);background:rgba(7,63,52,.035);color:var(--text);font-weight:800;font-size:13.5px;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--tab-bright),var(--tab-deep));color:var(--on-brand);border-color:transparent;box-shadow:0 10px 26px rgba(18,62,51,.26)}
.btn.buy{background:linear-gradient(135deg,#1a7a45,var(--up));color:#fffef9;border-color:transparent}
.btn.sell{background:linear-gradient(135deg,#a11b1b,var(--down));color:#f4d9d4;border-color:transparent}
.btn.block{width:100%}
.btn.ghost{background:transparent}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(248,247,242,.55);transform:scale(0);opacity:.6;pointer-events:none;animation:ma-ripple .55s ease-out forwards}
@keyframes ma-ripple{to{transform:scale(6);opacity:0}}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}

.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--border);
  background:rgba(7,63,52,.035);color:var(--text);font-size:14px;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field textarea{min-height:110px;resize:vertical}

.readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.readout{background:var(--panel-solid);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.readout .lbl{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.readout .val{font-family:var(--font-mono);font-size:24px;font-weight:800}

/* ---------------------------------------------------------------------- */
/* Lists / tables (orders, trades, messages)                              */
/* ---------------------------------------------------------------------- */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--border)}
.data-table td{text-align:center;padding:12px 8px;border-bottom:1px solid rgba(7,63,52,.06);font-weight:700;font-size:13.5px}
.data-table tr.row-buy td{color:var(--up)}
.data-table tr.row-sell td{color:var(--down)}
.data-table tr:hover td{background:rgba(7,63,52,.035)}
.row-remove{background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.4);color:var(--down);border-radius:7px;width:30px;height:30px;font-weight:900;cursor:pointer}
.empty-state{text-align:center;padding:34px 10px;color:var(--muted);font-size:13.5px}

.message-card{padding:16px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(7,63,52,.035);margin-bottom:12px}
.message-card .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:6px}
.message-card p{margin:0;font-size:14px;line-height:1.55}

/* Message board. js/ma-content.js builds these from the broadcast feed; they
   used to reuse .bank-card, which carries no padding of its own, so the copy
   sat flush against the card border and every card butted into the next with
   no separation. The feed is a single airy column: date above, body below. */
.content-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}
.content-toolbar-label{margin:0;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.content-toolbar .btn{padding:9px 16px;font-size:12.5px}
.message-list{display:grid;gap:14px}
.message-list .message-card{display:grid;gap:7px;margin:0;padding:17px 20px;border-radius:var(--radius);background:var(--panel);box-shadow:0 6px 18px rgba(7,63,52,.05);transition:border-color .2s ease,box-shadow .2s ease}
.message-list .message-card:hover{border-color:var(--border-strong);box-shadow:0 10px 26px rgba(7,63,52,.1)}
.message-card .message-date{order:-1;color:#8b7446;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.message-card .message-body{min-width:0;overflow-x:auto;font-size:14px;line-height:1.6}
.message-card .message-body>*:first-child{margin-top:0}
.message-card .message-body>*:last-child{margin-bottom:0}
.message-card .message-body strong{color:var(--accent)}
.message-card .message-body.media-only{color:var(--muted);font-size:13px;font-style:italic}
.message-card .message-body ul,.message-card .message-body ol{padding-left:20px}
/* The sanitiser keeps TABLE/THEAD/TBODY/TR/TH/TD but strips every attribute,
   so a table in a broadcast arrives unclassed and needs its own surface. */
.message-card .message-body table{width:100%;margin:12px 0;border-collapse:collapse;font-size:13px}
.message-card .message-body th,.message-card .message-body td{padding:9px 11px;border:1px solid #f5d3b0;text-align:left;vertical-align:top}
.message-card .message-body thead th{background:#123e33;color:#f4ecdc;font-size:11.5px;letter-spacing:.03em}
.message-card .message-body tbody tr:nth-child(even){background:#f8f7f2}
@media(max-width:600px){.content-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.message-list{gap:12px}.message-list .message-card{padding:15px 16px}}

/* ---------------------------------------------------------------------- */
/* Semicircular trend gauge (distinct from a full-circle ring)             */
/* ---------------------------------------------------------------------- */
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0 4px}
.gauge-svg{width:min(320px,90vw);height:auto}
.gauge-track{fill:none;stroke:rgba(7,63,52,.07);stroke-width:16;stroke-linecap:round}
.gauge-value{fill:none;stroke-width:16;stroke-linecap:round;stroke:var(--trend-color,var(--accent));stroke-dasharray:251.2;stroke-dashoffset:var(--trend-offset,251.2);transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1),stroke 1s ease}
.gauge-readout{margin-top:-46px;text-align:center}
.gauge-readout strong{display:block;font-size:26px;font-weight:900;color:var(--trend-color,var(--accent));text-transform:uppercase;letter-spacing:.05em}
.gauge-readout span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.gauge-legend{display:flex;justify-content:space-between;width:min(320px,90vw);font-size:11px;color:var(--muted);margin-top:6px;font-family:var(--font-mono)}

/* ---------------------------------------------------------------------- */
/* Calculator validation                                                  */
/* ---------------------------------------------------------------------- */
.calc-error{min-height:20px;color:var(--down);font-weight:700;font-size:13px;margin:4px 0 0}

/* ---------------------------------------------------------------------- */
/* Bank & contact detail cards                                            */
/* ---------------------------------------------------------------------- */
.bank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.bank-grid{grid-template-columns:1fr}}
.bank-card{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;background:var(--panel)}
.bank-grid>.bank-card{padding:18px 20px}
.bank-grid>.bank-card>*:first-child{margin-top:0}
.bank-grid>.bank-card>*:last-child{margin-bottom:0}
.bank-card .bank-head{padding:16px 18px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(207,173,104,.18),rgba(207,173,104,.11));border-bottom:1px solid var(--border)}
.bank-card .bank-head .glyph{width:46px;height:46px;flex:0 0 46px;border-radius:11px;background:rgba(7,63,52,.05);border:1px solid var(--border);display:grid;place-items:center;padding:7px}
.bank-svg{display:block;width:100%;height:100%;object-fit:contain}
.bank-card .bank-head strong{font-size:15px;letter-spacing:.02em}
.bank-card .bank-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.bank-rows{padding:6px 18px 16px}
.bank-rows .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(7,63,52,.06);font-size:13.5px}
.bank-rows .row:last-child{border-bottom:0}
.bank-rows .row .k{color:var(--muted);font-weight:700}
.bank-rows .row .v{font-family:var(--font-mono);font-weight:800;text-align:right}
.verify-note{display:flex;gap:10px;margin-top:16px;padding:12px 14px;border-radius:10px;background:rgba(207,173,104,.22);border:1px solid rgba(207,173,104,.3);font-size:12.5px;color:#41675e;line-height:1.5}

.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-row{display:grid;grid-template-columns:34px 1fr;gap:12px;margin:14px 0}
.contact-row .glyph{width:38px;height:38px;border-radius:10px;background:rgba(7,63,52,.045);border:1px solid var(--border);display:grid;place-items:center;padding:7px}
.contact-svg{display:block;width:100%;height:100%;object-fit:contain}
.contact-row strong{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.contact-row a,.contact-row p{display:block;margin:1px 0;text-decoration:none;color:var(--text);font-size:14px;line-height:1.5}
.placeholder-text{color:var(--warn);font-style:italic}
.contact-map{width:100%;height:280px;border:0;border-radius:14px;filter:grayscale(.15) contrast(1.05)}

/* ---------------------------------------------------------------------- */
/* Policy copy                                                             */
/* ---------------------------------------------------------------------- */
.copy h1{font-size:24px;margin:0 0 6px}
.copy h2{font-size:16px;color:var(--accent3);margin:22px 0 8px}
.copy p,.copy li{color:var(--muted);line-height:1.7;font-size:14px}
.copy ol,.copy ul{padding-left:20px}

/* ---------------------------------------------------------------------- */
/* Mega accordion footer — structurally different from a static 3-col     */
/* footer: native <details> accordions on all sizes, CSS grid on desktop, */
/* single-column stacked accordions on mobile.                            */
/* ---------------------------------------------------------------------- */
.app-footer{margin-top:30px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(11,47,40,.85),rgba(11,47,40,.95))}
.footer-grid{max-width:1180px;margin:0 auto;padding:30px 26px 10px;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:8px}
.footer-acc{border-bottom:1px solid rgba(7,63,52,.06)}
.footer-acc summary{list-style:none;cursor:pointer;padding:14px 4px;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.footer-acc summary::-webkit-details-marker{display:none}
.footer-acc summary::after{content:"+";font-size:16px;color:var(--accent3);transition:transform .2s ease}
.footer-acc[open] summary::after{content:"\2212"}
.footer-acc .acc-body{padding:0 4px 16px;color:var(--muted);font-size:13.5px;line-height:1.8}
.footer-acc .acc-body a{display:block;color:var(--muted);text-decoration:none;padding:5px 0;transition:color .15s ease,transform .15s ease}
.footer-acc .acc-body a:hover{color:var(--accent);transform:translateX(3px)}
.footer-brand-col .mark-row{display:flex;align-items:center;margin-bottom:10px}
.footer-logo{display:block;width:min(228px,100%);height:auto;filter:drop-shadow(0 6px 14px rgba(7,63,52,.26))}
.footer-brand-col p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 12px}
.footer-social{display:flex;gap:8px}
.footer-social a{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;padding:6px;color:var(--muted);text-decoration:none;transition:color .15s ease,border-color .15s ease,transform .15s ease}
.footer-social a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.social-svg{display:block;width:100%;height:100%;object-fit:contain}
.footer-bottom{max-width:1180px;margin:0 auto;padding:16px 26px 26px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;border-top:1px solid rgba(7,63,52,.06);color:var(--muted);font-size:11.5px;font-family:var(--font-mono)}
@media(min-width:761px){.footer-acc summary::after{display:none}.footer-acc .acc-body{display:block!important}.footer-acc{border-bottom:0}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------- */
/* Spinner                                                                 */
/* ---------------------------------------------------------------------- */
#maSpinner{display:none;position:fixed;inset:0;z-index:80;background:rgba(11,47,40,.62);align-items:center;justify-content:center}
#maSpinner .ring{width:46px;height:46px;border-radius:50%;border:4px solid rgba(7,63,52,.14);border-top-color:var(--accent);animation:ma-spin .7s linear infinite}
@keyframes ma-spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------------- */
/* Responsive: sidebar collapses to slide-in drawer under 900px           */
/* ---------------------------------------------------------------------- */
@media(max-width:900px){
  .app-sidebar{transform:translateX(-100%)}
  body.nav-open .app-sidebar{transform:translateX(0)}
  body.nav-open .sidebar-scrim{opacity:1;pointer-events:auto}
  .app-main{margin-left:0}
  .topbar-toggle{display:flex}
  .summary-grid{grid-template-columns:1fr}
  .app-content{padding:18px 16px 6px}
}
@media(max-width:600px){
  .footer-bottom{flex-direction:column;text-align:center}
  .btn-row{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------- */
/* Larger type pass. Every component above sets its own explicit px size, */
/* so raising the base size alone would not reach any of it -- this block */
/* lifts the header, footer and common body-copy sizes by roughly one     */
/* size step, placed after the rules it adjusts so it wins ties without   */
/* editing each declaration individually.                                 */
/* ---------------------------------------------------------------------- */
.sidebar-link{font-size:14.5px}
.sidebar-foot{font-size:12.5px}
.ticker-chip{font-size:13.5px}
.pill-btn{font-size:13.5px}
/* Header/footer menu type (.ma-menu-link, .ma-menu-trigger, .ma-submenu,
   .topbar-actions) is sized in ma-navigation.css, the last stylesheet
   loaded, so it is raised there instead of here to actually take effect. */
.page-head h1{font-size:clamp(22px,3vw,29px)}
.page-head p{font-size:14.5px}
.eyebrow{font-size:12px}
.panel-title{font-size:16px}
.rate-table thead th{font-size:12px}
.rate-table tbody td{font-size:15px}
.rate-table .sym-cell{font-size:14.5px}
.rate-table .num{font-size:16px}
.rate-table .range{font-size:11.5px}
.summary-card h3{font-size:12px}
.summary-card .value{font-size:27px}
.summary-card .sub{font-size:12px}
.btn{font-size:14.5px}
.field span{font-size:13px}
.field input,.field select,.field textarea{font-size:15px}
.readout .lbl{font-size:12px}
.readout .val{font-size:25px}
.data-table th{font-size:12px}
.data-table td{font-size:14.5px}
.empty-state{font-size:14.5px}
.message-card .meta{font-size:12px}
.message-card p,.message-card .message-body{font-size:15px}
.content-toolbar-label{font-size:13px}
.content-toolbar .btn{font-size:13.5px}
.message-card .message-date{font-size:12.5px}
.gauge-readout span{font-size:14px}
.gauge-legend{font-size:12px}
.calc-error{font-size:14px}
.bank-card .bank-head strong{font-size:16px}
.bank-card .bank-head small{font-size:12px}
.bank-rows .row{font-size:14.5px}
.verify-note{font-size:13.5px}
.contact-row strong{font-size:13px}
.contact-row a,.contact-row p{font-size:15px}
.copy h1{font-size:26px}
.copy h2{font-size:17.5px}
.copy p,.copy li{font-size:15px}
.demo-banner{font-size:14px}
/* Footer text sizing (accordion labels/links, brand blurb, legal line) is
   set in ma-navigation.css instead: it is the last stylesheet loaded on
   every page, including Liverates.html where ma-reference-theme.css would
   otherwise override a footer rule declared here. */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glass,.stagger > *,.page-head,.num.pulse-up,.num.pulse-down,.badge-live,.ticker-track{animation:none}
}



/* Buy/Sell order comments, matching the Choice Gold placeOrder2 flow. */
.order-comment-field{text-align:left;margin-top:16px}
.order-comment-field textarea{min-height:82px;line-height:1.5;resize:vertical}
.order-comment-field>small{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.4}
.trade-comment{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}