/* components/popover.css — the touch tooltip / toggletip (MOBILE_PLAN.md §2.7).
 *
 * The bubble is `position:fixed` inside one shared layer on <body>, so it is
 * never trapped by a transform on `.main` or `.topbar` (§6 "position:fixed and
 * containing blocks").
 *
 * DOM lifetime (what keeps the desktop structural snapshot at 0 diffs): a
 * route that never opens a popover has nothing of this file in the DOM. A
 * "tooltip" bubble and its layer are created on first open. A "toggletip" is
 * a live region, so its empty, hidden bubble is in the DOM from attach()
 * — content is inserted only after it is shown, which is what makes the first
 * open get announced. destroy() removes the bubble and drops the layer once it
 * is empty; a detached trigger also tears itself down on the next document
 * event.
 *
 * Colour, type, spacing, radius, shadow and stacking come only from tokens.css:
 * --surface-2, --border, --ink, --shadow-menu, --radius-md, --fs-label,
 * --space-2, --space-3, --z-tooltip. No literal colours here.
 *
 * Width rule (§2.7 and the P2 acceptance): `max-width` is
 * `min(320px, calc(100vw - 16px))` and there is no `min-width` at all, so the
 * bubble can never be wider than the viewport inset. The JS clamp in
 * components/popover.js keeps it inside `viewportRect()` minus the safe areas.
 */

.popover-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  pointer-events: none;
}

.popover {
  position: fixed;
  top: 0;
  left: 0;
  /* Never wider than the viewport inset by the clamp's 8px on each side. */
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  overflow-wrap: anywhere;
  pointer-events: auto;
  z-index: var(--z-tooltip);
}

.popover[hidden] {
  display: none;
}

/* The status-chip toggletip reads as a slightly denser status panel. */
.popover[data-kind="toggletip"] {
  white-space: normal;
}

.popover[data-kind="tooltip"] {
  white-space: normal;
}

/* ------------------------------------------------------------------------
 * The sector hero's hourly-volume popover (homepage redesign §4).
 *
 * A SMALL dialog (~340 px) anchored to one sector bar: the hour-by-hour
 * RVOL chart for that sector ETF — every bar carrying its RVOL value ABOVE
 * it and its hour label (ET) UNDER it, the busiest hour highlighted, the
 * 1.0x baseline dashed and tagged — then two tidy lines (the busiest hour,
 * and the price change with its figure coloured by direction) and a link to
 * the symbol's public page. role=dialog, non-modal
 * (views/sector-hero-popover.js). It is fixed-layer bubble styling, so it
 * lives HERE rather than in a view sheet — the same policy as the shared
 * tooltip above. Tokens only; the pointer and the bars read one CSS custom
 * property each (--shp-arrow, --shp-r) from the placement maths and the
 * chart, and the 1.0x rule reads --shp-ref (the usual ratio).
 * ---------------------------------------------------------------------- */

.sh-pop {
  position: fixed;
  z-index: var(--z-tooltip);
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-4) 18px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  /* One short fade/scale on open — quiet motion, none under reduced. */
  animation: sh-pop-in var(--dur-fast) ease-out both;
}

/* The pointer, at the bar the popover belongs to (--shp-arrow from the
   placement maths): a rotated square wearing the popover's own edge. */
.sh-pop::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: calc(var(--shp-arrow, 50%) - 4.5px);
  background: var(--surface);
  transform: rotate(45deg);
}

.sh-pop.is-below::after {
  top: -5px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.sh-pop.is-above::after {
  bottom: -5px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* The title: the sector name and its ticker at the top of the dialog — and
   its accessible name (aria-labelledby). The name sits in --text, the ticker
   in --text-muted; sentence case, no caps. */
.sh-pop-title {
  margin: 0 0 calc(var(--space-3) + 2px);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.sh-pop-title-ticker {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The session day of a chart that is NOT today's (on weekends and holidays
   the server answers with the previous session): a quiet date above the
   chart, so history is never presented as the current day. The current
   session carries no label. */
.sh-pop-date {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The hour-by-hour RVOL chart. Three fixed bands per column — value (20px)
   | bars (120px) | hour (20px) — so every bar height is its RVOL's share of
   one 120px chart height, the value label hugs the top of its own bar, and
   every bar keeps its hour label underneath. The busiest hour draws in
   accent at full strength (value in ink); the others at reduced opacity. */
.sh-pop-chart {
  position: relative;
}

.sh-pop-cols {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(var(--space-1) + 2px);
}

.sh-pop-hour {
  display: grid;
  grid-template-rows: var(--space-5) 120px var(--space-5);
  justify-items: center;
  flex: 1;
  min-width: 0;
}

.sh-pop-rvol {
  align-self: end;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.sh-pop-hour.is-busiest .sh-pop-rvol {
  color: var(--text);
}

.sh-pop-bar {
  align-self: end;
  width: 62%;
  height: calc(var(--shp-r, 0) * 120px);
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  opacity: 0.4;
}

.sh-pop-hour.is-busiest .sh-pop-bar {
  opacity: 1;
}

.sh-pop-time {
  align-self: start;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The 1.0x baseline: a dashed rule at the usual ratio's height — the hour
   band plus its share of the 120px bars band — tagged at its right end. */
.sh-pop-ref {
  position: absolute;
  left: 0;
  right: 30px;
  bottom: calc(var(--space-5) + var(--shp-ref, 0.5) * 120px);
  border-top: 1px dashed var(--ref-line);
}

.sh-pop-ref-tag {
  position: absolute;
  right: -30px;
  top: -9px;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The two tidy lines under the chart: the busiest hour with its RVOL, and
   the price change — its figure coloured by direction (the text AA
   derivations, --pos/--neg, never the raw bar colours). */
.sh-pop-lines {
  margin: var(--space-4) 0 0;
}

.sh-pop-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.sh-pop-line + .sh-pop-line {
  margin-top: var(--space-1);
}

.sh-pop-line .is-in {
  color: var(--pos);
}

.sh-pop-line .is-out {
  color: var(--neg);
}

.sh-pop-link {
  display: inline-block;
  margin-top: calc(var(--space-3) + 2px);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-decoration: none;
}

/* Loading (T17): a small placeholder chart — quiet skeleton columns where
   the hour bars will land. No series colour, no "usual" line, no values. */
.sh-pop-skel {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: var(--space-8);
}

.sh-pop-skel-hour {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.sh-pop-skel-bar {
  width: 100%;
  height: 60%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--border);
}

/* The calm 'Try again' button of a spent warming retry budget (T17). */
.sh-pop-retry {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The polite live region (T17): visually hidden, but kept in the
 * accessibility tree at all times — never display:none or visibility:hidden
 * (review 3885#1), so its text changes always announce politely. */
.sh-pop-live {
  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;
}

@keyframes sh-pop-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-pop {
    animation: none;
  }
}

/* Phones: still a small popover near the row — never a full-screen sheet —
   with the link keeping its 44 px tap height. */
@media (max-width: 767.98px) {
  .sh-pop-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit-min);
  }
}