/* ======================================================================
   Coins trading unusually, and what happened the last times: the rows.

   Drawn by src/assets/js/lib/unusual-rows.js in two places (the ask dock and
   the home page question box), so nothing here leans on a
   host's own classes or tokens. The house tokens (terminal-tokens.css) are
   read with their hex as the fallback, because the dock and the home page do
   not always sit under the same :root.

   Colour is state, never decoration:
     mint   bought, or the price went up
     coral  sold, or the price went down
     gold   out of the ordinary (how far above its normal hour)
   and every direction also carries an arrow or a sign.
   ====================================================================== */

.ur {
    --ur-up: var(--tt-up, #37D98A);
    --ur-down: var(--tt-down, #FA5772);
    --ur-down-text: var(--tt-down-text, #FF7E8E);
    --ur-gold: var(--tt-gold, #D8A33A);
    --ur-ink: var(--tt-text, #F4F1EC);
    --ur-mut: var(--tt-text-muted, #A8A29B);
    --ur-dim: var(--tt-text-dim-text, #8A847C);
    --ur-hair: var(--tt-border-soft, rgba(244,241,236,0.07));
    --ur-accent: var(--tt-accent-text, #FF8A5C);
    --ur-mono: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
    --ur-sans: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
    container-type: inline-size;
    container-name: ur;
    display: grid;
    font-family: var(--ur-sans);
    color: var(--ur-ink);
    text-align: left;
}

.ur-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    margin: 0 -8px;
    padding: 10px 8px;
    border-top: 1px solid var(--ur-hair);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.14s var(--tt-ease-out, ease-out);
}
.ur-row:first-child { border-top: 0; }
a.ur-row:hover { background: rgba(244,241,236,0.05); }
a.ur-row:focus-visible { outline: 2px solid var(--ur-accent); outline-offset: 2px; }

.ur-ico { width: 11px; height: 11px; flex: none; }

/* ── which coin, which way, how far above normal, when ───────────────── */
.ur-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; min-width: 0; }
.ur-coin { font-family: var(--ur-mono); font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; color: var(--ur-ink); }
a.ur-row:hover .ur-coin { color: var(--ur-accent); }
.ur-what { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.is-buy .ur-what { color: var(--ur-up); }
.is-sell .ur-what { color: var(--ur-down-text); }
.is-quiet .ur-what { color: var(--ur-mut); font-weight: 600; }
.ur-mult { font-family: var(--ur-mono); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ur-gold); }
.ur-when {
    margin-left: auto;
    font-family: var(--ur-mono); font-size: 10.5px; color: var(--ur-dim); white-space: nowrap;
}
.is-live .ur-when { color: var(--ur-mut); }
.ur-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ur-up); vertical-align: 1px; }

/* ── the price since it began, and one reading of the past ───────────── */
.ur-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 16px; min-width: 0; font-size: 12px; color: var(--ur-mut); }
.ur-mv { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ur-mv .ur-ico { align-self: center; }
.ur-mv i { font-style: normal; color: var(--ur-dim); }
.ur-mv b { font-family: var(--ur-mono); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ur-mv.is-up b, .ur-mv.is-up .ur-ico { color: var(--ur-up); }
.ur-mv.is-down b, .ur-mv.is-down .ur-ico { color: var(--ur-down-text); }
.ur-mv.is-flat b { color: var(--ur-mut); }
/* No price: said in words, never drawn as a move. */
.ur-mv.is-none b { font-family: var(--ur-sans); font-weight: 600; color: var(--ur-mut); }
.ur-past { min-width: 0; font-variant-numeric: tabular-nums; }
.ur-past b { font-family: var(--ur-mono); font-weight: 800; color: var(--ur-ink); }
.ur-past b.is-up { color: var(--ur-up); }
.ur-past b.is-down { color: var(--ur-down-text); }

/* A wide card (the dock in full screen): one line per coin. */
@container ur (min-width: 560px) {
    .ur-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); column-gap: 24px; align-items: baseline; padding: 11px 8px; }
    .ur-coin { font-size: 14.5px; }
    .ur-what, .ur-mult { font-size: 13px; }
    .ur-line { font-size: 12.5px; }
    .ur-when { font-size: 11px; }
}

@media (prefers-contrast: more) {
    .ur-row { border-top-color: rgba(244,241,236,0.3); }
    .ur-when, .ur-mv i { color: var(--ur-mut); }
}