/* ═══════════════════════════════════════════════════════════════════════════
   TAYO AND YOUR MATCHES: THE PHOTOGRAPH, BY DAY AND BY NIGHT (2026-09-29)

   Eden, on seeing these two pages flattened into the warm day theme: go back
   to the previous design -- the background photograph, the texture of the
   chat boxes, the bubbles -- and for dark mode find a darker, neutral image of
   a house interior instead of leaving the page blank, the same one on both
   pages.

   So these pages do not load theme.css. By day they are exactly what they
   were: the living-room photograph with frosted glass over it. By night the
   photograph becomes a dim brick-walled room at a window
   (images/interior-night.jpg, graded from interior-brick-window.jpg: darker,
   highlights rolled off, colour pulled toward neutral) and the glass turns to
   smoked glass. Dark mode's own rule still holds -- text boxes black with
   white words, buttons white with black words or the brand orange.

   Loaded after theme-night.css and theme-dark.css. :root:root outranks the
   generated html[data-theme="dark"] rules, which would otherwise paint these
   panels flat and opaque.

   Also here, for both modes: match cards whose photographs line up (Eden:
   "do not put one image lower than the other because text is less ... let
   the text be adjusted").
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the switch, on pages without the day theme's tokens ─────────────────── */
.syn-theme-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--border);
  color: var(--ink);
}
.syn-theme-btn:hover { background: rgba(255, 255, 255, 0.95); }

/* ── match cards: every photograph on the same line ─────────────────────────
   The words take whatever room is left and the photograph sits at the foot of
   the card, so a card with a shorter title no longer lifts its photograph
   above its neighbours'. Grid rows already stretch cards to one height. */
.listing .body { flex: 1 1 auto; }
.listing .img { flex: none; }

/* ═══ NIGHT ══════════════════════════════════════════════════════════════ */
:root:root[data-theme="dark"] {
  /* A shade translucent, so the room reads through anything the generated
     rules paint as a surface. */
  --surface:   rgba(22, 24, 28, 0.86);
  --surface-2: rgba(32, 35, 39, 0.9);
  --glass:     rgba(22, 24, 28, 0.86);
  --border:    transparent;   /* no hairlines at night (theme-night.css) */
  --line:      transparent;
  --bg:        #000000;
}
:root:root[data-theme="dark"] body { background: #000000; }

/* The night photograph. */
:root:root[data-theme="dark"] :is(.tj-bg, .bg-scene) {
  background-image: url('../images/interior-night.jpg') !important;
  background-color: #000000;
}
/* The scrim behind the header words goes dark with it. */
:root:root[data-theme="dark"] .tj-bg::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0) 100%) !important;
}
@media (prefers-reduced-transparency: reduce) {
  :root:root[data-theme="dark"] .tj-bg::after { background: #000000 !important; }
}
/* The grain stays -- it is the texture -- but softer on a dark room. */
:root:root[data-theme="dark"] :is(.tj-wash, .bg-wash) { opacity: 0.45; }

/* Smoked glass: the same frost, dark. With no rim to draw its edge, the
   glass itself is a step lighter than the darkest part of the room, so a
   bubble keeps its shape against the brick. */
:root:root[data-theme="dark"] :is(.toju .bubble, .pcard, .tj-hint, .card, .tj-hist, .hist-row,
    .tj-memory, .cmpbar, .empty, .sk-card, .rc, .prox-card) {
  background: linear-gradient(135deg, rgba(44, 47, 53, 0.84), rgba(30, 32, 37, 0.74)) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
  color: var(--ink);
}
:root:root[data-theme="dark"] .tj-hist { background: rgba(10, 11, 13, 0.9) !important; }

/* What you said: a white bubble with black words. */
:root:root[data-theme="dark"] .msg.user .bubble {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}

/* Text boxes: black glass, white words. */
:root:root[data-theme="dark"] :is(.chatbox, .searchbar) {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: var(--edge, #2F3336) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
}
/* An id, because the dark input rule in theme-night.css is a long :not()
   chain that outranks any class selector; inside these boxes the field is
   the box, not a second black slab within it. */
:root:root[data-theme="dark"] :is(#tjInput, .searchbar input) {
  background: transparent !important;
  color: #FFFFFF !important;
}

/* The bars: smoked, not solid. */
/* Dark enough that the bright top of the photograph never turns it grey. */
:root:root[data-theme="dark"] :is(.appbar, .appbar.appbar) {
  background: rgba(0, 0, 0, 0.9) !important;
  border-bottom-color: transparent !important;
}
:root:root[data-theme="dark"] .appbar nav a:not(.active) { color: #C4C8CC !important; }
/* On a black bar, "Back to site" is a word, not a black box. */
:root:root[data-theme="dark"] .appbar .home { background: transparent !important; color: #FFFFFF !important; }
:root:root[data-theme="dark"] .tjm-bar {
  background: rgba(0, 0, 0, 0.62) !important;
  border-bottom-color: transparent !important;
}

/* Words that sat on light glass in near-black. */
:root:root[data-theme="dark"] :is(.listing .why b, .pcard .watch b, .listing .match) { color: var(--ink) !important; }
:root:root[data-theme="dark"] .listing .match { background: rgba(255, 255, 255, 0.08) !important; border-color: transparent !important; }

/* No rules between a card's readings at night: on smoked glass a hairline
   reads as a stripe (Eden: "the lines have to come out"). */
:root:root[data-theme="dark"] .listing :is(.why, .agy) { border-top: 0 !important; padding-top: 0 !important; }