/* ==========================================================================
   light-navy.css
   THE LIGHT THEME'S FEEL: Navy. Chosen by Andy on 2026-09-09 from the four
   concepts of the light-mode study (/lm-index): "for light mode lets use
   navy feel".

   WHAT THIS IS. The Navy preset from the study, lifted rule for rule out of
   lm.css and keyed on the light FAMILY instead of a concept attribute, so it
   applies to every light mood (Dawn, Daylight, Clarity, Quiet) on every page
   that links the token layer, with no page edited for it. It changes no token
   and no brand colour; theme-tokens.css is still the only place a surface or
   ink value lives. What moves is the FEEL on a light ground:

     the page washes    off: no corner tints, no gradient behind "Log an update"
     the card edge      one soft shadow, no hairline
     the hero           Forward navy (--primary-container), no photograph,
                        frosted white cards on it
     the accent         magenta kept for the things that act (the primary
                        button, the active tab) and the hero's emphasis line;
                        section eyebrows, quiet links and icon wells go ink/navy
     the tool tiles     one navy on a pale field, seven of them
     the picks          picture as a plate on top, words on white underneath

   WHY THE :not([data-lm]) GUARD. The study pages (/lm-a-paper and the other
   three) carry data-lm and draw their own dials from lm.css. Without the guard
   they would inherit Navy underneath whatever they were showing and the
   comparison they exist for would quietly stop being one. With it they render
   exactly as reviewed and this file cannot reach them.

   WHY THE SELECTORS ARE SHAPED LIKE THIS. html[data-theme="light"]:not([data-lm])
   is (0,2,1): one attribute above the pages' own html[data-theme="light"]
   rules, so it wins on specificity whatever order the sheets load in. The
   single !important is on the tool tile, whose colour is an inline style.

   THE DARK FAMILY IS UNTOUCHED. Nothing here matches data-theme="dark".
   ========================================================================== */

/* ---- 1. The washes, off ------------------------------------------------ */
html[data-theme="light"]:not([data-lm]) .shell::before{background:none}
html[data-theme="light"]:not([data-lm]) .logbar{background:var(--raise);border-color:var(--hair)}

/* ---- 2. The card edge: one soft shadow, no hairline -------------------- */
html[data-theme="light"]:not([data-lm]) .panel,
html[data-theme="light"]:not([data-lm]) .tg,
html[data-theme="light"]:not([data-lm]) .appt,
html[data-theme="light"]:not([data-lm]) .rcard,
html[data-theme="light"]:not([data-lm]) .ks-lookup,
html[data-theme="light"]:not([data-lm]) .ks-al,
html[data-theme="light"]:not([data-lm]) .logbar{
  border-color:transparent;
  box-shadow:0 1px 2px rgba(31,42,68,.05),0 10px 28px rgba(31,42,68,.08)}
/* the warning strips keep a coloured edge: their border is their meaning */
html[data-theme="light"]:not([data-lm]) .ks-al{border-color:rgba(148,97,10,.28)}
html[data-theme="light"]:not([data-lm]) .ks-al-high{border-color:rgba(180,35,24,.3)}

/* ---- 3. The hero: Forward navy, no photograph -------------------------- */
/* no min-height here: the resting height (460) and the takeover height (580)
   are one rule for both themes in companion.html / appts-shell.css */
html[data-theme="light"]:not([data-lm]) .opener{background:var(--primary-container)}
html[data-theme="light"]:not([data-lm]) .opener img.bg{display:none}
html[data-theme="light"]:not([data-lm]) .opener .scrim{
  background:linear-gradient(102deg,rgba(15,22,40,.35) 0%,rgba(15,22,40,0) 60%)}
html[data-theme="light"]:not([data-lm]) .opener .warm{mix-blend-mode:normal;
  background:radial-gradient(900px 520px at 100% 0%,rgba(181,37,85,.26),transparent 62%),
             radial-gradient(700px 420px at 0% 100%,rgba(0,164,153,.14),transparent 60%)}
html[data-theme="light"]:not([data-lm]) .opener h1{text-shadow:none}
html[data-theme="light"]:not([data-lm]) .opener .eyebrow{color:rgba(255,255,255,.72)}
html[data-theme="light"]:not([data-lm]) .glasscard,
html[data-theme="light"]:not([data-lm]) .hh-card,
html[data-theme="light"]:not([data-lm]) .streak{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html[data-theme="light"]:not([data-lm]) .hh-card:hover{border-color:rgba(255,255,255,.4)}

/* ---- 4. The accent, reserved ------------------------------------------- */
html[data-theme="light"]:not([data-lm]) .sec-head .eyebrow{color:var(--ink-3)}
html[data-theme="light"]:not([data-lm]) .show-all,
html[data-theme="light"]:not([data-lm]) .footlock a,
html[data-theme="light"]:not([data-lm]) .an-foot .go{color:var(--primary-container)}
html[data-theme="light"]:not([data-lm]) .ks-lookup .ic,
html[data-theme="light"]:not([data-lm]) .status-row .ic{
  background:#EEF1F7;border-color:#DDE3EC;color:var(--primary-container)}
html[data-theme="light"]:not([data-lm]) .btn-primary{box-shadow:0 2px 8px rgba(181,37,85,.22)}
html[data-theme="light"]:not([data-lm]) .hh-card .go{color:inherit;opacity:.85}

/* ---- 5. The tool tiles, one navy --------------------------------------- */
html[data-theme="light"]:not([data-lm]) .flow .fi{
  background:#EEF1F7 !important;color:var(--primary-container);border:1px solid #DDE3EC}
html[data-theme="light"]:not([data-lm]) .flow{background:var(--raise);border-color:var(--hair)}
html[data-theme="light"]:not([data-lm]) .flow:hover{background:var(--raise-2)}

/* ---- 6. The picks, on paper -------------------------------------------- */
html[data-theme="light"]:not([data-lm]) .rcard{
  height:auto;min-height:330px;display:flex;flex-direction:column;background:var(--raise)}
html[data-theme="light"]:not([data-lm]) .rcard .plate{position:relative;inset:auto;height:176px;flex:none}
html[data-theme="light"]:not([data-lm]) .rcard .plate.illus img{width:52%}
html[data-theme="light"]:not([data-lm]) .rcard .scrim{display:none}
html[data-theme="light"]:not([data-lm]) .rcard .body{
  position:relative;left:auto;right:auto;bottom:auto;padding:18px 22px 22px;color:var(--ink);
  flex:1;display:flex;flex-direction:column;align-items:flex-start}
html[data-theme="light"]:not([data-lm]) .rcard h4{color:var(--ink);margin-top:10px}
html[data-theme="light"]:not([data-lm]) .rcard p{color:var(--ink-2);padding-right:48px}
html[data-theme="light"]:not([data-lm]) .rcard .go{
  bottom:18px;right:18px;background:var(--raise-2);color:var(--ink);border:1px solid var(--hair)}
html[data-theme="light"]:not([data-lm]) .rcard:hover .go{background:var(--secondary);color:#fff}
html[data-theme="light"]:not([data-lm]) .rcard .chip{
  background:var(--raise-2);color:var(--ink-2);border:1px solid var(--hair)}