/* Backread · The Intelligence Card — component styles
   Dark-first; light theme via [data-theme="light"]. Geist + Geist Mono. */

:root {
  --grad: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(139,92,246,.20), rgba(236,72,153,.18));
  /* Motion + accent tokens (UI-polish pass, #127). ONE calm decelerate curve —
     Backread's own, deliberately NOT a bouncy/theatrical curve — plus two
     durations and the brand lilac accent so spinners/rings/glows stop being
     one-off hexes. New motion must stay inside the reduced-motion gate below. */
  --ease: cubic-bezier(0, 0, .2, 1);  /* calm decelerate — deliberately NOT Geist's slight-overshoot curve (#127) */
  /* Motion duration ladder (Geist alignment): state changes / popovers-tooltips / overlays-modals. */
  --dur-fast: .12s;     /* state changes (~Geist 150ms) */
  --dur-base: .22s;
  --dur-pop: .2s;       /* popovers, tooltips */
  --dur-overlay: .3s;   /* overlays, modals */
  --accent: #A78BFA;
  --accent-glow: rgba(167, 139, 250, .45);
}

.ic-card {
  --base: #0A0A0F; --surface: #15151E; --surface-2: #1F1F2B;
  --t-high: #ECECF3; --t-mid: #9595A6; --t-low: #565664; --t-faint: #3A3A46;
  --hair: rgba(255,255,255,.07); --hair-strong: rgba(255,255,255,.12);
  --fill1: rgba(255,255,255,.03); --fill2: rgba(255,255,255,.05); --fill3: rgba(255,255,255,.085);
  --scrim: linear-gradient(to top, rgba(8,8,13,.93) 4%, rgba(8,8,13,.55) 34%, rgba(8,8,13,0) 70%);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -24px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
}
.ic-card[data-theme="light"] {
  --base: #F8F8FC; --surface: #FFFFFF; --surface-2: #EFEFF5;
  --t-high: #101019; --t-mid: #5B5B6C; --t-low: #9090A0; --t-faint: #C3C3CE;
  --hair: rgba(16,16,25,.09); --hair-strong: rgba(16,16,25,.15);
  --fill1: rgba(16,16,25,.025); --fill2: rgba(16,16,25,.05); --fill3: rgba(16,16,25,.08);
  --scrim: linear-gradient(to top, rgba(248,248,252,.94) 2%, rgba(248,248,252,.4) 30%, rgba(248,248,252,0) 66%);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -22px rgba(40,30,70,.28), 0 2px 6px rgba(40,30,70,.08);
}

/* ── Card shell ─────────────────────────────────────────────── */
.ic-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: .5px solid var(--hair);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--t-high);
  isolation: isolate;
}
/* soft purple glow bleed behind the card top */
.ic-card::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -40%; left: 20%; width: 80%; height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--hue, #8B5CF6) 26%, transparent), transparent 70%);
  opacity: .5; filter: blur(10px);
}

/* ── Hero media ─────────────────────────────────────────────── */
.ic-hero {
  position: relative; z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.ic-hero-ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(132deg, rgba(255,255,255,.022) 0 11px, rgba(255,255,255,0) 11px 22px),
    radial-gradient(130% 120% at 72% 8%, color-mix(in oklab, var(--hue, #8B5CF6) 30%, transparent), transparent 58%),
    radial-gradient(120% 120% at 12% 96%, color-mix(in oklab, var(--hue, #8B5CF6) 16%, transparent), transparent 60%),
    var(--surface-2);
}
.ic-card[data-theme="light"] .ic-hero-ph {
  background:
    repeating-linear-gradient(132deg, rgba(16,16,25,.03) 0 11px, rgba(16,16,25,0) 11px 22px),
    radial-gradient(130% 120% at 72% 8%, color-mix(in oklab, var(--hue, #8B5CF6) 26%, transparent), transparent 58%),
    var(--surface-2);
}
.ic-hero-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-low); padding: 5px 9px; border: .5px solid var(--hair);
  border-radius: 6px; background: var(--fill1); white-space: nowrap;
}
.ic-hero-scrim { position: absolute; inset: 0; background: var(--scrim); }

/* type eyebrow chip over hero (top-left) */
.ic-eyebrow {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; padding: 6px 9px 6px 8px; border-radius: 7px; white-space: nowrap;
  background: rgba(10,10,15,.5); border: .5px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ic-eyebrow i { width: 6px; height: 6px; border-radius: 2px; background: var(--hue, #8B5CF6); box-shadow: 0 0 8px var(--hue, #8B5CF6); transform: rotate(45deg); }

/* source avatar bottom-right of hero */
.ic-avatar {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--font-body); color: #fff;
  background: linear-gradient(150deg, color-mix(in oklab, var(--hue, #8B5CF6) 80%, #000 6%), color-mix(in oklab, var(--hue, #8B5CF6) 40%, #111));
  border: 1.5px solid rgba(255,255,255,.5);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 4px rgba(10,10,15,.35);
}
.ic-avatar small {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px;
  border-radius: 50%; background: #000; border: 1.5px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
}
.ic-avatar small svg { width: 9px; height: 9px; fill: #fff; }

/* play affordance for video posters */
.ic-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(10,10,15,.42); border: .5px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.ic-play svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; }

/* ── Body ───────────────────────────────────────────────────── */
.ic-body { position: relative; z-index: 1; padding: 18px 18px 16px; }

/* no-media header (compact source row) */
.ic-mhead {
  display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
}
.ic-mhead .ic-avatar { position: static; width: 34px; height: 34px; font-size: 13px; box-shadow: none; border-width: 1px; }
.ic-mhead-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-mhead-meta b { font: 600 13px/1.2 var(--font-body); color: var(--t-high); letter-spacing: -.01em; }
.ic-mhead-meta span { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--t-low); }
.ic-mhead .ic-eyebrow { position: static; margin-left: auto; background: var(--fill2); color: var(--t-mid); border-color: var(--hair); }
.ic-mhead .ic-eyebrow i { box-shadow: none; }

.ic-headline {
  font: 600 21px/1.24 var(--font-display); letter-spacing: -.022em; color: var(--t-high);
  margin: 0 0 9px; text-wrap: balance;
}
.ic-dek {
  font: 400 14px/1.5 var(--font-body); color: var(--t-mid); margin: 0 0 15px;
  letter-spacing: -.005em; text-wrap: pretty;
}

/* ── Fact bullets ───────────────────────────────────────────── */
.ic-facts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 17px; }
.ic-fact { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; }
.ic-fact-marker {
  width: 5px; height: 5px; margin-top: 7px; border-radius: 1.5px;
  background: var(--grad); transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(139,92,246,.5);
}
.ic-fact-body { font: 400 13.5px/1.55 var(--font-body); color: var(--t-mid); letter-spacing: -.005em; }
.ic-fact-body .ent { color: var(--t-high); font-weight: 600; }

/* ── Chips ──────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  height: 19px; padding: 0 6px; margin: 0 1px;
  border-radius: 6px; border: .5px solid var(--hair);
  background: var(--fill2); color: var(--t-mid);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .01em; white-space: nowrap;
  transform: translateY(-1px);
}
.chip svg { width: 10px; height: 10px; flex: none; }
.chip b { color: var(--t-high); font-weight: 600; }

.chip--velocity svg { fill: var(--t-low); }
.chip--velocity.hot {
  color: #FBCFE8; border-color: rgba(236,72,153,.4);
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.22));
}
.chip--velocity.hot svg { fill: #F9A8D4; }
.chip--velocity.hot b { color: #fff; }

.chip--note {
  color: #FCD34D; border-color: rgba(234,179,8,.38); background: rgba(234,179,8,.1);
}
.chip--note svg { fill: #FCD34D; }
.ic-card[data-theme="light"] .chip--note { color: #92660B; background: rgba(234,179,8,.16); }
.ic-card[data-theme="light"] .chip--note svg { fill: #B27D0B; }

.chip--archive svg { fill: var(--t-low); }
.chip--archive b { color: var(--t-high); }

/* receipt (x.com post) pills — end of each bullet */
.ic-receipts { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.receipt {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 4px;
  border-radius: 999px; border: .5px solid var(--hair); background: var(--fill1);
  font: 500 10.5px/1 var(--font-mono); color: var(--t-mid); white-space: nowrap;
  transform: translateY(-1px);
}
.receipt .rdot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 600 8px/1 var(--font-body); color: #fff;
  background: linear-gradient(150deg, color-mix(in oklab, var(--rhue, #8B5CF6) 78%, #000), color-mix(in oklab, var(--rhue, #8B5CF6) 38%, #111));
}
.receipt .rmore { color: var(--t-low); font-weight: 600; }

/* ── Action row ─────────────────────────────────────────────── */
.ic-actions { display: flex; gap: 9px; }
.ic-pill {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; border-radius: 12px;
  border: .5px solid var(--hair-strong); background: var(--fill2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--t-high); font: 500 13px var(--font-body); letter-spacing: -.01em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ic-pill svg { width: 14px; height: 14px; }
.ic-pill:hover { background: var(--fill3); transform: translateY(-1px); }
.ic-pill--primary {
  background: var(--grad-soft); border-color: rgba(139,92,246,.4); color: var(--t-high);
}
.ic-pill--primary svg { fill: #C4A8FF; }
.ic-pill--primary:hover { background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(236,72,153,.26)); }
.ic-pill .arrow { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ── Skeleton ───────────────────────────────────────────────── */
.sk { position: relative; overflow: hidden; background: var(--fill2); border-radius: 6px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--fill3), transparent);
  transform: translateX(-100%); animation: sk-shimmer 1.5s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 13px; }
.sk-round { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ── Accessibility (frontend-design skill) ──────────────────────────────────
   Honour reduced-motion app-wide — not just skeletons. Covers every keyframe
   (agent pulse, count-pop, radar pulse, view pops, shimmers) + transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Visible keyboard focus — custom buttons suppress the default outline, so
   restore a brand ring on keyboard nav only (:focus-visible, not :focus). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tactile press (UI-polish #127): a down-press scale is the canonical "feels
   native" cue — there were zero :active states before. transform-only (cheap),
   reduced-motion-gated by the block above, and tap-highlight removed so it reads
   clean in the WKWebView shells. Buttons with their own inline transition keep
   it (inline wins); plain buttons get this smooth one. .ic-pill keeps its own. */
button, [role="button"] { -webkit-tap-highlight-color: transparent; transition: transform .1s var(--ease); }
button:active, [role="button"]:active, .ic-pill:active { transform: scale(.97); }

/* Display typeface (frontend-design skill): Space Grotesk carries heading
   personality; Geist stays for body + UI. Headings only. */
/* Display font is now tokenised in the HTML :root (Slop = Geist, Serious =
   Source Serif). Kept here only as a fallback if card.css loads standalone. */
:root { --font-display: 'Geist', ui-sans-serif, sans-serif; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ── So Serious skin: flatten the Intelligence Card's inline-hue glows. The
   HTML token swap handles accent / gradient / fonts; these kill the per-card
   purple radial + marker/eyebrow glows that are driven by --hue, not tokens. */
[data-skin="serious"] .ic-card::before { opacity: 0; }
[data-skin="serious"] .ic-eyebrow i { box-shadow: none; }
[data-skin="serious"] .ic-fact-marker { box-shadow: none; background: var(--accent); }
[data-skin="serious"] .chip--velocity.hot { background: var(--fill2); color: var(--t-mid); border-color: var(--hair); }
[data-skin="serious"] .chip--velocity.hot b { color: var(--t-high); }
[data-skin="serious"] .chip--velocity.hot svg { fill: var(--t-low); }
[data-skin="serious"] .ic-pill--primary { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
[data-skin="serious"] .ic-pill--primary:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
/* Safe-area insets (iOS notch / Dynamic Island / home indicator). Needs
   viewport-fit=cover on the viewport meta; resolves to 0 on desktop + non-notched. */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }