/*
 * SURFACES — "paper with frosted edges" (design spec, 6 Nov 2026:
 * guest-visual-direction/surface-effects-spec.md; canvas page "Surface effects").
 *
 * Layered on glass.css (light). No new colours: the nine brand hexes plus the shipped
 * #5C3350 → #4A2340 → #36192E ramp the header and orb already use.
 *
 *   · Cards stay PAPER (elevation only).
 *   · Glass is a whisper: the ONE bottom bar (rail + dock) the feed scrolls under, and controls
 *     over photos (.surface-glass--dark).
 *   · Liquid: the sheen and press ripple on the one primary Plum button per view, and the mic orb.
 *
 * Budget: at most two blurred layers on screen (the header counts as one), blur ≤ 12 px, never on
 * an element that scrolls, never full-screen. Opaque first; blur only under @supports; html.lite
 * (Save-Data, 2G, ≤ 2 GB memory, a slow /api round trip), the offline board and
 * prefers-reduced-transparency all drop it. Never on Help, sign-in, sheet bodies or scrims.
 *
 * THE CHROME RULES BELOW ARE GATED ON `html.journal`, which js/app.js sets only when
 * `boot.trip_board` is on: with the flag off the shipped dock (flat paper, no blur — see glass.css's
 * #composer-dock note) is exactly what it was.
 */

/* Tokens live on html.journal, not :root: with the board off nothing here may change the shipped
   theme (dark mode leaves --elev-* undefined on purpose). */
html.journal {
  --elev-1: 0 1px 2px rgba(74, 35, 64, 0.06), 0 6px 16px -10px rgba(74, 35, 64, 0.16); /* resting card (= shipped) */
  --elev-2: 0 2px 4px rgba(74, 35, 64, 0.06), 0 14px 26px -12px rgba(74, 35, 64, 0.26); /* ticket, polaroid, strip */
  --elev-3: 0 2px 6px rgba(74, 35, 64, 0.08), 0 24px 56px -26px rgba(74, 35, 64, 0.42); /* sheet / menu, one at a time */
  --elev-photo: 0 1px 1px rgba(42, 18, 38, 0.14), 0 8px 16px -6px rgba(42, 18, 38, 0.28);
  --glass-tint: rgba(251, 237, 228, 0.74);
  --glass-tint-solid: rgba(251, 237, 228, 0.97);
  --glass-dark-tint: rgba(42, 18, 38, 0.64);
  --glass-blur: 12px;
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --liquid-fill: linear-gradient(180deg, #5c3350 0%, #4a2340 55%, #36192e 100%);
  --liquid-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --ease-house: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* How far the feed scrolls under the bar: the rail and the dock together (spec: 212px). */
  --journal-bar-clearance: 212px;
}

html.journal[data-theme="dark"] {
  --glass-tint: rgba(42, 18, 38, 0.74);
  --glass-tint-solid: rgba(42, 18, 38, 0.97);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.elev-0 {
  box-shadow: none;
  border: 1px solid var(--glass-line);
}

.elev-1 {
  box-shadow: var(--elev-1);
}

.elev-2 {
  box-shadow: var(--elev-2);
}

.elev-3 {
  box-shadow: var(--elev-3);
}

.elev-photo {
  box-shadow: var(--elev-photo);
}

/* ---------------------------------------------------------------- glass: opaque first */

.surface-glass {
  background: var(--glass-tint-solid);
  box-shadow: var(--glass-edge);
}

.surface-glass--dark {
  color: #fff3ea;
  background: var(--glass-dark-tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* `--flat` keeps the tint without a blur: a surface that sits inside a scroller, or would be the
     third blurred layer on screen. */
  .surface-glass:not(.surface-glass--flat) {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  }

  .surface-glass--flat {
    background: var(--glass-tint);
  }

  .surface-glass--dark {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* ---------------------------------------------------------------- liquid: primary Plum + orb */

.surface-liquid {
  position: relative;
  color: #fff3ea;
  background: var(--liquid-fill);
  box-shadow: var(--liquid-edge), 0 10px 20px -12px rgba(74, 35, 64, 0.6);
}

.surface-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.surface-liquid:active::after {
  animation: av-ripple 420ms var(--ease-house);
}

@keyframes av-ripple {
  from {
    box-shadow: 0 0 0 0 rgba(74, 35, 64, 0.24);
  }

  to {
    box-shadow: 0 0 0 18px rgba(74, 35, 64, 0);
  }
}

/* The orb's sheen: a radial highlight over the shipped ramp. The mic glyph stays white. */
html.journal .orb-core {
  background:
    radial-gradient(120% 90% at 32% 18%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #5c3350 0%, #2f1528 100%);
  box-shadow:
    0 6px 14px -8px rgba(26, 17, 57, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.32),
    inset 0 -6px 12px rgba(42, 18, 38, 0.35);
}

/* ---------------------------------------------------------------- the one bottom bar */

/* js/app.js wraps #cap-panel and #composer-dock in #journal-bar (class surface-glass) when the
   board is on: one blurred layer, pinned to the foot of #canvas, with the feed scrolling under it. */
html.journal #canvas {
  position: relative;
}

html.journal #journal-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

html.journal #journal-bar #composer-dock,
html.journal[data-theme="dark"] #journal-bar #composer-dock,
html.journal #app[data-mode="welcome"] #journal-bar #composer-dock {
  background: transparent;
  border-top: 0;
}

html.journal #app[data-mode="active"] #log-wrap {
  flex: 1 1 0%;
}

html.journal #app[data-mode="active"] #log {
  padding-bottom: var(--journal-bar-clearance);
}

/* The "jump to latest" disc lives at the foot of #log-wrap, which now runs under the bar: lift it
   clear of the bar so it stays tappable. */
html.journal #log-wrap #jump-latest {
  bottom: calc(var(--journal-bar-clearance) + 12px);
}

/* ---------------------------------------------------------------- fallbacks */

html.lite .surface-glass,
html.is-offline .surface-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--glass-tint-solid);
}

html.lite .surface-glass--dark {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(42, 18, 38, 0.8);
}

html.lite .elev-photo {
  box-shadow: 0 1px 0 rgba(42, 18, 38, 0.12);
}

@media (prefers-reduced-transparency: reduce) {
  .surface-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
    box-shadow: inset 0 1.5px 0 rgba(74, 35, 64, 0.28);
  }

  .surface-glass--dark {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #2a1226;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surface-liquid:active::after {
    animation: none;
  }
}