/* THE WATCHLIST, as a table.
 *
 * Its own sheet, not a block in the middle of panel.css. The rules were sharing a file with the
 * order book, the web directory and the new-tab page, and the one bug this component has had twice
 * came from exactly that: `.wl-row` is a name another block in the same stylesheet also used, its
 * flex rule won on specificity order, and the column headings stood over nothing. A component
 * whose class names collide with its neighbours' should not be filed next to them.
 *
 * FLEX, NOT GRID, and the reason is the column menu. Four of the six columns can be turned off and
 * three more fold themselves in a narrow cell, which as a grid is a dozen templates to keep in
 * agreement with each other. As a row of fixed-basis cells there is one rule per column, a hidden
 * cell simply leaves, and the header - built from the same classes - cannot drift out of line with
 * the rows the way the old one did.
 *
 * The numbers are the table, so they get fixed widths and TABULAR FIGURES. Proportional digits
 * were part of why this read as a web page: every price change reflowed its own column by a pixel
 * or two, which the eye registers as the whole list twitching even when it cannot say why.
 *
 * NO RULE BETWEEN THE ROWS. A line under every row of a list this dense draws twenty horizontals
 * across a panel and the eye reads the lines before it reads the prices. Alignment does the work
 * instead: one left edge for the marks, one right edge for each figure, and the only borders in
 * the component are the ones that separate it from its own chrome.
 */

.wl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}

/* ------------------------------------------------------------------- head */

/* .wl-head geometry now comes from the shared .panel-head base (panel.css). */
/* .wl-head geometry now comes from the shared .panel-head base (panel.css). */
.wl-head {
  flex: 0 0 auto;
}
/* The list's NAME is the title, and it is a control - so it wears a chevron and lights under the
   pointer, rather than looking like a heading someone can click for no reason. */
.wl-listname {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 6px 0 8px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  font: var(--w-semi) var(--t-md) var(--ui);
  cursor: pointer;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
}
.wl-listname:hover { background: var(--sel); }
.wl-listname svg { color: var(--ink-faint); flex: 0 0 auto; }
.wl-count {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font: var(--t-sm) var(--ui);
  font-variant-numeric: tabular-nums;
  margin-left: -4px;
}
.wl-tools { margin-left: auto; display: flex; align-items: center; gap: 1px; }
/* The dense rung, which is what the filter field in the same row stands on. At 26 against its 24
   the one row of chrome this panel has did not line up. */
.wl-tool {
  width: var(--c-sm);
  height: var(--c-sm);
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.wl-tool:hover { background: var(--sel); color: var(--ink); }

/* The filter is not furniture: it appears when it is asked for - `/`, a letter typed at the list,
   or Find in the menu - and takes its row back when it is dismissed. */
.wl-find { display: none; }
.wl.finding .wl-find {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.wl-search {
  flex: 1 1 auto;
  min-width: 40px;
  height: var(--c-sm);
  padding: 0 8px;
  font: var(--t-md) var(--ui);
}
.wl-search::placeholder { color: var(--ink-faint); }
.wl-findx {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.wl-findx:hover { background: var(--sel); color: var(--ink); }

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

.wl-body { flex: 1 1 auto; min-height: 0; overflow: auto; outline: 0; }
.wl-row {
  position: relative;
  overflow: hidden;
  align-items: center;
  height: 28px;
  font: var(--t-md) var(--ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  /* Horizontal belongs to the swipe; vertical stays the panel's own scroll. Without this the
     browser claims the first horizontal pixels for a scroll attempt nobody wanted. */
  touch-action: pan-y;
}
/* The row's contents ride one inner box so they can SLIDE over the delete plate that waits
   underneath - the plate is a child of the row, the slide is a transform on the box above it. */
.wl-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
  width: 100%;
  height: 100%;
  background: var(--panel);
  transition: transform 160ms var(--ease);
}
.wl-row.swiping .wl-in { transition: none; }
.wl-del {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 12px 0 0;
  background: var(--sell, #ef5350);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: var(--t-md) var(--ui);
  -webkit-tap-highlight-color: transparent;
}
.wl-del:active { filter: brightness(1.12); }
/* `display: flex` on the row beats the browser's own `[hidden] { display: none }`, so the filter
   set hidden on rows that then stayed on screen - the search box looked broken while doing exactly
   what it was told. Any class that sets display has to answer hidden itself. */
.wl-row[hidden] { display: none; }
.wl-row:hover .wl-in { background: var(--sel); }
/* The row the panel is standing on is RINGED rather than filled, so a selection and a hover can be
   read at the same time - which is what keyboard navigation over a list under a pointer needs. */
.wl-row.on { box-shadow: inset 0 0 0 1px var(--line-2); }
.wl-row.dragging { opacity: .55; background: var(--panel-2); }
.wl-dragging .wl-row { cursor: grabbing; }

.wl-colhead {
  height: 24px;
  cursor: default;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.wl-colhead:hover { background: var(--panel); }
.wl-sortable { cursor: pointer; display: flex; align-items: center; gap: 3px; }
.wl-last.wl-sortable,
.wl-chg.wl-sortable,
.wl-pct.wl-sortable,
.wl-vol.wl-sortable { justify-content: flex-end; }
.wl-sortable:hover { color: var(--ink); }
.wl-caret { opacity: .8; }

/* ---- the columns themselves; every width lives here and nowhere else ---- */
.wl-sym { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.wl-last { flex: 0 0 84px; text-align: right; color: var(--ink); }
.wl-chg { flex: 0 0 64px; text-align: right; color: var(--ink-dim); }
.wl-pct { flex: 0 0 58px; text-align: right; color: var(--ink-dim); }
.wl-spark { flex: 0 0 58px; height: 18px; }
.wl-spark canvas { display: block; width: 100%; height: 100%; }
.wl-vol { flex: 0 0 66px; text-align: right; color: var(--ink-faint); font-size: var(--t-sm); }
.wl-chg.up, .wl-pct.up { color: var(--buy-hi); }
.wl-chg.down, .wl-pct.down { color: var(--sell-hi); }
/* The digits that moved. The tint itself is an animation on the element, so this rule only has to
   keep the span from inheriting anything of its own - see writePrice in the view. */
.wl-tick { color: inherit; }

/* Turned off in the menu, or folded because the cell is too narrow to hold them. The price and the
   percentage are never in this list: a watchlist without them is a list of names. */
.wl.no-chg .wl-chg,
.wl.no-pct .wl-pct,
.wl.no-spark .wl-spark,
.wl.no-turnover .wl-vol,
.wl.narrow .wl-vol,
.wl.narrow .wl-spark,
.wl.tiny .wl-chg { display: none; }

/* ---- the mark, and the name beside it ---- */

/* THE ART IS ITS OWN SHAPE. A coin's mark is already a disc, and setting one inside a bordered
   square is the double container that reads as a template rather than as a table - so the box is
   drawn only for the initials, which need an edge to be a mark rather than three loose letters.
   Both are the same size, so the column has one left edge either way. */
.wl-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wl-initials {
  width: 100%;
  height: 100%;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font: var(--w-medium) var(--t-2xs)/1 var(--ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wl-mark.art .wl-initials { display: none; }
.wl-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}
.wl-name {
  min-width: 0;
  color: var(--ink);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-ticker);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only drawn where the same symbol is in the list twice on two venues - see build(). */
/* A TAG hanging off a name, not a caption over a group - so it takes the badge tracking. The
   label tracking belongs to the one composition in style.css, and a mark borrowing it is what
   makes a row of tags read as a row of headings. */
.wl-venue {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font: var(--t-2xs) var(--ui);
  text-transform: uppercase;
  letter-spacing: var(--tr-micro);
}

/* ---- sections ---- */

/* A heading inside a table of numbers has to be quieter than the numbers, or the list reads as a
   stack of headings with prices between them. Smaller, dimmer, uppercase, and no ground of its
   own - the fold chevron is what says it can be operated. */
.wl-sec {
  height: 22px;
  gap: 6px;
  padding-left: 6px;
}
.wl-sec:hover { background: var(--sel); }
.wl-sec .wl-fold { flex: 0 0 auto; transition: transform var(--t-tap) var(--ease); }
.wl-sec.folded .wl-fold { transform: rotate(-90deg); }
.wl-secname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-seccount { flex: 0 0 auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.wl-empty { padding: 18px 12px; color: var(--ink-dim); font: var(--t-sm) var(--ui); }

/* ---- the foot: when these numbers are from ---- */
.wl-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-faint);
  font: var(--t-xs) var(--ui);
  font-variant-numeric: tabular-nums;
}
.wl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--buy-hi);
}
/* Amber, not red: the list is not broken, it is behind. Red here would read as an outage on the
   first poll a phone drops. */
.wl-dot.stale { background: #d0a017; }

/* A finger needs a taller row, and a hover state that never arrives - so the marks and the figures
   are given the room instead. */
@media (pointer: coarse) {
  .wl-row { height: 40px; }
  .wl-sec { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-sec .wl-fold { transition: none; }
}