/* ======================================================================
   /unusual and /unusual/:coin — the receipts behind "coins trading
   unusually now, and what happened the last times".

   The rows themselves are public/css/unusual-rows.css (shared with the ask
   dock). This file is the two pages around them: the heading, the price line
   with each time marked on it, the tally against an ordinary day, and the
   table of every time.

   Tokens: terminal-tokens.css. Colour is state: mint up or bought, coral
   down or sold, gold out of the ordinary. Direction always has an arrow or a
   sign as well.
   ====================================================================== */

.up-wrap { max-width: 1000px; margin: 0 auto; padding: 26px 16px 72px; color: var(--tt-text, #F4F1EC); }
.up-wrap ::selection { background: rgba(238,90,44,0.32); color: var(--tt-text, #F4F1EC); }
.up-wrap a:focus-visible { outline: 2px solid var(--tt-accent-text, #FF8A5C); outline-offset: 2px; border-radius: 4px; }

.up-crumb { font-size: 0.8rem; color: var(--tt-text-dim-text, #8A847C); margin: 0 0 10px; }
.up-crumb a { color: var(--tt-text-muted, #A8A29B); text-decoration: none; }
.up-crumb a:hover { color: var(--tt-accent-text, #FF8A5C); }

.up-head h1 {
    font-family: var(--tt-display, system-ui); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08;
    font-size: 2.1rem; margin: 0 0 10px; text-wrap: balance;
}
.up-head p { margin: 0; max-width: 68ch; font-size: 0.98rem; line-height: 1.55; color: var(--tt-text-muted, #A8A29B); }
.up-head p b { color: var(--tt-text, #F4F1EC); font-weight: 700; }

/* ── the state right now, one line ───────────────────────────────────── */
.up-now {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 20px 0 0;
    font-size: 0.95rem; color: var(--tt-text-muted, #A8A29B);
}
.up-now b { color: var(--tt-text, #F4F1EC); font-weight: 700; }
.up-now .up-gold { color: var(--tt-gold, #D8A33A); font-family: var(--tt-mono); font-weight: 800; }
.up-now-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tt-text-dim, #7C766F); }
.up-now.is-live .up-now-dot { background: var(--tt-up, #37D98A); }
.up-buy { color: var(--tt-up, #37D98A); }
.up-sell { color: var(--tt-down-text, #FF7E8E); }

/* ── sections ────────────────────────────────────────────────────────── */
.up-sec { margin: 40px 0 0; }
.up-sec > h2 { font-family: var(--tt-sans, inherit); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.up-sec > .up-sub { margin: 0 0 14px; font-size: 0.84rem; color: var(--tt-text-dim-text, #8A847C); max-width: 70ch; }
.up-panel { border: 1px solid var(--tt-border, rgba(244,241,236,0.10)); border-radius: 10px; background: var(--tt-panel-solid, #121111); padding: 14px 16px; }

/* ── the price line, with each unusual time marked on it ─────────────── */
.up-chart { position: relative; }
.up-plot { position: relative; }
.up-chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.up-chart-line { fill: none; stroke: var(--tt-text-muted, #A8A29B); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.up-chart-mark { stroke: var(--tt-panel-solid, #121111); stroke-width: 2; vector-effect: non-scaling-stroke; }
.up-chart-mark.is-buy { fill: var(--tt-up, #37D98A); }
.up-chart-mark.is-sell { fill: var(--tt-down, #FA5772); }
.up-chart-ax { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--tt-mono); font-size: 0.7rem; color: var(--tt-text-dim-text, #8A847C); }
.up-chart-y { position: absolute; right: 0; font-family: var(--tt-mono); font-size: 0.7rem; color: var(--tt-text-dim-text, #8A847C); background: var(--tt-panel-solid, #121111); padding: 0 0 0 6px; }
.up-chart-y.is-hi { top: -4px; }
.up-chart-y.is-lo { bottom: 4px; }
.up-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 0.8rem; color: var(--tt-text-muted, #A8A29B); }
.up-key i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.up-key .k-buy { background: var(--tt-up, #37D98A); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.up-key .k-sell { background: var(--tt-down, #FA5772); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.up-key .k-up { background: var(--tt-up, #37D98A); border-radius: 2px; }
.up-key .k-flat { background: var(--tt-text-muted, #A8A29B); border-radius: 2px; }
.up-key .k-down { background: var(--tt-down, #FA5772); border-radius: 2px; }
.up-key .k-none { border: 1px dashed var(--tt-text-dim-text, #8A847C); border-radius: 2px; box-sizing: border-box; }

/* ── the tally: these times against an ordinary day ──────────────────── */
.up-tally { display: grid; gap: 16px; }
.up-tally-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.up-tally-l { font-size: 0.9rem; color: var(--tt-text-muted, #A8A29B); }
.up-tally-l b { color: var(--tt-text, #F4F1EC); font-weight: 700; }
.up-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: rgba(244,241,236,0.05); }
.up-bar span { min-width: 4px; }
.up-bar .s-up { background: var(--tt-up, #37D98A); }
.up-bar .s-flat { background: var(--tt-text-muted, #A8A29B); }
.up-bar .s-down { background: var(--tt-down, #FA5772); }
.up-bar .s-none { background: repeating-linear-gradient(135deg, rgba(244,241,236,0.22) 0 3px, rgba(244,241,236,0.07) 3px 6px); }
.up-tally-n { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.8rem; color: var(--tt-text-dim-text, #8A847C); font-variant-numeric: tabular-nums; }
.up-tally-n b { font-family: var(--tt-mono); color: var(--tt-text, #F4F1EC); }
.up-tally-row.is-usual .up-bar { height: 8px; opacity: 0.8; }
.up-tally-row.is-usual { padding-top: 16px; border-top: 1px solid var(--tt-border-soft, rgba(244,241,236,0.055)); }

/* ── every time: the receipts ────────────────────────────────────────── */
.up-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.up-table th {
    text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--tt-text-dim-text, #8A847C); padding: 0 12px 9px 0; white-space: nowrap;
}
.up-table td { padding: 11px 12px 11px 0; border-top: 1px solid var(--tt-border-soft, rgba(244,241,236,0.055)); vertical-align: middle; }
.up-table th:last-child, .up-table td:last-child { padding-right: 0; }
.up-table .num { text-align: right; font-family: var(--tt-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-table th.num { font-family: inherit; }
.up-when { display: block; font-family: var(--tt-mono); font-size: 0.82rem; color: var(--tt-text, #F4F1EC); white-space: nowrap; }
.up-ago { display: block; font-size: 0.74rem; color: var(--tt-text-dim-text, #8A847C); }
.up-side { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.up-side svg, .up-mv svg { width: 11px; height: 11px; flex: none; }
.up-cur { margin-left: 8px; font-family: var(--tt-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-up, #37D98A); background: var(--tt-up-soft, rgba(55,217,138,0.11)); border-radius: 999px; padding: 2px 7px; }
.up-mult { font-family: var(--tt-mono); font-weight: 800; color: var(--tt-gold, #D8A33A); }
.up-usd { display: block; font-size: 0.74rem; color: var(--tt-text-dim-text, #8A847C); font-family: var(--tt-mono); }
.up-mv { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.up-mv.is-up { color: var(--tt-up, #37D98A); }
.up-mv.is-down { color: var(--tt-down-text, #FF7E8E); }
.up-mv.is-flat { color: var(--tt-text-muted, #A8A29B); }
/* No price is not a move: plain words, never a zero. */
.up-none { font-family: var(--tt-sans, inherit); font-size: 0.78rem; font-weight: 500; color: var(--tt-text-dim-text, #8A847C); }

.up-empty { margin: 0; font-size: 0.95rem; color: var(--tt-text-muted, #A8A29B); }
.up-foot { margin: 36px 0 0; display: grid; gap: 10px; font-size: 0.84rem; line-height: 1.55; color: var(--tt-text-dim-text, #8A847C); max-width: 72ch; }
.up-foot p { margin: 0; }
.up-foot b { color: var(--tt-text-muted, #A8A29B); font-weight: 600; }
.up-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; font-size: 0.9rem; }
.up-links a, .up-held a { color: var(--tt-accent-text, #FF8A5C); text-decoration: none; font-weight: 600; }
.up-links a:hover, .up-held a:hover { text-decoration: underline; text-underline-offset: 3px; }
.up-held { margin: 12px 0 0; font-size: 0.82rem; color: var(--tt-text-dim-text, #8A847C); }

@media (max-width: 720px) {
    .up-head h1 { font-size: 1.6rem; }
    .up-tally-row { grid-template-columns: minmax(0, 1fr); }
    .up-tally-n { grid-column: 1; }
    .up-chart svg { height: 170px; }
    /* The table becomes one block per time: when and what on top, then the
       price and the two moves in a row, each under its own small label. */
    .up-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .up-table, .up-table tbody { display: block; }
    .up-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 13px 0; border-top: 1px solid var(--tt-border-soft, rgba(244,241,236,0.055)); }
    .up-table tr:first-child { border-top: 0; padding-top: 0; }
    .up-table td { display: block; padding: 0; border: 0; text-align: left; }
    .up-table td.c-when { grid-column: 1 / span 2; grid-row: 1; }
    .up-table td.c-size { grid-column: 3; grid-row: 1; text-align: right; white-space: normal; min-width: 0; }
    .up-table td.c-size .up-usd { overflow-wrap: anywhere; }
    .up-table tr > td { min-width: 0; }
    .up-table .up-when { white-space: normal; }
    .up-table td.c-what { grid-column: 1 / -1; grid-row: 2; }
    .up-table.is-held td.c-when { grid-column: 1 / -1; }
    /* With the four-hour look there are four figures to a row. */
    .up-table.has-h4 tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; }
    .up-table.has-h4 td.c-when { grid-column: 1 / span 3; }
    .up-table.has-h4 td.c-size { grid-column: 4; }
    .up-table.has-h4.is-held td.c-when { grid-column: 1 / -1; }
    .up-table.has-h4 td.num { font-size: 0.8rem; }
    .up-table td.num { text-align: left; }
    .up-table td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font-family: var(--tt-sans, inherit); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tt-text-dim-text, #8A847C); }
}

@media (prefers-contrast: more) {
    .up-table td, .up-table tr { border-top-color: rgba(244,241,236,0.3); }
    .up-foot, .up-sub, .up-ago, .up-usd, .up-tally-n { color: var(--tt-text-muted, #A8A29B); }
}

/* Marks on the price line: HTML over the stretched SVG, so a triangle stays a
   triangle at any width. Up-pointing mint for buying, down-pointing coral for
   selling: shape carries it as well as colour. */
.up-mk { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.up-mk.is-buy { background: var(--tt-up, #37D98A); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.up-mk.is-sell { background: var(--tt-down, #FA5772); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* [G 2026-10-12] "Tell me the next time": the house alert control (tinted, no
   outline: cl-refine.css body .sg-arm), sized as the page's one action. */
.up-arm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0 0; }
.up-arm-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
    color: var(--tt-accent-text, #FF8A5C); font: 700 0.86rem var(--tt-sans, system-ui, sans-serif); cursor: pointer;
    transition: background-color 0.18s var(--tt-ease-out, ease-out);
}
body .up-arm-btn:hover { background: rgba(238,90,44,0.24); }
body .up-arm-btn.is-on { background: rgba(238,90,44,0.32); color: #FFB08C; }
.up-arm-btn:disabled { opacity: 0.6; cursor: default; }
.up-arm-note { font-size: 0.8rem; color: var(--tt-text-muted, #A8A29B); }
.up-arm-note[hidden] { display: none; }
.up-held-note { color: var(--tt-text-dim-text, #8A847C); }
@media (pointer: coarse) { .up-arm-btn { min-height: 44px; } }
/* [G 2026-10-12] A price counted on Hyperliquid's hourly prices says so; the method is one collapsed block. */
.up-src { display: block; font: 400 0.68rem var(--tt-sans, system-ui, sans-serif); color: var(--tt-text-dim-text, #8A847C); }
.up-how { margin-top: 8px; font-size: 0.82rem; color: var(--tt-text-muted, #A8A29B); max-width: 78ch; }
.up-how > summary { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; color: var(--tt-accent-text, #FF8A5C); cursor: pointer; list-style-position: inside; }
.up-how > summary:hover { color: var(--tt-text, #F4F1EC); }
.up-how p { margin: 6px 0 0; line-height: 1.5; }