/* skins/jsco-card.css: the jamesshapiro.com ("jsco") paper-print treatment of the post card.

   Every card rule is reachable as html[data-skin="jsco"] .rtc…, so Copy screenshot (which
   clones the card into a host outside the preview's content box) pictures the skin exactly,
   and without the attribute nothing here matches: legacy stays untouched. The Live peek (.shadow-iframe-wrapper
   and its "Back to post" button) is the one exception. The --jsco-* palette comes from
   skins/jsco.css on :root.

   Restyle, don't relayout: paddings, margins and box sizes stay legacy's. Where a smaller mono
   face replaces a 15px line, its line-height is pinned to the legacy line box. Square corners,
   1px ink frames, dashed rules inside the frame, no shadows, and every hover sits behind
   (hover: hover). The actions row keeps its absolute star and 👎, its container query and its
   (hover: none) 0.55 states: nothing here touches their position or opacity. */

/* ── Tokens and shell: cream on the red field, framed in 1px ink. The sub-cards inside it
   (quote, link card, compact article, OCR panel) are white paper, for contrast, and nesting
   alternates from there (see "Nesting" below the quote sub-card). ──────────────────────── */
html[data-skin="jsco"] .rtc {
  --rtc-bg: var(--jsco-bg);
  --rtc-text: var(--jsco-ink);
  --rtc-name: var(--jsco-ink);
  --rtc-handle: var(--jsco-muted);
  --rtc-follow: var(--jsco-accent-ink);
  --rtc-secondary: var(--jsco-muted);
  --rtc-border: var(--jsco-ink);
  --rtc-link: var(--jsco-accent-ink);
  --rtc-media-bg: var(--jsco-bg);
  --rtc-quote-border: var(--jsco-ink);
  --rtc-heart: var(--jsco-accent);
  font-family: var(--jsco-font-sans); /* replaces the card's own Inter stack */
  border: 1px solid var(--jsco-ink);
  border-radius: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────────────────────── */
/* The name is the card's title: Georgia 700 at the same size (the site's card-title register). */
html[data-skin="jsco"] .rtc .rtc-name,
html[data-skin="jsco"] .rtc .rtc-quote-name {
  font-family: var(--jsco-font-display);
  letter-spacing: -0.01em;
}
/* The parent's date is data: mono, muted. 21px = legacy's 15px × 1.4 line. */
html[data-skin="jsco"] .rtc .rtc-thread-date {
  font-family: var(--jsco-font-mono);
  font-size: 13px;
  line-height: 21px;
}
/* Handles and the "↻ @x reposted" banner keep legacy's Inter at legacy's size, weight and
   line (James, 2026-11-01: "restore the font type and size in the user handles"). Only the
   family is set, because .rtc's own family is the skin's sans; the colours stay the skin's. */
html[data-skin="jsco"] .rtc :is(.rtc-handle, .rtc-quote-handle, .rtc-repost) {
  font-family: var(--jsco-font-legacy);
}
/* Avatars keep legacy's frameless circles (D4 reversed, James 2026-11-02): no rule here. */
html[data-skin="jsco"] .rtc .rtc-org-badge {
  border-radius: 0;
}
/* X glyph in ink; the Bluesky / Mastodon word (and the quote head's source word) in mono caps. */
html[data-skin="jsco"] .rtc .rtc-xlogo svg {
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .rtc .unified-source-link,
html[data-skin="jsco"] .rtc .unified-source {
  font-family: var(--jsco-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jsco-muted);
}
html[data-skin="jsco"] .rtc .unified-source {
  opacity: 1;
}

/* ── Links: oxblood with the site's prose underline, brick on hover ──────────────────────── */
html[data-skin="jsco"] .rtc .rtc-follow,
html[data-skin="jsco"] .rtc .rtc-link,
html[data-skin="jsco"] .rtc .rtc-thread-replying a,
html[data-skin="jsco"] .rtc .rtc-replying a,
html[data-skin="jsco"] .rtc .rtc-quote-replying a {
  color: var(--jsco-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html[data-skin="jsco"] .rtc .rtc-follow {
  font-weight: 600;
}

/* ── Self-thread: a 1px ink connector; the clip pill becomes a square bg-deep chip ───────── */
html[data-skin="jsco"] .rtc .rtc-thread-parent::before {
  left: 23.5px; /* centred on the 48px avatar */
  width: 1px;
  background: var(--jsco-ink);
}
html[data-skin="jsco"] .rtc .rtc-parent-expand {
  border: 1px solid var(--jsco-ink); /* border-box: still 44 × 22 */
  border-radius: 0;
  background: var(--jsco-bg-deep);
  color: var(--jsco-ink);
}

/* ── Media: square, 1px ink frame (token), gaps kept; a lone video letterboxes in warm ink ── */
html[data-skin="jsco"] .rtc .rtc-media {
  border-radius: 0;
}
html[data-skin="jsco"] .rtc .rtc-media-1 .rtc-cell-video {
  background: var(--jsco-ink);
}

/* ── OCR: the originals pill as a cornsilk chip, the panels as framed paper ──────────────── */
html[data-skin="jsco"] .rtc .rtc-ocr-media-expand {
  border: 1px solid var(--jsco-ink); /* border-box: still 44 × 22 */
  border-radius: 0;
  background: var(--jsco-halo);
  color: var(--jsco-accent);
}
html[data-skin="jsco"] .rtc .rtc-ocr {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
}
html[data-skin="jsco"] .rtc .rtc-ocr-label {
  color: var(--jsco-muted);
}
html[data-skin="jsco"] .rtc .rtc-ocr-text {
  color: var(--jsco-ink);
}

/* ── Link card: square frame (token), Georgia title, mono domain. Cards don't react to hover,
   so the paper ground also cancels legacy's hover wash. 19.5px = legacy's 15px × 1.3 line. ── */
html[data-skin="jsco"] .rtc .rtc-card {
  border-radius: 0;
  background: var(--jsco-paper);
}
html[data-skin="jsco"] .rtc .rtc-card-title {
  font-family: var(--jsco-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
html[data-skin="jsco"] .rtc .rtc-card-domain {
  font-family: var(--jsco-font-mono);
  font-size: 13px;
  line-height: 19.5px;
}

/* ── X Article ───────────────────────────────────────────────────────────────────────────── */
html[data-skin="jsco"] .rtc .rtc-article-title,
html[data-skin="jsco"] .rtc .rtc-article-h1,
html[data-skin="jsco"] .rtc .rtc-article-h2,
html[data-skin="jsco"] .rtc .rtc-article-h3 {
  font-family: var(--jsco-font-display);
  letter-spacing: -0.01em;
}
html[data-skin="jsco"] .rtc .rtc-article-compact {
  border-radius: 0;
  background: var(--jsco-paper);
}
html[data-skin="jsco"] .rtc .rtc-article-code {
  border-radius: 0;
  background: var(--jsco-bg-deep);
  font-family: var(--jsco-font-mono);
}
html[data-skin="jsco"] .rtc .rtc-article-hr {
  border-top-style: dashed; /* a divider inside the frame */
}
html[data-skin="jsco"] .rtc .rtc-article-figure figcaption {
  font-family: var(--jsco-font-mono);
}
/* "Read on X", "View post on X" and "Read article" become secondary buttons. */
html[data-skin="jsco"] .rtc .rtc-article-open,
html[data-skin="jsco"] .rtc .rtc-article-tweet,
html[data-skin="jsco"] .rtc .rtc-article-expand {
  border: 1px solid var(--jsco-ink);
  border-radius: 0;
  background: var(--jsco-paper);
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .rtc .rtc-article-expand {
  padding: 0 11px; /* the new 1px frame comes out of the 12px padding: same box */
}

/* ── Quote sub-card: white paper, square, 1px ink (token); its tools are flat ink glyphs ─── */
html[data-skin="jsco"] .rtc .rtc-quote {
  border-radius: 0;
  background: var(--jsco-paper);
}
/* ── Nesting alternates cream and white (James, 2026-11-01): each sub-card takes the opposite
   ground of the one it sits in. A QT-of-QT reads cream card → white quote → cream grandchild,
   and a link card, compact article or OCR panel inside the grandchild is white again. The
   schema caps quotes at two levels, so these two rules cover every depth that can render. ─ */
html[data-skin="jsco"] .rtc .rtc-quote :is(.rtc-quote, .rtc-card, .rtc-article-compact, .rtc-ocr) {
  background: var(--jsco-bg);
}
html[data-skin="jsco"] .rtc .rtc-quote .rtc-quote :is(.rtc-quote, .rtc-card, .rtc-article-compact, .rtc-ocr) {
  background: var(--jsco-paper);
}
html[data-skin="jsco"] .rtc .rtc-quote-copy,
html[data-skin="jsco"] .rtc .rtc-quote-open,
html[data-skin="jsco"] .rtc .rtc-quote-live {
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .rtc .rtc-quote-live {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-skin="jsco"] .rtc .rtc-quote-copy.copied,
html[data-skin="jsco"] .rtc .rtc-quote-copy:focus-visible,
html[data-skin="jsco"] .rtc .rtc-quote-open:focus-visible,
html[data-skin="jsco"] .rtc .rtc-quote-live:focus-visible {
  color: var(--jsco-accent);
}

/* ── Timestamp: the site's mono dateline. 19.5px = legacy's 15px × 1.3 line. ─────────────── */
html[data-skin="jsco"] .rtc .rtc-datetime {
  font-family: var(--jsco-font-mono);
  font-size: 0.78rem;
  line-height: 19.5px;
  font-variant-numeric: tabular-nums;
}
html[data-skin="jsco"] .rtc .rtc-info {
  color: var(--jsco-ink);
}

/* ── Actions row: a dashed rule inside the frame, flat unboxed glyphs ────────────────────── */
html[data-skin="jsco"] .rtc .rtc-actions {
  border-top: 1px dashed var(--jsco-ink);
}
/* Ink everywhere (this also outranks legacy's hover colours: hover is the halo below). */
html[data-skin="jsco"] .rtc .rtc-action {
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .rtc .rtc-action-like {
  color: var(--jsco-accent);
}
html[data-skin="jsco"] .rtc .rtc-action-count,
html[data-skin="jsco"] .rtc .rtc-action-label {
  color: var(--jsco-ink);
  font-weight: 600;
  text-decoration: none;
}
html[data-skin="jsco"] .rtc .rtc-action-copy.copied,
html[data-skin="jsco"] .rtc .rtc-action-copy.copied .rtc-action-label,
html[data-skin="jsco"] .rtc .rtc-action-shot.copied,
html[data-skin="jsco"] .rtc .rtc-action-shot.saved,
html[data-skin="jsco"] .rtc .rtc-action-star.starred {
  color: var(--jsco-accent);
}
html[data-skin="jsco"] .rtc .rtc-action-shot.failed {
  color: var(--jsco-error);
}
/* The site's cornsilk halo behind glyph and label, drawn by ::before so nothing moves. Only
   the in-flow actions get it: the star and 👎 keep their absolute perches untouched. */
html[data-skin="jsco"] .rtc .rtc-action-like,
html[data-skin="jsco"] .rtc .rtc-action-reply,
html[data-skin="jsco"] .rtc .rtc-action-copy,
html[data-skin="jsco"] .rtc .rtc-action-shot {
  position: relative;
  isolation: isolate;
}
html[data-skin="jsco"] .rtc .rtc-action-like::before,
html[data-skin="jsco"] .rtc .rtc-action-reply::before,
html[data-skin="jsco"] .rtc .rtc-action-copy::before,
html[data-skin="jsco"] .rtc .rtc-action-shot::before {
  content: '';
  position: absolute;
  inset: -4px -6px;
  z-index: -1;
  border-radius: 3px;
  background-color: transparent;
  pointer-events: none;
  transition: background-color 180ms var(--jsco-ease);
}

/* ── "Read N replies": the site's card footer strip. It runs to the card's edges and takes
   the card's 16px bottom padding into its own box: 1 + 13.5 + 19.5 + 13.5 = 47.5px, exactly
   legacy's 31.5px pill plus that padding, so the card keeps its height. ───────────────── */
html[data-skin="jsco"] .rtc .rtc-replies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px -16px;
  padding: 13.5px 16px;
  border: 0;
  border-top: 1px dashed var(--jsco-ink);
  border-radius: 0;
  background: var(--jsco-bg-deep);
  color: var(--jsco-ink);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 19.5px;
  text-align: left;
}
html[data-skin="jsco"] .rtc .rtc-replies::after {
  content: '→';
}

/* ── Focus: always a 2px brick outline ───────────────────────────────────────────────────── */
html[data-skin="jsco"] .rtc :is(a, button):focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: 2px;
}
html[data-skin="jsco"] .rtc .rtc-replies:focus-visible {
  outline-offset: -4px; /* inside the strip, clear of the card frame */
}

/* ── Selected text: the signature brick with cream type, as on the selected rows (James,
   2026-10-31). The whole card, so a drag from the body into a quote highlights evenly; cream
   also keeps oxblood links legible while selected. ──────────────────────────────────────── */
html[data-skin="jsco"] .rtc::selection,
html[data-skin="jsco"] .rtc ::selection {
  background-color: var(--jsco-accent);
  color: var(--jsco-bg);
}

/* ── Hover (pointer devices only) ────────────────────────────────────────────────────────── */
@media (hover: hover) {
  html[data-skin="jsco"] .rtc .rtc-follow:hover,
  html[data-skin="jsco"] .rtc .rtc-link:hover,
  html[data-skin="jsco"] .rtc .rtc-thread-replying a:hover,
  html[data-skin="jsco"] .rtc .rtc-replying a:hover,
  html[data-skin="jsco"] .rtc .rtc-quote-replying a:hover,
  html[data-skin="jsco"] .rtc .rtc-quote-copy:hover,
  html[data-skin="jsco"] .rtc .rtc-quote-open:hover,
  html[data-skin="jsco"] .rtc .rtc-quote-live:hover,
  html[data-skin="jsco"] .rtc .rtc-action-star:hover {
    color: var(--jsco-accent);
  }
  html[data-skin="jsco"] .rtc .rtc-action-like:hover::before,
  html[data-skin="jsco"] .rtc .rtc-action-reply:hover::before,
  html[data-skin="jsco"] .rtc .rtc-action-copy:hover::before,
  html[data-skin="jsco"] .rtc .rtc-action-shot:hover:not(:disabled)::before,
  html[data-skin="jsco"] .rtc .rtc-replies:hover,
  html[data-skin="jsco"] .rtc .rtc-parent-expand:hover,
  html[data-skin="jsco"] .rtc .rtc-article-open:hover,
  html[data-skin="jsco"] .rtc .rtc-article-tweet:hover,
  html[data-skin="jsco"] .rtc .rtc-article-expand:hover {
    background-color: var(--jsco-halo);
  }
  html[data-skin="jsco"] .rtc .rtc-ocr-media-expand:hover {
    background-color: var(--jsco-bg-deep);
  }
}

/* ── Live peek: the white embed is tinted to the card's cream (japanese.css's darken blend,
   recoloured), a 1px ink frame drawn inside the box so the iframe keeps its size, and "Back
   to post" as a secondary button. ─────────────────────────────────────────────────────── */
html[data-skin="jsco"] .shadow-iframe-wrapper {
  background: var(--jsco-bg);
  outline: 1px solid var(--jsco-ink);
  outline-offset: -1px;
}
html[data-skin="jsco"] .shadow-iframe-wrapper::after {
  background: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-preview-back {
  background: var(--jsco-paper);
  border: 1px solid var(--jsco-ink);
  border-radius: 0;
  color: var(--jsco-ink);
  font-weight: 600;
  transition: background-color 180ms var(--jsco-ease);
}
html[data-skin="jsco"] #reader-preview-back:focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: 2px;
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-preview-back:hover {
    background: var(--jsco-halo);
  }
}

/* ── Reduced motion: drop the 180ms transitions ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="jsco"] .rtc .rtc-action-like::before,
  html[data-skin="jsco"] .rtc .rtc-action-reply::before,
  html[data-skin="jsco"] .rtc .rtc-action-copy::before,
  html[data-skin="jsco"] .rtc .rtc-action-shot::before,
  html[data-skin="jsco"] #reader-preview-back {
    transition: none;
  }
}