/**
 * Tweet miniature + indexed-JSON twin — self-contained component styles.
 * Pairs with tweet-miniature.js. No dependency on a page reset; everything
 * the components need (box-sizing, fonts) is scoped here.
 *
 * Code-representation font: swap candidates "DM Mono", "Recursive",
 * "Fragment Mono", "Martian Mono" — change --code-font + the @import.
 */
@import url("https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..600;1,300..600&display=swap");

:root {
  --code-font: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
  --x-blue: #1d9bf0;
  --x-name: #0f1419;
  --x-meta: #536471;
  --x-border: #eff3f4;
}

.tw,
.tw *,
.editor,
.editor * {
  box-sizing: border-box;
}

/* ───────────── the tweet miniature ───────────── */
.tw {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  background: #fff;
  color: #0f1419;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  border: 1px solid var(--x-border);
  border-radius: 1.15em;
  padding: 0.95em 1.05em;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 10px 30px -16px rgba(15, 20, 25, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.tw:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 20px 44px -18px rgba(15, 20, 25, 0.48);
}

/* sizes: only font-size + width change; everything inside is em-based */
.tw.s-xs { font-size: 10.5px; width: 184px; }
.tw.s-s  { font-size: 12px;   width: 240px; }
.tw.s-m  { font-size: 13.5px; width: 300px; }
.tw.s-l  { font-size: 15px;   width: 368px; }

.tw-av {
  position: relative;
  flex: none;
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    hsl(var(--h) 55% 58%),
    hsl(calc(var(--h) + 40) 55% 46%)
  );
}
.tw-ini { font-size: 0.95em; line-height: 1; }
.tw-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tw-body { flex: 1; min-width: 0; }

.tw-head { line-height: 1.15; }
.tw-namerow { display: flex; align-items: center; gap: 0.22em; }
.tw-name {
  font-weight: 700;
  font-size: 0.98em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-badge { flex: none; width: 1.05em; height: 1.05em; color: var(--x-blue); }
.tw-meta {
  display: block;
  color: var(--x-meta);
  font-size: 0.92em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.02em;
}

.tw-text {
  margin-top: 0.5em;
  font-size: 0.97em;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lk { color: var(--x-blue); }

/* ───────────── media ───────────── */
.tw-media {
  position: relative;
  margin-top: 0.65em;
  border-radius: 0.95em;
  overflow: hidden;
  border: 1px solid rgba(15, 20, 25, 0.08);
}
.tw-media.video { aspect-ratio: 4 / 5; }
.tw-media.image { aspect-ratio: 4 / 3; }

.tw-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* skeleton media tints (placeholder mode) */
.m-day  { background: linear-gradient(160deg, #d8ded2, #b6c1b2 65%, #9eae9c); }
.m-night{ background: linear-gradient(160deg, #262b40, #14161f); }
.m-code { background: linear-gradient(160deg, #20232f, #14161d); }
.m-page { background: linear-gradient(160deg, #efe9db, #e1d8c2); }

.playbtn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.7em;
  height: 2.7em;
  border: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.5);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.playbtn::after {
  content: "";
  border-style: solid;
  border-width: 0.52em 0 0.52em 0.9em;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.18em;
}
.tw-media.real.video { cursor: pointer; }
.tw-media.playing .playbtn { opacity: 0; pointer-events: none; transform: scale(0.85); }
.bokeh { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.65; }

.codelines {
  position: absolute;
  inset: 16% 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5em;
}
.codelines span { height: 0.42em; border-radius: 0.3em; display: block; opacity: 0.85; }

.pagelines {
  position: absolute;
  inset: 14% 13%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55em;
}
.pagelines span {
  height: 0.4em;
  border-radius: 0.25em;
  background: rgba(42, 34, 20, 0.3);
  display: block;
}
.pagelines span.short { width: 62%; }
.pagelines .ul { position: relative; }
.pagelines .ul::after {
  content: "";
  position: absolute;
  left: -3%;
  right: 6%;
  bottom: -0.3em;
  height: 0.17em;
  background: #d23b2e;
  border-radius: 0.2em;
  transform: rotate(-0.7deg);
  opacity: 0.92;
}

/* ───────────── indexed JSON "editor" twin ───────────── */
.editor {
  width: 392px;
  max-width: 100%;
  height: 340px; /* fixed — the rectangle never changes size; content scrolls inside */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e9ea;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 10px 30px -16px rgba(15, 20, 25, 0.35);
  font-family: var(--code-font);
  color: #15140f;
}
.ed-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid #eef1f2;
  font-size: 10.5px;
  color: #9aa0a3;
}
.ed-tag {
  margin-left: auto;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* the query rides on top as a real search field — what the user typed, above the index it hit.
   Fully-rounded pill with a clear (×) in the bar, à la Google/Kagi. */
.ed-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin: 11px 12px 3px;
  padding: 8px 9px 8px 14px;
  border: 1px solid #e6e3da;
  border-radius: 999px;
  background: #faf9f5;
}
.ed-search-ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: #15140f;
}
.ed-q-text {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  font-family: var(--code-font);
  font-size: 12.5px;
  color: #15140f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  flex: none;
  background: #15140f;
  animation: ed-blink 1.1s steps(1) infinite;
}
@keyframes ed-blink {
  50% {
    opacity: 0;
  }
}
.ed-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa0a3;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.ed-clear svg {
  width: 14px;
  height: 14px;
}
.ed-clear:hover {
  background: rgba(21, 20, 15, 0.08);
  color: #15140f;
}

/* matched evidence — magenta, the same guide colour as the reveal connectors. The METHOD is
   carried by the underline style: solid = exact keyword (BM25), dotted = semantic (embeddings). */
.ed-hit {
  background: rgba(238, 10, 234, 0.09);
  border-radius: 2px;
  padding: 0 0.5px;
  color: inherit;
}
.ed-hit--kw {
  box-shadow: inset 0 -0.12em 0 rgba(238, 10, 234, 0.55);
}
.ed-hit--sem {
  border-bottom: 1.5px dotted rgba(238, 10, 234, 0.8);
}

.ed-body {
  flex: 1;
  min-height: 0;
  padding: 11px 13px 13px;
  font-size: 11px;
  line-height: 1.65;
  overflow-y: auto;
  overflow-x: hidden; /* never a horizontal scrollbar */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* hidden until hover */
}
.ed-body:hover { scrollbar-color: rgba(21, 20, 15, 0.18) transparent; }
.ed-body::-webkit-scrollbar { width: 8px; }
.ed-body::-webkit-scrollbar-thumb {
  background: transparent; /* hidden until hover */
  border-radius: 6px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
.ed-body:hover::-webkit-scrollbar-thumb { background: rgba(21, 20, 15, 0.18); }
.ed-body::-webkit-scrollbar-track { background: transparent; }

.ed-line { display: flex; align-items: flex-start; }
.ed-gutter {
  flex: none;
  width: 1.6em;
  text-align: center;
  opacity: 0.4;
  user-select: none;
  font-size: 1em; /* bigger fold triangle */
  line-height: 1.65;
}
.ed-fold {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.16s ease;
}
.ed-line.open .ed-fold { transform: rotate(90deg); }
/* collapsed lines truncate to one line with a single ellipsis — no horizontal scroll */
.ed-code {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* typeface-only "highlighting", near-equal sizes — distinction is weight + opacity, not size */
.ed-key {
  font-size: 0.92em;
  letter-spacing: 0.05em;
  font-weight: 500;
  opacity: 0.55;
}
.ed-punc, .ed-q { opacity: 0.3; }
.ed-val { font-weight: 400; }
.ed-val--desc { font-style: italic; } /* AI-generated description reads as italic */

.ed-line.foldable .ed-key,
.ed-line.foldable .ed-fold { cursor: pointer; }

/* Xcode-style folded badge: a soft pill of three dots replacing the string */
.ed-pill {
  display: none;
  align-items: center;
  gap: 2.5px;
  height: 1.15em;
  padding: 0 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(21, 20, 15, 0.09);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}
.ed-pill:hover { background: rgba(21, 20, 15, 0.16); }
.ed-pill i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(21, 20, 15, 0.5);
  display: block;
}
/* collapsed: hide the full value, show the dots pill between the quotes */
.ed-line.foldable:not(.open) .ed-val { display: none; }
.ed-line.foldable:not(.open) .ed-pill { display: inline-flex; }

/* expanded: wrap fully; the fixed-height body scrolls — the rectangle never grows */
.ed-line.foldable.open .ed-code {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.ed-line.foldable.open .ed-str { display: block; margin-top: 3px; }
.ed-line.foldable.open .ed-val {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}