/* skins/jsco.css: the jamesshapiro.com ("jsco") skin for the reader's chrome, which is
   everything except the post card (skins/jsco-card.css) and the skin switch
   (skins/skin-switch.css). Every rule is scoped to html[data-skin="jsco"], or
   :root[data-skin="jsco"] for tokens, which skin.js sets before first paint. Off = no
   attribute = legacy untouched. The public demo links this same file (frontend/skins/ is a
   symlink here): its page is built with the attribute, and it has no switch.

   Each override repeats the legacy selector behind the prefix, so it wins on specificity
   whatever the file order. Box sizes, paddings, gaps and the 2px selection borders are
   kept (recoloured or made transparent), so nothing moves when the skin flips. Look:
   jamesshapiro.com src/styles/global.css — cream paper, 1px warm-ink frames, square
   corners, no shadows, Georgia headings over the system sans, mono for data; brick
   (#B33A30) marks state and action, oxblood (#7A2520) marks identity. */

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root[data-skin="jsco"] {
  color-scheme: light; /* beats <meta name="color-scheme" content="dark"> for scrollbars and checkboxes */

  /* jamesshapiro.com palette (src/styles/global.css:2-22) */
  --jsco-bg: #F7F2E8;        /* cream paper */
  --jsco-bg-deep: #EFE8D9;   /* strips, current/selected rows */
  --jsco-paper: #FFFFFF;     /* surfaces inside a frame */
  --jsco-halo: #FFF8DC;      /* cornsilk hover */
  --jsco-ink: #1A1410;       /* all text and every 1px border */
  --jsco-ink-soft: #3A332D;
  --jsco-muted: #574E44;
  --jsco-on-ink: #C9C1B3;    /* secondary text on a reversed surface */
  --jsco-accent: #B33A30;    /* brick: state and action, the signature red */
  --jsco-accent-ink: #7A2520;/* oxblood: identity */
  --jsco-highlight: #F2C14E; /* gold: focus on ink only */
  --jsco-error: #a33;
  --jsco-perf: rgba(26, 20, 16, .4); /* perforated row rule (James: "perforated and a bit darker"); tune */
  --jsco-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jsco-font-display: 'Twemoji Country Flags', Georgia, 'Times New Roman', Times, serif;
  --jsco-font-sans: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --jsco-font-mono: 'Twemoji Country Flags', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Legacy's text face (= japanese.css --reader-font-family, Inter from skins/fonts): author
     names keep it (James, 2026-10-31: "the original font type and size restored"). */
  --jsco-font-legacy: 'Twemoji Country Flags', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* the reader's tokens, remapped (reader.css:21-59, japanese.css:10-44) */
  --reader-bg: var(--jsco-bg);
  --reader-bg-hover: var(--jsco-halo);
  --reader-bg-selected: var(--jsco-bg-deep);
  --reader-bg-focus: var(--jsco-bg-deep);
  --reader-bg-active-header: transparent;  /* the active column gets the 2px brick title bar instead */
  --reader-bg-shadow: var(--jsco-paper);   /* field surfaces: inputs, textareas */
  --reader-text-primary: var(--jsco-ink);
  --reader-text-heading: var(--jsco-ink);
  --reader-text-secondary: var(--jsco-muted);
  --reader-text-accent: var(--jsco-accent);
  --reader-text-danger: var(--jsco-error);
  --reader-text-success: var(--jsco-ink);  /* the site has no green */
  --reader-border: var(--jsco-ink);
  --reader-border-row: var(--jsco-perf);   /* + border-style: dashed on rows, via overrides */
  --reader-border-selected: var(--jsco-accent);
  --reader-border-focus: var(--jsco-accent);
  --reader-scrollbar-thumb: rgba(26, 20, 16, .35);
  --reader-badge-bg: var(--jsco-ink);
  --reader-badge-text: var(--jsco-bg);
  --reader-read-opacity: 1;                /* read rows go muted by colour instead */
  --reader-font-family: var(--jsco-font-sans);
  --reader-text: var(--jsco-ink);          /* undefined in legacy (invisible outage notice) */
  --reader-muted: var(--jsco-muted);       /* undefined in legacy (falls back to #777) */
}

/* ── Shell: cream panes (tokens), the red field, the header band ────────────── */
/* The red field (D1): the preview column below its header. The card, the knockout and the
   Live peek sit on it; anything set straight on it is cream (ink on brick is only 3.1:1). */
html[data-skin="jsco"] #reader-preview-pane {
  background: var(--jsco-accent);
}
/* Cream like the other two headers, over the 1px ink rule (token). Its layout lives in
   skin-switch.css. */
html[data-skin="jsco"] #reader-preview-header {
  background: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-preview-content > .unified-embed-fallback {
  color: var(--jsco-bg);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* A brick ring would vanish on the red field: chrome that sits on it rings in cream. */
html[data-skin="jsco"] #reader-preview-content > .unified-embed-fallback:focus-visible,
html[data-skin="jsco"] #reader-preview-back:focus-visible {
  outline: 2px solid var(--jsco-bg);
  outline-offset: 2px;
}

/* ── Column headers ─────────────────────────────────────────────────────────── */
html[data-skin="jsco"] #reader-list-header h2,
html[data-skin="jsco"] #reader-detail-header h2 {
  position: relative; /* anchors the active-column bar */
  /* Room for the bar inside the title's own box, since the Posts title clips at its padding
     box to ellipsize. The negative margin hands the room back: the centred margin box, and
     so the text, the header and the ellipsis, stay exactly where they were. */
  padding-bottom: 6px;
  margin-bottom: -6px;
  font-family: var(--jsco-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jsco-ink);
}
/* The count is the site's accent voice (D5): an oxblood aside in roman Georgia. It was italic
   until James, 2026-11-01: "unitalicize the post count + parens". */
html[data-skin="jsco"] #reader-total-count,
html[data-skin="jsco"] #reader-detail-count {
  font-family: var(--jsco-font-display);
  font-weight: 400;
  color: var(--jsco-accent-ink);
}
/* The active column: no wash (token), the site's "current tab" instead — a 2px brick bar,
   square ends, 4px under the title, full label width. */
html[data-skin="jsco"] #reader-list-header h2::after,
html[data-skin="jsco"] #reader-detail-header h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
  transition: background-color 180ms var(--jsco-ease);
}
html[data-skin="jsco"] #reader-list-pane.column-active #reader-list-header h2::after,
html[data-skin="jsco"] #reader-detail-pane.column-active #reader-detail-header h2::after {
  background: var(--jsco-accent);
}
html[data-skin="jsco"] #reader-detail-title .unified-window {
  font-family: var(--jsco-font-mono);
  font-style: normal;
  letter-spacing: normal;
  color: var(--jsco-muted);
}

/* ── Rail header: list selector, +, add-author form ─────────────────────────── */
/* The site's Select: paper in a 1px ink frame. Open = bg-deep; a non-default list is
   reversed (ink with cream), the site's "checked". */
html[data-skin="jsco"] #reader-list-select {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
  color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-list-select:hover {
    background: var(--jsco-halo);
  }
}
html[data-skin="jsco"] #reader-list-select[aria-expanded='true'] {
  background: var(--jsco-bg-deep);
}
html[data-skin="jsco"] #reader-list-select.filtered {
  background: var(--jsco-ink);
  border-color: var(--jsco-ink);
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-list-select:focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: 1px;
}
/* + is a button, so it keeps a frame: a square paper chip with an ink glyph; open = reversed. */
html[data-skin="jsco"] #reader-add-follow {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
  color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-add-follow:hover {
    background: var(--jsco-halo);
  }
}
html[data-skin="jsco"] #reader-add-follow.open {
  background: var(--jsco-ink);
  border-color: var(--jsco-ink);
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-add-form {
  border-bottom-style: dashed;
}
html[data-skin="jsco"] #reader-add-input {
  border-radius: 0;
}
html[data-skin="jsco"] #reader-add-input:focus {
  outline: 1px solid var(--jsco-accent); /* + the brick border (token): the site's input focus */
  outline-offset: 0;
}
/* Add is the primary button: ink with cream text, swapping to brick instantly on hover. */
html[data-skin="jsco"] #reader-add-submit {
  background: var(--jsco-ink);
  border-color: var(--jsco-ink);
  color: var(--jsco-bg);
  font-weight: 600;
  transition: none;
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-add-submit:hover:not(:disabled) {
    background: var(--jsco-accent);
    border-color: var(--jsco-accent);
  }
}

/* ── Buttons: the shared ghost chrome becomes the site's secondary button ───── */
/* Paper in a 1px ink frame, ink text, cornsilk on hover. Every site keeps its own size. */
html[data-skin="jsco"] .reader-ghost-btn {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
  color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] .reader-ghost-btn:hover:not(:disabled) {
    background: var(--jsco-halo);
  }
}
html[data-skin="jsco"] .reader-ghost-btn.danger {
  color: var(--jsco-error);
}
html[data-skin="jsco"] .reader-ghost-btn.danger:hover {
  border-color: var(--jsco-ink);
}
html[data-skin="jsco"] #reader-rubric-btn {
  font-weight: 600;
}
html[data-skin="jsco"] #reader-rubric-btn.active {
  background: var(--jsco-ink);
  border-color: var(--jsco-ink);
  color: var(--jsco-bg);
}

/* ── Rail rows ──────────────────────────────────────────────────────────────── */
/* Perforated rules; unread = 600 ink, read or inactive = 400 muted (colour, not opacity). */
html[data-skin="jsco"] .reader-person {
  border-bottom-style: dashed;
  transition: background-color 180ms var(--jsco-ease);
}
html[data-skin="jsco"] .reader-person.inactive,
html[data-skin="jsco"] .reader-person.hidden-author {
  opacity: 1;
}
html[data-skin="jsco"] .reader-person:not(.has-unread) .reader-person-name,
html[data-skin="jsco"] .reader-person.inactive .reader-person-name {
  color: var(--jsco-muted);
}
/* "★ Starred": a brick star on an ink label. */
html[data-skin="jsco"] .reader-person.starred-view .reader-person-name {
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .reader-person.starred-view .reader-person-name::first-letter {
  color: var(--jsco-accent);
}
/* The current view (an author, All posts, ★ Starred) is filled with the signature brick and
   everything on it turns cream (5.3:1; ink on brick is only 3.1:1). Its 2px border goes
   transparent, so the fill runs to the row's edges and nothing moves. The ID outranks
   legacy's keyboard-focus box, so the row stays filled under the rail's cursor; the cursor
   shows there as a cream ring, and on any other row as the brick box (token, legacy ID
   rule). Selection snaps instead of fading, so the cream type is never cream on cream. */
html[data-skin="jsco"] #reader-list-pane .reader-person.selected {
  border-color: transparent;
  background: var(--jsco-accent);
  transition: none;
}
html[data-skin="jsco"] #reader-list-pane .reader-person.selected,
html[data-skin="jsco"] #reader-list-pane .reader-person.selected *,
html[data-skin="jsco"] #reader-list-pane .reader-person.selected .reader-person-name::first-letter {
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-list-pane.column-active .reader-person.selected.keyboard-focus {
  outline: 2px solid var(--jsco-bg);
  outline-offset: -4px;
}
/* Legacy's keyboard-focus name and handle colours outrank the cream rule above; this is the
   row a page opens on (All posts, under the cursor). */
html[data-skin="jsco"] #reader-list-pane.column-active .reader-person.selected.keyboard-focus :is(.reader-person-name, .reader-person-handle) {
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-list-pane .reader-person.selected :focus-visible {
  outline-color: var(--jsco-bg);
}
/* Author names keep legacy's face, size and weight: Inter at the row's size, bold when unread.
   That is the rail's name and @handle, the posts column's @handle in feed rows, and on phones
   the strip's initials (below). Colours stay the skin's. */
html[data-skin="jsco"] .reader-person-name,
html[data-skin="jsco"] .reader-person-handle,
html[data-skin="jsco"] .reader-tweet-author {
  font-family: var(--jsco-font-legacy);
}
/* The source word and the count are data: mono in regular weight. */
html[data-skin="jsco"] .reader-person > .unified-source {
  font-family: var(--jsco-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jsco-muted);
  opacity: 1;
}
html[data-skin="jsco"] .reader-person-count {
  font-family: var(--jsco-font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--jsco-muted);
}
html[data-skin="jsco"] .reader-person-pending {
  font-family: var(--jsco-font-mono);
  color: var(--jsco-accent);
}
/* Ink glyphs; their reveal (opacity, and the (hover: none) 0.55) is legacy's, untouched. */
html[data-skin="jsco"] .reader-person-menu-btn,
html[data-skin="jsco"] .reader-person-paused-ind {
  color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] .reader-person-menu-btn:hover {
    color: var(--jsco-accent);
  }
}
html[data-skin="jsco"] .reader-person .reader-person-menu-btn:focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: 0; /* the row clips (overflow: hidden) */
  border-radius: 0;
}

/* Dividers ("INACTIVE", "▸ HIDDEN (N)"): the site's control label. */
html[data-skin="jsco"] .reader-authors-divider {
  font-family: var(--jsco-font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 14px; /* legacy's 11px line box, so the rows below don't move */
  letter-spacing: 0.08em;
  color: var(--jsco-muted);
}
html[data-skin="jsco"] .hidden-toggle-caret {
  letter-spacing: normal; /* a glyph at 9px: the inherited 0.08em-of-10px is off the scale */
}
/* The Low Signal toggle reuses the divider class but its copy is spec-exact, not uppercase. */
html[data-skin="jsco"] button.reader-lowsig-toggle {
  font-family: var(--jsco-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

/* ── ⋯ rail menu and list menu: the site's footnote popover ─────────────────── */
html[data-skin="jsco"] #reader-rail-menu,
html[data-skin="jsco"] #reader-list-menu {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
  box-shadow: none;
}
html[data-skin="jsco"] .reader-rail-menu-handle,
html[data-skin="jsco"] .reader-list-menu-heading {
  font-family: var(--jsco-font-mono);
  color: var(--jsco-muted);
  border-bottom: 1px dashed var(--jsco-ink);
}
html[data-skin="jsco"] .reader-rail-menu-sep {
  background: transparent;
  border-top: 1px dashed var(--jsco-ink); /* inside its 1px height (border-box) */
}
html[data-skin="jsco"] #reader-rail-menu .reader-person-action svg {
  color: var(--jsco-ink);
}
html[data-skin="jsco"] #reader-rail-menu .reader-person-action.danger,
html[data-skin="jsco"] #reader-rail-menu .reader-person-action.danger svg {
  color: var(--jsco-error);
}
html[data-skin="jsco"] .reader-list-option-count {
  font-family: var(--jsco-font-mono);
}

/* ── Posts header ───────────────────────────────────────────────────────────── */
html[data-skin="jsco"] #reader-unread-only {
  accent-color: var(--jsco-ink);
}

/* ── Post rows ──────────────────────────────────────────────────────────────── */
html[data-skin="jsco"] .reader-tweet,
html[data-skin="jsco"] .reader-read-collapsed {
  border-bottom-style: dashed;
  transition: background-color 180ms var(--jsco-ease);
}
html[data-skin="jsco"] .reader-tweet.read .reader-tweet-text {
  color: var(--jsco-muted);
}
/* The selected row (the open post, or the "N read" group under the cursor) gets the rail's
   brick fill and cream type, whether or not the column is active: the header's brick bar
   marks that. Its border goes transparent, so legacy's 2px focus box and the dashed rule
   both fill brick and nothing moves. */
html[data-skin="jsco"] #reader-detail-pane .reader-tweet.selected,
html[data-skin="jsco"] #reader-detail-pane .reader-read-collapsed.selected {
  border-color: transparent;
  background: var(--jsco-accent);
  transition: none;
}
html[data-skin="jsco"] #reader-detail-pane .reader-tweet.selected,
html[data-skin="jsco"] #reader-detail-pane .reader-tweet.selected *,
html[data-skin="jsco"] #reader-detail-pane .reader-read-collapsed.selected,
html[data-skin="jsco"] #reader-detail-pane .reader-read-collapsed.selected * {
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-detail-pane .reader-tweet.selected :focus-visible {
  outline-color: var(--jsco-bg);
}
html[data-skin="jsco"] .reader-tweet-time {
  font-family: var(--jsco-font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
html[data-skin="jsco"] .reader-tweet-prefix.quote {
  color: var(--jsco-accent-ink); /* an identity glyph, like the italic ampersand */
}
/* Ink glyphs; ★ and the hovered/copied states stay brick (legacy rules, token). */
html[data-skin="jsco"] .reader-tweet-star,
html[data-skin="jsco"] .reader-tweet-permalink {
  color: var(--jsco-ink);
}
/* The loading box's voice: brick text, and the round pulse dot (currentColor) turns brick. */
html[data-skin="jsco"] #reader-tweets-loading,
html[data-skin="jsco"] #reader-tweets-seeking {
  color: var(--jsco-accent);
}

/* ── Low Signal section, restore-tuning panel ───────────────────────────────── */
html[data-skin="jsco"] .reader-lowsig-item:not(:last-child) {
  border-bottom-style: dashed; /* the last item's border is none; a bare style would revive it at 3px */
}
html[data-skin="jsco"] .reader-lowsig-row .reader-tweet-text {
  color: var(--jsco-muted);
}
html[data-skin="jsco"] .reader-tuning {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
}
html[data-skin="jsco"] .reader-tuning-rule + .reader-tuning-rule {
  border-top: 1px dashed var(--jsco-ink);
}

/* ── Fields: square, paper (token), brick border + 1px brick outline on focus ── */
html[data-skin="jsco"] .reader-tuning-text,
html[data-skin="jsco"] .reader-rule-edit-text,
html[data-skin="jsco"] #reader-dislike-why,
html[data-skin="jsco"] #reader-dislike-tags-input,
html[data-skin="jsco"] .reader-rubric-tagsel,
html[data-skin="jsco"] .reader-rule-edit-tags,
html[data-skin="jsco"] #reader-delete-input {
  border-radius: 0;
}
html[data-skin="jsco"] .reader-tuning-text:focus,
html[data-skin="jsco"] .reader-rule-edit-text:focus,
html[data-skin="jsco"] #reader-dislike-why:focus,
html[data-skin="jsco"] .reader-rule-edit-tags:focus,
html[data-skin="jsco"] #reader-dislike-tags-input:focus {
  outline: 1px solid var(--jsco-accent);
  outline-offset: 0;
}
html[data-skin="jsco"] #reader-delete-input:focus {
  outline: 1px solid var(--jsco-error); /* beside its danger border */
  outline-offset: 0;
}
html[data-skin="jsco"] .unified-rule-source {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
}

/* ── Rubric editor ──────────────────────────────────────────────────────────── */
/* Filters are the site's segmented control: one ink box on paper, mono, checked reversed. */
html[data-skin="jsco"] .reader-dd-seg {
  background: var(--jsco-paper);
  border-radius: 0;
}
html[data-skin="jsco"] .reader-preview-mode-btn {
  font-family: var(--jsco-font-mono);
  color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] .reader-preview-mode-btn:hover {
    background: var(--jsco-bg-deep);
    color: var(--jsco-ink);
  }
}
html[data-skin="jsco"] .reader-preview-mode-btn.active {
  background: var(--jsco-ink);
  color: var(--jsco-paper);
}
html[data-skin="jsco"] .reader-preview-mode-btn:focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: -2px;
}
html[data-skin="jsco"] .reader-rubric-authorchip {
  background: var(--jsco-bg-deep);
  border-color: var(--jsco-ink);
  border-radius: 0;
  color: var(--jsco-ink);
}
html[data-skin="jsco"] .reader-rule {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
}
html[data-skin="jsco"] .reader-rule.editing {
  border-color: var(--jsco-accent);
}
html[data-skin="jsco"] .reader-rule-builtin {
  border-color: var(--jsco-ink); /* stays dashed */
  border-radius: 0;
}
/* Polarity pills become tags: blacklist brick, whitelist ink. */
html[data-skin="jsco"] .reader-rule-polarity {
  font-family: var(--jsco-font-mono);
  background: var(--jsco-bg-deep);
  border-radius: 0;
}
html[data-skin="jsco"] .reader-rule-polarity.blacklist {
  color: var(--jsco-accent);
  border-color: var(--jsco-accent);
}
html[data-skin="jsco"] .reader-rule-polarity.whitelist {
  color: var(--jsco-ink);
  border-color: var(--jsco-ink);
}
html[data-skin="jsco"] .reader-rule-ex {
  border-color: var(--jsco-ink);
  border-radius: 0;
}
html[data-skin="jsco"] .reader-rule-ex-label,
html[data-skin="jsco"] .reader-dislike-field-label {
  font-family: var(--jsco-font-mono);
  letter-spacing: 0.08em;
}

/* ── Scrollbars: square thumbs; cream on the red field ──────────────────────── */
html[data-skin="jsco"] #reader-list::-webkit-scrollbar-thumb,
html[data-skin="jsco"] #reader-tweets::-webkit-scrollbar-thumb,
html[data-skin="jsco"] #reader-preview-content::-webkit-scrollbar-thumb {
  border-radius: 0;
}
html[data-skin="jsco"] #reader-list::-webkit-scrollbar-thumb:hover,
html[data-skin="jsco"] #reader-tweets::-webkit-scrollbar-thumb:hover {
  background-color: var(--jsco-ink-soft);
}
html[data-skin="jsco"] #reader-list::-webkit-scrollbar-thumb:active,
html[data-skin="jsco"] #reader-tweets::-webkit-scrollbar-thumb:active {
  background-color: var(--jsco-accent);
}
html[data-skin="jsco"] #reader-preview-content::-webkit-scrollbar-thumb {
  background-color: rgba(247, 242, 232, .6);
}
html[data-skin="jsco"] #reader-preview-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-preview-content::-webkit-scrollbar-thumb:active {
  background-color: var(--jsco-paper);
}

/* ── Focus: always an outline, 2px brick ────────────────────────────────────── */
/* Zero-specificity :where() so every site-specific ring above and below wins. The card,
   the switch and the menu rows (focus = cornsilk row) bring their own. */
html[data-skin="jsco"] :where(button, a, select):not(:where(.rtc *, .unified-skin-switch, .reader-person-action, .reader-list-option)):focus-visible {
  outline: 2px solid var(--jsco-accent);
  outline-offset: 2px;
}

/* ── Owl loader (first paint): a brick owl on cream ─────────────────────────── */
/* startLoader reads the canvas's color (the ink) and --owl-eye once, after skin.js has set
   the attribute; ::before inherits the background. */
html[data-skin="jsco"] #reader-loader {
  --owl-eye: var(--jsco-accent-ink);
  background: var(--jsco-bg);
  color: var(--jsco-accent);
}
html[data-skin="jsco"] #reader-loader-name {
  font-family: var(--jsco-font-display);
  letter-spacing: -0.01em;
  color: var(--jsco-ink);
}

/* ── All posts knockout: cream lines on the brick field, a duotone print ────── */
/* The worker reads paper (background) and ink (color) from here; paper must stay opaque. */
html[data-skin="jsco"] #reader-knockout {
  background: var(--jsco-accent);
  color: var(--jsco-bg);
}
html[data-skin="jsco"] #reader-knockout-note {
  color: var(--jsco-bg);
}

/* ── Modals (delete, 👎, corpus, stranger) ──────────────────────────────────── */
/* No scrim (D9): the overlay still blocks clicks but is transparent; the dialog is framed
   paper with no shadow. */
html[data-skin="jsco"] #reader-modal-overlay,
html[data-skin="jsco"] #reader-dislike-overlay,
html[data-skin="jsco"] #reader-corpus-overlay,
html[data-skin="jsco"] #reader-stranger-overlay {
  background: transparent;
}
html[data-skin="jsco"] #reader-delete-modal,
html[data-skin="jsco"] #reader-dislike-modal,
html[data-skin="jsco"] #reader-corpus-modal,
html[data-skin="jsco"] #reader-stranger-modal {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
  box-shadow: none;
}
html[data-skin="jsco"] #reader-delete-title,
html[data-skin="jsco"] #reader-dislike-title,
html[data-skin="jsco"] #reader-corpus-title,
html[data-skin="jsco"] #reader-stranger-title {
  font-family: var(--jsco-font-display);
  letter-spacing: -0.01em;
}
html[data-skin="jsco"] #reader-delete-actions button,
html[data-skin="jsco"] #reader-stranger-actions button,
html[data-skin="jsco"] #reader-dislike-save,
html[data-skin="jsco"] .reader-corpus-btn {
  border-radius: 0;
}
html[data-skin="jsco"] #reader-delete-cancel:hover {
  border-color: var(--jsco-ink);
}
/* Danger fills keep #a33 (token) with cream text. */
html[data-skin="jsco"] #reader-delete-confirm,
html[data-skin="jsco"] .reader-corpus-btn.danger,
html[data-skin="jsco"] #reader-stranger-go {
  color: var(--jsco-bg);
}
/* 👎 Save is the primary button (badge tokens: ink with cream), brick on hover, instantly. */
html[data-skin="jsco"] #reader-dislike-save {
  transition: none;
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-dislike-save:hover:not(:disabled) {
    background: var(--jsco-accent);
    border-color: var(--jsco-accent);
  }
}
html[data-skin="jsco"] .reader-corpus-btn:not(.danger):hover:not(:disabled) {
  border-color: var(--jsco-ink);
}
@media (hover: hover) {
  html[data-skin="jsco"] .reader-corpus-btn:not(.danger):hover:not(:disabled) {
    background: var(--jsco-halo);
  }
}
/* Suggestion chips: square tags on paper; picked = reversed. */
html[data-skin="jsco"] .reader-dislike-chip {
  background: var(--jsco-paper);
  border-color: var(--jsco-ink);
  border-radius: 0;
}
@media (hover: hover) {
  html[data-skin="jsco"] .reader-dislike-chip:hover {
    background: var(--jsco-halo);
  }
}
html[data-skin="jsco"] .reader-dislike-chip.selected {
  background: var(--jsco-ink);
  border-color: var(--jsco-ink);
  color: var(--jsco-bg);
}
html[data-skin="jsco"] .reader-dislike-chip.selected .reader-dislike-chip-mark {
  color: var(--jsco-on-ink);
}
html[data-skin="jsco"] .stranger-modal-cost,
html[data-skin="jsco"] #reader-stranger-head {
  border-radius: 0;
}

/* ── Media lightbox: opaque warm ink, square cream-framed buttons ───────────── */
html[data-skin="jsco"] #reader-media-viewer {
  background: var(--jsco-ink);
}
html[data-skin="jsco"] #reader-media-viewer-img {
  outline: 1px solid var(--jsco-bg); /* the media frame, without changing the image's box */
}
html[data-skin="jsco"] #reader-media-viewer .rtc-media-missing {
  color: var(--jsco-on-ink);
}
html[data-skin="jsco"] #reader-media-viewer button {
  background: transparent;
  border: 1px solid var(--jsco-bg);
  border-radius: 0;
  color: var(--jsco-bg);
}
@media (hover: hover) {
  html[data-skin="jsco"] #reader-media-viewer button:hover {
    background: var(--jsco-halo);
    border-color: var(--jsco-halo);
    color: var(--jsco-ink);
  }
}
html[data-skin="jsco"] #reader-media-viewer button:focus-visible {
  outline: 2px solid var(--jsco-highlight); /* gold: the focus ring on ink */
  outline-offset: 2px;
}

/* ── Status bar and source-outage notice ────────────────────────────────────── */
/* Halted / ingest alert: a cornsilk band with brick 600 text over the 1px ink rule (token).
   Hydrating and done: bg-deep with ink text; the pulse dot is brick. Height unchanged. */
html[data-skin="jsco"] #reader-status-notice {
  background: var(--jsco-halo);
  color: var(--jsco-accent);
  font-weight: 600;
}
html[data-skin="jsco"] #reader-status-notice.hydrating,
html[data-skin="jsco"] #reader-status-notice.done {
  background: var(--jsco-bg-deep);
  color: var(--jsco-ink);
  font-weight: 400;
}
html[data-skin="jsco"] #reader-status-notice .pulse-dot {
  color: var(--jsco-accent);
}
/* A paper band with ink text (the token is defined here) and a secondary Retry. Its rule
   comes out of the bottom padding, so the band keeps its height. */
html[data-skin="jsco"] #unified-source-notice {
  background: var(--jsco-paper);
  border-bottom: 1px solid var(--jsco-ink);
  padding-bottom: 13px;
}

/* ── Phone (MOBILE_MQ: keep identical to reader.css and app.js) ─────────────── */
@media (max-width: 700px), (max-height: 500px) {
  /* The rail toggle and the posts expander are buttons: square paper chips, ink glyphs. */
  html[data-skin="jsco"] #reader-rail-toggle,
  html[data-skin="jsco"] #reader-app:not(.rail-collapsed) #reader-posts-expand {
    background: var(--jsco-paper);
    border-color: var(--jsco-ink);
    border-radius: 0;
    color: var(--jsco-ink);
  }
  @media (hover: hover) {
    html[data-skin="jsco"] #reader-rail-toggle:hover,
    html[data-skin="jsco"] #reader-app:not(.rail-collapsed) #reader-posts-expand:hover {
      background: var(--jsco-halo);
    }
  }
  /* The 44px strip: the initials are author names, so legacy's face, size and weights (bold
     when unread; ink, muted or Starred brick from the legacy rules and tokens); dividers
     become a 9px perforated rule. */
  html[data-skin="jsco"] #reader-app.rail-collapsed .reader-person::before {
    font-family: var(--jsco-font-legacy);
  }
  html[data-skin="jsco"] #reader-app.rail-collapsed .reader-authors-divider {
    border-bottom-style: dashed;
  }
  /* The current view's square is brick (above), so its initial is cream whatever its
     unread or Starred colour. */
  html[data-skin="jsco"] #reader-app.rail-collapsed .reader-person.selected::before {
    color: var(--jsco-bg);
  }
}

/* ── Reduced motion: no transitions ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="jsco"] .reader-person,
  html[data-skin="jsco"] .reader-tweet,
  html[data-skin="jsco"] .reader-read-collapsed,
  html[data-skin="jsco"] #reader-list-header h2::after,
  html[data-skin="jsco"] #reader-detail-header h2::after {
    transition: none;
  }
}