/* Compare page — Redesign Phase 3 (FRONTEND_ARCHITECTURE_PLAN.md §3.4, T18).
 *
 * Only rules styles.css does not already paint (the shared `.panel`, `.chips`,
 * `.chip`, `.tabs`, `.btn`, `.badge`, `.empty-note` and `.chart` shells stay
 * in charge of their own look). Colour, type, spacing, radius and motion come
 * only from tokens.css custom properties: no hex and no functional or named
 * colour literal lives here (transparent, currentColor and inherit are
 * allowed), and
 * no raw length equals a token value. Series dots take their hue from
 * var(--series-N) — the same palette slots lib/charts.js colorMap uses — so a
 * theme flip repaints them and no hue is written down.
 *
 * Loaded by views/compare.js, which appends one <link> to <head> on mount.
 */

/* ---- page frame ----------------------------------------------------------- */

.compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compare-banner:empty {
  display: none;
}

/* ---- symbols row ---------------------------------------------------------- */

.compare-symbols {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.compare-chip {
  gap: var(--space-1);
  padding-inline-end: var(--space-1);
}

.compare-chip-name {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
}

/* Series dots: one hue per palette slot, painted from the theme tokens. */
.compare-chip .swatch.s1 { background: var(--series-1); }
.compare-chip .swatch.s2 { background: var(--series-2); }
.compare-chip .swatch.s3 { background: var(--series-3); }
.compare-chip .swatch.s4 { background: var(--series-4); }
.compare-chip .swatch.s5 { background: var(--series-5); }
.compare-chip .swatch.s6 { background: var(--series-6); }

.compare-chip-remove {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  padding: 0 var(--space-1);
  margin-inline-start: var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.compare-chip-remove:hover {
  color: var(--ink);
  background: var(--panel-border);
}

.compare-chip-remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ---- add-from-watchlist menu button --------------------------------------- */

.compare-add-wrap {
  position: relative;
  margin-inline-start: auto;
}

.compare-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-1));
  z-index: 5;
  min-width: calc(var(--space-9) * 3);
  max-height: var(--space-9);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}

.compare-menu[hidden] {
  display: none;
}

.compare-menu-item {
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-mono);
  text-align: start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.compare-menu-item:hover {
  background: var(--panel-border);
}

.compare-menu-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.compare-menu-empty {
  padding: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-label);
}

/* ---- chart + table sections ----------------------------------------------- */

.compare-chart,
.compare-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-chart-box,
.compare-table-box {
  min-width: 0;
}

.compare-table .rvol-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* The Hour / Time cell: the slot range (or the mark) and its length tag are
   inline children of one .compare-hour span, so the row's flex gap never
   separates them — they read "09:30–10:0030 min". The cell gets its own
   baseline gap at EVERY width (the phone row below only adds the wrap). */
.compare-hour {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ---- phone (MOBILE_PLAN.md §3.4) -------------------------------------------
   Below 768: the header actions stack (page-header.css) and each
   SegmentedControl fills its row (segmented-control.css); the symbol chips
   scroll in their own region; the Add trigger shortens; and the hourly table
   is the DataTable list mode whose row is the slot line plus a wrapping grid
   of every symbol's figure. At 768 and wider every rule here is inert and
   the page is exactly the desktop layout. */

@media (max-width: 767.98px) {
  .compare {
    gap: var(--space-3);
  }

  /* One line — the label, the scrolling chips, "+ Add". The chips stay on a
     single line inside the scroller so the strip overflows and scrolls (the
     page itself never scrolls horizontally). */
  .compare-symbols {
    flex-wrap: nowrap;
  }

  .compare-symbols > .small {
    flex: none;
  }

  .compare-symbols .scroll-x {
    flex: 1 1 auto;
    min-width: 0;
  }

  .compare-symbols .scroll-x .chips {
    flex-wrap: nowrap;
    width: max-content;
  }

  .compare-add-wrap {
    margin-inline-start: 0;
    flex: none;
  }

  .compare-chip {
    min-height: var(--hit-min);
  }

  /* The hourly table's compact list row (DataTable list mode): the slot line,
     then every symbol's figure in a wrapping grid — nothing is hidden. */
  .compare-mrow {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .compare-mrow-hour {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  /* The slot label / length-tag gap lives on the base `.compare-hour` rule
     above — the phone cell uses it too, no restyle needed here. */

  .compare-mrow-date {
    color: var(--muted);
    font-size: var(--fs-meta);
  }

  .compare-mrow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr));
    gap: var(--space-1) var(--space-2);
  }

  .compare-mrow-val {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
    min-width: 0;
  }

  .compare-mrow-sym {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
  }
}

/* Pattern-1 hit extension (MOBILE_PLAN.md §2.9): an invisible 44px square on
   the chip ×, centred on it — never visible, never moving layout. Adjacent
   chips are far enough apart that the squares cannot overlap. Desktop (fine
   pointer at ≥768) matches neither condition and gets no rule. */

@media (pointer: coarse), (max-width: 767.98px) {
  .compare-chip-remove {
    position: relative;
  }

  .compare-chip-remove::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, var(--hit-min));
    height: max(100%, var(--hit-min));
  }
}

/* ---- the phone Add sheet (§3.4) --------------------------------------------
   Only opened below 768; sheet.css paints the dialog chrome and the global
   phone rules give the search field its 16px text and 44px height. Rows
   reuse the shared .compare-menu-item from the desktop dropdown, stretched
   to full-width 44px rows. */

.compare-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.compare-sheet .compare-menu-item {
  width: 100%;
  min-height: var(--hit-min);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: start;
  padding-inline: var(--space-2);
}

.compare-sheet .compare-menu-empty {
  padding-inline: var(--space-2);
}

/* The Add sheet only ever opens below 768 (views/compare.js openAddSheet is
   phone-gated); the skin rules are media-gated too, so the desktop is safe
   by CSS, not just by DOM. */
@media (max-width: 767.98px) {
  /* type="search" is not in styles.css's styled-input selector list, so without
     this the field keeps the browser's native search chrome on top of its own
     border — the double border the F1 review flagged. Same skin as the shared
     inputs (styles.css), one border, no native appearance. */
  .compare-sheet-search {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--axis);
    border-radius: var(--radius);
    font: inherit;
    padding: var(--space-1) var(--space-2);
  }

  /* Checked vs disabled (F1 review nit): the two non-tappable rows must not
     read alike. A checked row is state — full-strength ink with the ✓ and no
     hover wash; a disabled row (the comparison is full) is faded with the
     shared 0.55 disabled opacity and no hover wash. */
  .compare-menu-item--on {
    color: var(--ink);
  }

  .compare-sheet .compare-menu-item--on:hover {
    background: none;
  }

  .compare-sheet .compare-menu-item[disabled] {
    opacity: 0.55;
    cursor: default;
  }

  .compare-sheet .compare-menu-item[disabled]:hover {
    background: none;
  }
}

.compare-menu-check {
  color: var(--pos);
  font-weight: var(--fw-medium);
}