/* ==========================================================================
   Varelyno: dark mode, clearer text (5 Oct 2026).

   Live test: in dark mode the left menu, the grey second lines and the map
   looked dim. The secondary grey was a mid blue-grey (the evening wind-down,
   which also dimmed the app, was removed on 1 Nov).

   Rule now, in dark mode:
     * main text is near-white (not pure #fff, which glares on dark);
     * second-line text is a light grey, clearly readable;
     * the colours (accents, project colours) stay as they are: on dark they
       are used for fills, rings and icons, never for long text;
     * evening mode leaves the dark theme alone (it is already restful), and
       quiet projects and people fade less, so they can still be read.
   Every dark theme: plain Dark (data-theme="dark") and the dark colour
   themes such as Plum, Midnight and Forest (data-tone="dark").
   Loaded last, so it wins over the older dark rules.
   ========================================================================== */
/* !important: the theme script also writes these onto <html> directly */
:root:is([data-theme="dark"],[data-tone="dark"]){--text:#f3f7fb!important;--muted:#c6d2de!important}

/* the left menu */
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .nav-btn,
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .nav-btn span:not(.nav-ico){color:#f5f8fb}
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .side-label,
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .brand-title{color:#d2dde8}
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .fav span{color:#eef3f8}

/* second lines across the page */
:is([data-theme="dark"],[data-tone="dark"]) .page-title p,
:is([data-theme="dark"],[data-tone="dark"]) .info-row small,
:is([data-theme="dark"],[data-tone="dark"]) .task-info-row small,
:is([data-theme="dark"],[data-tone="dark"]) .eyebrow{color:var(--muted)}

/* the map: quiet projects and people fade less on dark */
:is([data-theme="dark"],[data-tone="dark"]) .graph-node.project-node{opacity:calc(1 - var(--v10-fog) * .24 - var(--v10-depth) * .04)}
:is([data-theme="dark"],[data-tone="dark"]) .graph-node.person-node.v10-stale{opacity:calc(1 - var(--v10-stale) * .18)}
:is([data-theme="dark"],[data-tone="dark"]) .graph-node.project-node.v10-asleep{opacity:.86!important}

/* The Varelyno name in the menu: the brand blue is made for white paper and
   sinks into a dark menu. On dark it is a light sky-blue to aqua, the logo's
   own colours, so it stays the brand and reads at a glance (5 Oct).
   A solid colour, not a gradient clipped to the text: when the PRO badge
   squeezes the name, the last letters run past the box and a clipped
   gradient left them invisible ("Varelyn"). */
:is([data-theme="dark"],[data-tone="dark"]) #sidebar .brand-wordline strong{
  color:#8ED2FF!important;-webkit-text-fill-color:#8ED2FF!important;
  background:none!important}

/* Panels with a fixed light background of their own, which left light text on
   white in a dark theme (found by a contrast scan, 5 Oct): decision cards,
   the calendar's Month / Agenda switch. */
:is([data-theme="dark"],[data-tone="dark"]) .decision-card{background:color-mix(in srgb,var(--text,#f3f7fb) 6%,var(--surface,#202c3b));border-color:var(--line,#344354)}
:is([data-theme="dark"],[data-tone="dark"]) .v10cal-modes{background:rgba(255,255,255,.07)}
:is([data-theme="dark"],[data-tone="dark"]) .v10cal-mode{color:#d3dbe6}
:is([data-theme="dark"],[data-tone="dark"]) .vc-fact.late{color:#ff9d8f}

/* The + Add menu (Person, Project, Task... New world): its words were a fixed
   dark blue from app.css and nearly vanished on dark (5 Oct). */
:is([data-theme="dark"],[data-tone="dark"]) .action-menu-pop button{color:#e8eef5}
:is([data-theme="dark"],[data-tone="dark"]) .action-menu-pop button:hover,
:is([data-theme="dark"],[data-tone="dark"]) .action-menu-pop button:focus-visible{background:rgba(255,255,255,.08);color:#fff}
:is([data-theme="dark"],[data-tone="dark"]) .action-menu-pop .space-new-item small{color:#c6d2de;opacity:1}
:is([data-theme="dark"],[data-tone="dark"]) .action-menu-pop .space-new-item{color:#8ED2FF}

/* The ⋯ menu on contact and row cards was a white box on dark: now the same
   dark panel as the + Add menu, with light words (5 Oct). */
:is([data-theme="dark"],[data-tone="dark"]) .row-menu>div{background:var(--surface,#202c3b);border-color:var(--line,#344354)}
:is([data-theme="dark"],[data-tone="dark"]) .row-menu button{color:#e8eef5}
:is([data-theme="dark"],[data-tone="dark"]) .row-menu button:hover{background:rgba(255,255,255,.08);color:#fff}