/* re4urbished platform kit · ui/route.css v1.0.0 — pairs with ui/route.js.
   Theme with the site's own tokens: set --r4-surface, --r4-ink, --r4-muted, --r4-line, --r4-accent, --r4-radius
   (fallbacks below read common kit names so most apps need nothing). */
:root {
  --r4-surface: var(--card, var(--paper, var(--surface, var(--bg, #fff))));
  --r4-ink: var(--ink, var(--text, #1d1b18));
  --r4-muted: var(--muted, #6b665f);
  --r4-line: var(--line, var(--border, rgba(0, 0, 0, .12)));
  --r4-accent: var(--accent, var(--brand, currentColor));
  --r4-radius: 16px;
}

/* ---------- routed detail: a real page, the document scrolls ---------- */
.r4-detail { display: block; max-width: 760px; margin: 0 auto; padding: 8px 16px 72px; overflow: visible; min-height: 60dvh; }
.r4-detail[hidden] { display: none !important; }
.wrap > .r4-detail { padding-left: 0; padding-right: 0; } /* the site container already has the gutter */
/* the h1 takes focus so screen readers announce the new page; no ring box around a heading */
.r4-detail [tabindex="-1"]:focus, .r4-detail [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.r4-back-row { margin: 8px 0 14px; }
.r4-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--r4-muted); text-decoration: none; font-size: .95rem; }
.r4-back:hover, .r4-back:focus-visible { color: var(--r4-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- peek: small, non-blocking, no backdrop, page stays usable ---------- */
.r4-peek {
  position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px)); max-height: min(46dvh, 420px); overflow: auto; overscroll-behavior: contain;
  background: var(--r4-surface); color: var(--r4-ink); border: 1px solid var(--r4-line); border-radius: var(--r4-radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .16); padding: 12px 14px 10px; animation: r4-rise .18s ease-out;
}
.r4-peek-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.r4-peek-title { font-size: 1rem; line-height: 1.3; padding-top: 8px; }
.r4-peek-body { font-size: .92rem; color: var(--r4-muted); margin-top: 4px; }
.r4-peek-open { margin: 10px 0 2px; }
.r4-peek-open a { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; color: var(--r4-ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 760px) { .r4-peek { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

.r4-x { flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--r4-ink); font: inherit; font-size: 1rem; cursor: pointer; border-radius: 10px; }
.r4-x:hover, .r4-x:focus-visible { background: var(--r4-line); }

/* ---------- sheet: short tasks only; scroll-trap-safe ---------- */
html.r4-locked, html.r4-locked body { overflow: hidden; }
.r4-sheet-host { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; }
.r4-sheet-host.show { visibility: visible; pointer-events: auto; }
.r4-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .18s; }
.r4-sheet-host.show .r4-sheet-bg { opacity: 1; }
.r4-sheet {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 16px); opacity: 0; transition: transform .2s ease-out, opacity .2s;
  width: min(520px, 100vw); max-height: calc(100dvh - 24px); display: flex; flex-direction: column;
  background: var(--r4-surface); color: var(--r4-ink); border-radius: var(--r4-radius) var(--r4-radius) 0 0;
  box-shadow: 0 -8px 34px rgba(0, 0, 0, .18); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.r4-sheet-host.show .r4-sheet { transform: translate(-50%, 0); opacity: 1; }
.r4-sheet-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--r4-line); }
.r4-sheet-title { font-size: 1rem; }
.r4-sheet-in { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 14px 16px 18px; }
@media (min-width: 761px) {
  .r4-sheet { top: 50%; bottom: auto; transform: translate(-50%, calc(-50% + 12px)); border-radius: var(--r4-radius); max-height: min(80dvh, 640px); }
  .r4-sheet-host.show .r4-sheet { transform: translate(-50%, -50%); }
}
@keyframes r4-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .r4-peek, .r4-sheet, .r4-sheet-bg { animation: none; transition: none; } }