/* ===================================================================
   TradeLista — light theme, site-wide default
   ===================================================================

   Light is the default now and dark is the option. The mechanism is
   deliberately the other way round from how that sounds:

     - Every page keeps its own dark :root palette, untouched. Thirteen
       pages defining the same twenty-five variables were not going to be
       rewritten in thirteen places and stay in step.
     - This file overrides that palette whenever the document is NOT
       marked dark. So light needs no attribute, no class and no
       JavaScript — it is simply what you get.
     - Choosing dark sets data-theme="dark" on <html>, which stops every
       selector here from matching and lets the page's own palette through
       unmodified.

   Consequences worth knowing:
     - With JavaScript off you get light, the intended default, rather
       than a half-applied mess.
     - Dark is not a reimplementation. It is the original design, still
       the only palette written out in full, reached by getting out of
       its way.
     - This file must load AFTER a page's own <style> block. Same
       specificity otherwise decides on source order, and the page would
       win.

   The pre-paint snippet in each <head> exists only so someone who chose
   dark does not see a light flash before the attribute lands.

   =================================================================== */

html:not([data-theme="dark"]) {
  color-scheme: light;

  /* The page is white. It was #f2f5f9 so the white cards would separate from it
     by tone; on white they cannot, so the separation moves entirely onto the
     border and the shadow — which is why --border-soft is a step darker here
     than it would otherwise need to be. A card on white with a #e4e9f1 hairline
     reads as a floating panel; with the old one it read as nothing at all. */
  --bg:#ffffff;
  --bg-card:#ffffff;
  --bg-elevated:#ffffff;
  --bg-hover:#f1f4f9;

  /* Darkened site-wide. #ccd5e2 measured 1.48:1 against white and #dde4ee
     1.28:1 — a hairline that faint is a suggestion of an edge, and on the
     candle chart, where the same two tokens draw the gridlines and the axis
     borders, the grid had all but vanished. These land at 1.95 and 1.62.
     Not pushed to the 3:1 WCAG asks of a meaningful boundary: at that weight
     (around #8c9db5) every one of the hundreds of hairlines on the dashboard
     turns into a drawn line and the page reads as a spreadsheet. These are
     the strongest values that still recede — the borders carry structure
     here, they are not the structure.
     Both tokens reach further than CSS: the equity gridlines take them
     through var(), and the candle chart reads them at build time via tok(),
     so the chart in the trade view darkens with everything else. */
  --border:#aebbcd;
  --border-soft:#c2ccdb;

  /* The categorical slots re-stepped for a white card — the same six hues as the
     dark set in app.html, chosen for this surface rather than flipped. Run through
     the palette validator on the adjacent pairlist against #ffffff: lightness band
     and chroma floor pass, worst adjacent CVD ΔE 9.1 (protan), worst normal-vision
     ΔE 19.6. Contrast comes back as "relief": aqua 2.82, yellow 2.17 and magenta
     2.69 sit under 3:1 on white, which the rule permits only where the marks carry
     visible labels — hence the legend beside the bar states every symbol and its
     count, and the ranked rows under it repeat the same data as text. Colour is
     never the only way to read it. */
  --cat-1:#2a78d6;
  --cat-2:#eb6834;
  --cat-3:#1baf7a;
  --cat-4:#eda100;
  --cat-5:#e87ba4;
  --cat-6:#008300;

  --text:#141c28;
  --text-dim:#48566a;
  /* #6c7a8c read well and measured 4.37:1 on white — under the 4.5 a small
     label needs. This clears it at 5.27:1. The one value eyeballing got wrong. */
  --text-faint:#616d7c;

  /* The signal colours are tuned for a dark ground and are far too light on
     white — --green-text was #5ce3b0, which is unreadable there. Darkened until
     each cleared 4.5:1 against white: green 5.38, red 6.82, accent 6.91. */
  --green:#0e9c62;
  --green-text:#0a7a4c;
  --green-dim:rgba(14,156,98,0.14);
  --green-border:rgba(14,156,98,0.42);
  --red:#d62a41;
  --red-text:#b01e32;
  --red-dim:rgba(214,42,65,0.13);
  --red-border:rgba(214,42,65,0.42);
  --accent:#2e6ee0;
  --accent-text:#1d54bb;
  --accent-dim:rgba(46,110,224,0.13);
  --accent2:#7356f0;

  /* The score's five grades, light-side. The dark values are text-on-dark hues —
     "Strong" is #8fd14f, a lime that manages 1.75:1 on white. Each of these
     clears 4.5:1 there, measured in the browser: Excellent 5.38, Strong 4.99,
     Solid 4.92, Developing 7.31, Needs-work 6.82. The grade label is 13px bold
     and the factor values 12.5px, so large-text allowances don't apply. */
  --score-b80:#0a7a4c;
  --score-b65:#4d7c0f;
  --score-b50:#8a6d00;
  --score-b35:#9a3412;
  --score-b0:#b01e32;
}

/* -------------------------------------------------------------------
   Every page: the wordmark
   -------------------------------------------------------------------
   "Trade" is a literal #f5f5f7 rather than var(--text), so on a white
   header it vanished completely. This is the only hand-written colour
   the eleven template pages needed — their other literals are the logo
   SVG's own tiles and gradient stops, which belong to the mark and stay
   as they are on any background. */
html:not([data-theme="dark"]) .brand-trade { color:#101722; }

/* -------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------
   The shared .card is translucent dark over the page with a blur behind
   it. On light it mixes in light, and the saturate() then tints it —
   so it becomes a plain white surface, and the depth comes from a
   shadow instead of from the glass. */
html:not([data-theme="dark"]) .card {
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
html:not([data-theme="dark"]) .card:not(.cal-card) { background:var(--bg-card); }

/* Every page paints a fixed wash behind its content — two broad radials in blue
   and cyan over var(--bg). On the dark page that is the ambient light the whole
   design sits in; on a white one it is a faint blue cast over what is supposed to
   be white. Removed rather than dimmed: "white" with a tint in it is the thing
   being asked for the absence of. */
html:not([data-theme="dark"]) body::before { display:none; }

/* The card shadow, and it is doing more work here than its dark counterpart ever
   did. On #121922 a card separated by being lighter than the page. Page and card
   are both #ffffff now, so tone carries nothing and the entire boundary rests on
   this shadow and the hairline.
   Hence two layers rather than one: a tight, slightly stronger contact shadow
   that draws the edge itself, and a wide soft one underneath that lifts the card
   off the page. A dark theme's heavy single shadow would read as dirt on white,
   which is why the alphas stay low and the spread does the work. */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .modal,
html:not([data-theme="dark"]) .cal-card,
html:not([data-theme="dark"]) .price-card:not(.pro),
html:not([data-theme="dark"]) .feat-mini,
html:not([data-theme="dark"]) .qcol,
html:not([data-theme="dark"]) .feat-text,
html:not([data-theme="dark"]) .step,
html:not([data-theme="dark"]) .final-cta,
/* On the band this card separated by tint; with the light bands switched off
   (below) the shadow is all that keeps it off the white page. */
html:not([data-theme="dark"]) .pain-card,
/* The account page's cards were missing from this list, and that alone is why
   they read as dead: --bg-card and --bg is both #ffffff on light, so a card
   there had nothing but a hairline to separate it from the page. Every other
   surface on the site already got this treatment. */
html:not([data-theme="dark"]) .tl-am-card {
  box-shadow:
    0 0 0 1px rgba(20,28,40,0.055),
    0 1px 2px rgba(20,28,40,0.06),
    0 10px 28px -14px rgba(20,28,40,0.16);
}

/* Und dasselbe eine Ebene tiefer: die Kaestchen INNERHALB der Karten. Sie
   nehmen --bg-elevated, was auf hell ebenfalls #ffffff ist — Feld, Karte und
   Seite hatten also alle drei denselben Ton, und ein Eingabefeld war nur an
   seinem Rand zu erkennen. Auf dunkel ist "elevated" heller als die Karte; auf
   hell muss es andersherum gehen, ein Feld liegt tiefer als die Flaeche, auf
   der es sitzt. #f6f8fc ist der Ton, den die Insight-Kacheln oben schon
   benutzen — ein Grau fuer den ganzen hellen Modus, nicht fuer jede Stelle ein
   eigenes. Die Karte selbst bleibt weiss: sie ist die Flaeche, nicht das Feld. */
html:not([data-theme="dark"]) .tl-am-row input,
html:not([data-theme="dark"]) .tl-am-row select,
html:not([data-theme="dark"]) .tl-am-plan-box,
html:not([data-theme="dark"]) .tl-am-storage-box,
html:not([data-theme="dark"]) .tl-am-acct-item,
html:not([data-theme="dark"]) .tl-am-rv-text {
  background:#f6f8fc;
}
/* Die Knoepfe bleiben absichtlich weiss: ein Knopf ist ein Bedienelement, keine
   Mulde, und graue Flaechen neben grauen Feldern nehmen ihm das Erhabene.
   Ebenso die MT4-/MT5-Marke in der Kontozeile — auf der jetzt grauen Zeile
   liest sie sich als heller Punkt besser als vorher auf Weiss. */

/* The top bar, and the band that carries it across the sidebar behind the
   logo. That band is written as a literal because it had to match what the
   bar's rgba composited to over a different background underneath; on light
   both just want to be the page with a line under them. */
html:not([data-theme="dark"]) .topnav {
  background:rgba(255,255,255,0.86);
  border-bottom:1px solid var(--border-soft);
}

/* -------------------------------------------------------------------
   Hover states
   -------------------------------------------------------------------
   These lift a surface with white at 5-10%. On a white surface that is
   white on white and simply does not exist, so they invert to black at a
   comparable weight.

   Note what is NOT here: the rgba(255,255,255,0.28) tiles inside the logo
   SVG. There are fourteen of them across the pages and they sit on the
   mark's own gradient, not on the page. */
html:not([data-theme="dark"]) .head-more-menu button:hover,
html:not([data-theme="dark"]) .rte-toolbar select:hover,
html:not([data-theme="dark"]) .rte-btn:hover,
html:not([data-theme="dark"]) .leakbtn:hover,
html:not([data-theme="dark"]) .rulechk .rb button:hover,
html:not([data-theme="dark"]) .tf:hover {
  background:rgba(0,0,0,0.055); color:var(--text);
}
html:not([data-theme="dark"]) .tf:hover .tf-v { border-bottom-color:rgba(0,0,0,0.22); }
html:not([data-theme="dark"]) .leakbtn,
html:not([data-theme="dark"]) .rulechk .rb button {
  background:#f2f5f9; border-color:var(--border-soft);
}

/* -------------------------------------------------------------------
   Dashboard (app.html)
   -------------------------------------------------------------------
   The calendar's two levels invert. In the dark theme the panel (#2b3849)
   is LIGHTER than its day cells (#212c3b), which is what makes the days
   read as wells sunk into it. Keeping that reading on light means the
   panel has to go darker than the cells, not lighter — panel grey, cells
   white. Done the obvious way round, the cells would stand proud of the
   panel instead of sitting in it. */
html:not([data-theme="dark"]) .cal-card { background:#e8eef6; }
html:not([data-theme="dark"]) .day { background:#ffffff; }
html:not([data-theme="dark"]) .day.win {
  background:linear-gradient(rgba(14,156,98,0.16), rgba(14,156,98,0.16)), #ffffff;
}
html:not([data-theme="dark"]) .day.loss {
  background:linear-gradient(rgba(214,42,65,0.14), rgba(214,42,65,0.14)), #ffffff;
}
html:not([data-theme="dark"]) #tlSidebar {
  background:#ffffff; border-right:1px solid var(--border-soft);
}
html:not([data-theme="dark"]) #tlSidebar .tlsb-brand { background:#ffffff; }
/* The open section, and the reasoning is inherited from the nav pill above:
   selection is a change of GROUND, not a slab of brand colour. A solid accent
   bar was the loudest thing on an otherwise white screen, and it competed with
   the page's own content for the eye.

   Three tones, evenly spaced so the ladder reads in one glance —
   sidebar 100, hover 96.1, open 92.5 in L*. Roughly 3.7 a step, and the same
   direction each time: further from the page means closer to where you are.
   The dark theme keeps its own arrangement, where the fill has to be the
   BRIGHTEST line rather than the darkest. */
html:not([data-theme="dark"]) #tlSidebar .tlsb-nav a.active {
  background:#e4eaf3; color:var(--text);
}
html:not([data-theme="dark"]) #tlSidebar .tlsb-nav a:hover { background:#f1f4f9; }
/* Colour leaves the fill and moves to the two small marks, which is where it
   can still be seen without shouting. #9dc0ff was mixed to read on a dark
   panel; on near-white it is barely a tint, so both take the real accent.
   State is never carried by colour alone here — the bar's height and the
   label's weight say it too. */
html:not([data-theme="dark"]) #tlSidebar .tlsb-nav a::before { background:var(--accent); }
html:not([data-theme="dark"]) #tlSidebar .tlsb-nav a.active svg { color:var(--accent); }
html:not([data-theme="dark"]) .head-more-menu,
html:not([data-theme="dark"]) .rte-swatch-pop { background:#ffffff; }
/* Panels that were a translucent dark over the page read as grey smears on
   light; a faint tint of the page instead. */
html:not([data-theme="dark"]) .trow,
html:not([data-theme="dark"]) .tside { background:#f6f8fc; }
/* More literals that only work against dark. */
html:not([data-theme="dark"]) .day.loss .pnl { color:#a8182c; }
html:not([data-theme="dark"]) .prop-val.warn { color:#8a5a00; }

/* -------------------------------------------------------------------
   Dashboard: the header band, the numbers column, the score card
   -------------------------------------------------------------------
   The header band is the one deliberately dark thing on the light page.
   As a white card it was furniture — six figures in a row that a visitor
   had to go looking for. Inverted, it is the poster: the month's result
   on deep navy, everything else white around it. One dark element on a
   white page reads as emphasis; it also echoes where these colours came
   from, since the navy is the dark theme's own top-bar family. The green
   and red here are the DARK theme's bright pair, not the light theme's
   deep pair — they were mixed for exactly this ground. */
html:not([data-theme="dark"]) .dash-head {
  background:linear-gradient(170deg, #1a2534 0%, #121a26 100%);
  border-color:#121a26;
  box-shadow:
    0 1px 2px rgba(20,28,40,0.18),
    0 16px 40px -18px rgba(20,28,40,0.45);
}
html:not([data-theme="dark"]) .dash-head > .dh-item { border-left-color:rgba(255,255,255,0.13); }
html:not([data-theme="dark"]) .dash-head .dh-l,
html:not([data-theme="dark"]) .dash-head .dh-il { color:#93a5bd; }
html:not([data-theme="dark"]) .dash-head .dh-item b { color:#ffffff; }
html:not([data-theme="dark"]) .dash-head .dh-v.pos,
html:not([data-theme="dark"]) .dash-head .dh-pct.pos { color:#2fd692; }
html:not([data-theme="dark"]) .dash-head .dh-v.neg,
html:not([data-theme="dark"]) .dash-head .dh-pct.neg { color:#ff8296; }
html:not([data-theme="dark"]) .dash-head .dh-v.muted,
html:not([data-theme="dark"]) .dash-head .dh-pct.muted { color:#7e90a8; }
/* The numbers column stays white and keeps the card shadow it was missing. */
html:not([data-theme="dark"]) .dash-metrics {
  box-shadow:
    0 0 0 1px rgba(20,28,40,0.055),
    0 1px 2px rgba(20,28,40,0.06),
    0 10px 28px -14px rgba(20,28,40,0.16);
}
/* The column's group kickers are a literal #7d90ad, mixed for the dark panel:
   4.0:1 on white at 10.5px caps. A step darker clears it without going flat
   grey — the blue lean is what separates a kicker from a label here. */
html:not([data-theme="dark"]) .dm-h { color:#54677f; }
/* Peak and drawdown, the one pair in the column whose meaning has a colour:
   the account's best point and its worst fall. First attempt used 6% washes,
   which vanished — these are meant to be SEEN. The values take the colours
   too; "which is which" should survive squinting. */
html:not([data-theme="dark"]) .dm-mini {
  background:rgba(14,156,98,0.13); border-color:rgba(14,156,98,0.45);
}
html:not([data-theme="dark"]) .dm-mini b { color:var(--green-text); }
html:not([data-theme="dark"]) .dm-mini.is-pro {
  background:rgba(214,42,65,0.10); border-color:rgba(214,42,65,0.40);
}
html:not([data-theme="dark"]) .dm-mini.is-pro b { color:var(--red-text); }
/* The grade under the score ring becomes a chip in its own band colour —
   currentColor arrives inline from tlsBand(), the wash is mixed from it, so
   all five grades get a matching chip with one rule. */
html:not([data-theme="dark"]) #scoreCard .score-grade {
  display:table; margin:2px auto 16px; padding:4px 13px; border-radius:99px;
  background:color-mix(in srgb, currentColor 12%, transparent);
}
/* The balance is the number people open a journal for — its own comment says
   so — and at 25px it was barely past the row values around it. */
html:not([data-theme="dark"]) .dm-hero-v { font-size:28px; }
/* Peak and drawdown wear their names in their colours, and the figures step up
   to 15px: this pair is the account's whole story in two numbers. */
html:not([data-theme="dark"]) .dm-mini .dm-ml { color:var(--green-text); }
html:not([data-theme="dark"]) .dm-mini.is-pro .dm-ml { color:var(--red-text); }
html:not([data-theme="dark"]) .dm-mini b { font-size:15px; }
/* The nineteen result rows lose their hairlines for soft alternating bands.
   Hairline-between-everything is the dark theme's texture; on white it reads
   as a form. The stripes bleed 9px into the card's padding so the banded rows
   stay on the same text grid as everything above them. */
html:not([data-theme="dark"]) .dm-row { border-top:0; margin:0 -9px; padding:8px 9px; border-radius:8px; }
html:not([data-theme="dark"]) .dm-group .dm-row:nth-child(even) { background:#f4f7fb; }
/* "this month" becomes a small chip instead of loose text in the header. */
html:not([data-theme="dark"]) .dm-period {
  background:#eef2f8; padding:2px 9px; border-radius:99px; color:var(--text-dim);
}
/* The equity card's period result was 14px — the second most important figure
   on the page, set smaller than the axis labels' neighbours. It leads the
   card now; the alternate unit stays quiet beside it. */
html:not([data-theme="dark"]) .chart-end-value { font-size:21px; font-weight:800; letter-spacing:-0.01em; }
html:not([data-theme="dark"]) .cev-alt { font-size:13px; }
/* Insights: tiles and rails were --bg-elevated, which is white here — the
   same invisible-surface disease as the score card's tracks. */
html:not([data-theme="dark"]) #insightsCard .ins-tile { background:#f6f8fc; border-color:var(--border-soft); }
html:not([data-theme="dark"]) #insightsCard .ins-bar { background:#e9edf4; }
/* The profit-factor / payoff bars ran on a white track. */
html:not([data-theme="dark"]) .dm-bar { background:rgba(20,28,40,0.10); }
/* White-overlay hover, invisible on white — same fix as every other one. */
html:not([data-theme="dark"]) .dm-hero-sub:hover { background:rgba(0,0,0,0.05); color:var(--text-dim); }
/* The starting-balance editor was a dark well; on light it is a plain field. */
html:not([data-theme="dark"]) .dm-edit { background:#ffffff; color:var(--text); }
/* Ring track and factor tracks used --bg-elevated, which is white here — the
   77/100 arc floated on nothing and the six factor bars had no rail. */
html:not([data-theme="dark"]) #scoreCard .score-ring-track { stroke:#e7ecf3; }
html:not([data-theme="dark"]) #scoreCard .score-factor-track { background:#eef1f6; }

/* -------------------------------------------------------------------
   Landing page (index.html)
   -------------------------------------------------------------------
   This page needed the most, because almost everything on it is glass.
   Two families, and they fail in opposite directions:

     - Surfaces written as a translucent DARK over the page — .navlinks,
       .feat-mini, .price-card, .final-cta. These stay dark on a light
       page, so dark text lands on a dark panel. Measured before this:
       1.15:1 for the headline inside .feat-text.
     - Surfaces written as a translucent WHITE lift — the mockup chrome,
       .qcol, .pain-txt, .feat-text, .step and their parts. At 3-10%
       white they are white-on-light and the card loses its surface
       altogether.

   Both become a plain white panel. The border and shadow already carry
   the separation on light, so the glass has nothing left to do. */
html:not([data-theme="dark"]) .navlinks,
html:not([data-theme="dark"]) .feat-mini,
html:not([data-theme="dark"]) .price-card:not(.pro),
html:not([data-theme="dark"]) .final-cta,
html:not([data-theme="dark"]) .qcol,
html:not([data-theme="dark"]) .feat-text,
html:not([data-theme="dark"]) .step,
html:not([data-theme="dark"]) .hs-pop {
  background:var(--bg-card);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  /* Their borders are white at 11-15% — the outline half of the glass effect,
     which needs a dark ground to be an outline at all. Measured on white:
     .qcol 0.11, .pain-txt 0.13, .step 0.13, .feat-text 0.15, all of them
     invisible. Without this the whole boundary would rest on the shadow. */
  border-color:var(--border-soft);
}
/* The specular sheens painted along their top edges belong to the same effect —
   white highlights that on a white card are nothing at all, but which also stop
   the shadow's contact ring from reading cleanly along that edge. */
html:not([data-theme="dark"]) .step::before { display:none; }
/* The nav pill. The group rule above made it white, and a white pill on the
   white top bar is a shape held up by nothing but a hairline — which is what
   was reported. It becomes a segmented control instead: a tinted track behind
   a clearly darker line, and the active link sits on it as a white segment
   (the base's --bg-elevated already resolves to white here) with a whisper of
   shadow so it reads as raised rather than painted.
   The hover override exists because the base hover uses --bg-hover, which is
   now the track's own colour — hovering would do nothing. Halfway to white
   keeps hover and active moving in the same direction. */
html:not([data-theme="dark"]) .navlinks {
  background:#e9edf4;
  /* var(--border), not the #c9d3e0 this was: that literal was picked to be
     clearly darker than the border token of the time, and once the tokens were
     darkened site-wide it became the LIGHTER of the two — the opposite of what
     it is for. Referencing the token keeps the relationship whichever way the
     tokens move next. */
  border-color:var(--border);
}
html:not([data-theme="dark"]) .navlinks a:hover { background:rgba(255,255,255,0.65); }
html:not([data-theme="dark"]) .navlinks a.active {
  box-shadow:0 1px 2px rgba(20,28,40,0.10), 0 0 0 1px rgba(20,28,40,0.04);
}

/* Die Auswahlreihe unter dem Laptop, und es ist dieselbe Sache wie die Nav-Pille
   darueber: die Schiene nimmt --bg-card, auf hell also reines Weiss, und eine
   weisse Schiene auf weisser Seite ist keine Schiene. Zu sehen waren vier
   Woerter und eine blaue Pille — dass die anderen drei anklickbar sind, war
   nicht zu sehen. Getoente Schiene mit klar dunklerer Linie, wie bei .navlinks,
   und die gewaehlte Pille bekommt einen Schatten, damit sie erhaben statt
   aufgemalt wirkt. */
html:not([data-theme="dark"]) .lap-tabs {
  background:#dde4ef;
  border-color:var(--border);
}
/* Und der eigentliche Griff: jede nicht gewaehlte Option bekommt eine eigene
   weisse Flaeche. Eine getoente Schiene allein macht die Gruppe sichtbar, aber
   nicht die einzelnen Knoepfe — man sah weiterhin drei Woerter und eine Pille.
   Vier Chips auf getoentem Grund sagen ohne Worte, dass hier vier Dinge zur
   Wahl stehen. */
html:not([data-theme="dark"]) .lap-tab:not(.is-on) {
  background:#ffffff;
  box-shadow:0 1px 1px rgba(20,28,40,0.07), 0 0 0 1px rgba(20,28,40,0.06);
}
/* Der Basis-Hover nimmt --bg-hover (#f1f4f9), und das ist fast die Schienenfarbe
   selbst — Zeigen mit der Maus haette praktisch nichts getan. Halbwegs zu Weiss
   laesst Hover und Auswahl in dieselbe Richtung laufen. */
html:not([data-theme="dark"]) .lap-tab:not(.is-on):hover { background:#f4f7fc; color:var(--text); }
html:not([data-theme="dark"]) .lap-tab.is-on { box-shadow:0 1px 3px rgba(20,28,40,0.22); }
/* Die beiden Pfeile lagen aus genau demselben Grund unsichtbar auf der Seite. */
html:not([data-theme="dark"]) .lap-arrow { background:#e9edf4; border-color:var(--border); }
html:not([data-theme="dark"]) .lap-arrow:hover { background:#ffffff; }

/* The mockup's own chrome: it sits on the mockup panel rather than the page,
   so it wants a faint grey rather than white-on-white. */
html:not([data-theme="dark"]) .cal-spark,
html:not([data-theme="dark"]) .cal-filter,
html:not([data-theme="dark"]) .cal-kpi,
html:not([data-theme="dark"]) .cal-nav span,
html:not([data-theme="dark"]) .step-ic,
html:not([data-theme="dark"]) .step-dot { background:#eef2f8; }
/* The showcase calendar's two surfaces, flipped in one place. The dark build
   sinks a dark cell into a lighter panel; on white the same reading needs the
   opposite order, so the panel takes the tint and the cells stay white. Same
   inversion the app's own calendar makes, and for the same reason: sunk-in is
   a relationship, not a colour.
   .cal-day and .cal-day.off both inherit from --cs-cell now, so the old pair
   of overrides is one variable swap. */
html:not([data-theme="dark"]) .calshow {
  --cs-panel:#e8eef6;
  --cs-cell:#ffffff;
  --cs-chrome:#f3f6fb;
  box-shadow:
    0 0 0 1px rgba(20,28,40,0.05),
    0 24px 50px -30px rgba(20,28,40,0.30);
}
/* The laptop around it. The lid stays dark in both themes on purpose: a screen
   is dark when it is off and framed in something dark when it is on, and a pale
   grey bezel around a pale grey calendar would leave nothing to tell the two
   apart. Only the deck lightens, the way an aluminium body does against a white
   page, and it needs the same selector weight as the rule above or the panel
   keeps the free-standing shadow it has no use for inside a frame. */
html:not([data-theme="dark"]) .laptop-screen {
  background:linear-gradient(160deg,#2c3546 0%,#1d242f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 30px 55px -28px rgba(20,28,40,0.48);
}
/* Silver aluminium, same reasoning as the dark deck it mirrors (see
   .laptop-base in index.html): the hinge seam on top is dark, the highlight
   sits a pixel below it on the deck's own front edge, and a gradient across the
   width curves the metal. The old version put a near-white 1px line directly
   under the dark bezel, which is what made the whole thing read as a scrollbar
   parked under the screen. */
html:not([data-theme="dark"]) .laptop-base {
  background:
    linear-gradient(90deg, rgba(20,28,40,0.16) 0%, rgba(20,28,40,0) 8%, rgba(20,28,40,0) 92%, rgba(20,28,40,0.16) 100%),
    linear-gradient(180deg,#e6ebf2 0%,#cfd7e2 32%,#b3bccb 72%,#9aa5b6 100%);
  box-shadow:
    inset 0 1px 0 rgba(20,28,40,0.34),
    inset 0 2px 0 rgba(255,255,255,0.85),
    0 16px 24px -12px rgba(20,28,40,0.36);
}
html:not([data-theme="dark"]) .laptop-base::after {
  background:linear-gradient(180deg, rgba(20,28,40,0.19), rgba(20,28,40,0.07));
}
html:not([data-theme="dark"]) .calshow-hero { box-shadow:none; }
html:not([data-theme="dark"]) .fv-day.empty { background:#e8edf5; }
html:not([data-theme="dark"]) .plan-cmp-table tbody tr:not(.plan-cmp-grp):hover td {
  background:rgba(0,0,0,0.035);
}
/* #84aeff is the light blue used for small emphasis text. It was chosen to clear
   4.5:1 against the dark page and manages 2.22 on white, so every user of it
   moves to --accent-text. The list is the grep, not a guess — .feat-kicker and
   .fm-kicker were the two an eyeball would have missed. */
html:not([data-theme="dark"]) .section-tag,
html:not([data-theme="dark"]) .cal-sum,
html:not([data-theme="dark"]) .cal-weekrow .cal-wh-sum,
html:not([data-theme="dark"]) .hs-tag,
html:not([data-theme="dark"]) .qcol-us .qcol-h,
html:not([data-theme="dark"]) .qcol-us .qcol-foot,
html:not([data-theme="dark"]) .feat-kicker,
html:not([data-theme="dark"]) .feat-mini .fm-kicker,
html:not([data-theme="dark"]) .fv-cal-week .fv-wsum-h,
html:not([data-theme="dark"]) .fv-wsum,
html:not([data-theme="dark"]) .cur { color:var(--accent-text); }
/* The tag in the problem section is a pale red on a red wash — 2.57:1 here. It
   is keyed off the section id, not a class on the tag; the comment beside it in
   index.html notes it was already the worst of the set on dark, at 2.79:1. */
html:not([data-theme="dark"]) #pain .section-tag { color:var(--red-text); background:#ffffff; }
/* On light the kicker becomes a white chip rather than a tinted wash. The wash
   earns its keep on dark, where it is the only thing giving the pill a surface;
   on the band's light gradient it reads as a flat sticker. White separates from
   both the white page and the tinted band, and the colour is carried by the
   border, the dot and the type — which on white also measure better than they
   did on the washes (6.9:1 and 6.8:1 against 5.5 and 4.7). */
html:not([data-theme="dark"]) .section-tag {
  background:#ffffff;
  box-shadow:0 1px 2px rgba(20,28,40,0.06), 0 3px 10px -6px rgba(20,28,40,0.10);
}
/* The comparison table's header row is a literal dark #1a2534, so its light grey
   labels sat at 2.94:1 on it. Light header, dark labels. */
html:not([data-theme="dark"]) .plan-cmp-table thead th,
html:not([data-theme="dark"]) .plan-cmp-table thead th:last-child {
  background:#eef2f8; color:var(--text);
}
/* The full-bleed band behind #pain, #how-it-works and #pricing, and the reason
   "Sound familiar?" was dark text on a dark strip after the palette swap: it is
   painted by .band::before, and a pseudo-element's background is not part of the
   element tree — so the contrast pass that cleared every other page walked
   straight past it and saw the white body behind instead. Three sections' worth
   of headings were invisible and the check reported zero findings.

   The band is kept, as asked, and inverted rather than removed. Its whole job in
   the dark theme is stated in the comment beside it: sit a step off the page so
   the cards on it keep their separation — page L*10, band L*14, cards L*21. On
   light that ordering mirrors: white page, a tinted band a step down, white cards
   a step back up. Same three levels, same reason, other direction. */
/* The light band was switched off three times, then asked for again — and the
   reason it kept failing is worth keeping, because it says what to avoid.
   Every earlier attempt read as "a stray grey panel": a lone tinted strip
   floating in white with nothing before or after it to make it a pattern,
   first behind #platforms, then its glow replacement, then these four.

   What changed is not the tint but the count. The page has since grown to
   17,000px, and a reader had 7,600px of it — hero through features — with no
   chapter mark at all. A strip that alternates often enough to read as rhythm
   is a different thing from one that appears once and looks misplaced, so
   #platforms joins the four that had it. That puts a band on every second
   section from there down — 3, 5, 7, 9 and then #pricing — instead of leaving
   the whole top half unmarked.

   The structural job stays as it was stated: page, band, card as three levels
   of separation. On white that ordering mirrors the dark one — white page,
   tinted band a step down, white cards a step back up on their shadows. The
   colour lives in --band on index.html so both themes are tuned in one place.
   If it reads as a grey panel again, that token is the single thing to change. */
html:not([data-theme="dark"]) .band::before {
  background: var(--band);
  border-color: var(--band-edge);
}

/* -------------------------------------------------------------------
   The Pro price card
   -------------------------------------------------------------------
   The one card deliberately left out of the .card rules, because in the dark
   theme it is the lit one — the whole point of the pair is that Pro has a
   surface and Free does not. Excluding it from the palette swap left it with
   its dark gradient, whose second stop is rgba(30,40,54,0.6): over white that
   composites to a murky grey-blue, and the feature list, the small print and
   the "Cancel anytime" line all sat on it at a fraction of their contrast.

   This is also where the contrast pass has been blind. It skips any element
   whose background is a gradient, so that white-on-accent buttons are not
   reported as failures — which means every word on this card was exempt from
   checking. Two blind spots found by eye and not by the tool: pseudo-elements,
   and this.

   Still the lit card, in light terms: the accent tint stays at the top and
   fades into white instead of into dark, the accent border stays, and the
   emphasis comes from a soft accent glow rather than from being darker than
   its neighbour. */
html:not([data-theme="dark"]) .price-card.pro {
  background:linear-gradient(180deg, rgba(46,110,224,0.10), #ffffff 46%);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:
    0 0 0 1px rgba(46,110,224,0.16),
    0 0 34px -12px rgba(46,110,224,0.30),
    0 14px 32px -18px rgba(20,28,40,0.20);
}
html:not([data-theme="dark"]) .price-card.pro:hover {
  box-shadow:
    0 0 0 1px rgba(46,110,224,0.22),
    0 0 42px -10px rgba(46,110,224,0.38),
    0 20px 40px -18px rgba(20,28,40,0.24);
}
/* The feature list was never the problem — --text-dim and --text-faint are
   correct on white, and they only read as washed out because of what sat behind
   them. That was the surface, and it is fixed above.
   Two lines do need moving, from --text-faint to --text-dim, and both for the
   same reason: they sit in the tinted top third, where the surface is at its
   darkest — rgb(219,230,247), once the accent composites over the band — rather
   than on white. Measured there, --text-faint gives 4.18:1 for the VAT line,
   under the 4.5 it clears everywhere else on the site. The foot line was worse
   still: the weakest type on the card the page is trying to sell. */
html:not([data-theme="dark"]) .price-card.pro .price-foot,
html:not([data-theme="dark"]) .price-card.pro .plan-vat { color:var(--text-dim); }

/* The hero's glow was built for a dark ground: two tinted lights that read as
   dirt on a light one. Kept, at a fraction of the strength. */
html:not([data-theme="dark"]) .mock-glow { opacity:.35 !important; }

/* -------------------------------------------------------------------
   Illustrations and their shadows
   -------------------------------------------------------------------
   The free-standing illustrations are lifted off the page by drop shadows at
   55%, 72% and 78% black. That is what it takes to separate an object from
   #121922; on white the same shadow is a grey smear under the artwork rather
   than a shadow beneath it. Same geometry, a third of the weight, and tinted
   with the page's own blue-grey instead of flat black so it reads as shade. */
html:not([data-theme="dark"]) .pain-img img {
  filter:drop-shadow(0 14px 22px rgba(20,28,40,0.16)) drop-shadow(0 2px 4px rgba(20,28,40,0.10));
}
html:not([data-theme="dark"]) .feat-row.in .fv-frame {
  filter:drop-shadow(0 18px 24px rgba(20,28,40,0.18)) drop-shadow(0 3px 5px rgba(20,28,40,0.12));
}
html:not([data-theme="dark"]) .feat-row.in:hover .fv-frame {
  filter:drop-shadow(0 24px 30px rgba(20,28,40,0.22)) drop-shadow(0 4px 6px rgba(20,28,40,0.14));
}

/* -------------------------------------------------------------------
   The toggle
   ------------------------------------------------------------------- */
/* An icon button in the top bar, sized and dressed like the controls beside it.
   Tokens only, because this one rule serves both themes: the variables resolve
   to each page's own palette. */
#tlThemeToggle {
  width:36px; height:36px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
  background:var(--bg-elevated); color:var(--text-dim);
  border:1px solid var(--border-soft); border-radius:99px;
  font:inherit; cursor:pointer;
}
#tlThemeToggle svg { width:16px; height:16px; display:block; }
#tlThemeToggle:hover { border-color:var(--accent); color:var(--accent-text); }
@media (max-width:560px) { #tlThemeToggle { width:32px; height:32px; } }
/* The fallback for a page with no nav slot (auth.html): the old floating pill,
   so the switch is never simply missing. */
#tlThemeToggle.is-floating {
  position:fixed; right:14px; bottom:14px; z-index:9999;
  background:var(--bg-card); color:var(--text); border-color:var(--border);
  box-shadow:0 6px 18px -8px rgba(20,28,40,0.35);
}
html[data-theme="dark"] #tlThemeToggle.is-floating {
  box-shadow:0 8px 22px -10px rgba(0,0,0,0.6);
}
/* -------------------------------------------------------------------
   The open trade (app.html)
   -------------------------------------------------------------------
   This view is a full-window overlay, so it never inherits the page's
   surfaces — it paints its own, and every one of them was written as a
   translucent dark. The result on white is a grey band across the top of
   an otherwise white screen.

   The header is the visible one, but it is not the rule that draws it.
   .trade-modal-header sets rgba(15,20,27,0.35); the [data-result] rules
   below it then replace that whole background with a gradient ending in
   the same literal — and a trade always has a result. So the header has
   to be answered three times, or the fix appears to do nothing. */
html:not([data-theme="dark"]) .trade-modal-header {
  background:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* The emotion of the trade still lands in the top edge, but the tint has
   to be mixed from the light theme's own green and red — the dark ones
   are far too bright to sit at 10% on white. It fades to transparent
   rather than to a dark, so the band ends in the page. */
html:not([data-theme="dark"]) .modal-full[data-result="win"] .trade-modal-header {
  background:linear-gradient(180deg, rgba(14,156,98,0.13), rgba(255,255,255,0)), #ffffff;
  border-bottom-color:rgba(14,156,98,0.30);
}
html:not([data-theme="dark"]) .modal-full[data-result="loss"] .trade-modal-header {
  background:linear-gradient(180deg, rgba(214,42,65,0.11), rgba(255,255,255,0)), #ffffff;
  border-bottom-color:rgba(214,42,65,0.30);
}
/* The overlay's own two-radial wash, for the same reason body::before is
   switched off above: a blue cast over what is meant to be white. */
html:not([data-theme="dark"]) .modal-full { background:var(--bg); }

/* Glows. On a dark ground these are light bleeding off a bright figure;
   on white the surrounding pixels are already brighter than the glow, so
   it can only darken them — a green figure picks up a dirty halo. */
html:not([data-theme="dark"]) .trade-head-pnl.pos,
html:not([data-theme="dark"]) .trade-head-pnl.neg { text-shadow:none; }
html:not([data-theme="dark"]) .trade-result-badge.win,
html:not([data-theme="dark"]) .trade-result-badge.loss,
html:not([data-theme="dark"]) .yn button.active.yes,
html:not([data-theme="dark"]) .yn button.active.buy,
html:not([data-theme="dark"]) .yn button.active.no,
html:not([data-theme="dark"]) .yn button.active.sell,
html:not([data-theme="dark"]) .qscale button.active { box-shadow:none; }

/* The badge is a --green-dim fill, and it now sits on a header that is
   itself tinted green — dim on tint left its 11px label at 4.00:1, under
   the 4.5 that size needs. Solid white instead: the label goes back to
   the 5.38:1 it has everywhere else, and the pill lifts off the band it
   sits on rather than dissolving into it. */
html:not([data-theme="dark"]) .trade-result-badge.win,
html:not([data-theme="dark"]) .trade-result-badge.loss { background:#ffffff; }

/* The note's toolbar sits directly on the writing sheet, and the sheet is
   var(--bg) — white here. A 32% dark over it is the grey smear again, and
   this one matters more than most: the whole point of that strip is that
   the surface you write on is visibly not part of it. */
html:not([data-theme="dark"]) .rte-toolbar { background:#f2f5f9; }

/* Inline editors — the fields that open in place over a trade's facts, a
   dashboard figure, and a mistake's name. All three are dark boxes that
   would appear as black holes punched into a white panel. */
html:not([data-theme="dark"]) .tf-edit,
html:not([data-theme="dark"]) .dm-edit,
html:not([data-theme="dark"]) .mrow input { background:#ffffff; }
/* White in a white row needs the stronger hairline to read as a field at
   all; the other two carry an accent border already. */
html:not([data-theme="dark"]) .mrow input { border-color:var(--border); }

/* Not inside an embedded page. connect.html, kontakt.html and faq.html are also
   shown in iframes inside the dashboard (?embed=1 hides their nav and footer),
   and each of them loads this file — so without this there would be three more
   floating switches stacked inside the dashboard's own view.
   They still follow the choice: same origin, same storage key, so the parent's
   setting is what their own head snippet reads. */
html.tl-embed #tlThemeToggle { display:none; }
