/* thoughts.css — the thoughts index and its expanded tweet cards.
   Rows are native <details> disclosures sitting on the page background like
   any other portal content. The expanded card keeps the tweet rendering
   concepts from the old dark-card page (head, media grid, quote, replies,
   stats) but re-themed onto the shared tokens. The Display Settings panel
   writes the three custom properties onto :root, so they default here and
   only change when the visitor moves a slider. */

:root {
  --card-w: 520px;    /* expanded card max-width */
  --card-fs: 15px;    /* expanded card base font size */
  --media-cap: 480px; /* height cap for single images */
}

/* ---------- table of contents ---------- */
.toc { list-style: none; margin: 0 0 var(--stack); padding: 0; font: var(--size-ui)/1.5 var(--font-ui); }
.toc li { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- index rows ---------- */
.entry { border-bottom: var(--hair); padding: 6px 0; }
.entry summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
  cursor: pointer;
  padding: 4px 0;
}
.entry summary::-webkit-details-marker { display: none; }
/* The whole row toggles; the +/- marks the disclosure. */
.entry summary::after { content: '+'; margin-left: auto; font: bold var(--size-ui) var(--font-ui); color: var(--fg-muted); flex: none; }
.entry[open] summary::after { content: '\2212'; }
/* The toc anchors jump here; the outline shows where you landed. */
.entry:target { outline: 2px solid var(--link); outline-offset: 2px; }

.thumb { width: 48px; height: 48px; object-fit: cover; border: var(--hair); flex: none; }
.rowtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.headline { font-weight: 600; }
.meta { color: var(--fg-muted); font: var(--size-ui)/1.4 var(--font-ui); }

.entry > /* Images must never drive the column's intrinsic width. */
.tweet img, .thumb { max-width: 100%; height: auto; }

.tweet { margin: 4px 0 6px; }

/* ---------- the expanded tweet ---------- */
.tweet {
  max-width: var(--card-w);
  font-family: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--card-fs);
  line-height: 1.5;
  border: var(--hair);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.tweet-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--stack); }
.tweet-head img { width: 2.67em; height: 2.67em; border-radius: 50%; flex: none; }
.tweet-head .who { line-height: 1.15; min-width: 0; }
.tweet-head .name { font-weight: 700; font-size: 1em; }
.tweet-head .handle { color: var(--fg-muted); font-size: 0.933em; }
.tweet-text { margin: 0 0 var(--stack); white-space: pre-wrap; font-size: 1em; }

/* Media: 1 = natural, 2 = side by side, 3 = big-left + stack, 4 = 2x2.
   Each image is a link that opens the stored copy full size. */
.tweet-media { display: grid; gap: 4px; margin-bottom: 0.4rem; }
.tweet-media > a { display: block; min-width: 0; min-height: 0; }
.tweet-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.tweet-media.one > a { background: var(--bg); border-radius: var(--radius); }
.tweet-media.one img { object-fit: contain; max-height: var(--media-cap); }
.tweet-media.two { grid-template-columns: 1fr 1fr; }
.tweet-media.two > a { aspect-ratio: 1 / 1; }
.tweet-media.three { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tweet-media.three > a:nth-child(1) { grid-row: span 2; aspect-ratio: 1 / 2; }
.tweet-media.three > a:nth-child(n + 2) { aspect-ratio: 1 / 1; }
.tweet-media.four { grid-template-columns: 1fr 1fr; }
.tweet-media.four > a { aspect-ratio: 1 / 1; }

/* Quoted tweet: a nested mini-card; its header is a single compact line and
   its images render small. */
.tweet-quote { border: var(--hair); border-radius: var(--radius); background: var(--panel-bg); padding: 8px 10px; margin-bottom: var(--stack); }
.quote-head { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.quote-head img { width: 1.5em; height: 1.5em; border-radius: 50%; flex: none; }
.quote-head .name { font-weight: 700; }
.quote-head .handle, .quote-head .sep, .quote-head .date { color: var(--fg-muted); font-size: 0.9em; }
.tweet-quote .tweet-text { font-size: 0.867em; margin-bottom: 4px; }
.tweet-quote .tweet-media { gap: 3px; margin: 0.4rem 0; }
.tweet-quote .tweet-media.one img { max-height: 140px; }
.tweet-quote .tweet-media.two > a,
.tweet-quote .tweet-media.four > a { aspect-ratio: 16 / 9; }
.tweet-quote .tweet-media.three { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
.tweet-quote .tweet-media.three > a { aspect-ratio: 16 / 9; grid-row: auto; }

/* Replies: nested under the card, looked up by id. */
.tweet-replies { border-top: var(--hair); margin-top: var(--stack); padding-top: var(--stack); }
.tweet-replies .label { font-size: 0.75em; color: var(--fg-muted); margin: 0 0 6px; }
.tweet-reply { display: flex; gap: 8px; margin-bottom: var(--stack); }
.tweet-reply img { width: 1.87em; height: 1.87em; border-radius: 50%; flex: none; }
.tweet-reply .body { font-size: 0.867em; min-width: 0; }
.tweet-reply .meta { color: var(--fg-muted); font-size: 0.9em; }
.tweet-reply .text { margin: 2px 0 0; white-space: pre-wrap; }

.tweet-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.867em; color: var(--fg-muted); }
.tweet-foot .stats { display: flex; flex-direction: column; gap: 2px; }
.tweet-foot .meta .num { color: var(--fg); font-weight: 700; }
.tweet-foot .counts .num { color: var(--fg); font-weight: 600; }

/* Original / quote links and the added date, under the stats. */
.side { margin-top: 4px; color: var(--fg-muted); font: var(--size-ui)/1.5 var(--font-ui); }
.side p { margin: 0 0 2px; }

/* ---------- display settings panel ---------- */
.row { display: flex; align-items: center; gap: var(--gap); margin-bottom: 6px; font: var(--size-ui)/1.4 var(--font-ui); }
.row label { min-width: 5.5rem; }
.row output { color: var(--fg-muted); min-width: 3rem; }
.row input[type="range"] { flex: 1; }

.back { margin-top: var(--stack); font: var(--size-ui) var(--font-ui); }