.htr-terminal{
--nv-bg:var(--paper);
--nv-panel:var(--paper-raised);
--nv-glass:rgba(10,15,26,.72);
--nv-line:var(--line);
--nv-line-2:var(--line-hard);
--nv-text:var(--ink);
--nv-muted:var(--text-dim);
--nv-dim:var(--text-faint);
--nv-green:var(--accent);
--nv-green-deep:var(--accent-bg);
--nv-green-line:var(--accent-ink);
--nv-mint:var(--accent-ink);
--nv-red:var(--bad);
--nv-amber:var(--warn);
--nv-mono:var(--mono);
--nv-display:var(--display, var(--serif));
--nv-ease:cubic-bezier(.2,.7,.2,1);
--nv-wrap:1280px;
--nv-grid:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
}.htr-terminal a{color:inherit;text-decoration:none}:where(.htr-terminal) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}.htr-terminal :focus-visible{outline:2px solid var(--nv-green);outline-offset:2px;border-radius:6px}/* ================= HEADER ================= */
.htr-terminal .up{color:var(--nv-green)}.htr-terminal kbd{font-family:var(--nv-mono);font-size:11px;color:var(--nv-muted);border:1px solid var(--nv-line-2);border-radius:5px;padding:1px 5px;line-height:16px;background:rgba(255,255,255,.03);flex:none}/* terminal switch (A) */
/* terminal chrome */
/* ================= MEGA MENUS (desktop) ================= */
/* shared: link rows + feature cards (used by mega menus and the mobile sheet) */
.htr-terminal .tm-why{margin-left:auto;font-size:11px;color:var(--nv-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@keyframes htr-chrome-grow{from{transform:scaleX(0)}}/* account dropdown */
/* ================= PALETTE, TOAST ================= */
/* ================= DEMO PAGE ================= */
.htr-terminal h1{font-family:var(--nv-display);font-weight:900;font-size:clamp(34px,5vw,56px);line-height:1;margin:0 0 12px}.htr-terminal .v.c{color:var(--nv-green);border-color:var(--nv-green-line)}/* ================= MOBILE: bottom bar + sheet ================= */
/* desktop tweaks */
@media (max-width:1240px){}@media (max-width:1080px){}/* the .mobile class is set on at ≤900px (and in phone preview) */
/* ================= TERMINAL ================= */
.htr-terminal .lk .ic{width:13px;height:13px;transition:transform .15s var(--nv-ease)}.htr-terminal .lk:hover .ic{transform:translateX(3px)}.htr-terminal .tm-grid{padding:12px 16px 52px}/* workspace bar (lives in the header's second row) */
.htr-terminal .tm-views{display:flex;gap:4px}.htr-terminal .tm-view{display:flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;border-radius:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-muted);transition:background .15s,color .15s;white-space:nowrap}.htr-terminal .tm-view kbd{font-size:10px;padding:0 4px;line-height:14px;color:var(--nv-dim)}.htr-terminal .tm-view:hover{color:var(--nv-text)}.htr-terminal .tm-view[aria-selected="true"]{background:var(--nv-green-deep);color:var(--nv-green)}.htr-terminal .tm-view[aria-selected="true"] kbd{color:var(--nv-green);border-color:var(--nv-green-line)}.htr-terminal .ws-btn .ic{width:13px;height:13px}/* instrument bar: the one selected instrument every panel follows */
.htr-terminal .tm-sel{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:32px;align-items:center;padding:14px 18px;margin-bottom:12px;border:1px solid var(--nv-line);border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 6%, transparent),rgba(255,255,255,.012) 45%)}.htr-terminal .tm-sel.pulse{animation:pulse .6s var(--nv-ease)}@keyframes pulse{0%{box-shadow:0 0 0 1px var(--nv-green),0 0 30px color-mix(in srgb, var(--accent) 25%, transparent)}100%{box-shadow:0 0 0 0 transparent}}/* fix #1497: THE MOCKUP WROTE `SYMName`, THE SITE WRITES TWO SPANS. So the ported `b` rule -- the one carrying the symbol's 30px -- matched nothing at all, while the `span` rule matched BOTH children and set the instrument the whole page is about to 12px, the size of its own caption. That is why the owner said "the asset needs to be bold big" and why fix 1492 appeared not to work: `.tm-sel-tkr` is 0-1-0 and this blanket rule is 0-2-0, so the port won silently -- the same specificity trap as fixes 1472, 1473 and 1474. Both rules are re-pointed at the classes the template actually emits, so the symbol takes the display size the mockup drew and the company name keeps its caption size. */.htr-terminal .tm-sel-id b, .htr-terminal .tm-sel-tkr{display:block;font-family:var(--nv-display);font-weight:900;font-size:var(--fs-3xl);line-height:1;margin:0}.htr-terminal .tm-sel-id .tm-sel-name{display:block;font-size:12px;color:var(--nv-muted);margin-top:6px;white-space:nowrap}/* fix #1497, same defect as the ticker above: the mockup writes the price as `` and this template writes ``, so this rule -- the only thing giving the price its size -- matched nothing, and the price fell to the 13px caption rule below. Measured live: ticker 12px, name 12px, price 13px, conviction 25px. The instrument the page is about was the smallest thing in its own bar and the score was the biggest. The one `` actually inside this container is the stale marker nested in `.tm-sel-age`, which this rule was sizing at 22px instead. */.htr-terminal .tm-sel-px .tm-sel-last{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.htr-terminal .tm-sel-px>span{display:inline-block;font-size:13px;margin-left:8px;font-variant-numeric:tabular-nums}.htr-terminal .tm-sel-age{display:block;font-size:11px;color:var(--nv-dim);margin-top:4px}.htr-terminal .tm-sel-px .tm-sel-age{display:block;margin-left:0}.htr-terminal .tm-sel-conv{display:flex;align-items:center;gap:32px;min-width:0}/* fix #1501: .tm-methods had NO rule in any of the five stylesheets. #1476 added the seven marks to the instrument bar and styled everything inside the include while leaving the container itself unstyled, so it fell to display:inline on a grid item and its contents sized themselves. tools/mockup_selfcheck.py lists it under terminal.html's orphan classes; this is the first one closed from that list by measurement rather than by reading. */.htr-terminal .tm-methods{display:flex;align-items:center;min-width:0}.htr-terminal .tm-verdict{align-self:flex-start;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:0 8px;line-height:22px;border-radius:5px;border:1px solid}.htr-terminal .tm-verdict.c{color:var(--nv-green);border-color:var(--nv-green-line);background:color-mix(in srgb, var(--good) 7%, transparent)}.htr-terminal .tm-verdict.q{color:var(--nv-amber);border-color:color-mix(in srgb, var(--nv-amber) 38%, transparent)}.htr-terminal .tm-verdict.n{color:var(--nv-red);border-color:color-mix(in srgb, var(--nv-red) 38%, transparent)}.htr-terminal .tm-verdict.x{color:var(--nv-dim);border-color:var(--nv-line-2)}.htr-terminal .in-ns .grade{align-self:flex-start}/* the instrument bar stays in view on desktop, so a click far down the page visibly lands */
/* desk banner */
/* panel grid */
/* PANELS MUST FILL THE ROW THE SKIN PINNED (fix #1478).
`grid-auto-rows:292px` below gives every row a FIXED height. style.css
start-aligns the items of this same grid, which was harmless while rows
sized themselves to their content -- and became a spill the moment the rows
stopped. A start-aligned item is content-sized, so a panel taller than
292px overflows its track and draws straight over the panels beneath it.
Measured on production before this line: 16 overlapping panel pairs, the
worst by 568x416px, and 10 of 18 panels taller than their own row --
w-signals at 853px in a 292px track, laid over the two rows below it.
`stretch` makes the item exactly its track; the body already carries
`overflow-y:auto`, so the content that no longer fits scrolls where it
sits instead of being lost. 16 overlaps to 0, tallest panel 857px to
596px, which is exactly a two-row span. */
.htr-terminal .tm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:292px;grid-auto-flow:row dense;gap:12px;align-items:stretch}.htr-terminal .tm-w{grid-column:span var(--nv-c,4);grid-row:span var(--nv-r,1);display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--nv-line);border-radius:12px;background:rgba(13,19,30,.72);overflow:hidden;transition:border-color .15s,box-shadow .25s}.htr-terminal .tm-w:focus-within{border-color:color-mix(in srgb, var(--accent) 22%, transparent)}.htr-terminal .tm-w.flash{box-shadow:0 0 0 1px var(--nv-green),0 0 26px color-mix(in srgb, var(--accent) 25%, transparent)}.htr-terminal .tm-w-hd{flex:none;display:flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 12px;border-bottom:1px solid var(--nv-line);background:rgba(255,255,255,.015)}.htr-terminal .tm-w-hd .tm-fn-code{font-size:11px;font-weight:500;color:var(--nv-green)}.htr-terminal .tm-w-hd h2{margin:0;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.htr-terminal .tm-w-meta{min-width:0;font-size:11px;color:var(--nv-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.htr-terminal .tm-w-acts .ic{width:14px;height:14px}.htr-terminal .tm-w-b{flex:1;min-height:0;overflow:auto;padding:12px 14px;scrollbar-width:thin;scrollbar-color:var(--nv-line-2) transparent}.htr-terminal .tm-w-b.flush{display:flex;flex-direction:column;overflow:hidden;padding:0}.htr-terminal .tm-w.max{background:var(--nv-panel);position:fixed;z-index:46;top:var(--nv-hh,110px);left:16px;right:16px;bottom:44px}.htr-terminal .tm-w-ft{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:8px 12px;border-top:1px solid var(--nv-line);font-size:11px;color:var(--nv-dim)}/* panel tabs + filter bar */
/* tables */
.htr-terminal .tt .none{text-align:center;color:var(--nv-dim);padding:28px 10px}.htr-terminal .vt.c{color:var(--nv-green)}.htr-terminal .vt.n{color:var(--nv-red)}.htr-terminal .grade{display:inline-block;min-width:24px;text-align:center;font-size:11px;line-height:18px;border-radius:4px;border:1px solid var(--nv-line-2);color:var(--nv-muted)}.htr-terminal .grade.gA{color:var(--nv-green);border-color:var(--nv-green-line);background:color-mix(in srgb, var(--good) 7%, transparent)}.htr-terminal .grade.gB{color:var(--nv-green-line);border-color:color-mix(in srgb, var(--nv-green) 30%, transparent)}.htr-terminal .grade.gF{color:var(--nv-red);border-color:color-mix(in srgb, var(--nv-red) 38%, transparent)}/* empty, signed-out and placeholder states */
.htr-terminal .tm-empty{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;min-height:100%;font-size:12px;line-height:1.6;color:var(--nv-muted)}.htr-terminal .tm-empty b{font-size:13px;font-weight:500;color:var(--nv-text)}.htr-terminal .tm-empty .tm-empty-n{font-size:11px;color:var(--nv-dim)}.htr-terminal .tm-empty .ic.big{width:22px;height:22px;color:var(--nv-dim);margin-bottom:2px}.htr-terminal .tm-empty .btn{flex:none;height:34px;padding:0 14px;margin-top:4px}.htr-terminal .tm-empty-s{display:flex;gap:6px;flex-wrap:wrap}.htr-terminal .tvm-in .ic{width:26px;height:26px;color:var(--nv-dim)}/* regime */
.htr-terminal .rg-row .n{font-size:11px;color:var(--nv-dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.htr-terminal .rs.trend{color:var(--nv-text);border-color:var(--nv-line-2)}/* brief */
.htr-terminal .bf-sec.last{border-bottom:0}.htr-terminal .bf-li .ic{width:12px;height:12px;color:var(--nv-dim)}/* heatmap */
/* intel */
.htr-terminal .gr-s span.on{color:var(--nv-bg);background:var(--nv-green);border-color:var(--nv-green);font-weight:700}/* status bar */
.htr-terminal .tstat b.up{color:var(--nv-green)}/* shortcuts */
/* tablet */
@media (max-width:1180px){}/* phone */
/* ================= PHONE PREVIEW (demo only) ================= */
@media (max-width:1000px){}/* preview size switch + scaled desktop frame (demo only) */
@media (prefers-reduced-motion:reduce){}/* ══════════════════════════════════════════════════════════════
MOBILE (#1459). The design's own breakpoint, 900px.
These rules were written against the mockup's `html.mobile`
class; on a real viewport width answers the same question
without a blocking head script or a flash of the desktop nav.
Last in the file on purpose -- same specificity as the desktop
rules they override, so source order is what decides.
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px){.htr-terminal .tm-grid{padding:10px 12px 104px}.htr-terminal .tm-sel{grid-template-columns:minmax(0,1fr) auto;gap:14px 16px;padding:14px}.htr-terminal .tm-sel-id b, .htr-terminal .tm-sel-tkr{font-size:26px}.htr-terminal .tm-sel-px{text-align:right}.htr-terminal .tm-sel-px>span{display:block;margin:4px 0 0}/* fix #1501: EVERY FULL-WIDTH ITEM SPANS BOTH COLUMNS, not just this one. The phone layout is minmax(0,1fr) auto, and .tm-sel-px and .tm-methods are both block-level, so column two took 328px of a 390px viewport and minmax(0,1fr) did what it is defined to do: collapsed column one to ZERO. Measured on production at 390px the track list computed 0px 328px, and every item in that column had no width at all -- the symbol, the verdict pill (18px wide, holding the words SHARIA COMPLIANT), the setup chip, the action buttons. Their text overflowed a zero-width box and drew straight across column two, which is every overlap the owner photographed: the verdict over the methodology marks, RANGING over the ENTRY/RISK/TARGET labels. .tm-sel-conv already carried the span and was the only row that laid out correctly, so the fix gives its siblings the same treatment rather than inventing a new one. A pill is also made as wide as its word: left block it stretched the whole row and its border read as a panel edge rather than a chip. */.htr-terminal .tm-sel-conv, .htr-terminal .tm-verdict, .htr-terminal .tm-methods, .htr-terminal .tm-sel-sig, .htr-terminal .tm-sel-lv, .htr-terminal .tm-sel-acts{grid-column:1/-1}.htr-terminal .tm-sel-conv{flex-wrap:wrap;gap:14px}.htr-terminal .tm-verdict{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content}.htr-terminal .tm-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px}.htr-terminal .tm-w{grid-column:auto;grid-row:auto}.htr-terminal .tm-w-b{max-height:62vh}.htr-terminal .tm-w-b.flush{max-height:70vh}.htr-terminal .tm-empty{min-height:0;padding:6px 0}
}
/* PANEL SIZING, RESTORED (fix #1473).
`.htr-terminal .tm-w` is specificity 0-2-0 and sets `grid-column:span
var(--nv-c,4)`. The template's own size classes -- `.tm-w--5`, `.tm-w--4`,
`.tm-w--3`, the full 1-12 scale style.css declares -- are 0-1-0, so the skin
won every time and every one of the 18 live tiles rendered at the fallback
`span 4`. Measured on production: one distinct grid-column value across the
whole grid, where the mockup draws four.
The skin is not wrong to route sizing through a variable; it simply never
read the sizes already on the elements. Mapping the classes into `--nv-c`
lets the existing markup drive the skin, with no template or JS change. */
.htr-terminal .tm-w--1{--nv-c:1}
.htr-terminal .tm-w--2{--nv-c:2}
.htr-terminal .tm-w--3{--nv-c:3}
.htr-terminal .tm-w--4{--nv-c:4}
.htr-terminal .tm-w--5{--nv-c:5}
.htr-terminal .tm-w--6{--nv-c:6}
.htr-terminal .tm-w--7{--nv-c:7}
.htr-terminal .tm-w--8{--nv-c:8}
.htr-terminal .tm-w--9{--nv-c:9}
.htr-terminal .tm-w--10{--nv-c:10}
.htr-terminal .tm-w--11{--nv-c:11}
.htr-terminal .tm-w--12{--nv-c:12}
/* HEIGHT IS THE OTHER HALF, and nothing on the page carries it: style.css has
a column scale and no row scale, so `--nv-r` fell to its `span 1` fallback
everywhere and the grid had no vertical rhythm at all. The mockup makes
exactly the panels that hold a chart or a list two rows tall -- a treemap
and a movers table are unreadable at one -- so those two are named here
rather than given a scale nothing else would use. */
.htr-terminal #w-heat{--nv-r:2}
.htr-terminal #w-movers{--nv-r:2}
/* THE R:R LADDER (fix #1475).
Four bare numbers make the reader do the arithmetic; the mockup draws the
trade's shape. The risk leg runs stop-to-entry, the reward leg entry-to-
target, and the marker sits where the entry is, so how much room the trade
has either side reads at a glance. Sizes come from inline percentages the
renderer computes -- CSS cannot know where a price sits on its own scale. */
.htr-terminal .tm-lad{position:relative;height:10px;border-radius:5px;
background:var(--nv-line);overflow:hidden;flex:1 1 100%;min-width:180px;
margin:0 0 9px}
.htr-terminal .tm-lad-risk,
.htr-terminal .tm-lad-reward{position:absolute;top:0;bottom:0}
.htr-terminal .tm-lad-risk{background:var(--nv-red);opacity:.55}
/* The pair is semantic, not decorative: `--nv-red` resolves to the site's
`--bad`, so the reward leg takes `--good` rather than `--nv-green`, which
the terminal maps to its ACCENT (teal). Red against teal is not a
risk/reward pair a reader has ever seen; red against green is. */
.htr-terminal .tm-lad-reward{background:var(--good);opacity:.55}
/* The entry is the one price the reader is measuring FROM, so it is a hard
edge rather than a tint -- and it is drawn over both legs, never between
them, so a trade sitting at its stop still shows where it entered. */
.htr-terminal .tm-lad-mark{position:absolute;top:-2px;bottom:-2px;width:2px;
margin-left:-1px;background:var(--nv-text);border-radius:1px}
/* A STICKY BAR NEEDS SOMETHING TO BE STICKY OVER (fix #1479).
The mockup gives the instrument bar a flatly opaque fill. The port kept
its position, its z-index and its 8px backdrop blur, and dropped the
fill -- so `background-color` computed to rgba(0,0,0,0) and panel content
scrolling up behind a 203px-tall bar read straight through the conviction
score and the levels. A blur softens text; it does not hide it.
Third defect of one signature after #1477 and #1478: the port keeps what
POSITIONS an element and drops what makes it LEGIBLE. The colour is the
mockup's, reached through the site's own token rather than its literal. */
.htr-terminal .tm-sel{background-color:var(--nv-panel)}
/* THE MARK IN THE COMMAND BAR (fix #1482, spec 5.3). The box is unchanged;
what was the letters "HTR" is now the simplified drawing at 20px, which is
the one that survives below 28px. It inherits `color`, so the bar's own
accent still decides what shade it is. */
.htr-terminal .tm-mark{display:inline-flex;align-items:center;justify-content:center}
.htr-terminal .tm-mark svg{width:20px;height:20px;display:block}