/* Aura product surfaces, rendered for the web.
   Serves /demo. NOT part of the Flutter bundle and not a component library.

   Everything here is measured off the shipped client rather than designed:
     lib/features/feed/presentation/unified_feed_card.dart
       - card: AuraSurface.card, radius AuraRadius.card (18), padding s14 (14)
       - announcement: 1.5px border at AuraSurface.accent alpha 0.45, and the
         top padding drops to 13 so the heavier edge stays load-bearing
       - time decay: eyebrow opacity 1.0 / 0.85 / 0.65 and border alpha
         0.45 / 0.28 / divider, across <=24h, 24-72h, >72h, "so an old
         statement no longer competes with fresh institutional speech"
       - OFFICIAL pill: accentSoft fill, accent@35% border, accentText 10px/800
       - type token: faint, 10px/800, rendered as "• ANNOUNCEMENT"
     lib/shared/identity/aura_identity_badge.dart  - identity chip tones
     lib/core/engagement/aura_engagement_bar.dart  - React / breakdown / Save
     lib/core/ui/substrate_chip.dart               - typed-state chip

   Depends on the tokens declared in aura.css. */

/* ── the reading column the product actually is ───────────────────────────
   Aura is a column of publications, not a grid of tiles. Widening it into
   cards-side-by-side would misrepresent the product's shape. */

.surface {
  background: var(--page);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  overflow: hidden;
}

.surface__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /* AuraGradients.header — what the client draws behind shell chrome. */
  background: var(--g-header);
  border-bottom: 1px solid var(--divider);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}

.surface__chrome b { color: var(--muted); font-weight: 700; }
.surface__spacer { flex: 1; }

.surface__body { padding: 14px; display: grid; gap: 10px; }

/* ── the publication card ─────────────────────────────────────────────── */

.pub {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: 14px;
}

/* Announcements carry a heavier, accent-coloured edge. The 1px difference is
   the point: institutional speech is visually load-bearing. */
.pub[data-official] {
  border-width: 1.5px;
  border-color: rgba(91, 108, 255, 0.45);
  padding-top: 13px;
}

/* Past 24h the same statement quietens. Past 72h it returns to a plain edge. */
.pub[data-age="recent"] { border-color: rgba(91, 108, 255, 0.28); }
.pub[data-age="recent"] .pub__eyebrow { opacity: 0.85; }
.pub[data-age="stale"]  { border-color: var(--divider); }
.pub[data-age="stale"] .pub__eyebrow { opacity: 0.65; }

.pub__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.official {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(91, 108, 255, 0.35);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.typetoken {
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.newchip {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--good-bg);
  color: var(--good-ink);
  border: 1px solid rgba(95, 217, 154, 0.25);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* author row */
.author { display: flex; align-items: flex-start; gap: 10px; }

.avatar {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--elevated);
  border: 1px solid var(--divider);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--muted);
}

.avatar[data-inst] { border-radius: var(--r-sm); color: var(--official-ink); border-color: var(--official-line); }

.author__b { min-width: 0; flex: 1; }

.author__l1 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 14px;
}
.author__name { font-weight: 600; color: var(--ink); }
.author__handle, .author__time { color: var(--muted); font-size: 13px; }
.author__dot { color: var(--faint); }

/* publication body — AuraText.body */
.pub__title {
  margin: 10px 0 4px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.pub[data-official] .pub__title { font-weight: 700; }

.pub__body {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
}

.pub__meta { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* the reply-context block: a reply belongs to what it answers */
.replyctx {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-soft);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.replyctx__l { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.replyctx__t { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* topics route, they do not rank */
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.topic {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--divider);
  color: var(--muted);
  font-size: 12px;
}

/* engagement — React, breakdown, Save. No follower count anywhere. */
.engage {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--divider);
  color: var(--muted);
  font-size: 13px;
}
.pill[data-on] { color: var(--accent-text); border-color: rgba(91,108,255,0.30); background: var(--accent-soft); }
.pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* the translate affordance sits where the reader is */
.pill[data-translate] { margin-left: auto; }

/* ── correspondence ───────────────────────────────────────────────────── */

.corr { display: grid; gap: 8px; }

.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg__b {
  max-width: 76%;
  padding: 10px 13px;
  border-radius: var(--r-card);
  background: var(--elevated);
  border: 1px solid var(--divider);
  font-size: 14px;
  line-height: 1.55;
}
.msg[data-side="out"] { justify-content: flex-end; }
.msg[data-side="out"] .msg__b { background: var(--accent-soft); border-color: rgba(91,108,255,0.28); }
.msg__who { font-size: 12px; color: var(--faint); margin-bottom: 3px; }

.corr__state {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.02);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* ── live session ─────────────────────────────────────────────────────── */

.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tile {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--elevated), var(--subtle));
  border: 1px solid var(--divider);
  position: relative;
  overflow: hidden;
}
.tile[data-speaking] { border-color: rgba(91,108,255,0.45); }
.tile__bar {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.tile__n {
  min-width: 0;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(13, 21, 32, 0.72);
  color: var(--ink);
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile__m {
  flex: none; margin-left: auto;
  color: var(--muted); font-size: 11px; font-family: var(--mono);
}

.admission {
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(237, 194, 100, 0.25);
  background: var(--warn-bg);
  border-radius: var(--r-sm);
}
.admission__t { font-size: 13px; font-weight: 600; color: var(--warn-ink); }
.admission__d { font-size: 13px; color: var(--warn-ink); opacity: 0.85; margin-top: 3px; }
.admission__a { display: flex; gap: 8px; margin-top: 10px; }
.btn {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}
.btn[data-ghost] { background: transparent; color: var(--accent-text); }

/* ── the read-out beside each surface ─────────────────────────────────── */

.readout { display: grid; gap: 10px; align-content: start; }
.readout h4 { margin: 0 0 4px; }
.readout p { font-size: 14px; color: var(--muted); margin: 0; max-width: 46ch; }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
  margin-top: var(--s24);
}

.pair[data-reverse] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

@media (max-width: 900px) {
  .pair, .pair[data-reverse] { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; }
  .msg__b { max-width: 88%; }
}


/* ── time decay, driven ────────────────────────────────────────────────────
   The client computes an age bucket and applies two numbers: a border alpha
   on the announcement's accent edge and an opacity on the OFFICIAL eyebrow.
   Both are read from CSS custom properties here so the same card can be moved
   through the rule instead of being photographed three times.

   With no script the card renders at its default fresh values, which is a
   true state — only the adjustment is lost, not the meaning. */

.decay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--s24);
  align-items: start;
  margin-top: var(--s24);
}

.pub[data-decay] {
  border-color: rgba(91, 108, 255, var(--age-alpha, 0.45));
}
.pub[data-decay] .pub__eyebrow { opacity: var(--eyebrow-op, 1); }

.decay__panel {
  background: var(--g-card);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: var(--s20);
}

.decay__age {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.decay__bucket {
  display: inline-flex;
  margin: var(--s8) 0 var(--s16);
}

.decay input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 0 0 var(--s16);
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--r-pill);
  /* The default track renders near-white on this surface. Toned to the
     divider so the control belongs to the panel it sits in. */
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
}

.decay input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--g-accent);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.45);
}

.decay input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #5B6CFF;
  border: 2px solid var(--card);
}

.decay input[type="range"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.decay__rows { border-top: 1px solid var(--divider); }

.decay__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s12);
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  color: var(--muted);
}
.decay__row b {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* the three thresholds, always visible and always correct */
.thresholds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s16); }

/* ── the speaking tile ─────────────────────────────────────────────────────
   A live session marks who is speaking. The client does this with a border,
   not a pulse, and so does this. */
.tile[data-speaking]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(91, 108, 255, 0.45);
  pointer-events: none;
}

@media (max-width: 900px) {
  .decay { grid-template-columns: 1fr; }
}