/* ══════════════════════════════════════════════════════════════
   Keln in daylight (html[data-appearance="light"]).

   Almost all of light mode is tokens (theme.css): the palettes, and
   the channels every surface is written in. This file is the short
   list of things a token cannot say: the wordmark, the page's own
   ground, and the few surfaces whose character changes rather than
   just their colour.

   Loaded last on the app's pages, so a rule here wins over the page
   rule it refines without needing !important.

   THE LOOK. Paper-grey ground, white panels, hairline edges, shadows
   that are soft and cool rather than black, near-black ink. The sky
   stays: fine graphite stars, the Today horizon, the orbit's rings,
   now drawn in pencil instead of light.
   ══════════════════════════════════════════════════════════════ */

html[data-appearance="light"],
html[data-appearance="light"] body {
  background-color: var(--bg);
  color: var(--ink);
}

/* ── The wordmark: graphite chrome instead of white chrome ── */
html[data-appearance="light"] img[src*="keln-logo"] {
  content: url(/keln-logo-light@2x.png);
}
html[data-appearance="light"] .logo:hover .logo__img {
  filter: drop-shadow(0 0 10px rgba(var(--tint-a, 91, 140, 255), .25));
}

/* ── Glass ──────────────────────────────────────────────────
   Frosted white over a pale page: more opaque than the dark glass,
   lifted by a soft cool shadow and a single hairline. */
html[data-appearance="light"] .glass,
html[data-appearance="light"] .kcv-panel {
  box-shadow: var(--e-card);
}

/* ── Selection and focus in ink ─────────────────────────────── */
html[data-appearance="light"] ::selection {
  background: rgba(var(--tint-a, 91, 140, 255), .2);
  color: var(--ink);
}

/* ── Scrollbars that belong to a light page ─────────────────── */
html[data-appearance="light"] {
  scrollbar-color: rgba(0, 0, 0, .22) transparent;
}

/* ── The orbit ──────────────────────────────────────────────────
   The coach's own disc is paper with a pencil ring; its caption is
   haloed in white rather than in night. */
html[data-appearance="light"] .orbit-sun__disc { fill: rgba(255, 255, 255, .92); }
html[data-appearance="light"] .orbit-sun__ring { stroke: rgba(0, 0, 0, .18); }
html[data-appearance="light"] .orbit-sun__label { stroke: rgba(255, 255, 255, .92); }

/* ── The constellation: names still to reach, in readable graphite ── */
html[data-appearance="light"] .ks-lvl:not(.is-reached) .ks-name { fill: rgba(52, 58, 72, .72); }
html[data-appearance="light"] .ks-sub { fill: rgba(52, 58, 72, .55); }

/* ── Placeholders read as hints, never as filled-in values ────── */
html[data-appearance="light"] ::placeholder { color: var(--dim); opacity: 1; }