/* ==========================================================================
   AMT Quotes widget
   All rules are scoped under .amtq so the stylesheet can be dropped into an
   existing page (the AMT Pro Room) without colliding with the host theme.
   Colours come from custom properties - override them on .amtq to re-skin.
   ========================================================================== */

.amtq {
  /* Palette, radii and fonts taken from Rishi's QAMT widget spec so the two boxes read
     as one system. IBM Plex is already loaded on the Pro Room by the QAMT widget; the
     system fallbacks cover any page where it is not. */
  --amtq-bg: #ffffff;
  --amtq-surface: #f7f8fa;
  --amtq-border: #e2e8f0;
  --amtq-text: #1a202c;
  --amtq-muted: #718096;
  --amtq-faint: #a0aec0;
  --amtq-accent: #6b46c1;
  --amtq-accent-soft: #ede9fe;
  --amtq-up: #276749;
  --amtq-down: #c53030;
  --amtq-radius: 8px;
  --amtq-radius-pill: 4px;
  --amtq-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --amtq-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  /* Layout responds to the widget's own width, not the viewport's - so a narrow sidebar
     placement on a wide desktop gets the compact treatment too. */
  container-type: inline-size;
  font-family: var(--amtq-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--amtq-text);
  background: var(--amtq-bg);
  border: 1px solid var(--amtq-border);
  border-radius: var(--amtq-radius);
  overflow: hidden;
}

.amtq *,
.amtq *::before,
.amtq *::after {
  box-sizing: inherit;
}

.amtq[data-theme='dark'] {
  --amtq-bg: #16191d;
  --amtq-surface: #1e2329;
  --amtq-border: #2c333b;
  --amtq-text: #e8eaed;
  --amtq-muted: #9aa0a6;
  --amtq-accent: #a78bfa;
  --amtq-accent-soft: #2e2545;
  --amtq-up: #34d17f;
  --amtq-down: #ff6b5e;
}

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

/* Mirrors the QAMT header bar: mark, two-line title, then status pills. */
.amtq-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--amtq-border);
}

.amtq-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--amtq-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--amtq-accent);
  border-radius: 6px;
}

.amtq-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.amtq-title {
  display: block;
  font-family: var(--amtq-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The brand is named once, on one line - never broken across two. */
  white-space: nowrap;
}

.amtq-subtitle {
  display: block;
  font-family: var(--amtq-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amtq-muted);
}

.amtq-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.amtq-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--amtq-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amtq-muted);
  background: var(--amtq-surface);
  border: 1px solid var(--amtq-border);
  border-radius: var(--amtq-radius-pill);
  white-space: nowrap;
}

.amtq-pill-accent {
  color: var(--amtq-accent);
  background: var(--amtq-accent-soft);
  border-color: transparent;
}

.amtq-pill-live {
  color: var(--amtq-up);
}

.amtq-pill-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.amtq-stamp {
  font-family: var(--amtq-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--amtq-muted);
  white-space: nowrap;
}

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

.amtq-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--amtq-border);
}

.amtq-tab {
  flex: 0 0 auto;
  padding: 10px 12px;
  font: inherit;
  font-family: var(--amtq-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amtq-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.amtq-tab:hover {
  color: var(--amtq-text);
}

.amtq-tab[aria-selected='true'] {
  color: var(--amtq-accent);
  border-bottom-color: var(--amtq-accent);
}

/* ---------------------------------------------------------------- chart */

.amtq-chart-panel {
  padding: 10px 12px 4px;
  border-bottom: 1px solid var(--amtq-border);
}

.amtq-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.amtq-chart-title {
  font-weight: 700;
  font-size: 15px;
}

.amtq-chart-sub {
  font-size: 12px;
  color: var(--amtq-muted);
}

.amtq-ranges {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.amtq-range {
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--amtq-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.amtq-range:hover {
  background: var(--amtq-surface);
}

.amtq-range[aria-pressed='true'] {
  color: var(--amtq-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.amtq-chart {
  display: block;
  width: 100%;
  height: 120px;
}

/* ----------------------------------------------------------- watermark */

.amtq-chart-wrap {
  position: relative;
}

/* Sits over the chart and is inert - it must never eat a click or a text selection. */
.amtq-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 8px 10px;
  pointer-events: none;
  user-select: none;
}

.amtq-watermark img {
  max-width: 40%;
  max-height: 78%;
  object-fit: contain;
  opacity: var(--amtq-watermark-opacity, 0.1);
}

/* The logo is black line art, which would vanish on the dark surface - flip it to white. */
.amtq[data-theme='dark'] .amtq-watermark img {
  filter: invert(1);
}

.amtq-watermark-text {
  font-family: var(--amtq-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--amtq-text);
  opacity: var(--amtq-watermark-opacity, 0.1);
}

.amtq-watermark-center {
  align-items: center;
  justify-content: center;
}

.amtq-watermark-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.amtq-watermark-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}

.amtq-watermark-top-right {
  align-items: flex-start;
  justify-content: flex-end;
}

.amtq-watermark-top-left {
  align-items: flex-start;
  justify-content: flex-start;
}

/* Very narrow (small phones): tighten the title just enough to keep it on one line. */
@container (max-width: 360px) {
  .amtq-title {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* A corner mark can be smaller - it isn't competing with the line for space. */
.amtq-watermark:not(.amtq-watermark-center) .amtq-watermark-text {
  font-size: 13px;
}

.amtq-watermark:not(.amtq-watermark-center) img {
  max-width: 22%;
  max-height: 34%;
}

.amtq-chart-empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--amtq-muted);
}

/* ---------------------------------------------------------------- rows */

.amtq-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  /* On a narrow screen the table scrolls sideways inside this box. The host page must
     never scroll horizontally, so the overflow is owned here, not by the document. */
  overflow-x: auto;
  overscroll-behavior: contain;
}

.amtq-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.amtq-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 7px 10px;
  font-family: var(--amtq-mono);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amtq-muted);
  background: var(--amtq-bg);
  border-bottom: 1px solid var(--amtq-border);
  white-space: nowrap;
}

.amtq-table th:first-child,
.amtq-table td:first-child {
  text-align: left;
}

.amtq-table td {
  padding: 9px 10px;
  font-family: var(--amtq-mono);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  border-bottom: 1px solid var(--amtq-border);
  white-space: nowrap;
}

.amtq-table td:first-child {
  font-family: var(--amtq-font);
  font-size: 14px;
}

.amtq-row {
  cursor: pointer;
}

.amtq-row:hover td {
  background: var(--amtq-surface);
}

.amtq-row[aria-selected='true'] td {
  background: var(--amtq-surface);
}

.amtq-name {
  font-weight: 600;
  white-space: normal;
}

.amtq-price {
  font-weight: 700;
}

.amtq-up {
  color: var(--amtq-up);
}

.amtq-down {
  color: var(--amtq-down);
}

.amtq-flat,
.amtq-na {
  color: var(--amtq-muted);
}

.amtq-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-family: var(--amtq-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
  color: var(--amtq-accent);
  background: var(--amtq-accent-soft);
  border-radius: var(--amtq-radius-pill);
  vertical-align: middle;
}

.amtq-time {
  font-size: 12px;
  color: var(--amtq-muted);
}

.amtq-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--amtq-muted);
  vertical-align: middle;
}

.amtq-dot-open {
  background: var(--amtq-up);
}

.amtq-dot-closed {
  background: var(--amtq-down);
}

/* --------------------------------------------------------------- footer */

.amtq-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  background: var(--amtq-surface);
  border-top: 1px solid var(--amtq-border);
}

.amtq-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--amtq-accent);
  text-decoration: none;
}

.amtq-link:hover {
  text-decoration: underline;
}

.amtq-link::after {
  content: ' \203A';
}

.amtq-footer-note {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--amtq-muted);
}

.amtq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  flex: 1 1 100%;
}

.amtq-legend-item {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--amtq-muted);
}

.amtq-cat-note {
  padding: 8px 10px;
  font-size: 11px;
  font-style: italic;
  color: var(--amtq-muted);
}

.amtq-status {
  padding: 16px;
  font-size: 13px;
  color: var(--amtq-muted);
  text-align: center;
}

.amtq-error {
  color: var(--amtq-down);
}

/* -------------------------------------------------------------- compact */

/* -------------------------------------------------------------- compact */

/* Narrow screens keep every column and scroll the table sideways instead of hiding
   data - a reader on a phone should not silently lose the change and volume figures.
   The instrument name is pinned so the row stays identifiable mid-scroll. */
@container (max-width: 620px) {
  /* Narrow: give the title its own row so it stays on one line, and drop the status
     pills underneath rather than squeezing the name into two or three lines. */
  .amtq-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .amtq-pills {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .amtq-table {
    min-width: 560px;
  }

  .amtq-table td,
  .amtq-table th {
    padding-left: 8px;
    padding-right: 8px;
  }

  .amtq-table th:first-child,
  .amtq-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--amtq-bg);
  }

  .amtq-table td:first-child {
    z-index: 2;
    /* Hairline edge so the pinned name reads as a separate layer while scrolling. */
    box-shadow: 1px 0 0 var(--amtq-border);
  }

  .amtq-table th:first-child {
    z-index: 5;
    box-shadow: 1px 0 0 var(--amtq-border);
  }

  .amtq-row:hover td:first-child,
  .amtq-row[aria-selected='true'] td:first-child {
    background: var(--amtq-surface);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .amtq-row td {
    transition: background-color 0.15s ease;
  }
}