/* Design C (the day's clock), dark edition. On only when <html> carries .c-dark: the head script sets it from the
 * site-wide choice (localStorage lynxbe_theme = "dark", the same key the main site's toggle writes), and the
 * header toggle (js/home-c-theme.js) switches it. The light page stays the default. The phone screens of the
 * live dots stay light: they picture the app as it is. */

html.c-dark {
  --bg: #13111f;
  --bg-2: #1e1a33;
  --surface: #1f1c35;
  --ink: #f3f0fb;
  --ink-2: #bdb7d6;
  --ink-3: #8f8aab;
  --line: #322d4f;
  --fill: #4b3ee6;
  --fill-hover: #5b4bff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -18px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
  scrollbar-color: #3a3458 var(--bg);
}

html.c-dark ::selection { background: #5b4bff; color: #fff; }
html.c-dark h1 em, html.c-dark h2 em { color: #9488ff; }
html.c-dark .hc-foot-links a:hover, html.c-dark .hc-foot-links a:focus-visible { color: #b0a7ff; }
html.c-dark .c-top { background: rgba(19, 17, 31, 0.84); }

/* category colours: a tint of the colour on the dark surface, and a light ink */
html.c-dark .c-cat-marketing, html.c-dark .c-cat-review { --cat-soft: rgba(255, 107, 74, 0.16); --cat-ink: #ff9d86; }
html.c-dark .c-cat-communication { --cat-soft: rgba(18, 183, 106, 0.16); --cat-ink: #5ddca1; }
html.c-dark .c-cat-customers { --cat-soft: rgba(91, 75, 255, 0.24); --cat-ink: #b0a7ff; }
html.c-dark .c-cat-automation { --cat-soft: rgba(155, 92, 255, 0.22); --cat-ink: #cdaaff; }
html.c-dark .c-cat-commerce { --cat-soft: rgba(255, 173, 31, 0.16); --cat-ink: #ffc766; }
html.c-dark .c-cat-workforce { --cat-soft: rgba(46, 155, 240, 0.18); --cat-ink: #82c6f8; }
html.c-dark .c-cat-specialized { --cat-soft: rgba(240, 70, 140, 0.18); --cat-ink: #ff8fbd; }
html.c-dark .c-cat-platform { --cat-soft: rgba(16, 179, 163, 0.18); --cat-ink: #5edccf; }

/* solid fills that were the ink colour: on a dark page they are indigo, with white text */
html.c-dark .c-btn-ink,
html.c-dark .c-now time,
html.c-dark .c-act-ink,
html.c-dark .c-toast,
html.c-dark .c-term,
html.c-dark .c-live-link,
html.c-dark .c-card .c-pill-lock { background: var(--fill); color: #fff; }
html.c-dark .c-btn-ink { box-shadow: 0 10px 24px -12px rgba(91, 75, 255, 0.7); }
html.c-dark .c-btn-ink:hover, html.c-dark .c-live-link:hover { background: var(--fill-hover); }
html.c-dark .c-btn-line { color: var(--ink); border-color: var(--ink-2); }
html.c-dark .c-live-phone { background: #2a2647; }

/* the dial */
html.c-dark .c-tick { stroke: #4a4469; }
html.c-dark .c-clock-pill { fill: var(--fill); }
html.c-dark .c-ruler-knob { background: var(--surface); }
html.c-dark .c-agenda li { background: rgba(31, 28, 53, 0.72); }

/* light panels inside the moment cards */
html.c-dark .c-tag-wa, html.c-dark .c-chip-agent, html.c-dark .c-pill-sent { background: rgba(18, 183, 106, 0.18); color: #5ddca1; }
html.c-dark .c-bub-out { background: #1f4a37; color: #e6fbef; }
html.c-dark .c-auto, html.c-dark .c-st-done, html.c-dark .c-on, html.c-dark .c-rating-new,
html.c-dark .c-receipt span, html.c-dark .c-card .c-check { color: #5ddca1; }
html.c-dark .c-ticks { color: #9a97ad; }
html.c-dark .c-lead.is-moved, html.c-dark .c-rule span { background: rgba(91, 75, 255, 0.24); color: #c4bdff; }
html.c-dark .c-draft { background: rgba(155, 92, 255, 0.12); outline-color: #6d55b8; }
html.c-dark .c-draft.is-sent { background: rgba(155, 92, 255, 0.2); }
html.c-dark .c-draft-meta { color: #cdaaff; }
html.c-dark .c-pill-draft { background: var(--surface); box-shadow: inset 0 0 0 1px #4a4469; }
html.c-dark .c-pill-ok { background: rgba(155, 92, 255, 0.24); color: #d9c2ff; }
html.c-dark .c-receipt, html.c-dark .c-card .c-pill-review { background: rgba(255, 173, 31, 0.16); color: #ffc766; }
html.c-dark .c-shift-me { background: rgba(46, 155, 240, 0.2) !important; }
html.c-dark .c-draft-reply { background: rgba(255, 107, 74, 0.12); outline-color: #8a4a3c; }
html.c-dark .c-draft-reply.is-sent { background: rgba(255, 107, 74, 0.2); }
html.c-dark .c-draft-reply .c-draft-meta { color: #ff9d86; }
html.c-dark .c-card .c-pad { background: rgba(91, 75, 255, 0.1); outline-color: #5a50a8; }
html.c-dark .c-card .c-box { box-shadow: inset 0 0 0 1.5px #7d77a3; }
html.c-dark .c-card .c-pad.is-drawn .c-box { box-shadow: inset 0 0 0 4px var(--indigo), inset 0 0 0 7px var(--surface); }
html.c-dark .c-live-hint::before { box-shadow: 0 0 0 4px rgba(255, 107, 74, 0.28); }
html.c-dark .c-ind-chips li { background: var(--bg-2); }
html.c-dark .c-ind-chips li.is-on { background: var(--cat); color: #fff; }
html.c-dark.still .c-ch:nth-of-type(odd) { background: rgba(30, 26, 51, 0.6); }

/* the sections under the story */
html.c-dark .hc-ind, html.c-dark .hc-faq-item, html.c-dark .hc-group { background: var(--surface); }
html.c-dark .hc-industries, html.c-dark .hc-reel { background: var(--bg-2); }
html.c-dark .hc-more a, html.c-dark .hc-foot a, html.c-dark .hc-ind a { color: #b0a7ff; }
html.c-dark .hc-ind-other { border-color: #8478ff; }

/* the theme toggle shows the sun while dark */
html.c-dark .c-theme .c-sun { display: block; }
html.c-dark .c-theme .c-moon { display: none; }