/* =====================================================================
   RONROV — skin "rovblog" (Journal Pink) · tags-page.css
   ---------------------------------------------------------------------
   The colour layer for tags.php. assets/css/tags-page.css carries the
   geometry; everything brand-coloured lives here, scoped
   body[data-skin="rovblog"] (specificity 0-1-1) so it beats the :root
   declarations in style.css without !important.

   Registered in manifest.json under css_files.page_map as
   "tags-page.css": "css/tags-page.css". Removing that one line is the
   whole rollback — the page falls back to the neutral structure layer
   and still works.

   Same three house rules as the rest of the skin:
   - Secular One ships one weight (400). Never 700+ on --rb-font-display.
   - #FF3399 is never small text (use --rb-accent-ink) and never sits
     under white text (use --rb-accent-solid).
   - #7C3AED never appears alone, only as the far end of a ramp that
     starts on the accent.
   ===================================================================== */

/* ---- 1. hero band ---------------------------------------------------
   The old hero was a teal gradient (#0f172a to #0f766e) sitting directly
   under a pink logo. This is the dark search band the skin already uses,
   with the logo's own pink-to-violet ramp washed across it.             */
body[data-skin="rovblog"] .th {
  background: var(--rb-footer);
}
/* One ramp, not two separate colour blobs: the violet only ever exists as
   the far end of a gradient that begins on the accent. */
body[data-skin="rovblog"] .th::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 116% at 82% -6%, rgba(255, 51, 153, 0.40) 0%, rgba(255, 51, 153, 0) 62%),
    linear-gradient(240deg, rgba(255, 51, 153, 0.26) 0%, rgba(124, 58, 237, 0.34) 100%);
}
/* hairline along the bottom edge, running the same way as the wash above
   it — pink at the reading-start side. See the noir tokens for the same
   240deg RTL pair. */
body[data-skin="rovblog"] .th::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(255, 51, 153, 0) 0%, rgba(255, 51, 153, 0.85) 26%,
    rgba(124, 58, 237, 0.85) 74%, rgba(124, 58, 237, 0) 100%);
}
html[dir="rtl"] body[data-skin="rovblog"] .th::after {
  background: linear-gradient(270deg,
    rgba(255, 51, 153, 0) 0%, rgba(255, 51, 153, 0.85) 26%,
    rgba(124, 58, 237, 0.85) 74%, rgba(124, 58, 237, 0) 100%);
}

body[data-skin="rovblog"] .th-eyebrow { color: var(--rb-accent); }
body[data-skin="rovblog"] .th h1 {
  font-family: var(--rb-font-display);
  font-weight: 400;              /* Secular One is a single weight */
  letter-spacing: 0;
  color: #FFFFFF;
}
body[data-skin="rovblog"] .th p { color: var(--rb-on-dark-2); }
body[data-skin="rovblog"] .th-n strong {
  font-family: var(--rb-font-display);
  font-weight: 400;
  color: #FFFFFF;
}
body[data-skin="rovblog"] .th-n small { color: var(--rb-on-dark-2); }

/* ---- 2. filter field (on the dark band) ------------------------------ */
body[data-skin="rovblog"] .ts {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
body[data-skin="rovblog"] .ts:focus-within {
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 4px rgba(255, 51, 153, 0.18);
}
body[data-skin="rovblog"] .ts-i { color: var(--rb-on-dark-2); }
body[data-skin="rovblog"] .ts input { color: #FFFFFF; font-family: var(--rb-font-body); }
body[data-skin="rovblog"] .ts input::placeholder { color: var(--rb-on-dark-2); }
body[data-skin="rovblog"] .ts-x {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
body[data-skin="rovblog"] .ts-x:hover { background: var(--rb-accent-solid); }

/* ---- 3. sticky letter rail ------------------------------------------
   Desktop: .header-wrap is position:fixed, --rb-header-h tall, z-index
   1000, so the rail parks under it at 76px and stays below it in the
   stack. On phones the skin's mobile.css turns the header into a sticky
   58px + safe-area bar at z-index 900, so both numbers change.          */
body[data-skin="rovblog"] .ix {
  top: var(--rb-header-h);
  background: rgba(246, 245, 243, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rb-hairline);
}
body[data-skin="rovblog"] .ix a { color: var(--rb-ink-2); }
body[data-skin="rovblog"] .ix a:hover {
  background: var(--rb-accent-soft);
  color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] .ix a.on {
  background: var(--rb-accent-solid);   /* 4.65:1 under white */
  color: #FFFFFF;
}

@media (max-width: 900px) {
  body[data-skin="rovblog"] .ix {
    top: calc(58px + env(safe-area-inset-top, 0px));
    z-index: 880;                        /* under the sticky header's 900 */
  }
  body[data-skin="rovblog"] .tg-sec {
    scroll-margin-top: calc(58px + env(safe-area-inset-top, 0px) + 56px);
  }
}

/* ---- 4. section heads ------------------------------------------------ */
body[data-skin="rovblog"] .sec-head h2 {
  font-family: var(--rb-font-display);
  font-weight: 400;
  color: var(--rb-ink);
}
body[data-skin="rovblog"] .sec-head p { color: var(--rb-faint); }

/* ---- 5. featured mosaic ---------------------------------------------
   The full-scale version of .rb-coll-card from the homepage: same radius,
   same shadow, same always-on scrim, same 3:4 crop.                     */
body[data-skin="rovblog"] .tgf-card {
  border-radius: var(--rb-r-lg);
  background: var(--rb-surface-2);
  box-shadow: var(--rb-sh-3);
}
body[data-skin="rovblog"] .tgf-card::after { background: var(--rb-scrim); }
body[data-skin="rovblog"] .tgf-card::before { border-color: var(--rb-accent); }
body[data-skin="rovblog"] .tgf-card:hover {
  box-shadow: 0 2px 6px rgba(22, 24, 29, 0.08), 0 18px 38px rgba(70, 45, 120, 0.24);
}
body[data-skin="rovblog"] .tgf-card:focus-visible { outline-color: var(--rb-accent); }
body[data-skin="rovblog"] .tgf-label {
  font-family: var(--rb-font-display);
  font-weight: 400;
  color: #FFFFFF;
}
body[data-skin="rovblog"] .tgf-n { color: var(--rb-ink); background: rgba(255, 255, 255, 0.92); }

/* ---- 6. the cloud ---------------------------------------------------- */
body[data-skin="rovblog"] .tg-lh b {
  font-family: var(--rb-font-display);
  font-weight: 400;
  color: var(--rb-ink);
}
body[data-skin="rovblog"] .tg-lh i { color: var(--rb-faint); }
body[data-skin="rovblog"] .tg-lh span {
  background: linear-gradient(to left, rgba(255, 51, 153, 0.55) 0%, rgba(255, 51, 153, 0) 100%);
}
html[dir="ltr"] body[data-skin="rovblog"] .tg-lh span {
  background: linear-gradient(to right, rgba(255, 51, 153, 0.55) 0%, rgba(255, 51, 153, 0) 100%);
}

/* The five steps escalate: quiet outline, firmer outline, soft pink fill,
   pink ring, gradient fill. Only the top step carries the logo ramp, so
   it stays a signal rather than decoration. */
body[data-skin="rovblog"] .tp[data-weight="1"] {
  background: var(--rb-surface); border-color: var(--rb-border); color: var(--rb-ink-2);
}
body[data-skin="rovblog"] .tp[data-weight="2"] {
  background: var(--rb-surface); border-color: #D7D3CC; color: var(--rb-ink);
}
body[data-skin="rovblog"] .tp[data-weight="3"] {
  background: var(--rb-accent-soft); border-color: transparent; color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] .tp[data-weight="4"] {
  background: var(--rb-surface); border-color: var(--rb-accent); color: var(--rb-accent-ink);
  box-shadow: var(--rb-sh-accent);
}
/*
  Step 5 starts the ramp on --rb-accent-solid, not on --rb-accent. White
  text over #FF3399 is about 3.4:1, and on a 20px chip the first third of
  the fill is exactly that. #DB1F80 is the shade the skin's own buttons
  already use under white (4.65:1), and the ramp still ends on the violet,
  so the chip still reads as the logo.
*/
body[data-skin="rovblog"] .tp[data-weight="5"] {
  background: linear-gradient(120deg, var(--rb-accent-solid) 0%, var(--rb-violet) 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: var(--rb-sh-accent);
}
html[dir="rtl"] body[data-skin="rovblog"] .tp[data-weight="5"] {
  background: linear-gradient(240deg, var(--rb-accent-solid) 0%, var(--rb-violet) 100%);
}

body[data-skin="rovblog"] .tp[data-weight="1"]:hover,
body[data-skin="rovblog"] .tp[data-weight="2"]:hover {
  border-color: var(--rb-accent); color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] .tp[data-weight="3"]:hover { background: rgba(255, 51, 153, 0.18); }
body[data-skin="rovblog"] .tp[data-weight="4"]:hover { background: var(--rb-accent-soft); }
body[data-skin="rovblog"] .tp[data-weight="5"]:hover { filter: brightness(1.07); }
body[data-skin="rovblog"] .tp:focus-visible { outline-color: var(--rb-accent); }

/*
  Count colours are set per step rather than faded. An opacity on the pink
  steps composites #CC1E77 to roughly #DD64A0 at 11px, which lands back
  under 4.5:1 — the same small-pink-text problem the accent-ink token
  exists to avoid.
*/
body[data-skin="rovblog"] .tp[data-weight="1"] .tp-c,
body[data-skin="rovblog"] .tp[data-weight="2"] .tp-c { color: var(--rb-faint); }
body[data-skin="rovblog"] .tp[data-weight="3"] .tp-c,
body[data-skin="rovblog"] .tp[data-weight="4"] .tp-c { color: var(--rb-accent-ink); }
body[data-skin="rovblog"] .tp[data-weight="5"] .tp-c {
  background: rgba(255, 255, 255, 0.22); color: #FFFFFF;
}

/* ---- 7. empty states ------------------------------------------------- */
body[data-skin="rovblog"] .tg-empty,
body[data-skin="rovblog"] .tg-none { color: var(--rb-muted); }
body[data-skin="rovblog"] .tg-none h3 {
  font-family: var(--rb-font-display); font-weight: 400; color: var(--rb-ink);
}