/* ===== METALS SHELL — BEGIN =====
   Chrome for the standalone metals app: header, asset tabs, and the trading region.

   Loaded AFTER metals.css and deliberately not merged into it. The inherited stylesheet is a
   working, tested artifact; keeping it pristine means the research dashboard it styles cannot
   drift while this file evolves.

   THE OVERRIDE BLOCK below is the one place that fights it. metals.css contains rules whose
   only job was to hide the BTC host's own chrome whenever a metal tab was selected:

     body.metal-asset-active main>:not(header):not(.metalsAssetRoot){display:none!important}
     body.metal-asset-active main>header .headerTools{display:none!important}

   In the BTC page that was correct. Here there is no host chrome to hide, and those rules
   would erase the trading region and the header tools -- the two things this app adds. They
   are re-enabled explicitly rather than deleted upstream.
   ===================================================================== */

/* ---- palette ------------------------------------------------------------------------
   Gold and Silver share a structure and diverge in hue: same dark ground, same glass, same
   type scale. Only --metal-accent changes, which is what makes them read as siblings rather
   than two different apps. The ground is deliberately near-black rather than yellow-tinted:
   the gold identity comes from the accent and the photograph, not from washing the UI. */
:root {
  --m-bg: #07090f;
  --m-bg-2: #0b0e17;
  --m-ink: #eef3ff;
  --m-ink-dim: #97a3ba;
  --m-ink-faint: #6d7a91;
  --m-line: rgba(142, 165, 212, .22);
  --m-line-soft: rgba(142, 165, 212, .12);
  --m-glass: linear-gradient(150deg, rgba(9, 20, 46, .58), rgba(3, 9, 25, .38));
  --m-glass-hi: inset 0 1px rgba(255, 255, 255, .07);
  --m-shadow: 0 14px 38px rgba(0, 0, 0, .34);
  --m-blur: blur(22px) saturate(138%);
  --m-good: #45e6a8;
  --m-bad: #ff657c;
  --m-warn: #ffc25a;
  --m-radius: 16px;
  --m-tap: 44px;                 /* minimum comfortable touch target */
}

/* ---- reset / ground ------------------------------------------------------------------ */

* { box-sizing: border-box; }

/* min-height, not height. A fixed `height: 100%` on html/body caps the scrolling box at the
   viewport, so a trading panel taller than the screen overflows without the document becoming
   scrollable -- the content is there and unreachable. */
html, body { min-height: 100%; }

body.metalsApp {
  margin: 0;
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: Inter, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* the metal photograph sits behind everything and is painted by metals.css */
  overscroll-behavior-y: none;
}

body.metalsApp main {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ---- OVERRIDE BLOCK: undo the BTC-host suppression ----------------------------------- */

body.metalsApp.metal-asset-active main > :not(header) { display: revert !important; }
body.metalsApp.metal-asset-active main > header .headerTools,
body.metalsApp.metal-asset-active main > header .simpleHeaderMetrics { display: flex !important; }
body.metalsApp.metal-asset-active main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
/* Regions the shell controls stay hidden until asked for, via [hidden].
   This has to OUT-SPECIFY the override block above, not merely follow it: that rule is
   `body.metalsApp.metal-asset-active main > :not(header)` at (0,2,3), so a plain
   `main > [hidden]` at (0,2,2) lost and every panel rendered stacked on top of the research
   dashboard. Matching its class count and adding the attribute selector settles it. */
body.metalsApp.metal-asset-active main > [hidden],
body.metalsApp main > [hidden] { display: none !important; }

/* ---- header --------------------------------------------------------------------------- */

.metalsHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-glass);
  box-shadow: var(--m-glass-hi), var(--m-shadow);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
}

.metalsBrand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.metalsBrandMark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--metal-accent, #f2c45f) 46%, transparent);
  border-radius: 10px;
  color: var(--metal-accent, #f2c45f);
  background: color-mix(in srgb, var(--metal-accent, #f2c45f) 11%, transparent);
  font-size: 14px;
}

.metalsBrand strong {
  display: block;
  font: 900 12px/1 "Inter Tight", Inter, sans-serif;
  letter-spacing: .07em;
}
.metalsBrand small {
  display: block;
  margin-top: 3px;
  color: var(--m-ink-faint);
  font-size: 7px;
  letter-spacing: .1em;
}

.simpleHeaderMetrics { display: flex; gap: 8px; margin-left: auto; }

.metalsHeaderMetric {
  min-width: 74px;
  padding: 5px 9px;
  border: 1px solid var(--m-line-soft);
  border-radius: 10px;
  background: rgba(3, 10, 28, .3);
}
.metalsHeaderMetric span {
  display: block;
  color: var(--m-ink-faint);
  font: 800 6.5px/1.2 Inter, sans-serif;
  letter-spacing: .12em;
}
.metalsHeaderMetric b {
  display: block;
  margin-top: 4px;
  font: 850 12px/1 "Inter Tight", sans-serif;
}
.metalsStateOff { color: var(--m-ink-dim); }
.metalsStateShadow { color: var(--m-warn); }
.metalsStateLive { color: var(--m-good); }

.headerTools { display: flex; gap: 6px; }

/* Buttons: fixed geometry so nothing reflows on click, and a real tap target on phones.
   A control that moves under the finger is how a mis-tap becomes an order. */
.metalsToolButton {
  min-height: 30px;
  min-width: 62px;
  padding: 0 11px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: rgba(3, 10, 28, .45);
  color: var(--m-ink-dim);
  font: 900 7.5px/1 Inter, sans-serif;
  letter-spacing: .11em;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.metalsToolButton:hover { color: var(--m-ink); background: rgba(255, 255, 255, .05); }
.metalsToolButton[aria-pressed="true"],
.metalsToolButton.active {
  color: var(--metal-accent, #f2c45f);
  border-color: color-mix(in srgb, var(--metal-accent, #f2c45f) 46%, transparent);
  background: color-mix(in srgb, var(--metal-accent, #f2c45f) 12%, transparent);
}
.metalsToolButton:focus-visible {
  outline: 2px solid var(--metal-accent, #f2c45f);
  outline-offset: 2px;
}

/* ---- asset tab status dot ------------------------------------------------------------- */

.assetTabDot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--m-ink-faint);
  vertical-align: middle;
}
.assetTabDot[data-state="LIVE"] { background: var(--m-good); box-shadow: 0 0 6px var(--m-good); }
.assetTabDot[data-state="DEGRADED"] { background: var(--m-warn); }
.assetTabDot[data-state="ERROR"] { background: var(--m-bad); }
.assetTabDot[data-state="CLOSED"],
.assetTabDot[data-state="NO_CONTRACT"] { background: var(--m-ink-faint); }
.assetTabDot[data-state="CONNECTING"] { background: var(--m-ink-dim); animation: metalsPulse 1.4s ease-in-out infinite; }
@keyframes metalsPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* status must be legible without relying on colour alone */
.assetTab[data-available="false"]::after { content: " ·"; }

/* ---- glass card ----------------------------------------------------------------------- */

.metalGlass {
  min-width: 0;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-glass);
  box-shadow: var(--m-glass-hi), var(--m-shadow);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  overflow: hidden;
}

.metalsCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--m-line-soft);
}
.metalsCardHead span {
  display: block;
  color: var(--m-ink-faint);
  font: 800 6.5px/1.2 Inter, sans-serif;
  letter-spacing: .13em;
}
.metalsCardHead strong {
  display: block;
  margin-top: 4px;
  font: 850 11px/1 "Inter Tight", sans-serif;
  letter-spacing: .03em;
}
.metalsCardHead small { color: var(--m-ink-faint); font-size: 7px; letter-spacing: .09em; }

.metalsModeChip {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--metal-accent, #f2c45f) 40%, transparent);
  border-radius: 999px;
  color: var(--metal-accent, #f2c45f);
  font: 900 6.5px/1 Inter, sans-serif !important;
  letter-spacing: .12em;
  white-space: nowrap;
}
.metalsModeChip[data-mode="live"] { color: var(--m-good); border-color: color-mix(in srgb, var(--m-good) 45%, transparent); }
.metalsModeChip[data-mode="paper"] { color: var(--m-warn); border-color: color-mix(in srgb, var(--m-warn) 45%, transparent); }

/* ---- trading region ------------------------------------------------------------------- */

.metalsTradingRegion, .metalsSystemRegion { min-height: 0; overflow: auto; }

.metalsTradingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
  align-items: start;
}

.metalsTradeState { padding: 14px 12px; }
.metalsTradeState strong {
  display: block;
  color: var(--metal-accent, #f2c45f);
  font: 900 22px/1 "Inter Tight", sans-serif;
  letter-spacing: -.03em;
}
.metalsTradeState p {
  margin: 7px 0 0;
  color: var(--m-ink-dim);
  font-size: 9px;
  line-height: 1.5;
}

.metalsPositionBlock { padding: 0 12px 12px; }
.metalsPositionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--m-line-soft);
}
.metalsPositionRow span { color: var(--m-ink-faint); font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.metalsPositionRow b { font: 850 12px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }
.metalsPositionRow.accent b { color: var(--metal-accent, #f2c45f); font-size: 14px; }
.metalsPositionRow b.good { color: var(--m-good); }
.metalsPositionRow b.bad { color: var(--m-bad); }

/* ---- dollar preview -------------------------------------------------------------------- */

.metalsPreviewTable { width: 100%; border-collapse: collapse; }
.metalsPreviewTable th, .metalsPreviewTable td {
  padding: 6px 12px;
  text-align: left;
  font-size: 9px;
  border-top: 1px solid var(--m-line-soft);
}
.metalsPreviewTable tr:first-child th, .metalsPreviewTable tr:first-child td { border-top: 0; }
.metalsPreviewTable th { color: var(--m-ink-faint); font-weight: 700; }
.metalsPreviewTable td {
  text-align: right;
  font: 850 11px/1 "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
}
.metalsPreviewTable td.good { color: var(--m-good); }
.metalsPreviewTable td.bad { color: var(--m-bad); }
.metalsPreviewSplit th, .metalsPreviewSplit td { border-top: 1px solid var(--m-line); }

/* ---- why it is not trading -------------------------------------------------------------- */

.metalsWhyNotTotals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.metalsWhyNotTotals > div {
  padding: 9px;
  border: 1px solid var(--m-line-soft);
  border-radius: 11px;
  background: rgba(3, 10, 28, .28);
}
.metalsWhyNotTotals span { display: block; color: var(--m-ink-faint); font: 800 6.5px/1.2 Inter, sans-serif; letter-spacing: .12em; }
.metalsWhyNotTotals b {
  display: block;
  margin-top: 5px;
  font: 900 20px/1 "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
}

.metalsWhyNotList { padding: 0 12px 12px; }
.metalsWhyNotRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--m-line-soft);
}
.metalsWhyNotRow b {
  flex: 0 0 auto;
  min-width: 42px;
  color: var(--metal-accent, #f2c45f);
  font: 900 11px/1 "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.metalsWhyNotRow span { color: var(--m-ink-dim); font-size: 9px; line-height: 1.45; }
.metalsEmptyNote { padding: 10px 0; color: var(--m-ink-faint); font-size: 9px; }

/* ---- live feed --------------------------------------------------------------------------- */

.metalsFeed {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 12px 12px;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.metalsFeedRow {
  display: flex;
  gap: 9px;
  padding: 4px 0;
  font-size: 9px;
  line-height: 1.45;
  border-top: 1px solid var(--m-line-soft);
}
.metalsFeedRow:first-child { border-top: 0; }
.metalsFeedRow time { flex: 0 0 auto; color: var(--m-ink-faint); font-variant-numeric: tabular-nums; }
.metalsFeedRow span { color: var(--m-ink-dim); }
.metalsFeedRow[data-kind="fill"] span { color: var(--m-good); }
.metalsFeedRow[data-kind="exit"] span { color: var(--metal-accent, #f2c45f); }
.metalsFeedRow[data-kind="error"] span { color: var(--m-bad); }

/* ---- performance / health grids ----------------------------------------------------------- */

.metalsPerfGrid, .metalsHealthGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
  padding: 12px;
}
.metalsPerfCell, .metalsHealthCell {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--m-line-soft);
  border-radius: 10px;
  background: rgba(3, 10, 28, .28);
}
.metalsPerfCell span, .metalsHealthCell span {
  display: block;
  color: var(--m-ink-faint);
  font: 800 6.5px/1.2 Inter, sans-serif;
  letter-spacing: .11em;
}
.metalsPerfCell b {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font: 850 13px/1 "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Health values are STATUS WORDS, not numbers, so they wrap rather than truncate: ellipsis
   turned "NO OPEN CONTRACT" into "NO OPEN ..." and "DISCONNECTED" into "DISCONN...", which is
   the one place in the app where the exact state is the whole point. */
.metalsHealthCell b {
  display: block;
  margin-top: 5px;
  font: 850 12px/1.25 "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.metalsHealthCell b.good { color: var(--m-good); }
.metalsHealthCell b.bad { color: var(--m-bad); }
.metalsHealthCell b.warn { color: var(--m-warn); }
/* status must not depend on colour alone */
.metalsHealthCell b.good::before { content: "● "; }
.metalsHealthCell b.warn::before { content: "▲ "; }
.metalsHealthCell b.bad::before { content: "■ "; }

/* ---- settings ------------------------------------------------------------------------------ */

.metalsSettingsBody { padding: 12px; }
.metalsSettingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--m-line-soft);
}
.metalsSettingRow:first-child { border-top: 0; }
.metalsSettingLabel { min-width: 0; }
.metalsSettingLabel strong { display: block; font: 800 9px/1.3 Inter, sans-serif; }
.metalsSettingLabel small { display: block; margin-top: 3px; color: var(--m-ink-faint); font-size: 7.5px; line-height: 1.4; }

.metalsChoiceRow { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.metalsChip {
  min-height: 28px;
  min-width: 46px;
  padding: 0 10px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: rgba(3, 10, 28, .45);
  color: var(--m-ink-dim);
  font: 900 7.5px/1 Inter, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.metalsChip[aria-pressed="true"] {
  color: var(--metal-accent, #f2c45f);
  border-color: color-mix(in srgb, var(--metal-accent, #f2c45f) 50%, transparent);
  background: color-mix(in srgb, var(--metal-accent, #f2c45f) 14%, transparent);
}
.metalsChip:focus-visible { outline: 2px solid var(--metal-accent, #f2c45f); outline-offset: 2px; }
.metalsChip:disabled { opacity: .4; cursor: not-allowed; }

/* the arm control is deliberately unlike every other button here */
.metalsArmButton {
  width: 100%;
  min-height: var(--m-tap);
  margin-top: 10px;
  border: 1px solid var(--m-bad);
  border-radius: 12px;
  background: color-mix(in srgb, var(--m-bad) 12%, transparent);
  color: var(--m-bad);
  font: 900 10px/1 Inter, sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
}
.metalsArmButton[aria-pressed="true"] {
  border-color: var(--m-good);
  background: color-mix(in srgb, var(--m-good) 14%, transparent);
  color: var(--m-good);
}

/* ---- startup blocked ------------------------------------------------------------------------ */

.metalsStartupBlocked {
  margin: 10px;
  padding: 16px;
  border: 1px solid var(--m-bad);
  border-radius: var(--m-radius);
  background: color-mix(in srgb, var(--m-bad) 10%, transparent);
}
.metalsStartupBlocked strong { display: block; color: var(--m-bad); font: 900 13px/1 "Inter Tight", sans-serif; letter-spacing: .1em; }
.metalsStartupBlocked p { margin: 8px 0 0; color: var(--m-ink-dim); font-size: 10px; line-height: 1.5; }

/* ---- responsive ------------------------------------------------------------------------------ */

@media (max-width: 780px) {
  body.metalsApp main { padding: 7px; gap: 7px; }
  .metalsHeader { flex-wrap: wrap; gap: 8px; }
  .simpleHeaderMetrics { order: 3; width: 100%; margin-left: 0; }
  .headerTools { margin-left: auto; }
  .metalsTradingGrid { grid-template-columns: 1fr; }
  /* Real tap targets on a phone. The asset tabs are inherited at 27px, which is comfortable
     with a mouse and not with a thumb -- and mis-tapping them switches which metal you are
     looking at, so they get the same treatment as everything else. */
  .metalsToolButton, .metalsChip { min-height: 38px; }
  .assetTab { height: 38px; min-width: 74px; }
  .assetTabs { padding: 4px; }
  .metalsFeed { max-height: 200px; }
}

@media (max-width: 420px) {
  .metalsBrand small { display: none; }
  .metalsHeaderMetric { min-width: 0; flex: 1; }
}

/* wide content scrolls inside itself; the page body never scrolls sideways */
body.metalsApp { overflow-x: hidden; }
.metalsPreviewTable, .metalsFeed { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .assetTabDot[data-state="CONNECTING"] { animation: none; }
  * { transition: none !important; }
}
/* ===== METALS SHELL — END ===== */