/* ── The Page at night: the galactic centre behind glass ──
   Dark theme only. Every rule here is paint: backgrounds, borders' colours, blur, shadows, text colour.
   Nothing here sets a size, a padding, a margin or a position, so light and dark stay the same page.
   Photograph: ESO / S. Guisard, CC BY 4.0, cropped and compressed in Website Photos/personal/Dark Mode. */

/* the scene: on the body, which never scrolls, so the sky holds still while the page moves over it */
/* styles.css pins the body to --bg with !important for the ocean backdrop; this outranks it by specificity */
html[data-theme="dark"] body[data-backdrop]:has(#section-overview.active) {
  background:
    linear-gradient(180deg, rgba(7,9,15,.7) 0%, rgba(7,9,15,.76) 45%, rgba(7,9,15,.9) 100%),
    #07090F url("../../Website%20Photos/personal/Dark%20Mode/galactic-centre-eso.jpg") center 40% / cover no-repeat !important;
}
html[data-theme="dark"] body:has(#section-overview.active) .hub-shell,
html[data-theme="dark"] body:has(#section-overview.active) .hub-main,
html[data-theme="dark"] body:has(#section-overview.active) #section-overview,
html[data-theme="dark"] body:has(#section-overview.active) #section-overview .ovp.ovc { background: transparent !important; }

/* the top bar: a breath of dark glass that fades into the sky */
html[data-theme="dark"] body:has(#section-overview.active) header.topbar {
  background: linear-gradient(180deg, rgba(7,9,15,.6) 0%, rgba(7,9,15,.32) 100%) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] body:has(#section-overview.active) .tn-panel,
html[data-theme="dark"] body:has(#section-overview.active) .user-dropdown {
  background: rgba(14,16,22,.78) !important; border-color: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}

/* one glass for every panel on the page */
html[data-theme="dark"] #section-overview .ovp.ovc {
  --glass: rgba(20,18,14,.46); --glass-2: rgba(20,18,14,.6); --edge: rgba(255,255,255,.13); --edge-2: rgba(255,255,255,.26);
  --card-bg: var(--glass); --line: var(--edge);
}
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-rail,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-ahead {
  background: var(--glass); border-color: var(--edge);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec.ovp-wash,
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-card,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-qb {
  background: var(--glass); border-color: var(--edge); border-top-color: var(--c, var(--edge));
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec:hover,
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-card:hover {
  background: var(--glass-2); border-color: var(--edge-2); border-top-color: var(--c, var(--edge-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
}
/* the light that catches the top-left corner of every pane */
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-rail::before,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-ahead::before,
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-card::before,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-qb::before,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 34%);
}
/* the rail and Upcoming are already sticky, so they are positioned; the cards get relative, which moves nothing */
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-card,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-qb,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec { position: relative; }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-rail > *,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-ahead > *,
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-card > *,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-qb > *,
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-trio > .ovp-sec > * { position: relative; z-index: 1; }

/* the ink on glass */
html[data-theme="dark"] #section-overview .ovp.ovc { --ink: #FFFFFF; --ink-soft: rgba(243,240,232,.84); --muted: rgba(243,240,232,.6); --whisper: rgba(243,240,232,.42); }
html[data-theme="dark"] body[data-backdrop] #section-overview .ovp.ovc #welcomeHeading { color: #fff !important; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-eb { color: #fff; }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-eb::after { background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.06)); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-photo { border-color: var(--edge); background: rgba(255,255,255,.04); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-conn { border-top-color: var(--edge); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-entry { background: rgba(255,255,255,.035); border-color: var(--edge); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-entry:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-crow + .ovp-crow,
html[data-theme="dark"] #section-overview .ovp.ovc .ovp-line + .ovp-line { border-top-color: var(--edge); }

/* the category colours, as the glass wears them */
html[data-theme="dark"] #section-overview .ovp .cat-ocean { --c: #A9BED8; }
html[data-theme="dark"] #section-overview .ovp .cat-lav { --c: #B9A3F2; }
html[data-theme="dark"] #section-overview .ovp .cat-sage { --c: #9BB097; }
html[data-theme="dark"] #section-overview .ovp .cat-amber { --c: #DDB07C; }
html[data-theme="dark"] #section-overview .ovp .cat-gold { --c: #D9C27A; }
html[data-theme="dark"] #section-overview .ovp .ovp-wash.cat-lav,
html[data-theme="dark"] #section-overview .ovp .ovp-wash.cat-ocean { background: var(--glass); box-shadow: none; }

/* buttons: the serif on tinted glass; the one solid button carries its colour */
html[data-theme="dark"] #section-overview .ovp .ovp-btn {
  background: color-mix(in srgb, var(--c, #fff) 9%, transparent);
  border-color: color-mix(in srgb, var(--c, #fff) 55%, transparent);
  color: var(--c, #fff);
}
html[data-theme="dark"] #section-overview .ovp .ovp-btn:hover { background: color-mix(in srgb, var(--c, #fff) 18%, transparent); border-color: var(--c, #fff); color: #fff; }
html[data-theme="dark"] #section-overview .ovp .ovp-btn.solid { background: var(--c); border-color: var(--c); color: #14120E; }
html[data-theme="dark"] #section-overview .ovp .ovp-btn.solid:hover { background: color-mix(in srgb, var(--c) 86%, #fff); border-color: color-mix(in srgb, var(--c) 86%, #fff); }

/* the week's line */
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-stop { border-left-color: rgba(255,255,255,.22); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-stop::before { background: rgba(10,12,18,.6); border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 4px rgba(10,12,18,.35); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-stop.today::before { background: #A9BED8; border-color: #A9BED8; box-shadow: 0 0 0 4px rgba(169,190,216,.18), 0 0 18px rgba(169,190,216,.45); }
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-stop.has::before { background: var(--c, #A9BED8); border-color: var(--c, #A9BED8); }

/* the connections rows and the rail's hairlines */
html[data-theme="dark"] #section-overview .ovp.ovc .ovc-ci { border-left-color: var(--c, var(--edge)); }

/* a hidden scrollbar on the glass panes keeps its track invisible */
html[data-theme="dark"] #section-overview .ovp.ovc ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* ── The one layout rule, asked for on 2026-10-28, and shared by both themes since the light glass arrived: the panes do not touch the top bar. The rail and Upcoming
   step in from the bar and the page edges by the same margin, and the middle column comes down with them so the
   date, the welcome and Upcoming stay on one line. Wide screens only; narrower, the rail is a band and needs none. ── */
@media (min-width: 1181px) {
  #section-overview .ovp.ovc { --pane-gap: 24px; --pane-top: 32px; --pane-side: 32px; }
  /* the shell pads the page 42px each side with a forced rule in styles.css; the panes carry their own margin instead */
  html body[data-backdrop] #section-overview .ovp.ovc.lux-overview-shell { padding-left: 0 !important; padding-right: 0 !important; }
  #section-overview .ovp.ovc .ovc-rail { margin: var(--pane-top) 0 var(--pane-gap) var(--pane-side); top: var(--pane-top); height: calc(100vh - 90px - var(--pane-top) - var(--pane-gap)); border-right-width: 1px; }
  #section-overview .ovp.ovc .ovc-ahead { margin: var(--pane-top) var(--pane-side) var(--pane-gap) 0; top: var(--pane-top); height: calc(100vh - 90px - var(--pane-top) - var(--pane-gap)); }
  #section-overview .ovp.ovc .ovc-main { padding-top: calc(35px + var(--pane-top)); }
}

/* ── The Page by day: cream cards. The same anatomy as the night pane, but the card carries its own colour, a warm
   paper cream with a hairline the colour of its shadow, and nothing shows through it (2026-10-29: Jason did not want
   the whitewash showing through and shifting the tint). Paint only. ── */
html:not([data-theme="dark"]) #section-overview .ovp.ovc { --glass: rgba(251,248,241,.97); --glass-2: rgba(253,251,247,1); --edge: rgba(92,74,48,.16); --edge-2: rgba(92,74,48,.3); --card-bg: var(--glass); --line: var(--edge); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-rail,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-ahead,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec.ovp-wash,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb {
  background: var(--glass); border-color: var(--edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb { border-top-color: var(--c, var(--edge)); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec:hover,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card:hover {
  background: var(--glass-2); border-color: var(--edge-2); border-top-color: var(--c, var(--edge-2));
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
}
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-rail::before,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-ahead::before,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card::before,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb::before,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 46%);
}
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec { position: relative; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-rail > *,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-ahead > *,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card > *,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb > *,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec > * { position: relative; z-index: 1; }
/* the smaller surfaces inside a pane sit on white */
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-entry { background: rgba(255,252,246,.7); border-color: var(--edge); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-entry:hover { background: #FFFDF8; }
html:not([data-theme="dark"]) #section-overview .ovp .ovp-wash.cat-lav,
html:not([data-theme="dark"]) #section-overview .ovp .ovp-wash.cat-ocean { background: var(--glass); box-shadow: none; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-stop::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.7); }

/* ── Arriving from Choose Your Space: the door's shore, darkened as the door left it, held over the page and then
   dissolved into it once the Overview is drawn. Compositor only: opacity and transform. ── */
.door-arrive { display: none; position: fixed; inset: 0; z-index: 9000; pointer-events: none; will-change: transform, opacity; backface-visibility: hidden; contain: strict; background: #14120E url("../../Website%20Photos/personal/waves-shore-optimized.jpg") center / cover no-repeat; transform: scale(1.02); transform-origin: 50% 50%; animation: doorArriveDrift 3s cubic-bezier(.2,.6,.2,1) forwards; }
.door-arrive::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.88) 100%); }
.door-arrive.out { animation: doorArriveDrift 3s cubic-bezier(.2,.6,.2,1) forwards, doorArriveOut 1.3s cubic-bezier(.4,0,.2,1) forwards; }
html.as-arrive .door-arrive { display: block; }
@keyframes doorArriveDrift { to { transform: scale(1.045); } }
@keyframes doorArriveOut { to { opacity: 0; } }

/* ── The Page by day: plain warm paper behind the cream cards (2026-10-29: the shore photograph came out). ── */
html:not([data-theme="dark"]) body[data-backdrop]:has(#section-overview.active) { background: #EDE9E1 !important; }
html:not([data-theme="dark"]) body:has(#section-overview.active) .hub-shell,
html:not([data-theme="dark"]) body:has(#section-overview.active) .hub-main,
html:not([data-theme="dark"]) body:has(#section-overview.active) #section-overview,
html:not([data-theme="dark"]) body:has(#section-overview.active) #section-overview .ovp.ovc { background: transparent !important; }
html:not([data-theme="dark"]) body:has(#section-overview.active) header.topbar {
  background: linear-gradient(180deg, rgba(237,233,225,.96) 0%, rgba(237,233,225,.8) 100%) !important;
  border-bottom-color: rgba(27,27,27,.08) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ── Clay and black (2026-10-29): the categories in earth colours, chosen from the palette mockup. Sessions a deep
   navy, messages navy, practice dark brown, billing black; the journal a warm lavender. By day the cards wear their
   colour (a tinted card, a heavier top band, filled buttons). Light mode only: night keeps its original hues. ── */
html:not([data-theme="dark"]) #section-overview .ovp { --purple: #7D6597; --ocean: #1C3260; --ocean-w: #E4E8F1; --amber: #2F4A69; --sage: #5B4330; --green: #5B4330; --gold: #1C1A18; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card[class*="cat-"],
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qb,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec[class*="cat-"] {
  background: color-mix(in srgb, var(--c) 12%, var(--glass)); border-color: color-mix(in srgb, var(--c) 35%, var(--edge)); border-top: 6px solid var(--c);
}
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card[class*="cat-"]:hover,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec[class*="cat-"]:hover { background: color-mix(in srgb, var(--c) 18%, var(--glass)); border-top-color: var(--c); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card .ovp-kindword,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card .ovp-kindword i,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-qband-t,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec .ovp-k,
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-trio > .ovp-sec .ovp-go { color: var(--c); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-card > .ovp-name { color: color-mix(in srgb, var(--c) 70%, #1B1B1B); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-btn[class*="cat-"]:not(.solid) { background: var(--c); border-color: var(--c); color: #fff; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-btn[class*="cat-"]:not(.solid):hover { background: color-mix(in srgb, var(--c) 86%, #000); border-color: color-mix(in srgb, var(--c) 86%, #000); color: #fff; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-btn.solid[class*="cat-"] { background: #fff; border-color: var(--c); color: var(--c); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovp-btn.solid[class*="cat-"]:hover { background: color-mix(in srgb, var(--c) 10%, #fff); }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-ai[class*="cat-"] { background: color-mix(in srgb, var(--c) 14%, #fff); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-left: 3px solid var(--c); padding: 8px 12px 9px; margin-top: 6px; }
html:not([data-theme="dark"]) #section-overview .ovp.ovc .ovc-stop.has::before { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, #F7F5F0); }