/* MMR STOCK HOVER PREVIEW — MAR-113.
 *
 * The other half of the component. v2/js/hover-preview.js writes the markup and
 * this file is the only place its appearance is decided; a page that wants the
 * preview links both and styles neither.
 *
 * Every colour is an mmr-tokens.css custom property with a literal fallback, so
 * the popover themes with the rest of v2 and still renders standalone. Sizes are
 * fixed rather than fluid on the desktop popover on purpose: it is a preview,
 * and a preview that changes size as it moves between rows reads as a glitch.
 */

/* ------------------------------------------------------------------ the box */

.mhv {
  position: fixed;
  left: 0; top: 0;
  width: 300px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 12px;
  background: var(--surface, #0e1a2b);
  border: 1px solid var(--border, #21324d);
  border-radius: var(--r-card, 14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 18px 48px rgba(0, 0, 0, .55);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  color: var(--text, #f2f6fb);
  /* The popover must never intercept the pointer travelling to a row behind it
     while it is hidden, and hidden already does that -- but a stale transform
     mid-animation can, so nothing here is pointer-transparent while shown. */
  animation: mhv-in .12s ease-out;
}

.mhv[hidden] { display: none; }
.mhv.is-quiet { animation: none; }

@keyframes mhv-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.mhv-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 16, .55);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
.mhv-scrim[hidden] { display: none; }

/* Screen-reader announcement channel. Visually gone, never display:none --
   display:none is not announced. */
.mhv-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

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

.mhv-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.mhv-id { min-width: 0; }

.mhv-tk {
  display: block;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.1;
}

.mhv-nm {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted, #9babc2);
  /* A long company name must never widen the popover; it truncates. */
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mhv-px { text-align: right; flex: 0 0 auto; }

.mhv-px-v {
  display: block;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.1;
}

.mhv-px-d {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11.5px;
  font-weight: 700;
}

/* Only quantities that can be negative are painted. A score is not a gain. */
.is-up   { color: var(--bull, #27e281); }
.is-down { color: var(--bear, #ff6876); }
.is-flat { color: var(--muted, #9babc2); }

/* -------------------------------------------------------- MAR-111 event hook */

.mhv-evs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}

.mhv-ev {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--chip-calm-bg, rgba(90, 167, 255, .14));
  color: var(--calm, #5aa7ff);
}
.mhv-ev-bull { background: var(--chip-bull-bg, rgba(39, 226, 129, .14)); color: var(--bull, #27e281); }
.mhv-ev-bear { background: var(--chip-bear-bg, rgba(255, 104, 118, .14)); color: var(--bear, #ff6876); }
.mhv-ev-warn { background: var(--chip-warn-bg, rgba(255, 181, 71, .14)); color: var(--warn, #ffb547); }

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

.mhv-chart {
  position: relative;
  height: 92px;
  border-radius: 8px;
  background: var(--surface-2, #111f33);
  border: 1px solid var(--border-soft, #1a2942);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mhv-svg { display: block; width: 100%; height: 100%; }

/* A chart with no bars says so. It never draws a flat line, because a flat line
   is a claim about the price and "we have no history" is not that claim. */
.mhv-chart-msg {
  font-size: 11px;
  color: var(--faint, #6f829c);
  padding: 0 10px;
  text-align: center;
}

.mhv-up path { stroke: var(--bull, #27e281); stroke-width: 1; }
.mhv-up rect { fill: var(--bull, #27e281); }
.mhv-dn path { stroke: var(--bear, #ff6876); stroke-width: 1; }
.mhv-dn rect { fill: var(--bear, #ff6876); }
.mhv-vol .mhv-vu { fill: var(--bull, #27e281); opacity: .28; }
.mhv-vol .mhv-vd { fill: var(--bear, #ff6876); opacity: .28; }

/* -------------------------------------------------------------- 1D / 1W / 1M */

.mhv-mvs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.mhv-mv {
  text-align: center;
  padding: 5px 2px;
  border-radius: 7px;
  background: var(--surface-2, #111f33);
}

.mhv-mv-l {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--faint, #6f829c);
}

.mhv-mv-v {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 12px;
  font-weight: 700;
}

/* ----------------------------------------------- the three separate readings */

/* THREE BOXES, THREE READINGS. MMR Score is 0-100 and fundamental; Chart Score
   and Entry Readiness are 1-10 and technical. They are never averaged, never
   summed and never given a shared colour ramp that would imply one scale. */
.mhv-scs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.mhv-sc {
  padding: 6px 4px;
  border-radius: 7px;
  background: var(--surface-2, #111f33);
  border: 1px solid var(--border-soft, #1a2942);
  text-align: center;
}

.mhv-sc.is-empty { opacity: .62; }

.mhv-sc-l {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--faint, #6f829c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mhv-sc-v {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #f2f6fb);
}

/* THE REFUSAL STATE. A field that cannot apply says so and says why -- it does
   not vanish and it does not borrow the em dash, which means "we do not know".
   The wording is ETF Discover's own ("Not applicable" / "A fund is not a
   company"), reused rather than reinvented so the product has one vocabulary. */
.mhv-sc.is-na, .mhv-mv.is-na {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-soft, #1a2942);
}

.mhv-sc-na {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--muted, #9babc2);
}

.mhv-sc-why {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  line-height: 1.2;
  color: var(--faint, #6f829c);
}

.mhv-mv-na {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--faint, #6f829c);
}

.mhv-sc-v i {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  color: var(--faint, #6f829c);
  margin-left: 1px;
}

/* --------------------------------------------------------------- the action */

.mhv-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  padding: 8px;
  border-radius: 9px;
  background: var(--accent-soft, rgba(39, 226, 129, .13));
  border: 1px solid var(--accent, #27e281);
  color: var(--accent, #27e281);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}

.mhv-open:hover { background: var(--accent, #27e281); color: var(--bg, #07101b); }
.mhv-open:focus-visible { outline: 2px solid var(--accent, #27e281); outline-offset: 2px; }

.mhv-open svg {
  width: 11px; height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------- the row trigger affordance */

/* The touch entry point. Pages render this inside a row; it is invisible to a
   mouse (which has hover) and a 32px target to a finger. */
[data-mmr-hover-trigger] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border, #21324d);
  border-radius: 8px;
  background: var(--surface-2, #111f33);
  color: var(--muted, #9babc2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

@media (hover: none), (pointer: coarse) {
  [data-mmr-hover-trigger] { display: inline-flex; }
}

/* ---------------------------------------------------------- the mobile sheet */

/* On a coarse pointer the popover stops being a popover. It docks to the bottom
   edge, spans the width inside a fixed margin and gets a close control, because
   there is no pointer-out to dismiss it with and no room to float it beside a
   row that is already the full width of the screen.

   The width rule is the one that matters: `left/right: 8px` plus
   border-box sizing means the sheet cannot be wider than the viewport at any
   width, which is what keeps 390px free of horizontal overflow. */
.mhv.is-sheet {
  position: fixed;
  left: 8px;
  right: 8px;
  top: auto;
  bottom: 0;
  width: auto;
  max-width: none;
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-lg, 20px);
  padding: 14px 14px 12px;
  animation: mhv-up .16s ease-out;
}

.mhv.is-sheet.is-quiet { animation: none; }

@keyframes mhv-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* The grab handle doubles as the affordance that this is dismissible. */
.mhv.is-sheet::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 4px;
  border-radius: 999px;
  background: var(--border2, #2b4165);
}

.mhv.is-sheet .mhv-hd { margin-top: 8px; }
.mhv.is-sheet .mhv-chart { height: 110px; }
.mhv.is-sheet .mhv-nm { max-width: 46vw; }
.mhv.is-sheet .mhv-open { padding: 12px; font-size: 13px; }

/* Scroll of the page behind a sheet is locked; scroll behind a desktop popover
   closes it instead (see the JS). Both stop the popover chasing a moving row. */
body.mhv-locked { overflow: hidden; touch-action: none; }

/* --------------------------------------------------------------- small print */

@media (prefers-reduced-motion: reduce) {
  .mhv, .mhv.is-sheet { animation: none; }
}