/* old-school Twitter card — pre-2015 visual language
   used on era pages, deep-dive articles, and per-tweet pages.
   Sits inside the 1n2.org dark chrome but the cards themselves are light. */

:root{
  --tw-blue:#1DA1F2;
  --tw-blue-dark:#0d8bd8;
  --tw-text:#14171a;
  --tw-text-sub:#657786;
  --tw-text-light:#aab8c2;
  --tw-border:#e1e8ed;
  --tw-border-hover:#ccd6dd;
  --tw-card-bg:#ffffff;
  --tw-card-hover:#f5f8fa;
  --tw-star:#e0245e; /* fallback */
  --tw-star-gold:#ffac33;
  --tw-rt-green:#17bf63;
}

/* container for stacked cards */
.tw-cards{
  display:grid;gap:14px;margin:14px 0;
  grid-template-columns:repeat(auto-fill,minmax(320px,580px));
  justify-content:start;
}
.tw-cards.tw-cards-center{justify-content:center}

/* the card itself */
.tw-card{
  display:block;
  background:var(--tw-card-bg);
  border:1px solid var(--tw-border);
  border-radius:6px;
  padding:12px 14px 10px;
  font-family:'Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--tw-text);
  font-size:14px;
  line-height:1.32;
  text-decoration:none;
  transition:background .14s, border-color .14s;
  position:relative;
  max-width:580px;
}
.tw-card:hover{
  background:var(--tw-card-hover);
  border-color:var(--tw-border-hover);
}

/* whole-card click overlay
   The card is a <div> (never an <a>) because nesting an <a> around tw-text
   that contains inner <a>s (urls/mentions/hashtags) triggers HTML5's
   nested-anchor auto-close, which ejects tw-actions from the card and
   blows up the SVG sizing. Instead we lay an absolute-positioned link
   over the whole card and bump the real interactive elements above it. */
.tw-card-link{
  position:absolute;inset:0;z-index:1;
  border-radius:6px;
  text-indent:-9999px;overflow:hidden;
  background:transparent;
}
.tw-card > *:not(.tw-card-link){
  position:relative;z-index:2;
}
.tw-card .tw-text a,
.tw-card .tw-text .link,
.tw-card .tw-text .mention,
.tw-card .tw-text .hashtag{
  position:relative;z-index:3;
}

/* header row: avatar + name/handle/timestamp + bird */
.tw-card .tw-head{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;
}
.tw-card .tw-avatar{
  flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  background:#1DA1F2;
  color:#fff;font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;letter-spacing:-.5px;
  overflow:hidden;
}
.tw-card .tw-avatar img{width:100%;height:100%;object-fit:cover}
.tw-card .tw-byline{
  flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;
}
.tw-card .tw-byline .tw-name-row{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.tw-card .tw-name{
  font-weight:700;color:var(--tw-text);font-size:14px;
}
.tw-card .tw-handle{
  color:var(--tw-text-sub);font-size:13px;font-weight:400;
}
.tw-card .tw-dot{color:var(--tw-text-sub);font-size:13px}
.tw-card .tw-time{
  color:var(--tw-text-sub);font-size:13px;font-weight:400;
}
.tw-card .tw-bird{
  flex:0 0 22px;margin-left:auto;color:var(--tw-blue);
  opacity:.85;
  width:22px;height:18px;
}
.tw-card .tw-bird svg{width:22px;height:18px;display:block;flex:0 0 auto}

/* defensive: any stray SVG inside a card is capped */
.tw-card svg{max-width:100%;height:auto}

/* tweet body */
.tw-card .tw-text{
  color:var(--tw-text);font-size:15px;line-height:1.42;
  margin:2px 0 8px;
  word-wrap:break-word;overflow-wrap:break-word;
  white-space:pre-wrap;
}
.tw-card .tw-text a{
  color:var(--tw-blue);text-decoration:none;
}
.tw-card .tw-text a:hover{text-decoration:underline}
.tw-card .tw-text .mention,
.tw-card .tw-text .hashtag,
.tw-card .tw-text .link{
  color:var(--tw-blue);
}

/* engagement summary line (X favorites · Y retweets) */
.tw-card .tw-stats-summary{
  color:var(--tw-text-sub);font-size:12px;
  border-top:1px solid var(--tw-border);
  padding:7px 0 4px;margin-top:4px;
  display:flex;gap:14px;flex-wrap:wrap;
}
.tw-card .tw-stats-summary strong{
  color:var(--tw-text);font-weight:700;
}

/* action row: reply / retweet / star */
.tw-card .tw-actions{
  display:flex;gap:32px;padding:4px 0 0;
  color:var(--tw-text-light);font-size:12px;
}
.tw-card .tw-actions .tw-act{
  display:inline-flex;align-items:center;gap:5px;
  cursor:default;
}
.tw-card .tw-actions svg{
  width:15px;height:15px;display:block;
  flex:0 0 auto;
}
.tw-card .tw-actions .tw-act{flex:0 0 auto;line-height:1}
.tw-card .tw-actions .tw-act-reply{color:var(--tw-text-light)}
.tw-card .tw-actions .tw-act-rt{color:var(--tw-rt-green)}
.tw-card .tw-actions .tw-act-star{color:var(--tw-star-gold)}
.tw-card .tw-actions .tw-act-n{color:var(--tw-text-sub);font-weight:600}

/* "has media" indicator on the card body — small badge linking to X
   so visitors know there was a photo / video on the original tweet. */
.tw-card .tw-media{
  margin:6px 0 8px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.tw-card .tw-media a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
  font-size:12px;color:var(--tw-blue);
  background:rgba(29,161,242,.08);
  border:1px solid rgba(29,161,242,.25);
  border-radius:12px;padding:3px 10px;
  text-decoration:none;
  position:relative;z-index:3;
}
.tw-card .tw-media a:hover{
  background:rgba(29,161,242,.15);
  text-decoration:none;
}
.tw-card .tw-media .tw-media-icon{
  display:inline-block;width:14px;height:14px;line-height:1;font-size:13px;
}

/* "Part of a thread" / reply badge */
.tw-card .tw-replying{
  font-size:12px;color:var(--tw-text-sub);
  margin:-2px 0 6px;padding-left:58px;
}
.tw-card .tw-replying a{color:var(--tw-blue)}

/* link-quote variant — smaller, inline-ish */
.tw-card.tw-card-quote{
  font-size:13px;padding:10px 12px 8px;
}
.tw-card.tw-card-quote .tw-avatar{width:36px;height:36px;flex-basis:36px;font-size:14px}
.tw-card.tw-card-quote .tw-text{font-size:14px}

/* in dark contexts (era pages, articles), give a subtle outline */
.wrap .tw-card{
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* Per-tweet page layout */
.tw-page{max-width:680px;margin:0 auto}
.tw-page .tw-card{max-width:none}
.tw-page .tw-thread{display:grid;gap:10px;margin:8px 0 14px}
.tw-page .tw-cards{grid-template-columns:1fr}

/* Mobile responsive: stack cleanly, no horizontal scroll */
@media (max-width:640px){
  .tw-cards{grid-template-columns:1fr;gap:12px}
  .tw-card{max-width:100%;padding:10px 12px 8px}
  .tw-card .tw-actions{gap:22px}
  .tw-card .tw-avatar{flex-basis:40px;width:40px;height:40px;font-size:16px}
  .tw-page .tw-card-primary{padding:14px 14px 12px}
  .tw-page .tw-card-primary .tw-text{font-size:18px}
}
.tw-page h2.tw-section{
  font-family:'Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:700;
  color:#fff;text-transform:none;letter-spacing:0;
  margin:28px 0 10px;padding:0 0 6px;
  border-bottom:1px solid var(--border);
}
.tw-page .tw-meta-line{
  color:var(--muted);font-size:13px;margin:6px 0 14px;
}
.tw-page .tw-meta-line a{color:var(--cyan)}

/* primary card on a tweet page */
.tw-page .tw-card-primary{
  padding:18px 20px 14px;
}
.tw-page .tw-card-primary .tw-text{font-size:22px;line-height:1.4}
.tw-page .tw-card-primary .tw-name{font-size:15px}
.tw-page .tw-card-primary .tw-avatar{width:56px;height:56px;flex-basis:56px;font-size:22px}
.tw-page .tw-card-primary .tw-handle{font-size:14px}
.tw-page .tw-card-primary .tw-time{font-size:14px}

/* mini word cloud inside per-tweet page */
.tw-page .tw-mini-cloud{
  padding:14px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:8px;
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
}
.tw-page .tw-mini-cloud .tw-w{
  color:var(--text);font-family:'Space Grotesk',sans-serif;
}

/* back-link list */
.tw-page .tw-backlinks{
  display:grid;gap:6px;margin:8px 0 0;
}
.tw-page .tw-backlinks a{
  display:block;padding:8px 12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;color:var(--text);
  font-family:'Space Grotesk',sans-serif;font-size:.92rem;
  text-decoration:none;transition:.15s;
}
.tw-page .tw-backlinks a:hover{
  border-color:var(--cyan);color:var(--cyan);
}
.tw-page .tw-backlinks .pill-kind{
  display:inline-block;font-family:'Space Mono',monospace;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);margin-right:8px;
}

/* "Open on X" link */
.tw-page .tw-external{
  display:inline-block;margin:6px 0 0;
  font-family:'Space Mono',monospace;font-size:.78rem;
  color:var(--cyan);text-decoration:none;
  border:1px solid rgba(56,189,248,.3);padding:5px 10px;border-radius:3px;
}
.tw-page .tw-external:hover{color:var(--amber);border-color:var(--amber)}

/* a horizontal row showing parent / current / replies as nested cards */
.tw-thread .tw-card{margin-bottom:6px}
.tw-thread .tw-card.tw-card-current{
  border-color:var(--tw-blue);
  box-shadow:0 0 0 2px rgba(29,161,242,.15);
}

/* fade muted */
.tw-empty{
  color:var(--muted);font-size:.88rem;font-style:italic;
  padding:10px 0;
}


/* ---------------- local media (real images / video from export) ----------------
   When the build script finds a tweet_id in _media-index.json it renders
   real <img>/<video> elements here instead of the "📷 photo on X" badge.
   The .tw-media-local container overrides the badge layout so we get a
   proper photo grid (Twitter shows 1, 2, 3, 4+ tiles in a 2x2 layout). */

.tw-card .tw-media-local{
  display:grid;
  gap:4px;
  margin:8px 0 10px;
  border-radius:14px;
  overflow:hidden;
  background:transparent;
  flex-wrap:initial;
}
.tw-card .tw-media-local .tw-media-item{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  background:#000;
  position:relative;
  z-index:3;
}
.tw-card .tw-media-local .tw-photo{
  border-radius:4px;
  object-fit:cover;
}
.tw-card .tw-media-local .tw-video{
  border-radius:4px;
  width:100%;
}

/* 1 tile — wide single image */
.tw-card .tw-media-grid-1{grid-template-columns:1fr;}
.tw-card .tw-media-grid-1 .tw-photo{max-height:520px;object-fit:contain;background:#0b0b0b;}
.tw-card .tw-media-grid-1 .tw-video{max-height:520px;}

/* 2 tiles — side by side */
.tw-card .tw-media-grid-2{grid-template-columns:1fr 1fr;}
.tw-card .tw-media-grid-2 .tw-media-item{height:280px;object-fit:cover;}

/* 3 tiles — big left, two stacked right */
.tw-card .tw-media-grid-3{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"a b" "a c";
  height:340px;
}
.tw-card .tw-media-grid-3 .tw-media-item{height:100%;object-fit:cover;}
.tw-card .tw-media-grid-3 .tw-media-item:nth-child(1){grid-area:a;}
.tw-card .tw-media-grid-3 .tw-media-item:nth-child(2){grid-area:b;}
.tw-card .tw-media-grid-3 .tw-media-item:nth-child(3){grid-area:c;}

/* 4+ tiles — clean 2x2 grid (Twitter capped at 4 anyway) */
.tw-card .tw-media-grid-4{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  height:340px;
}
.tw-card .tw-media-grid-4 .tw-media-item{height:100%;object-fit:cover;}

/* primary card variant: let the hero photo breathe */
.tw-card-primary .tw-media-grid-1 .tw-photo,
.tw-card-primary .tw-media-grid-1 .tw-video{max-height:640px;}