/* Nova Tools pages — site/tools.ejs + js/nova/nova-tools.js. Phone layout: nova-mobile.css.
   Flat on the page ink like the rest of the account area: no cards, no framed controls —
   hairlines, weight and the white active marker carry the structure. */
.tl {
  --tl-row: 60px;
  --tl-cell: 52px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0;
}
.tl > * { min-width: 0; }

/* ---------- Tool switcher: the three tools as the page's own heading row ---------- */
.tl-tabs { display: flex; gap: 32px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tl-tabs::-webkit-scrollbar { display: none; }
.tl-tabs__a {
  position: relative; padding: 4px 0 16px; white-space: nowrap;
  font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; color: var(--faint);
  transition: color .15s ease;
}
.tl-tabs__a:hover { color: var(--stone); }
.tl-tabs__a.is-on { color: var(--bone); }
.tl-tabs__a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bone); }
.tl-tabs__short { display: none; }
.tl-tabs__a:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; border-radius: 2px; }

/* ---------- Empty / unavailable ---------- */
.tl-empty { padding: 64px 16px; text-align: center; }
.tl-empty[hidden] { display: none; }
.tl-empty--page { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tl-empty__t { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--bone); }
.tl-empty__s { margin: 6px auto 0; max-width: 44ch; font-size: 14px; line-height: 22px; color: var(--stone); }
.tl-empty__b {
  display: inline-flex; align-items: center; height: 40px; margin-top: 20px; padding: 0 20px; border: 0; border-radius: var(--radius);
  background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tl-empty__b:hover { background: var(--btn-hover); color: var(--btn-ink); }

/* ================= Market screener ================= */
.scr-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.scr-scroll::-webkit-scrollbar { display: none; }
.scr-t { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.scr-t th, .scr-t td { padding: 0 12px; text-align: left; white-space: nowrap; }
.scr-t th:first-child, .scr-t td:first-child { padding-left: 0; }
.scr-t th:last-child, .scr-t td:last-child { padding-right: 0; }
.scr-t thead th { height: 44px; font-size: 12px; font-weight: 500; color: var(--stone); }
.scr-t thead button {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.scr-t thead button:hover { color: var(--bone); }
.scr-t thead button:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; border-radius: 2px; }
.scr-t thead button svg { opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.scr-t thead button:hover svg { opacity: .5; }
.scr-t th[aria-sort="descending"] button, .scr-t th[aria-sort="ascending"] button { color: var(--bone); }
.scr-t th[aria-sort="descending"] svg, .scr-t th[aria-sort="ascending"] svg { opacity: 1; }
.scr-t th[aria-sort="ascending"] svg { transform: rotate(180deg); }
.scr-t .num { text-align: right; }
.scr-t .num button { flex-direction: row-reverse; }

.scr-t tbody tr { height: var(--tl-row); cursor: pointer; transition: background-color .12s ease; }
.scr-t tbody tr:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.scr-t td { color: var(--bone); }
.scr-t__n { width: 36px; color: var(--faint) !important; font-size: 12px; }
.scr-asset { display: flex; align-items: center; gap: 12px; }
.scr-t .asset-ico img { width: 32px; height: 32px; }
.scr-coin { display: grid; line-height: 20px; color: var(--bone); }
.scr-coin:hover { color: var(--bone); }
.scr-coin:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; border-radius: 2px; }
.scr-coin b { font-size: 14px; font-weight: 600; }
.scr-coin span { font-size: 12px; line-height: 16px; color: var(--stone); }
.scr-t__px { font-weight: 600; }
.scr-t .is-up { color: var(--signal); }
.scr-t .is-down { color: var(--down); }

/* Tick flash on the price cell when a poll moves it. */
.scr-t__px.is-tick-up { animation: scr-tick-up .9s ease-out; }
.scr-t__px.is-tick-down { animation: scr-tick-down .9s ease-out; }
@keyframes scr-tick-up { from { background: color-mix(in srgb, var(--signal) 22%, transparent); } }
@keyframes scr-tick-down { from { background: color-mix(in srgb, var(--down) 22%, transparent); } }

/* ================= Cross rates / heat map ================= */
.fx-m { display: none; } /* phone-only list view, see nova-mobile.css */
.fx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; min-height: 44px; margin-bottom: 16px; }
.fx-read { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0; font-size: 14px; line-height: 20px; color: var(--stone); }
.fx-read__pair { display: inline-flex; align-items: center; gap: 6px; color: var(--bone); }
.fx-read__pair b { font-size: 16px; font-weight: 600; }
.fx-read__sep { color: var(--faint); margin: 0 2px; }
.fx-read__v { font-size: 16px; font-weight: 500; color: var(--bone); }
.fx-read__chg { font-weight: 600; color: var(--stone); }
.fx-read__chg.is-up { color: var(--signal); }
.fx-read__chg.is-down { color: var(--down); }
.fx-read__since { font-size: 12px; color: var(--faint); }

.fx-legend { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--stone); }
.fx-legend i {
  width: 160px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--down), color-mix(in oklab, var(--down) 25%, var(--panel)) 42%, var(--panel-2) 50%, color-mix(in oklab, var(--signal) 25%, var(--panel)) 58%, var(--signal));
}

.fx-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fx-scroll::-webkit-scrollbar { display: none; }
.fx-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; line-height: 20px; }
.fx-t th, .fx-t td { height: var(--tl-cell); padding: 0 6px; text-align: center; white-space: nowrap; }
.fx-t thead th { width: auto; font-size: 12px; font-weight: 600; color: var(--stone); border-bottom: 1px solid var(--line); }
.fx-t__corner { width: 88px; border-bottom: 1px solid var(--line); }
.fx-t tbody th { text-align: left; padding-left: 0; font-size: 12px; font-weight: 600; color: var(--stone); }
.fx-cur { display: inline-flex; align-items: center; gap: 8px; }
.fx-flag { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.fx-t th.is-cross { color: var(--bone); }
.fx-t td { color: var(--bone); font-variant-numeric: tabular-nums; outline: none; cursor: default; }

/* Cross rates: each rate on its own neutral tile (2px gutter, same grid as the heat map);
   the hovered row + column lighten as a crosshair. */
.fx--rates .fx-t { border-spacing: 2px; }
.fx--rates .fx-t thead th, .fx--rates .fx-t__corner { border-bottom: 0; }
.fx--rates .fx-t td { border-radius: var(--radius-sm); background: var(--panel); transition: background-color .12s ease; }
.fx--rates .fx-t td.is-cross { background: var(--panel-2); }
.fx--rates .fx-t td.is-focus { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--bone); }
.fx--rates .fx-t td.fx-t__corner { background: none; }
.fx--rates .fx-t td.fx-t__self { background: repeating-linear-gradient(135deg, var(--panel) 0 5px, var(--line-2) 5px 6px); }

/* Heat map: tiles with a 2px gutter, strength of colour = size of the move against the day's range. */
.fx--heat .fx-t { border-spacing: 2px; }
.fx--heat .fx-t thead th { border-bottom: 0; }
.fx--heat .fx-t__corner { border-bottom: 0; }
.fx--heat .fx-t td { border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; transition: box-shadow .12s ease; }
.fx--heat .fx-t td.is-up { background: color-mix(in oklab, var(--signal) calc(12% + var(--s) * 68%), var(--panel)); }
.fx--heat .fx-t td.is-down { background: color-mix(in oklab, var(--down) calc(12% + var(--s) * 68%), var(--panel)); }
.fx--heat .fx-t__self { background: var(--panel); }
.fx--heat .fx-t td.is-focus { box-shadow: inset 0 0 0 2px var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .tl-tabs__a, .scr-t tbody tr, .scr-t thead button svg, .fx-t td { transition: none; }
  .scr-t__px.is-tick-up, .scr-t__px.is-tick-down { animation: none; }
}