/* =========================================================================
   desk.css — the few things a still of the terminal needs that the terminal
   itself does not.

   Everything visual comes from `terminal.css` and `dashboard.css`, unchanged.
   This file only undoes the parts of a full application that make no sense
   inside a 1440px frame in somebody's hero: the space reserved for a header
   that is not here, the scrollbars, and the caret.

   If it grows past that it has stopped being a still of the terminal and
   started being a second terminal, which is the thing this was written to
   avoid.
   ========================================================================= */

/* No header above it, so nothing to make room for. `--nav-h` is what the
   ticker, the sticky panel heads and the rules page's contents list all offset
   against; zeroing it here is one line instead of a rule per offset. */
:root{ --nav-h:0px; }

body.desk{
  width:1440px;
  overflow:hidden;               /* a still does not scroll */
  background:#050505;
  cursor:default;
}
body.desk *{ cursor:default !important; }

/* Nothing is focusable and nothing is selectable, because a click that lands
   inside the frame should feel like a click on a picture. The hovers are the
   exception and they are the reason this is a live document at all. */
body.desk{ user-select:none; -webkit-user-select:none; }
body.desk :focus{ outline:none; }

/* The scrollbars the panels would show for content taller than the frame.
   Firefox and the rest get `scrollbar-width`; WebKit needs its own. */
body.desk *{ scrollbar-width:none; }
body.desk *::-webkit-scrollbar{ width:0; height:0; }

/* ---- the chart -----------------------------------------------------------
   `#px` held a lightweight-charts canvas, which cannot be serialised. The SVG
   that replaced it has to fill the same box, and the price tag has to sit on
   the mark line rather than near it — on a price chart the tag IS the claim
   that the line is at that price. Its `top` is computed by the builder from
   the line's own y. */
#px{ position:relative; }
.kchart{ display:block; width:100%; height:400px; }

/* Candles and their wicks. Two rects each, and both take the same class, so the
   colour is decided once per bar rather than once per shape. */
.k--up{ fill:var(--up, #9FE84B); }
.k--dn{ fill:var(--down, #FF4B4B); }

/* Volume. Same colours at a fifth of the weight: a histogram that competes with
   the price for attention is a histogram in the wrong place. */
.kv{ opacity:.22; }
.kv--up{ fill:var(--up, #9FE84B); }
.kv--dn{ fill:var(--down, #FF4B4B); }

/* The grid, the axis rule, and the labels.
 *
 * These are the parts that were missing when the chart "did not look real". The
 * candles were never the problem — floating candles with no price axis, no time
 * axis and no grid is a drawing OF a chart, and the eye checks for the furniture
 * before it looks at the shape. */
.kgrid{ stroke:rgba(255,255,255,.045); stroke-width:1; }
.kaxline{ stroke:rgba(255,255,255,.08); stroke-width:1; }
.kax{
  fill:#7E7A75; font-size:11px; font-family:var(--sans, system-ui);
  font-variant-numeric:tabular-nums;
}
.kax--t{ text-anchor:middle; }

/* `preserveAspectRatio:none` stretches the viewBox to the box, which is right
   for the candles and wrong for the text — it would scale the glyphs
   horizontally. `vector-effect` is the equivalent for strokes; for text the fix
   is to keep the viewBox's aspect close to the rendered one, which 1200x420
   against 770x280 is. Near enough that no letter is visibly wide. */
.kmark{
  stroke:var(--gold, #D3B07C); stroke-width:1; stroke-dasharray:4 4; opacity:.5;
  vector-effect:non-scaling-stroke;
}
.klast{
  position:absolute; right:0;
  padding:.2em .5em; border-radius:4px;
  background:var(--gold, #D3B07C); color:#0A0A0A;
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
}

/* The account equity curve, in the panel below the ticket. */
.eqc{ display:block; width:100%; height:120px; }
.eqc__area{ fill:url(#eqFade); }
.eqc__line{ fill:none; stroke:var(--gold, #D3B07C); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.eqc__floor{ stroke:var(--down, #FF4B4B); stroke-width:1; stroke-dasharray:3 3; opacity:.6; vector-effect:non-scaling-stroke; }
.eqc__tag{ display:block; margin-top:8px; font-size:11.5px; color:#7E7A75; }

/* ---- fitting a 1440x900 window ------------------------------------------
 *
 * The terminal is 1,344px tall at 1440 wide, because it is an application and an
 * application uses the height it is given. A window in a hero is a fixed shape,
 * and 1440x1344 is very nearly square — at the landing column's width that is a
 * 1,350px-tall block, which is not a hero, it is a page.
 *
 * So the panels are capped to what a 1440x900 laptop actually shows. This is not
 * a redesign of the terminal: it is the same thing that happens when you open it
 * on a short screen, which is that the lists scroll. Here they do not scroll,
 * they simply end — the still shows the top of each, which is the part that says
 * what the panel is.
 *
 * The chart loses the most and minds it the least: 400px of candles and 280px of
 * candles read identically at this scale.
 */
.kchart{ height:280px; }

.panel--mkts{ max-height:718px; overflow:hidden; }
#book{ max-height:200px; overflow:hidden; }
#posWrap{ max-height:190px; overflow:hidden; }

/* The chart panel's own read-out row sits under the candles and is the first
   thing worth losing when the box gets shorter. */
.px__read{ display:none; }

/* ---- the crosshair -------------------------------------------------------
 *
 * Two hairlines and two labels, positioned in CSS pixels by the one script on
 * the page. The lines are `position:absolute` inside `#px`, which is already
 * `position:relative` for the last-price tag.
 *
 * `pointer-events:none` on all four: a crosshair that intercepts the pointer
 * moves away from the cursor it is following, one frame behind, forever.
 */
.xh{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .15s ease; }
.xh.is-on{ opacity:1; }

.xh__v, .xh__h{
  position:absolute; display:block; background:rgba(255,255,255,.28);
}
.xh__v{ top:0; bottom:0; width:1px; }
.xh__h{ left:0; right:0; height:1px; }

/* The read-outs sit on the axes the value belongs to — price on the right where
   the price scale is, time along the bottom where the dates are. A label that
   floats beside the cursor makes you look for the axis yourself. */
.xh__px, .xh__t{
  position:absolute;
  padding:2px 6px; border-radius:4px;
  background:#2A2724; color:#F1EEE8;
  font-size:11px; font-weight:500; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.xh__px{ right:0; transform:translateY(-50%); }
.xh__t{ bottom:0; transform:translateX(-50%); }