/* ═══════════════════════════════════════════════════════════════════════
   nav.css — sidebar legibility for the ContentPad dashboard

   Loaded by BOTH index.html (app.contentpad.io) and cpd-dashboard.html.
   They carry their own copies of the same inline styles, so a fix typed
   into one of them silently leaves the other broken. One file, two links.

   ── THE THEME IS AN ATTRIBUTE ─────────────────────────────────────────
   The app switches on `html[data-cpd-theme="light"]`. The first version of
   this file ignored that and set flat colours tuned for the dark ground,
   which fixed dark mode and made light mode worse than it started:
   #C7C3D4 nav rows on a white sidebar measure 1.72:1.

   ── THE TWO PROBLEMS ARE NOT THE SAME PROBLEM ─────────────────────────
   `.nav-i` is styled `color: var(--dim)`, and --dim is ALREADY theme-aware
   (#8A8698 dark, #48434F light). Light mode was fine until this file
   overrode it. So the row colour is now set for dark only, and light is
   left alone deliberately — the app's own token measures 9.58:1 there and
   there is nothing to improve.

   `.s-sec` is the opposite. The app sets it with hardcoded literals behind
   !important:

       .s-sec                  { color:#F2EFFA !important }
       .s-sec.cpd-sec-closed   { color:#C9C1E2 !important }
       .s-sec:hover            { color:#FFFFFF !important }

   Those never change when the theme does, so the section headings have
   been near-white on a white sidebar in light mode all along — 1.13:1,
   which is what the screenshots show. Nothing without !important can
   reach them, so the rules below use it, at a higher specificity than the
   declarations they are correcting.

   ── MEASURED, BOTH THEMES ─────────────────────────────────────────────
                        was              now
     dark  .s-sec       #F2EFFA 17.1     #B58CF5   7.11 : 1
     dark  .nav-i       #8A8698  5.26    #C7C3D4  10.78 : 1
     light .s-sec       #F2EFFA  1.13    #6B39C0   7.07 : 1
     light .nav-i       #48434F  9.58    unchanged

   Dark headings were technically readable at 17:1; they are now purple
   because they are structure rather than content, and colour separates
   them from the rows at a glance in a way that another near-white does
   not. Both light values are the app's own tokens under its light theme
   (--purple and --dim), not colours invented to sit beside them.

   ── SPECIFICITY, WHICH IS MOST OF THE WORK ────────────────────────────
   `html[data-cpd-theme="light"] body .s-sec` is (0,2,1), which clears both
   `.s-sec` (0,1,0) and `.s-sec.cpd-sec-closed` (0,2,0) among !important
   declarations — so one selector covers open and collapsed sections.

   That same weight would also swallow `.s-sec:hover` (0,2,0), so hover is
   restated below. The `.nav-i` rules deliberately omit `body`, landing at
   (0,2,1), so that `.nav-i:hover` and `.nav-i.active` — restated here at
   (0,2,2) as `var(--text)`, which is what the app already uses and is
   itself theme-aware — keep winning and the selected row keeps its
   highlight in both themes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── section headings ──────────────────────────────────────────────── */

html:not([data-cpd-theme="light"]) body .s-sec {
  color: #B58CF5 !important;
}
html[data-cpd-theme="light"] body .s-sec {
  color: #6B39C0 !important;          /* the app's own light --purple */
}

/* The mobile drawer repeats the heading rule behind an id, so it needs the
   id to be outweighed rather than the class. */
html[data-cpd-theme="light"] body #cpdMobNavDrawer .s-sec {
  color: #6B39C0 !important;
}

/* Restated because the rules above outrank the app's own hover. */
html:not([data-cpd-theme="light"]) body .s-sec:hover {
  color: #FFFFFF !important;
}
html[data-cpd-theme="light"] body .s-sec:hover {
  color: #17171C !important;
}

/* ── the rows ──────────────────────────────────────────────────────── */

/* Dark only. In light the app's var(--dim) is #48434F at 9.58:1 and this
   file has no business touching it. No `body` here on purpose — see the
   specificity note above. */
html:not([data-cpd-theme="light"]) .nav-i {
  color: #C7C3D4;
}

/* var(--text) is #FFFFFF dark and #17171C light, so one rule is correct in
   both themes. */
html body .nav-i:hover,
html body .nav-i.active {
  color: var(--text);
}

/* The icons inherit currentColor but were knocked back 30% on top of it,
   which put them under the floor the text had only just cleared. */
html body .nav-i svg {
  opacity: .85;
}