/* =========================================================================
   rudderless — raft app page
   Compact breadcrumb header (logo + rudderless/raft), then copy and a framed
   screenshot that swaps with the theme. Type sizes mirror the landing page:
   body copy is 1rem, small tags match the landing's labels. Pairs with base.css.
   ========================================================================= */

/* ---- Copy (same sizes as the landing page) ------------------------------ */

/* Lead rides the 1rem body size, like the landing's intro. */
.lead {
  margin: 1.2rem 0 0;
  color: var(--ink);
}

/* Status — matches the landing's .app-status. */
.status {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ---- Screenshot ---------------------------------------------------------
   The PNGs are macOS window captures with transparent rounded corners and a
   soft drop shadow baked in, so they float on the page inside the rails with
   no extra frame. The screenshot is bracketed by two single hairline rules
   that span exactly rail-to-rail, meeting the vertical rails to frame it. */

/* The screenshot is a button: click anywhere on it to open the lightbox. */
.shot {
  position: relative;
  display: block;
  width: 100%;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Small "expand" affordance in the corner, like Zed's. The translucent chip
   keeps the icon legible over either themed screenshot; it brightens on hover
   or keyboard focus. Decorative — the whole .shot button is the click target. */
.shot-expand {
  position: absolute;
  right: clamp(0.85rem, 2.4vw, 1.4rem);
  bottom: clamp(0.85rem, 2.4vw, 1.4rem);
  display: inline-flex;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  color: var(--muted);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.shot-expand svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.shot:hover .shot-expand,
.shot:focus-visible .shot-expand {
  color: var(--ink);
  border-color: var(--cross);
}

/* Click-to-enlarge overlay. The native <dialog> brings its own dimmed
   backdrop, Esc-to-close, focus trap, and top-layer painting (above the fixed
   rails and paper), so this only styles the frame and the image. A click
   anywhere — backdrop or image — closes it (wired in theme.js). */
.lightbox {
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-out;
}

/* showModal() focuses the dialog; it's a control-less image viewer, so drop
   the focus ring the browser draws around it (Esc still closes it). */
.lightbox:focus,
.lightbox:focus-visible {
  outline: none;
}

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
}

/* Dim the page behind the image. pointer-events:none lets a click on the
   backdrop fall through to the document, where it's caught to close the dialog
   — Safari doesn't reliably dispatch ::backdrop clicks to the dialog, and the
   newer closedby="any" light-dismiss isn't supported there yet. No blur here:
   backdrop-filter on ::backdrop is a Safari paint bug that drops the dim. */
.lightbox::backdrop {
  background: rgb(0 0 0 / 0.55);
  pointer-events: none;
}

/* A single hairline spanning rail-to-rail, centered on the viewport so its
   ends land on the fixed rails: the frame width, clamped to the viewport less
   its gutters on screens too narrow for the full frame. (--rail itself can't
   be reused here, as its 100% would resolve against main, not the viewport.) */
.rule {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--frame), calc(100vw - 2 * var(--gutter)));
  height: 0;
  border-top: 1px solid var(--line);
}

/* The top rule sits a calm gap below the status line. */
.status + .rule {
  margin-top: clamp(2.6rem, 6vw, 3.8rem);
}