/* ══════════════════════════════════════════════════════════════════════
   "Old Grey Lady" theme — New York Times editorial styling.
   Serif typography, paper-and-ink palette, hairline rules, sharp corners,
   restrained NYT-blue links, inverted ink-on-paper primary buttons.

   Light scheme → newsprint (white page, black ink).
   Dark scheme  → NYT night mode (near-black page, warm-grey ink).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
:root[data-style="nyt"] {
  /* Square corners everywhere App.css uses the radius scale. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;

  /* Hairlines, not strokes — controls match the rules between stories. */
  --border-width: 1px;

  /* Instrument Serif is a condensed display face: at the shared scale its
     small sizes read a step smaller than other themes', so lift the low end. */
  --text-2xs: 0.78rem;
  --text-xs: 0.86rem;
  --text-sm: 0.94rem;
  --text-md: 1rem;
  --text-base: 1.06rem;
  --text-lg: 1.2rem;

  --color-text: light-dark(#121212, #e6e6e6);
  --color-text-secondary: light-dark(#5a5a5a, #ababab);
  --color-text-muted: light-dark(#767676, #8a8a8a);
  --color-on-accent: light-dark(#ffffff, #121212);
  --color-bg: light-dark(#ffffff, #121212);
  --color-surface: light-dark(#ffffff, #1e1e1e);
  --color-border: light-dark(#e2e2e2, #3a3a3a);
  --color-border-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
  --color-accent: light-dark(#121212, #ececec);
  --color-accent-hover: light-dark(#000000, #ffffff);
  --color-link: light-dark(#1a1a1a, #ececec);
  --color-link-hover: light-dark(#000000, #ffffff);
  --color-danger: light-dark(#b10000, #ff6b6b);
  --color-danger-bg: light-dark(#fdecec, #2a1414);
  --color-danger-hover: light-dark(#8a0000, #ff9a9a);
  --color-success: light-dark(#1a7f37, #6cc070);
  --color-success-bg: light-dark(#e6f4ea, #122a14);
  --color-success-hover: light-dark(#136a2c, #95d699);
  --color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  --color-header-user-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
  --color-header-user-bg-hover: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
  --color-option-bg: light-dark(#f2f2f2, #181818);
  --color-option-border: light-dark(#e2e2e2, #3a3a3a);
}

/* ══════════════════════════════════════════════════════════════════════
   Structural overrides
   ══════════════════════════════════════════════════════════════════════ */

/* ── Typography — one serif everywhere ───────────────────────────── */
[data-style="nyt"] {
  --font-body: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  /* Single weight, no small caps: never let the browser fake either — a
     smeared faux bold or spindly faux small caps give the typeface away.
     Hierarchy comes from size, italics and capitals instead. */
  font-synthesis: none;
}

/* This theme squares everything off — opt the FAB into a square too (it keeps
   its animations; only the corners change). */
[data-style="nyt"] .dump-fab,
[data-style="nyt"] .chat-fab {
  --fab-radius: 0;
}

/* ── Headlines — display serif ───────────────────────────────────── */
[data-style="nyt"] h1,
[data-style="nyt"] .app-header-brand,
[data-style="nyt"] .dump-title,
[data-style="nyt"] .dump-card-title,
[data-style="nyt"] .playlist-card-title,
[data-style="nyt"] .journal-card-title,
[data-style="nyt"] .playlist-detail-title,
[data-style="nyt"] .form-page-title,
[data-style="nyt"] .auth-card-title,
[data-style="nyt"] .profile-subpage-title,
[data-style="nyt"] .notifications-title,
[data-style="nyt"] .dump-create-title {
  font-family: var(--font-display);
  font-weight: 400; /* Instrument Serif is single-weight; size carries it */
  letter-spacing: 0;
  line-height: 1.14;
}

/* A confident broadsheet type scale */
[data-style="nyt"] .app-header-brand {
  font-size: 1.45rem;
  letter-spacing: 0;
}
[data-style="nyt"] .dump-title {
  font-size: 2.1rem;
}
[data-style="nyt"] .playlist-detail-title {
  font-size: 1.9rem;
}
[data-style="nyt"] .dump-card-title,
[data-style="nyt"] .playlist-card-title {
  font-size: 1.2rem;
  line-height: 1.2;
}
[data-style="nyt"] .journal-card-title {
  font-size: 1.15rem;
  line-height: 1.18;
}
[data-style="nyt"] .journal-card--feature .journal-card-title {
  font-size: 1.6rem;
}

/* Headline links underline on hover (ink stays ink). */
[data-style="nyt"] .dump-card-inner:hover .dump-card-title,
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-title,
[data-style="nyt"] .journal-card-title:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* …except over a photo, where the headline is white on a dark scrim: ink
   there goes black-on-black in the light scheme. */
[data-style="nyt"] .journal-card--image .journal-card-title:hover {
  color: #fff;
}
/* Over a playable thumb the card's "open" cue stands down (see App.css). */
[data-style="nyt"]
  .dump-card-inner:has(.dump-card-preview :is(button, a):hover)
  .dump-card-title {
  text-decoration: none;
}

/* ── Kickers — section labels & badges in spaced capitals ───────── */
[data-style="nyt"] .comment-section-title,
[data-style="nyt"] .related-section-title,
[data-style="nyt"] .form-page-eyebrow,
[data-style="nyt"] .playlist-badge,
[data-style="nyt"] .dump-card-private-badge,
[data-style="nyt"] .notif-group-label,
[data-style="nyt"] .follow-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Datelines — the serif's real italic, in muted ink ────────────── */
[data-style="nyt"] .dump-card-date,
[data-style="nyt"] .journal-card-meta,
[data-style="nyt"] .comment-time,
[data-style="nyt"] .notification-time,
[data-style="nyt"] .dump-edited-label {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

/* ── Lead note — a standfirst with an editorial drop cap ─────────── */
[data-style="nyt"] .dump-comment {
  border-left: none;
  padding: 0;
  margin: 0.35rem 0 0;
  opacity: 1;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1.6;
}
[data-style="nyt"] .dump-comment p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 0.78;
  padding: 0.12em 0.14em 0 0;
  color: var(--color-text);
}

/* ── Generous editorial leading for the lead note; comments stay tight ── */
[data-style="nyt"] .dump-comment,
[data-style="nyt"] .dump-comment p {
  line-height: 1.7;
}

/* Tight, ruled comment thread — small padding, snug leading, no extra gaps. */
[data-style="nyt"] .comment-body {
  line-height: 1.45;
}
[data-style="nyt"] .comment-node-inner {
  padding: 0.5rem 0;
  gap: 0.6rem;
}
[data-style="nyt"] .comment-meta {
  margin-bottom: 0.1rem;
}
[data-style="nyt"] .comment-list,
[data-style="nyt"] .comment-replies {
  gap: 0;
}

/* ── Content isn't boxed — it sits on the page, divided by hairline
   rules (à la nytimes.com). No surface fill, no card shadow. ─────────── */
[data-style="nyt"] .dump-card,
[data-style="nyt"] .playlist-card,
[data-style="nyt"] .user-result-item,
[data-style="nyt"] .comment-node-inner {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

/* The dump detail is a single article, not a list — no dividing rules. */
[data-style="nyt"] .dump-post-header,
[data-style="nyt"] .dump-rich-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Notifications keep their left bar (the unread indicator), lose the box. */
[data-style="nyt"] .notification-item {
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

/* No box-hover; the headline underline is the affordance. */
[data-style="nyt"] .dump-card:hover,
[data-style="nyt"] .playlist-card:hover,
[data-style="nyt"] .user-result-item:hover {
  background: transparent;
  border-color: var(--color-border);
}

/* Genuine containers (forms, embeds, the compose box) keep a hairline box. */
[data-style="nyt"] .auth-card,
[data-style="nyt"] .comment-top-form,
[data-style="nyt"] .rich-content-card {
  background: transparent;
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* Journal view: a section-front grid of stories divided by hairline rules,
   not boxed cards. Close the gaps and rule each cell on its top & left edge so
   the rules read as continuous row + column delimiters (à la nytimes.com).
   The outermost rules are masked off (below) so there's no frame around the
   block — CSS grid can't target a first column or a last row, hence the mask. */

/* How far a photo holds off the rules. It sits on the feed rather than on the
   grid because the break between two grids is cut to the same measure, and a
   property declared on the grid wouldn't reach it. */
[data-style="nyt"] .journal-feed {
  --journal-art-inset: 0.55rem;
}
[data-style="nyt"] .journal-grid {
  gap: 0;
  position: relative;
}
[data-style="nyt"] .journal-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  box-shadow: none;
}

/* Rules run to the edges of their cell, but a photo holds off them by
   --journal-art-inset. Between two cells the overshoot meets the neighbour's
   and the pair reads as one continuous rule; around the outside of the block
   there is no neighbour, so each one ends as a tick sticking out past the art
   — above and below it at the top and bottom of the grid, past its sides at
   the left and right.

   One page-coloured frame, laid over the grid's own edge and as thick as that
   inset, cuts all of them back to the art at once. It takes the outer rules
   (the first row's top, the first column's left) with it, which is the same
   frameless block the two strips it replaces were after. One frame per grid
   means one per sub-block, so every block reads frameless, not just the feed. */
[data-style="nyt"] .journal-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--journal-art-inset) solid var(--color-bg);
  z-index: 1;
  pointer-events: none;
}

/* A section front changes section on a rule, not an ornament — and here on a
   double one, the paired hairline a paper sets above a new section. Both
   lines are the grid's own rule colour and weight, so the break reads as the
   same pen that divides the cells, used twice. It needs less air than the
   base break asks for: each block already ends and begins on the
   page-coloured frame, which is holding its own rules back by the art inset. */
[data-style="nyt"] .journal-break {
  --journal-break-space: 1rem;
  --journal-break-rule: 1px solid var(--color-border);
  height: 3px;
  border-bottom: 1px solid var(--color-border);
  /* Stop where the art stops. The frame above holds the grid's own rules
     back by the inset, so a full-width break would overshoot the pictures
     it divides by exactly that much on each side. */
  margin: var(--journal-break-space) var(--journal-art-inset);
}
[data-style="nyt"] .journal-card:hover {
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

/* Inset content from the rules so the grid breathes — photos get a margin
   frame, text stories sit a little further off the lines. */
[data-style="nyt"] .journal-card--image {
  padding: 0.55rem;
}
[data-style="nyt"] .journal-card--image .journal-card-image {
  inset: 0.55rem;
}
[data-style="nyt"] .journal-card--quote,
[data-style="nyt"] .journal-card--text {
  --journal-quote-pad: 1.05rem;
  padding: var(--journal-quote-pad);
}

/* ── App header — crisp masthead rule ────────────────────────────── */
[data-style="nyt"] .app-header {
  border-bottom: 2px solid var(--color-text);
}

[data-style="nyt"] .header-search-below {
  border-bottom: 1px solid var(--color-border);
}


/* ── Primary button — inverted ink-on-paper (auto-flips per scheme) ─ */
[data-style="nyt"] .btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-text);
  box-shadow: none;
}

[data-style="nyt"] .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
  box-shadow: none;
  transform: none;
}

/* Secondary / outline buttons — plain hairline box */

/* ── Inputs — clean field, ink focus ─────────────────────────────── */
[data-style="nyt"] .form input:focus,
[data-style="nyt"] .form textarea:focus,
[data-style="nyt"] .mention-textarea-wrap textarea:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}

/* ── Modals — paper sheet with a soft editorial shadow ───────────── */
[data-style="nyt"] .modal-card,
[data-style="nyt"] .confirm-modal,
[data-style="nyt"] .user-menu-dropdown,
[data-style="nyt"] .user-list-popover {
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

[data-style="nyt"] .modal-header {
  border-bottom: 1px solid var(--color-border);
}

/* ── Rich content cards — keep brand cue, square it, drop the glow ── */
[data-style="nyt"] .rich-content-card {
  box-shadow: none;
}

/* ── Global player — framed strip ────────────────────────────────── */
[data-style="nyt"] .global-player {
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

/* ── Drop the reply "tree" rules; nesting reads from indentation alone ── */
[data-style="nyt"] .comment-replies {
  border-left: none;
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Monochrome UI chrome — colour is reserved for meaning (danger, the
   notification badge, brand-provider cues). Everything else is ink & paper.
   ══════════════════════════════════════════════════════════════════════ */

/* Feed sort — section-front tabs: an underline, not a filled chip. */
[data-style="nyt"] .feed-sort-btn {
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  padding: 0.2rem 0.1rem;
  margin: 0 0.3rem;
  font-weight: 400;
  letter-spacing: 0.1em; /* condensed caps need more air than the default */
}
[data-style="nyt"] .feed-sort-btn:hover {
  background: none;
  color: var(--color-text);
}
[data-style="nyt"] .feed-sort-btn.active {
  background: none;
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

/* Square off the remaining pills & chips. */
[data-style="nyt"] .playlist-badge,
[data-style="nyt"] .dump-card-private-badge,
[data-style="nyt"] .notifications-unread-pill,
[data-style="nyt"] .notification-badge,
[data-style="nyt"] .vote-btn,
[data-style="nyt"] .follow-btn,
[data-style="nyt"] .btn-add-playlist,
[data-style="nyt"] .invite-btn,
[data-style="nyt"] .profile-role-chip {
  border: none;
}

/* Category management chips / inline editor: squared, no accent glow. */

[data-style="nyt"] .category-editor {
  box-shadow: none;
}

/* Links are now ink, so give the user-link classes a hover underline
   to keep them findable without colour. */
[data-style="nyt"] .dump-op-link:hover,
[data-style="nyt"] .playlist-card-owner:hover,
[data-style="nyt"] .playlist-detail-owner:hover,
[data-style="nyt"] .comment-author:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Desaturate decorative UI emoji/icons (the header truck, notification
   type icons, card glyphs…). Real content — avatars, uploaded thumbnails,
   media — is left in colour. grayscale() also greys the notif icon tints. */
[data-style="nyt"] .app-header-brand,
[data-style="nyt"] .nav-search-btn,
[data-style="nyt"] .search-bar-btn,
[data-style="nyt"] .notification-bell-icon,
[data-style="nyt"] .notif-icon,
[data-style="nyt"] .notifications-empty-icon,
[data-style="nyt"] .notifications-title-bell,
[data-style="nyt"] .chat-button-icon,
[data-style="nyt"] .dump-card-preview-icon,
[data-style="nyt"] .playlist-card-icon,
[data-style="nyt"] .rich-content-compact-icon,
[data-style="nyt"] .journal-card-glyph,
[data-style="nyt"] .fdz__file-icon,
[data-style="nyt"] .thumb-placeholder-icon,
[data-style="nyt"] .empty-state {
  filter: grayscale(1);
}

/* Monochrome by design — a dumped site's brand color doesn't get to tint the
   page, so the placeholder is the theme's own surface with a gray glyph. */
[data-style="nyt"] {
  --thumb-tint-strength: 0%;
}

/* ── Tighter, continuous ruled feed (no inter-item gap; the hairline
   bottom rules read as one column). Even vertical padding per item. ── */
[data-style="nyt"] .dump-feed {
  gap: 0;
}
[data-style="nyt"] .dump-card-inner,
[data-style="nyt"] .playlist-card-inner {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* ── Card thumbnail — square & flat box (no pop/shadow), but keep a
   hover effect adapted to the theme: the image zooms gently inside its
   fixed, clipped frame, the editorial way. ───────────────────────── */
[data-style="nyt"] .dump-card-preview,
[data-style="nyt"] .playlist-card-preview {
  transition: none;
}
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview,
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-preview {
  transform: none;
  box-shadow: none;
}
[data-style="nyt"] .dump-card-preview img,
[data-style="nyt"] .playlist-card-preview img {
  transition: transform 0.3s ease;
}
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview img,
[data-style="nyt"] .playlist-card-inner:hover .playlist-card-preview img {
  transform: scale(1.09);
}

/* ── Category switcher dropdown — paper sheet, squared ───────────── */
/* Match the other nyt popovers (1px rule + editorial shadow, no rounding).
   Option rows inherit the global square-off, so no per-row rule is needed. */
[data-style="nyt"] .category-switcher-menu {
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}