/* ══════════════════════════════════════════════════════════════════════════ MASTER DASHBOARD — the desk stylesheet, ported from the reference design. DO NOT hand-edit this file to change a colour. Every colour it uses comes from the app's own palette tokens through the alias block below, so all four palettes (slate · warm · teal · editorial) in both light and dark drive it automatically. A literal colour added here would be the one thing on the page that does not follow the palette switch. The reference names its tokens `--bg`/`--card`/`--ink`; we name ours `--app-bg`/`--surface`/`--text`. The alias exists so the ported rules stay byte-comparable with the reference they came from — diffing a future version of the design against this file has to stay possible, and renaming 900 declarations would end that. ══════════════════════════════════════════════════════════════════════════ */ #app-shell{ --bg: var(--app-bg); --card: var(--surface); /* The FIRST recessed step -- every panel that should sit BELOW the card it is on: a tile, a key-takeaway box, a callout, a day header, a hovered row. Not `--surface-sunken`, whose name is the trap. That token is near-white (#f9fcff slate light, #f4f5ef warm, #fbfcf9 teal) and, measured against the reference's own eight palette/mode values, matched 2 of 8 -- editorial, where the two happen to be equal. `--surface-row-active` matches 8 of 8 exactly. Aliased to the near-white one, every recessed panel painted at very nearly the card colour and read as flat text rather than as a panel. ForexFundamentals' own alias block records hitting the same trap from the other side. Alias by VALUE, never by name: `sunken` and `sunk` are the same word and two different greys. */ --sunk: var(--surface-row-active); /* `--sunk2` is the reference's SECOND recessed step -- the grey a bar track, a hovered row and a selected leaderboard row are painted in. Our `--surface-row-active` is its FIRST step: #DCEDFF slate light, #DDDFD4 warm, #E3EEDC teal, byte-equal to the reference's `--sunk` in all four palettes and both modes. Aliasing `--sunk2` onto it therefore left the whole ladder one notch light, and the factor-by-factor bar tracks painted a pale tint on a white card -- no visible track at all. No app token sits at the deeper step, so it is DERIVED rather than hardcoded: six per cent of the ink mixed into the row colour, which was fitted against the reference's own eight `--sunk2` values (mean oklab distance .011, worst .022) and lands a shade or two off everywhere -- #D1E2F2 against its #CBDCF3 on slate light, #D1D4C9 against #CFD2C6 on warm. A literal would match one palette exactly and stop following the switch on the other seven. */ --sunk2: color-mix(in oklab, var(--text) 6%, var(--surface-row-active)); --ink: var(--text); --soft: var(--text-2); --faint: var(--text-faint); --rule: rgba(var(--hairline-rgb), .55); --rule2: rgba(var(--hairline-rgb), .95); --up: var(--bull-dot); --up-bg: var(--bull-tint); --up-bd: var(--bull-edge); --dn: var(--bear-dot); --dn-bg: var(--bear-tint); --dn-bd: var(--bear-edge); --nt: var(--text-muted); --nt-bg: var(--surface-sunken); --amber: var(--warn-text); --amber-bg: var(--warn-tint); --blue: var(--accent); --blue-bg: var(--info-tint); --fsans: var(--font-sans); --fmono: var(--font-mono); --fdisp: var(--font-display); --rad2: var(--r-md); } /* ══════════════════════════════════════════════════════════════════════════ THE APP SHELL — the left rail every view sits beside, ported from the reference. The reference is a standalone desk whose whole navigation is this rail; ours is one app with many more pages than it has, so the rail's ITEMS are written by hand in `index.html` (they have to be: each one carries a `data-view` that app.js routes and grant-gates). What is ported is the FRAME — the grid, the rail, the group headings, the item, the sub-list, the footer — so the thing a reader sees is the reference's, and the thing app.js drives is ours. Do not hand-edit a colour here. Every one comes from the app's palette tokens through the alias block below, so all four palettes in both modes drive the rail for free. ══════════════════════════════════════════════════════════════════════════ */ #app-shell {display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh} #app-shell .side {position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;padding:20px 14px 24px; border-right:1px solid var(--rule);background:var(--card);display:flex;flex-direction:column;gap:22px} #app-shell .sbrand {display:flex;align-items:center;gap:10px;padding:0 8px 4px} #app-shell .sbrand span {display:flex;flex-direction:column;line-height:1.25} #app-shell .sbrand b {font-size:14px;font-weight:700;letter-spacing:-.01em} #app-shell .sbrand i {font-style:normal;font-size:11px;color:var(--faint)} #app-shell .sgl {display:block;font-family:var(--fmono);font-size:9px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);padding:0 8px;margin-bottom:7px} #app-shell .sitem {display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:8px; font-size:13.5px;color:var(--soft);border:0;background:none;cursor:pointer;position:relative} /* Two rail entries are anchors rather than buttons — the Watchlist and Data pages are documents of their own, not views of this SPA, so they navigate instead of routing. `.sitem` was written for buttons and never had an underline to cancel. The rest of this rule exists because **every other rail entry is also `class="tab"`, and `.tab` in app.css is the old top-tab-strip rule**, which still says .tab { … font: 500 12.5px/1 var(--font-sans); transition: color …, border-color …; } `#app-shell .sitem` outranks it on `font-size` and puts 13.5px back, so that part is invisible — but NOTHING puts back the weight, the line box, the family or the transition, and every button in this rail quietly renders at 500/1. These two entries carry no `tab` class, deliberately (that is the whole grant-gating point), so they came out at 400 with a 1.6 line box: lighter type in a taller row, side by side with twenty neighbours. The family matters too — body is `var(--font-mono)`, which is Inter on three palettes but JetBrains Mono on `editorial`, where the mismatch is total. So: match `.tab`'s type, and take `text-rendering` with it, which the UA gives every form control and `button {font: inherit}` cannot put back. Measured in Chrome against a real `button.sitem`, not reasoned: these are the only properties that differed. Do NOT reach for the `font` shorthand to do this: `#app-shell a.sitem` (1,1,1) outranks `#app-shell .sitem` (1,1,0), so a shorthand would take font-size back to 12.5px too. `.sitem.on` / `.sitem.active` are (1,2,0) and still win, so an open page still bolds. */ #app-shell a.sitem {text-decoration:none;font-family:var(--fsans);font-weight:500; line-height:1;text-rendering:auto;transition:color var(--dur-fast) var(--ease-out)} #app-shell .sitem .ic {color:var(--faint);width:18px;height:18px;flex:0 0 auto} #app-shell .sitem:hover {background:var(--sunk2);color:var(--ink)} #app-shell .sitem.on {background:var(--sunk2);color:var(--ink);font-weight:600} #app-shell .sitem.on .ic {color:var(--ink)} #app-shell .sitem .cnt {margin-left:auto;font-family:var(--fmono);font-size:10px;color:var(--faint)} #app-shell .sitem .cv {font-size:9px;color:var(--faint);margin-left:7px;transition:transform .15s} #app-shell .sitem.exp .cv {transform:rotate(180deg)} #app-shell .sitem.soon {cursor:default;color:var(--soft)} #app-shell .sitem.soon:hover {background:var(--sunk2);color:var(--soft)} #app-shell .sitem .nml {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #app-shell .sitem .sn {margin-left:auto;flex:0 0 auto;white-space:nowrap;font-family:var(--fmono); font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint); background:var(--rule);border-radius:5px;padding:3px 6px;line-height:1; opacity:0;transition:opacity .16s ease} #app-shell .sitem.soon:hover .sn {opacity:1} @media (hover:none) { #app-shell .sitem .sn {opacity:1} } #app-shell .ssub {margin:3px 0 0 9px;padding-left:9px;border-left:1px solid var(--rule)} #app-shell .ssi {display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border-radius:7px;border:0; background:none;cursor:pointer;font-size:12px} #app-shell .ssi:hover {background:var(--sunk2)} #app-shell .ssi.on {background:var(--sunk2);font-weight:600} #app-shell .ssiall {display:block;padding:8px 7px 9px;margin-bottom:5px;border-bottom:1px solid var(--rule); border-radius:7px 7px 0 0} #app-shell .fstack {display:flex;align-items:center;margin-bottom:6px} #app-shell .fstack img.fl {border:1.5px solid var(--card);box-sizing:content-box;border-radius:999px; box-shadow:0 0 0 1px rgba(26,29,33,.12)} #app-shell .fstack img.fl+img.fl {margin-left:-7px} #app-shell .ssiall .lbl {display:block;font-size:12px;font-weight:600} #app-shell .ssi .r {font-family:var(--fmono);font-size:9.5px;color:var(--faint);width:20px} #app-shell .ssi .cd {font-family:var(--fmono);font-weight:600} #app-shell .ssi .sig {margin-left:auto;transform:scale(.84);transform-origin:right center} #app-shell .sfoot {margin-top:auto;padding:0 8px} #app-shell .sfoot .thm {width:100%;justify-content:center} @media (max-width:860px) { #app-shell {grid-template-columns:1fr} #app-shell .side {position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule)} #app-shell .ssub {display:flex;flex-wrap:wrap;gap:4px;border-left:0;margin-left:0;padding-left:0} #app-shell .ssi {width:auto} } @media print { #app-shell .side {display:none} #app-shell {grid-template-columns:1fr} } /* -- deviations our own shell forces --------------------------------------- */ /* The rail is one column of a grid whose other column is everything that was already there — the top bar, the banner and every `section.view`. The grid itself is the reference's own rule (`.shell`, ported onto this id above); what it never had to answer for is a right column that can hold a 35-pair book. `min-width:0` is load-bearing: without it a wide table makes the grid track wider than the viewport instead of scrolling inside its own container, and the whole page gains a horizontal scrollbar. */ #app-shell > .appmain{min-width:0} /* The rail carries real navigation, so its items are focusable controls rather than the reference's decorative spans. The reference styles `.sitem` as a button already; this only restores the focus ring its fixture had no need for. */ #app-shell .sitem:focus-visible, #app-shell .ssi:focus-visible{outline:2px solid var(--blue); outline-offset:1px} /* `hidden` beats every layout rule here. app.js grant-gates by setting `tab.hidden`, and `.sitem` / `.ssi` are `display:flex`, which wins over the UA's `[hidden]` rule — so an ungranted page stayed on screen. `nav.js` hides an entire group the same way. */ #app-shell [hidden]{display:none !important} /* The reference has one currency sub-list and it is always the same ten. Ours is built from whatever the board published, so it can be empty (before the first run, or for a reader whose grant does not reach the board) — and an empty bordered box reads as a broken rail rather than as a quiet one. */ #app-shell .ssub:empty{display:none} /* app.js marks the current view by adding `.active` to its `.tab`; the ported rail styles the current entry as `.on`. Aliased in one rule rather than having nav.js copy a class across on every route — a second piece of state that can be wrong is worse than a selector, and app.js is not going to learn a new class name for a stylesheet. */ #app-shell .sitem.active{background:var(--sunk2); color:var(--ink); font-weight:600} #app-shell .sitem.active .ic{color:var(--ink)} /* The rail sits flush against the app frame, so the frame's own side gutter moves onto the page column beside it. The three widths are app.css's own (22 / 14 / 10 at its two breakpoints) and are reproduced rather than referenced because app.css sets them on `#app`, which is now the grid's parent rather than the column. The TOP gutter is new (2026-09-11). The app's sticky `.topbar` was removed entirely -- its wordmark had already gone into the rail's `.sbrand`, its tab strip IS the rail, and its last three controls moved into the rail's foot, which left a 50px bar holding nothing and pinned to the top of every page. With it gone every view would start flush against the viewport edge, so the column takes the 18px the reference's own masthead used to put above its first section. */ #app{padding-left:0; padding-right:0} #app-shell > .appmain{padding:18px 22px 40px} @media (max-width:760px){ #app-shell > .appmain{padding-left:14px; padding-right:14px} } @media (max-width:520px){ #app-shell > .appmain{padding-left:10px; padding-right:10px} } /* -- the rail's foot: what the top bar used to hold ------------------------- */ /* The reference writes `.palpick` / `.palc` / `.pall` and `.thm` OUTSIDE the declared `.shell{`..`.mast{` range -- its own picker sits in the masthead and only the `.sfoot` overrides fall inside the rail block -- so the base rules are restated here rather than spliced. They are the reference's, declaration for declaration; what is ours is the decision to put the control in the foot, which is the slot its stylesheet already anticipates (`.sfoot .palpick` was in the sheet before anything emitted it). */ #app-shell .thm{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:5px 10px; border-radius:999px;border:1px solid var(--rule2);background:transparent;color:var(--faint); cursor:pointer;font-family:var(--fmono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase} #app-shell .thm:hover{color:var(--ink); border-color:var(--ink)} #app-shell .palpick{display:flex;align-items:center;gap:5px;flex-wrap:wrap} #app-shell .palc{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px; border:1px solid var(--rule2);background:var(--card);color:var(--soft);cursor:pointer; font-family:var(--fmono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;line-height:1; white-space:nowrap} #app-shell .palc:hover{color:var(--ink); border-color:var(--ink)} #app-shell .palc.on{border-color:var(--ink); color:var(--ink); font-weight:600} #app-shell .palc .sw{display:flex;gap:2px} #app-shell .palc .sw i{width:7px;height:7px;border-radius:999px;display:block} #app-shell .sfoot .palpick{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:9px} #app-shell .sfoot .palc{width:100%;justify-content:flex-start;padding:6px 9px;font-size:9px} #app-shell .sfoot .pall{display:block;font-family:var(--fmono);font-size:9px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:0 2px;margin-bottom:7px} @media print{ #app-shell .palpick{display:none !important} #app-shell .sfoot .pall{display:none !important} } /* The palette chips mark themselves active through `aria-pressed`, which app.js has written on every `[data-palette-set]` control since the top-bar switcher shipped. The reference's own class is kept above so the ported rule stays diffable, but nothing emits it: a second piece of state saying the same thing is a second piece of state that can be wrong. */ #app-shell .palc[aria-pressed="true"]{border-color:var(--ink); color:var(--ink); font-weight:600} /* A palette chip has to show ITS OWN colours, so they cannot come from the palette in force. The app already keeps two identity tokens per palette for exactly this -- the top-bar swatch was drawn from them -- and unlike the reference's four hardcoded hexes they are declared per MODE, so the chips stay legible in light and dark. The inset hairline is ours: the darker of the two dots is near-black, and on a dark card an unbordered one reads as a hole rather than as a colour. */ #app-shell .palc .sw i{box-shadow:inset 0 0 0 1px rgba(var(--hairline-rgb), .55)} #app-shell .palc[data-palette-set="slate"] .sw i.b{background:var(--sw-slate-bg)} #app-shell .palc[data-palette-set="slate"] .sw i.f{background:var(--sw-slate-fg)} #app-shell .palc[data-palette-set="warm"] .sw i.b{background:var(--sw-warm-bg)} #app-shell .palc[data-palette-set="warm"] .sw i.f{background:var(--sw-warm-fg)} #app-shell .palc[data-palette-set="teal"] .sw i.b{background:var(--sw-teal-bg)} #app-shell .palc[data-palette-set="teal"] .sw i.f{background:var(--sw-teal-fg)} #app-shell .palc[data-palette-set="editorial"] .sw i.b{background:var(--sw-editorial-bg)} #app-shell .palc[data-palette-set="editorial"] .sw i.f{background:var(--sw-editorial-fg)} /* The light/dark button says what clicking it WILL DO, which is the reference's wording and the OPPOSITE convention to the icon-only control it replaced (that one showed the mode you were in). Written in CSS rather than by a repaint because nothing else here re-renders on a theme swap -- app.js only flips an attribute on , and this follows it in the same frame. The doubled space after each escape terminates it; a single one is eaten. `\2600` is the sun and `\263E` the moon. Do not write either through a tool that interprets a backslash escape: one read `\2600` as OCTAL `\260` plus a leftover "0", and the button said "deg-zero Light mode" in production until 2026-09-15. Edit this file with something that writes bytes, and read the two lines back. */ :root[data-theme="dark"] #app-shell .thm .thmi::before, :root:not([data-theme]) #app-shell .thm .thmi::before{content:"\2600 Light mode"} :root[data-theme="light"] #app-shell .thm .thmi::before{content:"\263E Dark mode"} /* Log out has no counterpart in the reference, which is a fixture with no session. It is an ACTION rather than a setting, so it is deliberately NOT a third chip beside the palette and the theme toggle: two identical pills where one changes a colour and the other ends your session is a misclick waiting to happen. It takes the rail item's own shape instead, under a hairline, and the negative side margins line it up with the entries above rather than with the foot's own inset. */ #app-shell .lgout{display:flex;align-items:center;gap:10px;width:calc(100% + 16px); margin:10px -8px 0;padding:9px;border:0;border-top:1px solid var(--rule);background:none; border-radius:8px;cursor:pointer;text-align:left;font-family:var(--fsans);font-size:12.5px; color:var(--faint)} #app-shell .lgout:hover{background:var(--sunk2); color:var(--ink)} #app-shell .lgout .ic{width:18px;height:18px;flex:0 0 auto} #app-shell .lgout:focus-visible{outline:2px solid var(--blue); outline-offset:1px} /* The bullish/bearish pill the currency drop-down carries. The reference styles `.sig` ONCE, globally, and every surface that draws one picks it up; ours is scoped per view (`#view-currencies`, `#view-master-dashboard`) and the rail is inside neither, so the ten in the drop-down rendered the word with no pill, no border and no colour at all. Same declarations as those two copies, verbatim from the reference. */ #app-shell .sig{display:inline-flex;align-items:center;gap:5px;font-family:var(--fmono); font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px; border-radius:999px;border:1px solid transparent;white-space:nowrap} #app-shell .sig.up{background:var(--up-bg);border-color:var(--up-bd);color:var(--up)} #app-shell .sig.dn{background:var(--dn-bg);border-color:var(--dn-bd);color:var(--dn)} #app-shell .sig.nt{background:var(--nt-bg);border-color:var(--rule2);color:var(--nt)} /* -- the rail collapses to its icons --------------------------------------- */ /* One state, `nav-collapsed` on `#app-shell`, written by nav.js and by nothing else. It sits on the GRID rather than on the rail because what actually changes is the column's width; the rail only stops drawing the words inside it. Everything here is scoped to the wide layout. Below 860px the rail is already a full-width band above the page rather than a column beside it, so there is no column to narrow — collapsing there would leave a 62px strip and a squeezed page. */ #app-shell .scol{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px; border:0;border-radius:7px;background:none;color:var(--faint);cursor:pointer;padding:0} #app-shell .scol:hover{background:var(--sunk2);color:var(--ink)} #app-shell .scol:focus-visible{outline:2px solid var(--blue);outline-offset:1px} #app-shell .scol .ic{display:flex;align-items:center;justify-content:center;width:16px;height:16px;transition:transform .16s ease} @media (max-width:860px){ #app-shell .scol{display:none} } @media (min-width:861px){ /* The chevron is one glyph turned around rather than two glyphs swapped: the second spelling is a second thing that can disagree with the state. */ #app-shell.nav-collapsed .scol .ic{transform:rotate(180deg)} #app-shell.nav-collapsed{grid-template-columns:62px minmax(0,1fr)} #app-shell.nav-collapsed .side{padding:20px 10px 24px;gap:16px} #app-shell.nav-collapsed .sbrand{justify-content:center;padding:0 0 4px} #app-shell.nav-collapsed .sbrand>span{display:none} #app-shell.nav-collapsed .scol{margin-left:0} #app-shell.nav-collapsed .sgl{display:none} #app-shell.nav-collapsed .sitem{justify-content:center;gap:0;padding:9px 0} #app-shell.nav-collapsed .sitem .nml, #app-shell.nav-collapsed .sitem .cnt, #app-shell.nav-collapsed .sitem .cv, #app-shell.nav-collapsed .sitem .sn{display:none} /* The sub-lists go with the words. A drop-down under a 42px icon column has nowhere to put a pair name, and the pair's own page carries the same picker. */ #app-shell.nav-collapsed .ssub{display:none} #app-shell.nav-collapsed .sfoot{padding:0} #app-shell.nav-collapsed .sfoot .pall, #app-shell.nav-collapsed .sfoot .palpick{display:none} #app-shell.nav-collapsed .thm{width:100%;justify-content:center;padding:7px 0} #app-shell.nav-collapsed .lgout{width:100%;margin:10px 0 0;justify-content:center;gap:0;padding:9px 0} #app-shell.nav-collapsed .lgout span:not(.ic){display:none} } /* The light/dark switch is the one control in the foot whose label is WRITTEN IN CSS (see the two rules above), so it cannot be hidden by hiding an element -- collapsed, it would clip its own sentence mid-word inside a 42px pill. It takes a glyph instead. `:root` is carried on the selector only to match the specificity of the two rules it overrides; being later in the file is what actually wins. */ @media (min-width:861px){ :root #app-shell.nav-collapsed .thm .thmi::before{content:"\25D0"} } /* -- the rail's Pairs filter ----------------------------------------------- */ /* Thirty-five pairs is more than a reader scans, so the drop-down opens with a box that narrows it. The rows are hidden in place by nav.js (`applyPairFilter`); the ORDER is still the board's, because a filter that re-sorted would be a second surface ranking the same book (`DASHBOARD_ONE_ORDERING.md`). */ /* Its own row in both layouts: below 860px the sub-list is a wrapping flex strip, where an auto-width box would collapse onto the end of a line of pairs. */ #app-shell .ssf{padding:1px 2px 6px;flex:1 0 100%} #app-shell .ssfi{width:100%;box-sizing:border-box;padding:5px 8px;border-radius:7px; border:1px solid var(--rule2);background:var(--bg);color:var(--ink); font-family:var(--fmono);font-size:11px} #app-shell .ssfi::placeholder{color:var(--faint)} /* The ring stays. A text box is the one control here a reader tabs into expecting to type, and the border darkening on its own is not a focus indicator. */ #app-shell .ssfi:focus{border-color:var(--ink)} #app-shell .ssfi:focus-visible{outline:2px solid var(--blue);outline-offset:1px} #app-shell .ssfn{display:block;padding:6px 8px;font-size:11.5px;color:var(--faint)} /* -- the rail's icons ------------------------------------------------------ */ /* Every mark is a `` of one `` defined once at the top of the shell. Stroke-only and sized here, so the palette, the active state and the hover all arrive through `currentColor` and a single width lives in one place. `fill`, `stroke` and the three stroke properties are INHERITED SVG properties, which is what carries them across the `` shadow boundary into the symbol. Setting them on the symbol's own shapes instead would pin the colour and end the palette switch. */ #app-shell .ic{display:inline-flex;align-items:center;justify-content:center} #app-shell .ic svg{width:100%;height:100%;display:block;overflow:visible; fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Collapsed, the mark is all there is, so it grows into the space the label left. */ @media (min-width:861px){ #app-shell.nav-collapsed .sitem .ic, #app-shell.nav-collapsed .lgout .ic{width:21px;height:21px} #app-shell.nav-collapsed .sitem{padding:10px 0} }