/* Instagram app — only what differs from the X panel.
 *
 * Everything structural (.rail, .tabs, .card, .btn, .editor, .sheet, .toast,
 * .empty, .verdict, .working, .failed) comes from app.css, unmodified. Two
 * things here have no counterpart on the X side and need their own rules:
 *
 *   .igmedia  — a slide strip. A carousel's argument runs ACROSS its slides, so
 *               they have to be readable in order rather than as a grid.
 *   .digest   — what the machine saw and heard. The single most important
 *               surface in this app: it is what makes a bad card diagnosable.
 */

/* The rail's back-to-platforms door and its flex layout live in app.css under
   `.rail--home` / `.backhome`, shared with the X app and the picker. */

/* Three tabs here, not the X app's four. */
.tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── media strip ─────────────────────────────────────────────────────── */

/* Horizontal scroll, not a grid: slide order carries meaning, and a wrapped
   grid silently reorders the argument on a narrow screen. Snap points make a
   thumb land on one slide at a time. */
.igmedia {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: var(--s3) 0;
  padding-bottom: var(--s1);
  scrollbar-width: none;
}

.igmedia::-webkit-scrollbar { display: none; }

.igmedia:empty { display: none; }

/* Sized by HEIGHT, not width. A 4:5 slide at full column width is ~450px tall
   on a phone, which pushed the digest — the panel this whole app exists for —
   clean off the bottom of the card. Capping the height instead keeps the
   evidence and the machine's reading of it on screen together, which is the
   comparison you are actually here to make. */
.igmedia__slide {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  height: min(34svh, 300px);
  aspect-ratio: 4 / 5;          /* Instagram's tallest feed ratio */
  width: auto;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft-2);
  box-shadow: var(--e0);
}

/* One slide: centred, with nothing peeking in from the side to imply a swipe
   that would go nowhere. */
.igmedia--single { justify-content: center; }

.igmedia__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A reel is a poster frame, never an autoplaying video: playing it would spend
   mobile data on something you are about to reject, and the digest already says
   what is in it. The badge makes clear this is a still of a video and that
   there is a real one behind the link. */
.igmedia__play {
  position: absolute;
  inset: auto var(--s3) var(--s3) auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t1);
}

.igmedia__count {
  position: absolute;
  inset: var(--s3) var(--s3) auto auto;
  padding: var(--s0) var(--s2);
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--t1);
}

/* ── the digest ──────────────────────────────────────────────────────── */

.digest {
  margin: var(--s4) 0;
  border-radius: var(--r-lg);
  background: var(--bg-soft-2);
  box-shadow: var(--lift);
  overflow: hidden;
}

.digest__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.digest__title { font-size: var(--t3); font-weight: 600; }

.digest__by {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--fg-dim);
}

.digest__chev {
  transition: transform var(--fast) var(--ease);
  color: var(--fg-dim);
}

.digest__head[aria-expanded="false"] .digest__chev { transform: rotate(180deg); }
.digest__head[aria-expanded="false"] + .digest__body { display: none; }

.digest__body {
  padding: 0 var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.digest__row { display: flex; flex-direction: column; gap: var(--s0); }
.digest__row[hidden] { display: none; }

.digest__label {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.digest__value {
  margin: 0;
  font-size: var(--t4);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Verbatim material — the transcript and the on-screen text — is somebody
   else's words, so it gets --paper, the same treatment the quoted tweet gets on
   the X side. That typographic line is the whole point: at a glance you can
   tell what was actually said from what the machine concluded. */
.digest__value--quote {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--t3);
  max-height: 11em;
  overflow-y: auto;
}

.digest__none {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--raise);
  color: var(--signal);
  font-size: var(--t3);
}

/* ── publish rows ────────────────────────────────────────────────────── */

.kit {
  margin-bottom: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  box-shadow: var(--e0), var(--lift);
}

.kit__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.kit__seq {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--fg-dim);
}

.kit__handle { font-size: var(--t3); font-weight: 600; }

.kit__text {
  margin: 0 0 var(--s3);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--read);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kit__idea {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--bg-soft-2);
  font-size: var(--t3);
  color: var(--fg-dim);
  white-space: pre-wrap;
}

.kit__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ── history rows ────────────────────────────────────────────────────── */

.hrow {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
}

.hrow__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-soft-2);
}

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

.hrow__top {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  font-size: var(--t2);
  color: var(--fg-dim);
  font-family: var(--mono);
}

.hrow__text {
  margin: var(--s1) 0 0;
  font-size: var(--t3);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hrow__tag {
  padding: 0 var(--s2);
  border-radius: var(--r-full);
  font-size: var(--t1);
}

.hrow__tag--ok  { background: var(--accent); color: var(--accent-fg); }
.hrow__tag--no  { background: var(--raise-2); color: var(--danger); }
.hrow__tag--out { background: var(--raise); color: var(--fg-dim); }