/* Dark mode for the signed-in app, 12 October 2026.
   Carl: "enable user to switch between dark mode easily in bottom left above avatar".

   Two halves, both driven by <html data-theme="dark"> (theme.js sets it, from the switch's saved choice):
   - this file: the tokens, the switch's own styling, and the few places a recolour cannot see (a dark FILL spelled with the
     text colour, a light button that carries dark text). It is loaded after app.css and onboarding.css and is inert in light.
   - theme.js: in dark it builds a recoloured copy of app.css and onboarding.css (white backgrounds, rgba(32,30,29,a)
     hairlines, washes and shadows, tint chips, the select chevrons), in the same rule order, so the cascade is app.css's own.
   Carl's rules for the app hold here too: --r1 is the only radius (none is set in this file), and nothing gets a ring or a glow. */

/* ---- the switch, above the avatar (both themes) ---- */
.rail-theme { margin-top: auto; }                 /* the pair sits at the foot of the rail: this takes the free space ...  */
.rail-theme + .rail-avatar { margin-top: 0; }     /* ... and the avatar, which had it, follows with the rail's own gap */
.rail-theme .th-sun { display: none; }
html[data-theme="dark"] .rail-theme .th-sun { display: block; }
html[data-theme="dark"] .rail-theme .th-moon { display: none; }
.rail-theme:hover { color: var(--paper); }

/* The switch cross-fades the whole page, quickly (and not at all for reduced motion). Where the browser has view transitions theme.js
   uses one: the old picture fades out over the new, which is painted in one go, so nothing changes colour before anything else. The
   pages already opt in to a .2s fade between documents (an inline rule on ::view-transition-group(root), whose old and new pictures
   inherit its duration and easing); html.theme-vt, there for the length of this one fade, gives it its own. First version .6s; Carl,
   12 October: "Ok dark mode should do that, but much faster". What made the first version a flashbang was a frame with no stylesheet
   (gone), not its length, and the curve keeps a short fade from being a jump: the first and last tenth of the change are gentle. */
html.theme-vt::view-transition-group(root) { animation-duration: .25s; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
/* Without view transitions (theme.js adds .theme-shift): each colour fades by itself, over the same .25s and the same curve. */
html.theme-shift, html.theme-shift *, html.theme-shift *::before, html.theme-shift *::after {
  transition: background-color .25s cubic-bezier(.37, 0, .63, 1), border-color .25s cubic-bezier(.37, 0, .63, 1), color .25s cubic-bezier(.37, 0, .63, 1), fill .25s cubic-bezier(.37, 0, .63, 1), stroke .25s cubic-bezier(.37, 0, .63, 1), box-shadow .25s cubic-bezier(.37, 0, .63, 1), outline-color .25s cubic-bezier(.37, 0, .63, 1) !important;
}

/* ---- the palette ---- */
html[data-theme="dark"] {
  --blue: #9aaeff;
  --blue-hover: #bac8ff;
  --blue-solid: #4169e1;
  --blue-solid-hover: #2f51b8;
  color-scheme: dark; /* the browser's own controls, scrollbars and date pickers */
  /* surfaces: the page and every card are --desk; --subtle and --fill are the two steps above it */
  --desk: #141313;    /* also theme.js's DESK_DARK, for the browser's theme-color */
  --subtle: #1a1918;
  --fill: #2a2826;
  --chev: #4a4744;
  --tint: #16213b;    /* the blue wash behind a selected or hovered row */
  /* text: --ink is the text colour in the app (125 uses), so it turns light; where it was a dark FILL it is --ink-surface */
  --ink: #ecebe9;
  --body: #cdcbc7;
  --head: #a3a19c;
  --muted: #a3a19c;
  --faint: #918f8a;   /* 5.7:1 on --desk */
  --ink-surface: #2c2a28;  /* a dark fill that has to stand out from the page: the user's bubble, an avatar disc */
  --rail-bg: #201e1d;      /* the rail is the dark strip it is in light mode, so it reads as the same object */
  --red: #e07575;          /* errors: text, edges, dots (#9b2c2c is 2.5:1 on the page); the value theme.js's LINE map gives a literal #9b2c2c; 6.4:1 on --desk */
  /* the sheet over a page (settings): the names bluemesawebsite-79's sheet reads. Its cards are a step above the panel so they read as lifted. */
  --sheet-bg: #1f1d1c; --sheet-edge: rgba(243,242,242,.14); --sheet-scrim: rgba(0,0,0,.5);
  --sheet-card: #2a2826; --sheet-shadow: 16px 0 48px rgba(0,0,0,.45);
  /* the four colour families: ink = text on a tint, solid = a filled control, tint = a wash, edge = a border, mid = a mark */
  --scan-ink: oklch(80% .11 255);  --scan-solid: oklch(55% .15 255);  --scan-tint: oklch(27% .06 255);  --scan-edge: oklch(46% .10 255);  --scan-mid: oklch(70% .14 255);
  --watch-ink: oklch(80% .10 215); --watch-solid: oklch(55% .13 215); --watch-tint: oklch(27% .05 215); --watch-edge: oklch(46% .09 215); --watch-mid: oklch(70% .12 215);
  --alert-ink: oklch(80% .11 285); --alert-solid: oklch(55% .15 285); --alert-tint: oklch(27% .06 285); --alert-edge: oklch(46% .10 285); --alert-mid: oklch(70% .14 285);
  --risk-ink: oklch(77% .13 25);
  --nudge-ink: oklch(76% .13 50); /* app.css --nudge-ink, dark: #f39762, 8.3:1 on --desk and 7.7:1 on --row-alt; a step under --risk-ink's lightness so it does not glare */
  --good-ink: oklch(78% .13 150);
  --mg-l0: 77%; --mg-c0: .13; --mg-xs: 1; /* the Watchlist Margin tile's scale (app.css .c-wl-margin.mg0 to .mg10), 13 October 2026: the numeral as light as --risk-ink, and the red steps' whole deeper wash */
  --row-alt: #1c1b1a; --row-alt-hover: #211f1e; /* The app's one alternating card tone, dark (app.css --row-alt). 15 October 2026 (Carl: "should be a subtler"): 3.9 L* above --desk, was 4.9 (#1e1d1c; the hover was #252322). */
  --tile-shadow: 0 2px 6px rgba(0,0,0,.55), 0 14px 32px -6px rgba(0,0,0,.85); /* the Watchlist tiles' lift, 13 October 2026 (app.css --tile-shadow; every tile is --row-alt, the 4.9 L* step above --desk, since Carl asked for one off-white and a shadow): black, because the warm ink of the light page's shadow would show here as a pale glow, and a shade deeper because a shadow is harder to see on a dark page; its reach, 26px, is the .pane's side padding, no more */
}

/* ---- what a recolour cannot see ---- */
/* the rail keeps its light-mode colour, and the rings and dots drawn in "the rail's colour" must too (they are spelled --ink) */
html[data-theme="dark"] .rail { background: var(--rail-bg); }
html[data-theme="dark"] .rail-dot { border-color: var(--rail-bg); }
html[data-theme="dark"] .rail-avatar.on, html[data-theme="dark"] .rail-avatar.on:hover { box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 4px var(--scan-solid); }
html[data-theme="dark"] .rail-avatar.on[data-team], html[data-theme="dark"] .rail-avatar.on[data-team]:hover { box-shadow: 0 0 0 1.5px var(--team), 0 0 0 3.5px var(--rail-bg), 0 0 0 5.5px var(--scan-solid); }

/* dark fills that were spelled --ink */
html[data-theme="dark"] :is(.fr-mark, .msg-user, .ava, .profile .avatar, .g-rew-n) { background: var(--ink-surface); }

/* the drawer and its handle were paper on a white page: a step above the dark one */
html[data-theme="dark"] :is(.tray, .tray-handle) { background: var(--subtle); }

/* light buttons on dark panels: their text was --ink, which is light now */
html[data-theme="dark"] :is(.guide-next, .pr-cmp-go) { color: #201e1d; }
html[data-theme="dark"] .guide-open::after { background-color: #2e2c2a; } /* 16 October 2026: the Guide's resting corner (app.css), a step up from the near-black page so it can be seen; its "?" stays paper */

/* tooltips were a dark chip on a light page; on a dark one they need to be lighter than it */
html[data-theme="dark"] :is(.c-ls-tip, .u-tip, .pr-tip) { background: #3a3735; }

/* R141 (16 October 2026): the Prices page's Market pulse, drawn now. Its block was a white card and its search
   interest card a light orange wash, both literals in app.css, so on a dark page the card's light figure sat on them. */
html[data-theme="dark"] .pr-pulse { background: var(--desk); border-color: rgba(236, 235, 233, .14); }
html[data-theme="dark"] .pr-pcard.int { background: oklch(30% .045 70); }
/* R146 (17 October 2026). Henry: "the brand cards look terrible on dark view". A card's tint was written on the card, where
   theme.js's recolouring never reaches, so the light tints stayed under the dark theme's light words. The dark tint and words
   are set beside the light ones (views/prices.js, from prices-chart.js heatDark); the pill under the change darkens here. */
html[data-theme="dark"] .pr-tile { background: var(--tile-bg-dark, var(--subtle)); }
html[data-theme="dark"] :is(.pr-tile-chg, .pr-tile-sub) { color: var(--tile-c-dark, var(--muted)); }
html[data-theme="dark"] :is(.pr-tile-chg.up, .pr-tile-chg.down, .pr-tile-chg.flat) { background: rgba(0, 0, 0, .24); }

/* the receipt was frosted white */
html[data-theme="dark"] .receipt { background: color-mix(in srgb, var(--desk) 70%, transparent); }

/* the loading shimmer in onboarding's figure tiles: a gradient, so theme.js leaves it alone (and a browser cannot write its rule out for
   the copy, so it is the original, with a #f3f1ef highlight, that would show): its sweep is one step above the tile, not near white */
html[data-theme="dark"] .ob-price-wait { background: linear-gradient(90deg, var(--ob-fill) 0%, #3a3735 50%, var(--ob-fill) 100%); background-size: 200% 100%; }

/* an error card is red all through (Carl, 12 October 19:58, of the Prices "could not be loaded" card in dark, to bluemesawebsite-3b:
   "Errors like this on dark mode the card should be entirely that red color style"): a red-tinted fill, a red edge, red text and a red
   button, where light has a white card with a red edge. The fill and the red are the two theme.js already gives #f7e3e3 and #9b2c2c;
   3b drew it and checked it in dark. The recolour alone left a card the page's own colour with a 2.5:1 text. */
html[data-theme="dark"] :is(.c-error, .ob-error) { background: #341919; border-color: rgba(224,117,117,.4); border-left-color: #e07575; color: #e07575; }
html[data-theme="dark"] :is(.c-error, .ob-error) p { color: #e07575; }
html[data-theme="dark"] :is(.c-error .c-btn, .ob-error .ob-btn) { background: transparent; border-color: rgba(224,117,117,.5); color: #e07575; }
html[data-theme="dark"] :is(.c-error .c-btn, .ob-error .ob-btn):hover { background: rgba(224,117,117,.16); border-color: #e07575; }

/* the Calendar's dropdown list (shared/select.css, loaded by JS after this file, so the html prefix has to outrank its defaults) */
html[data-theme="dark"] .ui-sel-panel {
  --ui-sel-bg: #1b1a19;
  --ui-sel-shadow: 0 8px 26px rgba(0,0,0,.55);
  --ui-sel-rule: rgba(243,242,242,.12);
  --ui-sel-thumb: rgba(243,242,242,.28);
}

/* ==== Past sales panel (13 October 2026): BEGIN. The chart's colours in dark ====
   app.css gives .c-ls its light --ls-* properties; a recolour never rewrites a custom property, so the dark ones are here, one block.
   Targets from Carl's mock-up in dark: the dots and the median a light blue (about #88A4FF), the bid a light orange (about #F0A66A), the grid about 8% light, the axis about #9a9791.
   Measured on --subtle (#1a1918, the chart card and the sale cards): the dots, the median and the bid clear 3:1 as marks, the axis and the bid figure 4.5:1 as text, and the number in a dot and in a chip (dark ink on the light blue) 4.5:1.
   A lit or pinned dot is the lighter step (--ls-lit) with a ring in the card's own colour; the tint under the two lines is stronger than light's, or the orange reads brown on a dark card.
   Nothing else in the panel needs a line here: its surfaces, text and hairlines are tokens and ink-alpha, which the dark tokens above and the recolour already turn. */
html[data-theme="dark"] .c-ls {
  --ls-sale: #88A4FF;
  --ls-value: #88A4FF;
  --ls-band: #88A4FF;
  --ls-bid: #F0A66A;
  --ls-bid-ink: #F0A66A;
  --ls-lit: #B9C8F6;
  --ls-grid: rgba(243,242,242,.08);
  --ls-axis: #9a9791;
  --ls-ring: var(--subtle);
  --ls-zone: rgba(243,242,242,.05);
  --ls-area-a: .16;
  --ls-band-a: .13;
  --ls-chip: #88A4FF;
  --ls-chip-ink: #141313;
}
/* ==== Past sales panel: END ==== */

/* ── Calendar colour roles (dark) ── */
/* The Calendar's colour roles on the dark page (app.css, "Calendar colour roles"): the ramp climbs from the page to the bright --watch-mid
   (14 October: the deep --watch-ink the light page uses is dark here), and today's numerals are ink on its blue. Weekend wash likewise. */
html[data-theme="dark"] #calendar { --ramp: var(--watch-mid); --h1: 14%; --h2: 27%; --h3: 42%; --h4: 56%; --h5: 82%; --fade-cap: 15%; --wknd: 2.4%; --ring-teal: var(--scan-mid); --today: var(--blue-solid-hover); --on-today: var(--ink); } /* a ring drawn inside a teal day (app.css) is the lighter blue: --blue on the deepest teal is 2.36:1, a focus mark needs 3:1 */
/* ── end of Calendar colour roles (dark) ── */

/* ── Watchlist: the cool palette (dark): BEGIN ── */
/* Neutral dark surfaces mirror the selected white-card design, with readable text and the existing action hues. */
html[data-theme="dark"] {
  --wlc-card: #1e1d1c;
  --wlc-soft: #1a1918;
  --wlc-bid: #201e1c;
  --wlc-hair: #373431;
  --wlc-edge: #59544f;
  --wlc-ink: #ecebe9;
  --wlc-body: #cdcbc7;
  --wlc-muted: #a3a19c;
  --wlc-dot: #77716b;
  --wlc-dash: #6b655e;
  --wlc-btn: #1c1a18;
  --wlc-fill: #292623;
  --wlc-navy: #2a58a3; --wlc-navy-hover: #3567b8; --wlc-on-navy: #fff;
  --wlc-when-bg: #292623; --wlc-when-ink: #cdcbc7;
}
/* ── Watchlist: the cool palette (dark): END ── */

/* 16 October 2026: softer, higher-contrast watch information tabs. */
html[data-theme="dark"] .wi-tabs { border-bottom-color: #383838; }
html[data-theme="dark"] .wi-tabs button { color: #aaa8a5; }
html[data-theme="dark"] .wi-tabs button:hover { color: #ecebe9; }
html[data-theme="dark"] .wi-tabs button[aria-pressed="true"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Approved graphite theme: surfaces indicate hierarchy; accents indicate meaning. */
html[data-theme="dark"] {
 --desk:#111318; --subtle:#191c22; --fill:#2e333c; --chev:#4b5564;
 --ink:#e8ebf0; --body:#c0c7d2; --head:#a3abb7; --muted:#a3abb7; --faint:#8993a3;
 --blue:#94abfa; --blue-hover:#b5c5ff; --blue-solid:#5076e6; --blue-solid-hover:#4164cf; --tint:#1c2844;
 --ink-surface:#263143; --rail-bg:#15181e;
 --red:#e99696; --risk-ink:#e99696; --good-ink:#8dc4a5; --nudge-ink:#e0b578;
 --row-alt:#191c22; --row-alt-hover:#20242b;
 --sheet-bg:#191c22; --sheet-card:#20242b; --sheet-edge:#2e333c;
 --wlc-card:#191c22; --wlc-soft:#20242b; --wlc-bid:#191c22;
 --wlc-hair:#2e333c; --wlc-edge:#3b4350; --wlc-ink:#e8ebf0; --wlc-body:#c0c7d2; --wlc-muted:#a3abb7;
 --wlc-btn:#20242b; --wlc-fill:#262d38; --wlc-dot:#8993a3; --wlc-when-bg:#20242b; --wlc-when-ink:#a3abb7;
 --tile-shadow:0 3px 12px rgb(0 0 0 / 18%);
}
html[data-theme="dark"] #view .c-wl-table[data-view] > .c-wl-row,
html[data-theme="dark"] #calendar .ledger-layout .pcards > li.session-result {
 --desk:#191c22; --fill:#2e333c;
 background:#191c22; border-color:#2e333c; box-shadow:none;
}
html[data-theme="dark"] #view .c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn),
html[data-theme="dark"] #calendar .session-result > .ledger-save {
 background:#191c22; border-color:#2e333c;
}
html[data-theme="dark"] #view .c-wl-table[data-view] > .c-wl-row .c-wl-actions > .ap-btn {
 position:relative; color:#a3abb7;
}
html[data-theme="dark"] #view .ap-btn.has svg path:first-child { fill:none; }
html[data-theme="dark"] #view .ap-btn.has::before {
 content:""; position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:#5076e6;
}
html[data-theme="dark"] #view :is(.c-wl-when.soon,.c-wl-when.near,.c-wl-left.soon,.c-wl-left.near) {
 --risk-ink:#e0b578; color:#e0b578;
}
html[data-theme="dark"] #view :is(.c-wl-left.soon,.c-wl-left.near) :is(b,.c-wl-in) { color:#e0b578; }
html[data-theme="dark"] #view .composer { background:#20242b; border-color:#2e333c; box-shadow:none; }
html[data-theme="dark"] #view .composer:is(:hover,:focus-within) { border-color:#536486; }
html[data-theme="dark"] :is(.msg-user,.ava,.profile .avatar) { background:#263143; }
html[data-theme="dark"] .ui-sel-panel { --ui-sel-bg:#20242b; --ui-sel-rule:#2e333c; }
html[data-theme="dark"] .wi-tabs { border-bottom-color:#2e333c; }
html[data-theme="dark"] .wi-tabs button { color:#a3abb7; }
/* R162 (20 October 2026): an auction house's weekly bars (views/house.js) in the lighter blue the dark page draws its marks in, as the
   design's dark tokens have them; the hover a step lighter still */
html[data-theme="dark"] .hs-bar .bb { background: var(--scan-mid); }
html[data-theme="dark"] .hs-bar:hover .bb { background: var(--scan-ink); }