/* ════════════════════════════════════════════════════════════
   PresentTool™ Storytelling — Edge-state styling (v3.7.0)
   ─────────────────────────────────────────────────────────────
   Full-screen centred layouts for every error/loading state.
   Each kind has its own tonal palette (cream / warm-dark /
   cool-grey / soft-warning) but shares typography + spacing.
   ──────────────────────────────────────────────────────────── */

/* ───── Host (replaces #story-root contents) ──────────────── */
#story-root.story-edge-host {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ───── Generic frame (per-kind tones override below) ─────── */
.story-edge {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 80px;
  text-align: center;
  background: var(--pt-bg-page);
  color: var(--pt-text);
  position: relative;
  overflow: hidden;
}

.story-edge-inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.story-edge-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: rgba(20, 18, 14, 0.04);
  color: var(--pt-text-muted);
}
.story-edge-icon svg { width: 28px; height: 28px; }

.story-edge-title {
  font-family: var(--pt-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: inherit;
}

.story-edge-sub {
  font-family: var(--pt-serif);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--pt-text-muted);
  max-width: 440px;
  margin: 0;
}
.story-edge-sub b { font-weight: 600; color: inherit; }

.story-edge-cta {
  margin-top: 6px;
  text-decoration: none;
}
.story-edge-cta svg { width: 14px; height: 14px; }

.story-edge-meta {
  font-family: var(--pt-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-text-subtle);
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid var(--pt-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

/* ───── Per-kind tones ─────────────────────────────────────── */

/* not_found · cream / muted ----------------------------------- */
.story-edge--not_found {
  background: var(--pt-bg-page);
  color: var(--pt-text);
}
.story-edge--not_found .story-edge-icon {
  background: rgba(139, 69, 19, 0.06);
  color: var(--pt-primary);
}

/* revoked · warm-dark ----------------------------------------- */
.story-edge--revoked {
  background: #1A1714;
  color: #F2EBDF;
}
.story-edge--revoked .story-edge-icon {
  background: rgba(200, 149, 108, 0.12);
  color: #C8956C;
}
.story-edge--revoked .story-edge-sub { color: rgba(242, 235, 223, 0.65); }
.story-edge--revoked .story-edge-meta {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(242, 235, 223, 0.55);
}

/* rate_limited · soft-warning -------------------------------- */
.story-edge--rate_limited {
  background: #FBF6EC;
  color: #2A1F0F;
}
.story-edge--rate_limited .story-edge-sub { color: rgba(42, 31, 15, 0.7); }
.story-edge--rate_limited .story-edge-meta {
  background: rgba(160, 114, 42, 0.08);
  border-color: rgba(160, 114, 42, 0.22);
  color: var(--pt-warning);
}

/* server_error · soft alarm (cream w/ red accent) ------------ */
.story-edge--server_error {
  background: var(--pt-bg-page);
  color: var(--pt-text);
}
.story-edge--server_error .story-edge-icon {
  background: rgba(176, 58, 46, 0.08);
  color: var(--pt-destructive);
}

/* offline · cool-grey ---------------------------------------- */
.story-edge--offline {
  background: #ECEEF1;
  color: #1F242B;
}
.story-edge--offline .story-edge-icon {
  background: rgba(31, 36, 43, 0.06);
  color: #4A5360;
}
.story-edge--offline .story-edge-sub { color: rgba(31, 36, 43, 0.65); }
.story-edge--offline .story-edge-meta {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(31, 36, 43, 0.12);
}

/* loading · cream / serene ----------------------------------- */
.story-edge--loading {
  background: var(--pt-bg-page);
  color: var(--pt-text);
}

/* ───── Loading spinner ────────────────────────────────────── */
.story-edge-spinner {
  width: 38px;
  height: 38px;
  border: 2.5px solid var(--pt-border);
  border-top-color: var(--pt-primary);
  border-radius: 50%;
  animation: pt-edge-spin 0.8s linear infinite;
}
@keyframes pt-edge-spin { to { transform: rotate(360deg); } }

/* ───── Rate-limited countdown ring ────────────────────────── */
.story-edge-countdown {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.story-edge-ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.story-edge-ring .track {
  fill: none;
  stroke: rgba(160, 114, 42, 0.18);
  stroke-width: 4;
}
.story-edge-ring .progress {
  fill: none;
  stroke: var(--pt-warning);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 263.89;        /* 2π·42 */
  stroke-dashoffset: 0;
}
.story-edge-countnum {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--pt-mono);
  font-size: 22px;
  font-weight: 500;
  color: #2A1F0F;
  font-variant-numeric: tabular-nums;
}

/* ───── Offline pulse indicator ────────────────────────────── */
.story-edge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pt-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(31, 36, 43, 0.7);
  margin-top: 4px;
}
.story-edge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4A5360;
  box-shadow: 0 0 0 0 rgba(74, 83, 96, 0.4);
  animation: pt-edge-pulse 1.6s ease-out infinite;
}
@keyframes pt-edge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 83, 96, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(74, 83, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 83, 96, 0); }
}

/* ───── Brand strip (fixed bottom) ─────────────────────────── */
.story-edge-brand {
  flex: 0 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  background: #14120E;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--pt-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Per spec: _mark.png used directly — no wrapper, no border-radius */
.story-edge-brand-mark {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  border-radius: 0;
  background: none;
}
.story-edge-brand-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
.story-edge-brand-link:hover {
  color: #fff;
  text-decoration: none;
}

/* ───── Mobile tightening ──────────────────────────────────── */
@media (max-width: 540px) {
  .story-edge { padding: 40px 20px 60px; }
  .story-edge-inner { gap: 14px; }
  .story-edge-icon { width: 56px; height: 56px; }
  .story-edge-icon svg { width: 24px; height: 24px; }
  .story-edge-meta { font-size: 10.5px; padding: 5px 10px; }
  .story-edge-brand { height: 52px; font-size: 10.5px; }
  .story-edge-brand-mark { width: 16px; height: 16px; }
}

/* ───── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .story-edge-spinner,
  .story-edge-pulse { animation: none; }
  .story-edge-ring .progress { transition: none !important; }
}